schema changes

stubs/userOps.ts

@@ -5,7 +5,7 @@ export const USER_OPS_ITEM: UserOpsItem = {
   block_number: '10356381',
   transaction_hash: '0xffcef406eb73986e25666ecfbe03b9dd19d19f28af7477923a5d2979f7b06a43',
   address: '0x749abd4A31CC4B005526A5F288BEB27f3e239067',
-  timestamp: '1704964728',
+  timestamp: '2023-12-18T10:48:49.000000Z',
   status: true,
   fee: '48285720012071430',
 };
@@ -14,7 +14,6 @@ export const USER_OP: UserOp = {
   hash: '0x20d6ed2bf0a04b011184c801e0b79fbd9411d32be14a6fab3d6150f2691970df',
   sender: '0xAb28462026f7E7318808a6aF1accAbD13031Af9c',
   nonce: '0x000000000000000000000000000000000000000000000000000000000000000b',
-  init_code: null,
   // eslint-disable-next-line max-len
   call_data: '0x51945447000000000000000000000000fd04fb0538479ad70dfae539c875b2c1802050120000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000024d55f960d0adbe9c9b444dc1fbe2b475312067d9dea42db93646ccc87057657aba1d49cd800000000000000000000000000000000000000000000000000000000',
   call_gas_limit: '71316',
@@ -38,11 +37,23 @@ export const USER_OP: UserOp = {
   gas: '399596',
   sponsor_type: 'paymaster_sponsor',
   fee: '17927001792700',
-  timestamp: '1704994440',
-  // eslint-disable-next-line max-len
-  paymaster_and_data: '0x23b944a93020a9c7c414b1adecdb2fd4cd4e81840000000000000000000000000000000000000000000000000000000065a919f70000000000000000000000000000000000000000000000000000000000000000a2c025b3257c409d7ec855f27ca2d7af7c0bee76ff7d9e9038378e70e974d18a182828dd2bca76de61bfae51ba4cff1afd382b451a6e0f5a73d693c04cf9a5311b',
+  timestamp: '2023-12-18T10:48:49.000000Z',
   user_logs_count: 1,
   user_logs_start_index: 2,
+  raw: {
+    sender: '0xbE0c5Ef0Da631723Fc32EC12a61173628774Efd2',
+    nonce: '1',
+    init_code: '0x',
+    // eslint-disable-next-line max-len
+    call_data: '0x34fcd5be0000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000200000000000000000000000004200000000000000000000000000000000000042000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000044a9059cbb00000000000000000000000030713a9895e150d73fb7676d054814d30266f8f100000000000000000000000000000000000000000000000002c68af0bb14000000000000000000000000000000000000000000000000000000000000',
+    call_gas_limit: '29491',
+    verification_gas_limit: '80734',
+    pre_verification_gas: '3276112',
+    max_fee_per_gas: '309847206',
+    max_priority_fee_per_gas: '100000000',
+    paymaster_and_data: '0x',
+    signature: '0x000000000beec352335acb3aef09a1f4e00877540db24283a347c475bdee548df87b8bc424e6493076495fdf7ced709507e45245b54e59c967dfdf1d24815416e8a639bb1b',
+  },
 };
 
 export const USER_OPS_ACCOUNT: UserOpsAccount = {

types/api/userOps.ts

@@ -43,13 +43,13 @@ export type UserOp = {
   factory: string | null;
   paymaster: string | null;
   sponsor_type: UserOpSponsorType;
-  init_code: string | null;
   signature: string;
   nonce: string;
   call_data: string;
   user_logs_start_index: number;
   user_logs_count: number;
-  paymaster_and_data?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  raw: Record<string, any>;
 }
 
 export type UserOpsFilters = {

ui/pages/UserOp.tsx

@@ -35,30 +35,27 @@ const UserOp = () => {
     },
   });
 
-  const logRangeStart = Number(userOpQuery.data?.user_logs_start_index);
-  const logRangeEnd = logRangeStart + Number(userOpQuery.data?.user_logs_count);
-
   const filterTokenTransfersByLogIndex = React.useCallback((tt: TokenTransfer) => {
     if (!userOpQuery.data) {
       return true;
     } else {
-      if (inRange(Number(tt.log_index), logRangeStart, logRangeEnd)) {
+      if (inRange(Number(tt.log_index), userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) {
         return true;
       }
       return false;
     }
-  }, [ userOpQuery.data, logRangeStart, logRangeEnd ]);
+  }, [ userOpQuery.data ]);
 
   const filterLogsByLogIndex = React.useCallback((log: Log) => {
     if (!userOpQuery.data) {
       return true;
     } else {
-      if (inRange(log.index, logRangeStart, logRangeEnd)) {
+      if (inRange(log.index, userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) {
         return true;
       }
       return false;
     }
-  }, [ userOpQuery.data, logRangeStart, logRangeEnd ]);
+  }, [ userOpQuery.data ]);
 
   const tabs: Array<RoutedTab> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <UserOpDetails query={ userOpQuery }/> },
@@ -73,7 +70,7 @@ const UserOp = () => {
       component: <UserOpCallData rawCallData={ userOpQuery.data?.call_data } isLoading={ userOpQuery.isPlaceholderData }/>,
     },
     { id: 'logs', title: 'Logs', component: <TxLogs txHash={ userOpQuery.data?.transaction_hash } logsFilter={ filterLogsByLogIndex }/> },
-    { id: 'raw', title: 'Raw', component: <UserOpRaw query={ userOpQuery }/> },
+    { id: 'raw', title: 'Raw', component: <UserOpRaw rawData={ userOpQuery.data?.raw } isLoading={ userOpQuery.isPlaceholderData }/> },
   ].filter(Boolean)), [ userOpQuery, filterTokenTransfersByLogIndex, filterLogsByLogIndex ]);
 
   const tabIndex = useTabIndexFromQuery(tabs);

ui/userOp/UserOpDetails.tsx

@@ -84,7 +84,6 @@ const UserOpDetails = ({ query }: Props) => {
       >
         <UserOpStatus status={ data.status } isLoading={ isPlaceholderData }/>
       </DetailsInfoItem>
-      { /* how to show it? */ }
       { data.revert_reason && (
         <DetailsInfoItem
           title="Revert reason"
@@ -104,8 +103,7 @@ const UserOpDetails = ({ query }: Props) => {
           hint="Date and time of User operation"
           isLoading={ isPlaceholderData }
         >
-          { /* timestamp format will be fixed  */ }
-          <DetailsTimestamp timestamp={ Number(data.timestamp) * 1000 } isLoading={ isPlaceholderData }/>
+          <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
         </DetailsInfoItem>
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
@@ -133,18 +131,21 @@ const UserOpDetails = ({ query }: Props) => {
       <DetailsInfoItem
         title="Transaction hash"
         hint="Hash of the transaction this User operation belongs to"
+        isLoading={ isPlaceholderData }
       >
         <TxEntity hash={ data.transaction_hash } isLoading={ isPlaceholderData } noCopy={ false }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Block"
         hint="Block number containing this User operation"
+        isLoading={ isPlaceholderData }
       >
         <BlockEntity number={ data.block_number } isLoading={ isPlaceholderData }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Entry point"
         hint="Contract that executes bundles of User operations"
+        isLoading={ isPlaceholderData }
       >
         <UserOpsAddress address={ data.entry_point } isLoading={ isPlaceholderData }/>
       </DetailsInfoItem>
@@ -259,16 +260,6 @@ const UserOpDetails = ({ query }: Props) => {
 
           <DetailsInfoItemDivider/>
 
-          { data.init_code && (
-            <DetailsInfoItem
-              title="Init code"
-              hint="Code used to deploy the account if not yet on-chain"
-              wordBreak="break-all"
-              whiteSpace="normal"
-            >
-              { data.init_code }
-            </DetailsInfoItem>
-          ) }
           <DetailsInfoItem
             title="Signature"
             hint="Used to validate a User operation along with the nonce during verification"

ui/userOp/UserOpRaw.tsx

 import { Skeleton } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
-import { pick } from 'lodash';
 import React from 'react';
 
-import type { UserOp } from 'types/api/userOps';
-
-import type { ResourceError } from 'lib/api/resources';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
 interface Props {
-  query: UseQueryResult<UserOp, ResourceError>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rawData?: Record<string, any>;
+  isLoading?: boolean;
 }
 
-const RAW_FIELDS: Array<keyof UserOp> = [
-  'sender',
-  'nonce',
-  'init_code',
-  'call_data',
-  'call_gas_limit',
-  'verification_gas_limit',
-  'pre_verification_gas',
-  'max_fee_per_gas',
-  'max_priority_fee_per_gas',
-  'paymaster_and_data',
-  'signature',
-];
-
-const UserOpRaw = ({ query }: Props) => {
-  if (!query.data) {
+const UserOpRaw = ({ rawData, isLoading }: Props) => {
+  if (!rawData) {
     return null;
   }
-  const dataToDisplay = pick(query.data, RAW_FIELDS);
 
-  const text = JSON.stringify(dataToDisplay, undefined, 4);
+  const text = JSON.stringify(rawData, undefined, 4);
 
-  return <Skeleton isLoaded={ !query.isPlaceholderData }><RawDataSnippet data={ text }/></Skeleton>;
+  return <Skeleton isLoaded={ !isLoading }><RawDataSnippet data={ text }/></Skeleton>;
 };
 
 export default UserOpRaw;

ui/userOps/UserOpsListItem.tsx

@@ -21,8 +21,7 @@ type Props = {
 };
 
 const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
-  // format will be fixed on the back-end
-  const timeAgo = dayjs(Number(item.timestamp) * 1000).fromNow();
+  const timeAgo = dayjs(item.timestamp).fromNow();
 
   return (
     <ListItemMobileGrid.Container gridTemplateColumns="100px auto">

ui/userOps/UserOpsTableItem.tsx

@@ -20,8 +20,7 @@ import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
  };
 
 const UserOpsTableItem = ({ item, isLoading, showTx, showSender }: Props) => {
-  // will be fixed on the back-end
-  const timeAgo = dayjs(Number(item.timestamp) * 1000).fromNow();
+  const timeAgo = dayjs(item.timestamp).fromNow();
 
   return (
     <Tr>