diff --git a/apps/trading/client-pages/referrals/tile.tsx b/apps/trading/client-pages/referrals/tile.tsx index 39a9139eb..28453de82 100644 --- a/apps/trading/client-pages/referrals/tile.tsx +++ b/apps/trading/client-pages/referrals/tile.tsx @@ -8,6 +8,9 @@ import classNames from 'classnames'; import type { HTMLAttributes, ReactNode } from 'react'; import { Button } from './buttons'; import { useT } from '../../lib/use-t'; +import { Routes } from '../../lib/links'; +import { DApp, useLinks } from '@vegaprotocol/environment'; +import truncate from 'lodash/truncate'; export const Tile = ({ className, @@ -63,6 +66,10 @@ export const CodeTile = ({ className?: string; }) => { const t = useT(); + const consoleLink = useLinks(DApp.Console); + const applyCodeLink = consoleLink( + `#${Routes.REFERRALS_APPLY_CODE}?code=${code}` + ); return ( - + + + + {t('Copy shareable apply code link')} + {': '} + + {truncate(applyCodeLink, { length: 32 })} + + + } + > + diff --git a/libs/ui-toolkit/src/components/copy-with-tooltip/copy-with-tooltip.tsx b/libs/ui-toolkit/src/components/copy-with-tooltip/copy-with-tooltip.tsx index 82392ac95..9cb23d5c2 100644 --- a/libs/ui-toolkit/src/components/copy-with-tooltip/copy-with-tooltip.tsx +++ b/libs/ui-toolkit/src/components/copy-with-tooltip/copy-with-tooltip.tsx @@ -1,24 +1,41 @@ -import type { ReactElement } from 'react'; +import type { ReactElement, ReactNode } from 'react'; import { Tooltip } from '../tooltip'; import CopyToClipboard from 'react-copy-to-clipboard'; import { useCopyTimeout } from '@vegaprotocol/react-helpers'; +import { useT } from '../../use-t'; export const TOOLTIP_TIMEOUT = 800; export interface CopyWithTooltipProps { children: ReactElement; text: string; + /** + * The tooltip's description to be shown on mouse over + * (replaced by "Copied" when clicked on) + */ + description?: ReactNode; } -export function CopyWithTooltip({ children, text }: CopyWithTooltipProps) { +export function CopyWithTooltip({ + children, + text, + description, +}: CopyWithTooltipProps) { + const t = useT(); const [copied, setCopied] = useCopyTimeout(); + const copiedDescription = t('Copied'); + return ( setCopied(true)}> {/* // @ts-ignore not sure about this typescript error. Needs this wrapping span as tooltip component interferes with element used to capture click for copy */} - + {children}