Merge pull request #699 from blockscout/no-ERC1155-batches

remove ERC1155 batches

mocks/tokens/tokenTransfer.ts

@@ -85,7 +85,7 @@ export const erc721: TokenTransfer = {
   method: 'updateSmartAsset',
 };
 
-export const erc1155: TokenTransfer = {
+export const erc1155A: TokenTransfer = {
   from: {
     hash: '0x0000000000000000000000000000000000000000',
     implementation_name: null,
@@ -128,26 +128,44 @@ export const erc1155: TokenTransfer = {
   log_index: '1',
 };
 
-export const erc1155multiple: TokenTransfer = {
-  ...erc1155,
+export const erc1155B: TokenTransfer = {
+  ...erc1155A,
   token: {
-    ...erc1155.token,
+    ...erc1155A.token,
     name: 'SastanaNFT',
     symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   },
-  total: [
-    { token_id: '12345678', value: '100000000000000000000', decimals: null },
-    { token_id: '483200961027732618117991942553110860267520', value: '200000000000000000000', decimals: null },
-    { token_id: '456', value: '42', decimals: null },
-  ],
+  total: { token_id: '12345678', value: '100000000000000000000', decimals: null },
+};
+
+export const erc1155C: TokenTransfer = {
+  ...erc1155A,
+  token: {
+    ...erc1155A.token,
+    name: 'SastanaNFT',
+    symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
+  },
+  total: { token_id: '483200961027732618117991942553110860267520', value: '200000000000000000000', decimals: null },
+};
+
+export const erc1155D: TokenTransfer = {
+  ...erc1155A,
+  token: {
+    ...erc1155A.token,
+    name: 'SastanaNFT',
+    symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
+  },
+  total: { token_id: '456', value: '42', decimals: null },
 };
 
 export const mixTokens: TokenTransferResponse = {
   items: [
     erc20,
     erc721,
-    erc1155,
-    erc1155multiple,
+    erc1155A,
+    erc1155B,
+    erc1155C,
+    erc1155D,
   ],
   next_page_params: null,
 };

mocks/txs/tx.ts

@@ -100,8 +100,10 @@ export const withTokenTransfer: Transaction = {
   token_transfers: [
     tokenTransferMock.erc20,
     tokenTransferMock.erc721,
-    tokenTransferMock.erc1155,
-    tokenTransferMock.erc1155multiple,
+    tokenTransferMock.erc1155A,
+    tokenTransferMock.erc1155B,
+    tokenTransferMock.erc1155C,
+    tokenTransferMock.erc1155D,
   ],
   tx_types: [
     'token_transfer',

types/api/token.ts

@@ -18,8 +18,6 @@ export interface TokenCounters {
   transfers_count: string;
 }
 
-export type TokenInfoGeneric<Type extends TokenType> = Omit<TokenInfo, 'type'> & { type: Type };
-
 export interface TokenHolders {
   items: Array<TokenHolder>;
   next_page_params: TokenHoldersPagination;

types/api/tokenTransfer.ts

 import type { AddressParam } from './addressParams';
-import type { TokenInfoGeneric, TokenType } from './token';
+import type { TokenInfo, TokenType } from './token';
 
 export type Erc20TotalPayload = {
   decimals: string | null;
@@ -18,20 +18,20 @@ export type Erc1155TotalPayload = {
 
 export type TokenTransfer = (
   {
-    token: TokenInfoGeneric<'ERC-20'>;
+    token: TokenInfo<'ERC-20'>;
     total: Erc20TotalPayload;
   } |
   {
-    token: TokenInfoGeneric<'ERC-721'>;
+    token: TokenInfo<'ERC-721'>;
     total: Erc721TotalPayload;
   } |
   {
-    token: TokenInfoGeneric<'ERC-1155'>;
-    total: Erc1155TotalPayload | Array<Erc1155TotalPayload>;
+    token: TokenInfo<'ERC-1155'>;
+    total: Erc1155TotalPayload;
   }
 ) & TokenTransferBase
 
-export type TokenTotal = Erc20TotalPayload | Erc721TotalPayload | Erc1155TotalPayload | Array<Erc1155TotalPayload>;
+export type TokenTotal = Erc20TotalPayload | Erc721TotalPayload | Erc1155TotalPayload;
 
 interface TokenTransferBase {
   type: 'token_transfer' | 'token_burning' | 'token_spawning' | 'token_minting';

ui/address/AddressTokenTransfers.pw.tsx

@@ -2,7 +2,7 @@ import { Box } from '@chakra-ui/react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { erc1155 } from 'mocks/tokens/tokenTransfer';
+import { erc1155A } from 'mocks/tokens/tokenTransfer';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
@@ -20,7 +20,7 @@ const hooksConfig = {
 test('with token filter and pagination +@mobile', async({ mount, page }) => {
   await page.route(API_URL, (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify({ items: [ erc1155 ], next_page_params: { block_number: 1 } }),
+    body: JSON.stringify({ items: [ erc1155A ], next_page_params: { block_number: 1 } }),
   }));
 
   const component = await mount(
@@ -37,7 +37,7 @@ test('with token filter and pagination +@mobile', async({ mount, page }) => {
 test('with token filter and no pagination +@mobile', async({ mount, page }) => {
   await page.route(API_URL, (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify({ items: [ erc1155 ] }),
+    body: JSON.stringify({ items: [ erc1155A ] }),
   }));
 
   const component = await mount(

ui/address/AddressTokenTransfers.tsx

@@ -26,7 +26,6 @@ import HashStringShorten from 'ui/shared/HashStringShorten';
 import Pagination from 'ui/shared/Pagination';
 import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TokenLogo from 'ui/shared/TokenLogo';
-import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/shared/TokenTransfer/TokenTransferTable';
@@ -161,12 +160,11 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
   const numActiveFilters = (filters.type?.length || 0) + (filters.filter ? 1 : 0);
   const isActionBarHidden = !tokenFilter && !numActiveFilters && !data?.items.length && !currentAddress;
 
-  const items = data?.items?.reduce(flattenTotal, []);
-  const content = items ? (
+  const content = data?.items ? (
     <>
       <Hide below="lg" ssr={ false }>
         <TokenTransferTable
-          data={ items }
+          data={ data?.items }
           baseAddress={ currentAddress }
           showTxInfo
           top={ isActionBarHidden ? 0 : 80 }
@@ -187,7 +185,7 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
           />
         ) }
         <TokenTransferList
-          data={ items }
+          data={ data?.items }
           baseAddress={ currentAddress }
           showTxInfo
           enableTimeIncrement

ui/shared/TokenTransfer/TokenTransferList.pw.tsx

@@ -5,11 +5,8 @@ import React from 'react';
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
 import TestApp from 'playwright/TestApp';
 
-import { flattenTotal } from './helpers';
 import TokenTransferList from './TokenTransferList';
 
-const flattenData = tokenTransferMock.mixTokens.items.reduce(flattenTotal, []);
-
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
 test('without tx info', async({ mount }) => {
@@ -17,7 +14,7 @@ test('without tx info', async({ mount }) => {
     <TestApp>
       <Box h={{ base: '134px', lg: 6 }}/>
       <TokenTransferList
-        data={ flattenData }
+        data={ tokenTransferMock.mixTokens.items }
         showTxInfo={ false }
       />
     </TestApp>,
@@ -31,7 +28,7 @@ test('with tx info', async({ mount }) => {
     <TestApp>
       <Box h={{ base: '134px', lg: 6 }}/>
       <TokenTransferList
-        data={ flattenData }
+        data={ tokenTransferMock.mixTokens.items }
         showTxInfo={ true }
       />
     </TestApp>,

ui/shared/TokenTransfer/TokenTransferTable.pw.tsx

@@ -5,17 +5,14 @@ import React from 'react';
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
 import TestApp from 'playwright/TestApp';
 
-import { flattenTotal } from './helpers';
 import TokenTransferTable from './TokenTransferTable';
 
-const flattenData = tokenTransferMock.mixTokens.items.reduce(flattenTotal, []);
-
 test('without tx info', async({ mount }) => {
   const component = await mount(
     <TestApp>
       <Box h={{ base: '134px', lg: 6 }}/>
       <TokenTransferTable
-        data={ flattenData }
+        data={ tokenTransferMock.mixTokens.items }
         top={ 0 }
         showTxInfo={ false }
       />
@@ -30,7 +27,7 @@ test('with tx info', async({ mount }) => {
     <TestApp>
       <Box h={{ base: '134px', lg: 6 }}/>
       <TokenTransferTable
-        data={ flattenData }
+        data={ tokenTransferMock.mixTokens.items }
         top={ 0 }
         showTxInfo={ true }
       />

ui/shared/TokenTransfer/helpers.ts

 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
-export const flattenTotal = (result: Array<TokenTransfer>, item: TokenTransfer): Array<TokenTransfer> => {
-  if (Array.isArray(item.total)) {
-    item.total.forEach((total) => {
-      result.push({ ...item, total });
-    });
-  } else {
-    result.push(item);
-  }
-
-  return result;
-};
-
 export const getTokenTransferTypeText = (type: TokenTransfer['type']) => {
   switch (type) {
     case 'token_minting':

ui/token/TokenTransfer/TokenTransfer.pw.tsx

@@ -64,7 +64,12 @@ test('erc1155 +@mobile', async({ mount }) => {
         // @ts-ignore:
         transfersQuery={{
           data: {
-            items: [ tokenTransferMock.erc1155, tokenTransferMock.erc1155multiple ],
+            items: [
+              tokenTransferMock.erc1155A,
+              tokenTransferMock.erc1155B,
+              tokenTransferMock.erc1155C,
+              tokenTransferMock.erc1155D,
+            ],
             next_page_params: null,
           },
           isPaginationVisible: true,

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -15,7 +15,6 @@ import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
-import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferList from 'ui/token/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/token/TokenTransfer/TokenTransferTable';
 
@@ -59,14 +58,12 @@ const TokenTransfer = ({ transfersQuery, tokenId }: Props) => {
     handler: handleNewTransfersMessage,
   });
 
-  const items = data?.items?.reduce(flattenTotal, []);
-
-  const content = items ? (
+  const content = data?.items ? (
 
     <>
       <Hide below="lg" ssr={ false }>
         <TokenTransferTable
-          data={ items }
+          data={ data?.items }
           top={ isPaginationVisible ? 80 : 0 }
           showSocketInfo={ pagination.page === 1 }
           socketInfoAlert={ socketAlert }
@@ -84,7 +81,7 @@ const TokenTransfer = ({ transfersQuery, tokenId }: Props) => {
             borderBottomRadius={ 0 }
           />
         ) }
-        <TokenTransferList data={ items } tokenId={ tokenId }/>
+        <TokenTransferList data={ data?.items } tokenId={ tokenId }/>
       </Show>
     </>
   ) : null;

ui/tx/TxTokenTransfer.tsx

@@ -13,7 +13,6 @@ import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/Pagination';
-import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/shared/TokenTransfer/TokenTransferTable';
@@ -55,15 +54,13 @@ const TxTokenTransfer = () => {
   const numActiveFilters = typeFilter.length;
   const isActionBarHidden = !numActiveFilters && !tokenTransferQuery.data?.items.length;
 
-  const items = tokenTransferQuery.data?.items?.reduce(flattenTotal, []);
-
-  const content = items ? (
+  const content = tokenTransferQuery.data?.items ? (
     <>
       <Hide below="lg" ssr={ false }>
-        <TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : 80 }/>
+        <TokenTransferTable data={ tokenTransferQuery.data?.items } top={ isActionBarHidden ? 0 : 80 }/>
       </Hide>
       <Show below="lg" ssr={ false }>
-        <TokenTransferList data={ items }/>
+        <TokenTransferList data={ tokenTransferQuery.data?.items }/>
       </Show>
     </>
   ) : null;

ui/tx/details/TxDetailsTokenTransfer.tsx

@@ -11,25 +11,25 @@ import CurrencyValue from 'ui/shared/CurrencyValue';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet';
 
-type Props = TTokenTransfer;
+interface Props {
+  data: TTokenTransfer;
+}
 
-const TxDetailsTokenTransfer = ({ token, total, to, from }: Props) => {
-
-  const isColumnLayout = token.type === 'ERC-1155' && Array.isArray(total);
+const TxDetailsTokenTransfer = ({ data }: Props) => {
 
   const content = (() => {
-    switch (token.type) {
+    switch (data.token.type) {
       case 'ERC-20': {
-        const payload = total as Erc20TotalPayload;
+        const total = data.total as Erc20TotalPayload;
         return (
           <Flex flexWrap="wrap" columnGap={ 3 } rowGap={ 2 }>
             <Text fontWeight={ 500 } as="span">For:{ space }
-              <CurrencyValue value={ payload.value } exchangeRate={ token.exchange_rate } fontWeight={ 600 } decimals={ payload.decimals }/>
+              <CurrencyValue value={ total.value } exchangeRate={ data.token.exchange_rate } fontWeight={ 600 } decimals={ total.decimals }/>
             </Text>
             <TokenSnippet
-              symbol={ trimTokenSymbol(token.symbol) }
-              hash={ token.address }
-              name={ token.name }
+              symbol={ trimTokenSymbol(data.token.symbol) }
+              hash={ data.token.address }
+              name={ data.token.name }
               w="auto"
               flexGrow="1"
               columnGap={ 1 }
@@ -40,47 +40,46 @@ const TxDetailsTokenTransfer = ({ token, total, to, from }: Props) => {
       }
 
       case 'ERC-721': {
-        const payload = total as Erc721TotalPayload;
+        const total = data.total as Erc721TotalPayload;
         return (
           <NftTokenTransferSnippet
-            name={ token.name }
-            tokenId={ payload.token_id }
+            name={ data.token.name }
+            tokenId={ total.token_id }
             value="1"
-            hash={ token.address }
-            symbol={ trimTokenSymbol(token.symbol) }
+            hash={ data.token.address }
+            symbol={ trimTokenSymbol(data.token.symbol) }
           />
         );
       }
 
       case 'ERC-1155': {
-        const payload = total as Erc1155TotalPayload | Array<Erc1155TotalPayload>;
-        const items = Array.isArray(payload) ? payload : [ payload ];
-        return items.map((item) => (
+        const total = data.total as Erc1155TotalPayload;
+        return (
           <NftTokenTransferSnippet
-            name={ token.name }
-            key={ item.token_id }
-            tokenId={ item.token_id }
-            value={ item.value }
-            hash={ token.address }
-            symbol={ trimTokenSymbol(token.symbol) }
+            name={ data.token.name }
+            key={ total.token_id }
+            tokenId={ total.token_id }
+            value={ total.value }
+            hash={ data.token.address }
+            symbol={ trimTokenSymbol(data.token.symbol) }
           />
-        ));
+        );
       }
     }
   })();
 
   return (
     <Flex
-      alignItems={ isColumnLayout ? 'flex-start' : 'center' }
+      alignItems="center"
       flexWrap="wrap"
       columnGap={ 3 }
       rowGap={ 3 }
-      flexDir={ isColumnLayout ? 'column' : 'row' }
+      flexDir="row"
     >
       <Flex alignItems="center">
-        <AddressLink type="address" fontWeight="500" hash={ from.hash } truncation="constant"/>
+        <AddressLink type="address" fontWeight="500" hash={ data.from.hash } truncation="constant"/>
         <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-        <AddressLink type="address" fontWeight="500" hash={ to.hash } truncation="constant"/>
+        <AddressLink type="address" fontWeight="500" hash={ data.to.hash } truncation="constant"/>
       </Flex>
       <Flex flexDir="column" rowGap={ 5 }>
         { content }

ui/tx/details/TxDetailsTokenTransfers.tsx

@@ -7,7 +7,6 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 import tokenIcon from 'icons/token.svg';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import LinkInternal from 'ui/shared/LinkInternal';
-import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
 
 import TxDetailsTokenTransfer from './TxDetailsTokenTransfer';
 
@@ -27,10 +26,9 @@ const VISIBLE_ITEMS_NUM = 3;
 const TxDetailsTokenTransfers = ({ data, txHash }: Props) => {
   const viewAllUrl = route({ pathname: '/tx/[hash]', query: { hash: txHash, tab: 'token_transfers' } });
 
-  const formattedData = data.reduce(flattenTotal, []);
   const transferGroups = TOKEN_TRANSFERS_TYPES.map((group) => ({
     ...group,
-    items: formattedData?.filter((token) => token.type === group.type) || [],
+    items: data?.filter((token) => token.type === group.type) || [],
   }));
   const showViewAllLink = transferGroups.some(({ items }) => items.length > VISIBLE_ITEMS_NUM);
 
@@ -54,7 +52,7 @@ const TxDetailsTokenTransfers = ({ data, txHash }: Props) => {
               rowGap={ 5 }
               w="100%"
             >
-              { items.slice(0, VISIBLE_ITEMS_NUM).map((item, index) => <TxDetailsTokenTransfer key={ index } { ...item }/>) }
+              { items.slice(0, VISIBLE_ITEMS_NUM).map((item, index) => <TxDetailsTokenTransfer key={ index } data={ item }/>) }
             </Flex>
           </DetailsInfoItem>
         );