Skip to content

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

DetailedInfo refactoring

parent 6c0e4529
Expand all 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
This diff is collapsed.
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
This diff is collapsed.
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
This diff is collapsed.
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