Merge pull request #1517 from blockscout/tom2drum/issue-1490

Custom 'wei' name

configs/app/chain.ts

@@ -8,6 +8,7 @@ const chain = Object.freeze({
   shortName: getEnvValue('NEXT_PUBLIC_NETWORK_SHORT_NAME'),
   currency: {
     name: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_NAME'),
+    weiName: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_WEI_NAME'),
     symbol: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL'),
     decimals: Number(getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS')) || DEFAULT_CURRENCY_DECIMALS,
   },

deploy/tools/envs-validator/schema.ts

@@ -330,6 +330,7 @@ const schema = yup
     NEXT_PUBLIC_NETWORK_ID: yup.number().positive().integer().required(),
     NEXT_PUBLIC_NETWORK_RPC_URL: yup.string().test(urlTest),
     NEXT_PUBLIC_NETWORK_CURRENCY_NAME: yup.string(),
+    NEXT_PUBLIC_NETWORK_CURRENCY_WEI_NAME: yup.string(),
     NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL: yup.string(),
     NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS: yup.number().integer().positive(),
     NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL: yup.string(),

docs/ENVS.md

@@ -77,6 +77,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 | NEXT_PUBLIC_NETWORK_ID | `number` | Chain id, see [https://chainlist.org](https://chainlist.org) for the reference | Required | -  | `99` |
 | NEXT_PUBLIC_NETWORK_RPC_URL | `string` | Chain public RPC server url, see [https://chainlist.org](https://chainlist.org) for the reference | - | - | `https://core.poa.network` |
 | NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | Network currency name | - | - | `Ether` |
+| NEXT_PUBLIC_NETWORK_CURRENCY_WEI_NAME | `string` | Name of network currency subdenomination | - | `wei` | `duck` |
 | NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | Network currency symbol | - | - | `ETH` |
 | NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | Network currency decimals | - | `18` | `6` |
 | NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL | `string` | Network governance token symbol | - | - | `GNO` |

lib/units.ts

+import type { Unit } from 'types/unit';
+
+import config from 'configs/app';
+
+const weiName = config.chain.currency.weiName || 'wei';
+
+export const currencyUnits: Record<Unit, string> = {
+  wei: weiName,
+  gwei: `G${ weiName }`,
+  ether: config.chain.currency.symbol || 'ETH',
+};

ui/address/AddressBlocksValidated.tsx

@@ -10,6 +10,7 @@ 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 { BLOCK } from 'stubs/block';
 import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
@@ -95,7 +96,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
               <Th width="16%">Txn</Th>
               <Th width="25%">Gas used</Th>
               { !config.UI.views.block.hiddenFields?.total_reward &&
-              <Th width="25%" isNumeric>Reward { config.chain.currency.symbol }</Th> }
+              <Th width="25%" isNumeric>Reward { currencyUnits.ether }</Th> }
             </Tr>
           </Thead>
           <Tbody>

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

@@ -7,6 +7,7 @@ import type { Block } from 'types/api/block';
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import { currencyUnits } from 'lib/units';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import Utilization from 'ui/shared/Utilization/Utilization';
@@ -50,7 +51,7 @@ const AddressBlocksValidatedListItem = (props: Props) => {
       </Flex>
       { !config.UI.views.block.hiddenFields?.total_reward && (
         <Flex columnGap={ 2 } w="100%">
-          <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Reward { config.chain.currency.symbol }</Skeleton>
+          <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Reward { currencyUnits.ether }</Skeleton>
           <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ totalReward.toFixed() }</Skeleton>
         </Flex>
       ) }

ui/address/coinBalance/AddressCoinBalanceChart.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
+import { currencyUnits } from 'lib/units';
 import ChartWidget from 'ui/shared/chart/ChartWidget';
 
 interface Props {
@@ -26,7 +27,7 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
       items={ items }
       isLoading={ isPending }
       h="300px"
-      units={ config.chain.currency.symbol }
+      units={ currencyUnits.ether }
     />
   );
 };

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -5,8 +5,8 @@ import React from 'react';
 import type { AddressCoinBalanceHistoryResponse } from 'types/api/address';
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
-import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
+import { currencyUnits } from 'lib/units';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -32,7 +32,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
               <Th width="20%">Block</Th>
               <Th width="20%">Txn</Th>
               <Th width="20%">Age</Th>
-              <Th width="20%" isNumeric pr={ 1 }>Balance { config.chain.currency.symbol }</Th>
+              <Th width="20%" isNumeric pr={ 1 }>Balance { currencyUnits.ether }</Th>
               <Th width="20%" isNumeric>Delta</Th>
             </Tr>
           </Thead>

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -4,9 +4,9 @@ import React from 'react';
 
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 
-import config from 'configs/app';
 import { WEI, ZERO } from 'lib/consts';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import { currencyUnits } from 'lib/units';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -25,7 +25,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
     <ListItemMobile rowGap={ 2 } isAnimated>
       <Flex justifyContent="space-between" w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 600 }>
-          { BigNumber(props.value).div(WEI).dp(8).toFormat() } { config.chain.currency.symbol }
+          { BigNumber(props.value).div(WEI).dp(8).toFormat() } { currencyUnits.ether }
         </Skeleton>
         <Skeleton isLoaded={ !props.isLoading }>
           <Stat flexGrow="0">

ui/address/contract/ContractMethodCallable.tsx

@@ -39,7 +39,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
     return [
       ...('inputs' in data ? data.inputs : []),
       ...('stateMutability' in data && data.stateMutability === 'payable' ? [ {
-        name: `Send native ${ config.chain.currency.symbol }`,
+        name: `Send native ${ config.chain.currency.symbol || 'coin' }`,
         type: 'uint256' as const,
         internalType: 'uint256' as const,
         fieldType: 'native_coin' as const,

ui/address/contract/ContractMethodConstant.tsx

@@ -5,8 +5,8 @@ import React from 'react';
 
 import type { SmartContractMethodOutput } from 'types/api/contract';
 
-import config from 'configs/app';
 import { WEI } from 'lib/consts';
+import { currencyUnits } from 'lib/units';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 function castValueToString(value: number | string | boolean | object | bigint | undefined): string {
@@ -32,17 +32,17 @@ interface Props {
 
 const ContractMethodStatic = ({ data }: Props) => {
   const [ value, setValue ] = React.useState<string>(castValueToString(data.value));
-  const [ label, setLabel ] = React.useState('WEI');
+  const [ label, setLabel ] = React.useState(currencyUnits.wei.toUpperCase());
 
   const handleCheckboxChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
     const initialValue = castValueToString(data.value);
 
     if (event.target.checked) {
       setValue(BigNumber(initialValue).div(WEI).toFixed());
-      setLabel(config.chain.currency.symbol || 'ETH');
+      setLabel(currencyUnits.ether.toUpperCase());
     } else {
       setValue(BigNumber(initialValue).toFixed());
-      setLabel('WEI');
+      setLabel(currencyUnits.wei.toUpperCase());
     }
   }, [ data.value ]);
 

ui/address/details/AddressBalance.tsx

@@ -8,6 +8,7 @@ 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 DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
@@ -66,7 +67,7 @@ const AddressBalance = ({ data, isLoading }: Props) => {
   return (
     <DetailsInfoItem
       title="Balance"
-      hint={ `Address balance in ${ config.chain.currency.symbol }. Doesn't include ERC20, ERC721 and ERC1155 tokens` }
+      hint={ `Address balance in ${ currencyUnits.ether }. Doesn't include ERC20, ERC721 and ERC1155 tokens` }
       flexWrap="nowrap"
       alignItems="flex-start"
       isLoading={ isLoading }
@@ -75,7 +76,7 @@ const AddressBalance = ({ data, isLoading }: Props) => {
         value={ data.coin_balance || '0' }
         exchangeRate={ data.exchange_rate }
         decimals={ String(config.chain.currency.decimals) }
-        currency={ config.chain.currency.symbol }
+        currency={ currencyUnits.ether }
         accuracyUsd={ 2 }
         accuracy={ 8 }
         flexWrap="wrap"

ui/address/internals/AddressIntTxsListItem.tsx

@@ -6,6 +6,7 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
+import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
@@ -68,7 +69,7 @@ const TxInternalsListItem = ({
         w="100%"
       />
       <HStack spacing={ 3 }>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value { config.chain.currency.symbol }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value { currencyUnits.ether }</Skeleton>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" minW={ 6 }>
           <span>{ BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }</span>
         </Skeleton>

ui/address/internals/AddressIntTxsTable.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
-import config from 'configs/app';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { currencyUnits } from 'lib/units';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressIntTxsTableItem from './AddressIntTxsTableItem';
@@ -26,7 +26,7 @@ const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => {
             <Th width="10%">Block</Th>
             <Th width="40%">From/To</Th>
             <Th width="20%" isNumeric>
-              Value { config.chain.currency.symbol }
+              Value { currencyUnits.ether }
             </Th>
           </Tr>
         </Thead>

ui/address/tokens/TokenBalances.tsx

@@ -6,6 +6,7 @@ import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { ZERO } from 'lib/consts';
 import getCurrencyValue from 'lib/getCurrencyValue';
+import { currencyUnits } from 'lib/units';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import { getTokensTotalInfo } from '../utils/tokenUtils';
@@ -52,8 +53,8 @@ const TokenBalances = () => {
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
       />
       <TokenBalancesItem
-        name={ `${ config.chain.currency.symbol } Balance` }
-        value={ (!nativeUsd.eq(ZERO) ? `$${ nativeUsd.toFormat(2) } USD | ` : '') + `${ nativeValue } ${ config.chain.currency.symbol }` }
+        name={ `${ currencyUnits.ether } Balance` }
+        value={ (!nativeUsd.eq(ZERO) ? `$${ nativeUsd.toFormat(2) } USD | ` : '') + `${ nativeValue } ${ currencyUnits.ether }` }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
       />
       <TokenBalancesItem

ui/addresses/AddressesListItem.tsx

@@ -6,6 +6,7 @@ import type { AddressesItem } from 'types/api/addresses';
 
 import config from 'configs/app';
 import { ZERO } from 'lib/consts';
+import { currencyUnits } from 'lib/units';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -43,7 +44,7 @@ const AddressesListItem = ({
         <Tag key={ tag.label } isLoading={ isLoading }>{ tag.display_name }</Tag>
       )) }
       <HStack spacing={ 3 }>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>{ `Balance ${ config.chain.currency.symbol }` }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
           <span>{ addressBalance.dp(8).toFormat() }</span>
         </Skeleton>

ui/addresses/AddressesTable.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 
 import type { AddressesItem } from 'types/api/addresses';
 
-import config from 'configs/app';
 import { ZERO } from 'lib/consts';
+import { currencyUnits } from 'lib/units';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressesTableItem from './AddressesTableItem';
@@ -27,7 +27,7 @@ const AddressesTable = ({ items, totalSupply, pageStartIndex, top, isLoading }:
           <Th width="64px">Rank</Th>
           <Th width={ hasPercentage ? '30%' : '40%' }>Address</Th>
           <Th width="20%" pl={ 10 }>Public tag</Th>
-          <Th width={ hasPercentage ? '20%' : '25%' } isNumeric>{ `Balance ${ config.chain.currency.symbol }` }</Th>
+          <Th width={ hasPercentage ? '20%' : '25%' } isNumeric>{ `Balance ${ currencyUnits.ether }` }</Th>
           { hasPercentage && <Th width="15%" isNumeric>Percentage</Th> }
           <Th width="15%" isNumeric>Txn count</Th>
         </Tr>

ui/block/BlockDetails.tsx

@@ -18,6 +18,7 @@ import dayjs from 'lib/date/dayjs';
 import { space } from 'lib/html-entities';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import { currencyUnits } from 'lib/units';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
@@ -237,7 +238,7 @@ const BlockDetails = ({ query }: Props) => {
           isLoading={ isPlaceholderData }
         >
           <Skeleton isLoaded={ !isPlaceholderData }>
-            { totalReward.dividedBy(WEI).toFixed() } { config.chain.currency.symbol }
+            { totalReward.dividedBy(WEI).toFixed() } { currencyUnits.ether }
           </Skeleton>
           { rewardBreakDown }
         </DetailsInfoItem>
@@ -251,7 +252,7 @@ const BlockDetails = ({ query }: Props) => {
             // is this text correct for validators?
             hint={ `Amount of distributed reward. ${ capitalize(validatorTitle) }s receive a static block reward + Tx fees + uncle fees` }
           >
-            { BigNumber(reward).dividedBy(WEI).toFixed() } { config.chain.currency.symbol }
+            { BigNumber(reward).dividedBy(WEI).toFixed() } { currencyUnits.ether }
           </DetailsInfoItem>
         ))
       }
@@ -295,7 +296,7 @@ const BlockDetails = ({ query }: Props) => {
           isLoading={ isPlaceholderData }
         >
           <Skeleton isLoaded={ !isPlaceholderData }>
-            { BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } Gwei
+            { BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } { currencyUnits.gwei }
           </Skeleton>
         </DetailsInfoItem>
       ) }
@@ -309,9 +310,9 @@ const BlockDetails = ({ query }: Props) => {
             <Skeleton isLoaded={ !isPlaceholderData } h="20px" maxW="380px" w="100%"/>
           ) : (
             <>
-              <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { config.chain.currency.symbol } </Text>
+              <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
               <Text variant="secondary" whiteSpace="pre">
-                { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } Gwei)
+                { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
               </Text>
             </>
           ) }
@@ -329,7 +330,7 @@ const BlockDetails = ({ query }: Props) => {
         >
           <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
           <Skeleton isLoaded={ !isPlaceholderData } ml={ 2 }>
-            { burntFees.dividedBy(WEI).toFixed() } { config.chain.currency.symbol }
+            { burntFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
           </Skeleton>
           { !txFees.isEqualTo(ZERO) && (
             <Tooltip label="Burnt fees / Txn fees * 100%">
@@ -351,7 +352,7 @@ const BlockDetails = ({ query }: Props) => {
           isLoading={ isPlaceholderData }
         >
           <Skeleton isLoaded={ !isPlaceholderData }>
-            { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { config.chain.currency.symbol }
+            { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { currencyUnits.ether }
           </Skeleton>
         </DetailsInfoItem>
       ) }

ui/blocks/BlocksListItem.tsx

@@ -11,6 +11,7 @@ import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { WEI } from 'lib/consts';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
+import { currencyUnits } from 'lib/units';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
@@ -94,7 +95,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
       </Box>
       { !isRollup && !config.UI.views.block.hiddenFields?.total_reward && (
         <Flex columnGap={ 2 }>
-          <Text fontWeight={ 500 }>Reward { config.chain.currency.symbol }</Text>
+          <Text fontWeight={ 500 }>Reward { currencyUnits.ether }</Text>
           <Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary">
             <span>{ totalReward.toFixed() }</span>
           </Skeleton>

ui/blocks/BlocksTable.tsx

@@ -8,6 +8,7 @@ import type { Block } from 'types/api/block';
 import config from 'configs/app';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
+import { currencyUnits } from 'lib/units';
 import BlocksTableItem from 'ui/blocks/BlocksTableItem';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -49,9 +50,9 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum
             <Th width="64px" isNumeric>Txn</Th>
             <Th width={ `${ GAS_COL_WEIGHT / widthBase * 100 }%` }>Gas used</Th>
             { !isRollup && !config.UI.views.block.hiddenFields?.total_reward &&
-              <Th width={ `${ REWARD_COL_WEIGHT / widthBase * 100 }%` }>Reward { config.chain.currency.symbol }</Th> }
+              <Th width={ `${ REWARD_COL_WEIGHT / widthBase * 100 }%` }>Reward { currencyUnits.ether }</Th> }
             { !isRollup && !config.UI.views.block.hiddenFields?.burnt_fees &&
-              <Th width={ `${ FEES_COL_WEIGHT / widthBase * 100 }%` }>Burnt fees { config.chain.currency.symbol }</Th> }
+              <Th width={ `${ FEES_COL_WEIGHT / widthBase * 100 }%` }>Burnt fees { currencyUnits.ether }</Th> }
           </Tr>
         </Thead>
         <Tbody>

ui/home/LatestTxsItem.tsx

@@ -13,6 +13,7 @@ import type { Transaction } from 'types/api/transaction';
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
@@ -88,7 +89,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       <Flex flexDir="column">
         { !config.UI.views.tx.hiddenFields?.value && (
           <Skeleton isLoaded={ !isLoading } my="3px">
-            <Text as="span" whiteSpace="pre">{ config.chain.currency.symbol } </Text>
+            <Text as="span" whiteSpace="pre">{ currencyUnits.ether } </Text>
             <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
           </Skeleton>
         ) }

ui/home/LatestTxsItemMobile.tsx

@@ -12,6 +12,7 @@ import type { Transaction } from 'types/api/transaction';
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
@@ -75,13 +76,13 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       />
       { !config.UI.views.tx.hiddenFields?.value && (
         <Skeleton isLoaded={ !isLoading } mb={ 2 } fontSize="sm" w="fit-content">
-          <Text as="span">Value { config.chain.currency.symbol } </Text>
+          <Text as="span">Value { currencyUnits.ether } </Text>
           <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
         </Skeleton>
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Skeleton isLoaded={ !isLoading } fontSize="sm" w="fit-content" display="flex" whiteSpace="pre">
-          <Text as="span">Fee { !config.UI.views.tx.hiddenFields?.fee_currency ? `${ config.chain.currency.symbol } ` : '' }</Text>
+          <Text as="span">Fee { !config.UI.views.tx.hiddenFields?.fee_currency ? `${ currencyUnits.ether } ` : '' }</Text>
           { tx.stability_fee ? (
             <TxFeeStability data={ tx.stability_fee } accuracy={ 5 } color="text_secondary" hideUsd/>
           ) : (

ui/home/Stats.tsx

@@ -7,6 +7,7 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { WEI } from 'lib/consts';
+import { currencyUnits } from 'lib/units';
 import { HOMEPAGE_STATS } from 'stubs/stats';
 import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
 
@@ -59,7 +60,7 @@ const Stats = () => {
       }
 
       if (data.gas_prices?.average?.price) {
-        return `${ data.gas_prices.average.price.toLocaleString() } Gwei`;
+        return `${ data.gas_prices.average.price.toLocaleString() } ${ currencyUnits.gwei }`;
       }
 
       return 'N/A';

ui/pages/Withdrawals.tsx

@@ -5,6 +5,7 @@ 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 { generateListStub } from 'stubs/utils';
 import { WITHDRAWAL } from 'stubs/withdrawals';
 import DataListDisplay from 'ui/shared/DataListDisplay';
@@ -64,7 +65,7 @@ const Withdrawals = () => {
         { countersQuery.data && (
           <Text lineHeight={{ base: '24px', lg: '32px' }}>
             { BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed
-        and { getCurrencyValue({ value: countersQuery.data.withdrawal_sum }).valueStr } { feature.currency.symbol } withdrawn
+        and { getCurrencyValue({ value: countersQuery.data.withdrawal_sum }).valueStr } { currencyUnits.ether } withdrawn
           </Text>
         ) }
       </Skeleton>

ui/shared/GasInfoTooltipContent/GasInfoRow.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type { GasPriceInfo } from 'types/api/stats';
 
 import { asymp, space } from 'lib/html-entities';
+import { currencyUnits } from 'lib/units';
 
 interface Props {
   name: string;
@@ -18,7 +19,7 @@ const GasInfoRow = ({ name, info }: Props) => {
 
     return (
       <>
-        <span>{ info.fiat_price ? `$${ info.fiat_price }` : `${ info.price } Gwei` }</span>
+        <span>{ info.fiat_price ? `$${ info.fiat_price }` : `${ info.price } ${ currencyUnits.gwei }` }</span>
         { info.time && (
           <chakra.span color="text_secondary">
             { space }per tx { asymp } { (info.time / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s

ui/snippets/topBar/TopBarStats.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import dayjs from 'lib/date/dayjs';
+import { currencyUnits } from 'lib/units';
 import { HOMEPAGE_STATS } from 'stubs/stats';
 import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
 import TextSeparator from 'ui/shared/TextSeparator';
@@ -94,7 +95,7 @@ const TopBarStats = () => {
               onMouseEnter={ onOpen }
               onMouseLeave={ onClose }
             >
-              { data.gas_prices.average.fiat_price ? `$${ data.gas_prices.average.fiat_price }` : `${ data.gas_prices.average.price } Gwei` }
+              { data.gas_prices.average.fiat_price ? `$${ data.gas_prices.average.fiat_price }` : `${ data.gas_prices.average.price } ${ currencyUnits.gwei }` }
             </Link>
           </Tooltip>
         </Skeleton>

ui/tx/TxDetails.tsx

@@ -25,6 +25,7 @@ import { WEI, WEI_IN_GWEI } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
+import { currencyUnits } from 'lib/units';
 import Tag from 'ui/shared/chakra/Tag';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import CurrencyValue from 'ui/shared/CurrencyValue';
@@ -359,7 +360,7 @@ const TxDetails = () => {
           >
             <CurrencyValue
               value={ data.value }
-              currency={ config.chain.currency.symbol }
+              currency={ currencyUnits.ether }
               exchangeRate={ data.exchange_rate }
               isLoading={ isPlaceholderData }
               flexWrap="wrap"
@@ -377,7 +378,7 @@ const TxDetails = () => {
             ) : (
               <CurrencyValue
                 value={ data.fee.value }
-                currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : config.chain.currency.symbol }
+                currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : currencyUnits.ether }
                 exchangeRate={ data.exchange_rate }
                 flexWrap="wrap"
                 isLoading={ isPlaceholderData }
@@ -403,7 +404,7 @@ const TxDetails = () => {
         { !config.UI.views.tx.hiddenFields?.gas_fees &&
           (data.base_fee_per_gas || data.max_fee_per_gas || data.max_priority_fee_per_gas) && (
           <DetailsInfoItem
-            title="Gas fees (Gwei)"
+            title={ `Gas fees (${ currencyUnits.gwei })` }
             // eslint-disable-next-line max-len
             hint={ `
               Base Fee refers to the network Base Fee at the time of the block, 
@@ -437,12 +438,12 @@ const TxDetails = () => {
         { data.tx_burnt_fee && !config.UI.views.tx.hiddenFields?.burnt_fees && !config.features.optimisticRollup.isEnabled && (
           <DetailsInfoItem
             title="Burnt fees"
-            hint={ `Amount of ${ config.chain.currency.symbol } burned for this transaction. Equals Block Base Fee per Gas * Gas Used` }
+            hint={ `Amount of ${ currencyUnits.ether } burned for this transaction. Equals Block Base Fee per Gas * Gas Used` }
           >
             <IconSvg name="flame" boxSize={ 5 } color="gray.500"/>
             <CurrencyValue
               value={ String(data.tx_burnt_fee) }
-              currency={ config.chain.currency.symbol }
+              currency={ currencyUnits.ether }
               exchangeRate={ data.exchange_rate }
               flexWrap="wrap"
               ml={ 2 }
@@ -466,8 +467,8 @@ const TxDetails = () => {
                 hint="L1 gas price"
                 isLoading={ isPlaceholderData }
               >
-                <Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { config.chain.currency.symbol }</Text>
-                <Text variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } Gwei)</Text>
+                <Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
+                <Text variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
               </DetailsInfoItem>
             ) }
             { data.l1_fee && (
@@ -479,7 +480,7 @@ const TxDetails = () => {
               >
                 <CurrencyValue
                   value={ data.l1_fee }
-                  currency={ config.chain.currency.symbol }
+                  currency={ currencyUnits.ether }
                   exchangeRate={ data.exchange_rate }
                   flexWrap="wrap"
                 />

ui/tx/TxDetailsWrapped.tsx

@@ -5,7 +5,7 @@ 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 Tag from 'ui/shared/chakra/Tag';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
@@ -61,7 +61,7 @@ const TxDetailsWrapped = ({ data }: Props) => {
       >
         <CurrencyValue
           value={ data.value }
-          currency={ config.chain.currency.symbol }
+          currency={ currencyUnits.ether }
           flexWrap="wrap"
         />
       </DetailsInfoItem>
@@ -72,7 +72,7 @@ const TxDetailsWrapped = ({ data }: Props) => {
         >
           <CurrencyValue
             value={ data.fee.value }
-            currency={ config.chain.currency.symbol }
+            currency={ currencyUnits.ether }
             flexWrap="wrap"
           />
         </DetailsInfoItem>

ui/tx/details/TxDetailsFeePerGas.tsx

@@ -3,6 +3,7 @@ import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
 interface Props {
@@ -24,7 +25,7 @@ const TxDetailsFeePerGas = ({ txFee, gasUsed, isLoading }: Props) => {
     >
       <Skeleton isLoaded={ !isLoading } mr={ 1 }>
         { BigNumber(txFee).dividedBy(10 ** config.chain.currency.decimals).dividedBy(gasUsed).toFixed() }
-        { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ config.chain.currency.symbol }` }
+        { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }
       </Skeleton>
     </DetailsInfoItem>
   );

ui/tx/details/TxDetailsGasPrice.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import config from 'configs/app';
 import { WEI, WEI_IN_GWEI } from 'lib/consts';
+import { currencyUnits } from 'lib/units';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
 interface Props {
@@ -23,10 +24,10 @@ const TxDetailsGasPrice = ({ gasPrice, isLoading }: Props) => {
       isLoading={ isLoading }
     >
       <Skeleton isLoaded={ !isLoading } mr={ 1 }>
-        { BigNumber(gasPrice).dividedBy(WEI).toFixed() } { config.chain.currency.symbol }
+        { BigNumber(gasPrice).dividedBy(WEI).toFixed() } { currencyUnits.ether }
       </Skeleton>
       <Skeleton isLoaded={ !isLoading } color="text_secondary">
-        <span>({ BigNumber(gasPrice).dividedBy(WEI_IN_GWEI).toFixed() } Gwei)</span>
+        <span>({ BigNumber(gasPrice).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</span>
       </Skeleton>
     </DetailsInfoItem>
   );

ui/tx/internals/TxInternalsListItem.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -31,7 +32,7 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
         fontWeight="500"
       />
       <HStack spacing={ 3 }>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value { config.chain.currency.symbol }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value { currencyUnits.ether }</Skeleton>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
           { BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
         </Skeleton>

ui/tx/internals/TxInternalsTable.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
-import config from 'configs/app';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { currencyUnits } from 'lib/units';
 import IconSvg from 'ui/shared/IconSvg';
 import { default as Thead } from 'ui/shared/TheadSticky';
 import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem';
@@ -31,13 +31,13 @@ const TxInternalsTable = ({ data, sort, onSortToggle, top, isLoading }: Props) =
             <Th width="16%" isNumeric>
               <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('value') } columnGap={ 1 }>
                 { sort?.includes('value') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
-                Value { config.chain.currency.symbol }
+                Value { currencyUnits.ether }
               </Link>
             </Th>
             <Th width="16%" isNumeric>
               <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('gas-limit') } columnGap={ 1 }>
                 { sort?.includes('gas-limit') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
-                Gas limit { config.chain.currency.symbol }
+                Gas limit { currencyUnits.ether }
               </Link>
             </Th>
           </Tr>

ui/tx/interpretation/TxInterpretation.tsx

@@ -4,9 +4,9 @@ import React from 'react';
 
 import type { TxInterpretationSummary, TxInterpretationVariable } from 'types/api/txInterpretation';
 
-import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
 import * as mixpanel from 'lib/mixpanel/index';
+import { currencyUnits } from 'lib/units';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import IconSvg from 'ui/shared/IconSvg';
@@ -102,7 +102,7 @@ const TxInterpretation = ({ summary, isLoading, className }: Props) => {
             <Text color="text_secondary">{ chunk.trim() + (chunk.trim() && variablesNames[index] ? ' ' : '') }</Text>
             { index < variablesNames.length && (
               variablesNames[index] === NATIVE_COIN_SYMBOL_VAR_NAME ?
-                <Text>{ config.chain.currency.symbol + ' ' }</Text> :
+                <Text>{ currencyUnits.ether + ' ' }</Text> :
                 <TxInterpretationElementByType variable={ variables[variablesNames[index]] }/>
             ) }
           </Flex>

ui/tx/state/utils.tsx

@@ -8,6 +8,7 @@ import config from 'configs/app';
 import { ZERO_ADDRESS } from 'lib/consts';
 import { nbsp, space } from 'lib/html-entities';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
+import { currencyUnits } from 'lib/units';
 import Tag from 'ui/shared/chakra/Tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
@@ -59,12 +60,12 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
       return {
         before: (
           <Skeleton isLoaded={ !isLoading } wordBreak="break-all" display="inline-block">
-            { beforeBn.toFormat() } { config.chain.currency.symbol }
+            { beforeBn.toFormat() } { currencyUnits.ether }
           </Skeleton>
         ),
         after: (
           <Skeleton isLoaded={ !isLoading } wordBreak="break-all" display="inline-block">
-            { afterBn.toFormat() } { config.chain.currency.symbol }
+            { afterBn.toFormat() } { currencyUnits.ether }
           </Skeleton>
         ),
         change: (

ui/txs/TxAdditionalInfoContent.tsx

@@ -8,6 +8,7 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
+import { currencyUnits } from 'lib/units';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import LinkInternal from 'ui/shared/LinkInternal';
 import TextSeparator from 'ui/shared/TextSeparator';
@@ -42,7 +43,7 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
                 <Flex>
                   <CurrencyValue
                     value={ tx.fee.value }
-                    currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : config.chain.currency.symbol }
+                    currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : currencyUnits.ether }
                     exchangeRate={ tx.exchange_rate }
                     accuracyUsd={ 2 }
                     flexWrap="wrap"
@@ -68,7 +69,7 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
       { !config.UI.views.tx.hiddenFields?.gas_fees &&
         (tx.base_fee_per_gas !== null || tx.max_fee_per_gas !== null || tx.max_priority_fee_per_gas !== null) && (
         <Box { ...sectionProps } mb={ 4 }>
-          <Text { ...sectionTitleProps }>Gas fees (Gwei)</Text>
+          <Text { ...sectionTitleProps }>Gas fees ({ currencyUnits.gwei })</Text>
           { tx.base_fee_per_gas !== null && (
             <Box>
               <Text as="span" fontWeight="500">Base: </Text>

ui/txs/TxsListItem.tsx

@@ -11,6 +11,7 @@ import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { space } from 'lib/html-entities';
+import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -95,7 +96,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
           <Skeleton isLoaded={ !isLoading } display="inline-block" variant="text_secondary" whiteSpace="pre">
             { getValueWithUnit(tx.value).toFormat() }
             { space }
-            { config.chain.currency.symbol }
+            { currencyUnits.ether }
           </Skeleton>
         </Flex>
       ) }
@@ -109,7 +110,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
               ) : (
                 <Skeleton isLoaded={ !isLoading } display="inline-block" variant="text_secondary" whiteSpace="pre">
                   { getValueWithUnit(tx.fee.value || 0).toFormat() }
-                  { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ config.chain.currency.symbol }` }
+                  { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }
                 </Skeleton>
               ) }
             </>

ui/txs/TxsTable.tsx

@@ -6,6 +6,7 @@ import type { Transaction, TransactionsSortingField, TransactionsSortingValue }
 
 import config from 'configs/app';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { currencyUnits } from 'lib/units';
 import IconSvg from 'ui/shared/IconSvg';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TheadSticky from 'ui/shared/TheadSticky';
@@ -55,7 +56,7 @@ const TxsTable = ({
                 <Link onClick={ sort('value') } display="flex" justifyContent="end">
                   { sorting === 'value-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
                   { sorting === 'value-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
-                  { `Value ${ config.chain.currency.symbol }` }
+                  { `Value ${ currencyUnits.ether }` }
                 </Link>
               </Th>
             ) }
@@ -64,7 +65,7 @@ const TxsTable = ({
                 <Link onClick={ sort('fee') } display="flex" justifyContent="end">
                   { sorting === 'fee-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
                   { sorting === 'fee-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
-                  { `Fee${ config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ config.chain.currency.symbol }` }` }
+                  { `Fee${ config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }` }
                 </Link>
               </Th>
             ) }

ui/verifiedContracts/VerifiedContractsListItem.tsx

@@ -6,6 +6,7 @@ import type { VerifiedContract } from 'types/api/contracts';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
+import { currencyUnits } from 'lib/units';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import HashStringShorten from 'ui/shared/HashStringShorten';
@@ -37,7 +38,7 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
         <CopyToClipboard text={ data.address.hash } isLoading={ isLoading }/>
       </Flex>
       <Flex columnGap={ 3 }>
-        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Balance { config.chain.currency.symbol }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Balance { currencyUnits.ether }</Skeleton>
         <Skeleton isLoaded={ !isLoading } color="text_secondary">
           <span>{ balance }</span>
         </Skeleton>

ui/verifiedContracts/VerifiedContractsTable.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { VerifiedContract } from 'types/api/contracts';
 import type { VerifiedContractsSorting, VerifiedContractsSortingField, VerifiedContractsSortingValue } from 'types/api/verifiedContracts';
 
-import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
 import IconSvg from 'ui/shared/IconSvg';
 import getNextSortValue from 'ui/shared/sort/getNextSortValue';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -35,7 +35,7 @@ const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) =>
           <Th width="130px" isNumeric>
             <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ isLoading ? undefined : onSortToggle('balance') } columnGap={ 1 }>
               { sort?.includes('balance') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
-                Balance { config.chain.currency.symbol }
+                Balance { currencyUnits.ether }
             </Link>
           </Th>
           <Th width="130px" isNumeric>

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -7,6 +7,7 @@ import type { WatchlistAddress } from 'types/api/account';
 import config from 'configs/app';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { nbsp } from 'lib/html-entities';
+import { currencyUnits } from 'lib/units';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
@@ -37,7 +38,7 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL
           isLoading={ isLoading }
         />
         <Skeleton isLoaded={ !isLoading } whiteSpace="pre" display="inline-flex">
-          <span>{ config.chain.currency.symbol } balance: </span>
+          <span>{ currencyUnits.ether } balance: </span>
           <CurrencyValue
             value={ item.address_balance }
             exchangeRate={ item.exchange_rate }

ui/withdrawals/WithdrawalsListItem.tsx

@@ -7,6 +7,7 @@ import type { WithdrawalsItem } from 'types/api/withdrawals';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
+import { currencyUnits } from 'lib/units';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
@@ -77,7 +78,7 @@ const WithdrawalsListItem = ({ item, isLoading, view }: Props) => {
 
           <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <CurrencyValue value={ item.amount } currency={ feature.currency.symbol } isLoading={ isLoading }/>
+            <CurrencyValue value={ item.amount } currency={ currencyUnits.ether } isLoading={ isLoading }/>
           </ListItemMobileGrid.Value>
         </>
       ) }