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/tokenTransfer.ts

@@ -27,7 +27,7 @@ export type TokenTransfer = (
   } |
   {
     token: TokenInfoGeneric<'ERC-1155'>;
-    total: Erc1155TotalPayload | Array<Erc1155TotalPayload>;
+    total: Erc1155TotalPayload;
   }
 ) & TokenTransferBase
 

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/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);