raw data and some fixes

stubs/userOps.ts

@@ -39,6 +39,8 @@ export const USER_OP: UserOp = {
   sponsor_type: 'paymaster_sponsor',
   fee: '17927001792700',
   timestamp: '1704994440',
+  // eslint-disable-next-line max-len
+  paymaster_and_data: '0x23b944a93020a9c7c414b1adecdb2fd4cd4e81840000000000000000000000000000000000000000000000000000000065a919f70000000000000000000000000000000000000000000000000000000000000000a2c025b3257c409d7ec855f27ca2d7af7c0bee76ff7d9e9038378e70e974d18a182828dd2bca76de61bfae51ba4cff1afd382b451a6e0f5a73d693c04cf9a5311b',
   user_logs_count: 1,
   user_logs_start_index: 2,
 };

types/api/userOps.ts

@@ -49,6 +49,7 @@ export type UserOp = {
   call_data: string;
   user_logs_start_index: number;
   user_logs_count: number;
+  paymaster_and_data?: string;
 }
 
 export type UserOpsFilters = {

ui/pages/Address.tsx

@@ -169,7 +169,7 @@ const AddressPageContent = () => {
         addressQuery.data?.implementation_address ? { label: 'proxy', display_name: 'Proxy' } : undefined,
         addressQuery.data?.token ? { label: 'token', display_name: 'Token' } : undefined,
         isSafeAddress ? { label: 'safe', display_name: 'Multisig: Safe' } : undefined,
-        userOpsAccountQuery.data?.total_ops ? { label: 'user_ops_acc', display_name: 'Smart contract wallet' } : undefined,
+        userOpsAccountQuery.data ? { label: 'user_ops_acc', display_name: 'Smart contract wallet' } : undefined,
       ] }
     />
   );

ui/pages/UserOp.tsx

@@ -8,7 +8,6 @@ import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { USER_OP } from 'stubs/userOps';
 import TextAd from 'ui/shared/ad/TextAd';
@@ -16,20 +15,15 @@ import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import useTabIndexFromQuery from 'ui/shared/Tabs/useTabIndexFromQuery';
 import TxLogs from 'ui/tx/TxLogs';
 import TxTokenTransfer from 'ui/tx/TxTokenTransfer';
 import UserOpCallData from 'ui/userOp/UserOpCallData';
 import UserOpDetails from 'ui/userOp/UserOpDetails';
-
-const TAB_LIST_PROPS = {
-  marginBottom: 0,
-  py: 5,
-  marginTop: -5,
-};
+import UserOpRaw from 'ui/userOp/UserOpRaw';
 
 const BlockPageContent = () => {
   const router = useRouter();
-  const isMobile = useIsMobile();
   const appProps = useAppContext();
   const hash = getQueryParamString(router.query.hash);
 
@@ -70,11 +64,17 @@ const BlockPageContent = () => {
       title: 'Token transfers',
       component: <TxTokenTransfer txHash={ userOpQuery.data?.transaction_hash } tokenTransferFilter={ filterTokenTransfersByLogIndex }/>,
     },
-    { id: 'call_data', title: 'Call data', component: <UserOpCallData rawCallData={ userOpQuery.data?.call_data }/> },
+    {
+      id: 'call_data',
+      title: 'Call data',
+      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 txHash={ userOpQuery.data?.transaction_hash }/> }
+    { id: 'raw', title: 'Raw', component: <UserOpRaw query={ userOpQuery }/> },
   ].filter(Boolean)), [ userOpQuery, filterTokenTransfersByLogIndex, filterLogsByLogIndex ]);
 
+  const tabIndex = useTabIndexFromQuery(tabs);
+
   if (!hash) {
     throw new Error('User operation not found', { cause: { status: 404 } });
   }
@@ -106,7 +106,13 @@ const BlockPageContent = () => {
         backLink={ backLink }
         secondRow={ titleSecondRow }
       />
-      { userOpQuery.isPlaceholderData ? <TabsSkeleton tabs={ tabs }/> : <RoutedTabs tabs={ tabs } tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }/> }
+      { userOpQuery.isPlaceholderData ? (
+        <>
+          <TabsSkeleton tabs={ tabs } mt={ 6 }/>
+          { tabs[tabIndex]?.component }
+        </>
+      ) :
+        <RoutedTabs tabs={ tabs }/> }
     </>
   );
 };

ui/userOp/UserOpCallData.tsx

+import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import RawInputData from 'ui/shared/RawInputData';
@@ -5,13 +6,14 @@ import RawInputData from 'ui/shared/RawInputData';
 // decoded calldata will be added later
 type Props = {
   rawCallData?: string;
+  isLoading?: boolean;
 }
 
-const UserOpCallData = ({ rawCallData }: Props) => {
+const UserOpCallData = ({ rawCallData, isLoading }: Props) => {
   if (!rawCallData) {
     return null;
   }
-  return <RawInputData hex={ rawCallData }/>;
+  return <Skeleton isLoaded={ !isLoading }><RawInputData hex={ rawCallData }/></Skeleton>;
 };
 
 export default UserOpCallData;

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>;
+}
+
+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) {
+    return null;
+  }
+  const dataToDisplay = pick(query.data, RAW_FIELDS);
+
+  const text = JSON.stringify(dataToDisplay, undefined, 4);
+
+  return <Skeleton isLoaded={ !query.isPlaceholderData }><RawDataSnippet data={ text }/></Skeleton>;
+};
+
+export default UserOpRaw;