user ops tab in tx

lib/api/resources.ts

@@ -77,7 +77,7 @@ import type {
 import type { TxInterpretationResponse } from 'types/api/txInterpretation';
 import type { TTxsFilters } from 'types/api/txsFilters';
 import type { TxStateChanges } from 'types/api/txStateChanges';
-import type { UserOpsResponse, UserOp } from 'types/api/userOps';
+import type { UserOpsResponse, UserOp, UserOpsFilters } from 'types/api/userOps';
 import type { VerifiedContractsSorting } from 'types/api/verifiedContracts';
 import type { VisualizedContract } from 'types/api/visualization';
 import type { WithdrawalsResponse, WithdrawalsCounters } from 'types/api/withdrawals';
@@ -583,7 +583,7 @@ export const RESOURCES = {
   // USER OPS
   user_ops: {
     path: '/api/v2/proxy/account-abstraction/operations',
-    filterFields: [],
+    filterFields: [ 'transaction_hash' as const ],
   },
 
   user_op: {
@@ -789,6 +789,7 @@ Q extends 'tokens_bridged' ? TokensBridgedFilters :
 Q extends 'verified_contracts' ? VerifiedContractsFilters :
 Q extends 'addresses_lookup' ? EnsAddressLookupFilters :
 Q extends 'domains_lookup' ? EnsDomainLookupFilters :
+Q extends 'user_ops' ? UserOpsFilters :
 never;
 /* eslint-enable @typescript-eslint/indent */
 

types/api/userOps.ts

@@ -50,3 +50,7 @@ export type UserOp = {
   user_logs_start_index: number;
   user_logs_count: number;
 }
+
+export type UserOpsFilters = {
+  transaction_hash?: string;
+}

ui/pages/Transaction.tsx

@@ -22,6 +22,7 @@ import TxRawTrace from 'ui/tx/TxRawTrace';
 import TxState from 'ui/tx/TxState';
 import TxSubHeading from 'ui/tx/TxSubHeading';
 import TxTokenTransfer from 'ui/tx/TxTokenTransfer';
+import TxUserOps from 'ui/tx/TxUserOps';
 
 const TransactionPageContent = () => {
   const router = useRouter();
@@ -47,6 +48,7 @@ const TransactionPageContent = () => {
       { id: 'wrapped', title: 'Regular tx details', component: <TxDetailsWrapped data={ data.wrapped }/> } :
       undefined,
     { id: 'token_transfers', title: 'Token transfers', component: <TxTokenTransfer/> },
+    config.features.userOps.isEnabled ? { id: 'user_ops', title: 'User operations', component: <TxUserOps/> } : undefined,
     { id: 'internal', title: 'Internal txns', component: <TxInternals/> },
     { id: 'logs', title: 'Logs', component: <TxLogs/> },
     { id: 'state', title: 'State', component: <TxState/> },

ui/tx/TxUserOps.tsx

+import { Hide, Show } from '@chakra-ui/react';
+import React from 'react';
+
+import { SECOND } from 'lib/consts';
+import { USER_OPS_ITEM } from 'stubs/userOps';
+import { generateListStub } from 'stubs/utils';
+import ActionBar from 'ui/shared/ActionBar';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import TxPendingAlert from 'ui/tx/TxPendingAlert';
+import TxSocketAlert from 'ui/tx/TxSocketAlert';
+import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
+import UserOpsListItem from 'ui/userOps/UserOpsListItem';
+import UserOpsTable from 'ui/userOps/UserOpsTable';
+
+const TxTokenTransfer = () => {
+  const txsInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
+
+  const userOpsQuery = useQueryWithPages({
+    resourceName: 'user_ops',
+    options: {
+      enabled: !txsInfo.isPlaceholderData && Boolean(txsInfo.data?.status && txsInfo.data?.hash),
+      // most often there is only one user op in one tx
+      placeholderData: generateListStub<'user_ops'>(USER_OPS_ITEM, 1, { next_page_params: null }),
+    },
+    filters: { transaction_hash: txsInfo.data?.hash },
+  });
+
+  if (!txsInfo.isPending && !txsInfo.isPlaceholderData && !txsInfo.isError && !txsInfo.data.status) {
+    return txsInfo.socketStatus ? <TxSocketAlert status={ txsInfo.socketStatus }/> : <TxPendingAlert/>;
+  }
+
+  if (txsInfo.isError || userOpsQuery.isError) {
+    return <DataFetchAlert/>;
+  }
+
+  const content = userOpsQuery.data?.items ? (
+    <>
+      <Hide below="lg" ssr={ false }>
+        <UserOpsTable items={ userOpsQuery.data?.items } top={ userOpsQuery.pagination.isVisible ? 0 : 80 } isLoading={ userOpsQuery.isPlaceholderData }/>
+      </Hide>
+      <Show below="lg" ssr={ false }>
+        { userOpsQuery.data.items.map(((item, index) => (
+          <UserOpsListItem
+            key={ item.hash + (userOpsQuery.isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ userOpsQuery.isPlaceholderData }
+          />
+        ))) }
+      </Show>
+    </>
+  ) : null;
+
+  const actionBar = userOpsQuery.pagination.isVisible ? (
+    <ActionBar mt={ -6 } alignItems="center">
+      <Pagination ml="auto" { ...userOpsQuery.pagination }/>
+    </ActionBar>
+  ) : null;
+
+  return (
+    <DataListDisplay
+      isError={ txsInfo.isError || userOpsQuery.isError }
+      items={ userOpsQuery.data?.items }
+      emptyText="There are no user operations."
+      content={ content }
+      actionBar={ actionBar }
+    />
+  );
+};
+
+export default TxTokenTransfer;