Key token transfer rows by token id so rows stop surviving pagination

src/features/multichain/pages/token-transfers/MultichainTokenTransfersLocal.tsx

@@ -9,6 +9,7 @@ import ActionBar from 'src/shell/page/action-bar/ActionBar';
 
 import TokenTransfersListItem from 'src/slices/token-transfer/pages/index/TokenTransfersListItem';
 import TokenTransfersTable from 'src/slices/token-transfer/pages/index/TokenTransfersTable';
+import { getTokenTransferKey } from 'src/slices/token-transfer/utils/get-token-transfer-key';
 import TokenTypeFilter from 'src/slices/token/components/TokenTypeFilter';
 
 import { useMultichainContext } from 'src/features/multichain/context';
@@ -63,7 +64,7 @@ const MultichainTokenTransfersLocal = ({ query, typeFilter, onTokenTypesChange }
       <Box hideFrom="lg">
         { query.data?.items.slice(0, renderedItemsNum).map((item, index) => (
           <TokenTransfersListItem
-            key={ (item.transaction_hash ?? '') + item.log_index + (query.isPlaceholderData ? index : '') + (chainData ? chainData.id : '') }
+            key={ getTokenTransferKey(item) + (query.isPlaceholderData ? index : '') + (chainData ? chainData.id : '') }
             isLoading={ query.isPlaceholderData }
             item={ item }
             chainData={ chainData }

src/slices/token-transfer/components/list/TokenTransferList.tsx

@@ -10,6 +10,7 @@ import { useMultichainContext } from 'src/features/multichain/context';
 
 import useLazyRenderedList from 'src/shared/lists/useLazyRenderedList';
 
+import { getTokenTransferKey } from '../../utils/get-token-transfer-key';
 import TokenTransferListItem from './TokenTransferListItem';
 
 interface Props {
@@ -31,7 +32,7 @@ const TokenTransferList = ({ data, baseAddress, showTxInfo, enableTimeIncrement,
       <Box>
         { data.slice(0, renderedItemsNum).map((item, index) => (
           <TokenTransferListItem
-            key={ item.transaction_hash + item.block_hash + item.log_index + (isLoading ? index : '') }
+            key={ getTokenTransferKey(item) + (isLoading ? index : '') }
             data={ item }
             baseAddress={ baseAddress }
             showTxInfo={ showTxInfo }

src/slices/token-transfer/components/list/TokenTransferTable.tsx

@@ -15,6 +15,7 @@ import useLazyRenderedList from 'src/shared/lists/useLazyRenderedList';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'src/toolkit/chakra/table';
 
+import { getTokenTransferKey } from '../../utils/get-token-transfer-key';
 import TokenTransferTableItem from './TokenTransferTableItem';
 
 interface Props {
@@ -81,7 +82,7 @@ const TokenTransferTable = ({
           ) }
           { data.slice(0, renderedItemsNum).map((item, index) => (
             <TokenTransferTableItem
-              key={ item.transaction_hash + item.block_hash + item.log_index + (isLoading ? index : '') }
+              key={ getTokenTransferKey(item) + (isLoading ? index : '') }
               data={ item }
               baseAddress={ baseAddress }
               showTxInfo={ showTxInfo }

src/slices/token-transfer/pages/index/TokenTransfersLocal.tsx

@@ -15,6 +15,7 @@ import useLazyRenderedList from 'src/shared/lists/useLazyRenderedList';
 import Pagination from 'src/shared/pagination/Pagination';
 
 import useTokenTransfersQuery from '../../hooks/useTokenTransfersQuery';
+import { getTokenTransferKey } from '../../utils/get-token-transfer-key';
 import TokenTransfersListItem from './TokenTransfersListItem';
 import TokenTransfersTable from './TokenTransfersTable';
 
@@ -31,7 +32,7 @@ const TokenTransfersLocal = () => {
       <Box hideFrom="lg">
         { query.data?.items.slice(0, renderedItemsNum).map((item, index) => (
           <TokenTransfersListItem
-            key={ (item.transaction_hash ?? '') + item.log_index + (query.isPlaceholderData ? index : '') }
+            key={ getTokenTransferKey(item) + (query.isPlaceholderData ? index : '') }
             isLoading={ query.isPlaceholderData }
             item={ item }
           />

src/slices/token-transfer/pages/index/TokenTransfersTable.spec.tsx

@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+// SPDX-License-Identifier: LicenseRef-Blockscout
+
+import React from 'react';
+
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render } from 'vitest/lib';
+
+import { erc1155A, erc1155B, erc1155C, erc1155D, erc20, erc721 } from '../../mocks';
+import TokenTransfersTable from './TokenTransfersTable';
+
+const BATCH_PAGE = [ erc1155A, erc1155B, erc1155C, erc1155D ];
+const NEXT_PAGE = [ erc20, erc721 ];
+
+describe('TokenTransfersTable', () => {
+  afterEach(cleanup);
+
+  it('renders every item of a batch transfer', () => {
+    const { container } = render(<TokenTransfersTable items={ BATCH_PAGE } top={ 0 }/>);
+
+    expect(container.querySelectorAll('tbody tr')).toHaveLength(BATCH_PAGE.length);
+  });
+
+  it('drops all rows of the previous page when the next page arrives', () => {
+    const { container, rerender } = render(<TokenTransfersTable items={ BATCH_PAGE } top={ 0 }/>);
+
+    rerender(<TokenTransfersTable items={ NEXT_PAGE } top={ 0 }/>);
+
+    expect(container.querySelectorAll('tbody tr')).toHaveLength(NEXT_PAGE.length);
+    expect(container.textContent).not.toContain(erc1155A.transaction_hash?.slice(0, 10));
+  });
+});

src/slices/token-transfer/pages/index/TokenTransfersTable.tsx

@@ -12,6 +12,7 @@ import useLazyRenderedList from 'src/shared/lists/useLazyRenderedList';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'src/toolkit/chakra/table';
 
+import { getTokenTransferKey } from '../../utils/get-token-transfer-key';
 import TokenTransferTableItem from './TokenTransfersTableItem';
 
 interface Props {
@@ -45,7 +46,7 @@ const TokenTransferTable = ({ items, top, isLoading, chainData, resetKey }: Prop
         <TableBody>
           { items?.slice(0, renderedItemsNum).map((item, index) => (
             <TokenTransferTableItem
-              key={ (item.transaction_hash ?? '') + item.log_index + (isLoading ? index : '') + (chainData ? chainData.id : '') }
+              key={ getTokenTransferKey(item) + (isLoading ? index : '') + (chainData ? chainData.id : '') }
               item={ item }
               isLoading={ isLoading }
               chainData={ chainData }

src/slices/token-transfer/utils/get-token-transfer-key.spec.ts

@@ -0,0 +1,28 @@
+// SPDX-License-Identifier: LicenseRef-Blockscout
+
+import { describe, expect, it } from 'vitest';
+
+import { erc1155A, erc1155B, erc1155C, erc1155D, erc20 } from '../mocks';
+import { getTokenTransferKey } from './get-token-transfer-key';
+
+describe('getTokenTransferKey', () => {
+  it('tells apart the items of a single ERC-1155 batch transfer', () => {
+    const batch = [ erc1155A, erc1155B, erc1155C, erc1155D ];
+
+    expect(new Set(batch.map(getTokenTransferKey)).size).toBe(4);
+  });
+
+  it('tells apart transfers from the same block that differ only in log index', () => {
+    const first = getTokenTransferKey(erc1155A);
+    const second = getTokenTransferKey({ ...erc1155A, log_index: erc1155A.log_index + 1 });
+
+    expect(first).not.toBe(second);
+  });
+
+  it('tells apart transfers that carry no token id', () => {
+    const fungible = getTokenTransferKey(erc20);
+
+    expect(fungible).not.toBe(getTokenTransferKey({ ...erc20, transaction_hash: '0xdeadbeef' }));
+    expect(fungible).not.toBe(getTokenTransferKey(erc1155A));
+  });
+});

src/slices/token-transfer/utils/get-token-transfer-key.ts

@@ -0,0 +1,17 @@
+// SPDX-License-Identifier: LicenseRef-Blockscout
+
+import type { schemas } from '@blockscout/api-types';
+
+// An ERC-1155 batch transfer reaches the API as a single log, which the API flattens into one item
+// per transferred token id — so those items share a (transaction_hash, block_hash, log_index) triple
+// and only the token id tells them apart.
+//
+// Equal keys are not merely untidy here: React tracks pending removals in a key -> fiber map, where
+// duplicates overwrite each other, and the shadowed fibers are then never unmounted. Their rows stay
+// in the DOM through pagination, stacked above the rows of every page that follows.
+// https://github.com/blockscout/frontend/issues/3628
+export function getTokenTransferKey(item: schemas['TokenTransfer']): string {
+  const tokenId = item.total && 'token_id' in item.total ? item.total.token_id : null;
+
+  return [ item.transaction_hash, item.block_hash, item.log_index, tokenId ].join('_');
+}