Merge pull request #2280 from blockscout/fe-2257

Token transfers list page

lib/api/resources.ts

@@ -605,6 +605,12 @@ export const RESOURCES = {
     filterFields: [],
   },
 
+  // TOKEN TRANSFERS
+  token_transfers_all: {
+    path: '/api/v2/token-transfers',
+    filterFields: [ 'type' as const ],
+  },
+
   // APP STATS
   stats: {
     path: '/api/v2/stats',
@@ -1021,7 +1027,8 @@ export type PaginatedResources = 'blocks' | 'block_txs' | 'block_election_reward
 'zksync_l2_txn_batches' | 'zksync_l2_txn_batch_txs' |
 'withdrawals' | 'address_withdrawals' | 'block_withdrawals' |
 'watchlist' | 'private_tags_address' | 'private_tags_tx' |
-'domains_lookup' | 'addresses_lookup' | 'user_ops' | 'validators_stability' | 'validators_blackfort' | 'noves_address_history';
+'domains_lookup' | 'addresses_lookup' | 'user_ops' | 'validators_stability' | 'validators_blackfort' | 'noves_address_history' |
+'token_transfers_all';
 
 export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
 
@@ -1191,6 +1198,7 @@ Q extends 'address_mud_record' ? AddressMudRecord :
 Q extends 'address_epoch_rewards' ? AddressEpochRewardsResponse :
 Q extends 'withdrawals' ? WithdrawalsResponse :
 Q extends 'withdrawals_counters' ? WithdrawalsCounters :
+Q extends 'token_transfers_all' ? TokenTransferResponse :
 never;
 /* eslint-enable @typescript-eslint/indent */
 
@@ -1225,6 +1233,7 @@ Q extends 'user_ops' ? UserOpsFilters :
 Q extends 'validators_stability' ? ValidatorsStabilityFilters :
 Q extends 'address_mud_tables' ? AddressMudTablesFilter :
 Q extends 'address_mud_records' ? AddressMudRecordsFilter :
+Q extends 'token_transfers_all' ? TokenTransferFilters :
 never;
 /* eslint-enable @typescript-eslint/indent */
 

lib/hooks/useNavItems.tsx

@@ -181,6 +181,21 @@ export default function useNavItems(): ReturnType {
       ].filter(Boolean);
     }
 
+    const tokensNavItems = [
+      {
+        text: 'Tokens',
+        nextRoute: { pathname: '/tokens' as const },
+        icon: 'token',
+        isActive: pathname.startsWith('/token'),
+      },
+      {
+        text: 'Token transfers',
+        nextRoute: { pathname: '/token-transfers' as const },
+        icon: 'token-transfers',
+        isActive: pathname === '/token-transfers',
+      },
+    ];
+
     const apiNavItems: Array<NavItem> = [
       config.features.restApiDocs.isEnabled ? {
         text: 'REST API',
@@ -234,9 +249,9 @@ export default function useNavItems(): ReturnType {
       },
       {
         text: 'Tokens',
-        nextRoute: { pathname: '/tokens' as const },
         icon: 'token',
-        isActive: pathname.startsWith('/token'),
+        isActive: tokensNavItems.flat().some(item => isInternalItem(item) && item.isActive),
+        subItems: tokensNavItems,
       },
       config.features.marketplace.isEnabled ? {
         text: 'DApps',

lib/metadata/getPageOgType.ts

@@ -51,6 +51,7 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/validators': 'Root page',
   '/gas-tracker': 'Root page',
   '/mud-worlds': 'Root page',
+  '/token-transfers': 'Root page',
 
   // service routes, added only to make typescript happy
   '/login': 'Regular page',

lib/metadata/templates/description.ts

@@ -55,6 +55,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/validators': DEFAULT_TEMPLATE,
   '/gas-tracker': DEFAULT_TEMPLATE,
   '/mud-worlds': DEFAULT_TEMPLATE,
+  '/token-transfers': DEFAULT_TEMPLATE,
 
   // service routes, added only to make typescript happy
   '/login': DEFAULT_TEMPLATE,

lib/metadata/templates/title.ts

@@ -51,6 +51,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/validators': '%network_name% validators list',
   '/gas-tracker': '%network_name% gas tracker - Current gas fees',
   '/mud-worlds': '%network_name% MUD worlds list',
+  '/token-transfers': '%network_name% token transfers',
 
   // service routes, added only to make typescript happy
   '/login': '%network_name% login',

lib/mixpanel/getPageType.ts

@@ -49,6 +49,7 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/validators': 'Validators list',
   '/gas-tracker': 'Gas tracker',
   '/mud-worlds': 'MUD worlds',
+  '/token-transfers': 'Token transfers',
 
   // service routes, added only to make typescript happy
   '/login': 'Login',

mocks/tokens/tokenTransfer.ts

@@ -42,6 +42,7 @@ export const erc20: TokenTransfer = {
   tx_hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
   type: 'token_transfer',
   timestamp: '2022-10-10T14:34:30.000000Z',
+  block_number: '12345',
   block_hash: '1',
   log_index: '1',
   method: 'updateSmartAsset',
@@ -88,6 +89,7 @@ export const erc721: TokenTransfer = {
   tx_hash: '0xf13bc7afe5e02b494dd2f22078381d36a4800ef94a0ccc147431db56c301e6cc',
   type: 'token_transfer',
   timestamp: '2022-10-10T14:34:30.000000Z',
+  block_number: '12345',
   block_hash: '1',
   log_index: '1',
   method: 'updateSmartAsset',
@@ -136,6 +138,7 @@ export const erc1155A: TokenTransfer = {
   tx_hash: '0x05d6589367633c032d757a69c5fb16c0e33e3994b0d9d1483f82aeee1f05d746',
   type: 'token_minting',
   timestamp: '2022-10-10T14:34:30.000000Z',
+  block_number: '12345',
   block_hash: '1',
   log_index: '1',
 };
@@ -214,6 +217,7 @@ export const erc404A: TokenTransfer = {
   type: 'token_transfer',
   method: 'swap',
   timestamp: '2022-10-10T14:34:30.000000Z',
+  block_number: '12345',
   block_hash: '1',
   log_index: '1',
 };

nextjs/nextjs-routes.d.ts

@@ -59,6 +59,7 @@ declare module "nextjs-routes" {
     | StaticRoute<"/stats">
     | DynamicRoute<"/token/[hash]", { "hash": string }>
     | DynamicRoute<"/token/[hash]/instance/[id]", { "hash": string; "id": string }>
+    | StaticRoute<"/token-transfers">
     | StaticRoute<"/tokens">
     | DynamicRoute<"/tx/[hash]", { "hash": string }>
     | StaticRoute<"/txs">

pages/token-transfers.tsx

@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const TokenTransfers = dynamic(() => import('ui/pages/TokenTransfers'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/token-transfers">
+      <TokenTransfers/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { base as getServerSideProps } from 'nextjs/getServerSideProps';

public/icons/name.d.ts

@@ -150,6 +150,7 @@
 	| "swap"
 	| "testnet"
 	| "token-placeholder"
+	| "token-transfers"
 	| "token"
 	| "tokens"
 	| "tokens/xdai"

stubs/token.ts

@@ -91,6 +91,7 @@ export const getTokenInstanceHoldersStub = (type?: TokenType, pagination: TokenH
 
 export const TOKEN_TRANSFER_ERC_20: TokenTransfer = {
   block_hash: BLOCK_HASH,
+  block_number: '123456',
   from: ADDRESS_PARAMS,
   log_index: '4',
   method: 'addLiquidity',

types/api/tokenTransfer.ts

@@ -51,6 +51,7 @@ interface TokenTransferBase {
   from: AddressParam;
   to: AddressParam;
   timestamp: string;
+  block_number: string;
   block_hash: string;
   log_index: string;
   method?: string;

ui/pages/TokenTransfers.pw.tsx

@@ -0,0 +1,14 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { mixTokens } from 'mocks/tokens/tokenTransfer';
+import { test, expect } from 'playwright/lib';
+
+import TokenTransfers from './TokenTransfers';
+
+test('base view +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('token_transfers_all', mixTokens, { queryParams: { type: [] } });
+  const component = await render(<Box pt={{ base: '106px', lg: 0 }}> <TokenTransfers/> </Box>);
+  await expect(component).toHaveScreenshot();
+});

ui/pages/TokenTransfers.tsx

@@ -0,0 +1,86 @@
+import { Show, Hide } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { TokenType } from 'types/api/token';
+
+import { getTokenTransfersStub } from 'stubs/token';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PopoverFilter from 'ui/shared/filters/PopoverFilter';
+import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import { getTokenFilterValue } from 'ui/tokens/utils';
+import TokenTransfersListItem from 'ui/tokenTransfers/TokenTransfersListItem';
+import TokenTransfersTable from 'ui/tokenTransfers/TokenTransfersTable';
+const TokenTransfers = () => {
+  const router = useRouter();
+  const [ typeFilter, setTypeFilter ] = React.useState<Array<TokenType>>(getTokenFilterValue(router.query.type) || []);
+
+  const tokenTransfersQuery = useQueryWithPages({
+    resourceName: 'token_transfers_all',
+    filters: { type: typeFilter },
+    options: {
+      placeholderData: getTokenTransfersStub(),
+    },
+  });
+
+  const handleTokenTypesChange = React.useCallback((value: Array<TokenType>) => {
+    tokenTransfersQuery.onFilterChange({ type: value });
+    setTypeFilter(value);
+  }, [ tokenTransfersQuery ]);
+
+  const content = (
+    <>
+      <Show below="lg" ssr={ false }>
+        { tokenTransfersQuery.data?.items.map((item, index) => (
+          <TokenTransfersListItem
+            key={ item.block_number + item.log_index + (tokenTransfersQuery.isPlaceholderData ? index : '') }
+            isLoading={ tokenTransfersQuery.isPlaceholderData }
+            item={ item }
+          />
+        )) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <TokenTransfersTable
+          items={ tokenTransfersQuery.data?.items }
+          top={ tokenTransfersQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ tokenTransfersQuery.isPlaceholderData }
+        />
+      </Hide>
+    </>
+  );
+
+  const filter = (
+    <PopoverFilter contentProps={{ w: '200px' }} appliedFiltersNum={ typeFilter.length }>
+      <TokenTypeFilter<TokenType> onChange={ handleTokenTypesChange } defaultValue={ typeFilter } nftOnly={ false }/>
+    </PopoverFilter>
+  );
+
+  const actionBar = (
+    <ActionBar mt={ -6 }>
+      { filter }
+      <Pagination { ...tokenTransfersQuery.pagination }/>
+    </ActionBar>
+  );
+
+  return (
+    <>
+      <PageTitle
+        title="Token Transfers"
+        withTextAd
+      />
+      <DataListDisplay
+        isError={ tokenTransfersQuery.isError }
+        items={ tokenTransfersQuery.data?.items }
+        emptyText="There are no token transfers."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default TokenTransfers;

ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx

@@ -99,7 +99,7 @@ test.describe('with tooltips', () => {
 
     await component.locator('header').hover();
     await page.locator('div[aria-label="Expand/Collapse menu"]').click();
-    await page.locator('a[aria-label="Tokens link"]').hover();
+    await page.locator('a[aria-label="DApps link"]').hover();
 
     await expect(component).toHaveScreenshot();
   });