stub list generator

stubs/address.ts

-import type { Address, AddressTransactionsResponse } from 'types/api/address';
+import type { Address } from 'types/api/address';
 
 import { ADDRESS_HASH } from './addressParams';
 import { TOKEN_INFO_ERC_20 } from './token';
-import { TXS } from './tx';
 
 export const ADDRESS_INFO: Address = {
   block_number_balance_updated_at: 8774377,
@@ -33,5 +32,3 @@ export const ADDRESS_INFO: Address = {
   watchlist_names: [],
   watchlist_address_id: null,
 };
-
-export const ADDRESS_TXS: AddressTransactionsResponse = TXS as AddressTransactionsResponse;

stubs/block.ts

-import type { Block, BlocksResponse, BlockTransactionsResponse } from 'types/api/block';
+import type { Block } from 'types/api/block';
 
 import { ADDRESS_PARAMS } from './addressParams';
-import { TX } from './tx';
 
 export const BLOCK_HASH = '0x8fa7b9e5e5e79deeb62d608db22ba9a5cb45388c7ebb9223ae77331c6080dc70';
 
@@ -37,20 +36,3 @@ export const BLOCK: Block = {
   type: 'block',
   uncles_hashes: [],
 };
-
-export const BLOCKS: BlocksResponse = {
-  items: Array(50).fill(BLOCK),
-  next_page_params: {
-    block_number: 8988686,
-    items_count: 50,
-  },
-};
-
-export const BLOCK_TXS: BlockTransactionsResponse = {
-  items: Array(50).fill(TX),
-  next_page_params: {
-    block_number: 9004925,
-    index: 49,
-    items_count: 50,
-  },
-};

stubs/internalTx.ts

-import type { InternalTransaction, InternalTransactionsResponse } from 'types/api/internalTransaction';
+import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import { ADDRESS_PARAMS } from './addressParams';
 import { TX_HASH } from './tx';
@@ -17,8 +17,3 @@ export const INTERNAL_TX: InternalTransaction = {
   type: 'staticcall',
   value: '22324344900000000',
 };
-
-export const INTERNAL_TXS: InternalTransactionsResponse = {
-  items: Array(3).fill(INTERNAL_TX),
-  next_page_params: null,
-};

stubs/log.ts

-import type { Log, LogsResponseAddress, LogsResponseTx } from 'types/api/log';
+import type { Log } from 'types/api/log';
 
 import { ADDRESS_PARAMS } from './addressParams';
 import { TX_HASH } from './tx';
@@ -33,18 +33,3 @@ export const LOG: Log = {
   ],
   tx_hash: TX_HASH,
 };
-
-export const TX_LOGS: LogsResponseTx = {
-  items: Array(3).fill(LOG),
-  next_page_params: null,
-};
-
-export const ADDRESS_LOGS: LogsResponseAddress = {
-  items: Array(3).fill(LOG),
-  next_page_params: {
-    block_number: 9005750,
-    index: 42,
-    items_count: 50,
-    transaction_index: 23,
-  },
-};

stubs/token.ts

-import type { TokenCounters, TokenHolder, TokenHolders, TokenInfo, TokenInstance, TokenInventoryResponse, TokenType } from 'types/api/token';
+import type { TokenCounters, TokenHolder, TokenHolders, TokenInfo, TokenInstance, TokenType } from 'types/api/token';
 import type { TokenTransfer, TokenTransferPagination, TokenTransferResponse } from 'types/api/tokenTransfer';
 
 import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
 import { BLOCK_HASH } from './block';
 import { TX_HASH } from './tx';
+import { generateListStub } from './utils';
 
 export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
   address: ADDRESS_HASH,
@@ -75,11 +76,11 @@ export const TOKEN_TRANSFER_ERC_1155: TokenTransfer = {
 export const getTokenTransfersStub = (type?: TokenType, pagination: TokenTransferPagination | null = null): TokenTransferResponse => {
   switch (type) {
     case 'ERC-721':
-      return { items: Array(50).fill(TOKEN_TRANSFER_ERC_721), next_page_params: pagination };
+      return generateListStub<'token_transfers'>(TOKEN_TRANSFER_ERC_721, 50, pagination);
     case 'ERC-1155':
-      return { items: Array(50).fill(TOKEN_TRANSFER_ERC_1155), next_page_params: pagination };
+      return generateListStub<'token_transfers'>(TOKEN_TRANSFER_ERC_1155, 50, pagination);
     default:
-      return { items: Array(50).fill(TOKEN_TRANSFER_ERC_20), next_page_params: pagination };
+      return generateListStub<'token_transfers'>(TOKEN_TRANSFER_ERC_20, 50, pagination);
   }
 };
 
@@ -100,8 +101,3 @@ export const TOKEN_INSTANCE: TokenInstance = {
   token: TOKEN_INFO_ERC_1155,
   holder_address_hash: ADDRESS_HASH,
 };
-
-export const TOKEN_INSTANCES: TokenInventoryResponse = {
-  items: Array(50).fill(TOKEN_INSTANCE),
-  next_page_params: null,
-};

stubs/tx.ts

 import type { RawTracesResponse } from 'types/api/rawTrace';
-import type { Transaction, TransactionsResponse } from 'types/api/transaction';
+import type { Transaction } from 'types/api/transaction';
 
 import { ADDRESS_PARAMS } from './addressParams';
 
@@ -50,14 +50,4 @@ export const TX: Transaction = {
   tx_tag: null,
 };
 
-export const TXS: TransactionsResponse = {
-  items: Array(50).fill(TX),
-  next_page_params: {
-    block_number: 9005713,
-    index: 5,
-    items_count: 50,
-    filter: 'validated',
-  },
-};
-
 export const TX_RAW_TRACE: RawTracesResponse = [];

stubs/utils.ts

+import type { ArrayElement } from 'types/utils';
+
+import type { PaginatedResources, PaginatedResponse } from 'lib/api/resources';
+
+export function generateListStub<Resource extends PaginatedResources>(
+  stub: ArrayElement<PaginatedResponse<Resource>['items']>,
+  num = 50,
+  pagination: PaginatedResponse<Resource>['next_page_params'] = null,
+) {
+  return {
+    items: Array(num).fill(stub),
+    next_page_params: pagination,
+  };
+}

stubs/withdrawals.ts

-import type { WithdrawalsItem, WithdrawalsResponse } from 'types/api/withdrawals';
+import type { WithdrawalsItem } from 'types/api/withdrawals';
 
 import { ADDRESS_PARAMS } from './addressParams';
 
@@ -10,11 +10,3 @@ export const WITHDRAWAL: WithdrawalsItem = {
   block_number: 9005713,
   timestamp: '2023-05-12T19:29:12.000000Z',
 };
-
-export const WITHDRAWALS: WithdrawalsResponse = {
-  items: Array(50).fill(WITHDRAWAL),
-  next_page_params: {
-    index: 5,
-    items_count: 50,
-  },
-};

ui/address/AddressLogs.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import { ADDRESS_LOGS } from 'stubs/log';
+import { LOG } from 'stubs/log';
+import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import LogItem from 'ui/shared/logs/LogItem';
@@ -18,7 +19,12 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
     pathParams: { hash },
     scrollRef,
     options: {
-      placeholderData: ADDRESS_LOGS,
+      placeholderData: generateListStub<'address_logs'>(LOG, 3, {
+        block_number: 9005750,
+        index: 42,
+        items_count: 50,
+        transaction_index: 23,
+      }),
     },
   });
 

ui/address/AddressTxs.tsx

@@ -13,7 +13,8 @@ import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
-import { ADDRESS_TXS } from 'stubs/address';
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
 import Pagination from 'ui/shared/Pagination';
 import TxsContent from 'ui/txs/TxsContent';
@@ -43,7 +44,11 @@ const AddressTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}
     filters: { filter: filterValue },
     scrollRef,
     options: {
-      placeholderData: ADDRESS_TXS,
+      placeholderData: generateListStub<'address_txs'>(TX, 50, {
+        block_number: 9005713,
+        index: 5,
+        items_count: 50,
+      }),
     },
   });
 

ui/address/AddressWithdrawals.tsx

@@ -4,7 +4,8 @@ import React from 'react';
 
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import { WITHDRAWALS } from 'stubs/withdrawals';
+import { generateListStub } from 'stubs/utils';
+import { WITHDRAWAL } from 'stubs/withdrawals';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/Pagination';
@@ -21,7 +22,10 @@ const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
     pathParams: { hash },
     scrollRef,
     options: {
-      placeholderData: WITHDRAWALS,
+      placeholderData: generateListStub<'address_withdrawals'>(WITHDRAWAL, 50, {
+        index: 5,
+        items_count: 50,
+      }),
     },
   });
   const content = data?.items ? (

ui/pages/Block.tsx

@@ -9,8 +9,10 @@ import { useAppContext } from 'lib/appContext';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import { BLOCK, BLOCK_TXS } from 'stubs/block';
-import { WITHDRAWALS } from 'stubs/withdrawals';
+import { BLOCK } from 'stubs/block';
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
+import { WITHDRAWAL } from 'stubs/withdrawals';
 import BlockDetails from 'ui/block/BlockDetails';
 import BlockWithdrawals from 'ui/block/BlockWithdrawals';
 import TextAd from 'ui/shared/ad/TextAd';
@@ -47,7 +49,11 @@ const BlockPageContent = () => {
     pathParams: { height },
     options: {
       enabled: Boolean(!blockQuery.isPlaceholderData && blockQuery.data?.height && tab === 'txs'),
-      placeholderData: BLOCK_TXS,
+      placeholderData: generateListStub<'block_txs'>(TX, 50, {
+        block_number: 9004925,
+        index: 49,
+        items_count: 50,
+      }),
     },
   });
 
@@ -56,7 +62,10 @@ const BlockPageContent = () => {
     pathParams: { height },
     options: {
       enabled: Boolean(!blockQuery.isPlaceholderData && blockQuery.data?.height && appConfig.beaconChain.hasBeaconChain && tab === 'withdrawals'),
-      placeholderData: WITHDRAWALS,
+      placeholderData: generateListStub<'block_withdrawals'>(WITHDRAWAL, 50, {
+        index: 5,
+        items_count: 50,
+      }),
     },
   });
 

ui/pages/Blocks.tsx

@@ -6,7 +6,8 @@ import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
-import { BLOCKS } from 'stubs/block';
+import { BLOCK } from 'stubs/block';
+import { generateListStub } from 'stubs/utils';
 import BlocksContent from 'ui/blocks/BlocksContent';
 import BlocksTabSlot from 'ui/blocks/BlocksTabSlot';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -33,7 +34,10 @@ const BlocksPageContent = () => {
     resourceName: 'blocks',
     filters: { type },
     options: {
-      placeholderData: BLOCKS,
+      placeholderData: generateListStub<'blocks'>(BLOCK, 50, {
+        block_number: 8988686,
+        items_count: 50,
+      }),
     },
   });
 

ui/pages/Token.tsx

@@ -18,6 +18,7 @@ import useSocketMessage from 'lib/socket/useSocketMessage';
 import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import * as addressStubs from 'stubs/address';
 import * as tokenStubs from 'stubs/token';
+import { generateListStub } from 'stubs/utils';
 import AddressContract from 'ui/address/AddressContract';
 import TextAd from 'ui/shared/ad/TextAd';
 import Tag from 'ui/shared/chakra/Tag';
@@ -143,7 +144,7 @@ const TokenPageContent = () => {
     scrollRef,
     options: {
       enabled: Boolean(router.query.hash && router.query.tab === 'inventory' && hasData),
-      placeholderData: tokenStubs.TOKEN_INSTANCES,
+      placeholderData: generateListStub<'token_inventory'>(tokenStubs.TOKEN_INSTANCE),
     },
   });
 

ui/pages/Transactions.tsx

@@ -7,7 +7,8 @@ import appConfig from 'configs/app/config';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
-import { TXS } from 'stubs/tx';
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 import TxsContent from 'ui/txs/TxsContent';
@@ -28,7 +29,12 @@ const Transactions = () => {
     resourceName: filter === 'validated' ? 'txs_validated' : 'txs_pending',
     filters: { filter },
     options: {
-      placeholderData: TXS,
+      placeholderData: generateListStub<'txs_validated'>(TX, 50, {
+        block_number: 9005713,
+        index: 5,
+        items_count: 50,
+        filter: 'validated',
+      }),
     },
   });
 

ui/pages/Withdrawals.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
-import { WITHDRAWALS } from 'stubs/withdrawals';
+import { generateListStub } from 'stubs/utils';
+import { WITHDRAWAL } from 'stubs/withdrawals';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -17,7 +18,10 @@ const Withdrawals = () => {
   const { data, isError, isPlaceholderData, isPaginationVisible, pagination } = useQueryWithPages({
     resourceName: 'withdrawals',
     options: {
-      placeholderData: WITHDRAWALS,
+      placeholderData: generateListStub<'withdrawals'>(WITHDRAWAL, 50, {
+        index: 5,
+        items_count: 50,
+      }),
     },
   });
 

ui/tx/TxInternals.tsx

@@ -6,7 +6,8 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 import { SECOND } from 'lib/consts';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 // import { apos } from 'lib/html-entities';
-import { INTERNAL_TXS } from 'stubs/internalTx';
+import { INTERNAL_TX } from 'stubs/internalTx';
+import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 // import FilterInput from 'ui/shared/filters/FilterInput';
@@ -76,7 +77,7 @@ const TxInternals = () => {
     pathParams: { hash: txInfo.data?.hash },
     options: {
       enabled: !txInfo.isPlaceholderData && Boolean(txInfo.data?.hash) && Boolean(txInfo.data?.status),
-      placeholderData: INTERNAL_TXS,
+      placeholderData: generateListStub<'tx_internal_txs'>(INTERNAL_TX, 3),
     },
   });
 

ui/tx/TxLogs.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 
 import { SECOND } from 'lib/consts';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
-import { TX_LOGS } from 'stubs/log';
+import { LOG } from 'stubs/log';
+import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import LogItem from 'ui/shared/logs/LogItem';
@@ -19,7 +20,7 @@ const TxLogs = () => {
     pathParams: { hash: txInfo.data?.hash },
     options: {
       enabled: !txInfo.isPlaceholderData && Boolean(txInfo.data?.hash) && Boolean(txInfo.data?.status),
-      placeholderData: TX_LOGS,
+      placeholderData: generateListStub<'tx_logs'>(LOG, 3),
     },
   });