blockscout · tom2drum · Nov 18, 2025 · Nov 18, 2025
diff --git a/lib/api/useApiQueries.ts b/lib/api/useApiQueries.ts
@@ -0,0 +1,50 @@
+import type { UseQueryOptions } from '@tanstack/react-query';
+import { useQueries } from '@tanstack/react-query';
+
+import type { ResourceError, ResourceName, ResourcePayload } from './resources';
+import useApiFetch from './useApiFetch';
+import type { Params as ApiQueryParams } from './useApiQuery';
+import { getResourceKey } from './useApiQuery';
+
+export interface ReturnType<R extends ResourceName, E = unknown> {
+  isLoading: boolean;
+  isPlaceholderData: boolean;
+  isError: boolean;
+  isSuccess: boolean;
+  data: Array<ResourcePayload<R>> | undefined;
+  error: ResourceError<E> | null | undefined;
+}
+
+export default function useApiQueries<R extends ResourceName, E = unknown>(
+  resource: R,
+  params: Array<ApiQueryParams<R, E>>,
+  queryOptions: Partial<Omit<UseQueryOptions<ResourcePayload<R>, ResourceError<E>, Array<ResourcePayload<R>>>, 'queries'>>,
+) {
+  const apiFetch = useApiFetch();
+
+  return useQueries<Array<UseQueryOptions<ResourcePayload<R>, ResourceError<E>>>, ReturnType<R, E>>({
+    queries: params.map(({ pathParams, queryParams, queryOptions, fetchParams, logError, chain }) => {
+      return {
+        queryKey: getResourceKey(resource, { pathParams, queryParams, chainId: chain?.id }),
+        queryFn: async({ signal }) => {
+          return apiFetch(resource, { pathParams, queryParams, logError, chain, fetchParams: { ...fetchParams, signal } }) as Promise<ResourcePayload<R>>;
+        },
+        ...queryOptions,
+      };
+    }),
+    combine: (results) => {
+      const isError = results.some((result) => result.isError);
+      const isSuccess = results.every((result) => result.isSuccess);
+
+      return {
+        isLoading: results.some((result) => result.isLoading),
+        isPlaceholderData: results.some((result) => result.isPlaceholderData),
+        isError,
+        isSuccess,
+        data: isSuccess ? results.map((result) => result.data).flat() as Array<ResourcePayload<R>> : undefined,
+        error: isError ? results.find((result) => result.error)?.error : undefined,
+      } satisfies ReturnType<R, E>;
+    },
+    ...queryOptions,
+  });
+}
diff --git a/types/api/noves.ts b/types/api/noves.ts
@@ -118,8 +118,3 @@ export type NovesDescribeTxsResponse = {
   type: string;
   description: string;
 };
-
-export interface NovesTxTranslation {
-  data?: NovesDescribeTxsResponse;
-  isLoading: boolean;
-}
diff --git a/types/api/transaction.ts b/types/api/transaction.ts
@@ -4,7 +4,6 @@ import type { BlockTransactionsResponse } from './block';
 import type { DecodedInput } from './decodedInput';
 import type { Fee } from './fee';
 import type { ChainInfo, MessageStatus } from './interop';
-import type { NovesTxTranslation } from './noves';
 import type { OptimisticL2WithdrawalClaimInfo, OptimisticL2WithdrawalStatus } from './optimisticL2';
 import type { ScrollL2BlockStatus } from './scrollL2';
 import type { TokenInfo } from './token';
@@ -104,8 +103,6 @@ export type Transaction = {
   blob_gas_price?: string;
   burnt_blob_fee?: string;
   max_fee_per_blob_gas?: string;
-  // Noves-fi
-  translation?: NovesTxTranslation;
   arbitrum?: ArbitrumTransactionData;
   scroll?: ScrollTransactionData;
   // EIP-7702

diff --git a/ui/txs/TxTranslationType.tsx b/ui/txs/TxTranslationType.tsx
@@ -8,22 +8,22 @@ import { camelCaseToSentence } from './noves/utils';
 import TxType from './TxType';
 
 export interface Props {
-  types: Array<TransactionType>;
+  txTypes: Array<TransactionType>;
   isLoading?: boolean;
-  translatationType: string | undefined;
+  type: string | undefined;
 }
 
-const TxTranslationType = ({ types, isLoading, translatationType }: Props) => {
+const FILTERED_TYPES = [ 'unclassified' ];
 
-  const filteredTypes = [ 'unclassified' ];
+const TxTranslationType = ({ txTypes, isLoading, type }: Props) => {
 
-  if (!translatationType || filteredTypes.includes(translatationType)) {
-    return <TxType types={ types } isLoading={ isLoading }/>;
+  if (!type || FILTERED_TYPES.includes(type.toLowerCase())) {
+    return <TxType types={ txTypes } isLoading={ isLoading }/>;
   }
 
   return (
     <Badge colorPalette="purple" loading={ isLoading }>
-      { camelCaseToSentence(translatationType) }
+      { camelCaseToSentence(type) }
     </Badge>
   );
 

diff --git a/ui/txs/TxsContent.tsx b/ui/txs/TxsContent.tsx
@@ -64,9 +64,9 @@ const TxsContent = ({
     setSorting?.(value);
   }, [ sort, setSorting ]);
 
-  const itemsWithTranslation = useDescribeTxs(items, currentAddress, isPlaceholderData);
+  const translationQuery = useDescribeTxs(items, currentAddress, isPlaceholderData);
 
-  const content = itemsWithTranslation ? (
+  const content = items && items.length > 0 ? (
     <>
       <Box hideFrom="lg">
         <TxsList
@@ -75,12 +75,13 @@ const TxsContent = ({
           isLoading={ isPlaceholderData }
           enableTimeIncrement={ enableTimeIncrement }
           currentAddress={ currentAddress }
-          items={ itemsWithTranslation }
+          items={ items }
+          translationQuery={ translationQuery }
         />
       </Box>
       <Box hideBelow="lg">
         <TxsTable
-          txs={ itemsWithTranslation }
+          txs={ items }
           sort={ sort }
           onSortToggle={ setSorting ? onSortToggle : undefined }
           showBlockInfo={ showBlockInfo }
@@ -90,6 +91,7 @@ const TxsContent = ({
           enableTimeIncrement={ enableTimeIncrement }
           isLoading={ isPlaceholderData }
           stickyHeader={ stickyHeader }
+          translationQuery={ translationQuery }
         />
       </Box>
     </>
@@ -117,7 +119,7 @@ const TxsContent = ({
   return (
     <DataListDisplay
       isError={ isError }
-      itemsNum={ itemsWithTranslation?.length }
+      itemsNum={ items?.length }
       emptyText="There are no transactions."
       actionBar={ actionBar }
       filterProps={{

diff --git a/ui/txs/TxsList.tsx b/ui/txs/TxsList.tsx
@@ -8,6 +8,7 @@ import { useMultichainContext } from 'lib/contexts/multichain';
 import useInitialList from 'lib/hooks/useInitialList';
 import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
 
+import type { TxsTranslationQuery } from './noves/useDescribeTxs';
 import TxsSocketNotice from './socket/TxsSocketNotice';
 import TxsListItem from './TxsListItem';
 
@@ -18,6 +19,7 @@ interface Props {
   currentAddress?: string;
   isLoading: boolean;
   items: Array<Transaction>;
+  translationQuery?: TxsTranslationQuery;
 }
 
 const TxsList = (props: Props) => {
@@ -33,18 +35,22 @@ const TxsList = (props: Props) => {
   return (
     <Box>
       { props.socketType && <TxsSocketNotice type={ props.socketType } place="list" isLoading={ props.isLoading }/> }
-      { props.items.slice(0, renderedItemsNum).map((tx, index) => (
-        <TxsListItem
-          key={ tx.hash + (props.isLoading ? index : '') }
-          tx={ tx }
-          showBlockInfo={ props.showBlockInfo }
-          currentAddress={ props.currentAddress }
-          enableTimeIncrement={ props.enableTimeIncrement }
-          isLoading={ props.isLoading }
-          animation={ initialList.getAnimationProp(tx) }
-          chainData={ chainData }
-        />
-      )) }
+      { props.items.slice(0, renderedItemsNum).map((tx, index) => {
+        return (
+          <TxsListItem
+            key={ tx.hash + (props.isLoading ? index : '') }
+            tx={ tx }
+            showBlockInfo={ props.showBlockInfo }
+            currentAddress={ props.currentAddress }
+            enableTimeIncrement={ props.enableTimeIncrement }
+            isLoading={ props.isLoading }
+            animation={ initialList.getAnimationProp(tx) }
+            chainData={ chainData }
+            translationIsLoading={ props.translationQuery?.isLoading }
+            translationData={ props.translationQuery?.data?.find(({ txHash }) => txHash.toLowerCase() === tx.hash.toLowerCase()) }
+          />
+        );
+      }) }
       <Box ref={ cutRef } h={ 0 }/>
     </Box>
   );

diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx
@@ -4,6 +4,7 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
+import type { NovesDescribeTxsResponse } from 'types/api/noves';
 import type { Transaction } from 'types/api/transaction';
 import type { ClusterChainConfig } from 'types/multichain';
 
@@ -33,20 +34,32 @@ type Props = {
   isLoading?: boolean;
   animation?: string;
   chainData?: ClusterChainConfig;
+  translationIsLoading?: boolean;
+  translationData?: NovesDescribeTxsResponse;
 };
 
-const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeIncrement, animation, chainData }: Props) => {
+const TxsListItem = ({
+  tx,
+  isLoading,
+  showBlockInfo,
+  currentAddress,
+  enableTimeIncrement,
+  animation,
+  chainData,
+  translationIsLoading,
+  translationData,
+}: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
 
   return (
     <ListItemMobile display="block" width="100%" animation={ animation } key={ tx.hash }>
       <Flex justifyContent="space-between" alignItems="flex-start" mt={ 4 }>
         <HStack flexWrap="wrap">
-          { tx.translation ? (
+          { translationIsLoading || translationData ? (
             <TxTranslationType
-              types={ tx.transaction_types }
-              isLoading={ isLoading || tx.translation.isLoading }
-              translatationType={ tx.translation.data?.type }
+              txTypes={ tx.transaction_types }
+              isLoading={ isLoading || translationIsLoading }
+              type={ translationData?.type }
             />
           ) :
             <TxType types={ tx.transaction_types } isLoading={ isLoading }/>

diff --git a/ui/txs/TxsTable.tsx b/ui/txs/TxsTable.tsx
@@ -12,6 +12,7 @@ import { currencyUnits } from 'lib/units';
 import { TableBody, TableColumnHeader, TableColumnHeaderSortable, TableHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
+import type { TxsTranslationQuery } from './noves/useDescribeTxs';
 import TxsSocketNotice from './socket/TxsSocketNotice';
 import TxsTableItem from './TxsTableItem';
 
@@ -26,6 +27,7 @@ type Props = {
   enableTimeIncrement?: boolean;
   isLoading?: boolean;
   stickyHeader?: boolean;
+  translationQuery?: TxsTranslationQuery;
 };
 
 const TxsTable = ({
@@ -39,6 +41,7 @@ const TxsTable = ({
   enableTimeIncrement,
   isLoading,
   stickyHeader = true,
+  translationQuery,
 }: Props) => {
   const { cutRef, renderedItemsNum } = useLazyRenderedList(txs, !isLoading);
   const initialList = useInitialList({
@@ -118,18 +121,22 @@ const TxsTable = ({
         </TableHeaderComponent>
         <TableBody>
           { socketType && <TxsSocketNotice type={ socketType } place="table" isLoading={ isLoading }/> }
-          { txs.slice(0, renderedItemsNum).map((item, index) => (
-            <TxsTableItem
-              key={ item.hash + (isLoading ? index : '') }
-              tx={ item }
-              showBlockInfo={ showBlockInfo }
-              currentAddress={ currentAddress }
-              enableTimeIncrement={ enableTimeIncrement }
-              isLoading={ isLoading }
-              animation={ initialList.getAnimationProp(item) }
-              chainData={ chainData }
-            />
-          )) }
+          { txs.slice(0, renderedItemsNum).map((item, index) => {
+            return (
+              <TxsTableItem
+                key={ item.hash + (isLoading ? index : '') }
+                tx={ item }
+                showBlockInfo={ showBlockInfo }
+                currentAddress={ currentAddress }
+                enableTimeIncrement={ enableTimeIncrement }
+                isLoading={ isLoading }
+                animation={ initialList.getAnimationProp(item) }
+                chainData={ chainData }
+                translationIsLoading={ translationQuery?.isLoading }
+                translationData={ translationQuery?.data?.find(({ txHash }) => txHash.toLowerCase() === item.hash.toLowerCase()) }
+              />
+            );
+          }) }
         </TableBody>
       </TableRoot>
       <div ref={ cutRef }/>

diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx
@@ -1,6 +1,7 @@
 import { Flex, VStack } from '@chakra-ui/react';
 import React from 'react';
 
+import type { NovesDescribeTxsResponse } from 'types/api/noves';
 import type { Transaction } from 'types/api/transaction';
 import type { ClusterChainConfig } from 'types/multichain';
 
@@ -30,9 +31,21 @@ type Props = {
   isLoading?: boolean;
   animation?: string;
   chainData?: ClusterChainConfig;
+  translationIsLoading?: boolean;
+  translationData?: NovesDescribeTxsResponse;
 };
 
-const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, isLoading, animation, chainData }: Props) => {
+const TxsTableItem = ({
+  tx,
+  showBlockInfo,
+  currentAddress,
+  enableTimeIncrement,
+  isLoading,
+  animation,
+  chainData,
+  translationIsLoading,
+  translationData,
+}: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
 
   return (
@@ -65,11 +78,11 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
       </TableCell>
       <TableCell>
         <VStack alignItems="start">
-          { tx.translation ? (
+          { translationIsLoading || translationData ? (
             <TxTranslationType
-              types={ tx.transaction_types }
-              isLoading={ isLoading || tx.translation.isLoading }
-              translatationType={ tx.translation.data?.type }
+              txTypes={ tx.transaction_types }
+              isLoading={ isLoading || translationIsLoading }
+              type={ translationData?.type }
             />
           ) :
             <TxType types={ tx.transaction_types } isLoading={ isLoading }/>