Skip to content

F
frontend
Commit 6916f065 authored by tom's avatar tom
Browse files
Options

shibarium, zksync and zkevm views

parent fbfd2d73
Show whitespace changes
Inline Side-by-side
Showing with 495 additions and 562 deletions
pages/batches/[number].tsx
View file @ 6916f065
...@@ -9,30 +9,30 @@ import config from 'configs/app'; ...@@ -9,30 +9,30 @@ import config from 'configs/app';
const rollupFeature = config.features.rollup; const rollupFeature = config.features.rollup;
// const Batch = dynamic(() => { const Batch = dynamic(() => {
// if (!rollupFeature.isEnabled) { if (!rollupFeature.isEnabled) {
// throw new Error('Rollup feature is not enabled.'); throw new Error('Rollup feature is not enabled.');
// } }
// switch (rollupFeature.type) { switch (rollupFeature.type) {
// case 'arbitrum': // case 'arbitrum':
// return import('ui/pages/ArbitrumL2TxnBatch'); // return import('ui/pages/ArbitrumL2TxnBatch');
// case 'optimistic': // case 'optimistic':
// return import('ui/pages/OptimisticL2TxnBatch'); // return import('ui/pages/OptimisticL2TxnBatch');
// case 'zkEvm': case 'zkEvm':
// return import('ui/pages/ZkEvmL2TxnBatch'); return import('ui/pages/ZkEvmL2TxnBatch');
// case 'zkSync': case 'zkSync':
// return import('ui/pages/ZkSyncL2TxnBatch'); return import('ui/pages/ZkSyncL2TxnBatch');
// case 'scroll': // case 'scroll':
// return import('ui/pages/ScrollL2TxnBatch'); // return import('ui/pages/ScrollL2TxnBatch');
// } }
// throw new Error('Txn batches feature is not enabled.'); throw new Error('Txn batches feature is not enabled.');
// }, { ssr: false }); }, { ssr: false });
const Page: NextPage<Props> = (props: Props) => { const Page: NextPage<Props> = (props: Props) => {
return ( return (
<PageNextJs pathname="/batches/[number]" query={ props.query }> <PageNextJs pathname="/batches/[number]" query={ props.query }>
{ /* <Batch/> */ } <Batch/>
</PageNextJs> </PageNextJs>
); );
}; };
......
pages/batches/index.tsx
View file @ 6916f065
...@@ -7,30 +7,30 @@ import PageNextJs from 'nextjs/PageNextJs'; ...@@ -7,30 +7,30 @@ import PageNextJs from 'nextjs/PageNextJs';
import config from 'configs/app'; import config from 'configs/app';
const rollupFeature = config.features.rollup; const rollupFeature = config.features.rollup;
// const Batches = dynamic(() => { const Batches = dynamic(() => {
// if (!rollupFeature.isEnabled) { if (!rollupFeature.isEnabled) {
// throw new Error('Rollup feature is not enabled.'); throw new Error('Rollup feature is not enabled.');
// } }
// switch (rollupFeature.type) { switch (rollupFeature.type) {
// case 'zkEvm': case 'zkEvm':
// return import('ui/pages/ZkEvmL2TxnBatches'); return import('ui/pages/ZkEvmL2TxnBatches');
// case 'zkSync': case 'zkSync':
// return import('ui/pages/ZkSyncL2TxnBatches'); return import('ui/pages/ZkSyncL2TxnBatches');
// case 'optimistic': // case 'optimistic':
// return import('ui/pages/OptimisticL2TxnBatches'); // return import('ui/pages/OptimisticL2TxnBatches');
// case 'arbitrum': // case 'arbitrum':
// return import('ui/pages/ArbitrumL2TxnBatches'); // return import('ui/pages/ArbitrumL2TxnBatches');
// case 'scroll': // case 'scroll':
// return import('ui/pages/ScrollL2TxnBatches'); // return import('ui/pages/ScrollL2TxnBatches');
// } }
// throw new Error('Txn batches feature is not enabled.'); throw new Error('Txn batches feature is not enabled.');
// }, { ssr: false }); }, { ssr: false });
const Page: NextPage = () => { const Page: NextPage = () => {
return ( return (
<PageNextJs pathname="/batches"> <PageNextJs pathname="/batches">
{ /* <Batches/> */ } <Batches/>
</PageNextJs> </PageNextJs>
); );
}; };
......
pages/deposits/index.tsx
View file @ 6916f065
...@@ -7,34 +7,34 @@ import PageNextJs from 'nextjs/PageNextJs'; ...@@ -7,34 +7,34 @@ import PageNextJs from 'nextjs/PageNextJs';
import config from 'configs/app'; import config from 'configs/app';
const rollupFeature = config.features.rollup; const rollupFeature = config.features.rollup;
// const Deposits = dynamic(() => { const Deposits = dynamic(() => {
// if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') { // if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
// return import('ui/pages/OptimisticL2Deposits'); // return import('ui/pages/OptimisticL2Deposits');
// } // }
// if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') { // if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
// return import('ui/pages/ArbitrumL2Deposits'); // return import('ui/pages/ArbitrumL2Deposits');
// } // }
// if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') { if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') {
// return import('ui/pages/ShibariumDeposits'); return import('ui/pages/ShibariumDeposits');
// } }
// if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') { if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
// return import('ui/pages/ZkEvmL2Deposits'); return import('ui/pages/ZkEvmL2Deposits');
// } }
// if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') { // if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') {
// return import('ui/pages/ScrollL2Deposits'); // return import('ui/pages/ScrollL2Deposits');
// } // }
// throw new Error('Deposits feature is not enabled.'); throw new Error('Deposits feature is not enabled.');
// }, { ssr: false }); }, { ssr: false });
const Page: NextPage = () => { const Page: NextPage = () => {
return ( return (
<PageNextJs pathname="/deposits"> <PageNextJs pathname="/deposits">
{ /* <Deposits/> */ } <Deposits/>
</PageNextJs> </PageNextJs>
); );
}; };
......
pages/withdrawals/index.tsx
View file @ 6916f065
...@@ -8,38 +8,38 @@ import config from 'configs/app'; ...@@ -8,38 +8,38 @@ import config from 'configs/app';
const rollupFeature = config.features.rollup; const rollupFeature = config.features.rollup;
const beaconChainFeature = config.features.beaconChain; const beaconChainFeature = config.features.beaconChain;
// const Withdrawals = dynamic(() => { const Withdrawals = dynamic(() => {
// if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') { // if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
// return import('ui/pages/OptimisticL2Withdrawals'); // return import('ui/pages/OptimisticL2Withdrawals');
// } // }
// if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') { // if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
// return import('ui/pages/ArbitrumL2Withdrawals'); // return import('ui/pages/ArbitrumL2Withdrawals');
// } // }
// if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') { if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') {
// return import('ui/pages/ShibariumWithdrawals'); return import('ui/pages/ShibariumWithdrawals');
// } }
// if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') { if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
// return import('ui/pages/ZkEvmL2Withdrawals'); return import('ui/pages/ZkEvmL2Withdrawals');
// } }
// if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') { // if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') {
// return import('ui/pages/ScrollL2Withdrawals'); // return import('ui/pages/ScrollL2Withdrawals');
// } // }
// if (beaconChainFeature.isEnabled) { if (beaconChainFeature.isEnabled) {
// return import('ui/pages/BeaconChainWithdrawals'); return import('ui/pages/BeaconChainWithdrawals');
// } }
// throw new Error('Withdrawals feature is not enabled.'); throw new Error('Withdrawals feature is not enabled.');
// }, { ssr: false }); }, { ssr: false });
const Page: NextPage = () => { const Page: NextPage = () => {
return ( return (
<PageNextJs pathname="/withdrawals"> <PageNextJs pathname="/withdrawals">
{ /* <Withdrawals/> */ } <Withdrawals/>
</PageNextJs> </PageNextJs>
); );
}; };
......
toolkit/chakra/badge.tsx
View file @ 6916f065
...@@ -14,7 +14,7 @@ export interface BadgeProps extends Omit<ChakraBadgeProps, 'colorScheme'> { ...@@ -14,7 +14,7 @@ export interface BadgeProps extends Omit<ChakraBadgeProps, 'colorScheme'> {
truncated?: boolean; truncated?: boolean;
} }
export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>( export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
function Badge(props, ref) { function Badge(props, ref) {
const { loading, iconStart, children, asChild = true, truncated = false, ...rest } = props; const { loading, iconStart, children, asChild = true, truncated = false, ...rest } = props;
...@@ -27,8 +27,8 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>( ...@@ -27,8 +27,8 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
) : child; ) : child;
return ( return (
<Skeleton loading={ loading } asChild={ asChild }> <Skeleton loading={ loading } asChild={ asChild } ref={ ref }>
<ChakraBadge ref={ ref } display="inline-flex" alignItems="center" whiteSpace="nowrap" { ...rest }> <ChakraBadge display="inline-flex" alignItems="center" whiteSpace="nowrap" { ...rest }>
{ iconStart && <IconSvg name={ iconStart } boxSize="10px"/> } { iconStart && <IconSvg name={ iconStart } boxSize="10px"/> }
{ childrenElement } { childrenElement }
</ChakraBadge> </ChakraBadge>
......
ui/deposits/shibarium/DepositsListItem.tsx
View file @ 6916f065
...@@ -27,8 +27,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => { ...@@ -27,8 +27,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
<BlockEntityL1 <BlockEntityL1
number={ item.l1_block_number } number={ item.l1_block_number }
isLoading={ isLoading } isLoading={ isLoading }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
...@@ -38,8 +37,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => { ...@@ -38,8 +37,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l1_transaction_hash } hash={ item.l1_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
...@@ -49,8 +47,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => { ...@@ -49,8 +47,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
<TxEntity <TxEntity
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l2_transaction_hash } hash={ item.l2_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
......
ui/deposits/shibarium/DepositsTable.tsx
View file @ 6916f065
import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ShibariumDepositsItem } from 'types/api/shibarium'; import type { ShibariumDepositsItem } from 'types/api/shibarium';
import { default as Thead } from 'ui/shared/TheadSticky'; import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import DepositsTableItem from './DepositsTableItem'; import DepositsTableItem from './DepositsTableItem';
...@@ -15,22 +14,22 @@ import DepositsTableItem from './DepositsTableItem'; ...@@ -15,22 +14,22 @@ import DepositsTableItem from './DepositsTableItem';
const DepositsTable = ({ items, top, isLoading }: Props) => { const DepositsTable = ({ items, top, isLoading }: Props) => {
return ( return (
<Table style={{ tableLayout: 'auto' }} minW="950px"> <TableRoot style={{ tableLayout: 'auto' }} minW="950px">
<Thead top={ top }> <TableHeaderSticky top={ top }>
<Tr> <TableRow>
<Th>L1 block No</Th> <TableColumnHeader>L1 block No</TableColumnHeader>
<Th>L1 txn hash</Th> <TableColumnHeader>L1 txn hash</TableColumnHeader>
<Th>L2 txn hash</Th> <TableColumnHeader>L2 txn hash</TableColumnHeader>
<Th>User</Th> <TableColumnHeader>User</TableColumnHeader>
<Th>Age</Th> <TableColumnHeader>Age</TableColumnHeader>
</Tr> </TableRow>
</Thead> </TableHeaderSticky>
<Tbody> <TableBody>
{ items.map((item, index) => ( { items.map((item, index) => (
<DepositsTableItem key={ item.l2_transaction_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/> <DepositsTableItem key={ item.l2_transaction_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
)) } )) }
</Tbody> </TableBody>
</Table> </TableRoot>
); );
}; };
......
ui/deposits/shibarium/DepositsTableItem.tsx
View file @ 6916f065
import { Td, Tr } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ShibariumDepositsItem } from 'types/api/shibarium'; import type { ShibariumDepositsItem } from 'types/api/shibarium';
import config from 'configs/app'; import config from 'configs/app';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam'; import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
...@@ -21,51 +21,48 @@ const DepositsTableItem = ({ item, isLoading }: Props) => { ...@@ -21,51 +21,48 @@ const DepositsTableItem = ({ item, isLoading }: Props) => {
} }
return ( return (
<Tr> <TableRow>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<BlockEntityL1 <BlockEntityL1
number={ item.l1_block_number } number={ item.l1_block_number }
isLoading={ isLoading } isLoading={ isLoading }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l1_transaction_hash } hash={ item.l1_transaction_hash }
truncation="constant_long" truncation="constant_long"
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<TxEntity <TxEntity
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l2_transaction_hash } hash={ item.l2_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<AddressStringOrParam <AddressStringOrParam
address={ item.user } address={ item.user }
isLoading={ isLoading } isLoading={ isLoading }
truncation="constant" truncation="constant"
noCopy noCopy
/> />
</Td> </TableCell>
<Td verticalAlign="middle" pr={ 12 }> <TableCell verticalAlign="middle" pr={ 12 }>
<TimeAgoWithTooltip <TimeAgoWithTooltip
timestamp={ item.timestamp } timestamp={ item.timestamp }
isLoading={ isLoading } isLoading={ isLoading }
color="text_secondary" color="text_secondary"
display="inline-block" display="inline-block"
/> />
</Td> </TableCell>
</Tr> </TableRow>
); );
}; };
......
ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx
View file @ 6916f065
...@@ -5,7 +5,7 @@ import React from 'react'; ...@@ -5,7 +5,7 @@ import React from 'react';
import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2'; import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
import config from 'configs/app'; import config from 'configs/app';
import Skeleton from 'ui/shared/chakra/Skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
...@@ -29,15 +29,14 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => { ...@@ -29,15 +29,14 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
<BlockEntityL1 <BlockEntityL1
number={ item.block_number } number={ item.block_number }
isLoading={ isLoading } isLoading={ isLoading }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
<ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } display="inline-block"> <Skeleton loading={ isLoading } display="inline-block">
{ item.index } { item.index }
</Skeleton> </Skeleton>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
...@@ -47,8 +46,7 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => { ...@@ -47,8 +46,7 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l1_transaction_hash } hash={ item.l1_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
...@@ -68,8 +66,7 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => { ...@@ -68,8 +66,7 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
<TxEntity <TxEntity
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l2_transaction_hash } hash={ item.l2_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
) : ( ) : (
...@@ -81,14 +78,14 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => { ...@@ -81,14 +78,14 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
<ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } display="inline-block"> <Skeleton loading={ isLoading } display="inline-block">
{ BigNumber(item.value).toFormat() } { BigNumber(item.value).toFormat() }
</Skeleton> </Skeleton>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
<ListItemMobileGrid.Label isLoading={ isLoading }>Token</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Token</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } display="inline-block"> <Skeleton loading={ isLoading } display="inline-block">
{ item.symbol } { item.symbol }
</Skeleton> </Skeleton>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
......
ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx
View file @ 6916f065
import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2'; import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
import { default as Thead } from 'ui/shared/TheadSticky'; import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import ZkEvmL2DepositsTableItem from './ZkEvmL2DepositsTableItem'; import ZkEvmL2DepositsTableItem from './ZkEvmL2DepositsTableItem';
...@@ -15,24 +14,24 @@ import ZkEvmL2DepositsTableItem from './ZkEvmL2DepositsTableItem'; ...@@ -15,24 +14,24 @@ import ZkEvmL2DepositsTableItem from './ZkEvmL2DepositsTableItem';
const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => { const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
return ( return (
<Table style={{ tableLayout: 'auto' }} minW="950px"> <TableRoot tableLayout="auto" minW="950px">
<Thead top={ top }> <TableHeaderSticky top={ top }>
<Tr> <TableRow>
<Th>L1 block</Th> <TableColumnHeader>L1 block</TableColumnHeader>
<Th>Index</Th> <TableColumnHeader>Index</TableColumnHeader>
<Th>L1 txn hash</Th> <TableColumnHeader>L1 txn hash</TableColumnHeader>
<Th>Age</Th> <TableColumnHeader>Age</TableColumnHeader>
<Th>L2 txn hash</Th> <TableColumnHeader>L2 txn hash</TableColumnHeader>
<Th isNumeric>Value</Th> <TableColumnHeader isNumeric>Value</TableColumnHeader>
<Th>Token</Th> <TableColumnHeader>Token</TableColumnHeader>
</Tr> </TableRow>
</Thead> </TableHeaderSticky>
<Tbody> <TableBody>
{ items.map((item, index) => ( { items.map((item, index) => (
<ZkEvmL2DepositsTableItem key={ String(item.index) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/> <ZkEvmL2DepositsTableItem key={ String(item.index) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
)) } )) }
</Tbody> </TableBody>
</Table> </TableRoot>
); );
}; };
......
ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx
View file @ 6916f065
import { Td, Tr, chakra } from '@chakra-ui/react'; import { chakra } from '@chakra-ui/react';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import React from 'react'; import React from 'react';
import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2'; import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
import config from 'configs/app'; import config from 'configs/app';
import Skeleton from 'ui/shared/chakra/Skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
...@@ -21,46 +22,43 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => { ...@@ -21,46 +22,43 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => {
} }
return ( return (
<Tr> <TableRow>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<BlockEntityL1 <BlockEntityL1
number={ item.block_number } number={ item.block_number }
isLoading={ isLoading } isLoading={ isLoading }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
noIcon noIcon
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<Skeleton isLoaded={ !isLoading }> <Skeleton loading={ isLoading }>
<span>{ item.index }</span> <span>{ item.index }</span>
</Skeleton> </Skeleton>
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l1_transaction_hash } hash={ item.l1_transaction_hash }
truncation="constant_long" truncation="constant_long"
noIcon noIcon
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
/> />
</Td> </TableCell>
<Td verticalAlign="middle" pr={ 12 }> <TableCell verticalAlign="middle" pr={ 12 }>
<TimeAgoWithTooltip <TimeAgoWithTooltip
timestamp={ item.timestamp } timestamp={ item.timestamp }
isLoading={ isLoading } isLoading={ isLoading }
color="text_secondary" color="text_secondary"
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
{ item.l2_transaction_hash ? ( { item.l2_transaction_hash ? (
<TxEntity <TxEntity
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l2_transaction_hash } hash={ item.l2_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
noIcon noIcon
/> />
...@@ -69,18 +67,18 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => { ...@@ -69,18 +67,18 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => {
Pending Claim Pending Claim
</chakra.span> </chakra.span>
) } ) }
</Td> </TableCell>
<Td verticalAlign="middle" isNumeric> <TableCell verticalAlign="middle" isNumeric>
<Skeleton isLoaded={ !isLoading } display="inline-block"> <Skeleton loading={ isLoading } display="inline-block">
<span>{ BigNumber(item.value).toFormat() }</span> <span>{ BigNumber(item.value).toFormat() }</span>
</Skeleton> </Skeleton>
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } display="inline-block"> <Skeleton loading={ isLoading } display="inline-block">
<span>{ item.symbol }</span> <span>{ item.symbol }</span>
</Skeleton> </Skeleton>
</Td> </TableCell>
</Tr> </TableRow>
); );
}; };
......
ui/pages/BeaconChainWithdrawals.tsx
View file @ 6916f065
import { Hide, Show, Text } from '@chakra-ui/react'; import { Box, Text } from '@chakra-ui/react';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import React from 'react'; import React from 'react';
...@@ -8,8 +8,8 @@ import getCurrencyValue from 'lib/getCurrencyValue'; ...@@ -8,8 +8,8 @@ import getCurrencyValue from 'lib/getCurrencyValue';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import { WITHDRAWAL } from 'stubs/withdrawals'; import { WITHDRAWAL } from 'stubs/withdrawals';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
import Skeleton from 'ui/shared/chakra/Skeleton';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
...@@ -41,7 +41,7 @@ const Withdrawals = () => { ...@@ -41,7 +41,7 @@ const Withdrawals = () => {
const content = data?.items ? ( const content = data?.items ? (
<> <>
<Show below="lg" ssr={ false }> <Box hideFrom="lg">
{ data.items.map(((item, index) => ( { data.items.map(((item, index) => (
<BeaconChainWithdrawalsListItem <BeaconChainWithdrawalsListItem
key={ item.index + (isPlaceholderData ? String(index) : '') } key={ item.index + (isPlaceholderData ? String(index) : '') }
...@@ -50,15 +50,15 @@ const Withdrawals = () => { ...@@ -50,15 +50,15 @@ const Withdrawals = () => {
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
))) } ))) }
</Show> </Box>
<Hide below="lg" ssr={ false }> <Box hideBelow="lg">
<BeaconChainWithdrawalsTable <BeaconChainWithdrawalsTable
items={ data.items } items={ data.items }
view="list" view="list"
top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</Hide> </Box>
</> </>
) : null; ) : null;
...@@ -68,7 +68,7 @@ const Withdrawals = () => { ...@@ -68,7 +68,7 @@ const Withdrawals = () => {
} }
return ( return (
<Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap"> <Skeleton loading={ countersQuery.isPlaceholderData || isPlaceholderData } display="flex" flexWrap="wrap">
{ countersQuery.data && ( { countersQuery.data && (
<Text lineHeight={{ base: '24px', lg: '32px' }}> <Text lineHeight={{ base: '24px', lg: '32px' }}>
{ BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed { BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed
...@@ -89,11 +89,12 @@ const Withdrawals = () => { ...@@ -89,11 +89,12 @@ const Withdrawals = () => {
/> />
<DataListDisplay <DataListDisplay
isError={ isError } isError={ isError }
items={ data?.items } itemsNum={ data?.items.length }
emptyText="There are no withdrawals." emptyText="There are no withdrawals."
content={ content }
actionBar={ actionBar } actionBar={ actionBar }
/> >
{ content }
</DataListDisplay>
</> </>
); );
}; };
......
ui/pages/ShibariumDeposits.tsx
View file @ 6916f065
import { Hide, Show } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { rightLineArrow, nbsp } from 'lib/html-entities'; import { rightLineArrow, nbsp } from 'lib/html-entities';
import { SHIBARIUM_DEPOSIT_ITEM } from 'stubs/shibarium'; import { SHIBARIUM_DEPOSIT_ITEM } from 'stubs/shibarium';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import { Skeleton } from 'toolkit/chakra/skeleton';
import DepositsListItem from 'ui/deposits/shibarium/DepositsListItem'; import DepositsListItem from 'ui/deposits/shibarium/DepositsListItem';
import DepositsTable from 'ui/deposits/shibarium/DepositsTable'; import DepositsTable from 'ui/deposits/shibarium/DepositsTable';
import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
import Skeleton from 'ui/shared/chakra/Skeleton';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
...@@ -39,7 +39,7 @@ const L2Deposits = () => { ...@@ -39,7 +39,7 @@ const L2Deposits = () => {
const content = data?.items ? ( const content = data?.items ? (
<> <>
<Show below="lg" ssr={ false }> <Box hideFrom="lg">
{ data.items.map(((item, index) => ( { data.items.map(((item, index) => (
<DepositsListItem <DepositsListItem
key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') } key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') }
...@@ -47,10 +47,10 @@ const L2Deposits = () => { ...@@ -47,10 +47,10 @@ const L2Deposits = () => {
item={ item } item={ item }
/> />
))) } ))) }
</Show> </Box>
<Hide below="lg" ssr={ false }> <Box hideBelow="lg">
<DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/> <DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
</Hide> </Box>
</> </>
) : null; ) : null;
...@@ -61,7 +61,7 @@ const L2Deposits = () => { ...@@ -61,7 +61,7 @@ const L2Deposits = () => {
return ( return (
<Skeleton <Skeleton
isLoaded={ !countersQuery.isPlaceholderData } loading={ countersQuery.isPlaceholderData }
display="inline-block" display="inline-block"
> >
A total of { countersQuery.data?.toLocaleString() } deposits found A total of { countersQuery.data?.toLocaleString() } deposits found
...@@ -76,11 +76,12 @@ const L2Deposits = () => { ...@@ -76,11 +76,12 @@ const L2Deposits = () => {
<PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/> <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
<DataListDisplay <DataListDisplay
isError={ isError } isError={ isError }
items={ data?.items } itemsNum={ data?.items.length }
emptyText="There are no deposits." emptyText="There are no deposits."
content={ content }
actionBar={ actionBar } actionBar={ actionBar }
/> >
{ content }
</DataListDisplay>
</> </>
); );
}; };
......
ui/pages/ShibariumWithdrawals.tsx
View file @ 6916f065
import { Hide, Show } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { rightLineArrow, nbsp } from 'lib/html-entities'; import { rightLineArrow, nbsp } from 'lib/html-entities';
import { SHIBARIUM_WITHDRAWAL_ITEM } from 'stubs/shibarium'; import { SHIBARIUM_WITHDRAWAL_ITEM } from 'stubs/shibarium';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
import Skeleton from 'ui/shared/chakra/Skeleton';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
...@@ -39,16 +39,18 @@ const L2Withdrawals = () => { ...@@ -39,16 +39,18 @@ const L2Withdrawals = () => {
const content = data?.items ? ( const content = data?.items ? (
<> <>
<Show below="lg" ssr={ false }>{ data.items.map(((item, index) => ( <Box hideFrom="lg">
{ data.items.map(((item, index) => (
<WithdrawalsListItem <WithdrawalsListItem
key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') } key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') }
item={ item } item={ item }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
))) }</Show> ))) }
<Hide below="lg" ssr={ false }> </Box>
<Box hideBelow="lg">
<WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/> <WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
</Hide> </Box>
</> </>
) : null; ) : null;
...@@ -58,10 +60,7 @@ const L2Withdrawals = () => { ...@@ -58,10 +60,7 @@ const L2Withdrawals = () => {
} }
return ( return (
<Skeleton <Skeleton loading={ countersQuery.isPlaceholderData } display="inline-block">
isLoaded={ !countersQuery.isPlaceholderData }
display="inline-block"
>
A total of { countersQuery.data?.toLocaleString() } withdrawals found A total of { countersQuery.data?.toLocaleString() } withdrawals found
</Skeleton> </Skeleton>
); );
...@@ -74,11 +73,12 @@ const L2Withdrawals = () => { ...@@ -74,11 +73,12 @@ const L2Withdrawals = () => {
<PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/> <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
<DataListDisplay <DataListDisplay
isError={ isError } isError={ isError }
items={ data?.items } itemsNum={ data?.items.length }
emptyText="There are no withdrawals." emptyText="There are no withdrawals."
content={ content }
actionBar={ actionBar } actionBar={ actionBar }
/> >
{ content }
</DataListDisplay>
</> </>
); );
}; };
......
ui/pages/ZkEvmL2Deposits.tsx
View file @ 6916f065
import { Hide, Show } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { rightLineArrow, nbsp } from 'lib/html-entities'; import { rightLineArrow, nbsp } from 'lib/html-entities';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import { ZKEVM_DEPOSITS_ITEM } from 'stubs/zkEvmL2'; import { ZKEVM_DEPOSITS_ITEM } from 'stubs/zkEvmL2';
import { Skeleton } from 'toolkit/chakra/skeleton';
import ZkEvmL2DepositsListItem from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem'; import ZkEvmL2DepositsListItem from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem';
import ZkEvmL2DepositsTable from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsTable'; import ZkEvmL2DepositsTable from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsTable';
import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
import Skeleton from 'ui/shared/chakra/Skeleton';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
...@@ -34,7 +34,7 @@ const ZkEvmL2Deposits = () => { ...@@ -34,7 +34,7 @@ const ZkEvmL2Deposits = () => {
const content = data?.items ? ( const content = data?.items ? (
<> <>
<Show below="lg" ssr={ false }> <Box hideFrom="lg">
{ data.items.map(((item, index) => ( { data.items.map(((item, index) => (
<ZkEvmL2DepositsListItem <ZkEvmL2DepositsListItem
key={ String(item.index) + (isPlaceholderData ? index : '') } key={ String(item.index) + (isPlaceholderData ? index : '') }
...@@ -42,10 +42,10 @@ const ZkEvmL2Deposits = () => { ...@@ -42,10 +42,10 @@ const ZkEvmL2Deposits = () => {
item={ item } item={ item }
/> />
))) } ))) }
</Show> </Box>
<Hide below="lg" ssr={ false }> <Box hideBelow="lg">
<ZkEvmL2DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/> <ZkEvmL2DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
</Hide> </Box>
</> </>
) : null; ) : null;
...@@ -56,7 +56,7 @@ const ZkEvmL2Deposits = () => { ...@@ -56,7 +56,7 @@ const ZkEvmL2Deposits = () => {
return ( return (
<Skeleton <Skeleton
isLoaded={ !countersQuery.isPlaceholderData } loading={ countersQuery.isPlaceholderData }
display="inline-block" display="inline-block"
> >
A total of { countersQuery.data?.toLocaleString() } deposits found A total of { countersQuery.data?.toLocaleString() } deposits found
...@@ -71,11 +71,12 @@ const ZkEvmL2Deposits = () => { ...@@ -71,11 +71,12 @@ const ZkEvmL2Deposits = () => {
<PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/> <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
<DataListDisplay <DataListDisplay
isError={ isError } isError={ isError }
items={ data?.items } itemsNum={ data?.items.length }
emptyText="There are no deposits." emptyText="There are no deposits."
content={ content }
actionBar={ actionBar } actionBar={ actionBar }
/> >
{ content }
</DataListDisplay>
</> </>
); );
}; };
......
ui/pages/ZkEvmL2TxnBatch.tsx
View file @ 6916f065
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import type { RoutedTab } from 'ui/shared/Tabs/types'; import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app'; import { useAppContext } from 'lib/contexts/app';
...@@ -11,11 +11,11 @@ import getQueryParamString from 'lib/router/getQueryParamString'; ...@@ -11,11 +11,11 @@ import getQueryParamString from 'lib/router/getQueryParamString';
import { TX_ZKEVM_L2 } from 'stubs/tx'; import { TX_ZKEVM_L2 } from 'stubs/tx';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import { ZKEVM_L2_TXN_BATCH } from 'stubs/zkEvmL2'; import { ZKEVM_L2_TXN_BATCH } from 'stubs/zkEvmL2';
import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
import RoutedTabsSkeleton from 'toolkit/components/RoutedTabs/RoutedTabsSkeleton';
import TextAd from 'ui/shared/ad/TextAd'; import TextAd from 'ui/shared/ad/TextAd';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
import ZkEvmL2TxnBatchDetails from 'ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails'; import ZkEvmL2TxnBatchDetails from 'ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails';
import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting'; import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
...@@ -46,7 +46,7 @@ const ZkEvmL2TxnBatch = () => { ...@@ -46,7 +46,7 @@ const ZkEvmL2TxnBatch = () => {
throwOnAbsentParamError(number); throwOnAbsentParamError(number);
throwOnResourceLoadError(batchQuery); throwOnResourceLoadError(batchQuery);
const tabs: Array<RoutedTab> = React.useMemo(() => ([ const tabs: Array<TabItemRegular> = React.useMemo(() => ([
{ id: 'index', title: 'Details', component: <ZkEvmL2TxnBatchDetails query={ batchQuery }/> }, { id: 'index', title: 'Details', component: <ZkEvmL2TxnBatchDetails query={ batchQuery }/> },
{ id: 'txs', title: 'Transactions', component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false }/> }, { id: 'txs', title: 'Transactions', component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false }/> },
].filter(Boolean)), [ batchQuery, batchTxsQuery ]); ].filter(Boolean)), [ batchQuery, batchTxsQuery ]);
...@@ -71,7 +71,7 @@ const ZkEvmL2TxnBatch = () => { ...@@ -71,7 +71,7 @@ const ZkEvmL2TxnBatch = () => {
title={ `Txn batch #${ number }` } title={ `Txn batch #${ number }` }
backLink={ backLink } backLink={ backLink }
/> />
{ batchQuery.isPlaceholderData ? <TabsSkeleton tabs={ tabs }/> : ( { batchQuery.isPlaceholderData ? <RoutedTabsSkeleton tabs={ tabs }/> : (
<RoutedTabs <RoutedTabs
tabs={ tabs } tabs={ tabs }
/> />
......
ui/pages/ZkEvmL2TxnBatches.tsx
View file @ 6916f065
import { Hide, Show, Text } from '@chakra-ui/react'; import { Box, Text } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2'; import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
import Skeleton from 'ui/shared/chakra/Skeleton';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
...@@ -38,7 +38,7 @@ const ZkEvmL2TxnBatches = () => { ...@@ -38,7 +38,7 @@ const ZkEvmL2TxnBatches = () => {
const content = data?.items ? ( const content = data?.items ? (
<> <>
<Show below="lg" ssr={ false }> <Box hideFrom="lg">
{ data.items.map(((item, index) => ( { data.items.map(((item, index) => (
<ZkEvmTxnBatchesListItem <ZkEvmTxnBatchesListItem
key={ item.number + (isPlaceholderData ? String(index) : '') } key={ item.number + (isPlaceholderData ? String(index) : '') }
...@@ -46,10 +46,10 @@ const ZkEvmL2TxnBatches = () => { ...@@ -46,10 +46,10 @@ const ZkEvmL2TxnBatches = () => {
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
))) } ))) }
</Show> </Box>
<Hide below="lg" ssr={ false }> <Box hideBelow="lg">
<ZkEvmTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/> <ZkEvmTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
</Hide> </Box>
</> </>
) : null; ) : null;
...@@ -59,7 +59,7 @@ const ZkEvmL2TxnBatches = () => { ...@@ -59,7 +59,7 @@ const ZkEvmL2TxnBatches = () => {
} }
return ( return (
<Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap"> <Skeleton loading={ countersQuery.isPlaceholderData || isPlaceholderData } display="flex" flexWrap="wrap">
Txn batch Txn batch
<Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].number } </Text>to <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].number } </Text>to
<Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].number } </Text> <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].number } </Text>
...@@ -75,11 +75,12 @@ const ZkEvmL2TxnBatches = () => { ...@@ -75,11 +75,12 @@ const ZkEvmL2TxnBatches = () => {
<PageTitle title="Txn batches" withTextAd/> <PageTitle title="Txn batches" withTextAd/>
<DataListDisplay <DataListDisplay
isError={ isError } isError={ isError }
items={ data?.items } itemsNum={ data?.items.length }
emptyText="There are no txn batches." emptyText="There are no txn batches."
content={ content }
actionBar={ actionBar } actionBar={ actionBar }
/> >
{ content }
</DataListDisplay>
</> </>
); );
}; };
......
ui/pages/ZkEvmL2Withdrawals.tsx
View file @ 6916f065
import { Hide, Show } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { rightLineArrow, nbsp } from 'lib/html-entities'; import { rightLineArrow, nbsp } from 'lib/html-entities';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import { ZKEVM_WITHDRAWALS_ITEM } from 'stubs/zkEvmL2'; import { ZKEVM_WITHDRAWALS_ITEM } from 'stubs/zkEvmL2';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
import Skeleton from 'ui/shared/chakra/Skeleton';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
...@@ -34,7 +34,7 @@ const ZkEvmL2Withdrawals = () => { ...@@ -34,7 +34,7 @@ const ZkEvmL2Withdrawals = () => {
const content = data?.items ? ( const content = data?.items ? (
<> <>
<Show below="lg" ssr={ false }> <Box hideFrom="lg">
{ data.items.map(((item, index) => ( { data.items.map(((item, index) => (
<ZkEvmL2WithdrawalsListItem <ZkEvmL2WithdrawalsListItem
key={ String(item.index) + (isPlaceholderData ? index : '') } key={ String(item.index) + (isPlaceholderData ? index : '') }
...@@ -42,10 +42,10 @@ const ZkEvmL2Withdrawals = () => { ...@@ -42,10 +42,10 @@ const ZkEvmL2Withdrawals = () => {
item={ item } item={ item }
/> />
))) } ))) }
</Show> </Box>
<Hide below="lg" ssr={ false }> <Box hideBelow="lg">
<ZkEvmL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/> <ZkEvmL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
</Hide> </Box>
</> </>
) : null; ) : null;
...@@ -56,7 +56,7 @@ const ZkEvmL2Withdrawals = () => { ...@@ -56,7 +56,7 @@ const ZkEvmL2Withdrawals = () => {
return ( return (
<Skeleton <Skeleton
isLoaded={ !countersQuery.isPlaceholderData } loading={ countersQuery.isPlaceholderData }
display="inline-block" display="inline-block"
> >
A total of { countersQuery.data?.toLocaleString() } withdrawals found A total of { countersQuery.data?.toLocaleString() } withdrawals found
...@@ -71,11 +71,12 @@ const ZkEvmL2Withdrawals = () => { ...@@ -71,11 +71,12 @@ const ZkEvmL2Withdrawals = () => {
<PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/> <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
<DataListDisplay <DataListDisplay
isError={ isError } isError={ isError }
items={ data?.items } itemsNum={ data?.items.length }
emptyText="There are no withdrawals." emptyText="There are no withdrawals."
content={ content }
actionBar={ actionBar } actionBar={ actionBar }
/> >
{ content }
</DataListDisplay>
</> </>
); );
}; };
......
ui/pages/ZkSyncL2TxnBatch.tsx
View file @ 6916f065
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import type { RoutedTab } from 'ui/shared/Tabs/types'; import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app'; import { useAppContext } from 'lib/contexts/app';
...@@ -12,12 +12,12 @@ import getQueryParamString from 'lib/router/getQueryParamString'; ...@@ -12,12 +12,12 @@ import getQueryParamString from 'lib/router/getQueryParamString';
import { TX } from 'stubs/tx'; import { TX } from 'stubs/tx';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import { ZKSYNC_L2_TXN_BATCH } from 'stubs/zkSyncL2'; import { ZKSYNC_L2_TXN_BATCH } from 'stubs/zkSyncL2';
import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
import RoutedTabsSkeleton from 'toolkit/components/RoutedTabs/RoutedTabsSkeleton';
import TextAd from 'ui/shared/ad/TextAd'; import TextAd from 'ui/shared/ad/TextAd';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination'; import Pagination from 'ui/shared/pagination/Pagination';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
import ZkSyncL2TxnBatchDetails from 'ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails'; import ZkSyncL2TxnBatchDetails from 'ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails';
import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting'; import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
...@@ -63,7 +63,7 @@ const ZkSyncL2TxnBatch = () => { ...@@ -63,7 +63,7 @@ const ZkSyncL2TxnBatch = () => {
const hasPagination = !isMobile && batchTxsQuery.pagination.isVisible && tab === 'txs'; const hasPagination = !isMobile && batchTxsQuery.pagination.isVisible && tab === 'txs';
const tabs: Array<RoutedTab> = React.useMemo(() => ([ const tabs: Array<TabItemRegular> = React.useMemo(() => ([
{ id: 'index', title: 'Details', component: <ZkSyncL2TxnBatchDetails query={ batchQuery }/> }, { id: 'index', title: 'Details', component: <ZkSyncL2TxnBatchDetails query={ batchQuery }/> },
{ {
id: 'txs', id: 'txs',
...@@ -93,10 +93,10 @@ const ZkSyncL2TxnBatch = () => { ...@@ -93,10 +93,10 @@ const ZkSyncL2TxnBatch = () => {
backLink={ backLink } backLink={ backLink }
/> />
{ batchQuery.isPlaceholderData ? { batchQuery.isPlaceholderData ?
<TabsSkeleton tabs={ tabs }/> : ( <RoutedTabsSkeleton tabs={ tabs }/> : (
<RoutedTabs <RoutedTabs
tabs={ tabs } tabs={ tabs }
tabListProps={ isMobile ? undefined : TAB_LIST_PROPS } listProps={ isMobile ? undefined : TAB_LIST_PROPS }
rightSlot={ hasPagination ? <Pagination { ...(batchTxsQuery.pagination) }/> : null } rightSlot={ hasPagination ? <Pagination { ...(batchTxsQuery.pagination) }/> : null }
stickyEnabled={ hasPagination } stickyEnabled={ hasPagination }
/> />
......
ui/pages/ZkSyncL2TxnBatches.tsx
View file @ 6916f065
import { Hide, Show, Text } from '@chakra-ui/react'; import { Box, Text } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import { ZKSYNC_L2_TXN_BATCHES_ITEM } from 'stubs/zkSyncL2'; import { ZKSYNC_L2_TXN_BATCHES_ITEM } from 'stubs/zkSyncL2';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar'; import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
import Skeleton from 'ui/shared/chakra/Skeleton';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
...@@ -38,7 +38,7 @@ const ZkSyncL2TxnBatches = () => { ...@@ -38,7 +38,7 @@ const ZkSyncL2TxnBatches = () => {
const content = data?.items ? ( const content = data?.items ? (
<> <>
<Show below="lg" ssr={ false }> <Box hideFrom="lg">
{ data.items.map(((item, index) => ( { data.items.map(((item, index) => (
<ZkSyncTxnBatchesListItem <ZkSyncTxnBatchesListItem
key={ item.number + (isPlaceholderData ? String(index) : '') } key={ item.number + (isPlaceholderData ? String(index) : '') }
...@@ -46,10 +46,10 @@ const ZkSyncL2TxnBatches = () => { ...@@ -46,10 +46,10 @@ const ZkSyncL2TxnBatches = () => {
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
))) } ))) }
</Show> </Box>
<Hide below="lg" ssr={ false }> <Box hideBelow="lg">
<ZkSyncTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/> <ZkSyncTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
</Hide> </Box>
</> </>
) : null; ) : null;
...@@ -59,7 +59,7 @@ const ZkSyncL2TxnBatches = () => { ...@@ -59,7 +59,7 @@ const ZkSyncL2TxnBatches = () => {
} }
return ( return (
<Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap"> <Skeleton loading={ countersQuery.isPlaceholderData || isPlaceholderData } display="flex" flexWrap="wrap">
Txn batch Txn batch
<Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].number } </Text>to <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].number } </Text>to
<Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].number } </Text> <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].number } </Text>
...@@ -75,11 +75,12 @@ const ZkSyncL2TxnBatches = () => { ...@@ -75,11 +75,12 @@ const ZkSyncL2TxnBatches = () => {
<PageTitle title="Txn batches" withTextAd/> <PageTitle title="Txn batches" withTextAd/>
<DataListDisplay <DataListDisplay
isError={ isError } isError={ isError }
items={ data?.items } itemsNum={ data?.items.length }
emptyText="There are no txn batches." emptyText="There are no txn batches."
content={ content }
actionBar={ actionBar } actionBar={ actionBar }
/> >
{ content }
</DataListDisplay>
</> </>
); );
}; };
......
ui/shared/StickyPaginationWithText.tsx
View file @ 6916f065
...@@ -11,7 +11,7 @@ type Props = { ...@@ -11,7 +11,7 @@ type Props = {
text: React.ReactNode; text: React.ReactNode;
}; };
const TextSeparator = ({ pagination, text }: Props) => { const StickyPaginationWithText = ({ pagination, text }: Props) => {
if (!pagination.isVisible) { if (!pagination.isVisible) {
return <Box mb={ 6 }>{ text }</Box>; return <Box mb={ 6 }>{ text }</Box>;
} }
...@@ -31,4 +31,4 @@ const TextSeparator = ({ pagination, text }: Props) => { ...@@ -31,4 +31,4 @@ const TextSeparator = ({ pagination, text }: Props) => {
); );
}; };
export default TextSeparator; export default StickyPaginationWithText;
ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx
View file @ 6916f065
...@@ -10,16 +10,15 @@ import { route } from 'nextjs-routes'; ...@@ -10,16 +10,15 @@ import { route } from 'nextjs-routes';
import type { ResourceError } from 'lib/api/resources'; import type { ResourceError } from 'lib/api/resources';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton';
import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import Skeleton from 'ui/shared/chakra/Skeleton';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataFetchAlert from 'ui/shared/DataFetchAlert';
import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import LinkInternal from 'ui/shared/links/LinkInternal';
import PrevNext from 'ui/shared/PrevNext'; import PrevNext from 'ui/shared/PrevNext';
import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps'; import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
...@@ -68,7 +67,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => { ...@@ -68,7 +67,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
Txn batch number Txn batch number
</DetailedInfo.ItemLabel> </DetailedInfo.ItemLabel>
<DetailedInfo.ItemValue> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
{ data.number } { data.number }
</Skeleton> </Skeleton>
<PrevNext <PrevNext
...@@ -120,10 +119,10 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => { ...@@ -120,10 +119,10 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
Transactions Transactions
</DetailedInfo.ItemLabel> </DetailedInfo.ItemLabel>
<DetailedInfo.ItemValue> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }> <Link href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
{ data.transactions.length } transaction{ data.transactions.length === 1 ? '' : 's' } { data.transactions.length } transaction{ data.transactions.length === 1 ? '' : 's' }
</LinkInternal> </Link>
</Skeleton> </Skeleton>
</DetailedInfo.ItemValue> </DetailedInfo.ItemValue>
...@@ -137,7 +136,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => { ...@@ -137,7 +136,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
<DetailedInfo.ItemValue <DetailedInfo.ItemValue
flexWrap="nowrap" flexWrap="nowrap"
> >
<Skeleton isLoaded={ !isPlaceholderData } overflow="hidden"> <Skeleton loading={ isPlaceholderData } overflow="hidden">
<HashStringShortenDynamic hash={ data.global_exit_root }/> <HashStringShortenDynamic hash={ data.global_exit_root }/>
</Skeleton> </Skeleton>
<CopyToClipboard text={ data.global_exit_root } isLoading={ isPlaceholderData }/> <CopyToClipboard text={ data.global_exit_root } isLoading={ isPlaceholderData }/>
...@@ -151,7 +150,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => { ...@@ -151,7 +150,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
<DetailedInfo.ItemValue <DetailedInfo.ItemValue
flexWrap="nowrap" flexWrap="nowrap"
> >
<Skeleton isLoaded={ !isPlaceholderData } overflow="hidden"> <Skeleton loading={ isPlaceholderData } overflow="hidden">
<HashStringShortenDynamic hash={ data.acc_input_hash }/> <HashStringShortenDynamic hash={ data.acc_input_hash }/>
</Skeleton> </Skeleton>
<CopyToClipboard text={ data.acc_input_hash } isLoading={ isPlaceholderData }/> <CopyToClipboard text={ data.acc_input_hash } isLoading={ isPlaceholderData }/>
...@@ -180,7 +179,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => { ...@@ -180,7 +179,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
<DetailedInfo.ItemValue <DetailedInfo.ItemValue
flexWrap="nowrap" flexWrap="nowrap"
> >
<Skeleton isLoaded={ !isPlaceholderData } overflow="hidden"> <Skeleton loading={ isPlaceholderData } overflow="hidden">
<HashStringShortenDynamic hash={ data.state_root }/> <HashStringShortenDynamic hash={ data.state_root }/>
</Skeleton> </Skeleton>
<CopyToClipboard text={ data.state_root } isLoading={ isPlaceholderData }/> <CopyToClipboard text={ data.state_root } isLoading={ isPlaceholderData }/>
......
ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx
View file @ 6916f065
...@@ -6,10 +6,9 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; ...@@ -6,10 +6,9 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import config from 'configs/app'; import config from 'configs/app';
import Skeleton from 'ui/shared/chakra/Skeleton'; import { Link } from 'toolkit/chakra/link';
import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import LinkInternal from 'ui/shared/links/LinkInternal';
import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus'; import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
...@@ -31,8 +30,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => { ...@@ -31,8 +30,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
<BatchEntityL2 <BatchEntityL2
isLoading={ isLoading } isLoading={ isLoading }
number={ item.number } number={ item.number }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
...@@ -54,15 +52,14 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => { ...@@ -54,15 +52,14 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
<ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
<LinkInternal <Link
href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) } href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
isLoading={ isLoading } loading={ isLoading }
fontWeight={ 600 } fontWeight={ 600 }
minW="40px"
> >
<Skeleton isLoaded={ !isLoading } minW="40px">
{ item.transaction_count } { item.transaction_count }
</Skeleton> </Link>
</LinkInternal>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
<ListItemMobileGrid.Label isLoading={ isLoading }>Verify tx hash</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Verify tx hash</ListItemMobileGrid.Label>
...@@ -71,8 +68,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => { ...@@ -71,8 +68,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.verify_transaction_hash } hash={ item.verify_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
) : <Text>Pending</Text> } ) : <Text>Pending</Text> }
...@@ -84,8 +80,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => { ...@@ -84,8 +80,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.sequence_transaction_hash } hash={ item.sequence_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
) : <Text>Pending</Text> } ) : <Text>Pending</Text> }
......
ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTable.tsx
View file @ 6916f065
import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
import { default as Thead } from 'ui/shared/TheadSticky'; import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import ZkEvmTxnBatchesTableItem from './ZkEvmTxnBatchesTableItem'; import ZkEvmTxnBatchesTableItem from './ZkEvmTxnBatchesTableItem';
...@@ -15,18 +14,18 @@ type Props = { ...@@ -15,18 +14,18 @@ type Props = {
const TxnBatchesTable = ({ items, top, isLoading }: Props) => { const TxnBatchesTable = ({ items, top, isLoading }: Props) => {
return ( return (
<Table minW="1000px"> <TableRoot minW="1000px">
<Thead top={ top }> <TableHeaderSticky top={ top }>
<Tr> <TableRow>
<Th width="33%">Batch #</Th> <TableColumnHeader width="33%">Batch #</TableColumnHeader>
<Th width="33%">Status</Th> <TableColumnHeader width="33%">Status</TableColumnHeader>
<Th width="150px">Age</Th> <TableColumnHeader width="150px">Age</TableColumnHeader>
<Th width="150px">Txn count</Th> <TableColumnHeader width="150px">Txn count</TableColumnHeader>
<Th width="230px">Verify tx hash</Th> <TableColumnHeader width="230px">Verify tx hash</TableColumnHeader>
<Th width="230px">Sequence hash</Th> <TableColumnHeader width="230px">Sequence hash</TableColumnHeader>
</Tr> </TableRow>
</Thead> </TableHeaderSticky>
<Tbody> <TableBody>
{ items.map((item, index) => ( { items.map((item, index) => (
<ZkEvmTxnBatchesTableItem <ZkEvmTxnBatchesTableItem
key={ item.number + (isLoading ? String(index) : '') } key={ item.number + (isLoading ? String(index) : '') }
...@@ -34,8 +33,8 @@ const TxnBatchesTable = ({ items, top, isLoading }: Props) => { ...@@ -34,8 +33,8 @@ const TxnBatchesTable = ({ items, top, isLoading }: Props) => {
isLoading={ isLoading } isLoading={ isLoading }
/> />
)) } )) }
</Tbody> </TableBody>
</Table> </TableRoot>
); );
}; };
......
ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx
View file @ 6916f065
import { Td, Tr, Text } from '@chakra-ui/react'; import { Text } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
...@@ -6,10 +6,10 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; ...@@ -6,10 +6,10 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import config from 'configs/app'; import config from 'configs/app';
import Skeleton from 'ui/shared/chakra/Skeleton'; import { Link } from 'toolkit/chakra/link';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import LinkInternal from 'ui/shared/links/LinkInternal';
import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus'; import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
...@@ -23,63 +23,60 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => { ...@@ -23,63 +23,60 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
} }
return ( return (
<Tr> <TableRow>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<BatchEntityL2 <BatchEntityL2
isLoading={ isLoading } isLoading={ isLoading }
number={ item.number } number={ item.number }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
noIcon noIcon
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<ZkEvmL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/> <ZkEvmL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<TimeAgoWithTooltip <TimeAgoWithTooltip
timestamp={ item.timestamp } timestamp={ item.timestamp }
fallbackText="Undefined" fallbackText="Undefined"
isLoading={ isLoading } isLoading={ isLoading }
color="text_secondary" color="text_secondary"
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<LinkInternal <Link
href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) } href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
isLoading={ isLoading } minW="40px"
my={ 1 }
loading={ isLoading }
> >
<Skeleton isLoaded={ !isLoading } minW="40px" my={ 1 }>
{ item.transaction_count } { item.transaction_count }
</Skeleton> </Link>
</LinkInternal> </TableCell>
</Td> <TableCell pr={ 12 } verticalAlign="middle">
<Td pr={ 12 } verticalAlign="middle">
{ item.verify_transaction_hash ? ( { item.verify_transaction_hash ? (
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.verify_transaction_hash } hash={ item.verify_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
noIcon noIcon
/> />
) : <Text>Pending</Text> } ) : <Text>Pending</Text> }
</Td> </TableCell>
<Td pr={ 12 } verticalAlign="middle"> <TableCell pr={ 12 } verticalAlign="middle">
{ item.sequence_transaction_hash ? ( { item.sequence_transaction_hash ? (
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.sequence_transaction_hash } hash={ item.sequence_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
noIcon noIcon
/> />
) : <Text>Pending</Text> } ) : <Text>Pending</Text> }
</Td> </TableCell>
</Tr> </TableRow>
); );
}; };
......
ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx
View file @ 6916f065
import { Grid, GridItem, Link, Text } from '@chakra-ui/react'; import { Grid, GridItem, Text } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import { scroller, Element } from 'react-scroll';
import { ZKSYNC_L2_TX_BATCH_STATUSES, type ZkSyncBatch } from 'types/api/zkSyncL2'; import { ZKSYNC_L2_TX_BATCH_STATUSES, type ZkSyncBatch } from 'types/api/zkSyncL2';
...@@ -13,14 +12,14 @@ import type { ResourceError } from 'lib/api/resources'; ...@@ -13,14 +12,14 @@ import type { ResourceError } from 'lib/api/resources';
import { WEI, WEI_IN_GWEI } from 'lib/consts'; import { WEI, WEI_IN_GWEI } from 'lib/consts';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import Skeleton from 'ui/shared/chakra/Skeleton';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataFetchAlert from 'ui/shared/DataFetchAlert';
import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
import LinkInternal from 'ui/shared/links/LinkInternal';
import PrevNext from 'ui/shared/PrevNext'; import PrevNext from 'ui/shared/PrevNext';
import TruncatedValue from 'ui/shared/TruncatedValue'; import TruncatedValue from 'ui/shared/TruncatedValue';
import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps'; import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
...@@ -33,7 +32,6 @@ interface Props { ...@@ -33,7 +32,6 @@ interface Props {
const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
const router = useRouter(); const router = useRouter();
const [ isExpanded, setIsExpanded ] = React.useState(false);
const { data, isPlaceholderData, isError, error } = query; const { data, isPlaceholderData, isError, error } = query;
...@@ -48,14 +46,6 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { ...@@ -48,14 +46,6 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
router.push({ pathname: '/batches/[number]', query: { number: nextId } }, undefined); router.push({ pathname: '/batches/[number]', query: { number: nextId } }, undefined);
}, [ data, router ]); }, [ data, router ]);
const handleCutClick = React.useCallback(() => {
setIsExpanded((flag) => !flag);
scroller.scrollTo('ZkSyncL2TxnBatchDetails__cutLink', {
duration: 500,
smooth: true,
});
}, []);
if (isError) { if (isError) {
if (isCustomAppError(error)) { if (isCustomAppError(error)) {
throwOnResourceLoadError({ isError, error }); throwOnResourceLoadError({ isError, error });
...@@ -84,7 +74,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { ...@@ -84,7 +74,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
Txn batch number Txn batch number
</DetailedInfo.ItemLabel> </DetailedInfo.ItemLabel>
<DetailedInfo.ItemValue> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
{ data.number } { data.number }
</Skeleton> </Skeleton>
<PrevNext <PrevNext
...@@ -124,10 +114,10 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { ...@@ -124,10 +114,10 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
Transactions Transactions
</DetailedInfo.ItemLabel> </DetailedInfo.ItemLabel>
<DetailedInfo.ItemValue> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }> <Link href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
{ txNum } transaction{ txNum === 1 ? '' : 's' } { txNum } transaction{ txNum === 1 ? '' : 's' }
</LinkInternal> </Link>
</Skeleton> </Skeleton>
</DetailedInfo.ItemValue> </DetailedInfo.ItemValue>
...@@ -135,24 +125,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { ...@@ -135,24 +125,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
<ZkSyncL2TxnBatchHashesInfo isLoading={ isPlaceholderData } data={ data }/> <ZkSyncL2TxnBatchHashesInfo isLoading={ isPlaceholderData } data={ data }/>
<GridItem colSpan={{ base: undefined, lg: 2 }}> <CutLinkDetails loading={ isPlaceholderData } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }}>
<Element name="ZkSyncL2TxnBatchDetails__cutLink">
<Skeleton isLoaded={ !isPlaceholderData } mt={ 6 } display="inline-block">
<Link
display="inline-block"
fontSize="sm"
textDecorationLine="underline"
textDecorationStyle="dashed"
onClick={ handleCutClick }
>
{ isExpanded ? 'Hide details' : 'View details' }
</Link>
</Skeleton>
</Element>
</GridItem>
{ isExpanded && (
<>
<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/> <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
<DetailedInfo.ItemLabel <DetailedInfo.ItemLabel
...@@ -175,7 +148,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { ...@@ -175,7 +148,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
</DetailedInfo.ItemLabel> </DetailedInfo.ItemLabel>
<DetailedInfo.ItemValue> <DetailedInfo.ItemValue>
<Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text> <Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
<Text variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text> <Text color="text.secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
</DetailedInfo.ItemValue> </DetailedInfo.ItemValue>
<DetailedInfo.ItemLabel <DetailedInfo.ItemLabel
...@@ -185,10 +158,9 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { ...@@ -185,10 +158,9 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
</DetailedInfo.ItemLabel> </DetailedInfo.ItemLabel>
<DetailedInfo.ItemValue> <DetailedInfo.ItemValue>
<Text mr={ 1 }>{ BigNumber(data.l2_fair_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text> <Text mr={ 1 }>{ BigNumber(data.l2_fair_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
<Text variant="secondary">({ BigNumber(data.l2_fair_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text> <Text color="text.secondary">({ BigNumber(data.l2_fair_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
</DetailedInfo.ItemValue> </DetailedInfo.ItemValue>
</> </CutLinkDetails>
) }
</Grid> </Grid>
); );
}; };
......
ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx
View file @ 6916f065
...@@ -6,10 +6,9 @@ import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2'; ...@@ -6,10 +6,9 @@ import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import config from 'configs/app'; import config from 'configs/app';
import Skeleton from 'ui/shared/chakra/Skeleton'; import { Link } from 'toolkit/chakra/link';
import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import LinkInternal from 'ui/shared/links/LinkInternal';
import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus'; import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus';
import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
...@@ -31,8 +30,7 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => { ...@@ -31,8 +30,7 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
<BatchEntityL2 <BatchEntityL2
isLoading={ isLoading } isLoading={ isLoading }
number={ item.number } number={ item.number }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
...@@ -54,15 +52,14 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => { ...@@ -54,15 +52,14 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
<ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
<LinkInternal <Link
href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) } href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
isLoading={ isLoading } loading={ isLoading }
fontWeight={ 600 } fontWeight={ 600 }
minW="40px"
> >
<Skeleton isLoaded={ !isLoading } minW="40px">
{ item.transaction_count } { item.transaction_count }
</Skeleton> </Link>
</LinkInternal>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
<ListItemMobileGrid.Label isLoading={ isLoading }>Commit tx</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Commit tx</ListItemMobileGrid.Label>
...@@ -71,8 +68,7 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => { ...@@ -71,8 +68,7 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.commit_transaction_hash } hash={ item.commit_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
) : <Text>Pending</Text> } ) : <Text>Pending</Text> }
...@@ -84,8 +80,7 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => { ...@@ -84,8 +80,7 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.prove_transaction_hash } hash={ item.prove_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
) : <Text>Pending</Text> } ) : <Text>Pending</Text> }
......
ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTable.tsx
View file @ 6916f065
import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2'; import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
import { default as Thead } from 'ui/shared/TheadSticky'; import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import ZkSyncTxnBatchesTableItem from './ZkSyncTxnBatchesTableItem'; import ZkSyncTxnBatchesTableItem from './ZkSyncTxnBatchesTableItem';
...@@ -15,18 +14,18 @@ type Props = { ...@@ -15,18 +14,18 @@ type Props = {
const ZkSyncTxnBatchesTable = ({ items, top, isLoading }: Props) => { const ZkSyncTxnBatchesTable = ({ items, top, isLoading }: Props) => {
return ( return (
<Table minW="1000px"> <TableRoot minW="1000px">
<Thead top={ top }> <TableHeaderSticky top={ top }>
<Tr> <TableRow>
<Th width="40%">Batch #</Th> <TableColumnHeader width="40%">Batch #</TableColumnHeader>
<Th width="60%">Status</Th> <TableColumnHeader width="60%">Status</TableColumnHeader>
<Th width="150px">Age</Th> <TableColumnHeader width="150px">Age</TableColumnHeader>
<Th width="150px">Txn count</Th> <TableColumnHeader width="150px">Txn count</TableColumnHeader>
<Th width="210px">Commit tx</Th> <TableColumnHeader width="210px">Commit tx</TableColumnHeader>
<Th width="210px">Prove tx</Th> <TableColumnHeader width="210px">Prove tx</TableColumnHeader>
</Tr> </TableRow>
</Thead> </TableHeaderSticky>
<Tbody> <TableBody>
{ items.map((item, index) => ( { items.map((item, index) => (
<ZkSyncTxnBatchesTableItem <ZkSyncTxnBatchesTableItem
key={ item.number + (isLoading ? String(index) : '') } key={ item.number + (isLoading ? String(index) : '') }
...@@ -34,8 +33,8 @@ const ZkSyncTxnBatchesTable = ({ items, top, isLoading }: Props) => { ...@@ -34,8 +33,8 @@ const ZkSyncTxnBatchesTable = ({ items, top, isLoading }: Props) => {
isLoading={ isLoading } isLoading={ isLoading }
/> />
)) } )) }
</Tbody> </TableBody>
</Table> </TableRoot>
); );
}; };
......
ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx
View file @ 6916f065
import { Td, Tr, Text } from '@chakra-ui/react'; import { Text } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2'; import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
...@@ -6,10 +6,10 @@ import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2'; ...@@ -6,10 +6,10 @@ import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import config from 'configs/app'; import config from 'configs/app';
import Skeleton from 'ui/shared/chakra/Skeleton'; import { Link } from 'toolkit/chakra/link';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import LinkInternal from 'ui/shared/links/LinkInternal';
import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus'; import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus';
import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
...@@ -23,63 +23,60 @@ const ZkSyncTxnBatchesTableItem = ({ item, isLoading }: Props) => { ...@@ -23,63 +23,60 @@ const ZkSyncTxnBatchesTableItem = ({ item, isLoading }: Props) => {
} }
return ( return (
<Tr> <TableRow>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<BatchEntityL2 <BatchEntityL2
isLoading={ isLoading } isLoading={ isLoading }
number={ item.number } number={ item.number }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
noIcon noIcon
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<ZkSyncL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/> <ZkSyncL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<TimeAgoWithTooltip <TimeAgoWithTooltip
timestamp={ item.timestamp } timestamp={ item.timestamp }
fallbackText="Undefined" fallbackText="Undefined"
isLoading={ isLoading } isLoading={ isLoading }
color="text_secondary" color="text_secondary"
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<LinkInternal <Link
href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) } href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
isLoading={ isLoading } loading={ isLoading }
minW="40px"
my={ 1 }
> >
<Skeleton isLoaded={ !isLoading } minW="40px" my={ 1 }>
{ item.transaction_count } { item.transaction_count }
</Skeleton> </Link>
</LinkInternal> </TableCell>
</Td> <TableCell verticalAlign="middle">
<Td verticalAlign="middle">
{ item.commit_transaction_hash ? ( { item.commit_transaction_hash ? (
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.commit_transaction_hash } hash={ item.commit_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
noIcon noIcon
/> />
) : <Text>Pending</Text> } ) : <Text>Pending</Text> }
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
{ item.prove_transaction_hash ? ( { item.prove_transaction_hash ? (
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.prove_transaction_hash } hash={ item.prove_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
noIcon noIcon
/> />
) : <Text>Pending</Text> } ) : <Text>Pending</Text> }
</Td> </TableCell>
</Tr> </TableRow>
); );
}; };
......
ui/withdrawals/shibarium/WithdrawalsListItem.tsx
View file @ 6916f065
...@@ -27,8 +27,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => { ...@@ -27,8 +27,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
<BlockEntity <BlockEntity
number={ item.l2_block_number } number={ item.l2_block_number }
isLoading={ isLoading } isLoading={ isLoading }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
...@@ -38,8 +37,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => { ...@@ -38,8 +37,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
<TxEntity <TxEntity
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l2_transaction_hash } hash={ item.l2_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
...@@ -49,8 +47,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => { ...@@ -49,8 +47,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l1_transaction_hash } hash={ item.l1_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
......
ui/withdrawals/shibarium/WithdrawalsTable.tsx
View file @ 6916f065
import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ShibariumWithdrawalsItem } from 'types/api/shibarium'; import type { ShibariumWithdrawalsItem } from 'types/api/shibarium';
import { default as Thead } from 'ui/shared/TheadSticky'; import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import WithdrawalsTableItem from './WithdrawalsTableItem'; import WithdrawalsTableItem from './WithdrawalsTableItem';
...@@ -15,22 +14,22 @@ import WithdrawalsTableItem from './WithdrawalsTableItem'; ...@@ -15,22 +14,22 @@ import WithdrawalsTableItem from './WithdrawalsTableItem';
const WithdrawalsTable = ({ items, top, isLoading }: Props) => { const WithdrawalsTable = ({ items, top, isLoading }: Props) => {
return ( return (
<Table style={{ tableLayout: 'auto' }} minW="950px"> <TableRoot style={{ tableLayout: 'auto' }} minW="950px">
<Thead top={ top }> <TableHeaderSticky top={ top }>
<Tr> <TableRow>
<Th>L2 block No</Th> <TableColumnHeader>L2 block No</TableColumnHeader>
<Th>L2 txn hash</Th> <TableColumnHeader>L2 txn hash</TableColumnHeader>
<Th>L1 txn hash</Th> <TableColumnHeader>L1 txn hash</TableColumnHeader>
<Th>User</Th> <TableColumnHeader>User</TableColumnHeader>
<Th>Age</Th> <TableColumnHeader>Age</TableColumnHeader>
</Tr> </TableRow>
</Thead> </TableHeaderSticky>
<Tbody> <TableBody>
{ items.map((item, index) => ( { items.map((item, index) => (
<WithdrawalsTableItem key={ item.l2_transaction_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/> <WithdrawalsTableItem key={ item.l2_transaction_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
)) } )) }
</Tbody> </TableBody>
</Table> </TableRoot>
); );
}; };
......
ui/withdrawals/shibarium/WithdrawalsTableItem.tsx
View file @ 6916f065
import { Td, Tr } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ShibariumWithdrawalsItem } from 'types/api/shibarium'; import type { ShibariumWithdrawalsItem } from 'types/api/shibarium';
import config from 'configs/app'; import config from 'configs/app';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam'; import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
...@@ -20,51 +20,48 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => { ...@@ -20,51 +20,48 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
} }
return ( return (
<Tr> <TableRow>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<BlockEntity <BlockEntity
number={ item.l2_block_number } number={ item.l2_block_number }
isLoading={ isLoading } isLoading={ isLoading }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<TxEntity <TxEntity
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l2_transaction_hash } hash={ item.l2_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l1_transaction_hash } hash={ item.l1_transaction_hash }
truncation="constant_long" truncation="constant_long"
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<AddressStringOrParam <AddressStringOrParam
address={ item.user } address={ item.user }
isLoading={ isLoading } isLoading={ isLoading }
truncation="constant" truncation="constant"
noCopy noCopy
/> />
</Td> </TableCell>
<Td verticalAlign="middle" pr={ 12 }> <TableCell verticalAlign="middle" pr={ 12 }>
<TimeAgoWithTooltip <TimeAgoWithTooltip
timestamp={ item.timestamp } timestamp={ item.timestamp }
isLoading={ isLoading } isLoading={ isLoading }
display="inline-block" display="inline-block"
color="text_secondary" color="text_secondary"
/> />
</Td> </TableCell>
</Tr> </TableRow>
); );
}; };
......
ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx
View file @ 6916f065
...@@ -5,7 +5,7 @@ import React from 'react'; ...@@ -5,7 +5,7 @@ import React from 'react';
import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2'; import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
import config from 'configs/app'; import config from 'configs/app';
import Skeleton from 'ui/shared/chakra/Skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
...@@ -29,15 +29,14 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => { ...@@ -29,15 +29,14 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
<BlockEntity <BlockEntity
number={ item.block_number } number={ item.block_number }
isLoading={ isLoading } isLoading={ isLoading }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
<ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } display="inline-block"> <Skeleton loading={ isLoading } display="inline-block">
{ item.index } { item.index }
</Skeleton> </Skeleton>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
...@@ -47,8 +46,7 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => { ...@@ -47,8 +46,7 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
<TxEntity <TxEntity
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l2_transaction_hash } hash={ item.l2_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
...@@ -68,8 +66,7 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => { ...@@ -68,8 +66,7 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l1_transaction_hash } hash={ item.l1_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
/> />
) : ( ) : (
...@@ -81,14 +78,14 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => { ...@@ -81,14 +78,14 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
<ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } display="inline-block"> <Skeleton loading={ isLoading } display="inline-block">
{ BigNumber(item.value).toFormat() } { BigNumber(item.value).toFormat() }
</Skeleton> </Skeleton>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
<ListItemMobileGrid.Label isLoading={ isLoading }>Token</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Token</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } display="inline-block"> <Skeleton loading={ isLoading } display="inline-block">
{ item.symbol } { item.symbol }
</Skeleton> </Skeleton>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
......
ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable.tsx
View file @ 6916f065
import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2'; import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
import { default as Thead } from 'ui/shared/TheadSticky'; import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import ZkEvmL2WithdrawalsTableItem from './ZkEvmL2WithdrawalsTableItem'; import ZkEvmL2WithdrawalsTableItem from './ZkEvmL2WithdrawalsTableItem';
...@@ -15,24 +14,24 @@ import ZkEvmL2WithdrawalsTableItem from './ZkEvmL2WithdrawalsTableItem'; ...@@ -15,24 +14,24 @@ import ZkEvmL2WithdrawalsTableItem from './ZkEvmL2WithdrawalsTableItem';
const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => { const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
return ( return (
<Table style={{ tableLayout: 'auto' }} minW="950px"> <TableRoot tableLayout="auto" minW="950px">
<Thead top={ top }> <TableHeaderSticky top={ top }>
<Tr> <TableRow>
<Th>Block</Th> <TableColumnHeader>Block</TableColumnHeader>
<Th>Index</Th> <TableColumnHeader>Index</TableColumnHeader>
<Th>L2 txn hash</Th> <TableColumnHeader>L2 txn hash</TableColumnHeader>
<Th>Age</Th> <TableColumnHeader>Age</TableColumnHeader>
<Th>L1 txn hash</Th> <TableColumnHeader>L1 txn hash</TableColumnHeader>
<Th isNumeric>Value</Th> <TableColumnHeader isNumeric>Value</TableColumnHeader>
<Th>Token</Th> <TableColumnHeader>Token</TableColumnHeader>
</Tr> </TableRow>
</Thead> </TableHeaderSticky>
<Tbody> <TableBody>
{ items.map((item, index) => ( { items.map((item, index) => (
<ZkEvmL2WithdrawalsTableItem key={ String(item.index) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/> <ZkEvmL2WithdrawalsTableItem key={ String(item.index) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
)) } )) }
</Tbody> </TableBody>
</Table> </TableRoot>
); );
}; };
......
ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx
View file @ 6916f065
import { Td, Tr, chakra } from '@chakra-ui/react'; import { chakra } from '@chakra-ui/react';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import React from 'react'; import React from 'react';
import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2'; import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
import config from 'configs/app'; import config from 'configs/app';
import Skeleton from 'ui/shared/chakra/Skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
...@@ -21,66 +22,63 @@ const ZkEvmL2WithdrawalsTableItem = ({ item, isLoading }: Props) => { ...@@ -21,66 +22,63 @@ const ZkEvmL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
} }
return ( return (
<Tr> <TableRow>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<BlockEntity <BlockEntity
number={ item.block_number } number={ item.block_number }
isLoading={ isLoading } isLoading={ isLoading }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
fontWeight={ 600 } fontWeight={ 600 }
noIcon noIcon
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<Skeleton isLoaded={ !isLoading }> <Skeleton loading={ isLoading }>
<span>{ item.index }</span> <span>{ item.index }</span>
</Skeleton> </Skeleton>
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<TxEntity <TxEntity
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l2_transaction_hash } hash={ item.l2_transaction_hash }
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
truncation="constant_long" truncation="constant_long"
noIcon noIcon
/> />
</Td> </TableCell>
<Td verticalAlign="middle" pr={ 12 }> <TableCell verticalAlign="middle" pr={ 12 }>
<TimeAgoWithTooltip <TimeAgoWithTooltip
timestamp={ item.timestamp } timestamp={ item.timestamp }
isLoading={ isLoading } isLoading={ isLoading }
color="text_secondary" color="text_secondary"
/> />
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
{ item.l1_transaction_hash ? ( { item.l1_transaction_hash ? (
<TxEntityL1 <TxEntityL1
isLoading={ isLoading } isLoading={ isLoading }
hash={ item.l1_transaction_hash } hash={ item.l1_transaction_hash }
truncation="constant_long" truncation="constant_long"
noIcon noIcon
fontSize="sm" textStyle="sm"
lineHeight={ 5 }
/> />
) : ( ) : (
<chakra.span color="text_secondary"> <chakra.span color="text_secondary">
Pending Claim Pending Claim
</chakra.span> </chakra.span>
) } ) }
</Td> </TableCell>
<Td verticalAlign="middle" isNumeric> <TableCell verticalAlign="middle" isNumeric>
<Skeleton isLoaded={ !isLoading } display="inline-block"> <Skeleton loading={ isLoading } display="inline-block">
<span>{ BigNumber(item.value).toFormat() }</span> <span>{ BigNumber(item.value).toFormat() }</span>
</Skeleton> </Skeleton>
</Td> </TableCell>
<Td verticalAlign="middle"> <TableCell verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } display="inline-block"> <Skeleton loading={ isLoading } display="inline-block">
<span>{ item.symbol }</span> <span>{ item.symbol }</span>
</Skeleton> </Skeleton>
</Td> </TableCell>
</Tr> </TableRow>
); );
}; };
......
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