review fixes

blockscout · Jan 29, 2024 · a7a0a39 · a7a0a39
1 parent b752acc
commit a7a0a39
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 45 deletions.
diff --git a/pages/op/[hash].tsx b/pages/op/[hash].tsx
@@ -9,7 +9,7 @@ const UserOp = dynamic(() => import('ui/pages/UserOp'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/op/[height_or_hash]" query={ props }>
+    <PageNextJs pathname="/op/[hash]" query={ props }>
       <UserOp/>
     </PageNextJs>
   );

diff --git a/stubs/userOps.ts b/stubs/userOps.ts
@@ -1,37 +1,41 @@
 import type { UserOpsItem, UserOp, UserOpsAccount } from 'types/api/userOps';
 
+import { ADDRESS_HASH } from './addressParams';
+import { BLOCK_HASH } from './block';
+import { TX_HASH } from './tx';
+
+const USER_OP_HASH = '0xb94fab8f31f83001a23e20b2ce3cdcfb284c57a64b9a073e0e09c018bc701978';
+
 export const USER_OPS_ITEM: UserOpsItem = {
-  hash: '0xb94fab8f31f83001a23e20b2ce3cdcfb284c57a64b9a073e0e09c018bc701978',
+  hash: USER_OP_HASH,
   block_number: '10356381',
-  transaction_hash: '0xffcef406eb73986e25666ecfbe03b9dd19d19f28af7477923a5d2979f7b06a43',
-  address: '0x749abd4A31CC4B005526A5F288BEB27f3e239067',
+  transaction_hash: TX_HASH,
+  address: ADDRESS_HASH,
   timestamp: '2023-12-18T10:48:49.000000Z',
   status: true,
   fee: '48285720012071430',
 };
 
 export const USER_OP: UserOp = {
-  hash: '0x20d6ed2bf0a04b011184c801e0b79fbd9411d32be14a6fab3d6150f2691970df',
-  sender: '0xAb28462026f7E7318808a6aF1accAbD13031Af9c',
-  nonce: '0x000000000000000000000000000000000000000000000000000000000000000b',
-  // eslint-disable-next-line max-len
-  call_data: '0x51945447000000000000000000000000fd04fb0538479ad70dfae539c875b2c1802050120000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000024d55f960d0adbe9c9b444dc1fbe2b475312067d9dea42db93646ccc87057657aba1d49cd800000000000000000000000000000000000000000000000000000000',
+  hash: USER_OP_HASH,
+  sender: ADDRESS_HASH,
+  nonce: '0x00b',
+  call_data: '0x123',
   call_gas_limit: '71316',
   verification_gas_limit: '91551',
   pre_verification_gas: '53627',
   max_fee_per_gas: '100000020',
   max_priority_fee_per_gas: '100000000',
-  // eslint-disable-next-line max-len
-  signature: '0x00000000e1dcf07c8718b7332ec4df784a18ea1d94a22886b9640c47a14ff3642c11840a63b7bb7f1d421d3eed4f8c5ca40cc421bbde196afa430aad9773703e23c382d11c',
+  signature: '0x000',
   aggregator: null,
   aggregator_signature: null,
-  entry_point: '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789',
-  transaction_hash: '0xf2609117783dde161ee08f48e0ce4769645956eb7b86897290592cf85a268d7d',
+  entry_point: ADDRESS_HASH,
+  transaction_hash: TX_HASH,
   block_number: '10358181',
-  block_hash: '0xbb29763848c5201c47c3a0d44148b662222c480c4f12ec03fe7f8129d6af9eb0',
-  bundler: '0x6892BEF4aE1b5cb33F9A175Ab822518c9025fc3C',
+  block_hash: BLOCK_HASH,
+  bundler: ADDRESS_HASH,
   factory: null,
-  paymaster: '0xE93ECa6595fe94091DC1af46aaC2A8b5D7990770',
+  paymaster: ADDRESS_HASH,
   status: true,
   revert_reason: null,
   gas: '399596',
@@ -43,18 +47,17 @@ export const USER_OP: UserOp = {
   user_logs_count: 1,
   user_logs_start_index: 2,
   raw: {
-    sender: '0xbE0c5Ef0Da631723Fc32EC12a61173628774Efd2',
+    sender: ADDRESS_HASH,
     nonce: '1',
     init_code: '0x',
-    // eslint-disable-next-line max-len
-    call_data: '0x34fcd5be0000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000200000000000000000000000004200000000000000000000000000000000000042000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000044a9059cbb00000000000000000000000030713a9895e150d73fb7676d054814d30266f8f100000000000000000000000000000000000000000000000002c68af0bb14000000000000000000000000000000000000000000000000000000000000',
+    call_data: '0x345',
     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',
+    signature: '0x000',
   },
 };
 

diff --git a/types/api/userOps.ts b/types/api/userOps.ts
@@ -48,7 +48,6 @@ export type UserOp = {
   call_data: string;
   user_logs_start_index: number;
   user_logs_count: number;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   raw: {
     call_data: string;
     call_gas_limit: string;

diff --git a/ui/pages/SearchResults.tsx b/ui/pages/SearchResults.tsx
@@ -69,7 +69,7 @@ const SearchResultsPageContent = () => {
     event.preventDefault();
   }, [ ]);
 
-  const dataToDisplay = (data?.items || []).filter((item) => {
+  const displayedItems = (data?.items || []).filter((item) => {
     if (!config.features.userOps.isEnabled && item.type === 'user_operation') {
       return false;
     }
@@ -81,7 +81,7 @@ const SearchResultsPageContent = () => {
       return <DataFetchAlert/>;
     }
 
-    const hasData = dataToDisplay.length || (pagination.page === 1 && marketplaceApps.displayedApps.length);
+    const hasData = displayedItems.length || (pagination.page === 1 && marketplaceApps.displayedApps.length);
 
     if (!hasData) {
       return null;
@@ -97,7 +97,7 @@ const SearchResultsPageContent = () => {
               searchTerm={ debouncedSearchTerm }
             />
           )) }
-          { dataToDisplay.map((item, index) => (
+          { displayedItems.map((item, index) => (
             <SearchResultListItem
               key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
               data={ item }
@@ -124,7 +124,7 @@ const SearchResultsPageContent = () => {
                   searchTerm={ debouncedSearchTerm }
                 />
               )) }
-              { dataToDisplay.map((item, index) => (
+              { displayedItems.map((item, index) => (
                 <SearchResultTableItem
                   key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
                   data={ item }
@@ -144,7 +144,7 @@ const SearchResultsPageContent = () => {
       return null;
     }
 
-    const resultsCount = pagination.page === 1 && !data?.next_page_params ? (dataToDisplay.length || 0) + marketplaceApps.displayedApps.length : '50+';
+    const resultsCount = pagination.page === 1 && !data?.next_page_params ? (displayedItems.length || 0) + marketplaceApps.displayedApps.length : '50+';
 
     const text = isPlaceholderData && pagination.page === 1 ? (
       <Skeleton h={ 6 } w="280px" borderRadius="full" mb={ pagination.isVisible ? 0 : 6 }/>
@@ -155,7 +155,7 @@ const SearchResultsPageContent = () => {
           <chakra.span fontWeight={ 700 }>
             { resultsCount }
           </chakra.span>
-          <span> matching result{ (((dataToDisplay.length || 0) + marketplaceApps.displayedApps.length) > 1) || pagination.page > 1 ? 's' : '' } for </span>
+          <span> matching result{ (((displayedItems.length || 0) + marketplaceApps.displayedApps.length) > 1) || pagination.page > 1 ? 's' : '' } for </span>
           “<chakra.span fontWeight={ 700 }>{ debouncedSearchTerm }</chakra.span>”
         </Box>
       )

diff --git a/ui/pages/UserOps.pw.tsx b/ui/pages/UserOps.pw.tsx
@@ -1,3 +1,4 @@
+import { Box } from '@chakra-ui/react';
 import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
@@ -29,7 +30,9 @@ test('base view +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <UserOps/>
+      <Box pt={{ base: '106px', lg: 0 }}>
+        <UserOps/>
+      </Box>
     </TestApp>,
   );
 

diff --git a/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png
diff --git a/ui/searchResults/SearchResultListItem.tsx b/ui/searchResults/SearchResultListItem.tsx
@@ -15,7 +15,7 @@ import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
-import * as UserOpEtity from 'ui/shared/entities/userOp/UserOpEntity';
+import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/LinkExternal';
@@ -202,22 +202,22 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
       }
       case 'user_operation': {
         return (
-          <UserOpEtity.Container>
-            <UserOpEtity.Icon/>
-            <UserOpEtity.Link
+          <UserOpEntity.Container>
+            <UserOpEntity.Icon/>
+            <UserOpEntity.Link
               isLoading={ isLoading }
               hash={ data.user_operation_hash }
               onClick={ handleLinkClick }
             >
-              <UserOpEtity.Content
+              <UserOpEntity.Content
                 asProp="mark"
                 hash={ data.user_operation_hash }
                 fontSize="sm"
                 lineHeight={ 5 }
                 fontWeight={ 700 }
               />
-            </UserOpEtity.Link>
-          </UserOpEtity.Container>
+            </UserOpEntity.Link>
+          </UserOpEntity.Container>
         );
       }
     }

diff --git a/ui/searchResults/SearchResultTableItem.tsx b/ui/searchResults/SearchResultTableItem.tsx
@@ -15,7 +15,7 @@ import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
-import * as UserOpEtity from 'ui/shared/entities/userOp/UserOpEntity';
+import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/LinkExternal';
@@ -289,22 +289,22 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
         return (
           <>
             <Td colSpan={ 2 } fontSize="sm">
-              <UserOpEtity.Container>
-                <UserOpEtity.Icon/>
-                <UserOpEtity.Link
+              <UserOpEntity.Container>
+                <UserOpEntity.Icon/>
+                <UserOpEntity.Link
                   isLoading={ isLoading }
                   hash={ data.user_operation_hash }
                   onClick={ handleLinkClick }
                 >
-                  <UserOpEtity.Content
+                  <UserOpEntity.Content
                     asProp="mark"
                     hash={ data.user_operation_hash }
                     fontSize="sm"
                     lineHeight={ 5 }
                     fontWeight={ 700 }
                   />
-                </UserOpEtity.Link>
-              </UserOpEtity.Container>
+                </UserOpEntity.Link>
+              </UserOpEntity.Container>
             </Td>
             <Td fontSize="sm" verticalAlign="middle" isNumeric>
               <Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>

diff --git a/ui/userOp/UserOpRaw.tsx b/ui/userOp/UserOpRaw.tsx
@@ -5,12 +5,12 @@ import type { UserOp } from 'types/api/userOps';
 
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
+// order is taken from the ERC-4337 standard
 // eslint-disable-next-line max-len
 const KEYS_ORDER: Array<keyof UserOp['raw']> = [ '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' ];
 
 interface Props {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  rawData?: Record<string, any>;
+  rawData?: UserOp['raw'];
   isLoading?: boolean;
 }
 

diff --git a/ui/userOps/UserOpsContent.tsx b/ui/userOps/UserOpsContent.tsx
@@ -47,7 +47,7 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
   ) : null;
 
   const actionBar = query.pagination.isVisible ? (
-    <ActionBar mt={ -6 } alignItems="center">
+    <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...query.pagination }/>
     </ActionBar>
   ) : null;