From 6669125dd3e13b99a83e34f234050552e8436f6c Mon Sep 17 00:00:00 2001
From: Art <artur@vegaprotocol.io>
Date: Fri, 24 Nov 2023 11:20:37 +0100
Subject: [PATCH] feat(trading): copy apply referral link from code tile
 (#5338)

---
 apps/trading/client-pages/referrals/tile.tsx  | 28 +++++++++++++++++--
 .../copy-with-tooltip/copy-with-tooltip.tsx   | 23 +++++++++++++--
 2 files changed, 46 insertions(+), 5 deletions(-)

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 (
     <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>
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 (
     <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>