add token to metamask

global.d.ts

+import type { MetaMaskInpageProvider } from '@metamask/providers';
+
+declare global {
+  interface Window {
+    ethereum: MetaMaskInpageProvider;
+  }
+}

package.json

@@ -31,6 +31,7 @@
     "@chakra-ui/theme-tools": "^2.0.2",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@metamask/providers": "^10.2.1",
     "@sentry/nextjs": "^7.12.1",
     "@sentry/react": "^7.13.0",
     "@sentry/tracing": "^7.13.0",

tsconfig.json

@@ -16,6 +16,6 @@
     "incremental": true,
     "baseUrl": ".",
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts", "decs.d.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "decs.d.ts", "global.d.ts"],
   "exclude": ["node_modules", "node_modules_linux"],
 }

types/api/address.ts

@@ -15,7 +15,7 @@ export interface Address {
   name: string | null;
   private_tags: Array<AddressTag> | null;
   public_tags: Array<AddressTag> | null;
-  tokenInfo: TokenInfo | null;
+  token: TokenInfo | null;
   watchlist_names: Array<WatchlistName> | null;
 }
 

ui/address/AddressDetails.tsx

@@ -9,7 +9,6 @@ import type { Address as TAddress, AddressCounters, AddressTokenBalance } from '
 import { QueryKeys } from 'types/client/queries';
 
 import appConfig from 'configs/app/config';
-import metamaskIcon from 'icons/metamask.svg';
 import qrCodeIcon from 'icons/qr_code.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
 import walletIcon from 'icons/wallet.svg';
@@ -21,6 +20,8 @@ import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import ExternalLink from 'ui/shared/ExternalLink';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 
+import AddressAddToMetaMask from './details/AddressAddToMetaMask';
+
 interface Props {
   addressQuery: UseQueryResult<TAddress>;
 }
@@ -64,7 +65,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
           { isMobile ? <HashStringShorten hash={ addressQuery.data.hash }/> : addressQuery.data.hash }
         </Text>
         <CopyToClipboard text={ addressQuery.data.hash }/>
-        <Icon as={ metamaskIcon } boxSize={ 6 } ml={ 2 }/>
+        { addressQuery.data.is_contract && addressQuery.data.token && <AddressAddToMetaMask ml={ 2 } token={ addressQuery.data.token }/> }
         <Button variant="outline" size="sm" ml={ 3 }>
           <Icon as={ starOutlineIcon } boxSize={ 5 }/>
         </Button>

ui/address/details/AddressAddToMetaMask.tsx

+import { Box, chakra, Icon, Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo } from 'types/api/tokenInfo';
+
+import metamaskIcon from 'icons/metamask.svg';
+import useToast from 'lib/hooks/useToast';
+
+interface Props {
+  className?: string;
+  token: TokenInfo;
+}
+
+const AddressAddToMetaMask = ({ className, token }: Props) => {
+  const toast = useToast();
+
+  const handleClick = React.useCallback(async() => {
+    try {
+      const wasAdded = await window.ethereum.request({
+        method: 'wallet_watchAsset',
+        params: {
+          type: 'ERC20', // Initially only supports ERC20, but eventually more!
+          options: {
+            address: token.address,
+            symbol: token.symbol,
+            decimals: Number(token.decimals) || 18,
+          },
+        },
+      });
+
+      if (wasAdded) {
+        toast({
+          position: 'top-right',
+          title: 'Success',
+          description: 'Successfully added token to MetaMask',
+          status: 'success',
+          variant: 'subtle',
+          isClosable: true,
+        });
+      }
+    } catch (error) {
+      toast({
+        position: 'top-right',
+        title: 'Error',
+        description: (error as Error)?.message || 'Something went wrong',
+        status: 'error',
+        variant: 'subtle',
+        isClosable: true,
+      });
+    }
+  }, [ toast, token ]);
+
+  if (token.type !== 'ERC-20' || !('ethereum' in window)) {
+    return null;
+  }
+
+  return (
+    <Tooltip label="Add token to MetaMask">
+      <Box className={ className } display="inline-flex" cursor="pointer" onClick={ handleClick }>
+        <Icon as={ metamaskIcon } boxSize={ 6 }/>
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default React.memo(chakra(AddressAddToMetaMask));