Skip to content

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

DetailedInfo refactoring

parent 6c0e4529
Show whitespace changes
Inline Side-by-side
Showing with 1155 additions and 1106 deletions
toolkit/components/CutLink/CutLinkDetails.tsx
View file @ 1f8e6709
...@@ -14,10 +14,6 @@ interface Props extends LinkProps { ...@@ -14,10 +14,6 @@ interface Props extends LinkProps {
const ID = 'CutLink'; const ID = 'CutLink';
// TODO @tom2drum another variant of CutLink
// ui/tx/TxAllowedPeekers.tsx
// ui/tx/state/TxStateTokenIdList.tsx
const CutLink = (props: Props) => { const CutLink = (props: Props) => {
const { children, id = ID, onClick, isExpanded: isExpandedProp = false, ...rest } = props; const { children, id = ID, onClick, isExpanded: isExpandedProp = false, ...rest } = props;
......
toolkit/theme/foundations/semanticTokens.ts
View file @ 1f8e6709
...@@ -5,7 +5,6 @@ import config from 'configs/app'; ...@@ -5,7 +5,6 @@ import config from 'configs/app';
const heroBannerButton = config.UI.homepage.heroBanner?.button; const heroBannerButton = config.UI.homepage.heroBanner?.button;
const semanticTokens: ThemingConfig['semanticTokens'] = { const semanticTokens: ThemingConfig['semanticTokens'] = {
// TODO @tom2drum remove *_hover in favor of conditional selectors
colors: { colors: {
// NEW TOKENS // NEW TOKENS
button: { button: {
......
ui/address/AddressDetails.tsx
View file @ 1f8e6709
...@@ -12,8 +12,8 @@ import ServiceDegradationWarning from 'ui/shared/alerts/ServiceDegradationWarnin ...@@ -12,8 +12,8 @@ import ServiceDegradationWarning from 'ui/shared/alerts/ServiceDegradationWarnin
import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
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 DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem'; import DetailedInfoSponsoredItem from 'ui/shared/DetailedInfo/DetailedInfoSponsoredItem';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
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';
...@@ -103,45 +103,45 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => { ...@@ -103,45 +103,45 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
{ data.filecoin?.id && ( { data.filecoin?.id && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Short identifier of an address that may change with chain state updates" hint="Short identifier of an address that may change with chain state updates"
> >
ID ID
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Text>{ data.filecoin.id }</Text> <Text>{ data.filecoin.id }</Text>
<CopyToClipboard text={ data.filecoin.id }/> <CopyToClipboard text={ data.filecoin.id }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.filecoin?.actor_type && ( { data.filecoin?.actor_type && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Identifies the purpose and behavior of the address on the Filecoin network" hint="Identifies the purpose and behavior of the address on the Filecoin network"
> >
Actor Actor
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<FilecoinActorTag actorType={ data.filecoin.actor_type }/> <FilecoinActorTag actorType={ data.filecoin.actor_type }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ (data.filecoin?.actor_type === 'evm' || data.filecoin?.actor_type === 'ethaccount') && data?.filecoin?.robust && ( { (data.filecoin?.actor_type === 'evm' || data.filecoin?.actor_type === 'ethaccount') && data?.filecoin?.robust && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="0x-style address to which the Filecoin address is assigned by the Ethereum Address Manager" hint="0x-style address to which the Filecoin address is assigned by the Ethereum Address Manager"
> >
Ethereum Address Ethereum Address
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value flexWrap="nowrap"> <DetailedInfo.ItemValue flexWrap="nowrap">
<AddressEntity <AddressEntity
address={{ hash: data.hash }} address={{ hash: data.hash }}
noIcon noIcon
noLink noLink
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
...@@ -149,13 +149,13 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => { ...@@ -149,13 +149,13 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
{ data.is_contract && data.creation_transaction_hash && (creatorAddressHash) && ( { data.is_contract && data.creation_transaction_hash && (creatorAddressHash) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Transaction and address of creation" hint="Transaction and address of creation"
isLoading={ addressQuery.isPlaceholderData } isLoading={ addressQuery.isPlaceholderData }
> >
Creator Creator
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressEntity <AddressEntity
address={{ hash: creatorAddressHash, filecoin: { robust: data.creator_filecoin_robust_address } }} address={{ hash: creatorAddressHash, filecoin: { robust: data.creator_filecoin_robust_address } }}
truncation="constant" truncation="constant"
...@@ -163,7 +163,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => { ...@@ -163,7 +163,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
/> />
<Text whiteSpace="pre"> at txn </Text> <Text whiteSpace="pre"> at txn </Text>
<TxEntity hash={ data.creation_transaction_hash } truncation="constant" noIcon noCopy={ false }/> <TxEntity hash={ data.creation_transaction_hash } truncation="constant" noIcon noCopy={ false }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.is_contract && data.implementations && data.implementations?.length > 0 && ( { data.is_contract && data.implementations && data.implementations?.length > 0 && (
...@@ -177,38 +177,38 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => { ...@@ -177,38 +177,38 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
{ data.has_tokens && ( { data.has_tokens && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="All tokens in the account and total value" hint="All tokens in the account and total value"
> >
Tokens Tokens
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value py={ addressQuery.data ? 0 : undefined }> <DetailedInfo.ItemValue py={ addressQuery.data ? 0 : undefined }>
{ addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box>0</Box> } { addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box>0</Box> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ (config.features.multichainButton.isEnabled || (data.exchange_rate && data.has_tokens)) && ( { (config.features.multichainButton.isEnabled || (data.exchange_rate && data.has_tokens)) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Total net worth in USD of all tokens for the address" hint="Total net worth in USD of all tokens for the address"
isLoading={ addressQuery.isPlaceholderData } isLoading={ addressQuery.isPlaceholderData }
> >
Net worth Net worth
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value alignSelf="center" py={ 0 }> <DetailedInfo.ItemValue alignSelf="center" py={ 0 }>
<AddressNetWorth addressData={ addressQuery.data } addressHash={ addressHash } isLoading={ addressQuery.isPlaceholderData }/> <AddressNetWorth addressData={ addressQuery.data } addressHash={ addressHash } isLoading={ addressQuery.isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) )
} }
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Number of transactions related to this address" hint="Number of transactions related to this address"
isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData } isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
> >
Transactions Transactions
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ addressQuery.data ? ( { addressQuery.data ? (
<AddressCounterItem <AddressCounterItem
prop="transactions_count" prop="transactions_count"
...@@ -220,17 +220,17 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => { ...@@ -220,17 +220,17 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
/> />
) : ) :
0 } 0 }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.has_token_transfers && ( { data.has_token_transfers && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Number of transfers to/from this address" hint="Number of transfers to/from this address"
isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData } isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
> >
Transfers Transfers
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ addressQuery.data ? ( { addressQuery.data ? (
<AddressCounterItem <AddressCounterItem
prop="token_transfers_count" prop="token_transfers_count"
...@@ -242,19 +242,19 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => { ...@@ -242,19 +242,19 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
/> />
) : ) :
0 } 0 }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ countersQuery.data?.gas_usage_count && ( { countersQuery.data?.gas_usage_count && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Gas used by the address" hint="Gas used by the address"
isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData } isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
> >
Gas used Gas used
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ addressQuery.data ? ( { addressQuery.data ? (
<AddressCounterItem <AddressCounterItem
prop="gas_usage_count" prop="gas_usage_count"
...@@ -272,19 +272,19 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => { ...@@ -272,19 +272,19 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
address={ data.hash } address={ data.hash }
/> />
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.has_validated_blocks && ( { data.has_validated_blocks && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ `Number of blocks ${ getNetworkValidationActionText() } by this ${ getNetworkValidatorTitle() }` } hint={ `Number of blocks ${ getNetworkValidationActionText() } by this ${ getNetworkValidatorTitle() }` }
isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData } isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
> >
{ `Blocks ${ getNetworkValidationActionText() }` } { `Blocks ${ getNetworkValidationActionText() }` }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ addressQuery.data ? ( { addressQuery.data ? (
<AddressCounterItem <AddressCounterItem
prop="validations_count" prop="validations_count"
...@@ -296,28 +296,28 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => { ...@@ -296,28 +296,28 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
/> />
) : ) :
0 } 0 }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.block_number_balance_updated_at && ( { data.block_number_balance_updated_at && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Block number in which the address was updated" hint="Block number in which the address was updated"
isLoading={ addressQuery.isPlaceholderData } isLoading={ addressQuery.isPlaceholderData }
> >
Last balance update Last balance update
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<BlockEntity <BlockEntity
number={ data.block_number_balance_updated_at } number={ data.block_number_balance_updated_at }
isLoading={ addressQuery.isPlaceholderData } isLoading={ addressQuery.isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsSponsoredItem isLoading={ addressQuery.isPlaceholderData }/> <DetailedInfoSponsoredItem isLoading={ addressQuery.isPlaceholderData }/>
</Grid> </Grid>
</> </>
); );
......
ui/address/details/AddressAlternativeFormat.tsx
View file @ 1f8e6709
...@@ -3,7 +3,7 @@ import React from 'react'; ...@@ -3,7 +3,7 @@ import React from 'react';
import config from 'configs/app'; import config from 'configs/app';
import { BECH_32_SEPARATOR, toBech32Address } from 'lib/address/bech32'; import { BECH_32_SEPARATOR, toBech32Address } from 'lib/address/bech32';
import { useSettingsContext } from 'lib/contexts/settings'; import { useSettingsContext } from 'lib/contexts/settings';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
interface Props { interface Props {
...@@ -24,13 +24,13 @@ const AddressAlternativeFormat = ({ isLoading, addressHash }: Props) => { ...@@ -24,13 +24,13 @@ const AddressAlternativeFormat = ({ isLoading, addressHash }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ hint } hint={ hint }
isLoading={ isLoading } isLoading={ isLoading }
> >
{ label } { label }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressEntity <AddressEntity
address={{ hash: altHash }} address={{ hash: altHash }}
isLoading={ isLoading } isLoading={ isLoading }
...@@ -38,7 +38,7 @@ const AddressAlternativeFormat = ({ isLoading, addressHash }: Props) => { ...@@ -38,7 +38,7 @@ const AddressAlternativeFormat = ({ isLoading, addressHash }: Props) => {
noLink noLink
noAltHash noAltHash
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/address/details/AddressBalance.tsx
View file @ 1f8e6709
...@@ -10,7 +10,7 @@ import useSocketChannel from 'lib/socket/useSocketChannel'; ...@@ -10,7 +10,7 @@ import useSocketChannel from 'lib/socket/useSocketChannel';
import useSocketMessage from 'lib/socket/useSocketMessage'; import useSocketMessage from 'lib/socket/useSocketMessage';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import CurrencyValue from 'ui/shared/CurrencyValue'; import CurrencyValue from 'ui/shared/CurrencyValue';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import NativeTokenIcon from 'ui/shared/NativeTokenIcon'; import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
interface Props { interface Props {
...@@ -67,13 +67,13 @@ const AddressBalance = ({ data, isLoading }: Props) => { ...@@ -67,13 +67,13 @@ const AddressBalance = ({ data, isLoading }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ `${ currencyUnits.ether } balance` } hint={ `${ currencyUnits.ether } balance` }
isLoading={ isLoading } isLoading={ isLoading }
> >
Balance Balance
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value alignSelf="center" flexWrap="nowrap"> <DetailedInfo.ItemValue alignSelf="center" flexWrap="nowrap">
<NativeTokenIcon boxSize={ 6 } mr={ 2 } isLoading={ isLoading }/> <NativeTokenIcon boxSize={ 6 } mr={ 2 } isLoading={ isLoading }/>
<CurrencyValue <CurrencyValue
value={ data.coin_balance || '0' } value={ data.coin_balance || '0' }
...@@ -85,7 +85,7 @@ const AddressBalance = ({ data, isLoading }: Props) => { ...@@ -85,7 +85,7 @@ const AddressBalance = ({ data, isLoading }: Props) => {
flexWrap="wrap" flexWrap="wrap"
isLoading={ isLoading } isLoading={ isLoading }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/address/details/AddressImplementations.tsx
View file @ 1f8e6709
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import type { AddressImplementation } from 'types/api/addressParams'; import type { AddressImplementation } from 'types/api/addressParams';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
interface Props { interface Props {
...@@ -16,13 +16,13 @@ const AddressImplementations = ({ data, isLoading }: Props) => { ...@@ -16,13 +16,13 @@ const AddressImplementations = ({ data, isLoading }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ `Implementation${ hasManyItems ? 's' : '' } address${ hasManyItems ? 'es' : '' } of the proxy contract` } hint={ `Implementation${ hasManyItems ? 's' : '' } address${ hasManyItems ? 'es' : '' } of the proxy contract` }
isLoading={ isLoading } isLoading={ isLoading }
hasScroll={ hasScroll } hasScroll={ hasScroll }
> >
{ `Implementation${ hasManyItems ? 's' : '' }` } { `Implementation${ hasManyItems ? 's' : '' }` }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.ValueWithScroll <DetailsInfoItem.ValueWithScroll
gradientHeight={ 48 } gradientHeight={ 48 }
onScrollVisibilityChange={ setHasScroll } onScrollVisibilityChange={ setHasScroll }
......
ui/address/details/AddressNameInfo.tsx
View file @ 1f8e6709
...@@ -3,7 +3,7 @@ import React from 'react'; ...@@ -3,7 +3,7 @@ import React from 'react';
import type { Address } from 'types/api/address'; import type { Address } from 'types/api/address';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity';
interface Props { interface Props {
...@@ -15,20 +15,20 @@ const AddressNameInfo = ({ data, isLoading }: Props) => { ...@@ -15,20 +15,20 @@ const AddressNameInfo = ({ data, isLoading }: Props) => {
if (data.token) { if (data.token) {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Token name and symbol" hint="Token name and symbol"
isLoading={ isLoading } isLoading={ isLoading }
> >
Token name Token name
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TokenEntity <TokenEntity
token={ data.token } token={ data.token }
isLoading={ isLoading } isLoading={ isLoading }
noIcon noIcon
noCopy noCopy
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
} }
...@@ -36,17 +36,17 @@ const AddressNameInfo = ({ data, isLoading }: Props) => { ...@@ -36,17 +36,17 @@ const AddressNameInfo = ({ data, isLoading }: Props) => {
if (data.is_contract && data.name) { if (data.is_contract && data.name) {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The name found in the source code of the Contract" hint="The name found in the source code of the Contract"
isLoading={ isLoading } isLoading={ isLoading }
> >
Contract name Contract name
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isLoading }> <Skeleton isLoaded={ !isLoading }>
{ data.name } { data.name }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
} }
...@@ -54,17 +54,17 @@ const AddressNameInfo = ({ data, isLoading }: Props) => { ...@@ -54,17 +54,17 @@ const AddressNameInfo = ({ data, isLoading }: Props) => {
if (data.name) { if (data.name) {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The name of the validator" hint="The name of the validator"
isLoading={ isLoading } isLoading={ isLoading }
> >
Validator name Validator name
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isLoading }> <Skeleton isLoaded={ !isLoading }>
{ data.name } { data.name }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
} }
......
ui/blob/BlobInfo.tsx
View file @ 1f8e6709
...@@ -5,9 +5,9 @@ import type { Blob } from 'types/api/blobs'; ...@@ -5,9 +5,9 @@ import type { Blob } from 'types/api/blobs';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem'; import DetailedInfoSponsoredItem from 'ui/shared/DetailedInfo/DetailedInfoSponsoredItem';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import BlobData from './BlobData'; import BlobData from './BlobData';
...@@ -34,75 +34,75 @@ const BlobInfo = ({ data, isLoading }: Props) => { ...@@ -34,75 +34,75 @@ const BlobInfo = ({ data, isLoading }: Props) => {
{ data.kzg_proof && ( { data.kzg_proof && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Zero knowledge proof. Allows for quick verification of commitment" hint="Zero knowledge proof. Allows for quick verification of commitment"
isLoading={ isLoading } isLoading={ isLoading }
> >
Proof Proof
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all" lineHeight={ 6 } my="-2px"> <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all" lineHeight={ 6 } my="-2px">
{ data.kzg_proof } { data.kzg_proof }
<CopyToClipboard text={ data.kzg_proof } isLoading={ isLoading }/> <CopyToClipboard text={ data.kzg_proof } isLoading={ isLoading }/>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.kzg_commitment && ( { data.kzg_commitment && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Commitment to the data in the blob" hint="Commitment to the data in the blob"
isLoading={ isLoading } isLoading={ isLoading }
> >
Commitment Commitment
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all" lineHeight={ 6 } my="-2px"> <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all" lineHeight={ 6 } my="-2px">
{ data.kzg_commitment } { data.kzg_commitment }
<CopyToClipboard text={ data.kzg_commitment } isLoading={ isLoading }/> <CopyToClipboard text={ data.kzg_commitment } isLoading={ isLoading }/>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.blob_data && ( { data.blob_data && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Blob size in bytes" hint="Blob size in bytes"
isLoading={ isLoading } isLoading={ isLoading }
> >
Size, bytes Size, bytes
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all"> <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all">
{ (data.blob_data.replace('0x', '').length / 2).toLocaleString() } { (data.blob_data.replace('0x', '').length / 2).toLocaleString() }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.blob_data && <DetailsInfoItemDivider/> } { data.blob_data && <DetailedInfo.ItemDivider/> }
{ data.transaction_hashes[0] && ( { data.transaction_hashes[0] && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Hash of the transaction with this blob" hint="Hash of the transaction with this blob"
isLoading={ isLoading } isLoading={ isLoading }
> >
Transaction hash Transaction hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxEntity hash={ data.transaction_hashes[0].transaction_hash } isLoading={ isLoading } noIcon noCopy={ false }/> <TxEntity hash={ data.transaction_hashes[0].transaction_hash } isLoading={ isLoading } noIcon noCopy={ false }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsSponsoredItem isLoading={ isLoading }/> <DetailedInfoSponsoredItem isLoading={ isLoading }/>
{ data.blob_data && ( { data.blob_data && (
<> <>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
<BlobData data={ data.blob_data } hash={ data.hash } isLoading={ isLoading }/> <BlobData data={ data.blob_data } hash={ data.hash } isLoading={ isLoading }/>
</> </>
) } ) }
......
ui/block/BlockDetails.tsx
View file @ 1f8e6709
import { Grid, GridItem, Text, Box } from '@chakra-ui/react'; import { GridItem, Text, Box } from '@chakra-ui/react';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import { capitalize } from 'es-toolkit'; import { capitalize } from 'es-toolkit';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
...@@ -24,9 +24,8 @@ import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails'; ...@@ -24,9 +24,8 @@ import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA'; import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
...@@ -149,19 +148,14 @@ const BlockDetails = ({ query }: Props) => { ...@@ -149,19 +148,14 @@ const BlockDetails = ({ query }: Props) => {
})(); })();
return ( return (
<Grid <DetailedInfo.Container templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }} >
columnGap={ 8 } <DetailedInfo.ItemLabel
rowGap={{ base: 3, lg: 3 }}
templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
overflow="hidden"
>
<DetailsInfoItem.Label
hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain" hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
{ blockTypeLabel } height { blockTypeLabel } height
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
{ data.height } { data.height }
</Skeleton> </Skeleton>
...@@ -174,47 +168,47 @@ const BlockDetails = ({ query }: Props) => { ...@@ -174,47 +168,47 @@ const BlockDetails = ({ query }: Props) => {
isPrevDisabled={ data.height === 0 } isPrevDisabled={ data.height === 0 }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && ( { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The most recent L1 block height as of this L2 block" hint="The most recent L1 block height as of this L2 block"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
L1 block height L1 block height
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<BlockEntityL1 isLoading={ isPlaceholderData } number={ data.arbitrum.l1_block_height }/> <BlockEntityL1 isLoading={ isPlaceholderData } number={ data.arbitrum.l1_block_height }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && !config.UI.views.block.hiddenFields?.batch && ( { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && !config.UI.views.block.hiddenFields?.batch && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Batch number" hint="Batch number"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Batch Batch
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.arbitrum.batch_number ? { data.arbitrum.batch_number ?
<BatchEntityL2 isLoading={ isPlaceholderData } number={ data.arbitrum.batch_number }/> : <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.arbitrum.batch_number }/> :
<Skeleton loading={ isPlaceholderData }>Pending</Skeleton> } <Skeleton loading={ isPlaceholderData }>Pending</Skeleton> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.optimism && !config.UI.views.block.hiddenFields?.batch && ( { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.optimism && !config.UI.views.block.hiddenFields?.batch && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Batch number" hint="Batch number"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Batch Batch
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value columnGap={ 3 }> <DetailedInfo.ItemValue columnGap={ 3 }>
{ data.optimism.internal_id ? { data.optimism.internal_id ?
<BatchEntityL2 isLoading={ isPlaceholderData } number={ data.optimism.internal_id }/> : <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.optimism.internal_id }/> :
<Skeleton loading={ isPlaceholderData }>Pending</Skeleton> } <Skeleton loading={ isPlaceholderData }>Pending</Skeleton> }
...@@ -224,88 +218,88 @@ const BlockDetails = ({ query }: Props) => { ...@@ -224,88 +218,88 @@ const BlockDetails = ({ query }: Props) => {
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Size of the block in bytes" hint="Size of the block in bytes"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Size Size
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
{ data.size.toLocaleString() } { data.size.toLocaleString() }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Date & time at which block was produced." hint="Date & time at which block was produced."
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Timestamp Timestamp
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/> <DetailedInfoTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The number of transactions in the block" hint="The number of transactions in the block"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Transactions Transactions
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
{ txsNum } { txsNum }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ config.features.beaconChain.isEnabled && Boolean(data.withdrawals_count) && ( { config.features.beaconChain.isEnabled && Boolean(data.withdrawals_count) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The number of beacon withdrawals in the block" hint="The number of beacon withdrawals in the block"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Withdrawals Withdrawals
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
<Link href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'withdrawals' } }) }> <Link href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'withdrawals' } }) }>
{ data.withdrawals_count } withdrawal{ data.withdrawals_count === 1 ? '' : 's' } { data.withdrawals_count } withdrawal{ data.withdrawals_count === 1 ? '' : 's' }
</Link> </Link>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync && !config.UI.views.block.hiddenFields?.batch && ( { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync && !config.UI.views.block.hiddenFields?.batch && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Batch number" hint="Batch number"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Batch Batch
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.zksync.batch_number ? { data.zksync.batch_number ?
<BatchEntityL2 isLoading={ isPlaceholderData } number={ data.zksync.batch_number }/> : <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.zksync.batch_number }/> :
<Skeleton loading={ isPlaceholderData }>Pending</Skeleton> } <Skeleton loading={ isPlaceholderData }>Pending</Skeleton> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ !config.UI.views.block.hiddenFields?.L1_status && rollupFeature.isEnabled && { !config.UI.views.block.hiddenFields?.L1_status && rollupFeature.isEnabled &&
((rollupFeature.type === 'zkSync' && data.zksync) || (rollupFeature.type === 'arbitrum' && data.arbitrum)) && ((rollupFeature.type === 'zkSync' && data.zksync) || (rollupFeature.type === 'arbitrum' && data.arbitrum)) &&
( (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Status is the short interpretation of the batch lifecycle" hint="Status is the short interpretation of the batch lifecycle"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Status Status
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ rollupFeature.type === 'zkSync' && data.zksync && { rollupFeature.type === 'zkSync' && data.zksync &&
<VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isPlaceholderData }/> } <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isPlaceholderData }/> }
{ rollupFeature.type === 'arbitrum' && data.arbitrum && ( { rollupFeature.type === 'arbitrum' && data.arbitrum && (
...@@ -316,24 +310,24 @@ const BlockDetails = ({ query }: Props) => { ...@@ -316,24 +310,24 @@ const BlockDetails = ({ query }: Props) => {
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ !config.UI.views.block.hiddenFields?.miner && ( { !config.UI.views.block.hiddenFields?.miner && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="A block producer who successfully included the block onto the blockchain" hint="A block producer who successfully included the block onto the blockchain"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
{ verificationTitle } { verificationTitle }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressEntity <AddressEntity
address={ data.miner } address={ data.miner }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
...@@ -341,33 +335,33 @@ const BlockDetails = ({ query }: Props) => { ...@@ -341,33 +335,33 @@ const BlockDetails = ({ query }: Props) => {
(data.arbitrum?.commitment_transaction.hash || data.arbitrum?.confirmation_transaction.hash) && (data.arbitrum?.commitment_transaction.hash || data.arbitrum?.confirmation_transaction.hash) &&
( (
<> <>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
{ data.arbitrum?.commitment_transaction.hash && ( { data.arbitrum?.commitment_transaction.hash && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L1 transaction containing this batch commitment" hint="L1 transaction containing this batch commitment"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Commitment tx Commitment tx
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxEntityL1 hash={ data.arbitrum?.commitment_transaction.hash } isLoading={ isPlaceholderData }/> <TxEntityL1 hash={ data.arbitrum?.commitment_transaction.hash } isLoading={ isPlaceholderData }/>
{ data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> } { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.arbitrum?.confirmation_transaction.hash && ( { data.arbitrum?.confirmation_transaction.hash && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L1 transaction containing confirmation of this batch" hint="L1 transaction containing confirmation of this batch"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Confirmation tx Confirmation tx
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxEntityL1 hash={ data.arbitrum?.confirmation_transaction.hash } isLoading={ isPlaceholderData }/> <TxEntityL1 hash={ data.arbitrum?.confirmation_transaction.hash } isLoading={ isPlaceholderData }/>
{ data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> } { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
</> </>
...@@ -375,7 +369,7 @@ const BlockDetails = ({ query }: Props) => { ...@@ -375,7 +369,7 @@ const BlockDetails = ({ query }: Props) => {
{ !rollupFeature.isEnabled && !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && ( { !rollupFeature.isEnabled && !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ hint={
`For each block, the ${ validatorTitle } is rewarded with a finite amount of ${ config.chain.currency.symbol || 'native token' } `For each block, the ${ validatorTitle } is rewarded with a finite amount of ${ config.chain.currency.symbol || 'native token' }
on top of the fees paid for all transactions in the block` on top of the fees paid for all transactions in the block`
...@@ -383,13 +377,13 @@ const BlockDetails = ({ query }: Props) => { ...@@ -383,13 +377,13 @@ const BlockDetails = ({ query }: Props) => {
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Block reward Block reward
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value columnGap={ 1 }> <DetailedInfo.ItemValue columnGap={ 1 }>
<Skeleton loading={ isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
{ totalReward.dividedBy(WEI).toFixed() } { currencyUnits.ether } { totalReward.dividedBy(WEI).toFixed() } { currencyUnits.ether }
</Skeleton> </Skeleton>
{ rewardBreakDown } { rewardBreakDown }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
...@@ -397,45 +391,45 @@ const BlockDetails = ({ query }: Props) => { ...@@ -397,45 +391,45 @@ const BlockDetails = ({ query }: Props) => {
?.filter(({ type }) => type !== 'Validator Reward' && type !== 'Miner Reward') ?.filter(({ type }) => type !== 'Validator Reward' && type !== 'Miner Reward')
.map(({ type, reward }) => ( .map(({ type, reward }) => (
<React.Fragment key={ type }> <React.Fragment key={ type }>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ `Amount of distributed reward. ${ capitalize(validatorTitle) }s receive a static block reward + Tx fees + uncle fees` } hint={ `Amount of distributed reward. ${ capitalize(validatorTitle) }s receive a static block reward + Tx fees + uncle fees` }
> >
{ type } { type }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ BigNumber(reward).dividedBy(WEI).toFixed() } { currencyUnits.ether } { BigNumber(reward).dividedBy(WEI).toFixed() } { currencyUnits.ether }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</React.Fragment> </React.Fragment>
)) ))
} }
{ typeof data.zilliqa?.view === 'number' && ( { typeof data.zilliqa?.view === 'number' && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The iteration of the consensus round in which the block was proposed" hint="The iteration of the consensus round in which the block was proposed"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
View View
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
{ data.zilliqa.view } { data.zilliqa.view }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
{ data.celo?.base_fee && <BlockDetailsBaseFeeCelo data={ data.celo.base_fee }/> } { data.celo?.base_fee && <BlockDetailsBaseFeeCelo data={ data.celo.base_fee }/> }
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The total gas amount used in the block and its percentage of gas filled in the block" hint="The total gas amount used in the block and its percentage of gas filled in the block"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Gas used Gas used
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
{ BigNumber(data.gas_used || 0).toFormat() } { BigNumber(data.gas_used || 0).toFormat() }
</Skeleton> </Skeleton>
...@@ -446,45 +440,45 @@ const BlockDetails = ({ query }: Props) => { ...@@ -446,45 +440,45 @@ const BlockDetails = ({ query }: Props) => {
ml={ 4 } ml={ 4 }
gasTarget={ data.gas_target_percentage || undefined } gasTarget={ data.gas_target_percentage || undefined }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Total gas limit provided by all transactions in the block" hint="Total gas limit provided by all transactions in the block"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Gas limit Gas limit
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
{ BigNumber(data.gas_limit).toFormat() } { BigNumber(data.gas_limit).toFormat() }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.minimum_gas_price && ( { data.minimum_gas_price && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The minimum gas price a transaction should have in order to be included in this block" hint="The minimum gas price a transaction should have in order to be included in this block"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Minimum gas price Minimum gas price
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
{ BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } { currencyUnits.gwei } { BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } { currencyUnits.gwei }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.base_fee_per_gas && ( { data.base_fee_per_gas && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion" hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Base fee per gas Base fee per gas
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ isPlaceholderData ? ( { isPlaceholderData ? (
<Skeleton loading={ isPlaceholderData } h="20px" maxW="380px" w="100%"/> <Skeleton loading={ isPlaceholderData } h="20px" maxW="380px" w="100%"/>
) : ( ) : (
...@@ -495,13 +489,13 @@ const BlockDetails = ({ query }: Props) => { ...@@ -495,13 +489,13 @@ const BlockDetails = ({ query }: Props) => {
</Text> </Text>
</> </>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ !config.UI.views.block.hiddenFields?.burnt_fees && !burntFees.isEqualTo(ZERO) && ( { !config.UI.views.block.hiddenFields?.burnt_fees && !burntFees.isEqualTo(ZERO) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ hint={
`Amount of ${ config.chain.currency.symbol || 'native token' } burned from transactions included in the block. `Amount of ${ config.chain.currency.symbol || 'native token' } burned from transactions included in the block.
Equals Block Base Fee per Gas * Gas Used` Equals Block Base Fee per Gas * Gas Used`
...@@ -509,8 +503,8 @@ const BlockDetails = ({ query }: Props) => { ...@@ -509,8 +503,8 @@ const BlockDetails = ({ query }: Props) => {
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Burnt fees Burnt fees
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/> <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
<Skeleton loading={ isPlaceholderData } ml={ 2 }> <Skeleton loading={ isPlaceholderData } ml={ 2 }>
{ burntFees.dividedBy(WEI).toFixed() } { currencyUnits.ether } { burntFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
...@@ -524,23 +518,23 @@ const BlockDetails = ({ query }: Props) => { ...@@ -524,23 +518,23 @@ const BlockDetails = ({ query }: Props) => {
/> />
</Tooltip> </Tooltip>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.priority_fee !== null && BigNumber(data.priority_fee).gt(ZERO) && ( { data.priority_fee !== null && BigNumber(data.priority_fee).gt(ZERO) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="User-defined tips sent to validator for transaction priority/inclusion" hint="User-defined tips sent to validator for transaction priority/inclusion"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Priority fee / Tip Priority fee / Tip
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isPlaceholderData }> <Skeleton loading={ isPlaceholderData }>
{ BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { currencyUnits.ether } { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { currencyUnits.ether }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
...@@ -555,12 +549,12 @@ const BlockDetails = ({ query }: Props) => { ...@@ -555,12 +549,12 @@ const BlockDetails = ({ query }: Props) => {
{ data.bitcoin_merged_mining_header && ( { data.bitcoin_merged_mining_header && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Merged-mining field: Bitcoin header" hint="Merged-mining field: Bitcoin header"
> >
Bitcoin merged mining header Bitcoin merged mining header
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexWrap="nowrap" flexWrap="nowrap"
alignSelf="flex-start" alignSelf="flex-start"
> >
...@@ -568,54 +562,54 @@ const BlockDetails = ({ query }: Props) => { ...@@ -568,54 +562,54 @@ const BlockDetails = ({ query }: Props) => {
<HashStringShortenDynamic hash={ data.bitcoin_merged_mining_header }/> <HashStringShortenDynamic hash={ data.bitcoin_merged_mining_header }/>
</Box> </Box>
<CopyToClipboard text={ data.bitcoin_merged_mining_header }/> <CopyToClipboard text={ data.bitcoin_merged_mining_header }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.bitcoin_merged_mining_coinbase_transaction && ( { data.bitcoin_merged_mining_coinbase_transaction && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Merged-mining field: Coinbase transaction" hint="Merged-mining field: Coinbase transaction"
> >
Bitcoin merged mining coinbase transaction Bitcoin merged mining coinbase transaction
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<RawDataSnippet <RawDataSnippet
data={ data.bitcoin_merged_mining_coinbase_transaction } data={ data.bitcoin_merged_mining_coinbase_transaction }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
showCopy={ false } showCopy={ false }
textareaMaxHeight="100px" textareaMaxHeight="100px"
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.bitcoin_merged_mining_merkle_proof && ( { data.bitcoin_merged_mining_merkle_proof && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Merged-mining field: Merkle proof" hint="Merged-mining field: Merkle proof"
> >
Bitcoin merged mining Merkle proof Bitcoin merged mining Merkle proof
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<RawDataSnippet <RawDataSnippet
data={ data.bitcoin_merged_mining_merkle_proof } data={ data.bitcoin_merged_mining_merkle_proof }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
showCopy={ false } showCopy={ false }
textareaMaxHeight="100px" textareaMaxHeight="100px"
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.hash_for_merged_mining && ( { data.hash_for_merged_mining && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Merged-mining field: Rootstock block header hash" hint="Merged-mining field: Rootstock block header hash"
> >
Hash for merged mining Hash for merged mining
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexWrap="nowrap" flexWrap="nowrap"
alignSelf="flex-start" alignSelf="flex-start"
> >
...@@ -623,54 +617,54 @@ const BlockDetails = ({ query }: Props) => { ...@@ -623,54 +617,54 @@ const BlockDetails = ({ query }: Props) => {
<HashStringShortenDynamic hash={ data.hash_for_merged_mining }/> <HashStringShortenDynamic hash={ data.hash_for_merged_mining }/>
</Box> </Box>
<CopyToClipboard text={ data.hash_for_merged_mining }/> <CopyToClipboard text={ data.hash_for_merged_mining }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ `Block difficulty for ${ validatorTitle }, used to calibrate block generation time` } hint={ `Block difficulty for ${ validatorTitle }, used to calibrate block generation time` }
> >
Difficulty Difficulty
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value overflow="hidden"> <DetailedInfo.ItemValue overflow="hidden">
<HashStringShortenDynamic hash={ BigNumber(data.difficulty).toFormat() }/> <HashStringShortenDynamic hash={ BigNumber(data.difficulty).toFormat() }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.total_difficulty && ( { data.total_difficulty && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Total difficulty of the chain until this block" hint="Total difficulty of the chain until this block"
> >
Total difficulty Total difficulty
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value overflow="hidden"> <DetailedInfo.ItemValue overflow="hidden">
<HashStringShortenDynamic hash={ BigNumber(data.total_difficulty).toFormat() }/> <HashStringShortenDynamic hash={ BigNumber(data.total_difficulty).toFormat() }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The SHA256 hash of the block" hint="The SHA256 hash of the block"
> >
Hash Hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value flexWrap="nowrap"> <DetailedInfo.ItemValue flexWrap="nowrap">
<Box overflow="hidden" > <Box overflow="hidden" >
<HashStringShortenDynamic hash={ data.hash }/> <HashStringShortenDynamic hash={ data.hash }/>
</Box> </Box>
<CopyToClipboard text={ data.hash }/> <CopyToClipboard text={ data.hash }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.height > 0 && ( { data.height > 0 && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The hash of the block from which this block was generated" hint="The hash of the block from which this block was generated"
> >
Parent hash Parent hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value flexWrap="nowrap"> <DetailedInfo.ItemValue flexWrap="nowrap">
<Link <Link
href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.height - 1) } }) } href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.height - 1) } }) }
overflow="hidden" overflow="hidden"
...@@ -681,60 +675,60 @@ const BlockDetails = ({ query }: Props) => { ...@@ -681,60 +675,60 @@ const BlockDetails = ({ query }: Props) => {
/> />
</Link> </Link>
<CopyToClipboard text={ data.parent_hash }/> <CopyToClipboard text={ data.parent_hash }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && ( { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The cumulative number of L2 to L1 transactions as of this block" hint="The cumulative number of L2 to L1 transactions as of this block"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Send count Send count
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.arbitrum.send_count.toLocaleString() } { data.arbitrum.send_count.toLocaleString() }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The root of the Merkle accumulator representing all L2 to L1 transactions as of this block" hint="The root of the Merkle accumulator representing all L2 to L1 transactions as of this block"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Send root Send root
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.arbitrum.send_root } { data.arbitrum.send_root }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The number of delayed L1 to L2 messages read as of this block" hint="The number of delayed L1 to L2 messages read as of this block"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Delayed messages Delayed messages
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.arbitrum.delayed_messages.toLocaleString() } { data.arbitrum.delayed_messages.toLocaleString() }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ !config.UI.views.block.hiddenFields?.nonce && ( { !config.UI.views.block.hiddenFields?.nonce && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Block nonce is a value used during mining to demonstrate proof of work for a block" hint="Block nonce is a value used during mining to demonstrate proof of work for a block"
> >
Nonce Nonce
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.nonce } { data.nonce }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.zilliqa && ( { data.zilliqa && (
<> <>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
<BlockDetailsZilliqaQuorumCertificate data={ data.zilliqa?.quorum_certificate }/> <BlockDetailsZilliqaQuorumCertificate data={ data.zilliqa?.quorum_certificate }/>
{ data.zilliqa?.aggregate_quorum_certificate && ( { data.zilliqa?.aggregate_quorum_certificate && (
<> <>
...@@ -746,7 +740,7 @@ const BlockDetails = ({ query }: Props) => { ...@@ -746,7 +740,7 @@ const BlockDetails = ({ query }: Props) => {
) } ) }
</CutLinkDetails> </CutLinkDetails>
</Grid> </DetailedInfo.Container>
); );
}; };
......
ui/block/details/BlockDetailsBaseFeeCelo.tsx
View file @ 1f8e6709
...@@ -9,8 +9,8 @@ import type { TokenInfo } from 'types/api/token'; ...@@ -9,8 +9,8 @@ import type { TokenInfo } from 'types/api/token';
import { WEI, ZERO_ADDRESS } from 'lib/consts'; import { WEI, ZERO_ADDRESS } from 'lib/consts';
import { Link } from 'toolkit/chakra/link'; import { Link } from 'toolkit/chakra/link';
import AddressFromTo from 'ui/shared/address/AddressFromTo'; import AddressFromTo from 'ui/shared/address/AddressFromTo';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
...@@ -58,18 +58,18 @@ const BlockDetailsBaseFeeCelo = ({ data }: Props) => { ...@@ -58,18 +58,18 @@ const BlockDetailsBaseFeeCelo = ({ data }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The contract receiving the base fee, responsible for handling fee usage. This contract is controlled by governance process." hint="The contract receiving the base fee, responsible for handling fee usage. This contract is controlled by governance process."
> >
Base fee handler Base fee handler
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressEntity address={ data.recipient }/> <AddressEntity address={ data.recipient }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label hint={ totalFeeLabel }> <DetailedInfo.ItemLabel hint={ totalFeeLabel }>
Base fee total Base fee total
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value display="block"> <DetailedInfo.ItemValue display="block">
<Flex columnGap={ 2 }> <Flex columnGap={ 2 }>
{ totalBaseFee } { totalBaseFee }
<TokenEntity token={ data.token } noCopy onlySymbol/> <TokenEntity token={ data.token } noCopy onlySymbol/>
...@@ -86,8 +86,8 @@ const BlockDetailsBaseFeeCelo = ({ data }: Props) => { ...@@ -86,8 +86,8 @@ const BlockDetailsBaseFeeCelo = ({ data }: Props) => {
)) } )) }
</Flex> </Flex>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
</> </>
); );
}; };
......
ui/block/details/BlockDetailsBlobInfo.tsx
View file @ 1f8e6709
...@@ -8,8 +8,8 @@ import { WEI, WEI_IN_GWEI, ZERO } from 'lib/consts'; ...@@ -8,8 +8,8 @@ import { WEI, WEI_IN_GWEI, ZERO } from 'lib/consts';
import { space } from 'lib/html-entities'; import { space } from 'lib/html-entities';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import { Tooltip } from 'toolkit/chakra/tooltip'; import { Tooltip } from 'toolkit/chakra/tooltip';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
import Utilization from 'ui/shared/Utilization/Utilization'; import Utilization from 'ui/shared/Utilization/Utilization';
...@@ -35,40 +35,40 @@ const BlockDetailsBlobInfo = ({ data }: Props) => { ...@@ -35,40 +35,40 @@ const BlockDetailsBlobInfo = ({ data }: Props) => {
{ data.blob_gas_price && ( { data.blob_gas_price && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
hint="Price per unit of gas used for for blob deployment. Blob gas is independent of normal gas. Both gas prices can affect the priority of transaction execution." hint="Price per unit of gas used for for blob deployment. Blob gas is independent of normal gas. Both gas prices can affect the priority of transaction execution."
> >
Blob gas price Blob gas price
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Text>{ BigNumber(data.blob_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text> <Text>{ BigNumber(data.blob_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
<Text color="text.secondary" whiteSpace="pre"> <Text color="text.secondary" whiteSpace="pre">
{ space }({ BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) { space }({ BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
</Text> </Text>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.blob_gas_used && ( { data.blob_gas_used && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Actual amount of gas used by the blobs in this block" hint="Actual amount of gas used by the blobs in this block"
> >
Blob gas used Blob gas used
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Text>{ BigNumber(data.blob_gas_used).toFormat() }</Text> <Text>{ BigNumber(data.blob_gas_used).toFormat() }</Text>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ !burntBlobFees.isEqualTo(ZERO) && ( { !burntBlobFees.isEqualTo(ZERO) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ `Amount of ${ currencyUnits.ether } used for blobs in this block` } hint={ `Amount of ${ currencyUnits.ether } used for blobs in this block` }
> >
Blob burnt fees Blob burnt fees
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<IconSvg name="flame" boxSize={ 5 } color="gray.500" mr={ 2 }/> <IconSvg name="flame" boxSize={ 5 } color="gray.500" mr={ 2 }/>
{ burntBlobFees.dividedBy(WEI).toFixed() } { currencyUnits.ether } { burntBlobFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
{ !blobFees.isEqualTo(ZERO) && ( { !blobFees.isEqualTo(ZERO) && (
...@@ -76,25 +76,25 @@ const BlockDetailsBlobInfo = ({ data }: Props) => { ...@@ -76,25 +76,25 @@ const BlockDetailsBlobInfo = ({ data }: Props) => {
<Utilization ml={ 4 } value={ burntBlobFees.dividedBy(blobFees).toNumber() }/> <Utilization ml={ 4 } value={ burntBlobFees.dividedBy(blobFees).toNumber() }/>
</Tooltip> </Tooltip>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.excess_blob_gas && ( { data.excess_blob_gas && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="A running total of blob gas consumed in excess of the target, prior to the block." hint="A running total of blob gas consumed in excess of the target, prior to the block."
> >
Excess blob gas Excess blob gas
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Text>{ BigNumber(data.excess_blob_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text> <Text>{ BigNumber(data.excess_blob_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
<Text color="text.secondary" whiteSpace="pre"> <Text color="text.secondary" whiteSpace="pre">
{ space }({ BigNumber(data.excess_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) { space }({ BigNumber(data.excess_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
</Text> </Text>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
</> </>
); );
}; };
......
ui/block/details/BlockDetailsZilliqaQuorumCertificate.tsx
View file @ 1f8e6709
...@@ -5,8 +5,8 @@ import type { ZilliqaNestedQuorumCertificate, ZilliqaQuorumCertificate } from 't ...@@ -5,8 +5,8 @@ import type { ZilliqaNestedQuorumCertificate, ZilliqaQuorumCertificate } from 't
import { apos, ndash } from 'lib/html-entities'; import { apos, ndash } from 'lib/html-entities';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import Hint from 'ui/shared/Hint'; import Hint from 'ui/shared/Hint';
function formatSigners(signers: Array<number>) { function formatSigners(signers: Array<number>) {
...@@ -39,12 +39,12 @@ const BlockDetailsZilliqaQuorumCertificate = ({ data }: Props) => { ...@@ -39,12 +39,12 @@ const BlockDetailsZilliqaQuorumCertificate = ({ data }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ hint() } hint={ hint() }
> >
{ data.nested_quorum_certificates ? 'Aggregate quorum certificate' : 'Quorum certificate' } { data.nested_quorum_certificates ? 'Aggregate quorum certificate' : 'Quorum certificate' }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value rowGap={ 0 }> <DetailedInfo.ItemValue rowGap={ 0 }>
<Grid <Grid
fontSize="sm" fontSize="sm"
lineHeight={ 5 } lineHeight={ 5 }
...@@ -53,13 +53,13 @@ const BlockDetailsZilliqaQuorumCertificate = ({ data }: Props) => { ...@@ -53,13 +53,13 @@ const BlockDetailsZilliqaQuorumCertificate = ({ data }: Props) => {
> >
<GridItem fontWeight={ 600 }>View</GridItem> <GridItem fontWeight={ 600 }>View</GridItem>
<GridItem>{ data.view }</GridItem> <GridItem>{ data.view }</GridItem>
<DetailsInfoItemDivider my={{ base: 2, lg: 2 }} colSpan={ 2 }/> <DetailedInfo.ItemDivider my={{ base: 2, lg: 2 }} colSpan={ 2 }/>
<GridItem fontWeight={ 600 }>Signature</GridItem> <GridItem fontWeight={ 600 }>Signature</GridItem>
<GridItem whiteSpace="pre-wrap" wordBreak="break-word" display="flex" alignItems="flex-start" columnGap={ 5 }> <GridItem whiteSpace="pre-wrap" wordBreak="break-word" display="flex" alignItems="flex-start" columnGap={ 5 }>
{ data.signature } { data.signature }
<CopyToClipboard text={ data.signature }/> <CopyToClipboard text={ data.signature }/>
</GridItem> </GridItem>
<DetailsInfoItemDivider my={{ base: 2, lg: 2 }} colSpan={ 2 }/> <DetailedInfo.ItemDivider my={{ base: 2, lg: 2 }} colSpan={ 2 }/>
<GridItem fontWeight={ 600 }>Signers</GridItem> <GridItem fontWeight={ 600 }>Signers</GridItem>
<GridItem >{ formatSigners(data.signers) }</GridItem> <GridItem >{ formatSigners(data.signers) }</GridItem>
</Grid> </Grid>
...@@ -123,7 +123,7 @@ const BlockDetailsZilliqaQuorumCertificate = ({ data }: Props) => { ...@@ -123,7 +123,7 @@ const BlockDetailsZilliqaQuorumCertificate = ({ data }: Props) => {
</Accordion> </Accordion>
</> </>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/block/epochRewards/BlockEpochRewardsDistribution.tsx
View file @ 1f8e6709
...@@ -4,7 +4,7 @@ import React from 'react'; ...@@ -4,7 +4,7 @@ import React from 'react';
import type { BlockEpoch } from 'types/api/block'; import type { BlockEpoch } from 'types/api/block';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet'; import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet';
interface Props { interface Props {
...@@ -28,41 +28,41 @@ const BlockEpochRewardsDistribution = ({ data, isLoading }: Props) => { ...@@ -28,41 +28,41 @@ const BlockEpochRewardsDistribution = ({ data, isLoading }: Props) => {
> >
{ data.distribution.community_transfer && ( { data.distribution.community_transfer && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Funds allocation to support Celo projects and community initiatives" hint="Funds allocation to support Celo projects and community initiatives"
isLoading={ isLoading } isLoading={ isLoading }
> >
Community fund Community fund
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TokenTransferSnippet data={ data.distribution.community_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/> <TokenTransferSnippet data={ data.distribution.community_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.distribution.carbon_offsetting_transfer && ( { data.distribution.carbon_offsetting_transfer && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Funds allocation to support projects that make Celo carbon-negative" hint="Funds allocation to support projects that make Celo carbon-negative"
isLoading={ isLoading } isLoading={ isLoading }
> >
Carbon offset fund Carbon offset fund
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TokenTransferSnippet data={ data.distribution.carbon_offsetting_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/> <TokenTransferSnippet data={ data.distribution.carbon_offsetting_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.distribution.reserve_bolster_transfer && ( { data.distribution.reserve_bolster_transfer && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Funds allocation to strengthen Celo’s reserve for network stability and security" hint="Funds allocation to strengthen Celo’s reserve for network stability and security"
isLoading={ isLoading } isLoading={ isLoading }
> >
Reserve bolster Reserve bolster
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TokenTransferSnippet data={ data.distribution.reserve_bolster_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/> <TokenTransferSnippet data={ data.distribution.reserve_bolster_transfer } isLoading={ isLoading } noAddressIcons={ isMobile }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
</Grid> </Grid>
......
ui/nameDomain/NameDomainDetails.tsx
View file @ 1f8e6709
...@@ -11,7 +11,7 @@ import type { ResourceError } from 'lib/api/resources'; ...@@ -11,7 +11,7 @@ import type { ResourceError } from 'lib/api/resources';
import dayjs from 'lib/date/dayjs'; import dayjs from 'lib/date/dayjs';
import stripTrailingSlash from 'lib/stripTrailingSlash'; import stripTrailingSlash from 'lib/stripTrailingSlash';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import NftEntity from 'ui/shared/entities/nft/NftEntity'; import NftEntity from 'ui/shared/entities/nft/NftEntity';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
...@@ -37,31 +37,31 @@ const NameDomainDetails = ({ query }: Props) => { ...@@ -37,31 +37,31 @@ const NameDomainDetails = ({ query }: Props) => {
<Grid columnGap={ 8 } rowGap={ 3 } templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}> <Grid columnGap={ 8 } rowGap={ 3 } templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}>
{ query.data?.registration_date && ( { query.data?.registration_date && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The date the name was registered" hint="The date the name was registered"
isLoading={ isLoading } isLoading={ isLoading }
> >
Registration date Registration date
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 }/> <IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 }/>
<Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="20px"> <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="20px">
{ dayjs(query.data.registration_date).format('llll') } { dayjs(query.data.registration_date).format('llll') }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ query.data?.expiry_date && ( { query.data?.expiry_date && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
hint="The date the name expires, upon which there is a grace period for the owner to renew. After grace period ends, the name is released to the market" hint="The date the name expires, upon which there is a grace period for the owner to renew. After grace period ends, the name is released to the market"
isLoading={ isLoading } isLoading={ isLoading }
> >
Expiration date Expiration date
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 } mt="-2px"/> <IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 } mt="-2px"/>
{ hasExpired && ( { hasExpired && (
<> <>
...@@ -78,37 +78,37 @@ const NameDomainDetails = ({ query }: Props) => { ...@@ -78,37 +78,37 @@ const NameDomainDetails = ({ query }: Props) => {
<Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline"> <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline">
<NameDomainExpiryStatus date={ query.data?.expiry_date }/> <NameDomainExpiryStatus date={ query.data?.expiry_date }/>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ query.data?.resolver_address && ( { query.data?.resolver_address && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The resolver contract provides information about a domain name" hint="The resolver contract provides information about a domain name"
isLoading={ isLoading } isLoading={ isLoading }
> >
Resolver Resolver
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
> >
<AddressEntity <AddressEntity
address={ query.data.resolver_address } address={ query.data.resolver_address }
isLoading={ isLoading } isLoading={ isLoading }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ query.data?.registrant && ( { query.data?.registrant && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The account that owns the domain name and has the rights to edit its ownership and records" hint="The account that owns the domain name and has the rights to edit its ownership and records"
isLoading={ isLoading } isLoading={ isLoading }
> >
Registrant Registrant
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
columnGap={ 2 } columnGap={ 2 }
flexWrap="nowrap" flexWrap="nowrap"
> >
...@@ -125,19 +125,19 @@ const NameDomainDetails = ({ query }: Props) => { ...@@ -125,19 +125,19 @@ const NameDomainDetails = ({ query }: Props) => {
<IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/> <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
</LinkInternal> </LinkInternal>
</Tooltip> </Tooltip>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ query.data?.owner && ( { query.data?.owner && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The account that owns the rights to edit the records of this domain name" hint="The account that owns the rights to edit the records of this domain name"
isLoading={ isLoading } isLoading={ isLoading }
> >
Owner Owner
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
columnGap={ 2 } columnGap={ 2 }
flexWrap="nowrap" flexWrap="nowrap"
> >
...@@ -154,19 +154,19 @@ const NameDomainDetails = ({ query }: Props) => { ...@@ -154,19 +154,19 @@ const NameDomainDetails = ({ query }: Props) => {
<IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/> <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
</LinkInternal> </LinkInternal>
</Tooltip> </Tooltip>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ query.data?.wrapped_owner && ( { query.data?.wrapped_owner && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Owner of this NFT domain in NameWrapper contract" hint="Owner of this NFT domain in NameWrapper contract"
isLoading={ isLoading } isLoading={ isLoading }
> >
Manager Manager
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
columnGap={ 2 } columnGap={ 2 }
flexWrap="nowrap" flexWrap="nowrap"
> >
...@@ -183,7 +183,7 @@ const NameDomainDetails = ({ query }: Props) => { ...@@ -183,7 +183,7 @@ const NameDomainDetails = ({ query }: Props) => {
<IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/> <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
</LinkInternal> </LinkInternal>
</Tooltip> </Tooltip>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
...@@ -199,31 +199,31 @@ const NameDomainDetails = ({ query }: Props) => { ...@@ -199,31 +199,31 @@ const NameDomainDetails = ({ query }: Props) => {
return ( return (
<React.Fragment key={ token.type }> <React.Fragment key={ token.type }>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ `The ${ token.type === bens.TokenType.WRAPPED_DOMAIN_TOKEN ? 'wrapped ' : '' }token ID of this domain name NFT` } hint={ `The ${ token.type === bens.TokenType.WRAPPED_DOMAIN_TOKEN ? 'wrapped ' : '' }token ID of this domain name NFT` }
isLoading={ isLoading } isLoading={ isLoading }
> >
{ token.type === bens.TokenType.WRAPPED_DOMAIN_TOKEN ? 'Wrapped token ID' : 'Token ID' } { token.type === bens.TokenType.WRAPPED_DOMAIN_TOKEN ? 'Wrapped token ID' : 'Token ID' }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
wordBreak="break-all" wordBreak="break-all"
whiteSpace="pre-wrap" whiteSpace="pre-wrap"
> >
<NftEntity { ...entityProps } hash={ token.contract_hash } id={ token.id } isLoading={ isLoading } noIcon/> <NftEntity { ...entityProps } hash={ token.contract_hash } id={ token.id } isLoading={ isLoading } noIcon/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</React.Fragment> </React.Fragment>
); );
}) } }) }
{ otherAddresses.length > 0 && ( { otherAddresses.length > 0 && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Other cryptocurrency addresses added to this domain name" hint="Other cryptocurrency addresses added to this domain name"
isLoading={ isLoading } isLoading={ isLoading }
> >
Other addresses Other addresses
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexDir="column" flexDir="column"
alignItems="flex-start" alignItems="flex-start"
> >
...@@ -238,7 +238,7 @@ const NameDomainDetails = ({ query }: Props) => { ...@@ -238,7 +238,7 @@ const NameDomainDetails = ({ query }: Props) => {
/> />
</Flex> </Flex>
)) } )) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
</Grid> </Grid>
......
ui/pool/PoolInfo.tsx
View file @ 1f8e6709
...@@ -4,8 +4,8 @@ import React from 'react'; ...@@ -4,8 +4,8 @@ import React from 'react';
import type { Pool } from 'types/api/pools'; import type { Pool } from 'types/api/pools';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem'; import DetailedInfoSponsoredItem from 'ui/shared/DetailedInfo/DetailedInfoSponsoredItem';
import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity';
type Props = { type Props = {
...@@ -21,13 +21,13 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => { ...@@ -21,13 +21,13 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => {
templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
overflow="hidden" overflow="hidden"
> >
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="The base token in a liquidity pool pair" hint="The base token in a liquidity pool pair"
> >
Base token Base token
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TokenEntity <TokenEntity
token={{ token={{
type: 'ERC-20', type: 'ERC-20',
...@@ -38,15 +38,15 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => { ...@@ -38,15 +38,15 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => {
}} }}
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="The quote token in a liquidity pool pair" hint="The quote token in a liquidity pool pair"
> >
Quote token Quote token
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TokenEntity <TokenEntity
token={{ token={{
type: 'ERC-20', type: 'ERC-20',
...@@ -57,57 +57,57 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => { ...@@ -57,57 +57,57 @@ const PoolInfo = ({ data, isPlaceholderData }: Props) => {
}} }}
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Fully Diluted Valuation: theoretical market cap if all tokens were in circulation" hint="Fully Diluted Valuation: theoretical market cap if all tokens were in circulation"
> >
FDV FDV
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
${ Number(data.fully_diluted_valuation_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) } ${ Number(data.fully_diluted_valuation_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Current market capitalization of the pool" hint="Current market capitalization of the pool"
> >
Market cap Market cap
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
${ Number(data.market_cap_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) } ${ Number(data.market_cap_usd).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Current liquidity of the pool" hint="Current liquidity of the pool"
> >
Liquidity Liquidity
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
${ Number(data.liquidity).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) } ${ Number(data.liquidity).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }) }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="DEX where the pool is traded" hint="DEX where the pool is traded"
> >
DEX DEX
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
{ data.dex.name } { data.dex.name }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsSponsoredItem isLoading={ isPlaceholderData }/> <DetailedInfoSponsoredItem isLoading={ isPlaceholderData }/>
</Grid> </Grid>
); );
}; };
......
ui/shared/ContainerWithScrollY.tsx
View file @ 1f8e6709
import type { FlexProps } from '@chakra-ui/react';
import { Flex, chakra } from '@chakra-ui/react'; import { Flex, chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
export type Props = { export interface Props extends FlexProps {
children: React.ReactNode;
gradientHeight: number; gradientHeight: number;
className?: string;
onScrollVisibilityChange?: (isVisible: boolean) => void; onScrollVisibilityChange?: (isVisible: boolean) => void;
}; };
const ContainerWithScrollY = ({ className, gradientHeight, children, onScrollVisibilityChange }: Props) => { const ContainerWithScrollY = ({ gradientHeight, children, onScrollVisibilityChange, ...rest }: Props) => {
const ref = React.useRef<HTMLDivElement>(null); const ref = React.useRef<HTMLDivElement>(null);
const [ hasScroll, setHasScroll ] = React.useState(false); const [ hasScroll, setHasScroll ] = React.useState(false);
...@@ -25,7 +24,6 @@ const ContainerWithScrollY = ({ className, gradientHeight, children, onScrollVis ...@@ -25,7 +24,6 @@ const ContainerWithScrollY = ({ className, gradientHeight, children, onScrollVis
return ( return (
<Flex <Flex
flexDirection="column" flexDirection="column"
className={ className }
overflowY={ hasScroll ? 'scroll' : 'auto' } overflowY={ hasScroll ? 'scroll' : 'auto' }
ref={ ref } ref={ ref }
_after={ hasScroll ? { _after={ hasScroll ? {
...@@ -39,6 +37,7 @@ const ContainerWithScrollY = ({ className, gradientHeight, children, onScrollVis ...@@ -39,6 +37,7 @@ const ContainerWithScrollY = ({ className, gradientHeight, children, onScrollVis
} : undefined } } : undefined }
pr={ hasScroll ? 5 : 0 } pr={ hasScroll ? 5 : 0 }
pb={ hasScroll ? `${ gradientHeight }px` : 0 } pb={ hasScroll ? `${ gradientHeight }px` : 0 }
{ ...rest }
> >
{ children } { children }
</Flex> </Flex>
......
ui/shared/DetailsInfoItem.tsx → ui/shared/DetailedInfo/DetailedInfo.tsx
View file @ 1f8e6709
import { chakra, GridItem, Flex, Text } from '@chakra-ui/react'; import type { GridItemProps, GridProps } from '@chakra-ui/react';
import { Flex, Grid, GridItem, Text } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { Skeleton } from 'toolkit/chakra/skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import * as ContainerWithScrollY from 'ui/shared/ContainerWithScrollY'; import * as ContainerWithScrollY from 'ui/shared/ContainerWithScrollY';
import Hint from 'ui/shared/Hint'; import Hint from 'ui/shared/Hint';
const LabelScrollText = () => ( export const Container = (props: GridProps) => {
<Text fontWeight={ 500 } color="text.secondary" fontSize="xs" className="note" textAlign="right"> return (
Scroll to see more <Grid
</Text> columnGap={ 8 }
); rowGap={{ base: 1, lg: 3 }}
templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}
{ ...props }
/>
);
};
interface LabelProps { interface ItemLabelProps extends GridItemProps {
hint?: React.ReactNode; hint?: React.ReactNode;
children: React.ReactNode; children: React.ReactNode;
isLoading?: boolean; isLoading?: boolean;
className?: string;
id?: string; id?: string;
hasScroll?: boolean; hasScroll?: boolean;
} }
const Label = chakra(({ hint, children, isLoading, id, className, hasScroll }: LabelProps) => { const ItemLabelScrollText = () => (
<Text fontWeight={ 500 } color="text.secondary" textStyle="xs" className="note" textAlign="right">
Scroll to see more
</Text>
);
export const ItemLabel = ({ hint, children, isLoading, id, hasScroll, ...rest }: ItemLabelProps) => {
return ( return (
<GridItem <GridItem
id={ id } id={ id }
className={ className }
py={ 1 } py={ 1 }
textStyle="md" textStyle="md"
_notFirst={{ mt: { base: 3, lg: 0 } }} _notFirst={{ mt: { base: 3, lg: 0 } }}
{ ...rest }
> >
<Flex columnGap={ 2 } alignItems="flex-start"> <Flex columnGap={ 2 } alignItems="flex-start">
{ hint && <Hint label={ hint } isLoading={ isLoading } my={{ lg: '2px' }}/> } { hint && <Hint label={ hint } isLoading={ isLoading } my="2px"/> }
<Skeleton loading={ isLoading } fontWeight={{ base: 700, lg: 500 }}> <Skeleton loading={ isLoading } fontWeight={{ base: 700, lg: 500 }}>
{ children } { children }
{ hasScroll && <LabelScrollText/> } { hasScroll && <ItemLabelScrollText/> }
</Skeleton> </Skeleton>
</Flex> </Flex>
</GridItem> </GridItem>
); );
}); };
interface ValueProps { interface ItemValueProps extends GridItemProps {
children: React.ReactNode; children: React.ReactNode;
className?: string;
} }
const Value = chakra(({ children, className }: ValueProps) => { export const ItemValue = ({ children, ...rest }: ItemValueProps) => {
return ( return (
<GridItem <GridItem
className={ className }
display="flex" display="flex"
alignItems="center" alignItems="center"
flexWrap="wrap" flexWrap="wrap"
...@@ -57,15 +66,16 @@ const Value = chakra(({ children, className }: ValueProps) => { ...@@ -57,15 +66,16 @@ const Value = chakra(({ children, className }: ValueProps) => {
py={ 1 } py={ 1 }
textStyle="md" textStyle="md"
whiteSpace="nowrap" whiteSpace="nowrap"
{ ...rest }
> >
{ children } { children }
</GridItem> </GridItem>
); );
}); };
const ValueWithScroll = chakra(({ children, gradientHeight, onScrollVisibilityChange, className }: ContainerWithScrollY.Props) => { export const ItemValueWithScroll = ({ children, gradientHeight, onScrollVisibilityChange, className }: ContainerWithScrollY.Props) => {
return ( return (
<Value position="relative"> <ItemValue position="relative">
<ContainerWithScrollY.default <ContainerWithScrollY.default
className={ className } className={ className }
gradientHeight={ gradientHeight } gradientHeight={ gradientHeight }
...@@ -73,12 +83,20 @@ const ValueWithScroll = chakra(({ children, gradientHeight, onScrollVisibilityCh ...@@ -73,12 +83,20 @@ const ValueWithScroll = chakra(({ children, gradientHeight, onScrollVisibilityCh
> >
{ children } { children }
</ContainerWithScrollY.default> </ContainerWithScrollY.default>
</Value> </ItemValue>
); );
}); };
export { export const ItemDivider = (props: GridItemProps) => {
Label, const { colSpan = { base: undefined, lg: 2 }, ...rest } = props;
Value, return (
ValueWithScroll, <GridItem
colSpan={ colSpan }
mt={{ base: 2, lg: 3 }}
mb={{ base: 0, lg: 3 }}
borderBottom="1px solid"
borderColor="border.divider"
{ ...rest }
/>
);
}; };
ui/shared/DetailsActionsWrapper.tsx → ui/shared/DetailedInfo/DetailedInfoActionsWrapper.tsx
View file @ 1f8e6709
import React from 'react'; import React from 'react';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from './DetailedInfo';
export const TX_ACTIONS_BLOCK_ID = 'tx-actions'; export const TX_ACTIONS_BLOCK_ID = 'tx-actions';
...@@ -10,20 +10,20 @@ type Props = { ...@@ -10,20 +10,20 @@ type Props = {
type: 'tx' | 'user_op'; type: 'tx' | 'user_op';
}; };
const DetailsActionsWrapper = ({ children, isLoading, type }: Props) => { const DetailedInfoActionsWrapper = ({ children, isLoading, type }: Props) => {
const [ hasScroll, setHasScroll ] = React.useState(false); const [ hasScroll, setHasScroll ] = React.useState(false);
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
id={ TX_ACTIONS_BLOCK_ID } id={ TX_ACTIONS_BLOCK_ID }
hint={ `Highlighted events of the ${ type === 'tx' ? 'transaction' : 'user operation' }` } hint={ `Highlighted events of the ${ type === 'tx' ? 'transaction' : 'user operation' }` }
isLoading={ isLoading } isLoading={ isLoading }
hasScroll={ hasScroll } hasScroll={ hasScroll }
> >
<span>{ `${ type === 'tx' ? 'Transaction' : 'User operation' } action` }</span> <span>{ `${ type === 'tx' ? 'Transaction' : 'User operation' } action` }</span>
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.ValueWithScroll <DetailedInfo.ItemValueWithScroll
gradientHeight={ 48 } gradientHeight={ 48 }
onScrollVisibilityChange={ setHasScroll } onScrollVisibilityChange={ setHasScroll }
alignItems="stretch" alignItems="stretch"
...@@ -32,10 +32,10 @@ const DetailsActionsWrapper = ({ children, isLoading, type }: Props) => { ...@@ -32,10 +32,10 @@ const DetailsActionsWrapper = ({ children, isLoading, type }: Props) => {
maxH="200px" maxH="200px"
> >
{ children } { children }
</DetailsInfoItem.ValueWithScroll> </DetailedInfo.ItemValueWithScroll>
</> </>
); );
}; };
export default React.memo(DetailsActionsWrapper); export default React.memo(DetailedInfoActionsWrapper);
ui/shared/DetailsSponsoredItem.tsx → ui/shared/DetailedInfo/DetailedInfoSponsoredItem.tsx
View file @ 1f8e6709
...@@ -5,7 +5,8 @@ import config from 'configs/app'; ...@@ -5,7 +5,8 @@ import config from 'configs/app';
import * as cookies from 'lib/cookies'; import * as cookies from 'lib/cookies';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import AdBanner from 'ui/shared/ad/AdBanner'; import AdBanner from 'ui/shared/ad/AdBanner';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
import * as DetailedInfo from './DetailedInfo';
const feature = config.features.adsBanner; const feature = config.features.adsBanner;
...@@ -13,7 +14,7 @@ interface Props { ...@@ -13,7 +14,7 @@ interface Props {
isLoading?: boolean; isLoading?: boolean;
} }
const DetailsSponsoredItem = ({ isLoading }: Props) => { const DetailedInfoSponsoredItem = ({ isLoading }: Props) => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED); const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED);
...@@ -31,17 +32,17 @@ const DetailsSponsoredItem = ({ isLoading }: Props) => { ...@@ -31,17 +32,17 @@ const DetailsSponsoredItem = ({ isLoading }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Sponsored banner advertisement" hint="Sponsored banner advertisement"
isLoading={ isLoading } isLoading={ isLoading }
> >
Sponsored Sponsored
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AdBanner isLoading={ isLoading }/> <AdBanner isLoading={ isLoading }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
export default React.memo(DetailsSponsoredItem); export default React.memo(DetailedInfoSponsoredItem);
ui/shared/DetailsTimestamp.tsx → ui/shared/DetailedInfo/DetailedInfoTimestamp.tsx
View file @ 1f8e6709
...@@ -11,7 +11,7 @@ type Props = { ...@@ -11,7 +11,7 @@ type Props = {
isLoading?: boolean; isLoading?: boolean;
}; };
const DetailsTimestamp = ({ timestamp, isLoading }: Props) => { const DetailedInfoTimestamp = ({ timestamp, isLoading }: Props) => {
return ( return (
<> <>
<IconSvg name="clock" boxSize={ 5 } color="gray.500" isLoading={ isLoading }/> <IconSvg name="clock" boxSize={ 5 } color="gray.500" isLoading={ isLoading }/>
...@@ -26,4 +26,4 @@ const DetailsTimestamp = ({ timestamp, isLoading }: Props) => { ...@@ -26,4 +26,4 @@ const DetailsTimestamp = ({ timestamp, isLoading }: Props) => {
); );
}; };
export default DetailsTimestamp; export default DetailedInfoTimestamp;
ui/shared/DetailsInfoItemDivider.tsx deleted 100644 → 0
View file @ 6c0e4529
import type { GridItemProps } from '@chakra-ui/react';
import { GridItem, chakra } from '@chakra-ui/react';
import React from 'react';
interface Props {
className?: string;
id?: string;
colSpan?: GridItemProps['colSpan'];
}
const DetailsInfoItemDivider = ({ className, id, colSpan }: Props) => {
return (
<GridItem
id={ id }
className={ className }
colSpan={ colSpan || { base: undefined, lg: 2 } }
mt={{ base: 2, lg: 3 }}
mb={{ base: 0, lg: 3 }}
borderBottom="1px solid"
borderColor="border.divider"
/>
);
};
export default chakra(DetailsInfoItemDivider);
ui/shared/Hint.tsx
View file @ 1f8e6709
...@@ -2,7 +2,6 @@ import { chakra } from '@chakra-ui/react'; ...@@ -2,7 +2,6 @@ import { chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { IconButton } from 'toolkit/chakra/icon-button'; import { IconButton } from 'toolkit/chakra/icon-button';
import { Skeleton } from 'toolkit/chakra/skeleton';
import type { TooltipProps } from 'toolkit/chakra/tooltip'; import type { TooltipProps } from 'toolkit/chakra/tooltip';
import { Tooltip } from 'toolkit/chakra/tooltip'; import { Tooltip } from 'toolkit/chakra/tooltip';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
...@@ -15,19 +14,6 @@ interface Props { ...@@ -15,19 +14,6 @@ interface Props {
} }
const Hint = ({ label, className, tooltipProps, isLoading }: Props) => { const Hint = ({ label, className, tooltipProps, isLoading }: Props) => {
// TODO @tom2drum check and remove this
// have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
// const { open, onOpen, onToggle, onClose } = useDisclosure();
// const handleClick = React.useCallback((event: React.MouseEvent) => {
// event.stopPropagation();
// onToggle();
// }, [ onToggle ]);
if (isLoading) {
return <Skeleton className={ className } boxSize={ 5 } borderRadius="sm"/>;
}
return ( return (
<Tooltip <Tooltip
content={ label } content={ label }
...@@ -39,9 +25,8 @@ const Hint = ({ label, className, tooltipProps, isLoading }: Props) => { ...@@ -39,9 +25,8 @@ const Hint = ({ label, className, tooltipProps, isLoading }: Props) => {
aria-label="hint" aria-label="hint"
boxSize={ 5 } boxSize={ 5 }
className={ className } className={ className }
// onMouseEnter={ onOpen } loading={ isLoading }
// onMouseLeave={ onClose } borderRadius="sm"
// onClick={ handleClick }
> >
<IconSvg name="info" w="100%" h="100%" color="icon_info" _hover={{ color: 'link.primary.hover' }}/> <IconSvg name="info" w="100%" h="100%" color="icon_info" _hover={{ color: 'link.primary.hover' }}/>
</IconButton> </IconButton>
......
ui/token/TokenDetails.tsx
View file @ 1f8e6709
...@@ -18,8 +18,8 @@ import type { TokenTabs } from 'ui/pages/Token'; ...@@ -18,8 +18,8 @@ import type { TokenTabs } from 'ui/pages/Token';
import AppActionButton from 'ui/shared/AppActionButton/AppActionButton'; import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
import useAppActionData from 'ui/shared/AppActionButton/useAppActionData'; import useAppActionData from 'ui/shared/AppActionButton/useAppActionData';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem'; import DetailedInfoSponsoredItem from 'ui/shared/DetailedInfo/DetailedInfoSponsoredItem';
import TruncatedValue from 'ui/shared/TruncatedValue'; import TruncatedValue from 'ui/shared/TruncatedValue';
import TokenNftMarketplaces from './TokenNftMarketplaces'; import TokenNftMarketplaces from './TokenNftMarketplaces';
...@@ -105,43 +105,43 @@ const TokenDetails = ({ tokenQuery }: Props) => { ...@@ -105,43 +105,43 @@ const TokenDetails = ({ tokenQuery }: Props) => {
> >
{ exchangeRate && ( { exchangeRate && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Price per token on the exchanges" hint="Price per token on the exchanges"
isLoading={ tokenQuery.isPlaceholderData } isLoading={ tokenQuery.isPlaceholderData }
> >
Price Price
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block"> <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
<span>{ `$${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) }` }</span> <span>{ `$${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) }` }</span>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ marketCap && ( { marketCap && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Total supply * Price" hint="Total supply * Price"
isLoading={ tokenQuery.isPlaceholderData } isLoading={ tokenQuery.isPlaceholderData }
> >
Fully diluted market cap Fully diluted market cap
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block"> <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
<span>{ `$${ BigNumber(marketCap).toFormat() }` }</span> <span>{ `$${ BigNumber(marketCap).toFormat() }` }</span>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The total amount of tokens issued" hint="The total amount of tokens issued"
isLoading={ tokenQuery.isPlaceholderData } isLoading={ tokenQuery.isPlaceholderData }
> >
Max total supply Max total supply
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
alignSelf="center" alignSelf="center"
wordBreak="break-word" wordBreak="break-word"
whiteSpace="pre-wrap" whiteSpace="pre-wrap"
...@@ -151,45 +151,45 @@ const TokenDetails = ({ tokenQuery }: Props) => { ...@@ -151,45 +151,45 @@ const TokenDetails = ({ tokenQuery }: Props) => {
<Box flexShrink={ 0 }> </Box> <Box flexShrink={ 0 }> </Box>
<TruncatedValue value={ symbol || '' }/> <TruncatedValue value={ symbol || '' }/>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Number of accounts holding the token" hint="Number of accounts holding the token"
isLoading={ tokenQuery.isPlaceholderData } isLoading={ tokenQuery.isPlaceholderData }
> >
Holders Holders
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !tokenCountersQuery.isPlaceholderData }> <Skeleton isLoaded={ !tokenCountersQuery.isPlaceholderData }>
{ countersItem('token_holders_count') } { countersItem('token_holders_count') }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Number of transfer for the token" hint="Number of transfer for the token"
isLoading={ tokenQuery.isPlaceholderData } isLoading={ tokenQuery.isPlaceholderData }
> >
Transfers Transfers
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !tokenCountersQuery.isPlaceholderData }> <Skeleton isLoaded={ !tokenCountersQuery.isPlaceholderData }>
{ countersItem('transfers_count') } { countersItem('transfers_count') }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ decimals && ( { decimals && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Number of digits that come after the decimal place when displaying token value" hint="Number of digits that come after the decimal place when displaying token value"
isLoading={ tokenQuery.isPlaceholderData } isLoading={ tokenQuery.isPlaceholderData }
> >
Decimals Decimals
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !tokenQuery.isPlaceholderData } minW={ 6 }> <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } minW={ 6 }>
{ decimals } { decimals }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
...@@ -204,20 +204,20 @@ const TokenDetails = ({ tokenQuery }: Props) => { ...@@ -204,20 +204,20 @@ const TokenDetails = ({ tokenQuery }: Props) => {
{ (type !== 'ERC-20' && config.UI.views.nft.marketplaces.length === 0 && appActionData) && ( { (type !== 'ERC-20' && config.UI.views.nft.marketplaces.length === 0 && appActionData) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Link to the dapp" hint="Link to the dapp"
> >
Dapp Dapp
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
py="1px" py="1px"
> >
<AppActionButton data={ appActionData } height="30px" source="NFT collection"/> <AppActionButton data={ appActionData } height="30px" source="NFT collection"/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsSponsoredItem isLoading={ tokenQuery.isPlaceholderData }/> <DetailedInfoSponsoredItem isLoading={ tokenQuery.isPlaceholderData }/>
</Grid> </Grid>
); );
}; };
......
ui/token/TokenNftMarketplaces.tsx
View file @ 1f8e6709
...@@ -6,7 +6,7 @@ import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata'; ...@@ -6,7 +6,7 @@ import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
import config from 'configs/app'; import config from 'configs/app';
import AppActionButton from 'ui/shared/AppActionButton/AppActionButton'; import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import TextSeparator from 'ui/shared/TextSeparator'; import TextSeparator from 'ui/shared/TextSeparator';
interface Props { interface Props {
...@@ -24,13 +24,13 @@ const TokenNftMarketplaces = ({ hash, id, isLoading, appActionData, source }: Pr ...@@ -24,13 +24,13 @@ const TokenNftMarketplaces = ({ hash, id, isLoading, appActionData, source }: Pr
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Marketplaces trading this NFT" hint="Marketplaces trading this NFT"
isLoading={ isLoading } isLoading={ isLoading }
> >
Marketplaces Marketplaces
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
py={ appActionData ? '1px' : '6px' } py={ appActionData ? '1px' : '6px' }
> >
<Skeleton isLoaded={ !isLoading } display="flex" columnGap={ 3 } flexWrap="wrap" alignItems="center"> <Skeleton isLoaded={ !isLoading } display="flex" columnGap={ 3 } flexWrap="wrap" alignItems="center">
...@@ -59,7 +59,7 @@ const TokenNftMarketplaces = ({ hash, id, isLoading, appActionData, source }: Pr ...@@ -59,7 +59,7 @@ const TokenNftMarketplaces = ({ hash, id, isLoading, appActionData, source }: Pr
</> </>
) } ) }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/tokenInstance/TokenInstanceDetails.tsx
View file @ 1f8e6709
...@@ -9,9 +9,9 @@ import AppActionButton from 'ui/shared/AppActionButton/AppActionButton'; ...@@ -9,9 +9,9 @@ import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
import useAppActionData from 'ui/shared/AppActionButton/useAppActionData'; import useAppActionData from 'ui/shared/AppActionButton/useAppActionData';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem'; import DetailedInfoSponsoredItem from 'ui/shared/DetailedInfo/DetailedInfoSponsoredItem';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import NftMedia from 'ui/shared/nft/NftMedia'; import NftMedia from 'ui/shared/nft/NftMedia';
...@@ -55,37 +55,37 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => { ...@@ -55,37 +55,37 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
> >
{ data.is_unique && data.owner && ( { data.is_unique && data.owner && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Current owner of this token instance" hint="Current owner of this token instance"
isLoading={ isLoading } isLoading={ isLoading }
> >
Owner Owner
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressEntity <AddressEntity
address={ data.owner } address={ data.owner }
isLoading={ isLoading } isLoading={ isLoading }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<TokenInstanceCreatorAddress hash={ isLoading ? '' : token.address }/> <TokenInstanceCreatorAddress hash={ isLoading ? '' : token.address }/>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="This token instance unique token ID" hint="This token instance unique token ID"
isLoading={ isLoading } isLoading={ isLoading }
> >
Token ID Token ID
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Flex alignItems="center" overflow="hidden"> <Flex alignItems="center" overflow="hidden">
<Skeleton isLoaded={ !isLoading } overflow="hidden" display="inline-block" w="100%"> <Skeleton isLoaded={ !isLoading } overflow="hidden" display="inline-block" w="100%">
<HashStringShortenDynamic hash={ data.id }/> <HashStringShortenDynamic hash={ data.id }/>
</Skeleton> </Skeleton>
<CopyToClipboard text={ data.id } isLoading={ isLoading }/> <CopyToClipboard text={ data.id } isLoading={ isLoading }/>
</Flex> </Flex>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<TokenInstanceTransfersCount hash={ isLoading ? '' : token.address } id={ isLoading ? '' : data.id } onClick={ handleCounterItemClick }/> <TokenInstanceTransfersCount hash={ isLoading ? '' : token.address } id={ isLoading ? '' : data.id } onClick={ handleCounterItemClick }/>
...@@ -99,14 +99,14 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => { ...@@ -99,14 +99,14 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
{ (config.UI.views.nft.marketplaces.length === 0 && appActionData) && ( { (config.UI.views.nft.marketplaces.length === 0 && appActionData) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Link to the dapp" hint="Link to the dapp"
> >
Dapp Dapp
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value py="1px"> <DetailedInfo.ItemValue py="1px">
<AppActionButton data={ appActionData } height="30px" source="NFT item"/> <AppActionButton data={ appActionData } height="30px" source="NFT item"/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
</Grid> </Grid>
...@@ -127,8 +127,8 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => { ...@@ -127,8 +127,8 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
overflow="hidden" overflow="hidden"
> >
<TokenInstanceMetadataInfo data={ data } isLoading={ isLoading }/> <TokenInstanceMetadataInfo data={ data } isLoading={ isLoading }/>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
<DetailsSponsoredItem isLoading={ isLoading }/> <DetailedInfoSponsoredItem isLoading={ isLoading }/>
</Grid> </Grid>
</> </>
); );
......
ui/tokenInstance/details/TokenInstanceCreatorAddress.tsx
View file @ 1f8e6709
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { ADDRESS_INFO } from 'stubs/address'; import { ADDRESS_INFO } from 'stubs/address';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
interface Props { interface Props {
...@@ -37,18 +37,18 @@ const TokenInstanceCreatorAddress = ({ hash }: Props) => { ...@@ -37,18 +37,18 @@ const TokenInstanceCreatorAddress = ({ hash }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Address that deployed this token contract" hint="Address that deployed this token contract"
isLoading={ addressQuery.isPlaceholderData } isLoading={ addressQuery.isPlaceholderData }
> >
Creator Creator
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressEntity <AddressEntity
address={ creatorAddress } address={ creatorAddress }
isLoading={ addressQuery.isPlaceholderData } isLoading={ addressQuery.isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx
View file @ 1f8e6709
...@@ -6,8 +6,8 @@ import type { MetadataAttributes } from 'types/client/token'; ...@@ -6,8 +6,8 @@ import type { MetadataAttributes } from 'types/client/token';
import parseMetadata from 'lib/token/parseMetadata'; import parseMetadata from 'lib/token/parseMetadata';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import LinkExternal from 'ui/shared/links/LinkExternal'; import LinkExternal from 'ui/shared/links/LinkExternal';
import TruncatedValue from 'ui/shared/TruncatedValue'; import TruncatedValue from 'ui/shared/TruncatedValue';
...@@ -87,58 +87,58 @@ const TokenInstanceMetadataInfo = ({ data, isLoading: isLoadingProp }: Props) => ...@@ -87,58 +87,58 @@ const TokenInstanceMetadataInfo = ({ data, isLoading: isLoadingProp }: Props) =>
return ( return (
<> <>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
{ metadata?.name && ( { metadata?.name && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="NFT name" hint="NFT name"
isLoading={ isLoading } isLoading={ isLoading }
> >
Name Name
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
whiteSpace="normal" whiteSpace="normal"
wordBreak="break-word" wordBreak="break-word"
> >
<Skeleton isLoaded={ !isLoading }> <Skeleton isLoaded={ !isLoading }>
{ metadata.name } { metadata.name }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ metadata?.description && ( { metadata?.description && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="NFT description" hint="NFT description"
isLoading={ isLoading } isLoading={ isLoading }
> >
Description Description
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
whiteSpace="normal" whiteSpace="normal"
wordBreak="break-word" wordBreak="break-word"
> >
<Skeleton isLoaded={ !isLoading }> <Skeleton isLoaded={ !isLoading }>
{ metadata.description } { metadata.description }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ metadata?.attributes && metadata.attributes.length > 0 && ( { metadata?.attributes && metadata.attributes.length > 0 && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="NFT attributes" hint="NFT attributes"
isLoading={ isLoading } isLoading={ isLoading }
> >
Attributes Attributes
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Grid gap={ 2 } templateColumns="repeat(auto-fill,minmax(160px, 1fr))" w="100%" whiteSpace="normal"> <Grid gap={ 2 } templateColumns="repeat(auto-fill,minmax(160px, 1fr))" w="100%" whiteSpace="normal">
{ metadata.attributes { metadata.attributes
.filter((attribute) => attribute.value) .filter((attribute) => attribute.value)
.map((attribute, index) => <Item key={ index } data={ attribute } isLoading={ isLoading }/>) } .map((attribute, index) => <Item key={ index } data={ attribute } isLoading={ isLoading }/>) }
</Grid> </Grid>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
</> </>
......
ui/tokenInstance/details/TokenInstanceTransfersCount.tsx
View file @ 1f8e6709
...@@ -4,7 +4,7 @@ import { route } from 'nextjs-routes'; ...@@ -4,7 +4,7 @@ import { route } from 'nextjs-routes';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import LinkInternal from 'ui/shared/links/LinkInternal'; import LinkInternal from 'ui/shared/links/LinkInternal';
interface Props { interface Props {
...@@ -38,13 +38,13 @@ const TokenInstanceTransfersCount = ({ hash, id, onClick }: Props) => { ...@@ -38,13 +38,13 @@ const TokenInstanceTransfersCount = ({ hash, id, onClick }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Number of transfer for the token instance" hint="Number of transfer for the token instance"
isLoading={ transfersCountQuery.isPlaceholderData } isLoading={ transfersCountQuery.isPlaceholderData }
> >
Transfers Transfers
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !transfersCountQuery.isPlaceholderData } display="inline-block"> <Skeleton isLoaded={ !transfersCountQuery.isPlaceholderData } display="inline-block">
<LinkInternal <LinkInternal
href={ url } href={ url }
...@@ -53,7 +53,7 @@ const TokenInstanceTransfersCount = ({ hash, id, onClick }: Props) => { ...@@ -53,7 +53,7 @@ const TokenInstanceTransfersCount = ({ hash, id, onClick }: Props) => {
{ transfersCountQuery.data.transfers_count.toLocaleString() } { transfersCountQuery.data.transfers_count.toLocaleString() }
</LinkInternal> </LinkInternal>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/tx/TxAllowedPeekers.tsx
View file @ 1f8e6709
import React from 'react'; import React from 'react';
import CutLinkList from 'toolkit/components/CutLink/CutLinkList'; import CutLinkList from 'toolkit/components/CutLink/CutLinkList';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
interface Props { interface Props {
...@@ -15,19 +15,19 @@ const TxAllowedPeekers = ({ items }: Props) => { ...@@ -15,19 +15,19 @@ const TxAllowedPeekers = ({ items }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Smart contracts allowed to interact with confidential data" hint="Smart contracts allowed to interact with confidential data"
> >
Allowed peekers Allowed peekers
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<CutLinkList <CutLinkList
items={ items } items={ items }
renderItem={ renderItem } renderItem={ renderItem }
cutLength={ 2 } cutLength={ 2 }
rowGap={ 3 } rowGap={ 3 }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/tx/TxDetailsWrapped.tsx
View file @ 1f8e6709
...@@ -8,8 +8,8 @@ import type { ExcludeUndefined } from 'types/utils'; ...@@ -8,8 +8,8 @@ import type { ExcludeUndefined } from 'types/utils';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import { Badge } from 'toolkit/chakra/badge'; import { Badge } from 'toolkit/chakra/badge';
import CurrencyValue from 'ui/shared/CurrencyValue'; import CurrencyValue from 'ui/shared/CurrencyValue';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData'; import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
...@@ -25,68 +25,68 @@ interface Props { ...@@ -25,68 +25,68 @@ interface Props {
const TxDetailsWrapped = ({ data }: Props) => { const TxDetailsWrapped = ({ data }: Props) => {
return ( return (
<Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}> <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Unique character string (TxID) assigned to every verified transaction" hint="Unique character string (TxID) assigned to every verified transaction"
> >
Transaction hash Transaction hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value flexWrap="nowrap"> <DetailedInfo.ItemValue flexWrap="nowrap">
<TxEntity hash={ data.hash } noIcon noLink noCopy={ false }/> <TxEntity hash={ data.hash } noIcon noLink noCopy={ false }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Transaction method name" hint="Transaction method name"
> >
Method Method
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Badge colorPalette="gray"> <Badge colorPalette="gray">
{ data.method } { data.method }
</Badge> </Badge>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
{ data.to && ( { data.to && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Address (external or contract) receiving the transaction" hint="Address (external or contract) receiving the transaction"
> >
{ data.to.is_contract ? 'Interacted with contract' : 'To' } { data.to.is_contract ? 'Interacted with contract' : 'To' }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Flex flexWrap="nowrap" alignItems="center" maxW="100%"> <Flex flexWrap="nowrap" alignItems="center" maxW="100%">
<AddressEntity address={ data.to }/> <AddressEntity address={ data.to }/>
</Flex> </Flex>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Value sent in the native token (and USD) if applicable" hint="Value sent in the native token (and USD) if applicable"
> >
Value Value
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<CurrencyValue <CurrencyValue
value={ data.value } value={ data.value }
currency={ currencyUnits.ether } currency={ currencyUnits.ether }
flexWrap="wrap" flexWrap="wrap"
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.fee.value !== null && ( { data.fee.value !== null && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Total transaction fee" hint="Total transaction fee"
> >
Transaction fee Transaction fee
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxFee tx={ data } withUsd/> <TxFee tx={ data } withUsd/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
...@@ -94,40 +94,40 @@ const TxDetailsWrapped = ({ data }: Props) => { ...@@ -94,40 +94,40 @@ const TxDetailsWrapped = ({ data }: Props) => {
{ data.gas_limit && ( { data.gas_limit && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Maximum amount of gas that can be used by the transaction" hint="Maximum amount of gas that can be used by the transaction"
> >
Gas limit Gas limit
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ BigNumber(data.gas_limit).toFormat() } { BigNumber(data.gas_limit).toFormat() }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
<TxDetailsOther type={ data.type } nonce={ data.nonce } position={ null }/> <TxDetailsOther type={ data.type } nonce={ data.nonce } position={ null }/>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Binary data included with the transaction. See logs tab for additional info" hint="Binary data included with the transaction. See logs tab for additional info"
> >
Raw input Raw input
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<RawInputData hex={ data.raw_input }/> <RawInputData hex={ data.raw_input }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.decoded_input && ( { data.decoded_input && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Decoded input data" hint="Decoded input data"
> >
Decoded input data Decoded input data
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<LogDecodedInputData data={ data.decoded_input }/> <LogDecodedInputData data={ data.decoded_input }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
</Grid> </Grid>
......
ui/tx/TxSubHeading.tsx
View file @ 1f8e6709
...@@ -11,7 +11,7 @@ import { Link } from 'toolkit/chakra/link'; ...@@ -11,7 +11,7 @@ import { Link } from 'toolkit/chakra/link';
import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu'; import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
import AppActionButton from 'ui/shared/AppActionButton/AppActionButton'; import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
import useAppActionData from 'ui/shared/AppActionButton/useAppActionData'; import useAppActionData from 'ui/shared/AppActionButton/useAppActionData';
import { TX_ACTIONS_BLOCK_ID } from 'ui/shared/DetailsActionsWrapper'; import { TX_ACTIONS_BLOCK_ID } from 'ui/shared/DetailedInfo/DetailedInfoActionsWrapper';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import NetworkExplorers from 'ui/shared/NetworkExplorers'; import NetworkExplorers from 'ui/shared/NetworkExplorers';
import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation'; import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation';
......
ui/tx/details/TxDetailsBurntFees.tsx
View file @ 1f8e6709
...@@ -7,7 +7,7 @@ import config from 'configs/app'; ...@@ -7,7 +7,7 @@ import config from 'configs/app';
import { ZERO } from 'lib/consts'; import { ZERO } from 'lib/consts';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import CurrencyValue from 'ui/shared/CurrencyValue'; import CurrencyValue from 'ui/shared/CurrencyValue';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
const rollupFeature = config.features.rollup; const rollupFeature = config.features.rollup;
...@@ -31,7 +31,7 @@ const TxDetailsBurntFees = ({ data, isLoading }: Props) => { ...@@ -31,7 +31,7 @@ const TxDetailsBurntFees = ({ data, isLoading }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ ` hint={ `
Amount of ${ currencyUnits.ether } burned for this transaction. Equals Block Base Fee per Gas * Gas Used Amount of ${ currencyUnits.ether } burned for this transaction. Equals Block Base Fee per Gas * Gas Used
${ data.blob_gas_price && data.blob_gas_used ? ' + Blob Gas Price * Blob Gas Used' : '' } ${ data.blob_gas_price && data.blob_gas_used ? ' + Blob Gas Price * Blob Gas Used' : '' }
...@@ -39,8 +39,8 @@ const TxDetailsBurntFees = ({ data, isLoading }: Props) => { ...@@ -39,8 +39,8 @@ const TxDetailsBurntFees = ({ data, isLoading }: Props) => {
isLoading={ isLoading } isLoading={ isLoading }
> >
Burnt fees Burnt fees
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isLoading }/> <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isLoading }/>
<CurrencyValue <CurrencyValue
value={ value.toString() } value={ value.toString() }
...@@ -50,7 +50,7 @@ const TxDetailsBurntFees = ({ data, isLoading }: Props) => { ...@@ -50,7 +50,7 @@ const TxDetailsBurntFees = ({ data, isLoading }: Props) => {
ml={ 2 } ml={ 2 }
isLoading={ isLoading } isLoading={ isLoading }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/tx/details/TxDetailsFeePerGas.tsx
View file @ 1f8e6709
...@@ -4,7 +4,7 @@ import React from 'react'; ...@@ -4,7 +4,7 @@ import React from 'react';
import config from 'configs/app'; import config from 'configs/app';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import { Skeleton } from 'toolkit/chakra/skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
interface Props { interface Props {
txFee: string | null; txFee: string | null;
...@@ -19,18 +19,18 @@ const TxDetailsFeePerGas = ({ txFee, gasUsed, isLoading }: Props) => { ...@@ -19,18 +19,18 @@ const TxDetailsFeePerGas = ({ txFee, gasUsed, isLoading }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Fee per gas" hint="Fee per gas"
isLoading={ isLoading } isLoading={ isLoading }
> >
Fee per gas Fee per gas
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isLoading } mr={ 1 }> <Skeleton loading={ isLoading } mr={ 1 }>
{ BigNumber(txFee).dividedBy(10 ** config.chain.currency.decimals).dividedBy(gasUsed).toFixed() } { BigNumber(txFee).dividedBy(10 ** config.chain.currency.decimals).dividedBy(gasUsed).toFixed() }
{ config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` } { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/tx/details/TxDetailsGasPrice.tsx
View file @ 1f8e6709
...@@ -7,7 +7,7 @@ import config from 'configs/app'; ...@@ -7,7 +7,7 @@ import config from 'configs/app';
import { WEI, WEI_IN_GWEI } from 'lib/consts'; import { WEI, WEI_IN_GWEI } from 'lib/consts';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import { Skeleton } from 'toolkit/chakra/skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity';
interface Props { interface Props {
...@@ -45,15 +45,15 @@ const TxDetailsGasPrice = ({ gasPrice, gasToken, isLoading }: Props) => { ...@@ -45,15 +45,15 @@ const TxDetailsGasPrice = ({ gasPrice, gasToken, isLoading }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage" hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage"
isLoading={ isLoading } isLoading={ isLoading }
> >
Gas price Gas price
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ content } { content }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/tx/details/TxDetailsOther.tsx
View file @ 1f8e6709
...@@ -3,7 +3,7 @@ import React from 'react'; ...@@ -3,7 +3,7 @@ import React from 'react';
import type { Transaction } from 'types/api/transaction'; import type { Transaction } from 'types/api/transaction';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import TextSeparator from 'ui/shared/TextSeparator'; import TextSeparator from 'ui/shared/TextSeparator';
type Props = Pick<Transaction, 'nonce' | 'type' | 'position'> & { queueIndex?: number }; type Props = Pick<Transaction, 'nonce' | 'type' | 'position'> & { queueIndex?: number };
...@@ -11,12 +11,12 @@ type Props = Pick<Transaction, 'nonce' | 'type' | 'position'> & { queueIndex?: n ...@@ -11,12 +11,12 @@ type Props = Pick<Transaction, 'nonce' | 'type' | 'position'> & { queueIndex?: n
const TxDetailsOther = ({ nonce, type, position, queueIndex }: Props) => { const TxDetailsOther = ({ nonce, type, position, queueIndex }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Other data related to this transaction" hint="Other data related to this transaction"
> >
Other Other
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ {
[ [
typeof type === 'number' && ( typeof type === 'number' && (
...@@ -53,7 +53,7 @@ const TxDetailsOther = ({ nonce, type, position, queueIndex }: Props) => { ...@@ -53,7 +53,7 @@ const TxDetailsOther = ({ nonce, type, position, queueIndex }: Props) => {
</React.Fragment> </React.Fragment>
)) ))
} }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/tx/details/TxDetailsTokenTransfers.tsx
View file @ 1f8e6709
...@@ -6,7 +6,7 @@ import type { TokenTransfer } from 'types/api/tokenTransfer'; ...@@ -6,7 +6,7 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import { Link } from 'toolkit/chakra/link'; import { Link } from 'toolkit/chakra/link';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet'; import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet';
interface Props { interface Props {
...@@ -39,12 +39,12 @@ const TxDetailsTokenTransfers = ({ data, txHash, isOverflow }: Props) => { ...@@ -39,12 +39,12 @@ const TxDetailsTokenTransfers = ({ data, txHash, isOverflow }: Props) => {
return ( return (
<React.Fragment key={ type }> <React.Fragment key={ type }>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ hint } hint={ hint }
> >
{ title } { title }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value position="relative"> <DetailedInfo.ItemValue position="relative">
<Flex <Flex
flexDirection="column" flexDirection="column"
alignItems="flex-start" alignItems="flex-start"
...@@ -54,7 +54,7 @@ const TxDetailsTokenTransfers = ({ data, txHash, isOverflow }: Props) => { ...@@ -54,7 +54,7 @@ const TxDetailsTokenTransfers = ({ data, txHash, isOverflow }: Props) => {
> >
{ items.map((item, index) => <TokenTransferSnippet key={ index } data={ item }/>) } { items.map((item, index) => <TokenTransferSnippet key={ index } data={ item }/>) }
</Flex> </Flex>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</React.Fragment> </React.Fragment>
); );
}) } }) }
......
ui/tx/details/TxInfo.tsx
View file @ 1f8e6709
import { import {
Box, Box,
Grid,
GridItem, GridItem,
Text, Text,
Spinner, Spinner,
...@@ -32,10 +31,9 @@ import { Tooltip } from 'toolkit/chakra/tooltip'; ...@@ -32,10 +31,9 @@ import { Tooltip } from 'toolkit/chakra/tooltip';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails'; import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import CurrencyValue from 'ui/shared/CurrencyValue'; import CurrencyValue from 'ui/shared/CurrencyValue';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider'; import DetailedInfoSponsoredItem from 'ui/shared/DetailedInfo/DetailedInfoSponsoredItem';
import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity';
...@@ -117,13 +115,13 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -117,13 +115,13 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
) : null; ) : null;
return ( return (
<Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}> <DetailedInfo.Container templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}>
{ config.features.metasuites.isEnabled && ( { config.features.metasuites.isEnabled && (
<> <>
<Box display="none" id="meta-suites__tx-info-label" data-status={ data.status } data-ready={ !isLoading }/> <Box display="none" id="meta-suites__tx-info-label" data-status={ data.status } data-ready={ !isLoading }/>
<Box display="none" id="meta-suites__tx-info-value"/> <Box display="none" id="meta-suites__tx-info-value"/>
<DetailsInfoItemDivider display="none" id="meta-suites__details-info-item-divider"/> <DetailedInfo.ItemDivider display="none" id="meta-suites__details-info-item-divider"/>
</> </>
) } ) }
...@@ -133,13 +131,13 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -133,13 +131,13 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
</GridItem> </GridItem>
) } ) }
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Unique character string (TxID) assigned to every verified transaction" hint="Unique character string (TxID) assigned to every verified transaction"
isLoading={ isLoading } isLoading={ isLoading }
> >
Transaction hash Transaction hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value flexWrap="nowrap"> <DetailedInfo.ItemValue flexWrap="nowrap">
{ data.status === null && <Spinner mr={ 2 } size="sm" flexShrink={ 0 }/> } { data.status === null && <Spinner mr={ 2 } size="sm" flexShrink={ 0 }/> }
<Skeleton loading={ isLoading } overflow="hidden"> <Skeleton loading={ isLoading } overflow="hidden">
<HashStringShortenDynamic hash={ data.hash }/> <HashStringShortenDynamic hash={ data.hash }/>
...@@ -152,9 +150,9 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -152,9 +150,9 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
<Box display="none" flexShrink={ 0 } id="meta-suites__tx-explorer-link"/> <Box display="none" flexShrink={ 0 } id="meta-suites__tx-explorer-link"/>
</> </>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Current transaction state: Success, Failed (Error), or Pending (In Process)" hint="Current transaction state: Success, Failed (Error), or Pending (In Process)"
isLoading={ isLoading } isLoading={ isLoading }
> >
...@@ -164,8 +162,8 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -164,8 +162,8 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
'L2 status and method' : 'L2 status and method' :
'Status and method' 'Status and method'
} }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxStatus status={ data.status } errorText={ data.status === 'error' ? data.result : undefined } isLoading={ isLoading }/> <TxStatus status={ data.status } errorText={ data.status === 'error' ? data.result : undefined } isLoading={ isLoading }/>
{ data.method && ( { data.method && (
<Badge colorPalette={ data.method === 'Multicall' ? 'teal' : 'gray' } loading={ isLoading } truncated ml={ 3 }> <Badge colorPalette={ data.method === 'Multicall' ? 'teal' : 'gray' } loading={ isLoading } truncated ml={ 3 }>
...@@ -179,17 +177,17 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -179,17 +177,17 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
</Link> </Link>
</Skeleton> </Skeleton>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.op_withdrawals && data.op_withdrawals.length > 0 && { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.op_withdrawals && data.op_withdrawals.length > 0 &&
!config.UI.views.tx.hiddenFields?.L1_status && ( !config.UI.views.tx.hiddenFields?.L1_status && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Detailed status progress of the transaction" hint="Detailed status progress of the transaction"
> >
Withdrawal status Withdrawal status
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Flex flexDir="column" rowGap={ 2 }> <Flex flexDir="column" rowGap={ 2 }>
{ data.op_withdrawals.map((withdrawal) => ( { data.op_withdrawals.map((withdrawal) => (
<Box key={ withdrawal.nonce }> <Box key={ withdrawal.nonce }>
...@@ -204,77 +202,77 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -204,77 +202,77 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
</Box> </Box>
)) } )) }
</Flex> </Flex>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.zkevm_status && !config.UI.views.tx.hiddenFields?.L1_status && ( { data.zkevm_status && !config.UI.views.tx.hiddenFields?.L1_status && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Status of the transaction confirmation path to L1" hint="Status of the transaction confirmation path to L1"
isLoading={ isLoading } isLoading={ isLoading }
> >
Confirmation status Confirmation status
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<VerificationSteps currentStep={ data.zkevm_status } steps={ ZKEVM_L2_TX_STATUSES } isLoading={ isLoading }/> <VerificationSteps currentStep={ data.zkevm_status } steps={ ZKEVM_L2_TX_STATUSES } isLoading={ isLoading }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.arbitrum?.status && !config.UI.views.tx.hiddenFields?.L1_status && ( { data.arbitrum?.status && !config.UI.views.tx.hiddenFields?.L1_status && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Status of the transaction confirmation path to L1" hint="Status of the transaction confirmation path to L1"
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 status L1 status
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<VerificationSteps <VerificationSteps
currentStep={ arbitrum.VERIFICATION_STEPS_MAP[data.arbitrum.status] } currentStep={ arbitrum.VERIFICATION_STEPS_MAP[data.arbitrum.status] }
currentStepPending={ arbitrum.getVerificationStepStatus(data.arbitrum) === 'pending' } currentStepPending={ arbitrum.getVerificationStepStatus(data.arbitrum) === 'pending' }
steps={ arbitrum.verificationSteps } steps={ arbitrum.verificationSteps }
isLoading={ isLoading } isLoading={ isLoading }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.revert_reason && ( { data.revert_reason && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The revert reason of the transaction" hint="The revert reason of the transaction"
> >
Revert reason Revert reason
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxRevertReason { ...data.revert_reason }/> <TxRevertReason { ...data.revert_reason }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.zksync && !config.UI.views.tx.hiddenFields?.L1_status && ( { data.zksync && !config.UI.views.tx.hiddenFields?.L1_status && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Status is the short interpretation of the batch lifecycle" hint="Status is the short interpretation of the batch lifecycle"
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 status L1 status
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isLoading }/> <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isLoading }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Block number containing the transaction" hint="Block number containing the transaction"
isLoading={ isLoading } isLoading={ isLoading }
> >
Block Block
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.block_number === null ? { data.block_number === null ?
<Text>Pending</Text> : ( <Text>Pending</Text> : (
<BlockEntity <BlockEntity
...@@ -297,70 +295,70 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -297,70 +295,70 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
<VerificationSteps steps={ SCROLL_L2_BLOCK_STATUSES } currentStep={ data.scroll.l2_block_status } isLoading={ isLoading }/> <VerificationSteps steps={ SCROLL_L2_BLOCK_STATUSES } currentStep={ data.scroll.l2_block_status } isLoading={ isLoading }/>
</> </>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.zkevm_batch_number && !config.UI.views.tx.hiddenFields?.batch && ( { data.zkevm_batch_number && !config.UI.views.tx.hiddenFields?.batch && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Batch index for this transaction" hint="Batch index for this transaction"
isLoading={ isLoading } isLoading={ isLoading }
> >
Txn batch Txn batch
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<BatchEntityL2 <BatchEntityL2
isLoading={ isLoading } isLoading={ isLoading }
number={ data.zkevm_batch_number } number={ data.zkevm_batch_number }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.zksync && !config.UI.views.tx.hiddenFields?.batch && ( { data.zksync && !config.UI.views.tx.hiddenFields?.batch && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Batch number" hint="Batch number"
isLoading={ isLoading } isLoading={ isLoading }
> >
Batch Batch
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.zksync.batch_number ? ( { data.zksync.batch_number ? (
<BatchEntityL2 <BatchEntityL2
isLoading={ isLoading } isLoading={ isLoading }
number={ data.zksync.batch_number } number={ data.zksync.batch_number }
/> />
) : <Skeleton loading={ isLoading }>Pending</Skeleton> } ) : <Skeleton loading={ isLoading }>Pending</Skeleton> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.arbitrum && !config.UI.views.tx.hiddenFields?.batch && ( { data.arbitrum && !config.UI.views.tx.hiddenFields?.batch && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Index of the batch containing this transaction" hint="Index of the batch containing this transaction"
isLoading={ isLoading } isLoading={ isLoading }
> >
Batch Batch
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.arbitrum.batch_number ? { data.arbitrum.batch_number ?
<BatchEntityL2 isLoading={ isLoading } number={ data.arbitrum.batch_number }/> : <BatchEntityL2 isLoading={ isLoading } number={ data.arbitrum.batch_number }/> :
<Skeleton loading={ isLoading }>Pending</Skeleton> } <Skeleton loading={ isLoading }>Pending</Skeleton> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.timestamp && ( { data.timestamp && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Date & time of transaction inclusion, including length of time for confirmation" hint="Date & time of transaction inclusion, including length of time for confirmation"
isLoading={ isLoading } isLoading={ isLoading }
> >
Timestamp Timestamp
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<DetailsTimestamp timestamp={ data.timestamp } isLoading={ isLoading }/> <DetailedInfoTimestamp timestamp={ data.timestamp } isLoading={ isLoading }/>
{ data.confirmation_duration && ( { data.confirmation_duration && (
<> <>
<TextSeparator color="gray.500"/> <TextSeparator color="gray.500"/>
...@@ -369,24 +367,24 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -369,24 +367,24 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
</Skeleton> </Skeleton>
</> </>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.execution_node && ( { data.execution_node && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Node that carried out the confidential computation" hint="Node that carried out the confidential computation"
isLoading={ isLoading } isLoading={ isLoading }
> >
Kettle Kettle
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressEntity <AddressEntity
address={ data.execution_node } address={ data.execution_node }
href={ route({ pathname: '/txs/kettle/[hash]', query: { hash: data.execution_node.hash } }) } href={ route({ pathname: '/txs/kettle/[hash]', query: { hash: data.execution_node.hash } }) }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
...@@ -394,19 +392,19 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -394,19 +392,19 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
<TxAllowedPeekers items={ data.allowed_peekers }/> <TxAllowedPeekers items={ data.allowed_peekers }/>
) } ) }
<DetailsSponsoredItem isLoading={ isLoading }/> <DetailedInfoSponsoredItem isLoading={ isLoading }/>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
<TxDetailsActions hash={ data.hash } actions={ data.actions } isTxDataLoading={ isLoading }/> <TxDetailsActions hash={ data.hash } actions={ data.actions } isTxDataLoading={ isLoading }/>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Address (external or contract) sending the transaction" hint="Address (external or contract) sending the transaction"
isLoading={ isLoading } isLoading={ isLoading }
> >
From From
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value columnGap={ 3 }> <DetailedInfo.ItemValue columnGap={ 3 }>
<AddressEntity <AddressEntity
address={ data.from } address={ data.from }
isLoading={ isLoading } isLoading={ isLoading }
...@@ -417,15 +415,15 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -417,15 +415,15 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
{ addressFromTags } { addressFromTags }
</Flex> </Flex>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Address (external or contract) receiving the transaction" hint="Address (external or contract) receiving the transaction"
isLoading={ isLoading } isLoading={ isLoading }
> >
{ data.to?.is_contract ? 'Interacted with contract' : 'To' } { data.to?.is_contract ? 'Interacted with contract' : 'To' }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexWrap={{ base: 'wrap', lg: 'nowrap' }} flexWrap={{ base: 'wrap', lg: 'nowrap' }}
columnGap={ 3 } columnGap={ 3 }
> >
...@@ -462,91 +460,91 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -462,91 +460,91 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
) : ( ) : (
<span>[ Contract creation ]</span> <span>[ Contract creation ]</span>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.token_transfers && <TxDetailsTokenTransfers data={ data.token_transfers } txHash={ data.hash } isOverflow={ data.token_transfers_overflow }/> } { data.token_transfers && <TxDetailsTokenTransfers data={ data.token_transfers } txHash={ data.hash } isOverflow={ data.token_transfers_overflow }/> }
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
{ (data.arbitrum?.commitment_transaction.hash || data.arbitrum?.confirmation_transaction.hash) && { (data.arbitrum?.commitment_transaction.hash || data.arbitrum?.confirmation_transaction.hash) &&
( (
<> <>
{ data.arbitrum?.commitment_transaction.hash && ( { data.arbitrum?.commitment_transaction.hash && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L1 transaction containing this batch commitment" hint="L1 transaction containing this batch commitment"
isLoading={ isLoading } isLoading={ isLoading }
> >
Commitment tx Commitment tx
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxEntityL1 hash={ data.arbitrum?.commitment_transaction.hash } isLoading={ isLoading }/> <TxEntityL1 hash={ data.arbitrum?.commitment_transaction.hash } isLoading={ isLoading }/>
{ data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> } { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.arbitrum?.confirmation_transaction.hash && ( { data.arbitrum?.confirmation_transaction.hash && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L1 transaction containing confirmation of this batch" hint="L1 transaction containing confirmation of this batch"
isLoading={ isLoading } isLoading={ isLoading }
> >
Confirmation tx Confirmation tx
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxEntityL1 hash={ data.arbitrum?.confirmation_transaction.hash } isLoading={ isLoading }/> <TxEntityL1 hash={ data.arbitrum?.confirmation_transaction.hash } isLoading={ isLoading }/>
{ data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> } { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
</> </>
) } ) }
{ data.zkevm_sequence_hash && ( { data.zkevm_sequence_hash && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isLoading } isLoading={ isLoading }
> >
Sequence tx hash Sequence tx hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value flexWrap="nowrap"> <DetailedInfo.ItemValue flexWrap="nowrap">
<Skeleton loading={ isLoading } overflow="hidden"> <Skeleton loading={ isLoading } overflow="hidden">
<HashStringShortenDynamic hash={ data.zkevm_sequence_hash }/> <HashStringShortenDynamic hash={ data.zkevm_sequence_hash }/>
</Skeleton> </Skeleton>
<CopyToClipboard text={ data.zkevm_sequence_hash } isLoading={ isLoading }/> <CopyToClipboard text={ data.zkevm_sequence_hash } isLoading={ isLoading }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.zkevm_verify_hash && ( { data.zkevm_verify_hash && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isLoading } isLoading={ isLoading }
> >
Verify tx hash Verify tx hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value flexWrap="nowrap"> <DetailedInfo.ItemValue flexWrap="nowrap">
<Skeleton loading={ isLoading } overflow="hidden"> <Skeleton loading={ isLoading } overflow="hidden">
<HashStringShortenDynamic hash={ data.zkevm_verify_hash }/> <HashStringShortenDynamic hash={ data.zkevm_verify_hash }/>
</Skeleton> </Skeleton>
<CopyToClipboard text={ data.zkevm_verify_hash } isLoading={ isLoading }/> <CopyToClipboard text={ data.zkevm_verify_hash } isLoading={ isLoading }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ (data.zkevm_batch_number || data.zkevm_verify_hash) && <DetailsInfoItemDivider/> } { (data.zkevm_batch_number || data.zkevm_verify_hash) && <DetailedInfo.ItemDivider/> }
{ !config.UI.views.tx.hiddenFields?.value && ( { !config.UI.views.tx.hiddenFields?.value && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Value sent in the native token (and USD) if applicable" hint="Value sent in the native token (and USD) if applicable"
isLoading={ isLoading } isLoading={ isLoading }
> >
Value Value
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<CurrencyValue <CurrencyValue
value={ data.value } value={ data.value }
currency={ currencyUnits.ether } currency={ currencyUnits.ether }
...@@ -554,33 +552,33 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -554,33 +552,33 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
isLoading={ isLoading } isLoading={ isLoading }
flexWrap="wrap" flexWrap="wrap"
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ !config.UI.views.tx.hiddenFields?.tx_fee && ( { !config.UI.views.tx.hiddenFields?.tx_fee && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ data.blob_gas_used ? 'Transaction fee without blob fee' : 'Total transaction fee' } hint={ data.blob_gas_used ? 'Transaction fee without blob fee' : 'Total transaction fee' }
isLoading={ isLoading } isLoading={ isLoading }
> >
Transaction fee Transaction fee
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxFee tx={ data } isLoading={ isLoading } withUsd/> <TxFee tx={ data } isLoading={ isLoading } withUsd/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && ( { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Fee paid to the poster for L1 resources" hint="Fee paid to the poster for L1 resources"
isLoading={ isLoading } isLoading={ isLoading }
> >
Poster fee Poster fee
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<CurrencyValue <CurrencyValue
value={ data.arbitrum.poster_fee } value={ data.arbitrum.poster_fee }
currency={ currencyUnits.ether } currency={ currencyUnits.ether }
...@@ -588,15 +586,15 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -588,15 +586,15 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
flexWrap="wrap" flexWrap="wrap"
isLoading={ isLoading } isLoading={ isLoading }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Fee paid to the network for L2 resources" hint="Fee paid to the network for L2 resources"
isLoading={ isLoading } isLoading={ isLoading }
> >
Network fee Network fee
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<CurrencyValue <CurrencyValue
value={ data.arbitrum.network_fee } value={ data.arbitrum.network_fee }
currency={ currencyUnits.ether } currency={ currencyUnits.ether }
...@@ -604,7 +602,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -604,7 +602,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
flexWrap="wrap" flexWrap="wrap"
isLoading={ isLoading } isLoading={ isLoading }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
...@@ -612,28 +610,28 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -612,28 +610,28 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
<TxDetailsFeePerGas txFee={ data.fee.value } gasUsed={ data.gas_used } isLoading={ isLoading }/> <TxDetailsFeePerGas txFee={ data.fee.value } gasUsed={ data.gas_used } isLoading={ isLoading }/>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Actual gas amount used by the transaction" hint="Actual gas amount used by the transaction"
isLoading={ isLoading } isLoading={ isLoading }
> >
Gas usage & limit by txn Gas usage & limit by txn
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isLoading }>{ BigNumber(data.gas_used || 0).toFormat() }</Skeleton> <Skeleton loading={ isLoading }>{ BigNumber(data.gas_used || 0).toFormat() }</Skeleton>
<TextSeparator/> <TextSeparator/>
<Skeleton loading={ isLoading }>{ BigNumber(data.gas_limit).toFormat() }</Skeleton> <Skeleton loading={ isLoading }>{ BigNumber(data.gas_limit).toFormat() }</Skeleton>
<Utilization ml={ 4 } value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() } isLoading={ isLoading }/> <Utilization ml={ 4 } value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() } isLoading={ isLoading }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && data.gas_used && ( { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && data.gas_used && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L2 gas set aside for L1 data charges" hint="L2 gas set aside for L1 data charges"
isLoading={ isLoading } isLoading={ isLoading }
> >
Gas used for L1 Gas used for L1
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l1 || 0).toFormat() }</Skeleton> <Skeleton loading={ isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l1 || 0).toFormat() }</Skeleton>
<TextSeparator/> <TextSeparator/>
<Utilization <Utilization
...@@ -641,15 +639,15 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -641,15 +639,15 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
value={ BigNumber(data.arbitrum.gas_used_for_l1 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() } value={ BigNumber(data.arbitrum.gas_used_for_l1 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() }
isLoading={ isLoading } isLoading={ isLoading }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L2 gas spent on L2 resources" hint="L2 gas spent on L2 resources"
isLoading={ isLoading } isLoading={ isLoading }
> >
Gas used for L2 Gas used for L2
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l2 || 0).toFormat() }</Skeleton> <Skeleton loading={ isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l2 || 0).toFormat() }</Skeleton>
<TextSeparator/> <TextSeparator/>
<Utilization <Utilization
...@@ -657,28 +655,28 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -657,28 +655,28 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
value={ BigNumber(data.arbitrum.gas_used_for_l2 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() } value={ BigNumber(data.arbitrum.gas_used_for_l2 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() }
isLoading={ isLoading } isLoading={ isLoading }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.scroll?.l1_gas_used !== undefined && ( { data.scroll?.l1_gas_used !== undefined && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Total gas used on L1" hint="Total gas used on L1"
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 Gas used L1 Gas used
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isLoading }>{ BigNumber(data.scroll?.l1_gas_used || 0).toFormat() }</Skeleton> <Skeleton loading={ isLoading }>{ BigNumber(data.scroll?.l1_gas_used || 0).toFormat() }</Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ !config.UI.views.tx.hiddenFields?.gas_fees && { !config.UI.views.tx.hiddenFields?.gas_fees &&
(data.base_fee_per_gas || data.max_fee_per_gas || data.max_priority_fee_per_gas) && ( (data.base_fee_per_gas || data.max_fee_per_gas || data.max_priority_fee_per_gas) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ ` hint={ `
Base Fee refers to the network Base Fee at the time of the block, Base Fee refers to the network Base Fee at the time of the block,
while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay
...@@ -687,8 +685,8 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -687,8 +685,8 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
isLoading={ isLoading } isLoading={ isLoading }
> >
{ `Gas fees (${ currencyUnits.gwei })` } { `Gas fees (${ currencyUnits.gwei })` }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.base_fee_per_gas && ( { data.base_fee_per_gas && (
<Skeleton loading={ isLoading }> <Skeleton loading={ isLoading }>
<Text as="span" fontWeight="500">Base: </Text> <Text as="span" fontWeight="500">Base: </Text>
...@@ -709,7 +707,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -709,7 +707,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
<Text fontWeight="600" as="span">{ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text> <Text fontWeight="600" as="span">{ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
</Skeleton> </Skeleton>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
...@@ -719,64 +717,64 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -719,64 +717,64 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
<> <>
{ data.l1_gas_used && ( { data.l1_gas_used && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L1 gas used by transaction" hint="L1 gas used by transaction"
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 gas used by txn L1 gas used by txn
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Text>{ BigNumber(data.l1_gas_used).toFormat() }</Text> <Text>{ BigNumber(data.l1_gas_used).toFormat() }</Text>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.l1_gas_price && ( { data.l1_gas_price && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L1 gas price" hint="L1 gas price"
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 gas price L1 gas price
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <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 color="text.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>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.l1_fee && ( { data.l1_fee && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
hint={ `L1 Data Fee which is used to cover the L1 "security" cost from the batch submission mechanism. In combination with L2 execution fee, L1 fee makes the total amount of fees that a transaction pays.` } hint={ `L1 Data Fee which is used to cover the L1 "security" cost from the batch submission mechanism. In combination with L2 execution fee, L1 fee makes the total amount of fees that a transaction pays.` }
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 fee L1 fee
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<CurrencyValue <CurrencyValue
value={ data.l1_fee } value={ data.l1_fee }
currency={ currencyUnits.ether } currency={ currencyUnits.ether }
exchangeRate={ data.exchange_rate } exchangeRate={ data.exchange_rate }
flexWrap="wrap" flexWrap="wrap"
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.l1_fee_scalar && ( { data.l1_fee_scalar && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="A Dynamic overhead (fee scalar) premium, which serves as a buffer in case L1 prices rapidly increase." hint="A Dynamic overhead (fee scalar) premium, which serves as a buffer in case L1 prices rapidly increase."
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 fee scalar L1 fee scalar
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Text>{ data.l1_fee_scalar }</Text> <Text>{ data.l1_fee_scalar }</Text>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
</> </>
...@@ -788,15 +786,15 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -788,15 +786,15 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
{ data.arbitrum?.contains_message && data.arbitrum?.message_related_info && ( { data.arbitrum?.contains_message && data.arbitrum?.message_related_info && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ data.arbitrum.contains_message === 'incoming' ? hint={ data.arbitrum.contains_message === 'incoming' ?
'The hash of the transaction that originated the message from the base layer' : 'The hash of the transaction that originated the message from the base layer' :
'The hash of the transaction that completed the message on the base layer' 'The hash of the transaction that completed the message on the base layer'
} }
> >
{ data.arbitrum.contains_message === 'incoming' ? 'Originating L1 txn hash' : 'Completion L1 txn hash' } { data.arbitrum.contains_message === 'incoming' ? 'Originating L1 txn hash' : 'Completion L1 txn hash' }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.arbitrum.message_related_info.associated_l1_transaction ? { data.arbitrum.message_related_info.associated_l1_transaction ?
<TxEntityL1 hash={ data.arbitrum.message_related_info.associated_l1_transaction }/> : ( <TxEntityL1 hash={ data.arbitrum.message_related_info.associated_l1_transaction }/> : (
<HStack gap={ 2 }> <HStack gap={ 2 }>
...@@ -805,7 +803,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -805,7 +803,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
</HStack> </HStack>
) )
} }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
...@@ -813,12 +811,12 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -813,12 +811,12 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
<> <>
{ data.blob_gas_used && data.blob_gas_price && ( { data.blob_gas_used && data.blob_gas_price && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Blob fee for this transaction" hint="Blob fee for this transaction"
> >
Blob fee Blob fee
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<CurrencyValue <CurrencyValue
value={ BigNumber(data.blob_gas_used).multipliedBy(data.blob_gas_price).toString() } value={ BigNumber(data.blob_gas_used).multipliedBy(data.blob_gas_price).toString() }
currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : currencyUnits.ether } currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : currencyUnits.ether }
...@@ -826,31 +824,31 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -826,31 +824,31 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
flexWrap="wrap" flexWrap="wrap"
isLoading={ isLoading } isLoading={ isLoading }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.blob_gas_used && ( { data.blob_gas_used && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Amount of gas used by the blobs in this transaction" hint="Amount of gas used by the blobs in this transaction"
> >
Blob gas usage Blob gas usage
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ BigNumber(data.blob_gas_used).toFormat() } { BigNumber(data.blob_gas_used).toFormat() }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ (data.max_fee_per_blob_gas || data.blob_gas_price) && ( { (data.max_fee_per_blob_gas || data.blob_gas_price) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ `Amount of ${ currencyUnits.ether } used for blobs in this transaction` } hint={ `Amount of ${ currencyUnits.ether } used for blobs in this transaction` }
> >
{ `Blob gas fees (${ currencyUnits.gwei })` } { `Blob gas fees (${ currencyUnits.gwei })` }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.blob_gas_price && ( { data.blob_gas_price && (
<Text fontWeight="600" as="span">{ BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() }</Text> <Text fontWeight="600" as="span">{ BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
) } ) }
...@@ -861,40 +859,40 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -861,40 +859,40 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
<Text fontWeight="600" as="span">{ BigNumber(data.max_fee_per_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text> <Text fontWeight="600" as="span">{ BigNumber(data.max_fee_per_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
</> </>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
</> </>
) } ) }
<TxDetailsOther nonce={ data.nonce } type={ data.type } position={ data.position } queueIndex={ data.scroll?.queue_index }/> <TxDetailsOther nonce={ data.nonce } type={ data.type } position={ data.position } queueIndex={ data.scroll?.queue_index }/>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Binary data included with the transaction. See logs tab for additional info" hint="Binary data included with the transaction. See logs tab for additional info"
> >
Raw input Raw input
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<RawInputData hex={ data.raw_input } defaultDataType={ data.zilliqa?.is_scilla ? 'UTF-8' : 'Hex' }/> <RawInputData hex={ data.raw_input } defaultDataType={ data.zilliqa?.is_scilla ? 'UTF-8' : 'Hex' }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.decoded_input && ( { data.decoded_input && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Decoded input data" hint="Decoded input data"
> >
Decoded input data Decoded input data
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<LogDecodedInputData data={ data.decoded_input }/> <LogDecodedInputData data={ data.decoded_input }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.zksync && <ZkSyncL2TxnBatchHashesInfo data={ data.zksync } isLoading={ isLoading }/> } { data.zksync && <ZkSyncL2TxnBatchHashesInfo data={ data.zksync } isLoading={ isLoading }/> }
</CutLinkDetails> </CutLinkDetails>
</Grid> </DetailedInfo.Container>
); );
}; };
......
ui/tx/details/TxInfoScrollFees.tsx
View file @ 1f8e6709
...@@ -8,7 +8,7 @@ import { WEI_IN_GWEI } from 'lib/consts'; ...@@ -8,7 +8,7 @@ import { WEI_IN_GWEI } from 'lib/consts';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import { Skeleton } from 'toolkit/chakra/skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import CurrencyValue from 'ui/shared/CurrencyValue'; import CurrencyValue from 'ui/shared/CurrencyValue';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import TextSeparator from 'ui/shared/TextSeparator'; import TextSeparator from 'ui/shared/TextSeparator';
type Props = { type Props = {
...@@ -21,71 +21,71 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => { ...@@ -21,71 +21,71 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => {
<> <>
{ data.scroll?.l1_fee !== undefined && ( { data.scroll?.l1_fee !== undefined && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L1 fee that pays for rollup costs" hint="L1 fee that pays for rollup costs"
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 data fee L1 data fee
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<CurrencyValue <CurrencyValue
value={ data.scroll?.l1_fee } value={ data.scroll?.l1_fee }
currency={ currencyUnits.ether } currency={ currencyUnits.ether }
exchangeRate={ data.exchange_rate } exchangeRate={ data.exchange_rate }
flexWrap="wrap" flexWrap="wrap"
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.scroll?.l2_fee !== undefined && ( { data.scroll?.l2_fee !== undefined && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L2 execution fee" hint="L2 execution fee"
isLoading={ isLoading } isLoading={ isLoading }
> >
Execution fee Execution fee
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<CurrencyValue <CurrencyValue
value={ data.scroll?.l2_fee.value } value={ data.scroll?.l2_fee.value }
currency={ currencyUnits.ether } currency={ currencyUnits.ether }
exchangeRate={ data.exchange_rate } exchangeRate={ data.exchange_rate }
flexWrap="wrap" flexWrap="wrap"
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.scroll?.l1_fee_commit_scalar !== undefined && ( { data.scroll?.l1_fee_commit_scalar !== undefined && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Commitment scalar" hint="Commitment scalar"
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 commit scalar L1 commit scalar
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<CurrencyValue <CurrencyValue
value={ String(data.scroll?.l1_fee_commit_scalar) } value={ String(data.scroll?.l1_fee_commit_scalar) }
currency={ currencyUnits.ether } currency={ currencyUnits.ether }
exchangeRate={ data.exchange_rate } exchangeRate={ data.exchange_rate }
flexWrap="wrap" flexWrap="wrap"
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.scroll?.l1_fee_overhead !== undefined && ( { data.scroll?.l1_fee_overhead !== undefined && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Additional gas overhead of a data commitment transaction" hint="Additional gas overhead of a data commitment transaction"
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 Fee Overhead L1 Fee Overhead
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton loading={ isLoading }> <Skeleton loading={ isLoading }>
<CurrencyValue <CurrencyValue
value={ String(data.scroll?.l1_fee_overhead) } value={ String(data.scroll?.l1_fee_overhead) }
...@@ -94,18 +94,18 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => { ...@@ -94,18 +94,18 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => {
flexWrap="wrap" flexWrap="wrap"
/> />
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ (data.scroll?.l1_base_fee !== undefined || data.scroll?.l1_fee_scalar !== undefined) && ( { (data.scroll?.l1_base_fee !== undefined || data.scroll?.l1_fee_scalar !== undefined) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L1 gas fees" hint="L1 gas fees"
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 gas fees L1 gas fees
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.scroll?.l1_base_fee !== undefined && ( { data.scroll?.l1_base_fee !== undefined && (
<Skeleton loading={ isLoading }> <Skeleton loading={ isLoading }>
<Text as="span" fontWeight="500">Base: </Text> <Text as="span" fontWeight="500">Base: </Text>
...@@ -119,18 +119,18 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => { ...@@ -119,18 +119,18 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => {
<Text fontWeight="600" as="span">{ BigNumber(data.scroll?.l1_fee_scalar || 0).dividedBy(WEI_IN_GWEI).toFixed() }</Text> <Text fontWeight="600" as="span">{ BigNumber(data.scroll?.l1_fee_scalar || 0).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
</Skeleton> </Skeleton>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ (data.scroll?.l1_blob_base_fee !== undefined || data.scroll?.l1_fee_blob_scalar !== undefined) && ( { (data.scroll?.l1_blob_base_fee !== undefined || data.scroll?.l1_fee_blob_scalar !== undefined) && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L1 blob fees" hint="L1 blob fees"
isLoading={ isLoading } isLoading={ isLoading }
> >
L1 blob fees L1 blob fees
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.scroll?.l1_blob_base_fee !== undefined && ( { data.scroll?.l1_blob_base_fee !== undefined && (
<Skeleton loading={ isLoading }> <Skeleton loading={ isLoading }>
<Text as="span" fontWeight="500">Base: </Text> <Text as="span" fontWeight="500">Base: </Text>
...@@ -144,7 +144,7 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => { ...@@ -144,7 +144,7 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => {
<Text fontWeight="600" as="span">{ BigNumber(data.scroll?.l1_fee_blob_scalar || 0).dividedBy(WEI_IN_GWEI).toFixed() }</Text> <Text fontWeight="600" as="span">{ BigNumber(data.scroll?.l1_fee_blob_scalar || 0).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
</Skeleton> </Skeleton>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
</> </>
......
ui/tx/details/txDetailsActions/TxDetailsActionsInterpretation.tsx
View file @ 1f8e6709
...@@ -2,8 +2,8 @@ import React from 'react'; ...@@ -2,8 +2,8 @@ import React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { TX_INTERPRETATION } from 'stubs/txInterpretation'; import { TX_INTERPRETATION } from 'stubs/txInterpretation';
import DetailsActionsWrapper from 'ui/shared/DetailsActionsWrapper'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider'; import DetailedInfoActionsWrapper from 'ui/shared/DetailedInfo/DetailedInfoActionsWrapper';
import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation'; import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation';
interface Props { interface Props {
...@@ -29,7 +29,7 @@ const TxDetailsActionsInterpretation = ({ hash, isTxDataLoading }: Props) => { ...@@ -29,7 +29,7 @@ const TxDetailsActionsInterpretation = ({ hash, isTxDataLoading }: Props) => {
return ( return (
<> <>
<DetailsActionsWrapper isLoading={ isTxDataLoading || txInterpretationQuery.isPlaceholderData } type="tx"> <DetailedInfoActionsWrapper isLoading={ isTxDataLoading || txInterpretationQuery.isPlaceholderData } type="tx">
{ actions.map((action, index: number) => ( { actions.map((action, index: number) => (
<TxInterpretation <TxInterpretation
key={ index } key={ index }
...@@ -38,8 +38,8 @@ const TxDetailsActionsInterpretation = ({ hash, isTxDataLoading }: Props) => { ...@@ -38,8 +38,8 @@ const TxDetailsActionsInterpretation = ({ hash, isTxDataLoading }: Props) => {
/> />
), ),
) } ) }
</DetailsActionsWrapper> </DetailedInfoActionsWrapper>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
</> </>
); );
}; };
......
ui/tx/details/txDetailsActions/TxDetailsActionsRaw.tsx
View file @ 1f8e6709
...@@ -2,8 +2,8 @@ import React from 'react'; ...@@ -2,8 +2,8 @@ import React from 'react';
import type { TxAction } from 'types/api/txAction'; import type { TxAction } from 'types/api/txAction';
import DetailsActionsWrapper from 'ui/shared/DetailsActionsWrapper'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider'; import DetailedInfoActionsWrapper from 'ui/shared/DetailedInfo/DetailedInfoActionsWrapper';
import TxDetailsAction from './TxDetailsAction'; import TxDetailsAction from './TxDetailsAction';
...@@ -15,10 +15,10 @@ interface Props { ...@@ -15,10 +15,10 @@ interface Props {
const TxDetailsActionsRaw = ({ actions, isLoading }: Props) => { const TxDetailsActionsRaw = ({ actions, isLoading }: Props) => {
return ( return (
<> <>
<DetailsActionsWrapper isLoading={ isLoading } type="tx"> <DetailedInfoActionsWrapper isLoading={ isLoading } type="tx">
{ actions.map((action, index: number) => <TxDetailsAction key={ index } action={ action }/>) } { actions.map((action, index: number) => <TxDetailsAction key={ index } action={ action }/>) }
</DetailsActionsWrapper> </DetailedInfoActionsWrapper>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
</> </>
); );
}; };
......
ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx
View file @ 1f8e6709
...@@ -15,8 +15,8 @@ import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA'; ...@@ -15,8 +15,8 @@ import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
import Skeleton from 'ui/shared/chakra/Skeleton'; 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 DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
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';
...@@ -74,13 +74,13 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => { ...@@ -74,13 +74,13 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
overflow="hidden" overflow="hidden"
> >
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on L1" hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on L1"
> >
Txn batch number Txn batch number
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
{ data.number } { data.number }
</Skeleton> </Skeleton>
...@@ -92,114 +92,114 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => { ...@@ -92,114 +92,114 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
isPrevDisabled={ data.number === 0 } isPrevDisabled={ data.number === 0 }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Date and time at which batch is submitted to L1" hint="Date and time at which batch is submitted to L1"
> >
Timestamp Timestamp
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.commitment_transaction.timestamp ? { data.commitment_transaction.timestamp ?
<DetailsTimestamp timestamp={ data.commitment_transaction.timestamp }isLoading={ isPlaceholderData }/> : <DetailedInfoTimestamp timestamp={ data.commitment_transaction.timestamp }isLoading={ isPlaceholderData }/> :
'Undefined' 'Undefined'
} }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Number of transactions in this batch" hint="Number of transactions in this batch"
> >
Transactions Transactions
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }> <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
{ data.transactions_count.toLocaleString() } transaction{ data.transactions_count === 1 ? '' : 's' } { data.transactions_count.toLocaleString() } transaction{ data.transactions_count === 1 ? '' : 's' }
</LinkInternal> </LinkInternal>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Number of L2 blocks in this batch" hint="Number of L2 blocks in this batch"
> >
Blocks Blocks
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }> <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }>
{ blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' } { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
</LinkInternal> </LinkInternal>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Hash of L1 transaction in which transactions was committed" hint="Hash of L1 transaction in which transactions was committed"
> >
L1 transaction hash L1 transaction hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxEntityL1 <TxEntityL1
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hash={ data.commitment_transaction.hash } hash={ data.commitment_transaction.hash }
maxW="100%" maxW="100%"
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Heigh of L1 block which includes L1 transactions" hint="Heigh of L1 block which includes L1 transactions"
> >
L1 block L1 block
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<BlockEntityL1 <BlockEntityL1
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
number={ data.commitment_transaction.block_number } number={ data.commitment_transaction.block_number }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.data_availability.batch_data_container && ( { data.data_availability.batch_data_container && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Where the batch data is stored" hint="Where the batch data is stored"
> >
Batch data container Batch data container
</DetailsInfoItem.Label><DetailsInfoItem.Value> </DetailedInfo.ItemLabel><DetailedInfo.ItemValue>
<ArbitrumL2TxnBatchDA dataContainer={ data.data_availability.batch_data_container } isLoading={ isPlaceholderData }/> <ArbitrumL2TxnBatchDA dataContainer={ data.data_availability.batch_data_container } isLoading={ isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="The hash of the state before the batch" hint="The hash of the state before the batch"
> >
Before acc Before acc
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData } overflow="hidden"> <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
<HashStringShortenDynamic hash={ data.before_acc }/> <HashStringShortenDynamic hash={ data.before_acc }/>
<CopyToClipboard text={ data.before_acc }/> <CopyToClipboard text={ data.before_acc }/>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="The hash of the state after the batch" hint="The hash of the state after the batch"
> >
After acc After acc
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData } overflow="hidden"> <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
<HashStringShortenDynamic hash={ data.after_acc }/> <HashStringShortenDynamic hash={ data.after_acc }/>
<CopyToClipboard text={ data.after_acc }/> <CopyToClipboard text={ data.after_acc }/>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.data_availability.batch_data_container === 'in_anytrust' && ( { data.data_availability.batch_data_container === 'in_anytrust' && (
<> <>
......
ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsDA.tsx
View file @ 1f8e6709
...@@ -5,8 +5,8 @@ import type { ArbitrumL2TxnBatchDAAnytrust } from 'types/api/arbitrumL2'; ...@@ -5,8 +5,8 @@ import type { ArbitrumL2TxnBatchDAAnytrust } from 'types/api/arbitrumL2';
import dayjs from 'lib/date/dayjs'; import dayjs from 'lib/date/dayjs';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
import HashStringShorten from 'ui/shared/HashStringShorten'; import HashStringShorten from 'ui/shared/HashStringShorten';
import IconSvg from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg';
import TextSeparator from 'ui/shared/TextSeparator'; import TextSeparator from 'ui/shared/TextSeparator';
...@@ -20,26 +20,26 @@ const ArbitrumL2TxnBatchDetailsDA = ({ dataAvailability }: Props) => { ...@@ -20,26 +20,26 @@ const ArbitrumL2TxnBatchDetailsDA = ({ dataAvailability }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Aggregated BLS signature of AnyTrust committee members" hint="Aggregated BLS signature of AnyTrust committee members"
> >
Signature Signature
</DetailsInfoItem.Label><DetailsInfoItem.Value wordBreak="break-all" whiteSpace="break-spaces"> </DetailedInfo.ItemLabel><DetailedInfo.ItemValue wordBreak="break-all" whiteSpace="break-spaces">
{ dataAvailability.bls_signature } { dataAvailability.bls_signature }
</DetailsInfoItem.Value><DetailsInfoItem.Label </DetailedInfo.ItemValue><DetailedInfo.ItemLabel
hint="The hash of the data blob stored by the AnyTrust committee" hint="The hash of the data blob stored by the AnyTrust committee"
> >
Data hash Data hash
</DetailsInfoItem.Label><DetailsInfoItem.Value> </DetailedInfo.ItemLabel><DetailedInfo.ItemValue>
{ dataAvailability.data_hash } { dataAvailability.data_hash }
<CopyToClipboard text={ dataAvailability.data_hash } ml={ 2 }/> <CopyToClipboard text={ dataAvailability.data_hash } ml={ 2 }/>
</DetailsInfoItem.Value><DetailsInfoItem.Label </DetailedInfo.ItemValue><DetailedInfo.ItemLabel
hint="Expiration timeout for the data blob" hint="Expiration timeout for the data blob"
> >
Timeout Timeout
</DetailsInfoItem.Label><DetailsInfoItem.Value> </DetailedInfo.ItemLabel><DetailedInfo.ItemValue>
{ dayjs(dataAvailability.timeout) < dayjs() ? { dayjs(dataAvailability.timeout) < dayjs() ?
<DetailsTimestamp timestamp={ dataAvailability.timeout }/> : <DetailedInfoTimestamp timestamp={ dataAvailability.timeout }/> :
( (
<> <>
<Text>{ dayjs(dataAvailability.timeout).format('llll') }</Text> <Text>{ dayjs(dataAvailability.timeout).format('llll') }</Text>
...@@ -47,13 +47,13 @@ const ArbitrumL2TxnBatchDetailsDA = ({ dataAvailability }: Props) => { ...@@ -47,13 +47,13 @@ const ArbitrumL2TxnBatchDetailsDA = ({ dataAvailability }: Props) => {
<Text color="red.500">{ dayjs(dataAvailability.timeout).diff(dayjs(), 'day') } days left</Text> <Text color="red.500">{ dayjs(dataAvailability.timeout).diff(dayjs(), 'day') } days left</Text>
</> </>
) } ) }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Members of AnyTrust committee" hint="Members of AnyTrust committee"
> >
Signers Signers
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value overflowX="scroll" fontSize="sm"> <DetailedInfo.ItemValue overflowX="scroll" fontSize="sm">
<Show above="lg" ssr={ false }> <Show above="lg" ssr={ false }>
<Grid <Grid
templateColumns="1fr auto auto" templateColumns="1fr auto auto"
...@@ -114,7 +114,7 @@ const ArbitrumL2TxnBatchDetailsDA = ({ dataAvailability }: Props) => { ...@@ -114,7 +114,7 @@ const ArbitrumL2TxnBatchDetailsDA = ({ dataAvailability }: Props) => {
)) } )) }
</Box> </Box>
</Hide> </Hide>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx
View file @ 1f8e6709
...@@ -13,8 +13,8 @@ import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; ...@@ -13,8 +13,8 @@ import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA'; import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataFetchAlert from 'ui/shared/DataFetchAlert';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
import LinkInternal from 'ui/shared/links/LinkInternal'; import LinkInternal from 'ui/shared/links/LinkInternal';
import PrevNext from 'ui/shared/PrevNext'; import PrevNext from 'ui/shared/PrevNext';
...@@ -63,13 +63,13 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => { ...@@ -63,13 +63,13 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => {
templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
overflow="hidden" overflow="hidden"
> >
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Batch ID indicates the length of batches produced by grouping L2 blocks to be proven on L1" hint="Batch ID indicates the length of batches produced by grouping L2 blocks to be proven on L1"
> >
Batch ID Batch ID
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
{ data.internal_id } { data.internal_id }
</Skeleton> </Skeleton>
...@@ -81,58 +81,58 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => { ...@@ -81,58 +81,58 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => {
isPrevDisabled={ data.internal_id === 0 } isPrevDisabled={ data.internal_id === 0 }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Date and time at which batch is submitted to L1" hint="Date and time at which batch is submitted to L1"
> >
Timestamp Timestamp
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.l1_timestamp ? { data.l1_timestamp ?
<DetailsTimestamp timestamp={ data.l1_timestamp }isLoading={ isPlaceholderData }/> : <DetailedInfoTimestamp timestamp={ data.l1_timestamp }isLoading={ isPlaceholderData }/> :
'Undefined' 'Undefined'
} }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Number of transactions in this batch" hint="Number of transactions in this batch"
> >
Transactions Transactions
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'txs' } }) }> <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'txs' } }) }>
{ data.transaction_count.toLocaleString() } transaction{ data.transaction_count === 1 ? '' : 's' } { data.transaction_count.toLocaleString() } transaction{ data.transaction_count === 1 ? '' : 's' }
</LinkInternal> </LinkInternal>
{ ' ' }in this batch { ' ' }in this batch
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Number of L2 blocks in this batch" hint="Number of L2 blocks in this batch"
> >
Blocks Blocks
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'blocks' } }) }> <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'blocks' } }) }>
{ blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' } { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
</LinkInternal> </LinkInternal>
{ ' ' }in this batch { ' ' }in this batch
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Where the batch data is stored" hint="Where the batch data is stored"
> >
Batch data container Batch data container
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value flexDir="column" alignItems="flex-start" rowGap={ 2 }> <DetailedInfo.ItemValue flexDir="column" alignItems="flex-start" rowGap={ 2 }>
<OptimisticL2TxnBatchDA container={ data.batch_data_container } isLoading={ isPlaceholderData }/> <OptimisticL2TxnBatchDA container={ data.batch_data_container } isLoading={ isPlaceholderData }/>
{ data.batch_data_container === 'in_blob4844' && data.blobs && { data.batch_data_container === 'in_blob4844' && data.blobs &&
<OptimisticL2TxnBatchBlobEip4844 blobs={ data.blobs } isLoading={ isPlaceholderData }/> } <OptimisticL2TxnBatchBlobEip4844 blobs={ data.blobs } isLoading={ isPlaceholderData }/> }
...@@ -145,7 +145,7 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => { ...@@ -145,7 +145,7 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => {
) } ) }
{ data.batch_data_container === 'in_celestia' && data.blobs && { data.batch_data_container === 'in_celestia' && data.blobs &&
<OptimisticL2TxnBatchBlobCelestia blobs={ data.blobs } isLoading={ isPlaceholderData }/> } <OptimisticL2TxnBatchBlobCelestia blobs={ data.blobs } isLoading={ isPlaceholderData }/> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</Grid> </Grid>
); );
}; };
......
ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails.tsx
View file @ 1f8e6709
...@@ -13,8 +13,8 @@ import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; ...@@ -13,8 +13,8 @@ import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import ScrollL2TxnBatchDA from 'ui/shared/batch/ScrollL2TxnBatchDA'; import ScrollL2TxnBatchDA from 'ui/shared/batch/ScrollL2TxnBatchDA';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataFetchAlert from 'ui/shared/DataFetchAlert';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import LinkInternal from 'ui/shared/links/LinkInternal'; import LinkInternal from 'ui/shared/links/LinkInternal';
...@@ -62,13 +62,13 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => { ...@@ -62,13 +62,13 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
overflow="hidden" overflow="hidden"
> >
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on L1" hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on L1"
> >
Txn batch number Txn batch number
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
{ data.number } { data.number }
</Skeleton> </Skeleton>
...@@ -80,116 +80,116 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => { ...@@ -80,116 +80,116 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
isPrevDisabled={ data.number === 0 } isPrevDisabled={ data.number === 0 }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Data availability container" hint="Data availability container"
> >
Container Container
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<ScrollL2TxnBatchDA container={ data.data_availability.batch_data_container } isLoading={ isPlaceholderData }/> <ScrollL2TxnBatchDA container={ data.data_availability.batch_data_container } isLoading={ isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Status of this batch" hint="Status of this batch"
> >
Status Status
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<ScrollL2TxnBatchStatus status={ data.confirmation_transaction.hash ? 'Finalized' : 'Committed' } isLoading={ isPlaceholderData }/> <ScrollL2TxnBatchStatus status={ data.confirmation_transaction.hash ? 'Finalized' : 'Committed' } isLoading={ isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Date and time at which batch is finalized to L1" hint="Date and time at which batch is finalized to L1"
> >
Finalized timestamp Finalized timestamp
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.confirmation_transaction.timestamp ? { data.confirmation_transaction.timestamp ?
<DetailsTimestamp timestamp={ data.confirmation_transaction.timestamp }isLoading={ isPlaceholderData }/> : <DetailedInfoTimestamp timestamp={ data.confirmation_transaction.timestamp }isLoading={ isPlaceholderData }/> :
<Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton> <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton>
} }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Number of transactions in this batch" hint="Number of transactions in this batch"
> >
Transactions Transactions
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }> <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
{ data.transaction_count.toLocaleString() } transaction{ data.transaction_count === 1 ? '' : 's' } { data.transaction_count.toLocaleString() } transaction{ data.transaction_count === 1 ? '' : 's' }
</LinkInternal> </LinkInternal>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Number of L2 blocks in this batch" hint="Number of L2 blocks in this batch"
> >
Blocks Blocks
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }> <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }>
{ blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' } { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
</LinkInternal> </LinkInternal>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Date and time at which batch is committed to L1" hint="Date and time at which batch is committed to L1"
> >
Committed timestamp Committed timestamp
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.commitment_transaction.timestamp ? { data.commitment_transaction.timestamp ?
<DetailsTimestamp timestamp={ data.commitment_transaction.timestamp }isLoading={ isPlaceholderData }/> : <DetailedInfoTimestamp timestamp={ data.commitment_transaction.timestamp }isLoading={ isPlaceholderData }/> :
<Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton> <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton>
} }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Hash of L1 transaction this batch was committed in" hint="Hash of L1 transaction this batch was committed in"
> >
Committed transaction hash Committed transaction hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxEntityL1 <TxEntityL1
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hash={ data.commitment_transaction.hash } hash={ data.commitment_transaction.hash }
maxW="100%" maxW="100%"
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="L1 block that includes transaction with this batch commitment" hint="L1 block that includes transaction with this batch commitment"
> >
Committed block Committed block
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<BlockEntityL1 <BlockEntityL1
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
number={ data.commitment_transaction.block_number } number={ data.commitment_transaction.block_number }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="Hash of L1 transaction this batch was finalized in" hint="Hash of L1 transaction this batch was finalized in"
> >
Finalized transaction hash Finalized transaction hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.confirmation_transaction.hash ? ( { data.confirmation_transaction.hash ? (
<TxEntityL1 <TxEntityL1
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
...@@ -197,22 +197,22 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => { ...@@ -197,22 +197,22 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
maxW="100%" maxW="100%"
/> />
) : <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton> } ) : <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
hint="L1 block that includes transaction with this batch finalization data" hint="L1 block that includes transaction with this batch finalization data"
> >
Finalized block Finalized block
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.confirmation_transaction.block_number ? ( { data.confirmation_transaction.block_number ? (
<BlockEntityL1 <BlockEntityL1
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
number={ data.confirmation_transaction.block_number } number={ data.confirmation_transaction.block_number }
/> />
) : <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton> } ) : <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</Grid> </Grid>
); );
}; };
......
ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx
View file @ 1f8e6709
...@@ -14,9 +14,9 @@ import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; ...@@ -14,9 +14,9 @@ import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import Skeleton from 'ui/shared/chakra/Skeleton'; 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 DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; 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 LinkInternal from 'ui/shared/links/LinkInternal';
...@@ -62,12 +62,12 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => { ...@@ -62,12 +62,12 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
overflow="hidden" overflow="hidden"
> >
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Txn batch number Txn batch number
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
{ data.number } { data.number }
</Skeleton> </Skeleton>
...@@ -79,32 +79,32 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => { ...@@ -79,32 +79,32 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
isPrevDisabled={ data.number === 0 } isPrevDisabled={ data.number === 0 }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Status Status
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<VerificationSteps steps={ ZKEVM_L2_TX_BATCH_STATUSES } currentStep={ data.status } isLoading={ isPlaceholderData }/> <VerificationSteps steps={ ZKEVM_L2_TX_BATCH_STATUSES } currentStep={ data.status } isLoading={ isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Timestamp Timestamp
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.timestamp ? <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/> : 'Undefined' } { data.timestamp ? <DetailedInfoTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/> : 'Undefined' }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Verify tx hash Verify tx hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.verify_transaction_hash ? ( { data.verify_transaction_hash ? (
<TxEntityL1 <TxEntityL1
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
...@@ -112,57 +112,57 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => { ...@@ -112,57 +112,57 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
maxW="100%" maxW="100%"
/> />
) : <Text>Pending</Text> } ) : <Text>Pending</Text> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Transactions Transactions
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }> <LinkInternal 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> </LinkInternal>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Global exit root Global exit root
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexWrap="nowrap" flexWrap="nowrap"
> >
<Skeleton isLoaded={ !isPlaceholderData } overflow="hidden"> <Skeleton isLoaded={ !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 }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Acc input hash Acc input hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexWrap="nowrap" flexWrap="nowrap"
> >
<Skeleton isLoaded={ !isPlaceholderData } overflow="hidden"> <Skeleton isLoaded={ !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 }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Sequence tx hash Sequence tx hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.sequence_transaction_hash ? ( { data.sequence_transaction_hash ? (
<TxEntityL1 <TxEntityL1
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
...@@ -170,21 +170,21 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => { ...@@ -170,21 +170,21 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
maxW="100%" maxW="100%"
/> />
) : <Text>Pending</Text> } ) : <Text>Pending</Text> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
State root State root
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexWrap="nowrap" flexWrap="nowrap"
> >
<Skeleton isLoaded={ !isPlaceholderData } overflow="hidden"> <Skeleton isLoaded={ !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 }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</Grid> </Grid>
); );
}; };
......
ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx
View file @ 1f8e6709
...@@ -17,9 +17,9 @@ import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; ...@@ -17,9 +17,9 @@ import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import Skeleton from 'ui/shared/chakra/Skeleton'; 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 DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
import LinkInternal from 'ui/shared/links/LinkInternal'; 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';
...@@ -77,13 +77,13 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { ...@@ -77,13 +77,13 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
overflow="hidden" overflow="hidden"
> >
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on Ethereum." hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on Ethereum."
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Txn batch number Txn batch number
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
{ data.number } { data.number }
</Skeleton> </Skeleton>
...@@ -95,43 +95,43 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { ...@@ -95,43 +95,43 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
isPrevDisabled={ data.number === 0 } isPrevDisabled={ data.number === 0 }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Status is the short interpretation of the batch lifecycle" hint="Status is the short interpretation of the batch lifecycle"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Status Status
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES.slice(1) } currentStep={ data.status } isLoading={ isPlaceholderData }/> <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES.slice(1) } currentStep={ data.status } isLoading={ isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Date and time at which batch is produced" hint="Date and time at which batch is produced"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Timestamp Timestamp
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.timestamp ? <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/> : 'Undefined' } { data.timestamp ? <DetailedInfoTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/> : 'Undefined' }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Number of transactions inside the batch." hint="Number of transactions inside the batch."
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Transactions Transactions
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }> <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
{ txNum } transaction{ txNum === 1 ? '' : 's' } { txNum } transaction{ txNum === 1 ? '' : 's' }
</LinkInternal> </LinkInternal>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
<ZkSyncL2TxnBatchHashesInfo isLoading={ isPlaceholderData } data={ data }/> <ZkSyncL2TxnBatchHashesInfo isLoading={ isPlaceholderData } data={ data }/>
...@@ -155,38 +155,38 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { ...@@ -155,38 +155,38 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
<> <>
<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/> <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="L1 batch root is a hash that summarizes batch data and submitted to the L1" hint="L1 batch root is a hash that summarizes batch data and submitted to the L1"
> >
Root hash Root hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexWrap="nowrap" flexWrap="nowrap"
alignSelf="flex-start" alignSelf="flex-start"
> >
<TruncatedValue value={ data.root_hash }/> <TruncatedValue value={ data.root_hash }/>
<CopyToClipboard text={ data.root_hash }/> <CopyToClipboard text={ data.root_hash }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Gas price for the batch settlement transaction on L1" hint="Gas price for the batch settlement transaction on L1"
> >
L1 gas price L1 gas price
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <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 variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint='The gas price below which the "baseFee" of the batch should not fall' hint='The gas price below which the "baseFee" of the batch should not fall'
> >
L2 fair gas price L2 fair gas price
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <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 variant="secondary">({ BigNumber(data.l2_fair_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
</Grid> </Grid>
......
ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx
View file @ 1f8e6709
...@@ -4,8 +4,8 @@ import React from 'react'; ...@@ -4,8 +4,8 @@ import React from 'react';
import type { ZkSyncBatch } from 'types/api/zkSyncL2'; import type { ZkSyncBatch } from 'types/api/zkSyncL2';
import { Skeleton } from 'toolkit/chakra/skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
interface Props { interface Props {
...@@ -24,13 +24,13 @@ interface Props { ...@@ -24,13 +24,13 @@ interface Props {
const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => { const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Hash of L1 tx on which the batch was committed" hint="Hash of L1 tx on which the batch was committed"
isLoading={ isLoading } isLoading={ isLoading }
> >
Commit tx hash Commit tx hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexDir="column" flexDir="column"
alignItems="flex-start" alignItems="flex-start"
> >
...@@ -44,20 +44,20 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => { ...@@ -44,20 +44,20 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
/> />
{ data.commit_transaction_timestamp && ( { data.commit_transaction_timestamp && (
<Flex alignItems="center" flexWrap="wrap" rowGap={ 3 }> <Flex alignItems="center" flexWrap="wrap" rowGap={ 3 }>
<DetailsTimestamp timestamp={ data.commit_transaction_timestamp } isLoading={ isLoading }/> <DetailedInfoTimestamp timestamp={ data.commit_transaction_timestamp } isLoading={ isLoading }/>
</Flex> </Flex>
) } ) }
</> </>
) : <Skeleton loading={ isLoading }>Pending</Skeleton> } ) : <Skeleton loading={ isLoading }>Pending</Skeleton> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Hash of L1 tx on which the batch was proven" hint="Hash of L1 tx on which the batch was proven"
isLoading={ isLoading } isLoading={ isLoading }
> >
Prove tx hash Prove tx hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexDir="column" flexDir="column"
alignItems="flex-start" alignItems="flex-start"
> >
...@@ -71,20 +71,20 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => { ...@@ -71,20 +71,20 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
/> />
{ data.prove_transaction_timestamp && ( { data.prove_transaction_timestamp && (
<Flex alignItems="center" flexWrap="wrap" rowGap={ 3 }> <Flex alignItems="center" flexWrap="wrap" rowGap={ 3 }>
<DetailsTimestamp timestamp={ data.prove_transaction_timestamp } isLoading={ isLoading }/> <DetailedInfoTimestamp timestamp={ data.prove_transaction_timestamp } isLoading={ isLoading }/>
</Flex> </Flex>
) } ) }
</> </>
) : <Skeleton loading={ isLoading }>Pending</Skeleton> } ) : <Skeleton loading={ isLoading }>Pending</Skeleton> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Hash of L1 tx on which the batch was executed and finalized" hint="Hash of L1 tx on which the batch was executed and finalized"
isLoading={ isLoading } isLoading={ isLoading }
> >
Execute tx hash Execute tx hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexDir="column" flexDir="column"
alignItems="flex-start" alignItems="flex-start"
> >
...@@ -98,12 +98,12 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => { ...@@ -98,12 +98,12 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
/> />
{ data.execute_transaction_timestamp && ( { data.execute_transaction_timestamp && (
<Flex alignItems="center" flexWrap="wrap" rowGap={ 3 }> <Flex alignItems="center" flexWrap="wrap" rowGap={ 3 }>
<DetailsTimestamp timestamp={ data.execute_transaction_timestamp } isLoading={ isLoading }/> <DetailedInfoTimestamp timestamp={ data.execute_transaction_timestamp } isLoading={ isLoading }/>
</Flex> </Flex>
) } ) }
</> </>
) : <Skeleton loading={ isLoading }>Pending</Skeleton> } ) : <Skeleton loading={ isLoading }>Pending</Skeleton> }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/userOp/UserOpCallData.tsx
View file @ 1f8e6709
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import type { UserOp } from 'types/api/userOps'; import type { UserOp } from 'types/api/userOps';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import RawInputData from 'ui/shared/RawInputData'; import RawInputData from 'ui/shared/RawInputData';
import UserOpCallDataSwitch from './UserOpCallDataSwitch'; import UserOpCallDataSwitch from './UserOpCallDataSwitch';
...@@ -35,14 +35,14 @@ const UserOpDecodedCallData = ({ data }: Props) => { ...@@ -35,14 +35,14 @@ const UserOpDecodedCallData = ({ data }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Data that’s passed to the sender for execution" hint="Data that’s passed to the sender for execution"
> >
{ labelText } { labelText }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<RawInputData hex={ callData } rightSlot={ toggler }/> <RawInputData hex={ callData } rightSlot={ toggler }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/userOp/UserOpDecodedCallData.tsx
View file @ 1f8e6709
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import type { UserOp } from 'types/api/userOps'; import type { UserOp } from 'types/api/userOps';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData'; import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
import UserOpCallDataSwitch from './UserOpCallDataSwitch'; import UserOpCallDataSwitch from './UserOpCallDataSwitch';
...@@ -35,17 +35,17 @@ const UserOpDecodedCallData = ({ data }: Props) => { ...@@ -35,17 +35,17 @@ const UserOpDecodedCallData = ({ data }: Props) => {
return ( return (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint={ labelText } hint={ labelText }
> >
{ labelText } { labelText }
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
flexDir={{ base: 'column', lg: 'row' }} flexDir={{ base: 'column', lg: 'row' }}
alignItems={{ base: 'flex-start', lg: 'center' }} alignItems={{ base: 'flex-start', lg: 'center' }}
> >
<LogDecodedInputData data={ callData } rightSlot={ toggler }/> <LogDecodedInputData data={ callData } rightSlot={ toggler }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
); );
}; };
......
ui/userOp/UserOpDetails.tsx
View file @ 1f8e6709
...@@ -16,9 +16,9 @@ import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; ...@@ -16,9 +16,9 @@ import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import Skeleton from 'ui/shared/chakra/Skeleton'; import Skeleton from 'ui/shared/chakra/Skeleton';
import CurrencyValue from 'ui/shared/CurrencyValue'; import CurrencyValue from 'ui/shared/CurrencyValue';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataFetchAlert from 'ui/shared/DataFetchAlert';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
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';
...@@ -69,108 +69,108 @@ const UserOpDetails = ({ query }: Props) => { ...@@ -69,108 +69,108 @@ const UserOpDetails = ({ query }: Props) => {
templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 220px) minmax(0, 1fr)' }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 220px) minmax(0, 1fr)' }}
overflow="hidden" overflow="hidden"
> >
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Unique character string assigned to every User operation" hint="Unique character string assigned to every User operation"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
User operation hash User operation hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData } overflow="hidden"> <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
<UserOpEntity hash={ data.hash } noIcon noLink noCopy={ false }/> <UserOpEntity hash={ data.hash } noIcon noLink noCopy={ false }/>
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The address of the smart contract account" hint="The address of the smart contract account"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Sender Sender
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressStringOrParam address={ data.sender } isLoading={ isPlaceholderData }/> <AddressStringOrParam address={ data.sender } isLoading={ isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Current User operation state" hint="Current User operation state"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Status Status
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<UserOpStatus status={ data.status } isLoading={ isPlaceholderData }/> <UserOpStatus status={ data.status } isLoading={ isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.revert_reason && ( { data.revert_reason && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="The revert reason of the User operation" hint="The revert reason of the User operation"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Revert reason Revert reason
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
wordBreak="break-all" wordBreak="break-all"
whiteSpace="normal" whiteSpace="normal"
> >
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
{ data.revert_reason } { data.revert_reason }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.timestamp && ( { data.timestamp && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Date and time of User operation" hint="Date and time of User operation"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Timestamp Timestamp
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/> <DetailedInfoTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ !config.UI.views.tx.hiddenFields?.tx_fee && ( { !config.UI.views.tx.hiddenFields?.tx_fee && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Total User operation fee" hint="Total User operation fee"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Fee Fee
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<CurrencyValue <CurrencyValue
value={ data.fee } value={ data.fee }
currency={ currencyUnits.ether } currency={ currencyUnits.ether }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Gas limit for the User operation" hint="Gas limit for the User operation"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Gas limit Gas limit
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
{ BigNumber(data.gas).toFormat() } { BigNumber(data.gas).toFormat() }
</Skeleton> </Skeleton>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Actual gas amount used by the User operation" hint="Actual gas amount used by the User operation"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Gas used Gas used
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
{ BigNumber(data.gas_used).toFormat() } { BigNumber(data.gas_used).toFormat() }
</Skeleton> </Skeleton>
...@@ -180,37 +180,37 @@ const UserOpDetails = ({ query }: Props) => { ...@@ -180,37 +180,37 @@ const UserOpDetails = ({ query }: Props) => {
value={ BigNumber(data.gas_used).dividedBy(BigNumber(data.gas)).toNumber() } value={ BigNumber(data.gas_used).dividedBy(BigNumber(data.gas)).toNumber() }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Hash of the transaction this User operation belongs to" hint="Hash of the transaction this User operation belongs to"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Transaction hash Transaction hash
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<TxEntity hash={ data.transaction_hash } isLoading={ isPlaceholderData } noCopy={ false }/> <TxEntity hash={ data.transaction_hash } isLoading={ isPlaceholderData } noCopy={ false }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Block number containing this User operation" hint="Block number containing this User operation"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Block Block
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<BlockEntity number={ Number(data.block_number) } isLoading={ isPlaceholderData }/> <BlockEntity number={ Number(data.block_number) } isLoading={ isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Contract that executes bundles of User operations" hint="Contract that executes bundles of User operations"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
Entry point Entry point
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressStringOrParam address={ data.entry_point } isLoading={ isPlaceholderData }/> <AddressStringOrParam address={ data.entry_point } isLoading={ isPlaceholderData }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ config.features.txInterpretation.isEnabled && <UserOpDetailsActions hash={ data.hash } isUserOpDataLoading={ isPlaceholderData }/> } { config.features.txInterpretation.isEnabled && <UserOpDetailsActions hash={ data.hash } isUserOpDataLoading={ isPlaceholderData }/> }
...@@ -235,158 +235,158 @@ const UserOpDetails = ({ query }: Props) => { ...@@ -235,158 +235,158 @@ const UserOpDetails = ({ query }: Props) => {
<> <>
<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/> <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Gas limit for execution phase" hint="Gas limit for execution phase"
> >
Call gas limit Call gas limit
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ BigNumber(data.call_gas_limit).toFormat() } { BigNumber(data.call_gas_limit).toFormat() }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Gas limit for verification phase" hint="Gas limit for verification phase"
> >
Verification gas limit Verification gas limit
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ BigNumber(data.verification_gas_limit).toFormat() } { BigNumber(data.verification_gas_limit).toFormat() }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Gas to compensate the bundler" hint="Gas to compensate the bundler"
> >
Pre-verification gas Pre-verification gas
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ BigNumber(data.pre_verification_gas).toFormat() } { BigNumber(data.pre_verification_gas).toFormat() }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ !config.UI.views.tx.hiddenFields?.gas_fees && ( { !config.UI.views.tx.hiddenFields?.gas_fees && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Maximum fee per gas " hint="Maximum fee per gas "
> >
Max fee per gas Max fee per gas
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Text>{ BigNumber(data.max_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text> <Text>{ BigNumber(data.max_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
<Text variant="secondary" whiteSpace="pre"> <Text variant="secondary" whiteSpace="pre">
{ space }({ BigNumber(data.max_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) { space }({ BigNumber(data.max_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
</Text> </Text>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Maximum priority fee per gas" hint="Maximum priority fee per gas"
> >
Max priority fee per gas Max priority fee per gas
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<Text>{ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text> <Text>{ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
<Text variant="secondary" whiteSpace="pre"> <Text variant="secondary" whiteSpace="pre">
{ space }({ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) { space }({ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
</Text> </Text>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
{ data.aggregator && ( { data.aggregator && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Helper contract to validate an aggregated signature" hint="Helper contract to validate an aggregated signature"
> >
Aggregator Aggregator
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressStringOrParam address={ data.aggregator }/> <AddressStringOrParam address={ data.aggregator }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.aggregator_signature && ( { data.aggregator_signature && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Aggregator signature" hint="Aggregator signature"
> >
Aggregator signature Aggregator signature
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
{ data.aggregator_signature } { data.aggregator_signature }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="A node (block builder) that handles User operations" hint="A node (block builder) that handles User operations"
> >
Bundler Bundler
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressStringOrParam address={ data.bundler }/> <AddressStringOrParam address={ data.bundler }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
{ data.factory && ( { data.factory && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Smart contract that deploys new smart contract wallets for users" hint="Smart contract that deploys new smart contract wallets for users"
> >
Factory Factory
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressStringOrParam address={ data.factory }/> <AddressStringOrParam address={ data.factory }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
{ data.paymaster && ( { data.paymaster && (
<> <>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Contract to sponsor the gas fees for User operations" hint="Contract to sponsor the gas fees for User operations"
> >
Paymaster Paymaster
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<AddressStringOrParam address={ data.paymaster }/> <AddressStringOrParam address={ data.paymaster }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
</> </>
) } ) }
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Type of the gas fees sponsor" hint="Type of the gas fees sponsor"
> >
Sponsor type Sponsor type
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value> <DetailedInfo.ItemValue>
<UserOpSponsorType sponsorType={ data.sponsor_type }/> <UserOpSponsorType sponsorType={ data.sponsor_type }/>
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Used to validate a User operation along with the nonce during verification" hint="Used to validate a User operation along with the nonce during verification"
> >
Signature Signature
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
wordBreak="break-all" wordBreak="break-all"
whiteSpace="normal" whiteSpace="normal"
> >
{ data.signature } { data.signature }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<DetailsInfoItem.Label <DetailedInfo.ItemLabel
hint="Anti-replay protection; also used as the salt for first-time account creation" hint="Anti-replay protection; also used as the salt for first-time account creation"
> >
Nonce Nonce
</DetailsInfoItem.Label> </DetailedInfo.ItemLabel>
<DetailsInfoItem.Value <DetailedInfo.ItemValue
wordBreak="break-all" wordBreak="break-all"
whiteSpace="normal" whiteSpace="normal"
> >
{ data.nonce } { data.nonce }
</DetailsInfoItem.Value> </DetailedInfo.ItemValue>
<UserOpCallData data={ data }/> <UserOpCallData data={ data }/>
......
ui/userOp/UserOpDetailsActions.tsx
View file @ 1f8e6709
...@@ -2,8 +2,8 @@ import React from 'react'; ...@@ -2,8 +2,8 @@ import React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { TX_INTERPRETATION } from 'stubs/txInterpretation'; import { TX_INTERPRETATION } from 'stubs/txInterpretation';
import DetailsActionsWrapper from 'ui/shared/DetailsActionsWrapper'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider'; import DetailedInfoActionsWrapper from 'ui/shared/DetailedInfo/DetailedInfoActionsWrapper';
import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation'; import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation';
interface Props { interface Props {
...@@ -29,7 +29,7 @@ const TxDetailsActionsInterpretation = ({ hash, isUserOpDataLoading }: Props) => ...@@ -29,7 +29,7 @@ const TxDetailsActionsInterpretation = ({ hash, isUserOpDataLoading }: Props) =>
return ( return (
<> <>
<DetailsActionsWrapper isLoading={ isUserOpDataLoading || interpretationQuery.isPlaceholderData } type="user_op"> <DetailedInfoActionsWrapper isLoading={ isUserOpDataLoading || interpretationQuery.isPlaceholderData } type="user_op">
{ actions.map((action, index: number) => ( { actions.map((action, index: number) => (
<TxInterpretation <TxInterpretation
key={ index } key={ index }
...@@ -38,8 +38,8 @@ const TxDetailsActionsInterpretation = ({ hash, isUserOpDataLoading }: Props) => ...@@ -38,8 +38,8 @@ const TxDetailsActionsInterpretation = ({ hash, isUserOpDataLoading }: Props) =>
/> />
), ),
) } ) }
</DetailsActionsWrapper> </DetailedInfoActionsWrapper>
<DetailsInfoItemDivider/> <DetailedInfo.ItemDivider/>
</> </>
); );
}; };
......
ui/userOp/UserOpSubHeading.tsx
View file @ 1f8e6709
...@@ -8,7 +8,7 @@ import config from 'configs/app'; ...@@ -8,7 +8,7 @@ import config from 'configs/app';
// import type { ResourceError } from 'lib/api/resources'; // import type { ResourceError } from 'lib/api/resources';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { TX_INTERPRETATION } from 'stubs/txInterpretation'; import { TX_INTERPRETATION } from 'stubs/txInterpretation';
import { TX_ACTIONS_BLOCK_ID } from 'ui/shared/DetailsActionsWrapper'; import { TX_ACTIONS_BLOCK_ID } from 'ui/shared/DetailedInfo/DetailedInfoActionsWrapper';
import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity'; import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation'; import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation';
......
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