Merge pull request #1453 from blockscout/tom2drum/issue-1415

hide metamask icon in tables
blockscout · Dec 26, 2023 · 95243dc · 95243dc
2 parents f3b4c3d + 371f60e
commit 95243dc
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/ui/address/tokens/ERC20TokensTableItem.tsx b/ui/address/tokens/ERC20TokensTableItem.tsx
@@ -22,7 +22,13 @@ const ERC20TokensTableItem = ({
   } = getCurrencyValue({ value: value, exchangeRate: token.exchange_rate, decimals: token.decimals, accuracy: 8, accuracyUsd: 2 });
 
   return (
-    <Tr>
+    <Tr
+      sx={{
+        '&:hover [aria-label="Add token to wallet"]': {
+          opacity: 1,
+        },
+      }}
+    >
       <Td verticalAlign="middle">
         <TokenEntity
           token={ token }
@@ -39,7 +45,7 @@ const ERC20TokensTableItem = ({
             isLoading={ isLoading }
             noIcon
           />
-          <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading }/>
+          <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading } opacity="0"/>
         </Flex>
       </Td>
       <Td isNumeric verticalAlign="middle">

diff --git a/ui/shared/address/AddressAddToWallet.tsx b/ui/shared/address/AddressAddToWallet.tsx
@@ -106,7 +106,7 @@ const AddressAddToWallet = ({ className, token, isLoading, variant = 'icon', ico
 
   return (
     <Tooltip label={ `Add token to ${ WALLETS_INFO[wallet].name }` }>
-      <Box className={ className } display="inline-flex" cursor="pointer" onClick={ handleClick } flexShrink={ 0 }>
+      <Box className={ className } display="inline-flex" cursor="pointer" onClick={ handleClick } flexShrink={ 0 } aria-label="Add token to wallet">
         <Icon as={ WALLETS_INFO[wallet].icon } boxSize={ iconSize }/>
       </Box>
     </Tooltip>

diff --git a/ui/tokens/TokensTableItem.tsx b/ui/tokens/TokensTableItem.tsx
@@ -51,7 +51,13 @@ const TokensTableItem = ({
   };
 
   return (
-    <Tr>
+    <Tr
+      sx={{
+        '&:hover [aria-label="Add token to wallet"]': {
+          opacity: 1,
+        },
+      }}
+    >
       <Td>
         <Flex alignItems="flex-start">
           <Skeleton
@@ -81,7 +87,12 @@ const TokensTableItem = ({
                 fontSize="sm"
                 fontWeight={ 500 }
               />
-              <AddressAddToWallet token={ token } isLoading={ isLoading } iconSize={ 5 }/>
+              <AddressAddToWallet
+                token={ token }
+                isLoading={ isLoading }
+                iconSize={ 5 }
+                opacity={ 0 }
+              />
             </Flex>
             <Flex columnGap={ 1 }>
               <Tag isLoading={ isLoading }>{ type }</Tag>