Merge pull request #1780 from blockscout/1280-hf2

1280 hf2

mocks/tokens/tokenTransfer.ts

@@ -208,6 +208,7 @@ export const erc404A: TokenTransfer = {
   total: {
     value: '42000000000000000000000000',
     decimals: '18',
+    token_id: null,
   },
   tx_hash: '0x05d6589367633c032d757a69c5fb16c0e33e3994b0d9d1483f82aeee1f05d746',
   type: 'token_transfer',

types/api/tokenTransfer.ts

@@ -17,10 +17,11 @@ export type Erc1155TotalPayload = {
 }
 
 export type Erc404TotalPayload = {
-  decimals: string | null;
-  value: string | null;
+  decimals: string;
+  value: string;
+  token_id: null;
 } | {
-  token_id: string | null;
+  token_id: string;
 };
 
 export type TokenTransfer = (

ui/shared/Web3ModalProvider.tsx

@@ -27,6 +27,7 @@ const init = () => {
         '--w3m-z-index': zIndices.modal,
       },
       featuredWalletIds: [],
+      allowUnsupportedChain: true,
     });
   } catch (error) {}
 };

ui/tx/FtTokenTransferSnippet.tsx

+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo } from 'types/api/token';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+
+interface Props {
+  token: TokenInfo;
+  value: string;
+  decimals: string | null;
+}
+const FtTokenTransferSnippet = ({ token, value, decimals }: Props) => {
+  const { valueStr, usd } = getCurrencyValue({
+    value: value,
+    exchangeRate: token.exchange_rate,
+    accuracyUsd: 2,
+    decimals: decimals,
+  });
+
+  return (
+    <>
+      <chakra.span color="text_secondary">for</chakra.span>
+      <span>{ valueStr }</span>
+      <TokenEntity
+        token={{ ...token, name: token.symbol || token.name }}
+        noCopy
+        noSymbol
+        w="auto"
+      />
+      { usd && <chakra.span color="text_secondary">(${ usd })</chakra.span> }
+    </>
+  );
+};
+
+export default React.memo(FtTokenTransferSnippet);

ui/tx/details/TxDetailsTokenTransfer.tsx

-import { Flex, chakra } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type {
@@ -9,11 +9,11 @@ import type {
   Erc404TotalPayload,
 } from 'types/api/tokenTransfer';
 
-import getCurrencyValue from 'lib/getCurrencyValue';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet';
 
+import FtTokenTransferSnippet from '../FtTokenTransferSnippet';
+
 interface Props {
   data: TTokenTransfer;
 }
@@ -24,26 +24,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
     switch (data.token.type) {
       case 'ERC-20': {
         const total = data.total as Erc20TotalPayload;
-        const { valueStr, usd } = getCurrencyValue({
-          value: total.value,
-          exchangeRate: data.token.exchange_rate,
-          accuracyUsd: 2,
-          decimals: total.decimals,
-        });
-
-        return (
-          <>
-            <chakra.span color="text_secondary">for</chakra.span>
-            <span>{ valueStr }</span>
-            <TokenEntity
-              token={{ ...data.token, name: data.token.symbol || data.token.name }}
-              noCopy
-              noSymbol
-              w="auto"
-            />
-            { usd && <chakra.span color="text_secondary">(${ usd })</chakra.span> }
-          </>
-        );
+        return <FtTokenTransferSnippet token={ data.token } value={ total.value } decimals={ total.decimals }/>;
       }
 
       case 'ERC-721': {
@@ -71,16 +52,22 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
 
       case 'ERC-404': {
         const total = data.total as Erc404TotalPayload;
-        return (
-          <NftTokenTransferSnippet
-            token={ data.token }
-            tokenId={ 'token_id' in total ? total.token_id : null }
-            value={ 'value' in total && total.value ?
-              getCurrencyValue({ value: total.value, decimals: total.decimals || '0', accuracy: 2 }).valueStr :
-              '1'
-            }
-          />
-        );
+
+        if (total.token_id !== null) {
+          return (
+            <NftTokenTransferSnippet
+              token={ data.token }
+              tokenId={ total.token_id }
+              value="1"
+            />
+          );
+        } else {
+          if (total.value === null) {
+            return null;
+          }
+
+          return <FtTokenTransferSnippet token={ data.token } value={ total.value } decimals={ total.decimals }/>;
+        }
       }
     }
   })();