page setup

pages/api/transactions/[id]/token-transfers.ts

+import type { NextApiRequest } from 'next';
+
+import handler from 'lib/api/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  return `/v2/transactions/${ req.query.id }/token-transfers`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

types/api/tokenTransfer.ts

 import type { AddressParam } from './addressParams';
+import type { PaginationParams } from './pagination';
 import type { TokenInfoGeneric } from './tokenInfo';
 
 export type Erc20TotalPayload = {
@@ -37,3 +38,8 @@ interface TokenTransferBase {
   from: AddressParam;
   to: AddressParam;
 }
+
+export interface TokenTransferResponse {
+  items: Array<TokenTransfer>;
+  next_page_params: PaginationParams | null;
+}

types/client/queries.ts

@@ -6,6 +6,7 @@ export enum QueryKeys {
   txInternals = 'tx-internals',
   txLog = 'tx-log',
   txRawTrace = 'tx-raw-trace',
+  txTokenTransfers = 'tx-token-transfers',
   blockTxs = 'block-transactions',
   block = 'block',
   blocks = 'blocks',

ui/pages/Transaction.tsx

@@ -18,10 +18,12 @@ import TxDetails from 'ui/tx/TxDetails';
 import TxInternals from 'ui/tx/TxInternals';
 import TxLogs from 'ui/tx/TxLogs';
 import TxRawTrace from 'ui/tx/TxRawTrace';
+import TxTokenTransfer from 'ui/tx/TxTokenTransfer';
 // import TxState from 'ui/tx/TxState';
 
 const TABS: Array<RoutedTab> = [
   { id: 'index', title: 'Details', component: <TxDetails/> },
+  { id: 'token_transfers', title: 'Token transfers', component: <TxTokenTransfer/> },
   { id: 'internal', title: 'Internal txn', component: <TxInternals/> },
   { id: 'logs', title: 'Logs', component: <TxLogs/> },
   // will be implemented later, api is not ready

ui/shared/TokenTransfer/TokenTransfer.tsx

+import { Box } from '@chakra-ui/react';
+import type { QueryKey } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { TokenTransferResponse } from 'types/api/tokenTransfer';
+
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+interface Props {
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  path: string;
+  queryKey: QueryKey;
+}
+
+const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryKey, path }: Props) => {
+  const { isError, isLoading } = useQuery<unknown, unknown, TokenTransferResponse>(
+    queryKey,
+    async() => await fetch(path),
+    {
+      enabled: !isDisabled,
+    },
+  );
+
+  if (isLoading || isLoadingProp) {
+    return <span>Loading...</span>;
+  }
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  return <Box>TokenTransfer</Box>;
+};
+
+export default React.memo(TokenTransfer);

ui/tx/TxTokenTransfer.tsx

+import React from 'react';
+
+import { QueryKeys } from 'types/client/queries';
+
+import { SECOND } from 'lib/consts';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import TokenTransfer from 'ui/shared/TokenTransfer/TokenTransfer';
+import TxPendingAlert from 'ui/tx/TxPendingAlert';
+import TxSocketAlert from 'ui/tx/TxSocketAlert';
+import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
+
+const TxTokenTransfer = () => {
+  const { isError, isLoading, data, socketStatus } = useFetchTxInfo({ updateDelay: 5 * SECOND });
+
+  if (!isLoading && !isError && !data.status) {
+    return socketStatus ? <TxSocketAlert status={ socketStatus }/> : <TxPendingAlert/>;
+  }
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  const queryKey = [ QueryKeys.txTokenTransfers, data?.hash ];
+  const path = `/node-api/transactions/${ data?.hash }/token-transfers`;
+
+  return <TokenTransfer isLoading={ isLoading } isDisabled={ !data?.status || !data?.hash } path={ path } queryKey={ queryKey }/>;
+};
+
+export default TxTokenTransfer;