chore(trading): vega icons for withrawals table and wallet dropdown (#4203)

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import classNames from 'classnames';
 import { truncateByChars } from '@vegaprotocol/utils';
@@ -12,9 +12,10 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
-  Icon,
   Drawer,
   DropdownMenuSeparator,
+  VegaIcon,
+  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { PubKey } from '@vegaprotocol/wallet';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
@@ -249,14 +250,14 @@ const KeypairItem = ({ pk }: { pk: PubKey }) => {
             {truncateByChars(pk.publicKey)}
           </span>
         </span>
-        <span>
+        <span className="inline-flex items-center gap-1">
           <CopyToClipboard text={pk.publicKey} onCopy={() => setCopied(true)}>
             <button
               data-testid="copy-vega-public-key"
               onClick={(e) => e.stopPropagation()}
             >
               <span className="sr-only">{t('Copy')}</span>
-              <Icon name="duplicate" className="mr-2" />
+              <VegaIcon name={VegaIconNames.COPY} />
             </button>
           </CopyToClipboard>
           {copied && (
@@ -278,34 +279,20 @@ const KeypairListItem = ({
   isActive: boolean;
   onSelectItem: (pk: string) => void;
 }) => {
-  const [copied, setCopied] = useState(false);
-  useEffect(() => {
-    // eslint-disable-next-line
-    let timeout: any;
-
-    if (copied) {
-      timeout = setTimeout(() => {
-        setCopied(false);
-      }, 800);
-    }
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [copied]);
+  const [copied, setCopied] = useCopyTimeout();
 
   return (
     <div
       className="flex flex-col w-full ml-4 mr-2 mb-4"
       data-testid={`key-${pk.publicKey}-mobile`}
     >
-      <span className="mr-2">
+      <span className="flex gap-2 items-center mr-2">
         <button onClick={() => onSelectItem(pk.publicKey)}>
           <span className="uppercase">{pk.name}</span>
         </button>
-        {isActive && <Icon name="tick" className="ml-2" />}
+        {isActive && <VegaIcon name={VegaIconNames.TICK} />}
       </span>
-      <span className="text-neutral-500 dark:text-neutral-400">
+      <span className="flex gap-2 items-center">
         {truncateByChars(pk.publicKey)}{' '}
         <CopyToClipboard text={pk.publicKey} onCopy={() => setCopied(true)}>
           <button
@@ -313,7 +300,7 @@ const KeypairListItem = ({
             onClick={(e) => e.stopPropagation()}
           >
             <span className="sr-only">{t('Copy')}</span>
-            <Icon name="duplicate" className="mr-2" />
+            <VegaIcon name={VegaIconNames.COPY} />
           </button>
         </CopyToClipboard>
         {copied && (

libs/ui-toolkit/src/components/copy-with-tooltip/copy-with-tooltip.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
-import { useEffect, useState } from 'react';
 import { Tooltip } from '../tooltip';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import { useCopyTimeout } from '@vegaprotocol/react-helpers';
 
 export const TOOLTIP_TIMEOUT = 800;
 
@@ -11,22 +11,7 @@ export interface CopyWithTooltipProps {
 }
 
 export function CopyWithTooltip({ children, text }: CopyWithTooltipProps) {
-  const [copied, setCopied] = useState(false);
-
-  useEffect(() => {
-    // eslint-disable-next-line
-    let timeout: any;
-
-    if (copied) {
-      timeout = setTimeout(() => {
-        setCopied(false);
-      }, TOOLTIP_TIMEOUT);
-    }
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [copied]);
+  const [copied, setCopied] = useCopyTimeout();
 
   return (
     <CopyToClipboard text={text} onCopy={() => setCopied(true)}>

libs/ui-toolkit/src/components/dialog/dialog.tsx

@@ -3,7 +3,7 @@ import * as DialogPrimitives from '@radix-ui/react-dialog';
 import classNames from 'classnames';
 
 import { getIntentBorder } from '../../utils/intent';
-import { Icon } from '../icon';
+import { VegaIcon, VegaIconNames } from '../icon';
 
 import type { ReactNode } from 'react';
 import type { Intent } from '../../utils/intent';
@@ -77,7 +77,7 @@ export function Dialog({
                 className="absolute p-2 top-0 right-0 md:top-2 md:right-2"
                 data-testid="dialog-close"
               >
-                <Icon name="cross" />
+                <VegaIcon name={VegaIconNames.CROSS} />
               </DialogPrimitives.Close>
             )}
             <div className="flex gap-4 max-w-full">

libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import type { ComponentProps, ReactNode } from 'react';
 import { forwardRef } from 'react';
 import { VegaIcon, VegaIconNames } from '../icon';
-import { Icon } from '../icon';
 import { useCopyTimeout } from '@vegaprotocol/react-helpers';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { t } from '@vegaprotocol/i18n';
@@ -140,7 +139,7 @@ export const DropdownMenuItemIndicator = forwardRef<
     ref={forwardedRef}
     className="flex-end"
   >
-    <Icon name="tick" />
+    <VegaIcon name={VegaIconNames.TICK} />
   </DropdownMenuPrimitive.ItemIndicator>
 ));
 

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-tick.tsx

@@ -0,0 +1,7 @@
+export const IconTick = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <path d="M6 11.2505L13.6252 3.62523L14.3748 4.37477L6 12.7495L1.62523 8.37477L2.37476 7.62523L6 11.2505Z" />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts

@@ -18,6 +18,7 @@ import { IconCross } from './svg-icons/icon-cross';
 import { IconKebab } from './svg-icons/icon-kebab';
 import { IconArrowDown } from './svg-icons/icon-arrow-down';
 import { IconChevronDown } from './svg-icons/icon-chevron-down';
+import { IconTick } from './svg-icons/icon-tick';
 
 export enum VegaIconNames {
   BREAKDOWN = 'breakdown',
@@ -40,6 +41,7 @@ export enum VegaIconNames {
   TREND_UP = 'trend-up',
   CROSS = 'cross',
   KEBAB = 'kebab',
+  TICK = 'tick',
 }
 
 export const VegaIconNameMap: Record<
@@ -66,4 +68,5 @@ export const VegaIconNameMap: Record<
   'trend-up': IconTrendUp,
   cross: IconCross,
   kebab: IconKebab,
+  tick: IconTick,
 };

libs/web3/src/lib/withdrawal-approval-dialog.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   CopyWithTooltip,
   Dialog,
-  Icon,
   KeyValueTable,
   KeyValueTableRow,
   Splash,
@@ -32,7 +31,7 @@ export const WithdrawalApprovalDialog = ({
   return (
     <Dialog
       title={t('Save withdrawal details')}
-      icon={<Icon name="info-sign"></Icon>}
+      icon={<VegaIcon name={VegaIconNames.BREAKDOWN} size={16} />}
       open={open}
       onChange={(isOpen) => onChange(isOpen)}
       onCloseAutoFocus={(e) => {

libs/withdraws/src/lib/withdrawals-table.tsx

@@ -15,7 +15,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  Icon,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
@@ -193,9 +192,8 @@ export const CompleteCell = ({ data, complete }: CompleteCellProps) => {
               }
             }}
           >
-            <span>
-              <Icon name="info-sign" size={4} /> {t('View withdrawal details')}
-            </span>
+            <VegaIcon name={VegaIconNames.BREAKDOWN} size={16} />
+            {t('View withdrawal details')}
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>