lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove dynamic truncation from tables

Browse Source
This commit is contained in:
isstuev
2024-02-12 20:18:08 +01:00
parent 8667e382e8
commit 36b58a09eb
34 changed files with 138 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
configs/envs/.env.optimism_goerli
+48
View File
@@ -0,0 +1,48 @@
# Set of ENVs for zkevm (dev only)
# https://eth.blockscout.com/
# app configuration
NEXT_PUBLIC_APP_PROTOCOL=http
NEXT_PUBLIC_APP_HOST=localhost
NEXT_PUBLIC_APP_PORT=3000
# blockchain parameters
NEXT_PUBLIC_NETWORK_NAME='OP Goerli'
NEXT_PUBLIC_NETWORK_SHORT_NAME='OP Goerli'
NEXT_PUBLIC_NETWORK_ID=420
NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
NEXT_PUBLIC_NETWORK_RPC_URL=https://goerli.optimism.io
# api configuration
NEXT_PUBLIC_API_HOST=optimism-goerli.blockscout.com
NEXT_PUBLIC_API_PORT=80
NEXT_PUBLIC_API_PROTOCOL=http
NEXT_PUBLIC_API_BASE_PATH=/
# ui config
## homepage
NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
## sidebar
NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/polygon-mainnet.json
## footer
## misc
NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
# app features
NEXT_PUBLIC_APP_INSTANCE=local
NEXT_PUBLIC_APP_ENV=development
NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
# NEXT_PUBLIC_AUTH_URL=http://localhost:3000
NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s.blockscout.com
NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
# rollup
NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK=true
NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw
NEXT_PUBLIC_L1_BASE_URL=https://eth-goerli.blockscout.com/
lib/shortenString.ts
+3 -3
View File
@@ -1,11 +1,11 @@
export default function shortenString(string: string | null) {
export default function shortenString(string: string | null, charNumber = 8) {
if (!string) {
return '';
}
if (string.length <= 7) {
if (string.length <= charNumber - 1) {
return string;
}
return string.slice(0, 4) + '...' + string.slice(-4);
return string.slice(0, charNumber - 4) + '...' + string.slice(-4);
}
ui/address/tokens/ERC20TokensTableItem.tsx
+1
View File
@@ -43,6 +43,7 @@ const ERC20TokensTableItem = ({
<AddressEntity
address={{ hash: token.address }}
isLoading={ isLoading }
truncation="constant"
noIcon
/>
<AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading } opacity="0"/>
ui/addresses/AddressesListItem.tsx
+1
View File
@@ -35,6 +35,7 @@ const AddressesListItem = ({
isLoading={ isLoading }
fontWeight={ 700 }
mr={ 2 }
truncation="constant"
/>
<Skeleton isLoaded={ !isLoading } fontSize="sm" ml="auto" minW={ 6 } color="text_secondary">
<span>{ index }</span>
ui/blocks/BlocksListItem.tsx
+1
View File
@@ -63,6 +63,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
<AddressEntity
address={ data.miner }
isLoading={ isLoading }
truncation="constant"
/>
</Flex>
) }
ui/blocks/BlocksTableItem.tsx
+1
View File
@@ -70,6 +70,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
<AddressEntity
address={ data.miner }
isLoading={ isLoading }
truncation="constant"
/>
</Td>
) }
ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx
+3
View File
@@ -44,6 +44,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
hash={ item.l2_tx_hash }
fontSize="sm"
lineHeight={ 5 }
truncation="constant_long"
/>
</ListItemMobileGrid.Value>
@@ -59,6 +60,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
hash={ item.l1_tx_hash }
fontSize="sm"
lineHeight={ 5 }
truncation="constant_long"
/>
</ListItemMobileGrid.Value>
@@ -68,6 +70,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '', ens_domain_name: null }}
isLoading={ isLoading }
noCopy
truncation="constant"
/>
</ListItemMobileGrid.Value>
ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx
+5 -2
View File
@@ -31,6 +31,7 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
fontSize="sm"
lineHeight={ 5 }
fontWeight={ 600 }
noIcon
/>
</Td>
<Td verticalAlign="middle">
@@ -39,7 +40,8 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
hash={ item.l2_tx_hash }
fontSize="sm"
lineHeight={ 5 }
truncation="constant"
truncation="constant_long"
noIcon
/>
</Td>
<Td verticalAlign="middle" pr={ 12 }>
@@ -49,7 +51,8 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
<TxEntityL1
isLoading={ isLoading }
hash={ item.l1_tx_hash }
truncation="constant"
truncation="constant_long"
noIcon
fontSize="sm"
lineHeight={ 5 }
/>
ui/nameDomain/history/NameDomainHistoryListItem.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ const NameDomainHistoryListItem = ({ isLoading, transaction_hash: transactionHas
<>
<ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<AddressEntity address={ fromAddress } isLoading={ isLoading }/>
<AddressEntity address={ fromAddress } isLoading={ isLoading } truncation="constant"/>
</ListItemMobileGrid.Value>
</>
) }
ui/nameDomain/history/NameDomainHistoryTableItem.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHa
</Skeleton>
</Td>
<Td verticalAlign="middle">
{ fromAddress && <AddressEntity address={ fromAddress } isLoading={ isLoading }/> }
{ fromAddress && <AddressEntity address={ fromAddress } isLoading={ isLoading } truncation="constant"/> }
</Td>
<Td verticalAlign="middle">
{ action && <Tag colorScheme="gray" isLoading={ isLoading }>{ action }</Tag> }
ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx
+5 -4
View File
@@ -8,7 +8,7 @@ import dayjs from 'lib/date/dayjs';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import HashStringShorten from 'ui/shared/HashStringShorten';
import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
const rollupFeature = config.features.rollup;
@@ -55,14 +55,15 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
hash={ item.l1_tx_hash }
fontSize="sm"
lineHeight={ 5 }
truncation="constant_long"
/>
</ListItemMobileGrid.Value>
<ListItemMobileGrid.Label isLoading={ isLoading }>Output root</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%" justifyContent="space-between">
<Skeleton isLoaded={ !isLoading } color="text_secondary" w="calc(100% - 24px)">
<HashStringShortenDynamic hash={ item.output_root }/>
<Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%" justifyContent="start">
<Skeleton isLoaded={ !isLoading } color="text_secondary">
<HashStringShorten hash={ item.output_root } type="long"/>
</Skeleton>
<CopyToClipboard text={ item.output_root } isLoading={ isLoading }/>
</Flex>
ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ const OptimisticL2OutputRootsTable = ({ items, top, isLoading }: Props) => {
<Table variant="simple" size="sm" minW="900px">
<Thead top={ top }>
<Tr>
<Th width="140px">L2 output index</Th>
<Th width="160px">L2 output index</Th>
<Th width="20%">Age</Th>
<Th width="20%">L2 block #</Th>
<Th width="30%">L1 txn hash</Th>
ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx
+7 -4
View File
@@ -8,7 +8,7 @@ import dayjs from 'lib/date/dayjs';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import HashStringShorten from 'ui/shared/HashStringShorten';
const rollupFeature = config.features.rollup;
@@ -36,6 +36,7 @@ const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => {
fontSize="sm"
lineHeight={ 5 }
fontWeight={ 600 }
noIcon
/>
</Td>
<Td verticalAlign="middle" pr={ 12 }>
@@ -44,12 +45,14 @@ const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => {
hash={ item.l1_tx_hash }
fontSize="sm"
lineHeight={ 5 }
noIcon
truncation="constant_long"
/>
</Td>
<Td verticalAlign="middle">
<Flex overflow="hidden" whiteSpace="nowrap" w="100%" alignItems="center">
<Skeleton isLoaded={ !isLoading } w="calc(100% - 36px)">
<HashStringShortenDynamic hash={ item.output_root }/>
<Flex overflow="hidden" w="100%" alignItems="center">
<Skeleton isLoaded={ !isLoading }>
<HashStringShorten hash={ item.output_root } type="long"/>
</Skeleton>
<CopyToClipboard text={ item.output_root } ml={ 2 } isLoading={ isLoading }/>
</Flex>
ui/shared/EntityTags.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ const EntityTags = ({ className, data, tagsBefore = [], tagsAfter = [], isLoadin
}
<Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
<PopoverTrigger>
<Tag onClick={ onToggle }>+{ tags.length - 1 }</Tag>
<Tag isLoading={ isLoading }onClick={ onToggle }>+{ tags.length - 1 }</Tag>
</PopoverTrigger>
<PopoverContent w="240px">
<PopoverBody >
ui/shared/HashStringShorten.tsx
+5 -3
View File
@@ -7,17 +7,19 @@ import shortenString from 'lib/shortenString';
interface Props {
hash: string;
isTooltipDisabled?: boolean;
type?: 'long' | 'short';
as?: As;
}
const HashStringShorten = ({ hash, isTooltipDisabled, as = 'span' }: Props) => {
if (hash.length <= 8) {
const HashStringShorten = ({ hash, isTooltipDisabled, as = 'span', type }: Props) => {
const charNumber = type === 'long' ? 16 : 8;
if (hash.length <= charNumber) {
return <chakra.span as={ as }>{ hash }</chakra.span>;
}
return (
<Tooltip label={ hash } isDisabled={ isTooltipDisabled }>
<chakra.span as={ as }>{ shortenString(hash) }</chakra.span>
<chakra.span as={ as }>{ shortenString(hash, charNumber) }</chakra.span>
</Tooltip>
);
};
ui/shared/address/AddressFromTo.tsx
+9 -9
View File
@@ -25,7 +25,7 @@ interface Props {
noIcon?: boolean;
}
const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading, tokenHash = '', truncation, noIcon }: Props) => {
const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading, tokenHash = '', noIcon }: Props) => {
const mode = useBreakpointValue(
{
base: (typeof modeProp === 'object' ? modeProp.base : modeProp),
@@ -52,8 +52,8 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
noCopy={ current === from.hash }
noIcon={ noIcon }
tokenHash={ tokenHash }
truncation={ truncation }
maxW={ truncation === 'constant' ? undefined : 'calc(100% - 28px)' }
truncation="constant"
maxW="calc(100% - 28px)"
w="min-content"
/>
</Flex>
@@ -65,8 +65,8 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
noCopy={ current === to.hash }
noIcon={ noIcon }
tokenHash={ tokenHash }
truncation={ truncation }
maxW={ truncation === 'constant' ? undefined : 'calc(100% - 28px)' }
truncation="constant"
maxW="calc(100% - 28px)"
w="min-content"
ml="28px"
/>
@@ -87,8 +87,8 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
noCopy={ isOutgoing }
noIcon={ noIcon }
tokenHash={ tokenHash }
truncation={ truncation }
maxW={ truncation === 'constant' ? undefined : `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
truncation="constant"
maxW={ `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
mr={ isOutgoing ? 4 : 2 }
/>
<AddressFromToIcon
@@ -103,8 +103,8 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
noCopy={ current === to.hash }
noIcon={ noIcon }
tokenHash={ tokenHash }
truncation={ truncation }
maxW={ truncation === 'constant' ? undefined : `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
truncation="constant"
maxW={ `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
ml={ 3 }
/>
) }
ui/shared/entities/base/components.tsx
+9 -1
View File
@@ -13,7 +13,7 @@ import LinkInternal from 'ui/shared/LinkInternal';
import { getIconProps, type IconSize } from './utils';
export type Truncation = 'constant' | 'dynamic' | 'tail' | 'none';
export type Truncation = 'constant' | 'constant_long' | 'dynamic' | 'tail' | 'none';
export interface EntityBaseProps {
className?: string;
@@ -117,6 +117,14 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna
const children = (() => {
switch (truncation) {
case 'constant_long':
return (
<HashStringShorten
hash={ text }
as={ asProp }
type="long"
/>
);
case 'constant':
return (
<HashStringShorten
ui/shared/statusTag/StatusTag.tsx
+3 -3
View File
@@ -37,9 +37,9 @@ const StatusTag = ({ type, text, errorText, isLoading }: Props) => {
return (
<Tooltip label={ errorText }>
<Tag colorScheme={ colorScheme } display="inline-flex" isLoading={ isLoading }>
<IconSvg boxSize={ 2.5 } name={ icon } mr={ 2 }/>
<TagLabel>{ text }</TagLabel>
<Tag colorScheme={ colorScheme } display="flex" isLoading={ isLoading } >
<IconSvg boxSize={ 2.5 } name={ icon } mr={ 2 } flexShrink={ 0 }/>
<TagLabel display="block">{ text }</TagLabel>
</Tag>
</Tooltip>
);
ui/tokens/TokensTableItem.tsx
+1
View File
@@ -87,6 +87,7 @@ const TokensTableItem = ({
noIcon
fontSize="sm"
fontWeight={ 500 }
truncation="constant"
/>
<AddressAddToWallet
token={ token }
ui/tx/state/TxStateListItem.tsx
+1
View File
@@ -24,6 +24,7 @@ const TxStateListItem = ({ data, isLoading }: Props) => {
<AddressEntity
address={ data.address }
isLoading={ isLoading }
truncation="constant"
/>
{ tag }
</ListItemMobileGrid.Value>
ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ const OptimisticL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
hash={ hash }
fontSize="sm"
lineHeight={ 5 }
maxW="100%"
truncation="constant_long"
/>
)) }
</VStack>
ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx
+3 -1
View File
@@ -32,6 +32,7 @@ const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => {
fontSize="sm"
lineHeight={ 5 }
fontWeight={ 600 }
noIcon
/>
</Td>
<Td>
@@ -64,7 +65,8 @@ const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => {
hash={ hash }
fontSize="sm"
lineHeight={ 5 }
maxW="100%"
truncation="constant_long"
noIcon
/>
)) }
</VStack>
ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx
+2 -2
View File
@@ -69,7 +69,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
hash={ item.verify_tx_hash }
fontSize="sm"
lineHeight={ 5 }
maxW="100%"
truncation="constant_long"
/>
) : <Text>Pending</Text> }
</ListItemMobileGrid.Value>
@@ -82,7 +82,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
hash={ item.sequence_tx_hash }
fontSize="sm"
lineHeight={ 5 }
maxW="100%"
truncation="constant_long"
/>
) : <Text>Pending</Text> }
</ListItemMobileGrid.Value>
ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTable.tsx
+6 -6
View File
@@ -15,15 +15,15 @@ type Props = {
const TxnBatchesTable = ({ items, top, isLoading }: Props) => {
return (
<Table variant="simple" size="sm" minW="850px">
<Table variant="simple" size="sm" minW="1000px">
<Thead top={ top }>
<Tr>
<Th width="170px">Batch #</Th>
<Th width="150px">Status</Th>
<Th width="33%">Batch #</Th>
<Th width="33%">Status</Th>
<Th width="150px">Age</Th>
<Th width="170px">Txn count</Th>
<Th width="50%">Verify Tx Has</Th>
<Th width="50%">Sequence hash</Th>
<Th width="150px">Txn count</Th>
<Th width="230px">Verify Tx Has</Th>
<Th width="230px">Sequence hash</Th>
</Tr>
</Thead>
<Tbody>
ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx
+5 -2
View File
@@ -32,6 +32,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
fontSize="sm"
lineHeight={ 5 }
fontWeight={ 600 }
noIcon
/>
</Td>
<Td verticalAlign="middle">
@@ -59,7 +60,8 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
hash={ item.verify_tx_hash }
fontSize="sm"
lineHeight={ 5 }
maxW="100%"
truncation="constant_long"
noIcon
/>
) : <Text>Pending</Text> }
</Td>
@@ -70,7 +72,8 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
hash={ item.sequence_tx_hash }
fontSize="sm"
lineHeight={ 5 }
maxW="100%"
truncation="constant_long"
noIcon
/>
) : <Text>Pending</Text> }
</Td>
ui/txs/TxsListItem.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
<TxEntity
isLoading={ isLoading }
hash={ tx.hash }
truncation="constant"
truncation="constant_long"
fontWeight="700"
/>
{ tx.timestamp && (
ui/txs/TxsTableItem.tsx
+1
View File
@@ -55,6 +55,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
fontWeight={ 700 }
noIcon
maxW="100%"
truncation="constant"
/>
{ tx.timestamp && <Skeleton color="text_secondary" fontWeight="400" isLoaded={ !isLoading }><span>{ timeAgo }</span></Skeleton> }
</VStack>
ui/userOps/UserOpsListItem.tsx
+3 -1
View File
@@ -28,7 +28,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
<ListItemMobileGrid.Label isLoading={ isLoading }>User op hash</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<UserOpEntity hash={ item.hash } isLoading={ isLoading } fontWeight="700" noIcon/>
<UserOpEntity hash={ item.hash } isLoading={ isLoading } fontWeight="700" noIcon truncation="constant_long"/>
</ListItemMobileGrid.Value>
<ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
@@ -48,6 +48,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
<UserOpsAddress
address={ item.address }
isLoading={ isLoading }
truncation="constant"
/>
</ListItemMobileGrid.Value>
</>
@@ -61,6 +62,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
hash={ item.transaction_hash }
isLoading={ isLoading }
noIcon
truncation="constant_long"
/>
</ListItemMobileGrid.Value>
</>
ui/userOps/UserOpsTable.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ import UserOpsTableItem from './UserOpsTableItem';
const UserOpsTable = ({ items, isLoading, top, showTx, showSender }: Props) => {
return (
<Table variant="simple" size="sm">
<Table variant="simple" size="sm" minW="1000px">
<Thead top={ top }>
<Tr>
<Th w="60%">User op hash</Th>
ui/userOps/UserOpsTableItem.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ const UserOpsTableItem = ({ item, isLoading, showTx, showSender }: Props) => {
return (
<Tr>
<Td verticalAlign="middle">
<UserOpEntity hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 }/>
<UserOpEntity hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 } truncation="constant_long"/>
</Td>
<Td verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx
+1
View File
@@ -64,6 +64,7 @@ const BeaconChainWithdrawalsListItem = ({ item, isLoading, view }: Props) => {
<AddressEntity
address={ item.receiver }
isLoading={ isLoading }
truncation="constant"
/>
</ListItemMobileGrid.Value>
</>
ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx
+1
View File
@@ -37,6 +37,7 @@ const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
isLoading={ isLoading }
fontSize="sm"
lineHeight={ 5 }
noIcon
/>
</Td>
) }
ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx
+1
View File
@@ -40,6 +40,7 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
<AddressEntity
address={ item.from }
isLoading={ isLoading }
truncation="constant"
/>
</ListItemMobileGrid.Value>
</>
ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx
+4 -2
View File
@@ -40,9 +40,10 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
<TxEntity
isLoading={ isLoading }
hash={ item.l2_tx_hash }
truncation="constant"
fontSize="sm"
lineHeight={ 5 }
truncation="constant_long"
noIcon
/>
</Td>
<Td verticalAlign="middle" pr={ 12 }>
@@ -61,7 +62,8 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
<TxEntityL1
isLoading={ isLoading }
hash={ item.l1_tx_hash }
truncation="constant"
truncation="constant_long"
noIcon
fontSize="sm"
lineHeight={ 5 }
/>