Merge pull request #1558 from blockscout/fe-1538

token id can be null

types/api/tokenTransfer.ts

@@ -7,13 +7,13 @@ export type Erc20TotalPayload = {
 }
 
 export type Erc721TotalPayload = {
-  token_id: string;
+  token_id: string | null;
 }
 
 export type Erc1155TotalPayload = {
   decimals: string | null;
   value: string;
-  token_id: string;
+  token_id: string | null;
 }
 
 export type TokenTransfer = (

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -61,7 +61,7 @@ const TokenTransferListItem = ({
           <TxAdditionalInfo hash={ txHash } isMobile isLoading={ isLoading }/>
         ) }
       </Flex>
-      { 'token_id' in total && <NftEntity hash={ token.address } id={ total.token_id } isLoading={ isLoading }/> }
+      { 'token_id' in total && total.token_id !== null && <NftEntity hash={ token.address } id={ total.token_id } isLoading={ isLoading }/> }
       { showTxInfo && txHash && (
         <Flex justifyContent="space-between" alignItems="center" lineHeight="24px" width="100%">
           <TxEntity

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -65,7 +65,7 @@ const TokenTransferTableItem = ({
         </Flex>
       </Td>
       <Td>
-        { 'token_id' in total && <NftEntity hash={ token.address } id={ total.token_id } isLoading={ isLoading }/> }
+        { 'token_id' in total && total.token_id !== null && <NftEntity hash={ token.address } id={ total.token_id } isLoading={ isLoading }/> }
       </Td>
       { showTxInfo && txHash && (
         <Td>

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -87,7 +87,7 @@ const TokenTransferListItem = ({
           ) }
         </Grid>
       ) }
-      { 'token_id' in total && (token.type === 'ERC-721' || token.type === 'ERC-1155') && (
+      { 'token_id' in total && (token.type === 'ERC-721' || token.type === 'ERC-1155') && total.token_id !== null && (
         <NftEntity
           hash={ token.address }
           id={ total.token_id }

ui/token/TokenTransfer/TokenTransferTableItem.tsx

@@ -70,7 +70,7 @@ const TokenTransferTableItem = ({
       </Td>
       { (token.type === 'ERC-721' || token.type === 'ERC-1155') && (
         <Td>
-          { 'token_id' in total ? (
+          { 'token_id' in total && total.token_id !== null ? (
             <NftEntity
               hash={ token.address }
               id={ total.token_id }

ui/tx/NftTokenTransferSnippet.tsx

@@ -9,7 +9,7 @@ import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 interface Props {
   token: TokenInfo;
   value: string;
-  tokenId: string;
+  tokenId: string | null;
 }
 
 const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
@@ -26,15 +26,18 @@ const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
       ) : (
         <chakra.span color="text_secondary">for token ID</chakra.span>
       ) }
-      <NftEntity
-        hash={ token.address }
-        id={ tokenId }
-        fontWeight={ 600 }
-        iconSize="md"
-        maxW={{ base: '100%', lg: '150px' }}
-        w="auto"
-        flexShrink={ 0 }
-      />
+      { tokenId !== null ? (
+        <NftEntity
+          hash={ token.address }
+          id={ tokenId }
+          fontWeight={ 600 }
+          iconSize="md"
+          maxW={{ base: '100%', lg: '150px' }}
+          w="auto"
+          flexShrink={ 0 }
+        />
+      ) : <chakra.span color="text_secondary"> N/A </chakra.span>
+      }
       <chakra.span color="text_secondary">of</chakra.span>
       <TokenEntity
         token={ token }

ui/tx/state/TxStateTokenIdList.tsx

-import { Flex, Link, useBoolean } from '@chakra-ui/react';
+import { Flex, Text, Link, useBoolean } from '@chakra-ui/react';
 import React from 'react';
 
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 
 interface Props {
-  items: Array<{total: { token_id: string} }>;
+  items: Array<{total: { token_id: string | null} }>;
   tokenAddress: string;
   isLoading?: boolean;
 }
@@ -14,14 +14,20 @@ const TxStateTokenIdList = ({ items, tokenAddress, isLoading }: Props) => {
 
   return (
     <Flex flexDir="column" rowGap={ 2 }>
-      { items.slice(0, isCut ? 3 : items.length).map((item, index) => (
-        <NftEntity
-          key={ index }
-          hash={ tokenAddress }
-          id={ item.total.token_id }
-          isLoading={ isLoading }
-        />
-      )) }
+      { items.slice(0, isCut ? 3 : items.length).map((item, index) => {
+        if (item.total.token_id !== null) {
+          return (
+            <NftEntity
+              key={ index }
+              hash={ tokenAddress }
+              id={ item.total.token_id }
+              isLoading={ isLoading }
+            />
+          );
+        } else {
+          return <Text key={ index } color="text_secondary">N/A</Text>;
+        }
+      }) }
       { items.length > 3 && (
         <Link
           fontWeight={ 400 }