feat: bring back address copy button

ava-labs · Dec 12, 2024 · 0f46aec · 0f46aec
1 parent 8a72bbe
commit 0f46aec
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 3 deletions.
diff --git a/src/pages/Accounts/components/AccountItem.tsx b/src/pages/Accounts/components/AccountItem.tsx
@@ -1,6 +1,9 @@
 import {
   Checkbox,
   Collapse,
+  CopyIcon,
+  Grow,
+  IconButton,
   Stack,
   Tooltip,
   Typography,
@@ -15,6 +18,7 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
+import { NetworkVMType } from '@avalabs/core-chains-sdk';
 
 import { useBalancesContext } from '@src/contexts/BalancesProvider';
 import { useAccountsContext } from '@src/contexts/AccountsProvider';
@@ -154,6 +158,22 @@ export const AccountItem = forwardRef(
       useAccountRename(account);
     const { prompt: promptRemove, renderDialog: removeDialog } =
       useAccountRemoval(toBeRemoved);
+    const handleCopyClick = useCallback(
+      (ev) => {
+        ev.stopPropagation();
+        if (!address || !network?.vmName) {
+          return;
+        }
+        const eventName = getCopyEventNameByNetworkType(network.vmName);
+
+        navigator.clipboard.writeText(address);
+        toast.success('Copied!', { duration: 1000 });
+        capture(eventName, {
+          type: account.type,
+        });
+      },
+      [address, account.type, capture, network?.vmName, toast]
+    );
 
     return (
       <>
@@ -216,8 +236,7 @@ export const AccountItem = forwardRef(
                 backgroundColor: isActive ? 'grey.700' : 'grey.800',
                 color: 'grey.50',
               },
-              pt: 0.5,
-              pb: 1,
+              py: 0.75,
               pl: 2,
               pr: 1,
             }}
@@ -243,7 +262,13 @@ export const AccountItem = forwardRef(
                   isActive={isActive}
                 />
                 {address && (
-                  <Stack direction="row">
+                  <Stack
+                    sx={{
+                      flexDirection: 'row',
+                      gap: 1,
+                      alignItems: 'center',
+                    }}
+                  >
                     <Tooltip title={address} disableInteractive>
                       <Typography
                         variant="caption"
@@ -252,6 +277,16 @@ export const AccountItem = forwardRef(
                         {truncateAddress(address)}
                       </Typography>
                     </Tooltip>
+                    <Grow in={cardHovered || isActive}>
+                      <IconButton
+                        color="primary"
+                        size="small"
+                        sx={{ p: 0.5 }}
+                        onClick={handleCopyClick}
+                      >
+                        <CopyIcon size={12} />
+                      </IconButton>
+                    </Grow>
                   </Stack>
                 )}
               </Stack>
@@ -299,3 +334,18 @@ export const AccountItem = forwardRef(
 );
 
 AccountItem.displayName = 'AccountItem';
+
+const getCopyEventNameByNetworkType = (type: NetworkVMType) => {
+  switch (type) {
+    case NetworkVMType.BITCOIN:
+      return 'AccountSelectorBtcAddressCopied';
+    case NetworkVMType.EVM:
+      return 'AccountSelectorEthAddressCopied';
+    case NetworkVMType.AVM:
+      return 'AccountSelectorAVMAddressCopied';
+    case NetworkVMType.PVM:
+      return 'AccountSelectorPVMAddressCopied';
+    default:
+      return 'AccountSelectorAddressCopied';
+  }
+};
diff --git a/src/pages/Accounts/components/AccountName.tsx b/src/pages/Accounts/components/AccountName.tsx
@@ -64,6 +64,7 @@ export default function AccountName({
       <Grow {...commonTransitionProps} in={cardHovered && !isManageMode}>
         <IconButton
           size="small"
+          sx={{ p: 0.25 }}
           onClick={(e) => {
             e.stopPropagation();
             promptRename();