tests, fixes, etc

mocks/userOps/userOp.ts

+import type { UserOp } from 'types/api/userOps';
+
+export const userOpData: UserOp = {
+  timestamp: '2024-01-19T12:42:12.000000Z',
+  transaction_hash: '0x715fe1474ac7bea3d6f4a03b1c5b6d626675fb0b103be29f849af65e9f1f9c6a',
+  user_logs_start_index: 40,
+  fee: '187125856691380',
+  call_gas_limit: '26624',
+  gas: '258875',
+  status: true,
+  aggregator_signature: null,
+  block_hash: '0xff5f41ec89e5fb3dfcf103bbbd67469fed491a7dd7cffdf00bd9e3bf45d8aeab',
+  pre_verification_gas: '48396',
+  factory: null,
+  signature: '0x2b95a173c1ea314d2c387e0d84194d221c14805e02157b7cefaf607a53e9081c0099ccbeaa1020ab91b862d4a4743dc1e20b4953f5bb6c13afeac760cef34fd11b',
+  verification_gas_limit: '61285',
+  max_fee_per_gas: '1575000898',
+  aggregator: null,
+  hash: '0xe72500491b3f2549ac53bd9de9dbb1d2edfc33cdddf5c079d6d64dfec650ef83',
+  gas_price: '1575000898',
+  user_logs_count: 1,
+  block_number: '10399597',
+  gas_used: '118810',
+  sender: {
+    ens_domain_name: null,
+    hash: '0xF0C14FF4404b188fAA39a3507B388998c10FE284',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: null,
+    name: null,
+  },
+  nonce: '0x000000000000000000000000000000000000000000000000000000000000004f',
+  entry_point: {
+    ens_domain_name: null,
+    hash: '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: null,
+    name: null,
+  },
+  sponsor_type: 'paymaster_sponsor',
+  raw: {
+    // eslint-disable-next-line max-len
+    call_data: '0xb61d27f600000000000000000000000059f6aa952df7f048fd076e33e0ea8bb552d5ffd8000000000000000000000000000000000000000000000000003f3d017500800000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000',
+    call_gas_limit: '26624',
+    init_code: '0x',
+    max_fee_per_gas: '1575000898',
+    max_priority_fee_per_gas: '1575000898',
+    nonce: '79',
+    // eslint-disable-next-line max-len
+    paymaster_and_data: '0x7cea357b5ac0639f89f9e378a1f03aa5005c0a250000000000000000000000000000000000000000000000000000000065b3a8800000000000000000000000000000000000000000000000000000000065aa6e0028fa4c57ac1141bc9ecd8c9243f618ade8ea1db10ab6c1d1798a222a824764ff2269a72ae7a3680fa8b03a80d8a00cdc710eaf37afdcc55f8c9c4defa3fdf2471b',
+    pre_verification_gas: '48396',
+    sender: '0xF0C14FF4404b188fAA39a3507B388998c10FE284',
+    signature: '0x2b95a173c1ea314d2c387e0d84194d221c14805e02157b7cefaf607a53e9081c0099ccbeaa1020ab91b862d4a4743dc1e20b4953f5bb6c13afeac760cef34fd11b',
+    verification_gas_limit: '61285',
+  },
+  max_priority_fee_per_gas: '1575000898',
+  revert_reason: null,
+  bundler: {
+    ens_domain_name: null,
+    hash: '0xd53Eb5203e367BbDD4f72338938224881Fc501Ab',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: null,
+    name: null,
+  },
+  // eslint-disable-next-line max-len
+  call_data: '0xb61d27f600000000000000000000000059f6aa952df7f048fd076e33e0ea8bb552d5ffd8000000000000000000000000000000000000000000000000003f3d017500800000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000',
+  paymaster: {
+    ens_domain_name: null,
+    hash: '0x7ceA357B5AC0639F89F9e378a1f03Aa5005C0a25',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: null,
+    name: null,
+  },
+};

mocks/userOps/userOps.ts

+import type { UserOpsResponse } from 'types/api/userOps';
+
+export const userOpsData: UserOpsResponse = {
+  items: [
+    {
+      address: {
+        ens_domain_name: null,
+        hash: '0xF0C14FF4404b188fAA39a3507B388998c10FE284',
+        implementation_name: null,
+        is_contract: true,
+        is_verified: null,
+        name: null,
+      },
+      block_number: '10399597',
+      fee: '187125856691380',
+      hash: '0xe72500491b3f2549ac53bd9de9dbb1d2edfc33cdddf5c079d6d64dfec650ef83',
+      status: true,
+      timestamp: '2022-01-19T12:42:12.000000Z',
+      transaction_hash: '0x715fe1474ac7bea3d6f4a03b1c5b6d626675fb0b103be29f849af65e9f1f9c6a',
+    },
+    {
+      address:
+        { ens_domain_name: null,
+          hash: '0x2c298CcaFFD1549e1C21F46966A6c236fCC66dB2',
+          implementation_name: null,
+          is_contract: true,
+          is_verified: null,
+          name: null,
+        },
+      block_number: '10399596',
+      fee: '381895502291373',
+      hash: '0xcb945ae86608bdc88c3318245403c81a880fcb1e49fef18ac59477761c056cea',
+      status: false,
+      timestamp: '2022-01-19T12:42:00.000000Z',
+      transaction_hash: '0x558d699e7cbc235461d48ed04b8c3892d598a4000f20851760d00dc3513c2e48',
+    },
+    {
+      address: {
+        ens_domain_name: null,
+        hash: '0x2c298CcaFFD1549e1C21F46966A6c236fCC66dB2',
+        implementation_name: null,
+        is_contract: true,
+        is_verified: null,
+        name: null,
+      },
+      block_number: '10399560',
+      fee: '165019501210143',
+      hash: '0x84c1270b12af3f0ffa204071f1bf503ebf9b1ccf6310680383be5a2b6fd1d8e5',
+      status: true,
+      timestamp: '2022-01-19T12:32:00.000000Z',
+      transaction_hash: '0xc4c1c38680ec63139411aa2193275e8de44be15217c4256db9473bf0ea2b6264',
+    },
+  ],
+  next_page_params: {
+    page_size: 50,
+    page_token: '10396582,0x9bf4d2a28813c5c244884cb20cdfe01dabb3f927234ae961eab6e38502de7a28',
+  },
+};

playwright/utils/configs.ts

@@ -36,6 +36,9 @@ export const featureEnvs = {
     { name: 'NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK', value: 'true' },
     { name: 'NEXT_PUBLIC_L1_BASE_URL', value: 'https://localhost:3101' },
   ],
+  userOps: [
+    { name: 'NEXT_PUBLIC_HAS_USER_OPS', value: 'true' },
+  ],
 };
 
 export const viewsEnvs = {

stubs/userOps.ts

@@ -35,6 +35,8 @@ export const USER_OP: UserOp = {
   status: true,
   revert_reason: null,
   gas: '399596',
+  gas_price: '1575000898',
+  gas_used: '118810',
   sponsor_type: 'paymaster_sponsor',
   fee: '17927001792700',
   timestamp: '2023-12-18T10:48:49.000000Z',

types/api/addressParams.ts

@@ -15,7 +15,7 @@ export interface UserTags {
   public_tags: Array<AddressTag> | null;
 }
 
-export interface AddressParam extends UserTags {
+export type AddressParamBasic = {
   hash: string;
   implementation_name: string | null;
   name: string | null;
@@ -23,3 +23,5 @@ export interface AddressParam extends UserTags {
   is_verified: boolean | null;
   ens_domain_name: string | null;
 }
+
+export type AddressParam = UserTags & AddressParamBasic;

types/api/userOps.ts

-import type { AddressParam } from './addressParams';
+import type { AddressParamBasic } from './addressParams';
 
 export type UserOpsItem = {
   hash: string;
   block_number: string;
   transaction_hash: string;
-  address: string | AddressParam;
+  address: string | AddressParamBasic;
   timestamp: string;
   status: boolean;
   fee: string;
@@ -22,7 +22,7 @@ export type UserOpSponsorType = 'paymaster_hybrid' | 'paymaster_sponsor' | 'wall
 
 export type UserOp = {
   hash: string;
-  sender: string | AddressParam;
+  sender: string | AddressParamBasic;
   status: boolean;
   revert_reason: string | null;
   timestamp: string | null;
@@ -31,7 +31,7 @@ export type UserOp = {
   transaction_hash: string;
   block_number: string;
   block_hash: string;
-  entry_point: string;
+  entry_point: string | AddressParamBasic;
   call_gas_limit: string;
   verification_gas_limit: string;
   pre_verification_gas: string;
@@ -39,9 +39,9 @@ export type UserOp = {
   max_priority_fee_per_gas: string;
   aggregator: string | null;
   aggregator_signature: string | null;
-  bundler: string;
+  bundler: string | AddressParamBasic;
   factory: string | null;
-  paymaster: string | null;
+  paymaster: string | AddressParamBasic | null;
   sponsor_type: UserOpSponsorType;
   signature: string;
   nonce: string;
@@ -50,6 +50,8 @@ export type UserOp = {
   user_logs_count: number;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   raw: Record<string, any>;
+  gas_price: string;
+  gas_used: string;
 }
 
 export type UserOpsFilters = {

ui/pages/UserOp.pw.tsx

+import { test as base, expect, devices } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { userOpData } from 'mocks/userOps/userOp';
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
+
+import UserOp from './UserOp';
+
+const test = base.extend({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
+});
+
+const USER_OP_API_URL = buildApiUrl('user_op', { hash: userOpData.hash });
+
+test('base view', async({ mount, page }) => {
+  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+    status: 200,
+    body: '',
+  }));
+
+  await page.route(USER_OP_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(userOpData),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <UserOp/>
+    </TestApp>,
+    { hooksConfig: {
+      router: {
+        query: { hash: userOpData.hash },
+        isReady: true,
+      },
+    } },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ mount, page }) => {
+    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+      status: 200,
+      body: '',
+    }));
+
+    await page.route(USER_OP_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(userOpData),
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <UserOp/>
+      </TestApp>,
+      { hooksConfig: {
+        router: {
+          query: { hash: userOpData.hash },
+          isReady: true,
+        },
+      } },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/pages/UserOps.pw.tsx

+import { test as base, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { userOpsData } from 'mocks/userOps/userOps';
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
+
+import UserOps from './UserOps';
+
+const test = base.extend({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
+});
+
+const USER_OPS_API_URL = buildApiUrl('user_ops');
+
+test('base view +@mobile', async({ mount, page }) => {
+  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+    status: 200,
+    body: '',
+  }));
+
+  await page.route(USER_OPS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(userOpsData),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <UserOps/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/shared/userOps/UserOpsAddress.tsx

 import React from 'react';
 
-import type { AddressParam } from 'types/api/addressParams';
+import type { AddressParamBasic } from 'types/api/addressParams';
 
 import AddressEntity from '../entities/address/AddressEntity';
 import type { EntityProps } from '../entities/address/AddressEntity';
 
 type Props = Omit<EntityProps, 'address'> & {
-  address: string | AddressParam;
+  address: string | AddressParamBasic;
 }
 
 const UserOpsAddress = ({ address, ...props }: Props) => {

ui/userOp/UserOpDetails.tsx

@@ -22,6 +22,7 @@ import UserOpsAddress from 'ui/shared/userOps/UserOpsAddress';
 import UserOpSponsorType from 'ui/shared/userOps/UserOpSponsorType';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {
   query: UseQueryResult<UserOp, ResourceError>;
@@ -128,6 +129,21 @@ const UserOpDetails = ({ query }: Props) => {
           { BigNumber(data.gas).toFormat() }
         </Skeleton>
       </DetailsInfoItem>
+      <DetailsInfoItem
+        title="Gas used"
+        hint="Actual gas amount used by the the User operation"
+        isLoading={ isPlaceholderData }
+      >
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          { BigNumber(data.gas_used).toFormat() }
+        </Skeleton>
+        <Utilization
+          ml={ 4 }
+          colorScheme="gray"
+          value={ BigNumber(data.gas_used).dividedBy(BigNumber(data.gas)).toNumber() }
+          isLoading={ isPlaceholderData }
+        />
+      </DetailsInfoItem>
       <DetailsInfoItem
         title="Transaction hash"
         hint="Hash of the transaction this User operation belongs to"