Merge pull request #1051 from blockscout/withdrawals-curr

beacon network currency symbol

.env.template

@@ -77,3 +77,4 @@ NEXT_PUBLIC_L2_WITHDRAWAL_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_L2_WITHDRAWAL_URL__
 
 # beacon chain config
 NEXT_PUBLIC_HAS_BEACON_CHAIN=__PLACEHOLDER_FOR_NEXT_PUBLIC_HAS_BEACON_CHAIN__
+NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL=__PLACEHOLDER_FOR_NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL__

configs/app/config.ts

@@ -161,6 +161,7 @@ const config = Object.freeze({
   },
   beaconChain: {
     hasBeaconChain: getEnvValue(process.env.NEXT_PUBLIC_HAS_BEACON_CHAIN) === 'true',
+    currencySymbol: getEnvValue(process.env.NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL) || getEnvValue(process.env.NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL),
   },
   statsApi: {
     endpoint: getEnvValue(process.env.NEXT_PUBLIC_STATS_API_HOST),

docs/ENVS.md

@@ -170,3 +170,4 @@ In order to enable "My Account" feature you have to configure following set of v
 | Variable | Type| Description | Is required  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_HAS_BEACON_CHAIN | `boolean` | Set to true for networks with the beacon chain | - | - | `true` |
+| NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL | `string` | Beacon network currency symbol | - | NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `ETH` |

types/envs.ts

@@ -16,7 +16,6 @@ export type NextPublicEnvs = {
   NEXT_PUBLIC_NETWORK_EXPLORERS?: string;
   NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE?: 'validation' | 'mining';
   NEXT_PUBLIC_IS_TESTNET?: 'true' | '';
-  NEXT_PUBLIC_HAS_BEACON_CHAIN?: 'true' | '';
 
   // UI config
   NEXT_PUBLIC_FEATURED_NETWORKS?: string;
@@ -73,7 +72,8 @@ export type NextPublicEnvs = {
 }
 & NextPublicEnvsAccount
 & NextPublicEnvsMarketplace
-& NextPublicEnvsRollup;
+& NextPublicEnvsRollup
+& NextPublicEnvsBeacon;
 
 type NextPublicEnvsAccount =
 {
@@ -110,3 +110,13 @@ type NextPublicEnvsRollup =
   NEXT_PUBLIC_L1_BASE_URL?: undefined;
   NEXT_PUBLIC_L2_WITHDRAWAL_URL?: undefined;
 }
+
+type NextPublicEnvsBeacon =
+{
+  NEXT_PUBLIC_HAS_BEACON_CHAIN: 'true';
+  NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL?: string;
+} |
+{
+  NEXT_PUBLIC_HAS_BEACON_CHAIN?: undefined;
+  NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL?: undefined;
+}

ui/pages/Withdrawals.tsx

@@ -2,6 +2,7 @@ import { Flex, Hide, Show, Skeleton, Text } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
+import appConfig from 'configs/app/config';
 import useApiQuery from 'lib/api/useApiQuery';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -67,7 +68,7 @@ const Withdrawals = () => {
     const { valueStr } = getCurrencyValue({ value: countersQuery.data.withdrawal_sum });
     return (
       <Text mb={{ base: 6, lg: pagination.isVisible ? 0 : 6 }} lineHeight={{ base: '24px', lg: '32px' }}>
-        { BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed and { valueStr } ETH withdrawn
+        { BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed and { valueStr } { appConfig.beaconChain.currencySymbol } withdrawn
       </Text>
     );
   })();

ui/withdrawals/WithdrawalsListItem.tsx

@@ -85,7 +85,7 @@ const WithdrawalsListItem = ({ item, isLoading, view }: Props) => {
 
           <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <CurrencyValue value={ item.amount } currency={ appConfig.network.currency.symbol } isLoading={ isLoading }/>
+            <CurrencyValue value={ item.amount } currency={ appConfig.beaconChain.currencySymbol } isLoading={ isLoading }/>
           </ListItemMobileGrid.Value>
         </>
       ) }

ui/withdrawals/WithdrawalsTable.tsx

@@ -34,7 +34,7 @@ const WithdrawalsTable = ({ items, isLoading, top, view = 'list' }: Props) => {
           { view !== 'block' && <Th w="25%">Block</Th> }
           { view !== 'address' && <Th w="25%">To</Th> }
           { view !== 'block' && <Th w="25%">Age</Th> }
-          <Th w="25%">{ `Value ${ appConfig.network.currency.symbol }` }</Th>
+          <Th w="25%">{ `Value ${ appConfig.beaconChain.currencySymbol }` }</Th>
         </Tr>
       </Thead>
       <Tbody>