hide send button when token is not transferable (#1706)

Co-authored-by: Daniel Sinclair <[email protected]>

src/core/types/assets.ts

@@ -40,6 +40,7 @@ export interface ParsedAsset {
     isBridgeable: boolean;
     networks: { [id in ChainId]?: { bridgeable: boolean } };
   };
+  transferable?: boolean;
 }
 
 export interface ParsedUserAsset extends ParsedAsset {
@@ -101,6 +102,7 @@ export type AssetApiResponse = {
   };
   type?: AssetType;
   interface?: 'erc-721' | 'erc-1155';
+  transferable?: boolean;
 };
 
 type AssetType = ProtocolType | 'nft';

src/core/utils/assets.ts

@@ -132,6 +132,7 @@ export function parseAsset({
         networks: asset.bridging.networks,
       },
     }),
+    transferable: asset.transferable,
   };
 
   return parsedAsset;

src/entries/popup/pages/home/TokenDetails/TokenDetails.tsx

@@ -185,7 +185,9 @@ function SwapSend({
     navigate(to);
   };
   const isBridgeable = token.bridging?.isBridgeable;
+  const isTransferable = token.transferable ?? true;
 
+  if (!isSwappable && !isBridgeable && !isTransferable) return null;
   return (
     <Box display="flex" gap="8px">
       {isSwappable && (
@@ -213,17 +215,19 @@ function SwapSend({
           {i18n.t('token_details.bridge')}
         </Button>
       )}
-      <Button
-        height="32px"
-        variant="flat"
-        width="full"
-        color="accent"
-        symbol="paperplane.fill"
-        onClick={() => selectTokenAndNavigate(ROUTES.SEND)}
-        tabIndex={0}
-      >
-        {i18n.t('token_details.send')}
-      </Button>
+      {isTransferable && (
+        <Button
+          height="32px"
+          variant="flat"
+          width="full"
+          color="accent"
+          symbol="paperplane.fill"
+          onClick={() => selectTokenAndNavigate(ROUTES.SEND)}
+          tabIndex={0}
+        >
+          {i18n.t('token_details.send')}
+        </Button>
+      )}
     </Box>
   );
 }
@@ -828,9 +832,9 @@ export function TokenDetails() {
                   );
                 })}
               </Stack>
+              <Separator color="separatorTertiary" />
             </Box>
           ) : null}
-          <Separator color="separatorTertiary" />
           <About token={token} tokenInfo={tokenInfo} />
         </Box>
       )}