Skip to content

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

state, blobs and user ops tabs

parent 7f55da68
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 162 deletions
toolkit/components/CutLink/CutLink.tsx
View file @ ffc87f4d
......@@ -14,6 +14,10 @@ interface Props extends LinkProps {
const ID = 'CutLink';
// TODO @tom2drum another variant of CutLink
// ui/tx/TxAllowedPeekers.tsx
// ui/tx/state/TxStateTokenIdList.tsx
const CutLink = (props: Props) => {
const { children, id = ID, onClick, isExpanded: isExpandedProp = false, ...rest } = props;
......
ui/pages/Transaction.tsx
View file @ ffc87f4d
......@@ -59,16 +59,16 @@ const TransactionPageContent = () => {
// { id: 'wrapped', title: 'Regular tx details', component: <TxDetailsWrapped data={ data.wrapped }/> } :
// undefined,
{ id: 'token_transfers', title: 'Token transfers', component: <TxTokenTransfer txQuery={ txQuery }/> },
// config.features.userOps.isEnabled ?
// { id: 'user_ops', title: 'User operations', component: <TxUserOps txQuery={ txQuery }/> } :
// undefined,
config.features.userOps.isEnabled ?
{ id: 'user_ops', title: 'User operations', component: <TxUserOps txQuery={ txQuery }/> } :
undefined,
{ id: 'internal', title: 'Internal txns', component: <TxInternals txQuery={ txQuery }/> },
// config.features.dataAvailability.isEnabled && txQuery.data?.blob_versioned_hashes?.length ?
// { id: 'blobs', title: 'Blobs', component: <TxBlobs txQuery={ txQuery }/> } :
// undefined,
config.features.dataAvailability.isEnabled && txQuery.data?.blob_versioned_hashes?.length ?
{ id: 'blobs', title: 'Blobs', component: <TxBlobs txQuery={ txQuery }/> } :
undefined,
{ id: 'logs', title: 'Logs', component: <TxLogs txQuery={ txQuery }/> },
// { id: 'state', title: 'State', component: <TxState txQuery={ txQuery }/> },
// { id: 'raw_trace', title: 'Raw trace', component: <TxRawTrace txQuery={ txQuery }/> },
{ id: 'state', title: 'State', component: <TxState txQuery={ txQuery }/> },
{ id: 'raw_trace', title: 'Raw trace', component: <TxRawTrace txQuery={ txQuery }/> },
].filter(Boolean);
})();
......
ui/shared/blob/BlobDataType.tsx
View file @ ffc87f4d
import { Flex, useColorModeValue } from '@chakra-ui/react';
import { Flex } from '@chakra-ui/react';
import React from 'react';
import * as blobUtils from 'lib/blob';
import Skeleton from 'ui/shared/chakra/Skeleton';
import { Skeleton } from 'toolkit/chakra/skeleton';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';
interface Props {
data: string;
isLoading?: boolean;
......@@ -18,8 +17,6 @@ const TYPES: Record<string, { iconName: IconName; label: string }> = {
};
const BlobDataType = ({ data, isLoading }: Props) => {
const iconColor = useColorModeValue('gray.500', 'gray.400');
const guessedType = React.useMemo(() => {
if (isLoading) {
return;
......@@ -48,8 +45,8 @@ const BlobDataType = ({ data, isLoading }: Props) => {
return (
<Flex alignItems="center" columnGap={ 2 }>
<IconSvg name={ iconName } boxSize={ 5 } color={ iconColor } isLoading={ isLoading }/>
<Skeleton isLoaded={ !isLoading }>{ label }</Skeleton>
<IconSvg name={ iconName } boxSize={ 5 } color={{ _light: 'gray.500', _dark: 'gray.400' }} isLoading={ isLoading }/>
<Skeleton loading={ isLoading }>{ label }</Skeleton>
</Flex>
);
};
......
ui/shared/userOps/UserOpStatus.tsx
View file @ ffc87f4d
import React from 'react';
import Skeleton from 'ui/shared/chakra/Skeleton';
import StatusTag from 'ui/shared/statusTag/StatusTag';
type Props = {
......@@ -14,9 +13,7 @@ const UserOpStatus = ({ status, isLoading }: Props) => {
}
return (
<Skeleton isLoaded={ !isLoading } display="inline-block">
<StatusTag type={ status === true ? 'ok' : 'error' } text={ status === true ? 'Success' : 'Failed' }/>
</Skeleton>
<StatusTag isLoading={ isLoading } type={ status === true ? 'ok' : 'error' } text={ status === true ? 'Success' : 'Failed' }/>
);
};
......
ui/tx/TxAllowedPeekers.tsx
View file @ ffc87f4d
......@@ -11,7 +11,6 @@ interface Props {
const CUT_LENGTH = 2;
// TODO @tom2drum another variant of CutLink
const TxAllowedPeekers = ({ items }: Props) => {
const [ isExpanded, setIsExpanded ] = React.useState(false);
......
ui/tx/TxBlobs.tsx
View file @ ffc87f4d
import { Hide, Show } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import React from 'react';
import { TX_BLOB } from 'stubs/blobs';
......@@ -34,12 +34,12 @@ const TxBlobs = ({ txQuery }: Props) => {
const content = data ? (
<>
<Hide below="lg" ssr={ false }>
<Box hideBelow="lg">
<TxBlobsTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }/>
</Hide>
<Show below="lg" ssr={ false }>
</Box>
<Box hideFrom="lg">
<TxBlobsList data={ data.items } isLoading={ isPlaceholderData }/>
</Show>
</Box>
</>
) : null;
......@@ -52,11 +52,12 @@ const TxBlobs = ({ txQuery }: Props) => {
return (
<DataListDisplay
isError={ isError || txQuery.isError }
items={ data?.items }
itemsNum={ data?.items.length }
emptyText="There are no blobs for this transaction."
content={ content }
actionBar={ actionBar }
/>
>
{ content }
</DataListDisplay>
);
};
......
ui/tx/TxState.tsx
View file @ ffc87f4d
import { Hide, Show, Text } from '@chakra-ui/react';
import { Box, Text } from '@chakra-ui/react';
import React from 'react';
import { TX_STATE_CHANGES } from 'stubs/txStateChanges';
......@@ -39,12 +39,12 @@ const TxState = ({ txQuery }: Props) => {
const content = data ? (
<>
<Hide below="lg" ssr={ false }>
<Box hideBelow="lg">
<TxStateTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }/>
</Hide>
<Show below="lg" ssr={ false }>
</Box>
<Box hideFrom="lg">
<TxStateList data={ data.items } isLoading={ isPlaceholderData }/>
</Show>
</Box>
</>
) : null;
......@@ -64,11 +64,12 @@ const TxState = ({ txQuery }: Props) => {
) }
<DataListDisplay
isError={ isError || txQuery.isError }
items={ data?.items }
itemsNum={ data?.items.length }
emptyText="There are no state changes for this transaction."
content={ content }
actionBar={ actionBar }
/>
>
{ content }
</DataListDisplay>
</>
);
};
......
ui/tx/blobs/TxBlobListItem.tsx
View file @ ffc87f4d
......@@ -2,8 +2,8 @@ import React from 'react';
import type { TxBlob } from 'types/api/blobs';
import { Skeleton } from 'toolkit/chakra/skeleton';
import BlobDataType from 'ui/shared/blob/BlobDataType';
import Skeleton from 'ui/shared/chakra/Skeleton';
import BlobEntity from 'ui/shared/entities/blob/BlobEntity';
import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
......@@ -29,7 +29,7 @@ const TxBlobListItem = ({ data, isLoading }: Props) => {
<ListItemMobileGrid.Label isLoading={ isLoading }>Size, bytes</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading }>
<Skeleton loading={ isLoading }>
{ size.toLocaleString() }
</Skeleton>
</ListItemMobileGrid.Value>
......
ui/tx/blobs/TxBlobsTable.tsx
View file @ ffc87f4d
import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
import React from 'react';
import type { TxBlob } from 'types/api/blobs';
import { default as Thead } from 'ui/shared/TheadSticky';
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import TxBlobsTableItem from './TxBlobsTableItem';
......@@ -16,20 +15,20 @@ interface Props {
const TxInternalsTable = ({ data, top, isLoading }: Props) => {
return (
<Table>
<Thead top={ top }>
<Tr>
<Th width="60%">Blob hash</Th>
<Th width="20%">Data type</Th>
<Th width="20%">Size, bytes</Th>
</Tr>
</Thead>
<Tbody>
<TableRoot>
<TableHeaderSticky top={ top }>
<TableRow>
<TableColumnHeader width="60%">Blob hash</TableColumnHeader>
<TableColumnHeader width="20%">Data type</TableColumnHeader>
<TableColumnHeader width="20%">Size, bytes</TableColumnHeader>
</TableRow>
</TableHeaderSticky>
<TableBody>
{ data.map((item, index) => (
<TxBlobsTableItem key={ item.hash + (isLoading ? index : '') } data={ item } isLoading={ isLoading }/>
)) }
</Tbody>
</Table>
</TableBody>
</TableRoot>
);
};
......
ui/tx/blobs/TxBlobsTableItem.tsx
View file @ ffc87f4d
import { Tr, Td } from '@chakra-ui/react';
import React from 'react';
import type { TxBlob } from 'types/api/blobs';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import BlobDataType from 'ui/shared/blob/BlobDataType';
import Skeleton from 'ui/shared/chakra/Skeleton';
import BlobEntity from 'ui/shared/entities/blob/BlobEntity';
interface Props {
......@@ -16,19 +16,19 @@ const TxBlobsTableItem = ({ data, isLoading }: Props) => {
const size = data.blob_data ? data.blob_data.replace('0x', '').length / 2 : '-';
return (
<Tr alignItems="top">
<Td>
<TableRow alignItems="top">
<TableCell>
<BlobEntity hash={ data.hash } noIcon isLoading={ isLoading }/>
</Td>
<Td verticalAlign="middle">
</TableCell>
<TableCell verticalAlign="middle">
{ data.blob_data ? <BlobDataType isLoading={ isLoading } data={ data.blob_data }/> : '-' }
</Td>
<Td verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } display="inline-block">
</TableCell>
<TableCell verticalAlign="middle">
<Skeleton loading={ isLoading } display="inline-block">
{ size.toLocaleString() }
</Skeleton>
</Td>
</Tr>
</TableCell>
</TableRow>
);
};
......
ui/tx/state/TxStateTable.tsx
View file @ ffc87f4d
import {
Table,
Tbody,
Tr,
Th,
} from '@chakra-ui/react';
import React from 'react';
import type { TxStateChange } from 'types/api/txStateChanges';
import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
import { default as Thead } from 'ui/shared/TheadSticky';
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import TxStateTableItem from 'ui/tx/state/TxStateTableItem';
interface Props {
......@@ -21,21 +15,21 @@ interface Props {
const TxStateTable = ({ data, isLoading, top }: Props) => {
return (
<AddressHighlightProvider>
<Table minWidth="1000px" w="100%">
<Thead top={ top }>
<Tr>
<Th width="140px">Type</Th>
<Th width="160px">Address</Th>
<Th width="33%" isNumeric>Before</Th>
<Th width="33%" isNumeric>After</Th>
<Th width="33%" isNumeric>Change</Th>
<Th width="150px" minW="80px" maxW="150px">Token ID</Th>
</Tr>
</Thead>
<Tbody>
<TableRoot minWidth="1000px" w="100%">
<TableHeaderSticky top={ top }>
<TableRow>
<TableColumnHeader width="140px">Type</TableColumnHeader>
<TableColumnHeader width="160px">Address</TableColumnHeader>
<TableColumnHeader width="33%" isNumeric>Before</TableColumnHeader>
<TableColumnHeader width="33%" isNumeric>After</TableColumnHeader>
<TableColumnHeader width="33%" isNumeric>Change</TableColumnHeader>
<TableColumnHeader width="150px" minW="80px" maxW="150px">Token ID</TableColumnHeader>
</TableRow>
</TableHeaderSticky>
<TableBody>
{ data.map((item, index) => <TxStateTableItem data={ item } key={ index } isLoading={ isLoading }/>) }
</Tbody>
</Table>
</TableBody>
</TableRoot>
</AddressHighlightProvider>
);
};
......
ui/tx/state/TxStateTableItem.tsx
View file @ ffc87f4d
import { Tr, Td, Box } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import React from 'react';
import type { TxStateChange } from 'types/api/txStateChanges';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import { getStateElements } from './utils';
......@@ -16,13 +17,13 @@ const TxStateTableItem = ({ data, isLoading }: Props) => {
const { before, after, change, tag, tokenId } = getStateElements(data, isLoading);
return (
<Tr>
<Td>
<TableRow>
<TableCell>
<Box py="3px">
{ tag }
</Box>
</Td>
<Td>
</TableCell>
<TableCell>
<AddressEntity
address={ data.address }
isLoading={ isLoading }
......@@ -30,12 +31,12 @@ const TxStateTableItem = ({ data, isLoading }: Props) => {
my="7px"
w="100%"
/>
</Td>
<Td isNumeric><Box py="7px">{ before }</Box></Td>
<Td isNumeric><Box py="7px">{ after }</Box></Td>
<Td isNumeric><Box py="7px">{ change }</Box></Td>
<Td>{ tokenId }</Td>
</Tr>
</TableCell>
<TableCell isNumeric><Box py="7px">{ before }</Box></TableCell>
<TableCell isNumeric><Box py="7px">{ after }</Box></TableCell>
<TableCell isNumeric><Box py="7px">{ change }</Box></TableCell>
<TableCell>{ tokenId }</TableCell>
</TableRow>
);
};
......
ui/tx/state/TxStateTokenIdList.tsx
View file @ ffc87f4d
import { Flex, Text, Link, useBoolean } from '@chakra-ui/react';
import { Flex, Text } from '@chakra-ui/react';
import React from 'react';
import { Link } from 'toolkit/chakra/link';
import NftEntity from 'ui/shared/entities/nft/NftEntity';
interface Props {
......@@ -10,7 +11,11 @@ interface Props {
}
const TxStateTokenIdList = ({ items, tokenAddress, isLoading }: Props) => {
const [ isCut, setIsCut ] = useBoolean(true);
const [ isCut, setIsCut ] = React.useState(true);
const handleToggle = React.useCallback(() => {
setIsCut((prev) => !prev);
}, []);
return (
<Flex flexDir="column" rowGap={ 2 }>
......@@ -33,7 +38,7 @@ const TxStateTokenIdList = ({ items, tokenAddress, isLoading }: Props) => {
fontWeight={ 400 }
textDecoration="underline dashed"
_hover={{ textDecoration: 'underline dashed', color: 'link_hovered' }}
onClick={ setIsCut.toggle }
onClick={ handleToggle }
pb={{ base: '5px', md: 0 }}
>
View { isCut ? 'more' : 'less' }
......
ui/tx/state/utils.tsx
View file @ ffc87f4d
import { Flex, Tooltip } from '@chakra-ui/react';
import { Flex } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
......@@ -9,8 +9,9 @@ import { ZERO_ADDRESS } from 'lib/consts';
import { nbsp, space } from 'lib/html-entities';
import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
import { currencyUnits } from 'lib/units';
import Skeleton from 'ui/shared/chakra/Skeleton';
import Tag from 'ui/shared/chakra/Tag';
import { Badge } from 'toolkit/chakra/badge';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { Tooltip } from 'toolkit/chakra/tooltip';
import NftEntity from 'ui/shared/entities/nft/NftEntity';
import TokenEntity from 'ui/shared/entities/token/TokenEntity';
......@@ -20,10 +21,10 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
const tag = (() => {
if (data.is_miner) {
return (
<Tooltip label="A block producer who successfully included the block into the blockchain">
<Tag textTransform="capitalize" colorScheme="yellow" isLoading={ isLoading }>
<Tooltip content="A block producer who successfully included the block into the blockchain">
<Badge textTransform="capitalize" colorPalette="yellow" loading={ isLoading }>
{ getNetworkValidatorTitle() }
</Tag>
</Badge>
</Tooltip>
);
}
......@@ -40,8 +41,8 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
if (changeDirection) {
const text = changeDirection === 'from' ? 'Mint' : 'Burn';
return (
<Tooltip label="Address used in tokens mintings and burnings">
<Tag textTransform="capitalize" colorScheme="yellow" isLoading={ isLoading }>{ text } address</Tag>
<Tooltip content="Address used in tokens mintings and burnings">
<Badge textTransform="capitalize" colorPalette="yellow" loading={ isLoading }>{ text } address</Badge>
</Tooltip>
);
}
......@@ -60,17 +61,17 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
return {
before: (
<Skeleton isLoaded={ !isLoading } wordBreak="break-all" display="inline-block">
<Skeleton loading={ isLoading } wordBreak="break-all" display="inline-block">
{ beforeBn.toFormat() } { currencyUnits.ether }
</Skeleton>
),
after: (
<Skeleton isLoaded={ !isLoading } wordBreak="break-all" display="inline-block">
<Skeleton loading={ isLoading } wordBreak="break-all" display="inline-block">
{ afterBn.toFormat() } { currencyUnits.ether }
</Skeleton>
),
change: (
<Skeleton isLoaded={ !isLoading } display="inline-block" color={ changeColor }>
<Skeleton loading={ isLoading } display="inline-block" color={ changeColor }>
<span>{ changeSign }{ nbsp }{ differenceBn.abs().toFormat() }</span>
</Skeleton>
),
......@@ -106,7 +107,7 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
const changeSign = differenceBn.isGreaterThanOrEqualTo(0) ? '+' : '-';
return (
<Skeleton isLoaded={ !isLoading } display="inline-block" color={ changeColor } wordBreak="break-all">
<Skeleton loading={ isLoading } display="inline-block" color={ changeColor } wordBreak="break-all">
<span>{ changeSign }{ nbsp }{ differenceBn.abs().toFormat() }</span>
</Skeleton>
);
......@@ -133,14 +134,14 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
return {
before: data.balance_before ? (
<Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }} flexWrap="wrap">
<Skeleton isLoaded={ !isLoading } wordBreak="break-all">{ beforeBn.toFormat() }</Skeleton>
<Skeleton loading={ isLoading } wordBreak="break-all">{ beforeBn.toFormat() }</Skeleton>
<span>{ space }</span>
{ tokenLink }
</Flex>
) : null,
after: data.balance_after ? (
<Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }} flexWrap="wrap">
<Skeleton isLoaded={ !isLoading } wordBreak="break-all">{ afterBn.toFormat() }</Skeleton>
<Skeleton loading={ isLoading } wordBreak="break-all">{ afterBn.toFormat() }</Skeleton>
<span>{ space }</span>
{ tokenLink }
</Flex>
......
ui/userOps/UserOpsContent.tsx
View file @ ffc87f4d
import { Hide, Show } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import React from 'react';
import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
......@@ -23,7 +23,7 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
const content = query.data?.items ? (
<>
<Hide below="lg" ssr={ false }>
<Box hideBelow="lg">
<UserOpsTable
items={ query.data.items }
top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
......@@ -31,8 +31,8 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
showTx={ showTx }
showSender={ showSender }
/>
</Hide>
<Show below="lg" ssr={ false }>
</Box>
<Box hideFrom="lg">
{ query.data.items.map((item, index) => (
<UserOpsListItem
key={ item.hash + (query.isPlaceholderData ? String(index) : '') }
......@@ -42,7 +42,7 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
showSender={ showSender }
/>
)) }
</Show>
</Box>
</>
) : null;
......@@ -55,11 +55,12 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
return (
<DataListDisplay
isError={ query.isError }
items={ query.data?.items }
itemsNum={ query.data?.items?.length }
emptyText="There are no user operations."
content={ content }
actionBar={ actionBar }
/>
>
{ content }
</DataListDisplay>
);
};
......
ui/userOps/UserOpsListItem.tsx
View file @ ffc87f4d
......@@ -3,7 +3,6 @@ import React from 'react';
import type { UserOpsItem } from 'types/api/userOps';
import config from 'configs/app';
import Skeleton from 'ui/shared/chakra/Skeleton';
import CurrencyValue from 'ui/shared/CurrencyValue';
import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
......@@ -76,8 +75,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
<BlockEntity
number={ Number(item.block_number) }
isLoading={ isLoading }
fontSize="sm"
lineHeight={ 5 }
textStyle="sm"
noIcon
/>
</ListItemMobileGrid.Value>
......@@ -86,9 +84,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
<>
<ListItemMobileGrid.Label isLoading={ isLoading }>Fee</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading }>
<CurrencyValue value={ item.fee } isLoading={ isLoading } accuracy={ 8 } currency={ config.chain.currency.symbol }/>
</Skeleton>
<CurrencyValue value={ item.fee } isLoading={ isLoading } accuracy={ 8 } currency={ config.chain.currency.symbol }/>
</ListItemMobileGrid.Value>
</>
) }
......
ui/userOps/UserOpsTable.tsx
View file @ ffc87f4d
import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
import React from 'react';
import type { UserOpsItem } from 'types/api/userOps';
import config from 'configs/app';
import { default as Thead } from 'ui/shared/TheadSticky';
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import UserOpsTableItem from './UserOpsTableItem';
......@@ -18,19 +17,19 @@ import UserOpsTableItem from './UserOpsTableItem';
const UserOpsTable = ({ items, isLoading, top, showTx, showSender }: Props) => {
return (
<Table minW="1000px">
<Thead top={ top }>
<Tr>
<Th w="60%">User op hash</Th>
<Th w="110px">Age</Th>
<Th w="140px">Status</Th>
{ showSender && <Th w="160px">Sender</Th> }
{ showTx && <Th w="160px">Tx hash</Th> }
<Th w="40%">Block</Th>
{ !config.UI.views.tx.hiddenFields?.tx_fee && <Th w="120px" isNumeric>{ `Fee ${ config.chain.currency.symbol }` }</Th> }
</Tr>
</Thead>
<Tbody>
<TableRoot minW="1000px">
<TableHeaderSticky top={ top }>
<TableRow>
<TableColumnHeader w="60%">User op hash</TableColumnHeader>
<TableColumnHeader w="110px">Age</TableColumnHeader>
<TableColumnHeader w="140px">Status</TableColumnHeader>
{ showSender && <TableColumnHeader w="160px">Sender</TableColumnHeader> }
{ showTx && <TableColumnHeader w="160px">Tx hash</TableColumnHeader> }
<TableColumnHeader w="40%">Block</TableColumnHeader>
{ !config.UI.views.tx.hiddenFields?.tx_fee && <TableColumnHeader w="120px" isNumeric>{ `Fee ${ config.chain.currency.symbol }` }</TableColumnHeader> }
</TableRow>
</TableHeaderSticky>
<TableBody>
{ items.map((item, index) => {
return (
<UserOpsTableItem
......@@ -42,8 +41,8 @@ const UserOpsTable = ({ items, isLoading, top, showTx, showSender }: Props) => {
/>
);
}) }
</Tbody>
</Table>
</TableBody>
</TableRoot>
);
};
......
ui/userOps/UserOpsTableItem.tsx
View file @ ffc87f4d
import { Td, Tr } from '@chakra-ui/react';
import React from 'react';
import type { UserOpsItem } from 'types/api/userOps';
import config from 'configs/app';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import CurrencyValue from 'ui/shared/CurrencyValue';
import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
......@@ -21,55 +21,54 @@ import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
const UserOpsTableItem = ({ item, isLoading, showTx, showSender }: Props) => {
return (
<Tr>
<Td verticalAlign="middle">
<TableRow>
<TableCell verticalAlign="middle">
<UserOpEntity hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 } truncation="constant_long"/>
</Td>
<Td verticalAlign="middle">
</TableCell>
<TableCell verticalAlign="middle">
<TimeAgoWithTooltip
timestamp={ item.timestamp }
isLoading={ isLoading }
color="text_secondary"
color="text.secondary"
display="inline-block"
/>
</Td>
<Td verticalAlign="middle">
</TableCell>
<TableCell verticalAlign="middle">
<UserOpStatus status={ item.status } isLoading={ isLoading }/>
</Td>
</TableCell>
{ showSender && (
<Td verticalAlign="middle">
<TableCell verticalAlign="middle">
<AddressStringOrParam
address={ item.address }
isLoading={ isLoading }
truncation="constant"
/>
</Td>
</TableCell>
) }
{ showTx && (
<Td verticalAlign="middle">
<TableCell verticalAlign="middle">
<TxEntity
hash={ item.transaction_hash }
isLoading={ isLoading }
truncation="constant"
noIcon
/>
</Td>
</TableCell>
) }
<Td verticalAlign="middle">
<TableCell verticalAlign="middle">
<BlockEntity
number={ Number(item.block_number) }
isLoading={ isLoading }
fontSize="sm"
lineHeight={ 5 }
textStyle="sm"
noIcon
/>
</Td>
</TableCell>
{ !config.UI.views.tx.hiddenFields?.tx_fee && (
<Td verticalAlign="middle" isNumeric>
<TableCell verticalAlign="middle" isNumeric>
<CurrencyValue value={ item.fee } isLoading={ isLoading } accuracy={ 8 }/>
</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