Change zero to <0.001 value within different pages

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

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 }`;

ui/shared/TruncatedValue.tsx → 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<SkeletonTextProps, 'loading'> {
+  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 = (
     <Skeleton
-      className={ className }
-      loading={ isLoading }
+      loading={ loading }
       display="inline-block"
       whiteSpace="nowrap"
       overflow="hidden"
       textOverflow="ellipsis"
       height="fit-content"
+      { ...rest }
     >
-      <span>{ value }</span>
+      <span>{ text }</span>
     </Skeleton>
   );
 
@@ -45,10 +46,8 @@ const TruncatedValue = ({ className, isLoading, value, tooltipPlacement, tooltip
   };
 
   return (
-    <TruncatedTextTooltip label={ value } placement={ tooltipPlacement } interactive={ tooltipInteractive }>
+    <TruncatedTextTooltip label={ text } placement={ tooltipPlacement } interactive={ tooltipInteractive }>
       { valueElement }
     </TruncatedTextTooltip>
   );
 };
-
-export default React.memo(chakra(TruncatedValue));

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';

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',

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;

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 && (
         <Flex columnGap={ 2 } w="100%">
           <Skeleton loading={ props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Reward { currencyUnits.ether }</Skeleton>
-          <Skeleton loading={ props.isLoading }>
-            <Text color="text.secondary">{ totalReward.toFixed() }</Text>
-          </Skeleton>
+          <SimpleValue
+            value={ totalReward }
+            accuracy={ 0 }
+            loading={ props.isLoading }
+            color="text.secondary"
+          />
         </Flex>
       ) }
     </ListItemMobile>

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) => {
       </TableCell>
       { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && (
         <TableCell isNumeric>
-          <Skeleton loading={ props.isLoading } display="inline-block">
-            <span>{ totalReward.toFixed() }</span>
-          </Skeleton>
+          <SimpleValue
+            value={ totalReward }
+            accuracy={ 0 }
+            loading={ props.isLoading }
+          />
         </TableCell>
       ) }
     </TableRow>

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 (
     <ListItemMobile rowGap={ 2 }>
       <Flex justifyContent="space-between" w="100%">
-        <Skeleton loading={ props.isLoading } fontWeight={ 600 }>
-          { BigNumber(props.value).div(WEI).dp(8).toFormat() } { currencyUnits.ether }
-        </Skeleton>
+        <NativeCoinValue
+          amount={ props.value }
+          loading={ props.isLoading }
+          fontWeight={ 600 }
+        />
         <Skeleton loading={ props.isLoading }>
           <Stat.Root flexGrow="0" positive={ isPositiveDelta } size="sm">
             <Stat.ValueText fontWeight={ 600 }>
-              { deltaBn.dp(8).toFormat() }
+              <SimpleValue
+                value={ deltaBn }
+                loading={ props.isLoading }
+              />
             </Stat.ValueText>
             { isPositiveDelta ? <Stat.UpIndicator/> : <Stat.DownIndicator/> }
           </Stat.Root>

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) => {
         />
       </TableCell>
       <TableCell isNumeric pr={ 1 }>
-        <Skeleton loading={ props.isLoading } color="text.secondary" display="inline-block">
-          <span>{ BigNumber(props.value).div(WEI).dp(8).toFormat() }</span>
-        </Skeleton>
+        <NativeCoinValue
+          amount={ props.value }
+          noSymbol
+          loading={ props.isLoading }
+          color="text.secondary"
+        />
       </TableCell>
       <TableCell isNumeric display="flex" justifyContent="end">
         <Skeleton loading={ props.isLoading }>
           <Stat.Root flexGrow="0" size="sm" positive={ isPositiveDelta }>
             <Stat.ValueText fontWeight={ 600 }>
-              { deltaBn.dp(8).toFormat() }
+              <SimpleValue
+                value={ deltaBn }
+                loading={ props.isLoading }
+              />
             </Stat.ValueText>
             { isPositiveDelta ? <Stat.UpIndicator/> : <Stat.DownIndicator/> }
           </Stat.Root>

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<Address, 'block_number_balance_updated_at' | 'coin_balance' | 'hash' | 'exchange_rate'>;
@@ -74,18 +73,11 @@ const AddressBalance = ({ data, isLoading }: Props) => {
         Balance
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue multiRow>
-        <CurrencyValue
-          value={ data.coin_balance || '0' }
+        <NativeCoinValue
+          amount={ data.coin_balance || '0' }
           exchangeRate={ data.exchange_rate }
-          decimals={ String(config.chain.currency.decimals) }
-          currency={ currencyUnits.ether }
-          accuracyUsd={ 2 }
-          accuracy={ 8 }
-          flexWrap="wrap"
-          alignItems="center"
-          rowGap={ 0 }
-          isLoading={ isLoading }
-          startElement={ <NativeTokenIcon boxSize={ 5 } isLoading={ isLoading }/> }
+          startElement={ <NativeTokenIcon boxSize={ 5 } isLoading={ isLoading } mr={ 2 }/> }
+          loading={ isLoading }
         />
       </DetailedInfo.ItemValue>
     </>

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
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue multiRow>
-        { data.name && <TruncatedValue value={ data.name } mr={ 3 }/> }
+        { data.name && <TruncatedText text={ data.name } mr={ 3 }/> }
         <DetailedInfoItemBreakdown.Container loading={ isLoading }>
           <DetailedInfoItemBreakdown.Row
             label="Type"
@@ -43,7 +42,7 @@ const AddressCeloAccount = ({ isLoading, data }: Props) => {
               hint="Link to additional information published by the account owner"
             >
               <Link href={ data.metadata_url } external>
-                <TruncatedValue value={ data.metadata_url }/>
+                <TruncatedText text={ data.metadata_url }/>
               </Link>
             </DetailedInfoItemBreakdown.Row>
           ) }
@@ -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)"
           >
-            <TruncatedValue value={ BigNumber(data.locked_celo).div(10 ** config.chain.currency.decimals).toFormat() }/>
+            <NativeCoinValue amount={ data.locked_celo } noSymbol/>
           </DetailedInfoItemBreakdown.Row>
 
           <DetailedInfoItemBreakdown.Row
             label={ `Non-voting locked ${ currencyUnits.ether }` }
             hint="Portion of locked CELO that is not currently used for voting"
           >
-            <TruncatedValue value={ BigNumber(data.nonvoting_locked_celo).div(10 ** config.chain.currency.decimals).toFormat() }/>
+            <NativeCoinValue amount={ data.nonvoting_locked_celo } noSymbol/>
           </DetailedInfoItemBreakdown.Row>
 
           { data.vote_signer_address && (