Skip to content

F
frontend
Commit a7a0a395 authored by isstuev's avatar isstuev
Browse files
Options

review fixes

parent b752acc9
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 45 deletions
pages/op/[hash].tsx
View file @ a7a0a395
...@@ -9,7 +9,7 @@ const UserOp = dynamic(() => import('ui/pages/UserOp'), { ssr: false }); ...@@ -9,7 +9,7 @@ const UserOp = dynamic(() => import('ui/pages/UserOp'), { ssr: false });
const Page: NextPage<Props> = (props: Props) => { const Page: NextPage<Props> = (props: Props) => {
return ( return (
<PageNextJs pathname="/op/[height_or_hash]" query={ props }> <PageNextJs pathname="/op/[hash]" query={ props }>
<UserOp/> <UserOp/>
</PageNextJs> </PageNextJs>
); );
......
stubs/userOps.ts
View file @ a7a0a395
import type { UserOpsItem, UserOp, UserOpsAccount } from 'types/api/userOps'; 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 = { export const USER_OPS_ITEM: UserOpsItem = {
hash: '0xb94fab8f31f83001a23e20b2ce3cdcfb284c57a64b9a073e0e09c018bc701978', hash: USER_OP_HASH,
block_number: '10356381', block_number: '10356381',
transaction_hash: '0xffcef406eb73986e25666ecfbe03b9dd19d19f28af7477923a5d2979f7b06a43', transaction_hash: TX_HASH,
address: '0x749abd4A31CC4B005526A5F288BEB27f3e239067', address: ADDRESS_HASH,
timestamp: '2023-12-18T10:48:49.000000Z', timestamp: '2023-12-18T10:48:49.000000Z',
status: true, status: true,
fee: '48285720012071430', fee: '48285720012071430',
}; };
export const USER_OP: UserOp = { export const USER_OP: UserOp = {
hash: '0x20d6ed2bf0a04b011184c801e0b79fbd9411d32be14a6fab3d6150f2691970df', hash: USER_OP_HASH,
sender: '0xAb28462026f7E7318808a6aF1accAbD13031Af9c', sender: ADDRESS_HASH,
nonce: '0x000000000000000000000000000000000000000000000000000000000000000b', nonce: '0x00b',
// eslint-disable-next-line max-len call_data: '0x123',
call_data: '0x51945447000000000000000000000000fd04fb0538479ad70dfae539c875b2c1802050120000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000024d55f960d0adbe9c9b444dc1fbe2b475312067d9dea42db93646ccc87057657aba1d49cd800000000000000000000000000000000000000000000000000000000',
call_gas_limit: '71316', call_gas_limit: '71316',
verification_gas_limit: '91551', verification_gas_limit: '91551',
pre_verification_gas: '53627', pre_verification_gas: '53627',
max_fee_per_gas: '100000020', max_fee_per_gas: '100000020',
max_priority_fee_per_gas: '100000000', max_priority_fee_per_gas: '100000000',
// eslint-disable-next-line max-len signature: '0x000',
signature: '0x00000000e1dcf07c8718b7332ec4df784a18ea1d94a22886b9640c47a14ff3642c11840a63b7bb7f1d421d3eed4f8c5ca40cc421bbde196afa430aad9773703e23c382d11c',
aggregator: null, aggregator: null,
aggregator_signature: null, aggregator_signature: null,
entry_point: '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789', entry_point: ADDRESS_HASH,
transaction_hash: '0xf2609117783dde161ee08f48e0ce4769645956eb7b86897290592cf85a268d7d', transaction_hash: TX_HASH,
block_number: '10358181', block_number: '10358181',
block_hash: '0xbb29763848c5201c47c3a0d44148b662222c480c4f12ec03fe7f8129d6af9eb0', block_hash: BLOCK_HASH,
bundler: '0x6892BEF4aE1b5cb33F9A175Ab822518c9025fc3C', bundler: ADDRESS_HASH,
factory: null, factory: null,
paymaster: '0xE93ECa6595fe94091DC1af46aaC2A8b5D7990770', paymaster: ADDRESS_HASH,
status: true, status: true,
revert_reason: null, revert_reason: null,
gas: '399596', gas: '399596',
...@@ -43,18 +47,17 @@ export const USER_OP: UserOp = { ...@@ -43,18 +47,17 @@ export const USER_OP: UserOp = {
user_logs_count: 1, user_logs_count: 1,
user_logs_start_index: 2, user_logs_start_index: 2,
raw: { raw: {
sender: '0xbE0c5Ef0Da631723Fc32EC12a61173628774Efd2', sender: ADDRESS_HASH,
nonce: '1', nonce: '1',
init_code: '0x', init_code: '0x',
// eslint-disable-next-line max-len call_data: '0x345',
call_data: '0x34fcd5be0000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000200000000000000000000000004200000000000000000000000000000000000042000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000044a9059cbb00000000000000000000000030713a9895e150d73fb7676d054814d30266f8f100000000000000000000000000000000000000000000000002c68af0bb14000000000000000000000000000000000000000000000000000000000000',
call_gas_limit: '29491', call_gas_limit: '29491',
verification_gas_limit: '80734', verification_gas_limit: '80734',
pre_verification_gas: '3276112', pre_verification_gas: '3276112',
max_fee_per_gas: '309847206', max_fee_per_gas: '309847206',
max_priority_fee_per_gas: '100000000', max_priority_fee_per_gas: '100000000',
paymaster_and_data: '0x', paymaster_and_data: '0x',
signature: '0x000000000beec352335acb3aef09a1f4e00877540db24283a347c475bdee548df87b8bc424e6493076495fdf7ced709507e45245b54e59c967dfdf1d24815416e8a639bb1b', signature: '0x000',
}, },
}; };
......
types/api/userOps.ts
View file @ a7a0a395
...@@ -48,7 +48,6 @@ export type UserOp = { ...@@ -48,7 +48,6 @@ export type UserOp = {
call_data: string; call_data: string;
user_logs_start_index: number; user_logs_start_index: number;
user_logs_count: number; user_logs_count: number;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
raw: { raw: {
call_data: string; call_data: string;
call_gas_limit: string; call_gas_limit: string;
......
ui/pages/SearchResults.tsx
View file @ a7a0a395
...@@ -69,7 +69,7 @@ const SearchResultsPageContent = () => { ...@@ -69,7 +69,7 @@ const SearchResultsPageContent = () => {
event.preventDefault(); event.preventDefault();
}, [ ]); }, [ ]);
const dataToDisplay = (data?.items || []).filter((item) => { const displayedItems = (data?.items || []).filter((item) => {
if (!config.features.userOps.isEnabled && item.type === 'user_operation') { if (!config.features.userOps.isEnabled && item.type === 'user_operation') {
return false; return false;
} }
...@@ -81,7 +81,7 @@ const SearchResultsPageContent = () => { ...@@ -81,7 +81,7 @@ const SearchResultsPageContent = () => {
return <DataFetchAlert/>; return <DataFetchAlert/>;
} }
const hasData = dataToDisplay.length || (pagination.page === 1 && marketplaceApps.displayedApps.length); const hasData = displayedItems.length || (pagination.page === 1 && marketplaceApps.displayedApps.length);
if (!hasData) { if (!hasData) {
return null; return null;
...@@ -97,7 +97,7 @@ const SearchResultsPageContent = () => { ...@@ -97,7 +97,7 @@ const SearchResultsPageContent = () => {
searchTerm={ debouncedSearchTerm } searchTerm={ debouncedSearchTerm }
/> />
)) } )) }
{ dataToDisplay.map((item, index) => ( { displayedItems.map((item, index) => (
<SearchResultListItem <SearchResultListItem
key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index } key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
data={ item } data={ item }
...@@ -124,7 +124,7 @@ const SearchResultsPageContent = () => { ...@@ -124,7 +124,7 @@ const SearchResultsPageContent = () => {
searchTerm={ debouncedSearchTerm } searchTerm={ debouncedSearchTerm }
/> />
)) } )) }
{ dataToDisplay.map((item, index) => ( { displayedItems.map((item, index) => (
<SearchResultTableItem <SearchResultTableItem
key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index } key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
data={ item } data={ item }
...@@ -144,7 +144,7 @@ const SearchResultsPageContent = () => { ...@@ -144,7 +144,7 @@ const SearchResultsPageContent = () => {
return null; 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 ? ( const text = isPlaceholderData && pagination.page === 1 ? (
<Skeleton h={ 6 } w="280px" borderRadius="full" mb={ pagination.isVisible ? 0 : 6 }/> <Skeleton h={ 6 } w="280px" borderRadius="full" mb={ pagination.isVisible ? 0 : 6 }/>
...@@ -155,7 +155,7 @@ const SearchResultsPageContent = () => { ...@@ -155,7 +155,7 @@ const SearchResultsPageContent = () => {
<chakra.span fontWeight={ 700 }> <chakra.span fontWeight={ 700 }>
{ resultsCount } { resultsCount }
</chakra.span> </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>” “<chakra.span fontWeight={ 700 }>{ debouncedSearchTerm }</chakra.span>”
</Box> </Box>
) )
......
ui/pages/UserOps.pw.tsx
View file @ a7a0a395
import { Box } from '@chakra-ui/react';
import { test as base, expect } from '@playwright/experimental-ct-react'; import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
...@@ -29,7 +30,9 @@ test('base view +@mobile', async({ mount, page }) => { ...@@ -29,7 +30,9 @@ test('base view +@mobile', async({ mount, page }) => {
const component = await mount( const component = await mount(
<TestApp> <TestApp>
<UserOps/> <Box pt={{ base: '106px', lg: 0 }}>
<UserOps/>
</Box>
</TestApp>, </TestApp>,
); );
......
ui/searchResults/SearchResultListItem.tsx
View file @ a7a0a395
...@@ -15,7 +15,7 @@ import * as AddressEntity from 'ui/shared/entities/address/AddressEntity'; ...@@ -15,7 +15,7 @@ import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
import * as BlockEntity from 'ui/shared/entities/block/BlockEntity'; import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity'; import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
import * as TxEntity from 'ui/shared/entities/tx/TxEntity'; 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 HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
import LinkExternal from 'ui/shared/LinkExternal'; import LinkExternal from 'ui/shared/LinkExternal';
...@@ -202,22 +202,22 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => { ...@@ -202,22 +202,22 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
} }
case 'user_operation': { case 'user_operation': {
return ( return (
<UserOpEtity.Container> <UserOpEntity.Container>
<UserOpEtity.Icon/> <UserOpEntity.Icon/>
<UserOpEtity.Link <UserOpEntity.Link
isLoading={ isLoading } isLoading={ isLoading }
hash={ data.user_operation_hash } hash={ data.user_operation_hash }
onClick={ handleLinkClick } onClick={ handleLinkClick }
> >
<UserOpEtity.Content <UserOpEntity.Content
asProp="mark" asProp="mark"
hash={ data.user_operation_hash } hash={ data.user_operation_hash }
fontSize="sm" fontSize="sm"
lineHeight={ 5 } lineHeight={ 5 }
fontWeight={ 700 } fontWeight={ 700 }
/> />
</UserOpEtity.Link> </UserOpEntity.Link>
</UserOpEtity.Container> </UserOpEntity.Container>
); );
} }
} }
......
ui/searchResults/SearchResultTableItem.tsx
View file @ a7a0a395
...@@ -15,7 +15,7 @@ import * as AddressEntity from 'ui/shared/entities/address/AddressEntity'; ...@@ -15,7 +15,7 @@ import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
import * as BlockEntity from 'ui/shared/entities/block/BlockEntity'; import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity'; import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
import * as TxEntity from 'ui/shared/entities/tx/TxEntity'; 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 HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
import LinkExternal from 'ui/shared/LinkExternal'; import LinkExternal from 'ui/shared/LinkExternal';
...@@ -289,22 +289,22 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => { ...@@ -289,22 +289,22 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
return ( return (
<> <>
<Td colSpan={ 2 } fontSize="sm"> <Td colSpan={ 2 } fontSize="sm">
<UserOpEtity.Container> <UserOpEntity.Container>
<UserOpEtity.Icon/> <UserOpEntity.Icon/>
<UserOpEtity.Link <UserOpEntity.Link
isLoading={ isLoading } isLoading={ isLoading }
hash={ data.user_operation_hash } hash={ data.user_operation_hash }
onClick={ handleLinkClick } onClick={ handleLinkClick }
> >
<UserOpEtity.Content <UserOpEntity.Content
asProp="mark" asProp="mark"
hash={ data.user_operation_hash } hash={ data.user_operation_hash }
fontSize="sm" fontSize="sm"
lineHeight={ 5 } lineHeight={ 5 }
fontWeight={ 700 } fontWeight={ 700 }
/> />
</UserOpEtity.Link> </UserOpEntity.Link>
</UserOpEtity.Container> </UserOpEntity.Container>
</Td> </Td>
<Td fontSize="sm" verticalAlign="middle" isNumeric> <Td fontSize="sm" verticalAlign="middle" isNumeric>
<Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text> <Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
......
ui/userOp/UserOpRaw.tsx
View file @ a7a0a395
...@@ -5,12 +5,12 @@ import type { UserOp } from 'types/api/userOps'; ...@@ -5,12 +5,12 @@ import type { UserOp } from 'types/api/userOps';
import RawDataSnippet from 'ui/shared/RawDataSnippet'; import RawDataSnippet from 'ui/shared/RawDataSnippet';
// order is taken from the ERC-4337 standard
// eslint-disable-next-line max-len // 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' ]; 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 { interface Props {
// eslint-disable-next-line @typescript-eslint/no-explicit-any rawData?: UserOp['raw'];
rawData?: Record<string, any>;
isLoading?: boolean; isLoading?: boolean;
} }
......
ui/userOps/UserOpsContent.tsx
View file @ a7a0a395
...@@ -47,7 +47,7 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => { ...@@ -47,7 +47,7 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
) : null; ) : null;
const actionBar = query.pagination.isVisible ? ( const actionBar = query.pagination.isVisible ? (
<ActionBar mt={ -6 } alignItems="center"> <ActionBar mt={ -6 }>
<Pagination ml="auto" { ...query.pagination }/> <Pagination ml="auto" { ...query.pagination }/>
</ActionBar> </ActionBar>
) : null; ) : null;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment