diff --git a/lib/block/getBlockTotalReward.ts b/lib/block/getBlockTotalReward.ts index 5fcf34f4f1..3edebaea61 100644 --- a/lib/block/getBlockTotalReward.ts +++ b/lib/block/getBlockTotalReward.ts @@ -2,7 +2,8 @@ import BigNumber from 'bignumber.js'; import type { Block } from 'types/api/block'; -import { WEI, ZERO } from 'toolkit/utils/consts'; +import { ZERO } from 'toolkit/utils/consts'; +import { WEI } from 'ui/shared/value/utils'; export default function getBlockTotalReward(block: Block) { const totalReward = block.rewards diff --git a/lib/getCurrencyValue.ts b/lib/getCurrencyValue.ts deleted file mode 100644 index 1a6acc6b61..0000000000 --- a/lib/getCurrencyValue.ts +++ /dev/null @@ -1,32 +0,0 @@ -import BigNumber from 'bignumber.js'; - -import { ZERO } from 'toolkit/utils/consts'; - -interface Params { - value: string; - exchangeRate?: string | null; - accuracy?: number; - accuracyUsd?: number; - decimals?: string | null; -} - -export default function getCurrencyValue({ value, accuracy, accuracyUsd, decimals, exchangeRate }: Params) { - const valueCurr = BigNumber(value).div(BigNumber(10 ** Number(decimals || '18'))); - const valueResult = accuracy ? valueCurr.dp(accuracy).toFormat() : valueCurr.toFormat(); - - let usdResult: string | undefined; - let usdBn = ZERO; - - if (exchangeRate) { - const exchangeRateBn = new BigNumber(exchangeRate); - usdBn = valueCurr.times(exchangeRateBn); - if (accuracyUsd && !usdBn.isEqualTo(0)) { - const usdBnDp = usdBn.dp(accuracyUsd); - usdResult = usdBnDp.isEqualTo(0) ? usdBn.precision(accuracyUsd).toFormat() : usdBnDp.toFormat(); - } else { - usdResult = usdBn.toFormat(); - } - } - - return { valueCurr, valueStr: valueResult, usd: usdResult, usdBn }; -} diff --git a/lib/getValueWithUnit.tsx b/lib/getValueWithUnit.tsx deleted file mode 100644 index 74be427a27..0000000000 --- a/lib/getValueWithUnit.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import BigNumber from 'bignumber.js'; - -import type { Unit } from 'types/unit'; - -import { WEI, GWEI } from 'toolkit/utils/consts'; - -export default function getValueWithUnit(value: string | number, unit: Unit = 'wei') { - let unitBn: BigNumber.Value; - switch (unit) { - case 'wei': - unitBn = WEI; - break; - case 'gwei': - unitBn = GWEI; - break; - default: - unitBn = new BigNumber(1); - } - - const valueBn = new BigNumber(value); - const valueCurr = valueBn.dividedBy(unitBn); - return valueCurr; -} diff --git a/lib/units.ts b/lib/units.ts index 8d3853aefd..c7f58bbea6 100644 --- a/lib/units.ts +++ b/lib/units.ts @@ -1,6 +1,5 @@ -import type { Unit } from 'types/unit'; - import config from 'configs/app'; +import type { Unit } from 'ui/shared/value/utils'; const weiName = config.chain.currency.weiName || 'wei'; const gweiName = config.chain.currency.gweiName || `G${ weiName }`; diff --git a/ui/shared/TruncatedValue.tsx b/toolkit/components/truncation/TruncatedText.tsx similarity index 54% rename from ui/shared/TruncatedValue.tsx rename to toolkit/components/truncation/TruncatedText.tsx index 66b7aa43a4..a3526f968c 100644 --- a/ui/shared/TruncatedValue.tsx +++ b/toolkit/components/truncation/TruncatedText.tsx @@ -1,33 +1,34 @@ -import { chakra } from '@chakra-ui/react'; +// Arbitrary text that will be truncated if there is not enough space in the container + import type { Placement } from '@floating-ui/dom'; import React from 'react'; -import { Skeleton } from 'toolkit/chakra/skeleton'; -import { Tooltip } from 'toolkit/chakra/tooltip'; -import { TruncatedTextTooltip } from 'toolkit/components/truncation/TruncatedTextTooltip'; +import type { SkeletonTextProps } from '../../chakra/skeleton'; +import { Skeleton } from '../../chakra/skeleton'; +import { Tooltip } from '../../chakra/tooltip'; +import { TruncatedTextTooltip } from './TruncatedTextTooltip'; -interface Props { - className?: string; - isLoading?: boolean; - value: string; +export interface TruncatedTextProps extends Omit { + text: string; + loading?: boolean; // tooltipContent is used to display the tooltip value different from the truncated value tooltipContent?: string; tooltipPlacement?: Placement; tooltipInteractive?: boolean; } -const TruncatedValue = ({ className, isLoading, value, tooltipPlacement, tooltipInteractive, tooltipContent }: Props) => { +export const TruncatedText = ({ text, tooltipPlacement, tooltipInteractive, tooltipContent, loading, ...rest }: TruncatedTextProps) => { const valueElement = ( - { value } + { text } ); @@ -45,10 +46,8 @@ const TruncatedValue = ({ className, isLoading, value, tooltipPlacement, tooltip }; return ( - + { valueElement } ); }; - -export default React.memo(chakra(TruncatedValue)); diff --git a/toolkit/package/src/index.ts b/toolkit/package/src/index.ts index ac907c5b3b..940cef4d16 100644 --- a/toolkit/package/src/index.ts +++ b/toolkit/package/src/index.ts @@ -106,6 +106,7 @@ export * from '../../components/forms/utils'; export * from '../../components/forms/validators'; export * from '../../components/loaders/ContentLoader'; export * from '../../components/truncation/TruncatedTextTooltip'; +export * from '../../components/truncation/TruncatedText'; // Export utils export { default as getComponentDisplayName } from '../../utils/getComponentDisplayName'; diff --git a/toolkit/theme/recipes/tooltip.recipe.ts b/toolkit/theme/recipes/tooltip.recipe.ts index 3fbe1c466a..a6c9267dc6 100644 --- a/toolkit/theme/recipes/tooltip.recipe.ts +++ b/toolkit/theme/recipes/tooltip.recipe.ts @@ -12,7 +12,7 @@ export const recipe = defineSlotRecipe({ textAlign: 'center', boxShadow: 'size.md', zIndex: 'tooltip', - maxW: '320px', + maxW: { base: 'calc(100vw - 8px)', lg: '320px' }, transformOrigin: 'var(--transform-origin)', _open: { animationStyle: 'scale-fade-in', diff --git a/toolkit/utils/consts.ts b/toolkit/utils/consts.ts index 10f889ad0b..c3c7593da3 100644 --- a/toolkit/utils/consts.ts +++ b/toolkit/utils/consts.ts @@ -1,8 +1,5 @@ import BigNumber from 'bignumber.js'; -export const WEI = new BigNumber(10 ** 18); -export const GWEI = new BigNumber(10 ** 9); -export const WEI_IN_GWEI = WEI.dividedBy(GWEI); export const ZERO = new BigNumber(0); export const SECOND = 1_000; diff --git a/types/unit.ts b/types/unit.ts deleted file mode 100644 index 7faa4639c3..0000000000 --- a/types/unit.ts +++ /dev/null @@ -1 +0,0 @@ -export type Unit = 'wei' | 'gwei' | 'ether'; diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png index 04806a8bc8..02770dd1a7 100644 Binary files a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png and b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png index 5824a775cf..726f5a236e 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png differ diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_filecoin-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_filecoin-1.png index e4d806599f..671b79c397 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_filecoin-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_filecoin-1.png differ diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png index 8c0c6f29a6..a82ac0414e 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png differ diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-filecoin-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-filecoin-1.png index de1e328919..bf82b5e757 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-filecoin-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-filecoin-1.png differ diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png index b971528353..137e323dbd 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png differ diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-with-widgets-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-with-widgets-1.png index c0dd88c3a3..d4d50971f8 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-with-widgets-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-with-widgets-1.png differ diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png index c22ea804e2..a8fd32f153 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png differ diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_with-widgets-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_with-widgets-1.png index 7cc5b3539d..5fdb8b033e 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_with-widgets-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_with-widgets-1.png differ diff --git a/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_default_base-view-mobile-1.png b/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_default_base-view-mobile-1.png index 032197b9f7..369437b0d3 100644 Binary files a/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_default_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png index 1da622de6a..b52f60d1fd 100644 Binary files a/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressEpochRewards.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png b/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png index fbf9343dd2..2276ea1c94 100644 Binary files a/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-pagination-1.png index b7c89c818b..8ea292f43c 100644 Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-pagination-1.png differ diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_without-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_without-pagination-1.png index aa580d8ed2..03ede43849 100644 Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_without-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_without-pagination-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png index 8f85ac997f..bcbd7a6104 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png index 81c72cb834..a485944afb 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png index b3622279e2..5e3085aea0 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png index 046230edc9..c3cbb09aa0 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png index 28b1cdab88..dcb2a69e36 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png index 377e577544..d6b2db2ef7 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png index 77150d8f98..864437f7df 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png index 81c55a576e..45de633f0e 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_native-token-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_native-token-1.png index 52ef680e20..4c7e835b05 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_native-token-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_native-token-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png index 9e77d14990..34e9628fa5 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-1.png index 130351c71b..186fe086de 100644 Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-1.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-1.png differ diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png index f7feb2c03b..468e3e2a57 100644 Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png differ diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png index 655e720b67..e2a6551ea6 100644 Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-base-view-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-base-view-1.png index acef8bc54b..86e91c2aa4 100644 Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-base-view-1.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-base-view-1.png differ diff --git a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx index ead8786d73..3a247c9069 100644 --- a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx +++ b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx @@ -12,6 +12,7 @@ import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import SimpleValue from 'ui/shared/value/SimpleValue'; type Props = Block & { page: number; @@ -58,9 +59,12 @@ const AddressBlocksValidatedListItem = (props: Props) => { { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && ( Reward { currencyUnits.ether } - - { totalReward.toFixed() } - + ) } diff --git a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx index d786ce300d..98cfb18061 100644 --- a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx +++ b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx @@ -11,6 +11,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import SimpleValue from 'ui/shared/value/SimpleValue'; type Props = Block & { page: number; @@ -59,9 +60,11 @@ const AddressBlocksValidatedTableItem = (props: Props) => { { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && ( - - { totalReward.toFixed() } - + ) } diff --git a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx index c478b50968..e1e6f1cb77 100644 --- a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx +++ b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx @@ -5,13 +5,15 @@ import React from 'react'; import type { AddressCoinBalanceHistoryItem } from 'types/api/address'; import type { ClusterChainConfig } from 'types/multichain'; -import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; -import { WEI, ZERO } from 'toolkit/utils/consts'; +import { ZERO } from 'toolkit/utils/consts'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; +import SimpleValue from 'ui/shared/value/SimpleValue'; +import { WEI } from 'ui/shared/value/utils'; type Props = AddressCoinBalanceHistoryItem & { page: number; @@ -26,13 +28,18 @@ const AddressCoinBalanceListItem = (props: Props) => { return ( - - { BigNumber(props.value).div(WEI).dp(8).toFormat() } { currencyUnits.ether } - + - { deltaBn.dp(8).toFormat() } + { isPositiveDelta ? : } diff --git a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx index f5fda8956c..795b5d9dad 100644 --- a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx +++ b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx @@ -7,11 +7,14 @@ import type { ClusterChainConfig } from 'types/multichain'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; -import { WEI, ZERO } from 'toolkit/utils/consts'; +import { ZERO } from 'toolkit/utils/consts'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ChainIcon from 'ui/shared/externalChains/ChainIcon'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; +import SimpleValue from 'ui/shared/value/SimpleValue'; +import { WEI } from 'ui/shared/value/utils'; type Props = AddressCoinBalanceHistoryItem & { page: number; @@ -59,15 +62,21 @@ const AddressCoinBalanceTableItem = (props: Props) => { /> - - { BigNumber(props.value).div(WEI).dp(8).toFormat() } - + - { deltaBn.dp(8).toFormat() } + { isPositiveDelta ? : } diff --git a/ui/address/details/AddressBalance.tsx b/ui/address/details/AddressBalance.tsx index 044ffc011c..dd26ef049d 100644 --- a/ui/address/details/AddressBalance.tsx +++ b/ui/address/details/AddressBalance.tsx @@ -4,14 +4,13 @@ import React from 'react'; import type { SocketMessage } from 'lib/socket/types'; import type { Address } from 'types/api/address'; -import config from 'configs/app'; import { getResourceKey } from 'lib/api/useApiQuery'; import useSocketChannel from 'lib/socket/useSocketChannel'; import useSocketMessage from 'lib/socket/useSocketMessage'; import { currencyUnits } from 'lib/units'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import NativeTokenIcon from 'ui/shared/NativeTokenIcon'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { data: Pick; @@ -74,18 +73,11 @@ const AddressBalance = ({ data, isLoading }: Props) => { Balance - } + startElement={ } + loading={ isLoading } /> diff --git a/ui/address/details/AddressCeloAccount.tsx b/ui/address/details/AddressCeloAccount.tsx index 26c1863e7d..90a3ccae43 100644 --- a/ui/address/details/AddressCeloAccount.tsx +++ b/ui/address/details/AddressCeloAccount.tsx @@ -1,17 +1,16 @@ -import BigNumber from 'bignumber.js'; import { upperFirst } from 'es-toolkit'; import React from 'react'; import type { Address } from 'types/api/address'; import type { ExcludeNull, ExcludeUndefined } from 'types/utils'; -import config from 'configs/app'; import { currencyUnits } from 'lib/units'; import { Link } from 'toolkit/chakra/link'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import * as DetailedInfoItemBreakdown from 'ui/shared/DetailedInfo/DetailedInfoItemBreakdown'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { isLoading?: boolean; @@ -28,7 +27,7 @@ const AddressCeloAccount = ({ isLoading, data }: Props) => { Celo account - { data.name && } + { data.name && } { hint="Link to additional information published by the account owner" > - + ) } @@ -52,14 +51,14 @@ const AddressCeloAccount = ({ isLoading, data }: Props) => { label={ `Locked ${ currencyUnits.ether }` } hint="Total amount of CELO locked by this account (used for staking or governance)" > - + - + { data.vote_signer_address && ( diff --git a/ui/address/details/AddressNetWorth.tsx b/ui/address/details/AddressNetWorth.tsx index 0303f8f891..a83f151944 100644 --- a/ui/address/details/AddressNetWorth.tsx +++ b/ui/address/details/AddressNetWorth.tsx @@ -4,10 +4,12 @@ import React from 'react'; import type { Address } from 'types/api/address'; import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; import * as mixpanel from 'lib/mixpanel/index'; import { Skeleton } from 'toolkit/chakra/skeleton'; import TextSeparator from 'ui/shared/TextSeparator'; +import calculateUsdValue from 'ui/shared/value/calculateUsdValue'; +import SimpleValue from 'ui/shared/value/SimpleValue'; +import { DEFAULT_ACCURACY_USD } from 'ui/shared/value/utils'; import { getTokensTotalInfo } from '../utils/tokenUtils'; import useFetchTokens from '../utils/useFetchTokens'; @@ -24,16 +26,13 @@ type Props = { const AddressNetWorth = ({ addressData, isLoading, addressHash }: Props) => { const { data, isError, isPending } = useFetchTokens({ hash: addressData?.hash, enabled: addressData?.has_tokens }); - const { usdBn: nativeUsd } = getCurrencyValue({ - value: addressData?.coin_balance || '0', - accuracy: 8, - accuracyUsd: 2, + const { usdBn: nativeUsd } = calculateUsdValue({ + amount: addressData?.coin_balance || '0', exchangeRate: addressData?.exchange_rate, decimals: String(config.chain.currency.decimals), }); const { usd, isOverflow } = getTokensTotalInfo(data); - const prefix = isOverflow ? '>' : ''; const totalUsd = nativeUsd.plus(usd); @@ -71,9 +70,9 @@ const AddressNetWorth = ({ addressData, isLoading, addressHash }: Props) => { return ( - - { (isError || !addressData?.exchange_rate) ? 'N/A' : `${ prefix }$${ totalUsd.toFormat(2) }` } - + { (isError || !addressData?.exchange_rate) ? + N/A : + } { multichainItems } ); diff --git a/ui/address/epochRewards/AddressEpochRewardsListItem.tsx b/ui/address/epochRewards/AddressEpochRewardsListItem.tsx index c770b521d5..5d5c2457c1 100644 --- a/ui/address/epochRewards/AddressEpochRewardsListItem.tsx +++ b/ui/address/epochRewards/AddressEpochRewardsListItem.tsx @@ -2,14 +2,12 @@ import React from 'react'; import type { AddressEpochRewardsItem } from 'types/api/address'; -import getCurrencyValue from 'lib/getCurrencyValue'; -import { Skeleton } from 'toolkit/chakra/skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import EpochEntity from 'ui/shared/entities/epoch/EpochEntity'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import TokenValue from 'ui/shared/value/TokenValue'; type Props = { item: AddressEpochRewardsItem; @@ -17,7 +15,6 @@ type Props = { }; const AddressEpochRewardsListItem = ({ item, isLoading }: Props) => { - const { valueStr } = getCurrencyValue({ value: item.amount, accuracy: 2, decimals: item.token.decimals }); return ( @@ -51,10 +48,11 @@ const AddressEpochRewardsListItem = ({ item, isLoading }: Props) => { Value - - { valueStr } - - + diff --git a/ui/address/epochRewards/AddressEpochRewardsTableItem.tsx b/ui/address/epochRewards/AddressEpochRewardsTableItem.tsx index c03a0d2fb1..dd688aa738 100644 --- a/ui/address/epochRewards/AddressEpochRewardsTableItem.tsx +++ b/ui/address/epochRewards/AddressEpochRewardsTableItem.tsx @@ -5,14 +5,12 @@ import type { AddressEpochRewardsItem } from 'types/api/address'; import { route } from 'nextjs-routes'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Link } from 'toolkit/chakra/link'; -import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import TokenValue from 'ui/shared/value/TokenValue'; type Props = { item: AddressEpochRewardsItem; @@ -20,7 +18,6 @@ type Props = { }; const AddressEpochRewardsTableItem = ({ item, isLoading }: Props) => { - const { valueStr } = getCurrencyValue({ value: item.amount, decimals: item.token.decimals }); return ( @@ -41,10 +38,13 @@ const AddressEpochRewardsTableItem = ({ item, isLoading }: Props) => { - - { valueStr } - - + ); diff --git a/ui/address/mud/AddressMudRecord.tsx b/ui/address/mud/AddressMudRecord.tsx index f8fd07e222..77e17a8eb3 100644 --- a/ui/address/mud/AddressMudRecord.tsx +++ b/ui/address/mud/AddressMudRecord.tsx @@ -7,8 +7,8 @@ import dayjs from 'lib/date/dayjs'; import getQueryParamString from 'lib/router/getQueryParamString'; import { TableRoot, TableRow, TableCell } from 'toolkit/chakra/table'; import { ContentLoader } from 'toolkit/components/loaders/ContentLoader'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; -import TruncatedValue from 'ui/shared/TruncatedValue'; import AddressMudBreadcrumbs from './AddressMudBreadcrumbs'; import AddressMudRecordValues from './AddressMudRecordValues'; @@ -61,7 +61,7 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true }: Props) = - + { index === 0 && { dayjs(data.record.timestamp).format('lll') } } diff --git a/ui/address/tokenSelect/TokenSelectButton.tsx b/ui/address/tokenSelect/TokenSelectButton.tsx index 2e1dcf0aa2..9c4ac8f7bc 100644 --- a/ui/address/tokenSelect/TokenSelectButton.tsx +++ b/ui/address/tokenSelect/TokenSelectButton.tsx @@ -6,7 +6,7 @@ import type { FormattedData } from './types'; import * as mixpanel from 'lib/mixpanel/index'; import { Button } from 'toolkit/chakra/button'; import { Skeleton } from 'toolkit/chakra/skeleton'; -import { space } from 'toolkit/utils/htmlEntities'; +import { space, thinsp } from 'toolkit/utils/htmlEntities'; import IconSvg from 'ui/shared/IconSvg'; import { getTokensTotalInfo } from '../utils/tokenUtils'; @@ -20,7 +20,7 @@ interface Props { const TokenSelectButton = ({ isOpen, isLoading, data, ...rest }: Props, ref: React.ForwardedRef) => { const { usd, num, isOverflow } = getTokensTotalInfo(data); - const prefix = isOverflow ? '>' : ''; + const prefix = isOverflow ? ` >${ thinsp }` : ''; const handleClick = React.useCallback(() => { if (isLoading && !isOpen) { diff --git a/ui/address/tokenSelect/TokenSelectItem.tsx b/ui/address/tokenSelect/TokenSelectItem.tsx index ea292f1a0d..4432667865 100644 --- a/ui/address/tokenSelect/TokenSelectItem.tsx +++ b/ui/address/tokenSelect/TokenSelectItem.tsx @@ -6,11 +6,11 @@ import { route } from 'nextjs/routes'; import config from 'configs/app'; import multichainConfig from 'configs/multichain'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Link } from 'toolkit/chakra/link'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import NativeTokenTag from 'ui/shared/celo/NativeTokenTag'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import calculateUsdValue from 'ui/shared/value/calculateUsdValue'; import type { TokenEnhancedData } from '../utils/tokenUtils'; @@ -41,14 +41,14 @@ const TokenSelectItem = ({ data }: Props) => { return ( <> - + { data.token.exchange_rate && @{ Number(data.token.exchange_rate).toLocaleString() } } ); } case 'ERC-721': { const text = `${ BigNumber(data.value).toFormat() } ${ data.token.symbol || '' }`; - return ; + return ; } case 'ERC-1155': { return ( @@ -73,7 +73,7 @@ const TokenSelectItem = ({ data }: Props) => { { data.value !== null && ( { data.token.decimals ? - getCurrencyValue({ value: data.value, decimals: data.token.decimals, accuracy: 2 }).valueStr : + calculateUsdValue({ amount: data.value, decimals: data.token.decimals }).valueStr : BigNumber(data.value).toFormat() } @@ -115,8 +115,8 @@ const TokenSelectItem = ({ data }: Props) => { /> { isNativeToken && } { data.usd && ( - item.value)) || type === 'ERC-1155' || (type === 'ERC-20' && tokenInfo.items.some(({ usd }) => usd)); - const numPrefix = tokenInfo.isOverflow ? '>' : ''; + const numPrefix = tokenInfo.isOverflow ? `>${ thinsp }` : ''; return ( diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png index e42105f40f..0506bf5eb1 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png differ diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png index d10151454c..e4743da4e9 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png differ diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png index 8334c182f0..12d0b30e4c 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png differ diff --git a/ui/address/tokens/ERC20TokensListItem.tsx b/ui/address/tokens/ERC20TokensListItem.tsx index 096bffa850..e8e52d4ab9 100644 --- a/ui/address/tokens/ERC20TokensListItem.tsx +++ b/ui/address/tokens/ERC20TokensListItem.tsx @@ -1,26 +1,29 @@ import { Flex, HStack } from '@chakra-ui/react'; +import { BigNumber } from 'bignumber.js'; import React from 'react'; import type { AddressTokensErc20Item } from './types'; import config from 'configs/app'; import multichainConfig from 'configs/multichain'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Skeleton } from 'toolkit/chakra/skeleton'; import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet'; import NativeTokenTag from 'ui/shared/celo/NativeTokenTag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; +import calculateUsdValue from 'ui/shared/value/calculateUsdValue'; +import SimpleValue from 'ui/shared/value/SimpleValue'; +import { DEFAULT_ACCURACY_USD } from 'ui/shared/value/utils'; type Props = AddressTokensErc20Item & { isLoading: boolean }; const ERC20TokensListItem = ({ token, value, isLoading, chain_values: chainValues }: Props) => { const { - valueStr: tokenQuantity, - usd: tokenValue, - } = getCurrencyValue({ value: value, exchangeRate: token.exchange_rate, decimals: token.decimals, accuracy: 8, accuracyUsd: 2 }); + valueBn: tokenQuantity, + usdBn: tokenValue, + } = calculateUsdValue({ amount: value, exchangeRate: token.exchange_rate, decimals: token.decimals }); const isNativeToken = config.UI.views.address.nativeTokenAddress && token.address_hash.toLowerCase() === config.UI.views.address.nativeTokenAddress.toLowerCase(); @@ -61,23 +64,35 @@ const ERC20TokensListItem = ({ token, value, isLoading, chain_values: chainValue { token.exchange_rate !== undefined && token.exchange_rate !== null && ( Price - - { `$${ Number(token.exchange_rate).toLocaleString() }` } - + ) } Quantity - - { tokenQuantity } - + - { tokenValue !== undefined && ( + { token.exchange_rate && ( Value - - ${ tokenValue } - + ) } diff --git a/ui/address/tokens/ERC20TokensTableItem.tsx b/ui/address/tokens/ERC20TokensTableItem.tsx index b1eca4666b..883f1e0fc0 100644 --- a/ui/address/tokens/ERC20TokensTableItem.tsx +++ b/ui/address/tokens/ERC20TokensTableItem.tsx @@ -1,17 +1,19 @@ import { Flex, HStack } from '@chakra-ui/react'; +import { BigNumber } from 'bignumber.js'; import React from 'react'; import type { AddressTokensErc20Item } from './types'; import config from 'configs/app'; import multichainConfig from 'configs/multichain'; -import getCurrencyValue from 'lib/getCurrencyValue'; -import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet'; import NativeTokenTag from 'ui/shared/celo/NativeTokenTag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; +import calculateUsdValue from 'ui/shared/value/calculateUsdValue'; +import SimpleValue from 'ui/shared/value/SimpleValue'; +import { DEFAULT_ACCURACY_USD } from 'ui/shared/value/utils'; type Props = AddressTokensErc20Item & { isLoading: boolean }; @@ -23,9 +25,9 @@ const ERC20TokensTableItem = ({ }: Props) => { const { - valueStr: tokenQuantity, - usd: tokenValue, - } = getCurrencyValue({ value: value, exchangeRate: token.exchange_rate, decimals: token.decimals, accuracy: 8, accuracyUsd: 2 }); + valueBn: tokenQuantity, + usdBn: tokenValue, + } = calculateUsdValue({ amount: value, exchangeRate: token.exchange_rate, decimals: token.decimals }); const isNativeToken = config.UI.views.address.nativeTokenAddress && token.address_hash.toLowerCase() === config.UI.views.address.nativeTokenAddress.toLowerCase(); @@ -68,19 +70,32 @@ const ERC20TokensTableItem = ({ - - { token.exchange_rate && `$${ Number(token.exchange_rate).toLocaleString() }` } - + { token.exchange_rate ? ( + + ) : null } - - { tokenQuantity } - + - - { tokenValue && `$${ tokenValue }` } - + { token.exchange_rate && ( + + ) } ); diff --git a/ui/address/tokens/NFTItem.tsx b/ui/address/tokens/NFTItem.tsx index f3071ceb68..60139865a5 100644 --- a/ui/address/tokens/NFTItem.tsx +++ b/ui/address/tokens/NFTItem.tsx @@ -6,7 +6,6 @@ import type { ClusterChainConfig } from 'types/multichain'; import { route } from 'nextjs/routes'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { getTokenTypeName } from 'lib/token/tokenTypes'; import { Link } from 'toolkit/chakra/link'; import { Skeleton } from 'toolkit/chakra/skeleton'; @@ -14,13 +13,14 @@ import { Tag } from 'toolkit/chakra/tag'; import NftEntity from 'ui/shared/entities/nft/NftEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import NftMedia from 'ui/shared/nft/NftMedia'; +import calculateUsdValue from 'ui/shared/value/calculateUsdValue'; import NFTItemContainer from './NFTItemContainer'; type Props = AddressNFT & { isLoading: boolean; withTokenLink?: boolean; chain?: ClusterChainConfig }; const NFTItem = ({ token, value, isLoading, withTokenLink, chain, ...tokenInstance }: Props) => { - const valueResult = token.decimals && value ? getCurrencyValue({ value, decimals: token.decimals, accuracy: 2 }).valueStr : value; + const valueResult = token.decimals && value ? calculateUsdValue({ amount: value, decimals: token.decimals, accuracy: 2 }).valueStr : value; const tokenInstanceLink = tokenInstance.id ? route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address_hash, id: tokenInstance.id } }, chain ? { chain } : undefined) : undefined; diff --git a/ui/address/tokens/TokenBalances.tsx b/ui/address/tokens/TokenBalances.tsx index 31a6fec275..d699c1de6a 100644 --- a/ui/address/tokens/TokenBalances.tsx +++ b/ui/address/tokens/TokenBalances.tsx @@ -4,12 +4,13 @@ import React from 'react'; import config from 'configs/app'; import useApiQuery from 'lib/api/useApiQuery'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { currencyUnits } from 'lib/units'; import { ZERO } from 'toolkit/utils/consts'; +import { thinsp } from 'toolkit/utils/htmlEntities'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import IconSvg from 'ui/shared/IconSvg'; import NativeTokenIcon from 'ui/shared/NativeTokenIcon'; +import calculateUsdValue from 'ui/shared/value/calculateUsdValue'; import { getTokensTotalInfo } from '../utils/tokenUtils'; import useFetchTokens from '../utils/useFetchTokens'; @@ -32,16 +33,14 @@ const TokenBalances = () => { } const addressData = addressQuery.data; - const { valueStr: nativeValue, usdBn: nativeUsd } = getCurrencyValue({ - value: addressData?.coin_balance || '0', - accuracy: 8, - accuracyUsd: 2, + const { valueStr: nativeValue, usdBn: nativeUsd } = calculateUsdValue({ + amount: addressData?.coin_balance || '0', exchangeRate: addressData?.exchange_rate, decimals: String(config.chain.currency.decimals), }); const tokensInfo = getTokensTotalInfo(tokenQuery.data); - const prefix = tokensInfo.isOverflow ? '>' : ''; + const prefix = tokensInfo.isOverflow ? `>${ thinsp }` : ''; const totalUsd = nativeUsd.plus(tokensInfo.usd); const tokensNumText = tokensInfo.num > 0 ? `${ prefix }${ tokensInfo.num } ${ tokensInfo.num > 1 ? 'tokens' : 'token' }` : diff --git a/ui/addresses/AddressesTableItem.tsx b/ui/addresses/AddressesTableItem.tsx index d4f307a113..07d65e826e 100644 --- a/ui/addresses/AddressesTableItem.tsx +++ b/ui/addresses/AddressesTableItem.tsx @@ -1,4 +1,4 @@ -import { Text, Flex } from '@chakra-ui/react'; +import { Flex } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -9,6 +9,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import { Tag } from 'toolkit/chakra/tag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; +import SimpleValue from 'ui/shared/value/SimpleValue'; type Props = { item: AddressesItem; @@ -27,7 +28,6 @@ const AddressesTableItem = ({ }: Props) => { const addressBalance = BigNumber(item.coin_balance || 0).div(BigNumber(10 ** config.chain.currency.decimals)); - const addressBalanceChunks = addressBalance.dp(8).toFormat().split('.'); return ( @@ -50,14 +50,20 @@ const AddressesTableItem = ({ - - { addressBalanceChunks[0] + (addressBalanceChunks[1] ? '.' : '') } - { addressBalanceChunks[1] } - + { hasPercentage && ( - { addressBalance.div(totalSupply).multipliedBy(100).dp(8).toFormat() + '%' } + ) } diff --git a/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx b/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx index 27bc32c453..6ef8d111bb 100644 --- a/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx +++ b/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx @@ -1,14 +1,13 @@ import { HStack } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { AddressesItem } from 'types/api/addresses'; -import config from 'configs/app'; import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; type Props = { item: AddressesItem; @@ -20,8 +19,6 @@ const AddressesLabelSearchListItem = ({ isLoading, }: Props) => { - const addressBalance = BigNumber(item.coin_balance || 0).div(BigNumber(10 ** config.chain.currency.decimals)); - return ( { `Balance ${ currencyUnits.ether }` } - - { addressBalance.dp(8).toFormat() } - + Txn count diff --git a/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx b/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx index 808c1ffe55..b1e7d23dca 100644 --- a/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx +++ b/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx @@ -1,13 +1,11 @@ -import { Text } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { AddressesItem } from 'types/api/addresses'; -import config from 'configs/app'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; type Props = { item: AddressesItem; @@ -19,9 +17,6 @@ const AddressesLabelSearchTableItem = ({ isLoading, }: Props) => { - const addressBalance = BigNumber(item.coin_balance || 0).div(BigNumber(10 ** config.chain.currency.decimals)); - const addressBalanceChunks = addressBalance.dp(8).toFormat().split('.'); - return ( @@ -33,10 +28,12 @@ const AddressesLabelSearchTableItem = ({ /> - - { addressBalanceChunks[0] + (addressBalanceChunks[1] ? '.' : '') } - { addressBalanceChunks[1] } - + diff --git a/ui/advancedFilter/ItemByColumn.tsx b/ui/advancedFilter/ItemByColumn.tsx index 94886d594d..163bb265a7 100644 --- a/ui/advancedFilter/ItemByColumn.tsx +++ b/ui/advancedFilter/ItemByColumn.tsx @@ -4,7 +4,6 @@ import React from 'react'; import type { AdvancedFilterResponseItem } from 'types/api/advancedFilter'; import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Badge } from 'toolkit/chakra/badge'; import { Skeleton } from 'toolkit/chakra/skeleton'; import type { ColumnsIds } from 'ui/advancedFilter/constants'; @@ -13,6 +12,8 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import AssetValue from 'ui/shared/value/AssetValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; import { ADVANCED_FILTER_TYPES } from './constants'; @@ -67,16 +68,20 @@ const ItemByColumn = ({ item, column, isLoading }: Props) => { } if (item.total) { return ( - - { getCurrencyValue({ value: item.total?.value, decimals: item.total.decimals, accuracy: 8 }).valueStr } - + ); } if (item.value) { return ( - - { getCurrencyValue({ value: item.value, decimals: config.chain.currency.decimals.toString(), accuracy: 8 }).valueStr } - + ); } return null; @@ -86,7 +91,13 @@ const ItemByColumn = ({ item, column, isLoading }: Props) => { : { config.chain.currency.symbol }; case 'fee': - return { item.fee ? getCurrencyValue({ value: item.fee, accuracy: 8 }).valueStr : '-' }; + return ( + + ); default: return null; } diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx index 2d110d032c..a44b7f162b 100644 --- a/ui/block/BlockDetails.tsx +++ b/ui/block/BlockDetails.tsx @@ -14,12 +14,11 @@ import { useMultichainContext } from 'lib/contexts/multichain'; import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle'; import * as arbitrum from 'lib/rollups/arbitrum'; import getQueryParamString from 'lib/router/getQueryParamString'; -import { currencyUnits } from 'lib/units'; import { CollapsibleDetails } from 'toolkit/chakra/collapsible'; import { Link } from 'toolkit/chakra/link'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { Tooltip } from 'toolkit/chakra/tooltip'; -import { GWEI, WEI, WEI_IN_GWEI, ZERO } from 'toolkit/utils/consts'; +import { ZERO } from 'toolkit/utils/consts'; import { space } from 'toolkit/utils/htmlEntities'; import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; @@ -36,6 +35,9 @@ import PrevNext from 'ui/shared/PrevNext'; import RawDataSnippet from 'ui/shared/RawDataSnippet'; import StatusTag from 'ui/shared/statusTag/StatusTag'; import Utilization from 'ui/shared/Utilization/Utilization'; +import GasPriceValue from 'ui/shared/value/GasPriceValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; +import { WEI } from 'ui/shared/value/utils'; import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps'; import ZkSyncL2TxnBatchHashesInfo from 'ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo'; @@ -382,9 +384,7 @@ const BlockDetails = ({ query }: Props) => { Block reward - - { totalReward.dividedBy(WEI).toFixed() } { currencyUnits.ether } - + { rewardBreakDown } @@ -400,7 +400,7 @@ const BlockDetails = ({ query }: Props) => { { type } - { BigNumber(reward).dividedBy(WEI).toFixed() } { currencyUnits.ether } + )) @@ -466,9 +466,7 @@ const BlockDetails = ({ query }: Props) => { Minimum gas price - - { BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } { currencyUnits.gwei } - + ) } @@ -481,17 +479,11 @@ const BlockDetails = ({ query }: Props) => { > Base fee per gas - - { isPlaceholderData ? ( - - ) : ( - <> - { BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } - - { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) - - - ) } + + ) } @@ -507,15 +499,17 @@ const BlockDetails = ({ query }: Props) => { > Burnt fees - - - - { burntFees.dividedBy(WEI).toFixed() } { currencyUnits.ether } - + + } + mr={ 4 } + /> { !txFees.isEqualTo(ZERO) && ( @@ -534,9 +528,7 @@ const BlockDetails = ({ query }: Props) => { Priority fee / Tip - - { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { currencyUnits.ether } - + ) } diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png index 85872832ea..5fe903db5e 100644 Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png differ diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png index d093e5b6da..1efd54c5cb 100644 Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png differ diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png index 3c0c541648..a75f961d3a 100644 Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png differ diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png index 46012de696..9c53c489f4 100644 Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png differ diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png index e0c76ae56e..7ec0246ab0 100644 Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png differ diff --git a/ui/block/details/BlockDetailsBaseFeeCelo.tsx b/ui/block/details/BlockDetailsBaseFeeCelo.tsx index 2bf5e01822..9876892d51 100644 --- a/ui/block/details/BlockDetailsBaseFeeCelo.tsx +++ b/ui/block/details/BlockDetailsBaseFeeCelo.tsx @@ -1,5 +1,4 @@ import { Box, Flex } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { AddressParam } from 'types/api/addressParams'; @@ -7,12 +6,12 @@ import type { BlockBaseFeeCelo } from 'types/api/block'; import type { TokenInfo } from 'types/api/token'; import { Link } from 'toolkit/chakra/link'; -import { WEI, ZERO_ADDRESS } from 'toolkit/utils/consts'; +import { ZERO_ADDRESS } from 'toolkit/utils/consts'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import IconSvg from 'ui/shared/IconSvg'; +import TokenValue from 'ui/shared/value/TokenValue'; type ItemProps = BlockBaseFeeCelo['breakdown'][number] & { addressFrom: AddressParam; @@ -25,10 +24,10 @@ const BreakDownItem = ({ amount, percentage, address, addressFrom, token }: Item return ( { percentage }% of amount - - { BigNumber(amount).dividedBy(WEI).toFixed() } - - + { isBurning ? ( <> @@ -45,8 +44,6 @@ interface Props { } const BlockDetailsBaseFeeCelo = ({ data }: Props) => { - const totalBaseFee = BigNumber(data.amount).dividedBy(WEI).toFixed(); - const totalFeeLabel = ( The FeeHandler regularly burns 80% of its tokens. Non-CELO tokens are swapped to CELO beforehand. The remaining 20% are sent to the @@ -69,10 +66,10 @@ const BlockDetailsBaseFeeCelo = ({ data }: Props) => { Base fee total - - { totalBaseFee } - - + { data.breakdown.length > 0 && ( { data.breakdown.map((item, index) => ( diff --git a/ui/block/details/BlockDetailsBlobInfo.tsx b/ui/block/details/BlockDetailsBlobInfo.tsx index 43a21700ac..e09f91a77b 100644 --- a/ui/block/details/BlockDetailsBlobInfo.tsx +++ b/ui/block/details/BlockDetailsBlobInfo.tsx @@ -1,4 +1,4 @@ -import { Text, chakra } from '@chakra-ui/react'; +import { Text } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -6,11 +6,12 @@ import type { Block } from 'types/api/block'; import { currencyUnits } from 'lib/units'; import { Tooltip } from 'toolkit/chakra/tooltip'; -import { WEI, WEI_IN_GWEI, ZERO } from 'toolkit/utils/consts'; -import { space } from 'toolkit/utils/htmlEntities'; +import { ZERO } from 'toolkit/utils/consts'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import IconSvg from 'ui/shared/IconSvg'; import Utilization from 'ui/shared/Utilization/Utilization'; +import GasPriceValue from 'ui/shared/value/GasPriceValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { data: Block; @@ -41,10 +42,7 @@ const BlockDetailsBlobInfo = ({ data }: Props) => { Blob gas price - { BigNumber(data.blob_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }{ space } - - ({ BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) - + ) } @@ -68,10 +66,12 @@ const BlockDetailsBlobInfo = ({ data }: Props) => { Blob burnt fees - - - { burntBlobFees.dividedBy(WEI).toFixed() } { currencyUnits.ether } - + } + mr={ 4 } + /> { !blobFees.isEqualTo(ZERO) && ( @@ -88,10 +88,7 @@ const BlockDetailsBlobInfo = ({ data }: Props) => { Excess blob gas - { BigNumber(data.excess_blob_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } - - { space }({ BigNumber(data.excess_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) - + ) } diff --git a/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_default_base-view-mobile-1.png b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_default_base-view-mobile-1.png index 6928439cfa..5e863be15a 100644 Binary files a/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_default_base-view-mobile-1.png and b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_mobile_base-view-mobile-1.png b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_mobile_base-view-mobile-1.png index 2824e0bd76..9c144c630e 100644 Binary files a/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_mobile_base-view-mobile-1.png and b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/blockCountdown/BlockCountdownTimerItem.tsx b/ui/blockCountdown/BlockCountdownTimerItem.tsx index 40f2891ff3..91bbb892d4 100644 --- a/ui/blockCountdown/BlockCountdownTimerItem.tsx +++ b/ui/blockCountdown/BlockCountdownTimerItem.tsx @@ -1,7 +1,7 @@ import { Box } from '@chakra-ui/react'; import React from 'react'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; interface Props { label: string; @@ -16,8 +16,8 @@ const BlockCountdownTimerItem = ({ label, value }: Props) => { overflow="hidden" flex="1 1 auto" > - @@ -116,31 +114,35 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement, animation, chain { !isRollup && !config.UI.views.block.hiddenFields?.total_reward && ( Reward { currencyUnits.ether } - - { totalReward.toFixed() } - + ) } { !isRollup && !config.UI.views.block.hiddenFields?.burnt_fees && ( Burnt fees - - - - { burntFees.div(WEI).toFixed() } - - - + } + loading={ isLoading } + display="flex" + color="text.secondary" + /> + ) } - { !isRollup && !config.UI.views.block.hiddenFields?.base_fee && baseFeeValue && ( + { !isRollup && !config.UI.views.block.hiddenFields?.base_fee && data.base_fee_per_gas && ( Base fee - - { baseFeeValue } - + ) } diff --git a/ui/blocks/BlocksTableItem.tsx b/ui/blocks/BlocksTableItem.tsx index d68ec86950..59887137b3 100644 --- a/ui/blocks/BlocksTableItem.tsx +++ b/ui/blocks/BlocksTableItem.tsx @@ -13,7 +13,6 @@ import { Link } from 'toolkit/chakra/link'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import { Tooltip } from 'toolkit/chakra/tooltip'; -import { WEI } from 'toolkit/utils/consts'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; import BlockPendingUpdateHint from 'ui/shared/block/BlockPendingUpdateHint'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; @@ -22,8 +21,8 @@ import ChainIcon from 'ui/shared/externalChains/ChainIcon'; import IconSvg from 'ui/shared/IconSvg'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; import Utilization from 'ui/shared/Utilization/Utilization'; - -import { getBaseFeeValue } from './utils'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; +import SimpleValue from 'ui/shared/value/SimpleValue'; interface Props { data: Block; @@ -39,7 +38,6 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement, animation, chai const totalReward = getBlockTotalReward(data); const burntFees = BigNumber(data.burnt_fees || 0); const txFees = BigNumber(data.transaction_fees || 0); - const baseFeeValue = getBaseFeeValue(data.base_fee_per_gas || null); return ( @@ -117,29 +115,31 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement, animation, chai { !isRollup && !config.UI.views.block.hiddenFields?.total_reward && ( - - { totalReward.toFixed(8) } - + ) } { !isRollup && !config.UI.views.block.hiddenFields?.burnt_fees && ( - - - - { burntFees.dividedBy(WEI).toFixed(8) } - - + } + loading={ isLoading } + display="flex" + /> ) } - { !isRollup && !config.UI.views.block.hiddenFields?.base_fee && Boolean(baseFeeValue) && ( + { !isRollup && !config.UI.views.block.hiddenFields?.base_fee && data.base_fee_per_gas && ( - - { baseFeeValue } - + ) } diff --git a/ui/blocks/utils.ts b/ui/blocks/utils.ts deleted file mode 100644 index ab47657c13..0000000000 --- a/ui/blocks/utils.ts +++ /dev/null @@ -1,13 +0,0 @@ -import getValueWithUnit from 'lib/getValueWithUnit'; -import { currencyUnits } from 'lib/units'; - -export const getBaseFeeValue = (baseFee: string | null) => { - if (!baseFee) { - return null; - } - const valGwei = getValueWithUnit(baseFee, 'gwei'); - if (valGwei.isGreaterThanOrEqualTo(0.0001)) { - return `${ valGwei.toFormat(4) } ${ currencyUnits.gwei }`; - } - return `${ getValueWithUnit(baseFee, 'wei').toFormat() } ${ currencyUnits.wei }`; -}; diff --git a/ui/cluster/ClusterDetails.tsx b/ui/cluster/ClusterDetails.tsx index a7b04d00ae..b331133b53 100644 --- a/ui/cluster/ClusterDetails.tsx +++ b/ui/cluster/ClusterDetails.tsx @@ -2,15 +2,14 @@ import React from 'react'; import type { ClusterByNameResponse } from 'types/api/clusters'; -import config from 'configs/app'; import { isEvmAddress } from 'lib/address/isEvmAddress'; import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ClustersEntity from 'ui/shared/entities/clusters/ClustersEntity'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { clusterData?: ClusterByNameResponse['result']['data']; @@ -77,11 +76,9 @@ const ClusterDetails = ({ clusterData, clusterName, isLoading }: Props) => { Backing - diff --git a/ui/deposits/beaconChain/BeaconChainDepositsListItem.tsx b/ui/deposits/beaconChain/BeaconChainDepositsListItem.tsx index 1854dc1e20..14afd1ab15 100644 --- a/ui/deposits/beaconChain/BeaconChainDepositsListItem.tsx +++ b/ui/deposits/beaconChain/BeaconChainDepositsListItem.tsx @@ -3,16 +3,15 @@ import React from 'react'; import type { DepositsItem } from 'types/api/deposits'; import config from 'configs/app'; -import { currencyUnits } from 'lib/units'; import BeaconChainDepositSignature from 'ui/shared/beacon/BeaconChainDepositSignature'; import BeaconChainDepositStatusTag from 'ui/shared/beacon/BeaconChainDepositStatusTag'; import BeaconChainValidatorLink from 'ui/shared/beacon/BeaconChainValidatorLink'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; const feature = config.features.beaconChain; @@ -59,11 +58,9 @@ const BeaconChainDepositsListItem = ({ item, isLoading, view }: Props) => { Value - diff --git a/ui/deposits/beaconChain/BeaconChainDepositsTableItem.tsx b/ui/deposits/beaconChain/BeaconChainDepositsTableItem.tsx index c3f15450cd..9bc9f0b742 100644 --- a/ui/deposits/beaconChain/BeaconChainDepositsTableItem.tsx +++ b/ui/deposits/beaconChain/BeaconChainDepositsTableItem.tsx @@ -2,16 +2,15 @@ import React from 'react'; import type { DepositsItem } from 'types/api/deposits'; -import config from 'configs/app'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import BeaconChainDepositSignature from 'ui/shared/beacon/BeaconChainDepositSignature'; import BeaconChainDepositStatusTag from 'ui/shared/beacon/BeaconChainDepositStatusTag'; import BeaconChainValidatorLink from 'ui/shared/beacon/BeaconChainValidatorLink'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; type Props = { item: DepositsItem; @@ -52,7 +51,7 @@ const BeaconChainDepositsTableItem = ({ item, view, isLoading }: Props) => { ) } - + { view !== 'address' && ( diff --git a/ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx b/ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx index a443450296..170de4f04f 100644 --- a/ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx +++ b/ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx @@ -4,13 +4,13 @@ import React from 'react'; import type { ScrollL2MessageItem } from 'types/api/scrollL2'; import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Skeleton } from 'toolkit/chakra/skeleton'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; const rollupFeature = config.features.rollup; @@ -21,8 +21,6 @@ const ScrollL2DepositsListItem = ({ item, isLoading }: Props) => { return null; } - const { valueStr } = getCurrencyValue({ value: item.value, decimals: String(config.chain.currency.decimals) }); - return ( @@ -78,9 +76,10 @@ const ScrollL2DepositsListItem = ({ item, isLoading }: Props) => { Value - - { `${ valueStr } ${ config.chain.currency.symbol }` } - + diff --git a/ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx b/ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx index 75ec98151f..5d6457c71b 100644 --- a/ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx +++ b/ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx @@ -4,13 +4,13 @@ import React from 'react'; import type { ScrollL2MessageItem } from 'types/api/scrollL2'; import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; const rollupFeature = config.features.rollup; @@ -21,8 +21,6 @@ const ScrollL2DepositsTableItem = ({ item, isLoading }: Props) => { return null; } - const { valueStr } = getCurrencyValue({ value: item.value, decimals: String(config.chain.currency.decimals) }); - return ( @@ -69,9 +67,11 @@ const ScrollL2DepositsTableItem = ({ item, isLoading }: Props) => { ) } - - { valueStr } - + ); diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx index 3c29082b5c..a959a32e3f 100644 --- a/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx +++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx @@ -11,6 +11,7 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import SimpleValue from 'ui/shared/value/SimpleValue'; const rollupFeature = config.features.rollup; @@ -79,9 +80,10 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => { Value - - { BigNumber(item.value).toFormat() } - + Token diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx index b460dfe9c0..62660155f6 100644 --- a/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx +++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx @@ -11,6 +11,7 @@ import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import SimpleValue from 'ui/shared/value/SimpleValue'; const rollupFeature = config.features.rollup; @@ -70,9 +71,10 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => { ) } - - { BigNumber(item.value).toFormat() } - + diff --git a/ui/epochs/EpochDetails.tsx b/ui/epochs/EpochDetails.tsx index f52c243862..c6a779452e 100644 --- a/ui/epochs/EpochDetails.tsx +++ b/ui/epochs/EpochDetails.tsx @@ -3,16 +3,14 @@ import React from 'react'; import type { CeloEpochDetails } from 'types/api/epochs'; -import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; import useIsMobile from 'lib/hooks/useIsMobile'; -import { Skeleton } from 'toolkit/chakra/skeleton'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import CeloEpochStatus from 'ui/shared/statusTag/CeloEpochStatus'; import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; +import TokenValue from 'ui/shared/value/TokenValue'; import EpochElectionRewards from './electionRewards/EpochElectionRewards'; @@ -24,11 +22,6 @@ interface Props { const EpochDetails = ({ data, isLoading }: Props) => { const isMobile = useIsMobile(); - const totalFunRewards = data.distribution?.transfers_total?.total ? getCurrencyValue({ - value: data.distribution?.transfers_total.total.value, - decimals: data.distribution?.transfers_total.total.decimals, - }) : null; - const processingRange = (() => { if (!data.start_processing_block_number || !data.end_processing_block_number) { return N/A; @@ -47,6 +40,32 @@ const EpochDetails = ({ data, isLoading }: Props) => { ); })(); + const totalFundRewards = (() => { + if (!data.distribution?.transfers_total?.total?.value) { + return N/A; + } + + if (data.distribution?.transfers_total?.token) { + return ( + + ); + } + + return ( + + ); + })(); + return ( <> @@ -123,25 +142,8 @@ const EpochDetails = ({ data, isLoading }: Props) => { > Total fund rewards - - { totalFunRewards ? ( - <> - - { totalFunRewards.valueStr } - - { data.distribution?.transfers_total?.token ? ( - - ) : - config.chain.currency.symbol } - - ) : ( - N/A - ) } + + { totalFundRewards } diff --git a/ui/epochs/EpochsListItem.tsx b/ui/epochs/EpochsListItem.tsx index 885b796488..031cdad894 100644 --- a/ui/epochs/EpochsListItem.tsx +++ b/ui/epochs/EpochsListItem.tsx @@ -3,13 +3,12 @@ import React from 'react'; import type { CeloEpochListItem } from 'types/api/epochs'; -import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Skeleton } from 'toolkit/chakra/skeleton'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp'; import EpochEntity from 'ui/shared/entities/epoch/EpochEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import CeloEpochStatus from 'ui/shared/statusTag/CeloEpochStatus'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { item: CeloEpochListItem; @@ -17,22 +16,6 @@ interface Props { } const EpochsListItem = ({ item, isLoading }: Props) => { - const communityReward = getCurrencyValue({ - value: item.distribution?.community_transfer?.value ?? '0', - decimals: item.distribution?.community_transfer?.decimals, - accuracy: 8, - }); - const carbonOffsettingReward = getCurrencyValue({ - value: item.distribution?.carbon_offsetting_transfer?.value ?? '0', - decimals: item.distribution?.carbon_offsetting_transfer?.decimals, - accuracy: 8, - }); - const totalReward = getCurrencyValue({ - value: item.distribution?.transfers_total?.value ?? '0', - decimals: item.distribution?.transfers_total?.decimals, - accuracy: 8, - }); - return ( @@ -54,25 +37,32 @@ const EpochsListItem = ({ item, isLoading }: Props) => { { item.distribution?.community_transfer ? ( Community - - { communityReward.valueStr } { config.chain.currency.symbol } - + ) : null } { item.distribution?.carbon_offsetting_transfer ? ( Carbon offset - - { carbonOffsettingReward.valueStr } { config.chain.currency.symbol } - + ) : null } { item.distribution?.transfers_total ? ( Total - - { totalReward.valueStr } { config.chain.currency.symbol } - + ) : null } diff --git a/ui/epochs/EpochsTableItem.tsx b/ui/epochs/EpochsTableItem.tsx index c2d7a5baed..ab6c007663 100644 --- a/ui/epochs/EpochsTableItem.tsx +++ b/ui/epochs/EpochsTableItem.tsx @@ -3,12 +3,12 @@ import React from 'react'; import type { CeloEpochListItem } from 'types/api/epochs'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import EpochEntity from 'ui/shared/entities/epoch/EpochEntity'; import CeloEpochStatus from 'ui/shared/statusTag/CeloEpochStatus'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { item: CeloEpochListItem; @@ -16,23 +16,6 @@ interface Props { }; const EpochsTableItem = ({ item, isLoading }: Props) => { - - const communityReward = getCurrencyValue({ - value: item.distribution?.community_transfer?.value ?? '0', - decimals: item.distribution?.community_transfer?.decimals, - accuracy: 8, - }); - const carbonOffsettingReward = getCurrencyValue({ - value: item.distribution?.carbon_offsetting_transfer?.value ?? '0', - decimals: item.distribution?.carbon_offsetting_transfer?.decimals, - accuracy: 8, - }); - const totalReward = getCurrencyValue({ - value: item.distribution?.transfers_total?.value ?? '0', - decimals: item.distribution?.transfers_total?.decimals, - accuracy: 8, - }); - return ( @@ -60,19 +43,25 @@ const EpochsTableItem = ({ item, isLoading }: Props) => { - - { item.distribution?.community_transfer ? communityReward.valueStr : '-' } - + - - { item.distribution?.carbon_offsetting_transfer ? carbonOffsettingReward.valueStr : '-' } - + - - { item.distribution?.transfers_total ? totalReward.valueStr : '-' } - + ); diff --git a/ui/epochs/electionRewards/EpochElectionRewardDetailsDesktop.tsx b/ui/epochs/electionRewards/EpochElectionRewardDetailsDesktop.tsx index 284a5e19ef..a5ae3982b1 100644 --- a/ui/epochs/electionRewards/EpochElectionRewardDetailsDesktop.tsx +++ b/ui/epochs/electionRewards/EpochElectionRewardDetailsDesktop.tsx @@ -5,11 +5,11 @@ import React from 'react'; import type { CeloEpochDetails } from 'types/api/epochs'; import type { TokenInfo } from 'types/api/token'; -import getCurrencyValue from 'lib/getCurrencyValue'; import getQueryParamString from 'lib/router/getQueryParamString'; import { ContentLoader } from 'toolkit/components/loaders/ContentLoader'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import useLazyLoadedList from 'ui/shared/pagination/useLazyLoadedList'; +import AssetValue from 'ui/shared/value/AssetValue'; import { formatRewardType, getRewardDetailsTableTitles } from './utils'; @@ -65,19 +65,16 @@ const CeloEpochElectionRewardDetailsDesktop = ({ type, token }: Props) => { .map((page) => page.items) .flat() .map((item, index) => { - - const amount = getCurrencyValue({ - value: item.amount, - decimals: token.decimals, - }); - return ( - { amount.valueStr } + diff --git a/ui/epochs/electionRewards/EpochElectionRewardDetailsMobile.tsx b/ui/epochs/electionRewards/EpochElectionRewardDetailsMobile.tsx index bbbdd42d5f..e9c5ebdecf 100644 --- a/ui/epochs/electionRewards/EpochElectionRewardDetailsMobile.tsx +++ b/ui/epochs/electionRewards/EpochElectionRewardDetailsMobile.tsx @@ -5,12 +5,11 @@ import React from 'react'; import type { CeloEpochDetails } from 'types/api/epochs'; import type { TokenInfo } from 'types/api/token'; -import getCurrencyValue from 'lib/getCurrencyValue'; import getQueryParamString from 'lib/router/getQueryParamString'; import { ContentLoader } from 'toolkit/components/loaders/ContentLoader'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import useLazyLoadedList from 'ui/shared/pagination/useLazyLoadedList'; +import TokenValue from 'ui/shared/value/TokenValue'; import { formatRewardType } from './utils'; @@ -49,20 +48,15 @@ const CeloEpochElectionRewardDetailsMobile = ({ type, token }: Props) => { .map((page) => page.items) .flat() .map((item, index) => { - - const amount = getCurrencyValue({ - value: item.amount, - decimals: token.decimals, - }); - return ( - - got - { amount.valueStr } - - + got } + /> on behalf of diff --git a/ui/epochs/electionRewards/EpochElectionRewardsListItem.tsx b/ui/epochs/electionRewards/EpochElectionRewardsListItem.tsx index 215380b0d7..4244c22fa5 100644 --- a/ui/epochs/electionRewards/EpochElectionRewardsListItem.tsx +++ b/ui/epochs/electionRewards/EpochElectionRewardsListItem.tsx @@ -3,13 +3,12 @@ import React from 'react'; import type { CeloEpochElectionReward, CeloEpochDetails } from 'types/api/epochs'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { IconButton } from 'toolkit/chakra/icon-button'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { useDisclosure } from 'toolkit/hooks/useDisclosure'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag'; import IconSvg from 'ui/shared/IconSvg'; +import TokenValue from 'ui/shared/value/TokenValue'; import EpochElectionRewardDetailsMobile from './EpochElectionRewardDetailsMobile'; import { getRewardNumText } from './utils'; @@ -23,12 +22,6 @@ interface Props { const EpochElectionRewardsListItem = ({ data, isLoading, type }: Props) => { const section = useDisclosure(); - const { valueStr } = getCurrencyValue({ - value: data.total, - decimals: data.token.decimals, - accuracy: 2, - }); - return ( { ) : } { getRewardNumText(type, data.count) } - - { valueStr } - - + { section.open && ( diff --git a/ui/epochs/electionRewards/EpochElectionRewardsTableItem.tsx b/ui/epochs/electionRewards/EpochElectionRewardsTableItem.tsx index ea85264d01..1fb3340781 100644 --- a/ui/epochs/electionRewards/EpochElectionRewardsTableItem.tsx +++ b/ui/epochs/electionRewards/EpochElectionRewardsTableItem.tsx @@ -1,16 +1,14 @@ -import { Flex } from '@chakra-ui/react'; import React from 'react'; import type { CeloEpochDetails, CeloEpochElectionReward } from 'types/api/epochs'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { IconButton } from 'toolkit/chakra/icon-button'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import { useDisclosure } from 'toolkit/hooks/useDisclosure'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag'; import IconSvg from 'ui/shared/IconSvg'; +import TokenValue from 'ui/shared/value/TokenValue'; import EpochElectionRewardDetailsDesktop from './EpochElectionRewardDetailsDesktop'; import { getRewardNumText } from './utils'; @@ -24,11 +22,6 @@ interface Props { const EpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) => { const section = useDisclosure(); - const { valueStr } = getCurrencyValue({ - value: data.total, - decimals: data.token.decimals, - }); - const mainRowBorderColor = section.open ? 'transparent' : 'border.divider'; return ( @@ -62,17 +55,14 @@ const EpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) => { { getRewardNumText(type, data.count) } - - - { valueStr } - - + + { section.open && ( diff --git a/ui/epochs/electionRewards/__screenshots__/EpochElectionRewards.pw.tsx_default_base-view-1.png b/ui/epochs/electionRewards/__screenshots__/EpochElectionRewards.pw.tsx_default_base-view-1.png index 896703500e..72033b43fe 100644 Binary files a/ui/epochs/electionRewards/__screenshots__/EpochElectionRewards.pw.tsx_default_base-view-1.png and b/ui/epochs/electionRewards/__screenshots__/EpochElectionRewards.pw.tsx_default_base-view-1.png differ diff --git a/ui/epochs/electionRewards/__screenshots__/EpochElectionRewards.pw.tsx_mobile_base-view-mobile---default-1.png b/ui/epochs/electionRewards/__screenshots__/EpochElectionRewards.pw.tsx_mobile_base-view-mobile---default-1.png index ffb3dc5909..2beb243f90 100644 Binary files a/ui/epochs/electionRewards/__screenshots__/EpochElectionRewards.pw.tsx_mobile_base-view-mobile---default-1.png and b/ui/epochs/electionRewards/__screenshots__/EpochElectionRewards.pw.tsx_mobile_base-view-mobile---default-1.png differ diff --git a/ui/home/LatestBlocksItem.tsx b/ui/home/LatestBlocksItem.tsx index ad5723b42d..b47c766261 100644 --- a/ui/home/LatestBlocksItem.tsx +++ b/ui/home/LatestBlocksItem.tsx @@ -10,10 +10,12 @@ import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle'; import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { Tooltip } from 'toolkit/chakra/tooltip'; +import { thinsp } from 'toolkit/utils/htmlEntities'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import IconSvg from 'ui/shared/IconSvg'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import SimpleValue from 'ui/shared/value/SimpleValue'; type Props = { block: Block; @@ -64,11 +66,12 @@ const LatestBlocksItem = ({ block, isLoading, animation }: Props) => { { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.total_reward && ( <> Reward - - - { totalReward.dp(10).toFixed() } { currencyUnits.ether } - - + ) } diff --git a/ui/home/LatestTxsItem.tsx b/ui/home/LatestTxsItem.tsx index 5cf49de19a..2a9d3bd43c 100644 --- a/ui/home/LatestTxsItem.tsx +++ b/ui/home/LatestTxsItem.tsx @@ -10,8 +10,6 @@ import React from 'react'; import type { Transaction } from 'types/api/transaction'; import config from 'configs/app'; -import getValueWithUnit from 'lib/getValueWithUnit'; -import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; @@ -19,6 +17,7 @@ import TxStatus from 'ui/shared/statusTag/TxStatus'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; import TxFee from 'ui/shared/tx/TxFee'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; import TxType from 'ui/txs/TxType'; @@ -85,13 +84,18 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { { !config.UI.views.tx.hiddenFields?.value && ( Value - { getValueWithUnit(tx.value).dp(5).toFormat() } { currencyUnits.ether } + ) } { !config.UI.views.tx.hiddenFields?.tx_fee && ( Fee - + ) } diff --git a/ui/home/LatestTxsItemMobile.tsx b/ui/home/LatestTxsItemMobile.tsx index 71535a8bc0..27e0f56f95 100644 --- a/ui/home/LatestTxsItemMobile.tsx +++ b/ui/home/LatestTxsItemMobile.tsx @@ -9,8 +9,6 @@ import React from 'react'; import type { Transaction } from 'types/api/transaction'; import config from 'configs/app'; -import getValueWithUnit from 'lib/getValueWithUnit'; -import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; @@ -18,6 +16,7 @@ import TxStatus from 'ui/shared/statusTag/TxStatus'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; import TxFee from 'ui/shared/tx/TxFee'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; import TxType from 'ui/txs/TxType'; @@ -78,13 +77,18 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { { !config.UI.views.tx.hiddenFields?.value && ( Value - { getValueWithUnit(tx.value).dp(5).toFormat() } { currencyUnits.ether } + ) } { !config.UI.views.tx.hiddenFields?.tx_fee && ( Fee - + ) } diff --git a/ui/home/Stats.tsx b/ui/home/Stats.tsx index b0cc8c369a..0e16f4bdfc 100644 --- a/ui/home/Stats.tsx +++ b/ui/home/Stats.tsx @@ -5,11 +5,11 @@ import React from 'react'; import config from 'configs/app'; import useApiQuery from 'lib/api/useApiQuery'; import { HOMEPAGE_STATS, HOMEPAGE_STATS_MICROSERVICE } from 'stubs/stats'; -import { WEI } from 'toolkit/utils/consts'; import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip'; import GasPrice from 'ui/shared/gas/GasPrice'; import IconSvg from 'ui/shared/IconSvg'; import StatsWidget from 'ui/shared/stats/StatsWidget'; +import { WEI } from 'ui/shared/value/utils'; import type { HomeStatsItem } from './utils'; import { isHomeStatsItemEnabled, sortHomeStatsItems } from './utils'; diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png index 17efffa979..954e0a1b1b 100644 Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png differ diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png index 864aba1492..0dc9221fc7 100644 Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png differ diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png index 25de41c1eb..511cd220a6 100644 Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png differ diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png index 96c8b3af7e..57f207a781 100644 Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png differ diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png index c193cb96ad..a6c777f62c 100644 Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png differ diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png index 8e4595f527..2578e2b1e4 100644 Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png differ diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png index 90bec63211..f8ce86fe8c 100644 Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png differ diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png index 5d7aa26319..eab281bcfb 100644 Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png differ diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png index 7a1f85d112..33b5f4cd62 100644 Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png differ diff --git a/ui/internalTxs/InternalTxsListItem.tsx b/ui/internalTxs/InternalTxsListItem.tsx index e43a8276e4..27c5707ff3 100644 --- a/ui/internalTxs/InternalTxsListItem.tsx +++ b/ui/internalTxs/InternalTxsListItem.tsx @@ -1,11 +1,9 @@ import { Flex, HStack } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { InternalTransaction } from 'types/api/internalTransaction'; import type { ClusterChainConfig } from 'types/multichain'; -import config from 'configs/app'; import { currencyUnits } from 'lib/units'; import { Badge } from 'toolkit/chakra/badge'; import { Skeleton } from 'toolkit/chakra/skeleton'; @@ -15,6 +13,7 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TxStatus from 'ui/shared/statusTag/TxStatus'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils'; type Props = InternalTransaction & { currentAddress?: string; isLoading?: boolean; showBlockInfo?: boolean; chainData?: ClusterChainConfig }; @@ -80,9 +79,15 @@ const InternalTxsListItem = ({ /> Value { currencyUnits.ether } - - { BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } - + ); diff --git a/ui/internalTxs/InternalTxsTableItem.tsx b/ui/internalTxs/InternalTxsTableItem.tsx index 2f124a8902..bd9c3f7eaf 100644 --- a/ui/internalTxs/InternalTxsTableItem.tsx +++ b/ui/internalTxs/InternalTxsTableItem.tsx @@ -1,11 +1,9 @@ import { Flex } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { InternalTransaction } from 'types/api/internalTransaction'; import type { ClusterChainConfig } from 'types/multichain'; -import config from 'configs/app'; import { Badge } from 'toolkit/chakra/badge'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; @@ -14,7 +12,7 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ChainIcon from 'ui/shared/externalChains/ChainIcon'; import TxStatus from 'ui/shared/statusTag/TxStatus'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils'; type Props = InternalTransaction & { currentAddress?: string; isLoading?: boolean; showBlockInfo?: boolean; chainData?: ClusterChainConfig }; @@ -93,11 +91,12 @@ const InternalTxsTableItem = ({ /> - diff --git a/ui/mudWorlds/MudWorldsListItem.tsx b/ui/mudWorlds/MudWorldsListItem.tsx index 1b5818d028..55ceafdb75 100644 --- a/ui/mudWorlds/MudWorldsListItem.tsx +++ b/ui/mudWorlds/MudWorldsListItem.tsx @@ -1,14 +1,13 @@ import { HStack } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { MudWorldItem } from 'types/api/mudWorlds'; -import config from 'configs/app'; import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; type Props = { item: MudWorldItem; @@ -20,8 +19,6 @@ const MudWorldsListItem = ({ isLoading, }: Props) => { - const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals)); - return ( - - { `Balance ${ currencyUnits.ether }` } - - { addressBalance.dp(8).toFormat() } - + + { `Balance ${ currencyUnits.ether }` } + Txn count diff --git a/ui/mudWorlds/MudWorldsTableItem.tsx b/ui/mudWorlds/MudWorldsTableItem.tsx index 20c1411b78..5a64a9c72c 100644 --- a/ui/mudWorlds/MudWorldsTableItem.tsx +++ b/ui/mudWorlds/MudWorldsTableItem.tsx @@ -1,30 +1,27 @@ -import { Text } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { MudWorldItem } from 'types/api/mudWorlds'; -import config from 'configs/app'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; type Props = { item: MudWorldItem; isLoading?: boolean }; const MudWorldsTableItem = ({ item, isLoading }: Props) => { - const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals)); - const addressBalanceChunks = addressBalance.dp(8).toFormat().split('.'); - return ( - - { addressBalanceChunks[0] + (addressBalanceChunks[1] ? '.' : '') } - { addressBalanceChunks[1] } - + diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-1.png index 3952cbb714..7fb1e67aa6 100644 Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-1.png differ diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-3.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-3.png index 00324e2af6..bbc3bf6518 100644 Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-3.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-3.png differ diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-base-view-1.png index 32ec515c73..4a15e7df7d 100644 Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-base-view-1.png differ diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png index 73e3a362c7..58c947e276 100644 Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png differ diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-1.png index 330f62ac2a..6d68ca6ba4 100644 Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-1.png differ diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-3.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-3.png index 3d1410b7f7..3a0e8c2d5b 100644 Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-3.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-3.png differ diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-mobile-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-mobile-base-view-1.png index a3dc70eb2b..3e5b42afdb 100644 Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-mobile-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-mobile-base-view-1.png differ diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-base-view-1.png index fd9a94ee38..7ca25fec5d 100644 Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-base-view-1.png differ diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png index 9510481e99..0a13678ba2 100644 Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png differ diff --git a/ui/optimismSuperchain/address/details/OpSuperchainAddressCoinBalance.tsx b/ui/optimismSuperchain/address/details/OpSuperchainAddressCoinBalance.tsx index 9716ce4fc1..51ba129514 100644 --- a/ui/optimismSuperchain/address/details/OpSuperchainAddressCoinBalance.tsx +++ b/ui/optimismSuperchain/address/details/OpSuperchainAddressCoinBalance.tsx @@ -1,11 +1,11 @@ -import { Flex, HStack } from '@chakra-ui/react'; +import { Flex } from '@chakra-ui/react'; import React from 'react'; import type * as multichain from '@blockscout/multichain-aggregator-types'; import multichainConfig from 'configs/multichain'; import NativeTokenIcon from 'ui/optimismSuperchain/components/NativeTokenIcon'; -import CurrencyValue from 'ui/shared/CurrencyValue'; +import AssetValue from 'ui/shared/value/AssetValue'; import OpSuperchainAddressInfoBreakdown from './OpSuperchainAddressInfoBreakdown'; @@ -21,31 +21,23 @@ const OpSuperchainAddressCoinBalance = ({ data, isLoading }: Props) => { return ( - - - - + } + loading={ isLoading } + /> { ([ chain, chainInfo ]) => { return ( - ); } } diff --git a/ui/optimismSuperchain/address/details/OpSuperchainAddressNetWorth.tsx b/ui/optimismSuperchain/address/details/OpSuperchainAddressNetWorth.tsx index 84a010c646..adf85b6863 100644 --- a/ui/optimismSuperchain/address/details/OpSuperchainAddressNetWorth.tsx +++ b/ui/optimismSuperchain/address/details/OpSuperchainAddressNetWorth.tsx @@ -5,10 +5,12 @@ import type * as multichain from '@blockscout/multichain-aggregator-types'; import type { FormattedData } from 'ui/address/tokenSelect/types'; import multichainConfig from 'configs/multichain'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { ZERO } from 'toolkit/utils/consts'; import { getTokensTotalInfoByChain, type TokensTotalInfo } from 'ui/address/utils/tokenUtils'; +import calculateUsdValue from 'ui/shared/value/calculateUsdValue'; +import SimpleValue from 'ui/shared/value/SimpleValue'; +import { DEFAULT_ACCURACY_USD } from 'ui/shared/value/utils'; import OpSuperchainAddressInfoBreakdown from './OpSuperchainAddressInfoBreakdown'; @@ -23,10 +25,8 @@ const OpSuperchainAddressNetWorth = ({ addressData, isLoading, tokensData, isErr const chains = multichainConfig()?.chains; - const { usdBn: nativeUsd } = getCurrencyValue({ - value: addressData?.coin_balance || '0', - accuracy: 8, - accuracyUsd: 2, + const { usdBn: nativeUsd } = calculateUsdValue({ + amount: addressData?.coin_balance || '0', exchangeRate: addressData?.exchange_rate, decimals: String(chains?.[0]?.app_config.chain.currency.decimals), }); @@ -43,26 +43,27 @@ const OpSuperchainAddressNetWorth = ({ addressData, isLoading, tokensData, isErr }; }, {} as TokensTotalInfo); - const prefix = isOverflow ? '>' : ''; const totalUsd = usd ? nativeUsd.plus(usd) : ZERO; const hasUsd = !isError && addressData?.exchange_rate; return ( - - { hasUsd ? `${ prefix }$${ totalUsd.dp(2).toFormat() }` : 'N/A' } - + { hasUsd ? ( + + ) : ( + N/A + ) } { hasUsd && ( { ([ chain, chainInfo ]) => { - const { usdBn: chainNativeUsdBn } = getCurrencyValue({ - value: chainInfo.coin_balance || '0', - accuracy: 8, - accuracyUsd: 2, + const { usdBn: chainNativeUsdBn } = calculateUsdValue({ + amount: chainInfo.coin_balance || '0', exchangeRate: addressData?.exchange_rate, decimals: String(chain.app_config?.chain?.currency.decimals), }); @@ -71,7 +72,13 @@ const OpSuperchainAddressNetWorth = ({ addressData, isLoading, tokensData, isErr return null; } - return `$${ resultByChain[chain.id].usd.plus(chainNativeUsdBn).dp(2).toFormat() }`; + return ( + + ); } } ) } diff --git a/ui/optimismSuperchain/address/tokens/OpSuperchainTokenBalances.tsx b/ui/optimismSuperchain/address/tokens/OpSuperchainTokenBalances.tsx index d306846ddc..777a6f3262 100644 --- a/ui/optimismSuperchain/address/tokens/OpSuperchainTokenBalances.tsx +++ b/ui/optimismSuperchain/address/tokens/OpSuperchainTokenBalances.tsx @@ -4,16 +4,19 @@ import React from 'react'; import multichainConfig from 'configs/multichain'; import useApiQuery from 'lib/api/useApiQuery'; -import getCurrencyValue from 'lib/getCurrencyValue'; import getQueryParamString from 'lib/router/getQueryParamString'; import { ADDRESS } from 'stubs/optimismSuperchain'; import { ZERO } from 'toolkit/utils/consts'; +import { thinsp } from 'toolkit/utils/htmlEntities'; import TokenBalancesItem from 'ui/address/tokens/TokenBalancesItem'; import type { TokensTotalInfo } from 'ui/address/utils/tokenUtils'; import { getTokensTotalInfoByChain } from 'ui/address/utils/tokenUtils'; import NativeTokenIcon from 'ui/optimismSuperchain/components/NativeTokenIcon'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import IconSvg from 'ui/shared/IconSvg'; +import AssetValue from 'ui/shared/value/AssetValue'; +import calculateUsdValue from 'ui/shared/value/calculateUsdValue'; +import SimpleValue from 'ui/shared/value/SimpleValue'; +import { DEFAULT_ACCURACY_USD } from 'ui/shared/value/utils'; import OpSuperchainAddressInfoBreakdown from '../details/OpSuperchainAddressInfoBreakdown'; import useFetchTokens from './useFetchTokens'; @@ -38,10 +41,8 @@ const OpSuperchainTokenBalances = () => { const isLoading = addressQuery.isPlaceholderData || tokensQuery.isPending; const isError = addressQuery.isError || tokensQuery.isError; - const { valueStr: nativeValue, usdBn: nativeUsd } = getCurrencyValue({ - value: addressQuery.data?.coin_balance || '0', - accuracy: 8, - accuracyUsd: 2, + const { valueStr: nativeValue, usdBn: nativeUsd } = calculateUsdValue({ + amount: addressQuery.data?.coin_balance || '0', exchangeRate: addressQuery.data?.exchange_rate, decimals: currency ? String(currency.decimals) : undefined, }); @@ -58,7 +59,7 @@ const OpSuperchainTokenBalances = () => { }; }, {} as TokensTotalInfo); - const prefix = tokensInfo.isOverflow ? '>' : ''; + const prefix = tokensInfo.isOverflow ? `>${ thinsp }` : ''; const totalUsd = nativeUsd.plus(tokensInfo.usd); const tokensNumText = tokensInfo.num > 0 ? `${ prefix }${ tokensInfo.num } ${ tokensInfo.num > 1 ? 'tokens' : 'token' }` : @@ -78,17 +79,20 @@ const OpSuperchainTokenBalances = () => { const tokensInfo = resultByChain[chain.id]; - const { usdBn: chainNativeUsdBn } = getCurrencyValue({ - value: chainInfo.coin_balance || '0', - accuracy: 8, - accuracyUsd: 2, + const { usdBn: chainNativeUsdBn } = calculateUsdValue({ + amount: chainInfo.coin_balance || '0', exchangeRate: addressQuery.data.exchange_rate, decimals: String(chain.app_config.chain.currency.decimals), }); - const prefix = tokensInfo.isOverflow ? '>' : ''; - - return `${ prefix }$${ chainNativeUsdBn.plus(tokensInfo.usd).dp(2).toFormat() }`; + return ( + + ); } } ) : null; @@ -97,15 +101,12 @@ const OpSuperchainTokenBalances = () => { { ([ chain, chainInfo ]) => { return ( - ); } } diff --git a/ui/optimismSuperchain/components/ListCounterText.tsx b/ui/optimismSuperchain/components/ListCounterText.tsx index 34e7d70622..bff3bd37e5 100644 --- a/ui/optimismSuperchain/components/ListCounterText.tsx +++ b/ui/optimismSuperchain/components/ListCounterText.tsx @@ -1,7 +1,7 @@ import React from 'react'; import useIsInitialLoading from 'lib/hooks/useIsInitialLoading'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; interface Props { value: string | undefined; @@ -20,9 +20,9 @@ const ListCounterText = ({ isLoading, value, type }: Props) => { const text = `A total of ${ valueNum.toLocaleString() } ${ valueNum === 1 ? type : `${ type }s` } found`; return ( - { { countersQuery.data && ( { BigNumber(countersQuery.data.withdrawals_count).toFormat() } withdrawals processed - and { getCurrencyValue({ value: countersQuery.data.withdrawals_sum }).valueStr } { currencyUnits.ether } withdrawn + and { calculateUsdValue({ amount: countersQuery.data.withdrawals_sum }).valueStr } { currencyUnits.ether } withdrawn ) } diff --git a/ui/pages/BlockCountdown.tsx b/ui/pages/BlockCountdown.tsx index 14289705d2..26e6d8e958 100644 --- a/ui/pages/BlockCountdown.tsx +++ b/ui/pages/BlockCountdown.tsx @@ -14,6 +14,7 @@ import { Heading } from 'toolkit/chakra/heading'; import { Image } from 'toolkit/chakra/image'; import { Link } from 'toolkit/chakra/link'; import { ContentLoader } from 'toolkit/components/loaders/ContentLoader'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import { downloadBlob } from 'toolkit/utils/file'; import BlockCountdownTimer from 'ui/blockCountdown/BlockCountdownTimer'; import createGoogleCalendarLink from 'ui/blockCountdown/createGoogleCalendarLink'; @@ -21,7 +22,6 @@ import createIcsFileBlob from 'ui/blockCountdown/createIcsFileBlob'; import ChainIcon from 'ui/shared/externalChains/ChainIcon'; import IconSvg from 'ui/shared/IconSvg'; import StatsWidget from 'ui/shared/stats/StatsWidget'; -import TruncatedValue from 'ui/shared/TruncatedValue'; import CapybaraRunner from '../games/CapybaraRunner'; @@ -76,7 +76,7 @@ const BlockCountdown = ({ hideCapybaraRunner }: Props) => { - + Estimated target date diff --git a/ui/pages/Chakra.tsx b/ui/pages/Chakra.tsx index 842447f0dd..3a47313bb7 100644 --- a/ui/pages/Chakra.tsx +++ b/ui/pages/Chakra.tsx @@ -37,6 +37,7 @@ import TagShowcase from 'ui/showcases/Tag'; import TextareaShowcase from 'ui/showcases/Textarea'; import ToastShowcase from 'ui/showcases/Toast'; import TooltipShowcase from 'ui/showcases/Tooltip'; +import ValuesShowcase from 'ui/showcases/Values'; const tabs = [ { label: 'Accordion', value: 'accordion', component: }, @@ -71,6 +72,7 @@ const tabs = [ { label: 'Textarea', value: 'textarea', component: }, { label: 'Toast', value: 'toast', component: }, { label: 'Tooltip', value: 'tooltip', component: }, + { label: 'Values', value: 'values', component: }, ]; const ChakraShowcases = () => { diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png index d3df683f7f..24687b2d21 100644 Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png index 8d75dc511d..ce2144cd5b 100644 Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png index 0b7e8da627..3a0ab9aba1 100644 Binary files a/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_mobile_base-view-mobile-1.png index a92a6e0e9a..17ccf14a9b 100644 Binary files a/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png b/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png index 3456befbda..2682c4ae88 100644 Binary files a/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png and b/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png differ diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnWithdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnWithdrawals.pw.tsx_default_base-view-mobile-1.png index 0e6f060c84..cd5a1f3695 100644 Binary files a/ui/pages/__screenshots__/ArbitrumL2TxnWithdrawals.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/ArbitrumL2TxnWithdrawals.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnWithdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnWithdrawals.pw.tsx_mobile_base-view-mobile-1.png index 8e2420f011..ff3b28c3fe 100644 Binary files a/ui/pages/__screenshots__/ArbitrumL2TxnWithdrawals.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/ArbitrumL2TxnWithdrawals.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/BeaconChainDeposits.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/BeaconChainDeposits.pw.tsx_default_base-view-1.png index 16ea26a197..4a0a0860b5 100644 Binary files a/ui/pages/__screenshots__/BeaconChainDeposits.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/BeaconChainDeposits.pw.tsx_default_base-view-1.png differ diff --git a/ui/pages/__screenshots__/BeaconChainDeposits.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/BeaconChainDeposits.pw.tsx_default_mobile-base-view-1.png index c3f2e0df68..51bf726cff 100644 Binary files a/ui/pages/__screenshots__/BeaconChainDeposits.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/BeaconChainDeposits.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png index 6cb5048ce2..5d974b9d2e 100644 Binary files a/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png index 197ad6e75b..0b29f11f35 100644 Binary files a/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png index c2bab4e0c2..7608d2d268 100644 Binary files a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png and b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png differ diff --git a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png index b641edea56..69a75b1fc5 100644 Binary files a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png and b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png differ diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index af753e083b..2bfdf389bd 100644 Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png index adff73f8f2..9fc6fb4f65 100644 Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png index d7bdb90fea..f7869efc13 100644 Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png differ diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png index 7d6bcba376..0da1ef499a 100644 Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png index 60536e0692..dc3efb5ae9 100644 Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png differ diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png index cd18bfd5fe..a63bc56462 100644 Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png differ diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png index a8e3cfc0b5..1b1458682d 100644 Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png differ diff --git a/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png b/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png index aee46cbc1c..99da9cab7b 100644 Binary files a/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png and b/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-testnet-cluster-details-mobile-1.png b/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-testnet-cluster-details-mobile-1.png index 7a885403b2..e3b0fce5ae 100644 Binary files a/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-testnet-cluster-details-mobile-1.png and b/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-testnet-cluster-details-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png b/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png index 8c86f9fbe4..f02f50eca6 100644 Binary files a/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png and b/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-testnet-cluster-details-mobile-1.png b/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-testnet-cluster-details-mobile-1.png index 3ead942193..d1592da46e 100644 Binary files a/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-testnet-cluster-details-mobile-1.png and b/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-testnet-cluster-details-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Epoch.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/Epoch.pw.tsx_default_base-view-mobile-1.png index 894be882ec..a8b2ebd0ec 100644 Binary files a/ui/pages/__screenshots__/Epoch.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/Epoch.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Epoch.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/Epoch.pw.tsx_mobile_base-view-mobile-1.png index b2556a52c9..395b959b03 100644 Binary files a/ui/pages/__screenshots__/Epoch.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/Epoch.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Epochs.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/Epochs.pw.tsx_mobile_base-view-mobile-1.png index 777fe71408..a1ad743475 100644 Binary files a/ui/pages/__screenshots__/Epochs.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/Epochs.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-base-view-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-base-view-1.png index b4fc960340..66667156f8 100644 Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-base-view-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-base-view-1.png differ diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png index 70edf001f2..cd0f92deea 100644 Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png b/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png index 3451e3494b..afd9c0a0ee 100644 Binary files a/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png and b/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_base-view-1.png index 0d2453fe07..89cddd79ca 100644 Binary files a/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_base-view-1.png differ diff --git a/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_mobile-base-view-1.png index 5fd7670ab5..b38df62ed0 100644 Binary files a/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/ScrollL2Deposits.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_base-view-1.png index b6c1901344..22eb9d99c6 100644 Binary files a/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_base-view-1.png differ diff --git a/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_mobile-base-view-1.png index d129310319..602bbd5832 100644 Binary files a/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/ScrollL2Withdrawals.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png index 8268caabc1..209439acea 100644 Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png differ diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_scam-token-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_scam-token-1.png index 2bd06e8954..7cba30ce76 100644 Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_scam-token-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_scam-token-1.png differ diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_with-search-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_with-search-mobile-dark-mode-1.png index 9758f56c98..37469cf09f 100644 Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_with-search-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_dark-color-mode_with-search-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-1.png b/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-1.png index 9374e5e1b5..a21636c6ff 100644 Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-1.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-1.png differ diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_default_with-search-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Tokens.pw.tsx_default_with-search-mobile-dark-mode-1.png index e6a1fe74e0..ee4618d128 100644 Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_default_with-search-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_default_with-search-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_with-search-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_with-search-mobile-dark-mode-1.png index 0fb6aabd8a..f790121fb5 100644 Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_with-search-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_with-search-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png index dd0d75cd98..b4c0e1740d 100644 Binary files a/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png differ diff --git a/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png index 05d71e25cd..9d7ad2933a 100644 Binary files a/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png index 9e46ffee5e..e0eb660268 100644 Binary files a/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png index 55ce9a9d57..27bb5f0068 100644 Binary files a/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_mobile_base-view-mobile-1.png index 5cebcf23ee..651de91869 100644 Binary files a/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ValidatorsZilliqa.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsZilliqa.pw.tsx_mobile_base-view-mobile-1.png index 1e2e73b6f1..dbf176c19a 100644 Binary files a/ui/pages/__screenshots__/ValidatorsZilliqa.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/ValidatorsZilliqa.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png index c96677adab..4ed7adcbc7 100644 Binary files a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png index b31e4b0912..7c866500c9 100644 Binary files a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_failed-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_failed-transaction-dark-mode-mobile-1.png index 1f84d2e5b7..3c2f2dda04 100644 Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_failed-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_failed-transaction-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_successful-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_successful-transaction-dark-mode-mobile-1.png index d3ce145461..cafa531d8e 100644 Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_successful-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_successful-transaction-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_failed-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_failed-transaction-dark-mode-mobile-1.png index a9dc25d97f..3509b0de33 100644 Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_failed-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_failed-transaction-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_successful-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_successful-transaction-dark-mode-mobile-1.png index 10cc274c3e..612a708017 100644 Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_successful-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_successful-transaction-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_failed-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_failed-transaction-dark-mode-mobile-1.png index 5f846df58d..eeb8d4d192 100644 Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_failed-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_failed-transaction-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_successful-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_successful-transaction-dark-mode-mobile-1.png index 6b0dd7c43d..79be7044c1 100644 Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_successful-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_successful-transaction-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png index c7a0413e85..04ff8595d2 100644 Binary files a/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_mobile_base-view-mobile-1.png index 90165d2955..ed2776b66c 100644 Binary files a/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/shared/CurrencyValue.tsx b/ui/shared/CurrencyValue.tsx deleted file mode 100644 index ecfa3d5573..0000000000 --- a/ui/shared/CurrencyValue.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { chakra } from '@chakra-ui/react'; -import React from 'react'; - -import getCurrencyValue from 'lib/getCurrencyValue'; -import { currencyUnits } from 'lib/units'; -import { Skeleton } from 'toolkit/chakra/skeleton'; -import { Tooltip } from 'toolkit/chakra/tooltip'; -import { GWEI } from 'toolkit/utils/consts'; - -interface Props { - value: string | null; - currency?: string; - exchangeRate?: string | null; - className?: string; - accuracy?: number; - accuracyUsd?: number; - decimals?: string | null; - isLoading?: boolean; - startElement?: React.ReactNode; - showGweiTooltip?: boolean; -} - -const CurrencyValue = ({ value, currency = '', decimals, exchangeRate, className, accuracy, accuracyUsd, isLoading, startElement, showGweiTooltip }: Props) => { - if (isLoading) { - return ( - 0.00 ($0.00) - ); - } - - if (value === undefined || value === null) { - return ( - - - - - ); - } - const { valueCurr, valueStr: valueResult, usd: usdResult } = getCurrencyValue({ value, accuracy, accuracyUsd, exchangeRate, decimals }); - - const valueElement = ( - - { valueResult }{ currency ? ` ${ currency }` : '' } - - ); - const valueInGwei = showGweiTooltip ? valueCurr.multipliedBy(GWEI).toFormat() : null; - - return ( - - { startElement } - { showGweiTooltip ? ( - - { valueElement } - - ) : valueElement } - { usdResult && (${ usdResult }) } - - ); -}; - -export default React.memo(chakra(CurrencyValue)); diff --git a/ui/shared/DetailedInfo/DetailedInfoItemBreakdown.tsx b/ui/shared/DetailedInfo/DetailedInfoItemBreakdown.tsx index 983298f1d2..b72a4c89a3 100644 --- a/ui/shared/DetailedInfo/DetailedInfoItemBreakdown.tsx +++ b/ui/shared/DetailedInfo/DetailedInfoItemBreakdown.tsx @@ -4,7 +4,7 @@ import React from 'react'; import type { CollapsibleDetailsProps } from 'toolkit/chakra/collapsible'; import { CollapsibleDetails } from 'toolkit/chakra/collapsible'; import { Hint } from 'toolkit/components/Hint/Hint'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; interface ContainerProps extends CollapsibleDetailsProps {} @@ -41,7 +41,7 @@ export const Row = ({ label, hint, children }: RowProps) => { <> - + { children } diff --git a/ui/shared/DetailedInfo/DetailedInfoNativeCoinValue.tsx b/ui/shared/DetailedInfo/DetailedInfoNativeCoinValue.tsx new file mode 100644 index 0000000000..8d889f42cb --- /dev/null +++ b/ui/shared/DetailedInfo/DetailedInfoNativeCoinValue.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +import type { Props as NativeCoinValueProps } from 'ui/shared/value/NativeCoinValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; + +import { ItemValue } from './DetailedInfo'; + +interface Props extends NativeCoinValueProps {} + +const DetailedInfoNativeCoinValue = ({ ...rest }: Props) => { + return ( + + + + ); +}; + +export default React.memo(DetailedInfoNativeCoinValue); diff --git a/ui/shared/DetailedInfo/DetailedInfoTimestamp.tsx b/ui/shared/DetailedInfo/DetailedInfoTimestamp.tsx index 311c910d3f..879814ece5 100644 --- a/ui/shared/DetailedInfo/DetailedInfoTimestamp.tsx +++ b/ui/shared/DetailedInfo/DetailedInfoTimestamp.tsx @@ -2,11 +2,10 @@ import React from 'react'; import dayjs from 'lib/date/dayjs'; import { Skeleton } from 'toolkit/chakra/skeleton'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import IconSvg from 'ui/shared/IconSvg'; import TextSeparator from 'ui/shared/TextSeparator'; -import TruncatedValue from '../TruncatedValue'; - type Props = { // should be string, will be fixed on the back-end timestamp: string | number; @@ -22,9 +21,9 @@ const DetailedInfoTimestamp = ({ timestamp, isLoading, noIcon }: Props) => { { dayjs(timestamp).fromNow() } - ); diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png index b3f72bbee7..cccb1ed795 100644 Binary files a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png differ diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-tooltip-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-tooltip-dark-mode-1.png index aaf9083de6..7cf6a177ba 100644 Binary files a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-tooltip-dark-mode-1.png and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-tooltip-dark-mode-1.png differ diff --git a/ui/shared/TokenTransfer/TokenTransferListItem.tsx b/ui/shared/TokenTransfer/TokenTransferListItem.tsx index 7399a0ccae..8e98d03df0 100644 --- a/ui/shared/TokenTransfer/TokenTransferListItem.tsx +++ b/ui/shared/TokenTransfer/TokenTransferListItem.tsx @@ -4,7 +4,6 @@ import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; import type { ClusterChainConfig } from 'types/multichain'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { getTokenTypeName } from 'lib/token/tokenTypes'; import { Badge } from 'toolkit/chakra/badge'; import { Skeleton } from 'toolkit/chakra/skeleton'; @@ -15,6 +14,7 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers'; +import AssetValue from 'ui/shared/value/AssetValue'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; type Props = TokenTransfer & { @@ -39,14 +39,6 @@ const TokenTransferListItem = ({ isLoading, chainData, }: Props) => { - const { usd, valueStr } = total && 'value' in total && total.value !== null ? getCurrencyValue({ - value: total.value, - exchangeRate: token?.exchange_rate, - accuracy: 8, - accuracyUsd: 2, - decimals: total.decimals || '0', - }) : { usd: null, valueStr: null }; - return ( @@ -100,13 +92,16 @@ const TokenTransferListItem = ({ isLoading={ isLoading } w="100%" /> - { valueStr && ( + { total && 'value' in total && total.value !== null && ( Value - - { valueStr } - { usd && (${ usd }) } - + ) } diff --git a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx index 23a950319c..5137b06fa1 100644 --- a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx +++ b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx @@ -4,7 +4,6 @@ import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; import type { ClusterChainConfig } from 'types/multichain'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { getTokenTypeName } from 'lib/token/tokenTypes'; import { Badge } from 'toolkit/chakra/badge'; import { Skeleton } from 'toolkit/chakra/skeleton'; @@ -16,6 +15,7 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ChainIcon from 'ui/shared/externalChains/ChainIcon'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers'; +import AssetValue from 'ui/shared/value/AssetValue'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; type Props = TokenTransfer & { @@ -40,13 +40,6 @@ const TokenTransferTableItem = ({ isLoading, chainData, }: Props) => { - const { usd, valueStr } = total && 'value' in total && total.value !== null ? getCurrencyValue({ - value: total.value, - exchangeRate: token?.exchange_rate, - accuracy: 8, - accuracyUsd: 2, - decimals: total.decimals || '0', - }) : { usd: null, valueStr: null }; return ( @@ -131,16 +124,15 @@ const TokenTransferTableItem = ({ /> - { valueStr && ( - - { valueStr } - - ) } - { usd && ( - - ${ usd } - - ) } + ); diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png index 0773778622..9ed0900cf1 100644 Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png differ diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png index a0f0feb678..582c744061 100644 Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png differ diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png index 4af3a9e5c7..e765418b0f 100644 Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png differ diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png index 83b1451b89..a174a580d2 100644 Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png differ diff --git a/ui/shared/TokenTransferSnippet/TokenTransferSnippetFiat.tsx b/ui/shared/TokenTransferSnippet/TokenTransferSnippetFiat.tsx index b6c63348a9..04c85d3803 100644 --- a/ui/shared/TokenTransferSnippet/TokenTransferSnippetFiat.tsx +++ b/ui/shared/TokenTransferSnippet/TokenTransferSnippetFiat.tsx @@ -3,8 +3,7 @@ import React from 'react'; import type { TokenInfo } from 'types/api/token'; -import getCurrencyValue from 'lib/getCurrencyValue'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; +import TokenValue from 'ui/shared/value/TokenValue'; interface Props { token: TokenInfo; @@ -12,25 +11,14 @@ interface Props { decimals: string | null; } const FtTokenTransferSnippet = ({ token, value, decimals }: Props) => { - const { valueStr, usd } = getCurrencyValue({ - value: value, - exchangeRate: token.exchange_rate, - accuracyUsd: 2, - decimals: decimals, - }); - return ( - <> - for - { valueStr } - - { usd && (${ usd }) } - + for } + /> ); }; diff --git a/ui/shared/entities/base/components.tsx b/ui/shared/entities/base/components.tsx index 9a28df9e0c..e016555b88 100644 --- a/ui/shared/entities/base/components.tsx +++ b/ui/shared/entities/base/components.tsx @@ -10,13 +10,13 @@ import type { LinkProps } from 'toolkit/chakra/link'; import { Link as LinkToolkit } from 'toolkit/chakra/link'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { Tooltip } from 'toolkit/chakra/tooltip'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import type { Props as CopyToClipboardProps } from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import HashStringShorten from 'ui/shared/HashStringShorten'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; import type { Props as IconSvgProps } from 'ui/shared/IconSvg'; import IconSvg from 'ui/shared/IconSvg'; -import TruncatedValue from 'ui/shared/TruncatedValue'; import { getContentProps, getIconProps } from './utils'; @@ -218,10 +218,10 @@ const Content = chakra(({ if (truncation === 'tail') { return ( - diff --git a/ui/shared/logs/LogDecodedInputDataTable.tsx b/ui/shared/logs/LogDecodedInputDataTable.tsx index f5039168d6..5c359e95a1 100644 --- a/ui/shared/logs/LogDecodedInputDataTable.tsx +++ b/ui/shared/logs/LogDecodedInputDataTable.tsx @@ -5,9 +5,9 @@ import type { DecodedInput } from 'types/api/decodedInput'; import type { ArrayElement } from 'types/utils'; import { Skeleton } from 'toolkit/chakra/skeleton'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; -import TruncatedValue from 'ui/shared/TruncatedValue'; interface Props { data: DecodedInput['parameters']; @@ -44,7 +44,7 @@ const Row = ({ name, type, indexed, value, isLoading }: ArrayElement - + ); @@ -52,7 +52,7 @@ const Row = ({ name, type, indexed, value, isLoading }: ArrayElement - + ); @@ -60,8 +60,8 @@ const Row = ({ name, type, indexed, value, isLoading }: ArrayElement - - + + { indexed !== undefined && ( { indexed ? 'true' : 'false' } ) } diff --git a/ui/shared/stats/StatsWidget.pw.tsx b/ui/shared/stats/StatsWidget.pw.tsx index cc9fad8da4..216fcb68a8 100644 --- a/ui/shared/stats/StatsWidget.pw.tsx +++ b/ui/shared/stats/StatsWidget.pw.tsx @@ -34,6 +34,19 @@ test('with negative diff', async({ render }) => { await expect(component).toHaveScreenshot(); }); +test('with long value', async({ render }) => { + const component = await render( + , + ); + + await expect(component).toHaveScreenshot(); +}); + test('loading state', async({ render }) => { const component = await render( ) } - + { valuePrefix && { valuePrefix } } { typeof value === 'string' ? ( - + ) : ( value ) } diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-long-value-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-long-value-1.png new file mode 100644 index 0000000000..318fd7c239 Binary files /dev/null and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-long-value-1.png differ diff --git a/ui/shared/tx/TxFee.pw.tsx b/ui/shared/tx/TxFee.pw.tsx index 8ccd98ade6..1f2008506f 100644 --- a/ui/shared/tx/TxFee.pw.tsx +++ b/ui/shared/tx/TxFee.pw.tsx @@ -8,23 +8,23 @@ import TxFee from './TxFee'; test.use({ viewport: { width: 300, height: 100 } }); test('base view', async({ render }) => { - const component = await render(); + const component = await render(); await expect(component).toHaveScreenshot(); }); test('no usd value', async({ render }) => { - const component = await render(); + const component = await render(); await expect(component).toHaveScreenshot(); }); test('celo gas token', async({ render, mockAssetResponse }) => { await mockAssetResponse(txMock.celoTxn.celo?.gas_token?.icon_url as string, './playwright/mocks/image_svg.svg'); - const component = await render(); + const component = await render(); await expect(component).toHaveScreenshot(); }); test('stability token', async({ render, mockAssetResponse }) => { await mockAssetResponse(txMock.stabilityTx.stability_fee?.token.icon_url as string, './playwright/mocks/image_svg.svg'); - const component = await render(); + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/shared/tx/TxFee.tsx b/ui/shared/tx/TxFee.tsx index 7e64c75fcb..5de4425a4f 100644 --- a/ui/shared/tx/TxFee.tsx +++ b/ui/shared/tx/TxFee.tsx @@ -1,77 +1,65 @@ +import type { BoxProps } from '@chakra-ui/react'; import { chakra } from '@chakra-ui/react'; import React from 'react'; import type { Transaction, WrappedTransactionFields } from 'types/api/transaction'; import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; -import { currencyUnits } from 'lib/units'; -import { Skeleton } from 'toolkit/chakra/skeleton'; -import CurrencyValue from 'ui/shared/CurrencyValue'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; +import TokenValue from 'ui/shared/value/TokenValue'; -interface Props { - className?: string; - isLoading?: boolean; +interface Props extends BoxProps { + loading?: boolean; tx: Transaction | Pick; - withCurrency?: boolean; - withUsd?: boolean; accuracy?: number; accuracyUsd?: number; + noTooltip?: boolean; + noSymbol?: boolean; + noUsd?: boolean; + layout?: 'horizontal' | 'vertical'; } -const TxFee = ({ className, tx, accuracy, accuracyUsd, isLoading, withCurrency = true, withUsd }: Props) => { +const TxFee = ({ tx, accuracy, accuracyUsd, loading, noSymbol: noSymbolProp, noUsd, noTooltip, ...rest }: Props) => { if ('celo' in tx && tx.celo?.gas_token) { - const token = tx.celo.gas_token; - const { valueStr, usd } = getCurrencyValue({ - value: tx.fee.value || '0', - exchangeRate: token.exchange_rate, - decimals: token.decimals, - accuracy, - accuracyUsd, - }); return ( - - { valueStr } - - { usd && withUsd && (${ usd }) } - + ); } if ('stability_fee' in tx && tx.stability_fee) { - const token = tx.stability_fee.token; - const { valueStr, usd } = getCurrencyValue({ - value: tx.stability_fee.total_fee, - exchangeRate: token.exchange_rate, - decimals: token.decimals, - accuracy, - accuracyUsd, - }); - return ( - - { valueStr } - { valueStr !== '0' && } - { usd && withUsd && (${ usd }) } - + ); } - const showCurrency = withCurrency && !config.UI.views.tx.hiddenFields?.fee_currency; + const noSymbol = noSymbolProp || config.UI.views.tx.hiddenFields?.fee_currency; return ( - ); }; diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png index 5dc232ebe6..45c79ed534 100644 Binary files a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png differ diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png index 016b9263c4..8f94c5beda 100644 Binary files a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png differ diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png index aa9e694c80..683f1903cb 100644 Binary files a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png differ diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png index 4cb9fce88d..24a5da83c9 100644 Binary files a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png differ diff --git a/ui/shared/value/AssetValue.tsx b/ui/shared/value/AssetValue.tsx new file mode 100644 index 0000000000..36c8196606 --- /dev/null +++ b/ui/shared/value/AssetValue.tsx @@ -0,0 +1,92 @@ +import type { BoxProps } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; +import React from 'react'; + +import { thinsp } from 'toolkit/utils/htmlEntities'; + +import type { Params as CalculateUsdValueParams } from './calculateUsdValue'; +import calculateUsdValue from './calculateUsdValue'; +import SimpleValue from './SimpleValue'; +import { DEFAULT_ACCURACY, DEFAULT_ACCURACY_USD } from './utils'; + +export interface Props extends Omit, Omit { + amount: string | null | undefined; + asset?: React.ReactNode; + startElement?: React.ReactNode; + endElement?: React.ReactNode; + noTooltip?: boolean; + loading?: boolean; + layout?: 'horizontal' | 'vertical'; + tooltipContent?: React.ReactNode; +} + +const AssetValue = ({ + amount, + asset, + decimals, + accuracy = DEFAULT_ACCURACY, + accuracyUsd = DEFAULT_ACCURACY_USD, + startElement, + endElement, + noTooltip, + loading, + exchangeRate, + layout = 'horizontal', + tooltipContent, + ...rest +}: Props) => { + + if (amount === null || amount === undefined) { + return -; + } + + const { valueBn, usdBn } = calculateUsdValue({ amount, decimals, accuracy, accuracyUsd, exchangeRate }); + + if (!exchangeRate) { + return ( + + ); + } + + return ( + + + ( : undefined } + prefix="$" + endElement={ layout === 'horizontal' ? ) : undefined } + loading={ loading } + color="text.secondary" + /> + + ); +}; + +export default React.memo(AssetValue); diff --git a/ui/shared/value/GasPriceValue.tsx b/ui/shared/value/GasPriceValue.tsx new file mode 100644 index 0000000000..959ee5a0bb --- /dev/null +++ b/ui/shared/value/GasPriceValue.tsx @@ -0,0 +1,58 @@ +import type { BoxProps } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; +import BigNumber from 'bignumber.js'; +import React from 'react'; + +import { currencyUnits } from 'lib/units'; +import { thinsp } from 'toolkit/utils/htmlEntities'; + +import SimpleValue from './SimpleValue'; +import { GWEI, WEI } from './utils'; + +export interface Props extends Omit { + amount: string; + asset?: string; + accuracy?: number; + noTooltip?: boolean; + loading?: boolean; +} + +const GasPriceValue = ({ + amount, + asset = currencyUnits.ether, + accuracy = 0, + noTooltip, + loading, + ...rest +}: Props) => { + return ( + + + ( } + endElement={ `${ thinsp }${ currencyUnits.gwei })` } + noTooltip={ noTooltip } + loading={ loading } + color="text.secondary" + /> + + ); +}; + +export default React.memo(GasPriceValue); diff --git a/ui/shared/value/NativeCoinValue.tsx b/ui/shared/value/NativeCoinValue.tsx new file mode 100644 index 0000000000..794e439487 --- /dev/null +++ b/ui/shared/value/NativeCoinValue.tsx @@ -0,0 +1,91 @@ +import { Box } from '@chakra-ui/react'; +import BigNumber from 'bignumber.js'; +import React from 'react'; + +import { thinsp } from 'toolkit/utils/htmlEntities'; +import CopyToClipboard from 'ui/shared/CopyToClipboard'; + +import type { Props as AssetValueProps } from './AssetValue'; +import AssetValue from './AssetValue'; +import type { Unit } from './utils'; +import { GWEI, getUnitName, getUnitDecimals } from './utils'; + +export interface Props extends AssetValueProps { + units?: Unit; + unitsTooltip?: Unit; + // if units in tooltip are different from units and copyOriginalValue is true, the original value will be copied to clipboard + // otherwise the the value shown in tooltip will be copied + copyOriginalValue?: boolean; + noSymbol?: boolean; + // if value is greater than 10 ^ gweiThreshold and unit are wei, gwei units will be used for better formatting + gweiThreshold?: number; +} + +const NativeCoinValue = ({ + amount, + asset: assetProp, + units: unitsProp = 'ether', + unitsTooltip, + copyOriginalValue, + noSymbol, + loading, + gweiThreshold, + accuracy, + noTooltip, + ...rest +}: Props) => { + + const units = React.useMemo(() => { + if (amount && gweiThreshold && unitsProp === 'wei') { + const valueInGwei = BigNumber(amount).div(GWEI); + if (valueInGwei.isGreaterThanOrEqualTo(10 ** -gweiThreshold)) { + return 'gwei'; + } + } + + return unitsProp; + }, [ gweiThreshold, unitsProp, amount ]); + + const decimals = getUnitDecimals(units); + + const asset = (() => { + if (!noSymbol) { + if (assetProp) { + return assetProp; + } + + return getUnitName(units); + } + })(); + + const tooltipContent = React.useMemo(() => { + if (unitsTooltip && unitsTooltip !== units) { + const unitDecimals = getUnitDecimals(unitsTooltip); + const unitName = getUnitName(unitsTooltip); + const displayedValue = BigNumber(amount || 0).div(new BigNumber(10).pow(unitDecimals)); + const valueToCopy = copyOriginalValue ? BigNumber(amount || 0).div(new BigNumber(10).pow(decimals)).toFixed() : displayedValue.toFixed(); + + return ( + + { displayedValue.toFormat() }{ thinsp }{ unitName } + + + ); + } + }, [ unitsTooltip, units, amount, copyOriginalValue, decimals ]); + + return ( + + ); +}; + +export default React.memo(NativeCoinValue); diff --git a/ui/shared/value/SimpleValue.tsx b/ui/shared/value/SimpleValue.tsx new file mode 100644 index 0000000000..98d7fb791a --- /dev/null +++ b/ui/shared/value/SimpleValue.tsx @@ -0,0 +1,68 @@ +import type { BoxProps } from '@chakra-ui/react'; +import { Box, chakra } from '@chakra-ui/react'; +import type BigNumber from 'bignumber.js'; +import React from 'react'; + +import { Skeleton } from 'toolkit/chakra/skeleton'; +import { Tooltip } from 'toolkit/chakra/tooltip'; +import CopyToClipboard from 'ui/shared/CopyToClipboard'; + +import { DEFAULT_ACCURACY, formatBnValue } from './utils'; + +const TOOLTIP_CONTENT_PROPS = { maxW: { base: 'calc(100vw - 8px)', lg: '400px' } }; + +export interface Props extends Omit { + value: BigNumber; + accuracy?: number; + prefix?: string; + postfix?: string; + startElement?: React.ReactNode; + endElement?: React.ReactNode; + tooltipContent?: React.ReactNode; + noTooltip?: boolean; + loading?: boolean; + overflowed?: boolean; +} + +const SimpleValue = ({ + value, + accuracy = DEFAULT_ACCURACY, + prefix, + postfix, + startElement, + endElement, + tooltipContent: tooltipContentProp, + noTooltip, + loading, + overflowed, + ...rest +}: Props) => { + + const tooltipContent = React.useMemo(() => { + return ( + + { prefix ?? '' }{ value.toFormat() }{ postfix ?? '' } + + + ); + }, [ postfix, prefix, value ]); + + return ( + + { startElement } + + + { formatBnValue({ value, accuracy, prefix, postfix, overflowed }) } + + + { typeof endElement === 'string' ? { endElement } : endElement } + + ); +}; + +export default React.memo(SimpleValue); diff --git a/ui/shared/value/TokenValue.tsx b/ui/shared/value/TokenValue.tsx new file mode 100644 index 0000000000..9961cd0a30 --- /dev/null +++ b/ui/shared/value/TokenValue.tsx @@ -0,0 +1,44 @@ +import type { BoxProps } from '@chakra-ui/react'; +import React from 'react'; + +import type { TokenInfo } from 'types/api/token'; + +import type { EntityProps as TokenEntityProps } from 'ui/shared/entities/token/TokenEntity'; +import TokenEntity from 'ui/shared/entities/token/TokenEntity'; +import TokenEntityL1 from 'ui/shared/entities/token/TokenEntityL1'; + +import type { Props as AssetValueProps } from './AssetValue'; +import AssetValue from './AssetValue'; + +interface Props extends Omit { + token: TokenInfo; + tokenEntityProps?: Omit & BoxProps; + layer?: 'L1'; +} + +const TokenValue = ({ token, tokenEntityProps, layer, ...rest }: Props) => { + const TokenComponent = layer === 'L1' ? TokenEntityL1 : TokenEntity; + + const asset = ( + + ); + return ( + + ); +}; + +export default React.memo(TokenValue); diff --git a/ui/shared/value/calculateUsdValue.tsx b/ui/shared/value/calculateUsdValue.tsx new file mode 100644 index 0000000000..78e67871f4 --- /dev/null +++ b/ui/shared/value/calculateUsdValue.tsx @@ -0,0 +1,52 @@ +import BigNumber from 'bignumber.js'; + +import { ZERO } from 'toolkit/utils/consts'; + +import { DEFAULT_ACCURACY, DEFAULT_ACCURACY_USD } from './utils'; + +export interface Params { + amount: string; + decimals?: string | number | null; + exchangeRate?: string | null; + accuracy?: number; + accuracyUsd?: number; +} + +export default function calculateUsdValue({ amount, accuracy = DEFAULT_ACCURACY, accuracyUsd = DEFAULT_ACCURACY_USD, decimals, exchangeRate }: Params) { + const valueBn = BigNumber(amount).div(BigNumber(10 ** Number(decimals || '0'))); + + const valueStr = (() => { + if (!accuracy) { + return valueBn.toFormat(); + } + const formattedValue = valueBn.dp(accuracy).toFormat(); + return formattedValue === '0' && !valueBn.isEqualTo(ZERO) ? `< 0.${ '0'.repeat(accuracy - 1) }1` : formattedValue; + })(); + + const usdBn = (() => { + if (!exchangeRate) { + return ZERO; + } + const exchangeRateBn = new BigNumber(exchangeRate); + return valueBn.times(exchangeRateBn); + })(); + + const usdStr = (() => { + if (!exchangeRate) { + return undefined; + } + + if (accuracyUsd && !usdBn.isEqualTo(0)) { + const usdBnDp = usdBn.dp(accuracyUsd); + return usdBnDp.isEqualTo(0) ? usdBn.precision(accuracyUsd).toFormat() : usdBnDp.toFormat(); + } + return usdBn.toFormat(); + })(); + + return { + valueBn, + valueStr, + usdBn, + usdStr, + }; +} diff --git a/ui/shared/value/utils.ts b/ui/shared/value/utils.ts new file mode 100644 index 0000000000..7064d799c6 --- /dev/null +++ b/ui/shared/value/utils.ts @@ -0,0 +1,60 @@ +import BigNumber from 'bignumber.js'; + +import config from 'configs/app'; +import { currencyUnits } from 'lib/units'; +import { ZERO } from 'toolkit/utils/consts'; +import { thinsp } from 'toolkit/utils/htmlEntities'; + +export type Unit = 'wei' | 'gwei' | 'ether'; + +interface FormatBnValueParams { + value: BigNumber; + accuracy?: number; + prefix?: string; + postfix?: string; + overflowed?: boolean; +} + +export const formatBnValue = ({ value, accuracy, prefix, postfix, overflowed }: FormatBnValueParams) => { + const fullPrefix = `${ overflowed ? `>${ thinsp }` : '' }${ prefix ?? '' }`; + + if (!accuracy) { + return `${ fullPrefix }${ value.toFormat() }${ postfix ?? '' }`; + } + + const formattedValue = value.dp(accuracy).toFormat(); + + return formattedValue === '0' && !value.isEqualTo(ZERO) && !overflowed ? + `<${ thinsp }${ prefix ?? '' }0.${ '0'.repeat(accuracy - 1) }1${ postfix ?? '' }` : + `${ fullPrefix }${ formattedValue }${ postfix ?? '' }`; +}; + +export const DEFAULT_ACCURACY = 8; +export const DEFAULT_ACCURACY_USD = 2; + +export const WEI_DECIMALS = config.chain.currency.decimals; +// maybe we need to add customization for gwei decimals as well +export const GWEI_DECIMALS = 9; + +export const WEI = new BigNumber(10 ** WEI_DECIMALS); +export const GWEI = new BigNumber(10 ** GWEI_DECIMALS); + +export const getUnitDecimals = (units: Unit) => { + if (units === 'wei') { + return 0; + } + if (units === 'gwei') { + return GWEI_DECIMALS; + } + return WEI_DECIMALS; +}; + +export const getUnitName = (units: Unit) => { + if (units === 'wei') { + return currencyUnits.wei; + } + if (units === 'gwei') { + return currencyUnits.gwei; + } + return currencyUnits.ether; +}; diff --git a/ui/shared/zetaChain/ZetaChainCCTXValue.tsx b/ui/shared/zetaChain/ZetaChainCCTXValue.tsx index b80dab2cd4..440bbec7b6 100644 --- a/ui/shared/zetaChain/ZetaChainCCTXValue.tsx +++ b/ui/shared/zetaChain/ZetaChainCCTXValue.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { CoinType } from '@blockscout/zetachain-cctx-types'; import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Skeleton } from 'toolkit/chakra/skeleton'; +import calculateUsdValue from 'ui/shared/value/calculateUsdValue'; type Props = { coinType: CoinType; @@ -23,15 +23,15 @@ const ZetaChainCCTXValue = ({ coinType, tokenSymbol, amount, decimals, isLoading switch (coinType) { case CoinType.ERC20: unit = tokenSymbol || 'Unnamed token'; - value = getCurrencyValue({ value: amount, decimals: decimals?.toString() || '18', accuracy }).valueStr; + value = calculateUsdValue({ amount, decimals: decimals?.toString() || '18', accuracy }).valueStr; break; case CoinType.ZETA: unit = config.chain.currency.symbol || config.chain.currency.name || ''; - value = getCurrencyValue({ value: amount, decimals: config.chain.currency.decimals?.toString() || '18', accuracy }).valueStr; + value = calculateUsdValue({ amount, decimals: config.chain.currency.decimals?.toString() || '18', accuracy }).valueStr; break; case CoinType.GAS: unit = tokenSymbol || 'Unnamed token'; - value = getCurrencyValue({ value: amount, decimals: decimals?.toString() || '18', accuracy }).valueStr; + value = calculateUsdValue({ amount, decimals: decimals?.toString() || '18', accuracy }).valueStr; break; default: unit = '-'; diff --git a/ui/showcases/Link.tsx b/ui/showcases/Link.tsx index 466de83761..3723788db1 100644 --- a/ui/showcases/Link.tsx +++ b/ui/showcases/Link.tsx @@ -1,6 +1,8 @@ import { Box } from '@chakra-ui/react'; import React from 'react'; +import type { TokenInfo } from 'types/api/token'; + import * as addressMock from 'mocks/address/address'; import * as implementationsMock from 'mocks/address/implementations'; import * as blobsMock from 'mocks/blobs/blobs'; @@ -20,20 +22,19 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity'; import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts'; -const TOKEN = { +export const TOKEN = { address_hash: '0xdAC17F958D2ee523a2206206994597C13D831ec7', circulating_market_cap: '139446916652.6728', decimals: '6', exchange_rate: '0.999921', - holders: '8348277', + holders_count: '8348277', icon_url: 'https://assets.coingecko.com/coins/images/325/small/Tether.png?1696501661', name: 'Tether', symbol: 'USDT', total_supply: '76923002799740785', type: 'ERC-20' as const, - volume_24h: '82069586622.4918', reputation: 'ok' as const, -}; +} satisfies TokenInfo<'ERC-20'>; const LinkShowcase = () => { diff --git a/ui/showcases/Values.pw.tsx b/ui/showcases/Values.pw.tsx new file mode 100644 index 0000000000..bec9f1de15 --- /dev/null +++ b/ui/showcases/Values.pw.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { test, expect } from 'playwright/lib'; +import { TabsRoot } from 'toolkit/chakra/tabs'; + +import Values from './Values'; + +test('default', async({ render }) => { + const component = await render(); + await expect(component).toHaveScreenshot(); +}); diff --git a/ui/showcases/Values.tsx b/ui/showcases/Values.tsx new file mode 100644 index 0000000000..f6087e958a --- /dev/null +++ b/ui/showcases/Values.tsx @@ -0,0 +1,239 @@ +import BigNumber from 'bignumber.js'; +import React from 'react'; + +import AssetValue from 'ui/shared/value/AssetValue'; +import GasPriceValue from 'ui/shared/value/GasPriceValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; +import SimpleValue from 'ui/shared/value/SimpleValue'; +import TokenValue from 'ui/shared/value/TokenValue'; + +import { TOKEN } from './Link'; +import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts'; + +const ValuesShowcase = () => { + return ( + +
+ SimpleValue + Basic examples + + + + + + + + + + + + + Overflowed + + + + + + + + + + Loading + + + + + + +
+ +
+ NativeCoinValue + Units + + + + + + + + + + + + + + + + + Gwei threshold + + + + + + + + + + Different units in tooltip + + + + + + + Layout + + + + + + + + +
+ +
+ TokenValue + Examples + + + + + +
+ +
+ AssetValue + Layout + + + + + + + + + + Loading + + + + + + +
+ +
+ GasPriceValue + Examples + + + + + +
+ + + ); +}; + +export default React.memo(ValuesShowcase); diff --git a/ui/showcases/__screenshots__/Values.pw.tsx_default_default-1.png b/ui/showcases/__screenshots__/Values.pw.tsx_default_default-1.png new file mode 100644 index 0000000000..974f13bd99 Binary files /dev/null and b/ui/showcases/__screenshots__/Values.pw.tsx_default_default-1.png differ diff --git a/ui/snippets/user/profile/UserProfileContent.tsx b/ui/snippets/user/profile/UserProfileContent.tsx index 8a01a36974..a773ccfc4d 100644 --- a/ui/snippets/user/profile/UserProfileContent.tsx +++ b/ui/snippets/user/profile/UserProfileContent.tsx @@ -12,7 +12,7 @@ import shortenString from 'lib/shortenString'; import { Button } from 'toolkit/chakra/button'; import { Link } from 'toolkit/chakra/link'; import { Hint } from 'toolkit/components/Hint/Hint'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import useLogout from 'ui/snippets/auth/useLogout'; import UserWalletAutoConnectAlert from '../UserWalletAutoConnectAlert'; @@ -107,7 +107,7 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress } Email { data?.email ? - : Add email } + : Add email } diff --git a/ui/stats/NumberWidgetsList.tsx b/ui/stats/NumberWidgetsList.tsx index 2b23feb2ad..913439bf31 100644 --- a/ui/stats/NumberWidgetsList.tsx +++ b/ui/stats/NumberWidgetsList.tsx @@ -22,7 +22,7 @@ const NumberWidgetsList = () => { return ( { @@ -35,11 +35,15 @@ const NumberWidgetsList = () => { unitsStr = ' ' + units; } + const valueNum = Number(value); + const maximumFractionDigits = valueNum < 10 ** -3 ? undefined : 3; + return ( diff --git a/ui/token/TokenDetails.tsx b/ui/token/TokenDetails.tsx index 766c9906d4..be3627645e 100644 --- a/ui/token/TokenDetails.tsx +++ b/ui/token/TokenDetails.tsx @@ -1,4 +1,4 @@ -import { Box } from '@chakra-ui/react'; +import { chakra } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import BigNumber from 'bignumber.js'; import { useRouter } from 'next/router'; @@ -12,7 +12,6 @@ import type { ResourceError } from 'lib/api/resources'; import useApiQuery from 'lib/api/useApiQuery'; import { useMultichainContext } from 'lib/contexts/multichain'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; -import getCurrencyValue from 'lib/getCurrencyValue'; import useIsMounted from 'lib/hooks/useIsMounted'; import { TOKEN_COUNTERS } from 'stubs/token'; import { Link } from 'toolkit/chakra/link'; @@ -22,7 +21,7 @@ import AppActionButton from 'ui/shared/AppActionButton/AppActionButton'; import useAppActionData from 'ui/shared/AppActionButton/useAppActionData'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import DetailedInfoSponsoredItem from 'ui/shared/DetailedInfo/DetailedInfoSponsoredItem'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import AssetValue from 'ui/shared/value/AssetValue'; import TokenNftMarketplaces from './TokenNftMarketplaces'; @@ -94,18 +93,6 @@ const TokenDetails = ({ tokenQuery }: Props) => { type, } = tokenQuery.data || {}; - let totalSupplyValue; - let totalSupplyValueFull; - - if (decimals) { - const totalValue = totalSupply ? getCurrencyValue({ value: totalSupply, accuracy: 3, accuracyUsd: 2, exchangeRate, decimals }) : undefined; - const totalValueFull = totalSupply ? getCurrencyValue({ value: totalSupply, accuracyUsd: 2, exchangeRate, decimals }) : undefined; - totalSupplyValue = totalValue?.valueStr; - totalSupplyValueFull = totalValueFull?.valueStr; - } else { - totalSupplyValue = Number(totalSupply).toLocaleString(); - } - return ( { exchangeRate && ( @@ -151,16 +138,14 @@ const TokenDetails = ({ tokenQuery }: Props) => { wordBreak="break-word" whiteSpace="pre-wrap" > - - - - - + { symbol } } + accuracy={ 3 } + decimals={ decimals ?? '0' } + loading={ tokenQuery.isPlaceholderData } + w="100%" + /> { - const quantity = BigNumber(holder.value).div(BigNumber(10 ** Number(token.decimals))).dp(6).toFormat(); - return ( Address @@ -34,16 +32,18 @@ const TokenHoldersListItem = ({ holder, token, isLoading }: Props) => { <> ID# - + ) } Quantity - - { quantity } - + { token.total_supply && token.type !== 'ERC-404' && ( diff --git a/ui/token/TokenHolders/TokenHoldersTableItem.tsx b/ui/token/TokenHolders/TokenHoldersTableItem.tsx index bb9a3734d8..708c27032a 100644 --- a/ui/token/TokenHolders/TokenHoldersTableItem.tsx +++ b/ui/token/TokenHolders/TokenHoldersTableItem.tsx @@ -3,11 +3,11 @@ import React from 'react'; import type { TokenHolder, TokenInfo } from 'types/api/token'; -import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; -import TruncatedValue from 'ui/shared/TruncatedValue'; import Utilization from 'ui/shared/Utilization/Utilization'; +import AssetValue from 'ui/shared/value/AssetValue'; type Props = { holder: TokenHolder; @@ -16,8 +16,6 @@ type Props = { }; const TokenTransferTableItem = ({ holder, token, isLoading }: Props) => { - const quantity = BigNumber(holder.value).div(BigNumber(10 ** Number(token.decimals))).toFormat(); - return ( @@ -30,13 +28,15 @@ const TokenTransferTableItem = ({ holder, token, isLoading }: Props) => { { (token.type === 'ERC-1155' || token.type === 'ERC-404') && 'token_id' in holder && ( - + ) } - - { quantity } - + { token.total_supply && token.type !== 'ERC-404' && ( diff --git a/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-without-IDs-1.png b/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-without-IDs-1.png index b440b34273..43b5c37854 100644 Binary files a/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-without-IDs-1.png and b/ui/token/TokenHolders/__screenshots__/TokenHoldersList.pw.tsx_default_base-view-without-IDs-1.png differ diff --git a/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-without-IDs-1.png b/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-without-IDs-1.png index 9cc46b0e08..7124740fbc 100644 Binary files a/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-without-IDs-1.png and b/ui/token/TokenHolders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-without-IDs-1.png differ diff --git a/ui/token/TokenTransfer/TokenTransferListItem.tsx b/ui/token/TokenTransfer/TokenTransferListItem.tsx index 7ef019f5e5..4580a68367 100644 --- a/ui/token/TokenTransfer/TokenTransferListItem.tsx +++ b/ui/token/TokenTransfer/TokenTransferListItem.tsx @@ -1,20 +1,20 @@ -import { Flex, Grid } from '@chakra-ui/react'; +import { Flex } from '@chakra-ui/react'; import React from 'react'; import type { TokenInstance } from 'types/api/token'; import type { TokenTransfer } from 'types/api/tokenTransfer'; import type { ClusterChainConfig } from 'types/multichain'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes'; import { Badge } from 'toolkit/chakra/badge'; import { Skeleton } from 'toolkit/chakra/skeleton'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import NftEntity from 'ui/shared/entities/nft/NftEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import AssetValue from 'ui/shared/value/AssetValue'; type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean; instance?: TokenInstance; chainData?: ClusterChainConfig }; @@ -31,14 +31,6 @@ const TokenTransferListItem = ({ instance, chainData, }: Props) => { - const { usd, valueStr } = total && 'value' in total && total.value !== null ? getCurrencyValue({ - value: total.value, - exchangeRate: token?.exchange_rate, - accuracy: 8, - accuracyUsd: 2, - decimals: total.decimals || '0', - }) : { usd: null, valueStr: null }; - return ( @@ -71,32 +63,29 @@ const TokenTransferListItem = ({ w="100%" fontWeight="500" /> - { valueStr && token && (token.type === 'ERC-20' || token.type === 'ERC-1155') && ( - - - Value - + { total && 'value' in total && token && (token.type === 'ERC-20' || token.type === 'ERC-1155') && ( + - { valueStr } + Value + { token.symbol && } - { token.symbol && } - { usd && ( - - (${ usd }) - - ) } - + + ) } { total && 'token_id' in total && token && (NFT_TOKEN_TYPE_IDS.includes(token.type)) && total.token_id !== null && ( - + ) } diff --git a/ui/token/TokenTransfer/TokenTransferTableItem.tsx b/ui/token/TokenTransfer/TokenTransferTableItem.tsx index 4aa8cc69d7..b10a73ec8f 100644 --- a/ui/token/TokenTransfer/TokenTransferTableItem.tsx +++ b/ui/token/TokenTransfer/TokenTransferTableItem.tsx @@ -5,7 +5,6 @@ import type { TokenInstance } from 'types/api/token'; import type { TokenTransfer } from 'types/api/tokenTransfer'; import type { ClusterChainConfig } from 'types/multichain'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes'; import { Badge } from 'toolkit/chakra/badge'; import { Skeleton } from 'toolkit/chakra/skeleton'; @@ -15,6 +14,7 @@ import NftEntity from 'ui/shared/entities/nft/NftEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ChainIcon from 'ui/shared/externalChains/ChainIcon'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import AssetValue from 'ui/shared/value/AssetValue'; type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean; instance?: TokenInstance; chainData?: ClusterChainConfig }; @@ -31,13 +31,6 @@ const TokenTransferTableItem = ({ instance, chainData, }: Props) => { - const { usd, valueStr } = total && 'value' in total && total.value !== null ? getCurrencyValue({ - value: total.value, - exchangeRate: token?.exchange_rate, - accuracy: 8, - accuracyUsd: 2, - decimals: total.decimals || '0', - }) : { usd: null, valueStr: null }; return ( @@ -101,16 +94,15 @@ const TokenTransferTableItem = ({ ) } { token && (token.type === 'ERC-20' || token.type === 'ERC-1155' || token.type === 'ERC-404') && ( - { valueStr && ( - - { valueStr } - - ) } - { usd && ( - - ${ usd } - - ) } + ) } diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png index e6c337936b..2114c25c5c 100644 Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png differ diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png index 8300648fc9..5967eae429 100644 Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png differ diff --git a/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx b/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx index f28b9bc3ba..a470ecffdc 100644 --- a/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx +++ b/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx @@ -7,8 +7,8 @@ import type { MetadataAttributes } from 'types/client/token'; import parseMetadata from 'lib/token/parseMetadata'; import { Link } from 'toolkit/chakra/link'; import { Skeleton } from 'toolkit/chakra/skeleton'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; -import TruncatedValue from 'ui/shared/TruncatedValue'; import { useMetadataUpdateContext } from '../contexts/metadataUpdate'; @@ -37,12 +37,12 @@ const Item = ({ data, isLoading }: ItemProps) => { textStyle="sm" loading={ isLoading } > - + ); } - return ; + return ; })(); return ( @@ -55,14 +55,14 @@ const Item = ({ data, isLoading }: ItemProps) => { flexDir="column" alignItems="flex-start" > - { value } diff --git a/ui/tokenTransfers/TokenTransfersListItem.tsx b/ui/tokenTransfers/TokenTransfersListItem.tsx index 0c26266309..452352afee 100644 --- a/ui/tokenTransfers/TokenTransfersListItem.tsx +++ b/ui/tokenTransfers/TokenTransfersListItem.tsx @@ -1,20 +1,17 @@ -import { Flex } from '@chakra-ui/react'; import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; import type { ClusterChainConfig } from 'types/multichain'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes'; import { Badge } from 'toolkit/chakra/badge'; -import { Skeleton } from 'toolkit/chakra/skeleton'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import NftEntity from 'ui/shared/entities/nft/NftEntity'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import TokenValue from 'ui/shared/value/TokenValue'; type Props = { item: TokenTransfer; @@ -24,14 +21,6 @@ type Props = { const TokenTransfersListItem = ({ item, isLoading, chainData }: Props) => { - const { valueStr } = item.total && 'value' in item.total && item.total.value !== null ? getCurrencyValue({ - value: item.total.value, - exchangeRate: item.token?.exchange_rate, - accuracy: 8, - accuracyUsd: 2, - decimals: item.total.decimals || '0', - }) : { valueStr: null }; - return ( { item.transaction_hash && ( @@ -90,24 +79,16 @@ const TokenTransfersListItem = ({ item, isLoading, chainData }: Props) => { ) } - { valueStr && item.token && (item.token.type === 'ERC-20' || item.token.type === 'ERC-1155') && ( + { item.token && item.total && 'value' in item.total && item.total.value !== null && (item.token.type === 'ERC-20' || item.token.type === 'ERC-1155') && ( <> Amount - - - { valueStr } - - - + ) } diff --git a/ui/tokenTransfers/TokenTransfersTableItem.tsx b/ui/tokenTransfers/TokenTransfersTableItem.tsx index 09ae0c4c41..a4d8331d83 100644 --- a/ui/tokenTransfers/TokenTransfersTableItem.tsx +++ b/ui/tokenTransfers/TokenTransfersTableItem.tsx @@ -1,10 +1,8 @@ -import { Flex } from '@chakra-ui/react'; import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; import type { ClusterChainConfig } from 'types/multichain'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes'; import { Badge } from 'toolkit/chakra/badge'; import { Skeleton } from 'toolkit/chakra/skeleton'; @@ -12,10 +10,10 @@ import { TableCell, TableRow } from 'toolkit/chakra/table'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import NftEntity from 'ui/shared/entities/nft/NftEntity'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ChainIcon from 'ui/shared/externalChains/ChainIcon'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import TokenValue from 'ui/shared/value/TokenValue'; type Props = { item: TokenTransfer; @@ -24,14 +22,6 @@ type Props = { }; const TokenTransferTableItem = ({ item, isLoading, chainData }: Props) => { - const { valueStr } = item.total && 'value' in item.total && item.total.value !== null ? getCurrencyValue({ - value: item.total.value, - exchangeRate: item.token?.exchange_rate, - accuracy: 8, - accuracyUsd: 2, - decimals: item.total.decimals || '0', - }) : { valueStr: null }; - return ( { chainData && ( @@ -87,22 +77,17 @@ const TokenTransferTableItem = ({ item, isLoading, chainData }: Props) => { ) : - } - { (item.token && valueStr) ? ( - - - { valueStr } - - - - ) : - + ) : + - } diff --git a/ui/tokens/TokensListItem.tsx b/ui/tokens/TokensListItem.tsx index 1de6ed3ad1..f66b0bfe9b 100644 --- a/ui/tokens/TokensListItem.tsx +++ b/ui/tokens/TokensListItem.tsx @@ -15,6 +15,8 @@ import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; +import SimpleValue from 'ui/shared/value/SimpleValue'; +import { DEFAULT_ACCURACY_USD } from 'ui/shared/value/utils'; type Props = { token: TokenInfo | AggregatedTokenInfo; @@ -98,15 +100,27 @@ const TokensListItem = ({ { exchangeRate && ( Price - - ${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) } - + ) } { marketCap && ( On-chain market cap - { BigNumber(marketCap).toFormat() } + ) } diff --git a/ui/tokens/TokensTableItem.tsx b/ui/tokens/TokensTableItem.tsx index d2749ad457..85f049240b 100644 --- a/ui/tokens/TokensTableItem.tsx +++ b/ui/tokens/TokensTableItem.tsx @@ -16,7 +16,8 @@ import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet'; import type { EntityProps as AddressEntityProps } from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import SimpleValue from 'ui/shared/value/SimpleValue'; +import { DEFAULT_ACCURACY_USD } from 'ui/shared/value/utils'; type Props = { token: TokenInfo | AggregatedTokenInfo; @@ -120,24 +121,28 @@ const TokensTableItem = ({ - + { exchangeRate ? ( + + ) : null } - - + + { marketCap && ( + + ) } { Number(holdersCount).toLocaleString() } diff --git a/ui/tx/TxDetailsWrapped.tsx b/ui/tx/TxDetailsWrapped.tsx index 7c95ab5ee1..c09b68dfb4 100644 --- a/ui/tx/TxDetailsWrapped.tsx +++ b/ui/tx/TxDetailsWrapped.tsx @@ -5,11 +5,9 @@ import React from 'react'; import type { Transaction } from 'types/api/transaction'; import type { ExcludeUndefined } from 'types/utils'; -import config from 'configs/app'; -import { currencyUnits } from 'lib/units'; import { Badge } from 'toolkit/chakra/badge'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; +import DetailedInfoNativeCoinValue from 'ui/shared/DetailedInfo/DetailedInfoNativeCoinValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData'; @@ -69,14 +67,7 @@ const TxDetailsWrapped = ({ data }: Props) => { > Value - - - + { data.fee.value !== null && ( <> @@ -86,7 +77,7 @@ const TxDetailsWrapped = ({ data }: Props) => { Transaction fee - + ) } diff --git a/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png b/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png index 28b517a439..9498e51d49 100644 Binary files a/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png and b/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/tx/details/TxDetailsBurntFees.tsx b/ui/tx/details/TxDetailsBurntFees.tsx index 8a46e7ba7e..ed9730beda 100644 --- a/ui/tx/details/TxDetailsBurntFees.tsx +++ b/ui/tx/details/TxDetailsBurntFees.tsx @@ -6,8 +6,8 @@ import type { Transaction } from 'types/api/transaction'; import config from 'configs/app'; import { currencyUnits } from 'lib/units'; import { ZERO } from 'toolkit/utils/consts'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; +import DetailedInfoNativeCoinValue from 'ui/shared/DetailedInfo/DetailedInfoNativeCoinValue'; import IconSvg from 'ui/shared/IconSvg'; const rollupFeature = config.features.rollup; @@ -40,19 +40,12 @@ const TxDetailsBurntFees = ({ data, isLoading }: Props) => { > Burnt fees - - } - value={ value.toString() } - currency={ currencyUnits.ether } - decimals={ String(config.chain.currency.decimals) } - exchangeRate={ data.exchange_rate } - alignItems="center" - flexWrap="wrap" - rowGap={ 0 } - isLoading={ isLoading } - /> - + } + loading={ isLoading } + /> ); }; diff --git a/ui/tx/details/TxDetailsFeePerGas.tsx b/ui/tx/details/TxDetailsFeePerGas.tsx index edd2464f77..6769dd6219 100644 --- a/ui/tx/details/TxDetailsFeePerGas.tsx +++ b/ui/tx/details/TxDetailsFeePerGas.tsx @@ -2,9 +2,8 @@ import BigNumber from 'bignumber.js'; import React from 'react'; import config from 'configs/app'; -import { currencyUnits } from 'lib/units'; -import { Skeleton } from 'toolkit/chakra/skeleton'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; +import DetailedInfoNativeCoinValue from 'ui/shared/DetailedInfo/DetailedInfoNativeCoinValue'; interface Props { txFee: string | null; @@ -25,12 +24,11 @@ const TxDetailsFeePerGas = ({ txFee, gasUsed, isLoading }: Props) => { > Fee per gas - - - { BigNumber(txFee).dividedBy(10 ** config.chain.currency.decimals).dividedBy(gasUsed).toFixed() } - { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` } - - + ); }; diff --git a/ui/tx/details/TxDetailsGasPrice.tsx b/ui/tx/details/TxDetailsGasPrice.tsx index 4693ff5bce..2d03a9b205 100644 --- a/ui/tx/details/TxDetailsGasPrice.tsx +++ b/ui/tx/details/TxDetailsGasPrice.tsx @@ -1,14 +1,11 @@ -import BigNumber from 'bignumber.js'; import React from 'react'; import type { TokenInfo } from 'types/api/token'; import config from 'configs/app'; -import { currencyUnits } from 'lib/units'; -import { Skeleton } from 'toolkit/chakra/skeleton'; -import { WEI, WEI_IN_GWEI } from 'toolkit/utils/consts'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; +import GasPriceValue from 'ui/shared/value/GasPriceValue'; +import TokenValue from 'ui/shared/value/TokenValue'; interface Props { gasToken?: TokenInfo<'ERC-20'> | null; @@ -24,22 +21,20 @@ const TxDetailsGasPrice = ({ gasPrice, gasToken, isLoading }: Props) => { const content = (() => { if (gasToken) { return ( - - { BigNumber(gasPrice).dividedBy(WEI).toFixed() } - - + ); } return ( - <> - - { BigNumber(gasPrice).dividedBy(WEI).toFixed() } { currencyUnits.ether } - - - ({ BigNumber(gasPrice).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) - - + ); })(); diff --git a/ui/tx/details/TxDetailsSetMaxGasLimit.tsx b/ui/tx/details/TxDetailsSetMaxGasLimit.tsx index db5eedbde4..862e219437 100644 --- a/ui/tx/details/TxDetailsSetMaxGasLimit.tsx +++ b/ui/tx/details/TxDetailsSetMaxGasLimit.tsx @@ -4,9 +4,8 @@ import React from 'react'; import type { Transaction } from 'types/api/transaction'; import config from 'configs/app'; -import { currencyUnits } from 'lib/units'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; +import DetailedInfoNativeCoinValue from 'ui/shared/DetailedInfo/DetailedInfoNativeCoinValue'; import TxDetailsGasUsage from './TxDetailsGasUsage'; @@ -28,18 +27,12 @@ const TxDetailsSetMaxGasLimit = ({ data }: Props) => { > User’s set max gas limit - - - + ); diff --git a/ui/tx/details/TxDetailsTxFee.tsx b/ui/tx/details/TxDetailsTxFee.tsx index 8930e32274..296dbf1cdd 100644 --- a/ui/tx/details/TxDetailsTxFee.tsx +++ b/ui/tx/details/TxDetailsTxFee.tsx @@ -4,11 +4,10 @@ import React from 'react'; import type { Transaction } from 'types/api/transaction'; import config from 'configs/app'; -import { currencyUnits } from 'lib/units'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import * as DetailedInfoItemBreakdown from 'ui/shared/DetailedInfo/DetailedInfoItemBreakdown'; import TxFee from 'ui/shared/tx/TxFee'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { isLoading: boolean; @@ -26,25 +25,22 @@ const TxDetailsTxFee = ({ isLoading, data }: Props) => { return ( ); } - const baseFeeBn = BigNumber(data.base_fee_per_gas || 0).multipliedBy(data.gas_used || 0); - const priorityFeeBn = BigNumber(data.priority_fee || 0); - return ( <> - { label="Base fee" hint="The minimum network fee charged per transaction" > - @@ -69,13 +65,13 @@ const TxDetailsTxFee = ({ isLoading, data }: Props) => { label="Priority fee" hint="An extra fee set by the sender to speed up transaction execution" > - diff --git a/ui/tx/details/TxInfo.tsx b/ui/tx/details/TxInfo.tsx index 25a5709d57..e43371804f 100644 --- a/ui/tx/details/TxInfo.tsx +++ b/ui/tx/details/TxInfo.tsx @@ -30,10 +30,9 @@ import { CollapsibleDetails } from 'toolkit/chakra/collapsible'; import { Link } from 'toolkit/chakra/link'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { Tooltip } from 'toolkit/chakra/tooltip'; -import { WEI, WEI_IN_GWEI } from 'toolkit/utils/consts'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; +import DetailedInfoNativeCoinValue from 'ui/shared/DetailedInfo/DetailedInfoNativeCoinValue'; import DetailedInfoSponsoredItem from 'ui/shared/DetailedInfo/DetailedInfoSponsoredItem'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; @@ -49,6 +48,8 @@ import StatusTag from 'ui/shared/statusTag/StatusTag'; import TxStatus from 'ui/shared/statusTag/TxStatus'; import TextSeparator from 'ui/shared/TextSeparator'; import Utilization from 'ui/shared/Utilization/Utilization'; +import GasPriceValue from 'ui/shared/value/GasPriceValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps'; import TxDetailsActions from 'ui/tx/details/txDetailsActions/TxDetailsActions'; import TxDetailsBurntFees from 'ui/tx/details/TxDetailsBurntFees'; @@ -610,16 +611,11 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus }: Props) => { > Value - - - + ) } @@ -632,15 +628,11 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus }: Props) => { > Operator fee - - - + ) } @@ -652,16 +644,11 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus }: Props) => { > Poster fee - - - + { > Network fee - - - + ) } @@ -753,24 +735,36 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus }: Props) => { { data.base_fee_per_gas && ( - - Base: - { BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } - { (data.max_fee_per_gas || data.max_priority_fee_per_gas) && } - + } + /> ) } { data.max_fee_per_gas && ( - - Max: - { BigNumber(data.max_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } - { data.max_priority_fee_per_gas && } - + } + /> ) } { data.max_priority_fee_per_gas && ( - - Max priority: - { BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } - + ) } @@ -802,12 +796,11 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus }: Props) => { > L1 gas price - - - { BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { rollupFeature.parentChain.currency?.symbol || currencyUnits.ether } - - ({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) - + ) } @@ -820,15 +813,13 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus }: Props) => { > L1 fee - - - + ) } @@ -865,15 +856,12 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus }: Props) => { > Blob fee - - - + ) } @@ -899,14 +887,26 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus }: Props) => { { data.blob_gas_price && ( - { BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } + ) } { (data.max_fee_per_blob_gas && data.blob_gas_price) && } { data.max_fee_per_blob_gas && ( - <> - Max: - { BigNumber(data.max_fee_per_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() } - + ) } diff --git a/ui/tx/details/TxInfoScrollFees.tsx b/ui/tx/details/TxInfoScrollFees.tsx index 11aacfbb5c..8a1981282b 100644 --- a/ui/tx/details/TxInfoScrollFees.tsx +++ b/ui/tx/details/TxInfoScrollFees.tsx @@ -1,16 +1,13 @@ import { Text } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { Transaction } from 'types/api/transaction'; -import config from 'configs/app'; -import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; -import { WEI_IN_GWEI } from 'toolkit/utils/consts'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; +import DetailedInfoNativeCoinValue from 'ui/shared/DetailedInfo/DetailedInfoNativeCoinValue'; import TextSeparator from 'ui/shared/TextSeparator'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; type Props = { data: Transaction; @@ -29,15 +26,11 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => { > L1 data fee - - - + ) } @@ -49,15 +42,11 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => { > Execution fee - - - + ) } @@ -69,15 +58,11 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => { > L1 commit scalar - - - + ) } @@ -89,17 +74,11 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => { > L1 Fee Overhead - - - - - + ) } { (data.scroll?.l1_base_fee !== undefined || data.scroll?.l1_fee_scalar !== undefined) && ( @@ -114,14 +93,26 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => { { data.scroll?.l1_base_fee !== undefined && ( Base: - { BigNumber(data.scroll?.l1_base_fee || 0).dividedBy(WEI_IN_GWEI).toFixed() } + ) } { data.scroll?.l1_fee_scalar !== undefined && ( Scalar: - { BigNumber(data.scroll?.l1_fee_scalar || 0).dividedBy(WEI_IN_GWEI).toFixed() } + ) } @@ -139,14 +130,26 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => { { data.scroll?.l1_blob_base_fee !== undefined && ( Base: - { BigNumber(data.scroll?.l1_blob_base_fee || 0).dividedBy(WEI_IN_GWEI).toFixed() } + ) } { data.scroll?.l1_fee_blob_scalar !== undefined && ( Scalar: - { BigNumber(data.scroll?.l1_fee_blob_scalar || 0).dividedBy(WEI_IN_GWEI).toFixed() } + ) } diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png index 257e84c0ef..fce9b0489c 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png index 46351ae89c..e62e7390f5 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png index 2aac695205..7b7cc78073 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png index 2161fc91b3..30f1736ccf 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png index 6bb21004c8..74f587013e 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png index 6f2fe1cc85..e8d1d6f34e 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png index b07c906c64..225dbc170f 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png index 7c58302963..2a91c58746 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png index f0e89a11d5..b1510f85c2 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png index 71996ddfa1..6158f165eb 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png index ecb84a9c83..d38628d766 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-external-txs-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-external-txs-mobile-1.png index c7745152c3..b7c0d051e8 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-external-txs-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-external-txs-mobile-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-grouped-fees-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-grouped-fees-1.png index f1619d9efc..a80e26b0e9 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-grouped-fees-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-grouped-fees-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-in-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-in-mobile-1.png index 0fe338bd1c..046eaa1686 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-in-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-in-mobile-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-out-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-out-mobile-1.png index 6d7c986aa9..0ade19f41c 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-out-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-out-mobile-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png index 0b9fb0fc49..d255cd53af 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png index fd7d60a814..02532931d9 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png index f17abc5e6c..af6e61f968 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png index 9c524e6f68..398a8eb360 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-external-txs-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-external-txs-mobile-1.png index 010fb84401..3c0cda0570 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-external-txs-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-external-txs-mobile-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-in-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-in-mobile-1.png index 77dd807be9..18039bc8a8 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-in-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-in-mobile-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-out-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-out-mobile-1.png index c62767eea4..c3e707338d 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-out-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-out-mobile-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png index 5db70e8908..ad01ecafd3 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png differ diff --git a/ui/tx/internals/TxInternalsListItem.tsx b/ui/tx/internals/TxInternalsListItem.tsx index 85e92bf191..e6034061d2 100644 --- a/ui/tx/internals/TxInternalsListItem.tsx +++ b/ui/tx/internals/TxInternalsListItem.tsx @@ -1,16 +1,15 @@ import { Flex, HStack } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { InternalTransaction } from 'types/api/internalTransaction'; -import config from 'configs/app'; import { currencyUnits } from 'lib/units'; import { Badge } from 'toolkit/chakra/badge'; import { Skeleton } from 'toolkit/chakra/skeleton'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TxStatus from 'ui/shared/statusTag/TxStatus'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils'; type Props = InternalTransaction & { isLoading?: boolean }; @@ -32,17 +31,24 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit: w="100%" fontWeight="500" /> - - Value { currencyUnits.ether } - - - { BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } - - + + Value { currencyUnits.ether } + - - Gas limit - { BigNumber(gasLimit).toFormat() } + + Gas limit + ); diff --git a/ui/tx/internals/TxInternalsTable.tsx b/ui/tx/internals/TxInternalsTable.tsx index 9ce6d6de8f..8c0c043cd7 100644 --- a/ui/tx/internals/TxInternalsTable.tsx +++ b/ui/tx/internals/TxInternalsTable.tsx @@ -40,7 +40,7 @@ const TxInternalsTable = ({ data, sort, onSortToggle, top, isLoading }: Props) = sortValue={ sort } onSortToggle={ onSortToggle } > - Gas limit { currencyUnits.ether } + Gas limit diff --git a/ui/tx/internals/TxInternalsTableItem.tsx b/ui/tx/internals/TxInternalsTableItem.tsx index 741631cf17..d220754787 100644 --- a/ui/tx/internals/TxInternalsTableItem.tsx +++ b/ui/tx/internals/TxInternalsTableItem.tsx @@ -1,15 +1,13 @@ import { Box, Flex } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { InternalTransaction } from 'types/api/internalTransaction'; -import config from 'configs/app'; import { Badge } from 'toolkit/chakra/badge'; -import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import TxStatus from 'ui/shared/statusTag/TxStatus'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils'; type Props = InternalTransaction & { @@ -40,14 +38,19 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit: /> - - { BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } - + - - { BigNumber(gasLimit).toFormat() } - + ); diff --git a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx index e0701b51c2..65d597ccdf 100644 --- a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx +++ b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx @@ -1,6 +1,5 @@ -import { GridItem, Text } from '@chakra-ui/react'; +import { GridItem } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; -import BigNumber from 'bignumber.js'; import { useRouter } from 'next/router'; import React from 'react'; @@ -15,14 +14,14 @@ import { currencyUnits } from 'lib/units'; import { CollapsibleDetails } from 'toolkit/chakra/collapsible'; import { Link } from 'toolkit/chakra/link'; import { Skeleton } from 'toolkit/chakra/skeleton'; -import { WEI, WEI_IN_GWEI } from 'toolkit/utils/consts'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp'; import PrevNext from 'ui/shared/PrevNext'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import GasPriceValue from 'ui/shared/value/GasPriceValue'; import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps'; import ZkSyncL2TxnBatchHashesInfo from './ZkSyncL2TxnBatchHashesInfo'; @@ -138,7 +137,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { flexWrap="nowrap" alignSelf="flex-start" > - + @@ -148,8 +147,11 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { L1 gas price - { BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { parentChainCurrency || currencyUnits.ether } - ({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) + { L2 fair gas price - { BigNumber(data.l2_fair_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether } - ({ BigNumber(data.l2_fair_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) + diff --git a/ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsTableItem.tsx b/ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsTableItem.tsx index cf4f0276cf..fb3e88b347 100644 --- a/ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsTableItem.tsx +++ b/ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsTableItem.tsx @@ -27,9 +27,7 @@ const ArbitrumL2TxnWithdrawalsTableItem = ({ data, isLoading, txHash }: Props) = - - - + diff --git a/ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsValue.tsx b/ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsValue.tsx index 80cab61024..85cc0332fd 100644 --- a/ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsValue.tsx +++ b/ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsValue.tsx @@ -1,70 +1,53 @@ -import { Flex } from '@chakra-ui/react'; import React from 'react'; import type { ArbitrumL2TxnWithdrawalsItem } from 'types/api/arbitrumL2'; import type { TokenInfo } from 'types/api/token'; -import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; -import TokenEntityL1 from 'ui/shared/entities/token/TokenEntityL1'; +import { Skeleton } from 'toolkit/chakra/skeleton'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; +import TokenValue from 'ui/shared/value/TokenValue'; interface Props { data: ArbitrumL2TxnWithdrawalsItem; + loading?: boolean; } -const ArbitrumL2TxnWithdrawalsValue = ({ data }: Props) => { - - const content = (() => { - if (data.token) { - const { valueStr } = data.token && getCurrencyValue({ - value: data.token.amount ?? '0', - accuracy: 8, - decimals: String(data.token.decimals), - }); - - const formattedData: TokenInfo | null = { - ...data.token, - decimals: String(data.token.decimals), - type: 'ERC-20', - holders_count: null, - exchange_rate: null, - total_supply: null, - circulating_market_cap: null, - icon_url: null, - reputation: null, - }; - - return ( - <> - { valueStr } - - - ); - } - - if (data.callvalue && data.callvalue !== '0') { - const { valueStr } = getCurrencyValue({ - value: data.callvalue, - accuracy: 8, - decimals: String(config.chain.currency.decimals), - }); - - return ( - <> - { valueStr } - { config.chain.currency.symbol } - - ); - } - - return -; - })(); - - return ( - - { content } - - ); +const ArbitrumL2TxnWithdrawalsValue = ({ data, loading }: Props) => { + + if (data.token) { + const token: TokenInfo | null = { + ...data.token, + decimals: String(data.token.decimals), + type: 'ERC-20', + holders_count: null, + exchange_rate: null, + total_supply: null, + circulating_market_cap: null, + icon_url: null, + reputation: null, + }; + + return ( + + ); + } + + if (data.callvalue && data.callvalue !== '0') { + return ( + + ); + } + + return -; }; export default React.memo(ArbitrumL2TxnWithdrawalsValue); diff --git a/ui/txs/TxAdditionalInfo.pw.tsx b/ui/txs/TxAdditionalInfo.pw.tsx index d6f5f612c7..005cd3a81c 100644 --- a/ui/txs/TxAdditionalInfo.pw.tsx +++ b/ui/txs/TxAdditionalInfo.pw.tsx @@ -8,7 +8,7 @@ import TxAdditionalInfo from './TxAdditionalInfo'; test('regular transaction +@dark-mode', async({ render, page }) => { const component = await render(); await component.getByLabel('Transaction info').click(); - await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 600 } }); + await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 650 } }); }); test('regular transaction +@mobile -@default', async({ render, page }) => { @@ -20,5 +20,5 @@ test('regular transaction +@mobile -@default', async({ render, page }) => { test('blob transaction', async({ render, page }) => { const component = await render(); await component.getByLabel('Transaction info').click(); - await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 600 } }); + await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 650 } }); }); diff --git a/ui/txs/TxAdditionalInfoContent.tsx b/ui/txs/TxAdditionalInfoContent.tsx index 6ffd45144f..6f9e27c68c 100644 --- a/ui/txs/TxAdditionalInfoContent.tsx +++ b/ui/txs/TxAdditionalInfoContent.tsx @@ -8,13 +8,13 @@ import { route } from 'nextjs/routes'; import config from 'configs/app'; import { useMultichainContext } from 'lib/contexts/multichain'; -import getValueWithUnit from 'lib/getValueWithUnit'; import { currencyUnits } from 'lib/units'; import { Link } from 'toolkit/chakra/link'; import BlobEntity from 'ui/shared/entities/blob/BlobEntity'; import TextSeparator from 'ui/shared/TextSeparator'; import TxFee from 'ui/shared/tx/TxFee'; import Utilization from 'ui/shared/Utilization/Utilization'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => { const multichainContext = useMultichainContext(); @@ -56,14 +56,18 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => { ) } - { !config.UI.views.tx.hiddenFields?.tx_fee && ( + + Value + + + { !config.UI.views.tx.hiddenFields?.tx_fee && (tx.stability_fee !== undefined || tx.fee.value !== null) && ( - { (tx.stability_fee !== undefined || tx.fee.value !== null) && ( - <> - Transaction fee - - - ) } + Transaction fee + ) } { tx.gas_used !== null && ( @@ -84,19 +88,37 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => { { tx.base_fee_per_gas !== null && ( Base: - { getValueWithUnit(tx.base_fee_per_gas, 'gwei').toFormat() } + ) } { tx.max_fee_per_gas !== null && ( Max: - { getValueWithUnit(tx.max_fee_per_gas, 'gwei').toFormat() } + ) } { tx.max_priority_fee_per_gas !== null && ( Max priority: - { getValueWithUnit(tx.max_priority_fee_per_gas, 'gwei').toFormat() } + ) } diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx index afe355f803..0fe57525ae 100644 --- a/ui/txs/TxsListItem.tsx +++ b/ui/txs/TxsListItem.tsx @@ -9,10 +9,7 @@ import type { Transaction } from 'types/api/transaction'; import type { ClusterChainConfig } from 'types/multichain'; import config from 'configs/app'; -import getValueWithUnit from 'lib/getValueWithUnit'; -import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; -import { space } from 'toolkit/utils/htmlEntities'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; @@ -21,6 +18,7 @@ import TxStatus from 'ui/shared/statusTag/TxStatus'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; import TxFee from 'ui/shared/tx/TxFee'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; import TxType from 'ui/txs/TxType'; @@ -123,13 +121,12 @@ const TxsListItem = ({ { !config.UI.views.tx.hiddenFields?.value && ( Value - - - { getValueWithUnit(tx.value).toFormat() } - { space } - { currencyUnits.ether } - - + ) } { !config.UI.views.tx.hiddenFields?.tx_fee && ( @@ -137,7 +134,7 @@ const TxsListItem = ({ { (tx.stability_fee !== undefined || tx.fee.value !== null) && ( <> Fee - + ) } diff --git a/ui/txs/TxsStats.tsx b/ui/txs/TxsStats.tsx index c654952f2d..1e06d54c6a 100644 --- a/ui/txs/TxsStats.tsx +++ b/ui/txs/TxsStats.tsx @@ -5,12 +5,12 @@ import React from 'react'; import config from 'configs/app'; import useApiQuery from 'lib/api/useApiQuery'; import { useMultichainContext } from 'lib/contexts/multichain'; -import getCurrencyValue from 'lib/getCurrencyValue'; import getStatsLabelFromTitle from 'lib/stats/getStatsLabelFromTitle'; import { HOMEPAGE_STATS } from 'stubs/stats'; import { TXS_STATS, TXS_STATS_MICROSERVICE } from 'stubs/tx'; import { thinsp } from 'toolkit/utils/htmlEntities'; import StatsWidget from 'ui/shared/stats/StatsWidget'; +import calculateUsdValue from 'ui/shared/value/calculateUsdValue'; interface Props extends BoxProps {} @@ -62,12 +62,11 @@ const TxsStats = (props: Props) => { const avgFee = isStatsFeatureEnabled ? txsStatsQuery.data?.average_transactions_fee_24h?.value : txsStatsApiQuery.data?.transaction_fees_avg_24h; - const txFeeAvg = avgFee ? getCurrencyValue({ - value: avgFee, + const txFeeAvg = avgFee ? calculateUsdValue({ + amount: avgFee, exchangeRate: statsQuery.data?.coin_price, // in microservice data, fee values are already divided by 10^decimals decimals: isStatsFeatureEnabled ? '0' : String(chainConfig.chain.currency.decimals), - accuracyUsd: 2, }) : null; const itemsCount = [ @@ -154,9 +153,9 @@ const TxsStats = (props: Props) => { label={ txsStatsQuery.data?.average_transactions_fee_24h?.title ? getStatsLabelFromTitle(txsStatsQuery.data?.average_transactions_fee_24h?.title) : 'Avg. transaction fee' } - value={ txFeeAvg.usd ? txFeeAvg.usd : txFeeAvg.valueStr } - valuePrefix={ txFeeAvg.usd ? '$' : undefined } - valuePostfix={ txFeeAvg.usd ? undefined : thinsp + chainConfig.chain.currency.symbol } + value={ txFeeAvg.usdStr ? txFeeAvg.usdStr : txFeeAvg.valueStr } + valuePrefix={ txFeeAvg.usdStr ? '$' : undefined } + valuePostfix={ txFeeAvg.usdStr ? undefined : thinsp + chainConfig.chain.currency.symbol } period="24h" isLoading={ isLoading } href={ diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx index c977907fd1..275eb947a7 100644 --- a/ui/txs/TxsTableItem.tsx +++ b/ui/txs/TxsTableItem.tsx @@ -10,7 +10,6 @@ import { Badge } from 'toolkit/chakra/badge'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import BlockPendingUpdateHint from 'ui/shared/block/BlockPendingUpdateHint'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ChainIcon from 'ui/shared/externalChains/ChainIcon'; @@ -18,6 +17,7 @@ import TxStatus from 'ui/shared/statusTag/TxStatus'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; import TxFee from 'ui/shared/tx/TxFee'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; import TxTranslationType from './TxTranslationType'; @@ -126,7 +126,14 @@ const TxsTableItem = ({ { !config.UI.views.tx.hiddenFields?.value && ( - + ) } { !config.UI.views.tx.hiddenFields?.tx_fee && ( @@ -134,10 +141,10 @@ const TxsTableItem = ({ ) } diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png index 52f90f22f1..c76e73a35f 100644 Binary files a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_blob-transaction-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_blob-transaction-1.png index eb58a32838..215a7b9982 100644 Binary files a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_blob-transaction-1.png and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_blob-transaction-1.png differ diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_regular-transaction-dark-mode-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_regular-transaction-dark-mode-1.png index f6bb748947..26aab72f99 100644 Binary files a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_regular-transaction-dark-mode-1.png and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_regular-transaction-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_mobile_regular-transaction-mobile---default-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_mobile_regular-transaction-mobile---default-1.png index 323da72596..cdc991bbe2 100644 Binary files a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_mobile_regular-transaction-mobile---default-1.png and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_mobile_regular-transaction-mobile---default-1.png differ diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 2b3b369615..e02a4ddc38 100644 Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png index 2f2e4a4bc2..93ce7e54e3 100644 Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png index f5e09dfb21..87643519e7 100644 Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png differ diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-pending-update-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-pending-update-1.png index 27c113c1f8..94f940ebd5 100644 Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-pending-update-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-pending-update-1.png differ diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 2dd447f46b..7e77082484 100644 Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png index d6d4acbc54..906f8b0b58 100644 Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_screen-xl-base-view-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_screen-xl-base-view-1.png index 6dca2acf89..404de1ca80 100644 Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_screen-xl-base-view-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_screen-xl-base-view-1.png differ diff --git a/ui/userOp/UserOpDetails.tsx b/ui/userOp/UserOpDetails.tsx index 4af2e1b669..568fee3d14 100644 --- a/ui/userOp/UserOpDetails.tsx +++ b/ui/userOp/UserOpDetails.tsx @@ -1,4 +1,4 @@ -import { GridItem, Text } from '@chakra-ui/react'; +import { GridItem } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -8,15 +8,12 @@ import type { UserOp } from 'types/api/userOps'; import config from 'configs/app'; import type { ResourceError } from 'lib/api/resources'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; -import { currencyUnits } from 'lib/units'; import { CollapsibleDetails } from 'toolkit/chakra/collapsible'; import { Skeleton } from 'toolkit/chakra/skeleton'; -import { WEI, WEI_IN_GWEI } from 'toolkit/utils/consts'; -import { space } from 'toolkit/utils/htmlEntities'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import DataFetchAlert from 'ui/shared/DataFetchAlert'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; +import DetailedInfoNativeCoinValue from 'ui/shared/DetailedInfo/DetailedInfoNativeCoinValue'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam'; @@ -26,6 +23,7 @@ import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity'; import UserOpSponsorType from 'ui/shared/userOps/UserOpSponsorType'; import UserOpStatus from 'ui/shared/userOps/UserOpStatus'; import Utilization from 'ui/shared/Utilization/Utilization'; +import GasPriceValue from 'ui/shared/value/GasPriceValue'; import UserOpCallData from './UserOpCallData'; import UserOpDecodedCallData from './UserOpDecodedCallData'; @@ -141,14 +139,10 @@ const UserOpDetails = ({ query }: Props) => { > Fee - - - + ) } @@ -252,11 +246,8 @@ const UserOpDetails = ({ query }: Props) => { > Max fee per gas - - { BigNumber(data.max_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } - - { space }({ BigNumber(data.max_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) - + + { > Max priority fee per gas - - { BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } - - { space }({ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) - + + ) } diff --git a/ui/userOps/UserOpsListItem.tsx b/ui/userOps/UserOpsListItem.tsx index 7f80ca504a..b520ba4049 100644 --- a/ui/userOps/UserOpsListItem.tsx +++ b/ui/userOps/UserOpsListItem.tsx @@ -5,7 +5,6 @@ import type { ClusterChainConfig } from 'types/multichain'; import config from 'configs/app'; import { useMultichainContext } from 'lib/contexts/multichain'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; @@ -13,6 +12,7 @@ import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; import UserOpStatus from 'ui/shared/userOps/UserOpStatus'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; type Props = { item: UserOpsItem; @@ -90,12 +90,9 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender, chainData }: Pro <> Fee - diff --git a/ui/userOps/UserOpsTableItem.tsx b/ui/userOps/UserOpsTableItem.tsx index a21ca9d8c6..1569d2ee04 100644 --- a/ui/userOps/UserOpsTableItem.tsx +++ b/ui/userOps/UserOpsTableItem.tsx @@ -5,7 +5,6 @@ import type { ClusterChainConfig } from 'types/multichain'; import config from 'configs/app'; import { TableCell, TableRow } from 'toolkit/chakra/table'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; @@ -13,6 +12,7 @@ import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity'; import ChainIcon from 'ui/shared/externalChains/ChainIcon'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; import UserOpStatus from 'ui/shared/userOps/UserOpStatus'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; type Props = { item: UserOpsItem; @@ -73,7 +73,7 @@ const UserOpsTableItem = ({ item, isLoading, showTx, showSender, chainData }: Pr { !config.UI.views.tx.hiddenFields?.tx_fee && ( - + ) } diff --git a/ui/validators/blackfort/ValidatorsListItem.tsx b/ui/validators/blackfort/ValidatorsListItem.tsx index 9c74d17910..231fa58fde 100644 --- a/ui/validators/blackfort/ValidatorsListItem.tsx +++ b/ui/validators/blackfort/ValidatorsListItem.tsx @@ -1,15 +1,13 @@ import { Flex } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { ValidatorBlackfort } from 'types/api/validators'; -import config from 'configs/app'; -import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { data: ValidatorBlackfort; @@ -34,7 +32,7 @@ const ValidatorsListItem = ({ data, isLoading }: Props) => { <> Name - + ) } @@ -48,16 +46,18 @@ const ValidatorsListItem = ({ data, isLoading }: Props) => { Self bonded - - { `${ BigNumber(data.self_bonded_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } ${ currencyUnits.ether }` } - + Delegated amount - - { `${ BigNumber(data.delegated_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } ${ currencyUnits.ether }` } - + diff --git a/ui/validators/blackfort/ValidatorsTableItem.tsx b/ui/validators/blackfort/ValidatorsTableItem.tsx index 0a2929e0f4..e390209adc 100644 --- a/ui/validators/blackfort/ValidatorsTableItem.tsx +++ b/ui/validators/blackfort/ValidatorsTableItem.tsx @@ -1,14 +1,13 @@ import { Flex } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { ValidatorBlackfort } from 'types/api/validators'; -import config from 'configs/app'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; +import { TruncatedText } from 'toolkit/components/truncation/TruncatedText'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { data: ValidatorBlackfort; @@ -27,7 +26,7 @@ const ValidatorsTableItem = ({ data, isLoading }: Props) => { - + @@ -36,14 +35,18 @@ const ValidatorsTableItem = ({ data, isLoading }: Props) => { - - { BigNumber(data.self_bonded_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } - + - - { BigNumber(data.delegated_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } - + ); diff --git a/ui/validators/zilliqa/ValidatorDetails.tsx b/ui/validators/zilliqa/ValidatorDetails.tsx index 21a5f7247a..5debc23cdb 100644 --- a/ui/validators/zilliqa/ValidatorDetails.tsx +++ b/ui/validators/zilliqa/ValidatorDetails.tsx @@ -1,10 +1,8 @@ import { Flex } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { ValidatorZilliqa } from 'types/api/validators'; -import config from 'configs/app'; import { Skeleton } from 'toolkit/chakra/skeleton'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; @@ -13,6 +11,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; import NativeTokenIcon from 'ui/shared/NativeTokenIcon'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { data: ValidatorZilliqa; @@ -41,10 +40,11 @@ const ValidatorDetails = ({ data, isLoading }: Props) => { Staked - - - { BigNumber(data.balance).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } { config.chain.currency.symbol } - + } + amount={ data.balance } + loading={ isLoading } + /> { Balance - - { BigNumber(data.balance).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } { config.chain.currency.symbol } - + ); diff --git a/ui/validators/zilliqa/ValidatorsTableItem.tsx b/ui/validators/zilliqa/ValidatorsTableItem.tsx index a91b2eee5a..4cfff594d7 100644 --- a/ui/validators/zilliqa/ValidatorsTableItem.tsx +++ b/ui/validators/zilliqa/ValidatorsTableItem.tsx @@ -1,12 +1,11 @@ -import BigNumber from 'bignumber.js'; import React from 'react'; import type { ValidatorsZilliqaItem } from 'types/api/validators'; -import config from 'configs/app'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import ValidatorEntity from 'ui/shared/entities/validator/ValidatorEntity'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { data: ValidatorsZilliqaItem; @@ -25,9 +24,11 @@ const ValidatorsTableItem = ({ data, isLoading }: Props) => { - - { BigNumber(data.balance).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } - + ); diff --git a/ui/validators/zilliqa/__screenshots__/ValidatorDetails.pw.tsx_default_base-view-mobile-1.png b/ui/validators/zilliqa/__screenshots__/ValidatorDetails.pw.tsx_default_base-view-mobile-1.png index 5a20aa7061..7678fc55f9 100644 Binary files a/ui/validators/zilliqa/__screenshots__/ValidatorDetails.pw.tsx_default_base-view-mobile-1.png and b/ui/validators/zilliqa/__screenshots__/ValidatorDetails.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/validators/zilliqa/__screenshots__/ValidatorDetails.pw.tsx_mobile_base-view-mobile-1.png b/ui/validators/zilliqa/__screenshots__/ValidatorDetails.pw.tsx_mobile_base-view-mobile-1.png index 4cb2c237f3..3b26fe1d8b 100644 Binary files a/ui/validators/zilliqa/__screenshots__/ValidatorDetails.pw.tsx_mobile_base-view-mobile-1.png and b/ui/validators/zilliqa/__screenshots__/ValidatorDetails.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/verifiedContracts/VerifiedContractsListItem.tsx b/ui/verifiedContracts/VerifiedContractsListItem.tsx index 03229e9871..356d174877 100644 --- a/ui/verifiedContracts/VerifiedContractsListItem.tsx +++ b/ui/verifiedContracts/VerifiedContractsListItem.tsx @@ -1,10 +1,8 @@ import { Box, Flex } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { VerifiedContract } from 'types/api/contracts'; -import config from 'configs/app'; import formatLanguageName from 'lib/contracts/formatLanguageName'; import { CONTRACT_LICENSES } from 'lib/contracts/licenses'; import { currencyUnits } from 'lib/units'; @@ -14,7 +12,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import IconSvg from 'ui/shared/IconSvg'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { data: VerifiedContract; @@ -22,10 +20,6 @@ interface Props { } const VerifiedContractsListItem = ({ data, isLoading }: Props) => { - const balance = data.coin_balance && data.coin_balance !== '0' ? - BigNumber(data.coin_balance).div(10 ** config.chain.currency.decimals).dp(6).toFormat() : - '0'; - const license = (() => { const license = CONTRACT_LICENSES.find((license) => license.type === data.license_type); if (!license || license.type === 'none') { @@ -60,9 +54,11 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => { Balance { currencyUnits.ether } - diff --git a/ui/verifiedContracts/VerifiedContractsTableItem.tsx b/ui/verifiedContracts/VerifiedContractsTableItem.tsx index 39ef8d4862..56b7479b9a 100644 --- a/ui/verifiedContracts/VerifiedContractsTableItem.tsx +++ b/ui/verifiedContracts/VerifiedContractsTableItem.tsx @@ -1,11 +1,9 @@ import { Flex, chakra } from '@chakra-ui/react'; -import BigNumber from 'bignumber.js'; import React from 'react'; import type { VerifiedContract } from 'types/api/contracts'; import type { ClusterChainConfig } from 'types/multichain'; -import config from 'configs/app'; import formatLanguageName from 'lib/contracts/formatLanguageName'; import { CONTRACT_LICENSES } from 'lib/contracts/licenses'; import { Skeleton } from 'toolkit/chakra/skeleton'; @@ -16,7 +14,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ChainIcon from 'ui/shared/externalChains/ChainIcon'; import IconSvg from 'ui/shared/IconSvg'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; -import TruncatedValue from 'ui/shared/TruncatedValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; interface Props { data: VerifiedContract; @@ -25,10 +23,6 @@ interface Props { } const VerifiedContractsTableItem = ({ data, isLoading, chainData }: Props) => { - const balance = data.coin_balance && data.coin_balance !== '0' ? - BigNumber(data.coin_balance).div(10 ** config.chain.currency.decimals).dp(6).toFormat() : - '0'; - const license = (() => { const license = CONTRACT_LICENSES.find((license) => license.type === data.license_type); if (!license || license.type === 'none') { @@ -68,11 +62,11 @@ const VerifiedContractsTableItem = ({ data, isLoading, chainData }: Props) => { /> - diff --git a/ui/watchlist/WatchlistTable/WatchListAddressItem.tsx b/ui/watchlist/WatchlistTable/WatchListAddressItem.tsx index 5407bfec0b..7476c86b39 100644 --- a/ui/watchlist/WatchlistTable/WatchListAddressItem.tsx +++ b/ui/watchlist/WatchlistTable/WatchListAddressItem.tsx @@ -5,14 +5,16 @@ import React from 'react'; import type { WatchlistAddress } from 'types/api/account'; import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { nbsp } from 'toolkit/utils/htmlEntities'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import * as TokenEntity from 'ui/shared/entities/token/TokenEntity'; import IconSvg from 'ui/shared/IconSvg'; +import calculateUsdValue from 'ui/shared/value/calculateUsdValue'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; +import SimpleValue from 'ui/shared/value/SimpleValue'; +import { DEFAULT_ACCURACY_USD } from 'ui/shared/value/utils'; const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isLoading?: boolean }) => { const nativeTokenData = React.useMemo(() => ({ @@ -24,7 +26,7 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL reputation: null, }), [ ]); - const { usdBn: usdNative } = getCurrencyValue({ value: item.address_balance, accuracy: 2, accuracyUsd: 2, exchangeRate: item.exchange_rate }); + const { usdBn: usdNative } = calculateUsdValue({ amount: item.address_balance, exchangeRate: item.exchange_rate }); return ( @@ -41,12 +43,10 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL /> { currencyUnits.ether } balance: - @@ -60,17 +60,21 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL ) } { Boolean(item.tokens_fiat_value) && ( - - - - { `Net worth:${ nbsp }` } - { - `${ item.tokens_overflow ? '>' : '' } - $${ BigNumber(item.tokens_fiat_value).plus((BigNumber(item.address_balance ? usdNative : '0'))).toFormat(2) }` - } - - - + + + Net worth:{ nbsp } + + ) } + accuracy={ DEFAULT_ACCURACY_USD } + loading={ isLoading } + overflowed={ item.tokens_overflow } + pl={ 7 } + fontSize="sm" + /> ) } ); diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx index f2163d488d..e8db2f52e8 100644 --- a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx +++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx @@ -5,13 +5,12 @@ import type { BlockWithdrawalsItem } from 'types/api/block'; import type { WithdrawalsItem } from 'types/api/withdrawals'; import config from 'configs/app'; -import { currencyUnits } from 'lib/units'; import { Skeleton } from 'toolkit/chakra/skeleton'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; const feature = config.features.beaconChain; @@ -82,7 +81,7 @@ const BeaconChainWithdrawalsListItem = ({ item, isLoading, view }: Props) => { Value - + ) } diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx index 091753a653..d43c3ee006 100644 --- a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx +++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx @@ -4,13 +4,12 @@ import type { AddressWithdrawalsItem } from 'types/api/address'; import type { BlockWithdrawalsItem } from 'types/api/block'; import type { WithdrawalsItem } from 'types/api/withdrawals'; -import config from 'configs/app'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; type Props = ({ item: WithdrawalsItem; @@ -62,7 +61,7 @@ const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => { ) } - + ); diff --git a/ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx index ac2151db4b..c09cd862f5 100644 --- a/ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx +++ b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx @@ -4,13 +4,13 @@ import React from 'react'; import type { ScrollL2MessageItem } from 'types/api/scrollL2'; import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Skeleton } from 'toolkit/chakra/skeleton'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; const rollupFeature = config.features.rollup; @@ -21,8 +21,6 @@ const ScrollL2WithdrawalsListItem = ({ item, isLoading }: Props) => { return null; } - const { valueStr } = getCurrencyValue({ value: item.value, decimals: String(config.chain.currency.decimals) }); - return ( @@ -78,9 +76,10 @@ const ScrollL2WithdrawalsListItem = ({ item, isLoading }: Props) => { Value - - { `${ valueStr } ${ config.chain.currency.symbol }` } - + diff --git a/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx index 3ea14fdfff..696b3fad4d 100644 --- a/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx +++ b/ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx @@ -4,13 +4,13 @@ import React from 'react'; import type { ScrollL2MessageItem } from 'types/api/scrollL2'; import config from 'configs/app'; -import getCurrencyValue from 'lib/getCurrencyValue'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { TableCell, TableRow } from 'toolkit/chakra/table'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import NativeCoinValue from 'ui/shared/value/NativeCoinValue'; const rollupFeature = config.features.rollup; @@ -21,7 +21,6 @@ const ScrollL2WithdrawalsTableItem = ({ item, isLoading }: Props) => { return null; } - const { valueStr } = getCurrencyValue({ value: item.value, decimals: String(config.chain.currency.decimals) }); return ( @@ -68,9 +67,11 @@ const ScrollL2WithdrawalsTableItem = ({ item, isLoading }: Props) => { ) } - - { valueStr } - + ); diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx index 73fd2fb605..68b34133c8 100644 --- a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx +++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx @@ -11,6 +11,7 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import SimpleValue from 'ui/shared/value/SimpleValue'; const rollupFeature = config.features.rollup; @@ -79,9 +80,10 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => { Value - - { BigNumber(item.value).toFormat() } - + Token diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx index 2bfcda56a6..8f80362b23 100644 --- a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx +++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx @@ -11,6 +11,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip'; +import SimpleValue from 'ui/shared/value/SimpleValue'; const rollupFeature = config.features.rollup; @@ -70,9 +71,10 @@ const ZkEvmL2WithdrawalsTableItem = ({ item, isLoading }: Props) => { ) } - - { BigNumber(item.value).toFormat() } - + diff --git a/ui/zetaChain/cctxDetails/ZetaChainCCTXDetails.tsx b/ui/zetaChain/cctxDetails/ZetaChainCCTXDetails.tsx index 295db0c6b1..2394d2e7eb 100644 --- a/ui/zetaChain/cctxDetails/ZetaChainCCTXDetails.tsx +++ b/ui/zetaChain/cctxDetails/ZetaChainCCTXDetails.tsx @@ -3,17 +3,15 @@ import React from 'react'; import type { CrossChainTx } from '@blockscout/zetachain-cctx-types'; -import config from 'configs/app'; import useApiQuery from 'lib/api/useApiQuery'; import base64ToHex from 'lib/base64ToHex'; -import { currencyUnits } from 'lib/units'; import { HOMEPAGE_STATS } from 'stubs/stats'; import { CollapsibleDetails } from 'toolkit/chakra/collapsible'; import { Skeleton } from 'toolkit/chakra/skeleton'; import { SECOND } from 'toolkit/utils/consts'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; +import DetailedInfoNativeCoinValue from 'ui/shared/DetailedInfo/DetailedInfoNativeCoinValue'; import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp'; import AddressEntityZetaChain from 'ui/shared/entities/address/AddressEntityZetaChain'; import TxEntityZetaChainCC from 'ui/shared/entities/tx/TxEntityZetaChainCC'; @@ -113,18 +111,13 @@ const ZetaChainCCTXDetails = ({ data, isLoading }: Props) => { > Cross-chain fee - - - + { data.relayed_message && ( <>