feat(trading): copy apply referral link from code tile (#5338)

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 (
     <StatTile
       title={t('Your referral code')}
@@ -89,10 +96,27 @@ export const CodeTile = ({
             {code}
           </div>
         </Tooltip>
-        <CopyWithTooltip text={code}>
+        <CopyWithTooltip text={code} description={t('Copy referral code')}>
           <Button className="text-sm no-underline !py-0 !px-0 h-fit !bg-transparent">
             <span className="sr-only">{t('Copy')}</span>
-            <VegaIcon size={24} name={VegaIconNames.COPY} />
+            <VegaIcon size={20} name={VegaIconNames.COPY} />
+          </Button>
+        </CopyWithTooltip>
+        <CopyWithTooltip
+          text={applyCodeLink}
+          description={
+            <>
+              {t('Copy shareable apply code link')}
+              {': '}
+              <a className="text-vega-blue-500 underline" href={applyCodeLink}>
+                {truncate(applyCodeLink, { length: 32 })}
+              </a>
+            </>
+          }
+        >
+          <Button className="text-sm no-underline !py-0 !px-0 h-fit !bg-transparent">
+            <span className="sr-only">{t('Copy')}</span>
+            <VegaIcon size={20} name={VegaIconNames.OPEN_EXTERNAL} />
           </Button>
         </CopyWithTooltip>
       </div>

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 (
     <CopyToClipboard text={text} onCopy={() => 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 */}
       <span>
-        <Tooltip description="Copied" open={copied} align="center">
+        <Tooltip
+          description={copied ? copiedDescription : description}
+          open={description ? copied || undefined : copied}
+          align="center"
+        >
           {children}
         </Tooltip>
       </span>