diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx index 772fffcf49..233e46897f 100644 --- a/ui/pages/Address.tsx +++ b/ui/pages/Address.tsx @@ -75,7 +75,9 @@ const AddressPageContent = () => { }, }); - const isSafeAddress = useIsSafeAddress(!addressQuery.isPlaceholderData && addressQuery.data?.is_contract ? hash : undefined); + const isSafeAddress = useIsSafeAddress( + !addressQuery.isPlaceholderData && addressQuery.data?.is_contract ? hash : undefined, + ); const safeIconColor = useColorModeValue('black', 'white'); const contractTabs = useContractTabs(addressQuery.data); @@ -150,44 +152,52 @@ const AddressPageContent = () => { component: , } : undefined, - addressQuery.data?.is_contract ? { - id: 'contract', - title: () => { - if (addressQuery.data.is_verified) { - return ( - <> - Contract - - - ); - } + addressQuery.data?.is_contract ? + { + id: 'contract', + title: () => { + if (addressQuery.data.is_verified) { + return ( + <> + Contract + + + ); + } - return 'Contract'; - }, - component: , - subTabs: contractTabs.map(tab => tab.id), - } : undefined, + return 'Contract'; + }, + component: , + subTabs: contractTabs.map((tab) => tab.id), + } : + undefined, ].filter(Boolean); }, [ addressQuery.data, contractTabs, addressTabsCountersQuery.data, userOpsAccountQuery.data ]); - const isLoading = addressQuery.isPlaceholderData || (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData); + const isLoading = + addressQuery.isPlaceholderData || (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData); const tags = ( ); - const content = (addressQuery.isError || addressQuery.isDegradedData) ? null : ; + const content = + addressQuery.isError || addressQuery.isDegradedData ? null : ; const backLink = React.useMemo(() => { const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/accounts'); @@ -225,17 +235,21 @@ const AddressPageContent = () => { iconColor={ isSafeAddress ? safeIconColor : undefined } mr={ 4 } /> - { !isLoading && addressQuery.data?.is_contract && addressQuery.data.token && - } + { !isLoading && addressQuery.data?.is_contract && addressQuery.data.token && ( + + ) } { !isLoading && !addressQuery.data?.is_contract && config.features.account.isEnabled && ( ) } - { addressQuery.data?.is_contract && addressQuery.data?.is_verified && config.UI.views.address.solidityscanEnabled && } - { !isLoading && addressQuery.data && config.features.nameService.isEnabled && - } + { addressQuery.data?.is_contract && + addressQuery.data?.is_verified && + config.UI.views.address.solidityscanEnabled && } + { !isLoading && addressQuery.data && config.features.nameService.isEnabled && ( + + ) } ); @@ -253,13 +267,8 @@ const AddressPageContent = () => { { config.features.metasuites.isEnabled && } { !isLoading && !addressQuery.data?.is_contract && config.chain.stakingOverviewUrl && ( - - + + Staking Overview @@ -267,10 +276,7 @@ const AddressPageContent = () => { { /* should stay before tabs to scroll up with pagination */ } - { (isLoading || addressTabsCountersQuery.isPlaceholderData) ? - : - content - } + { isLoading || addressTabsCountersQuery.isPlaceholderData ? : content } ); }; diff --git a/ui/stakingTxs/StakingTxsTable.tsx b/ui/stakingTxs/StakingTxsTable.tsx index 2af2cea87e..52a9f92869 100644 --- a/ui/stakingTxs/StakingTxsTable.tsx +++ b/ui/stakingTxs/StakingTxsTable.tsx @@ -15,14 +15,9 @@ type Props = { top: number; currentAddress?: string; isLoading?: boolean; -} +}; -const StakingTxsTable = ({ - txs, - top, - currentAddress, - isLoading, -}: Props) => { +const StakingTxsTable = ({ txs, top, currentAddress, isLoading }: Props) => { const { cutRef, renderedItemsNum } = useLazyRenderedList(txs, !isLoading); return ( @@ -34,6 +29,7 @@ const StakingTxsTable = ({ Block Validator From + Value ONE diff --git a/ui/stakingTxs/StakingTxsTableItem.tsx b/ui/stakingTxs/StakingTxsTableItem.tsx index fce13bae01..3cf512cbc8 100644 --- a/ui/stakingTxs/StakingTxsTableItem.tsx +++ b/ui/stakingTxs/StakingTxsTableItem.tsx @@ -6,6 +6,7 @@ import type { StakingTransaction } from 'types/api/stakingTransaction'; import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; +import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import StakingTxEntity from 'ui/shared/entities/stakingTx/StakingTxEntity'; @@ -40,11 +41,7 @@ const StakingTxsTableItem = ({ tx, currentAddress, isLoading }: Props) => { truncation="constant_long" /> { tx.timestamp && ( - + { timeAgo } ) } @@ -54,14 +51,7 @@ const StakingTxsTableItem = ({ tx, currentAddress, isLoading }: Props) => { - + { tx.msg_validator_address ? ( @@ -86,6 +76,15 @@ const StakingTxsTableItem = ({ tx, currentAddress, isLoading }: Props) => { mode="compact" /> + + + ); };