Block reward table fix

.env.example.kadena

@@ -52,3 +52,4 @@ NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=123456
 NEXT_PUBLIC_NETWORK_RPC_URL=https://evm-testnet.chainweb.com/chainweb/0.0/evm-testnet/${CHAINWEB_CHAIN_ID}/evm/rpc/
 
 NEXT_PUBLIC_OG_IMAGE_URL=public/static/kadena_evm_og_image.png
+NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS=[\"total_reward\"]

lib/getCurrencyValue.ts

@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js';
 
-import { ZERO } from 'toolkit/utils/consts';
+import { EXPONENT, ZERO } from 'toolkit/utils/consts';
 
 interface Params {
   value: string;
@@ -11,7 +11,7 @@ interface Params {
 }
 
 export default function getCurrencyValue({ value, accuracy, accuracyUsd, decimals, exchangeRate }: Params) {
-  const valueCurr = BigNumber(value).div(BigNumber(10 ** Number(decimals || '18')));
+  const valueCurr = BigNumber(value).div(BigNumber(10 ** Number(decimals || EXPONENT)));
   const valueResult = accuracy ? valueCurr.dp(accuracy).toFormat() : valueCurr.toFormat();
 
   let usdResult: string | undefined;

lib/web3/useAddChain.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { AddEthereumChainParameter } from 'viem';
 
 import config from 'configs/app';
-import { SECOND } from 'toolkit/utils/consts';
+import { EXPONENT, SECOND } from 'toolkit/utils/consts';
 
 import useRewardsActivity from '../hooks/useRewardsActivity';
 import useProvider from './useProvider';
@@ -19,7 +19,7 @@ function getParams(): AddEthereumChainParameter {
     nativeCurrency: {
       name: config.chain.currency.name ?? '',
       symbol: config.chain.currency.symbol ?? '',
-      decimals: config.chain.currency.decimals ?? 18,
+      decimals: config.chain.currency.decimals ?? EXPONENT,
     },
     rpcUrls: config.chain.rpcUrls,
     blockExplorerUrls: [ config.app.baseUrl ],

mocks/epochs/celo.ts

@@ -2,6 +2,8 @@ import { padStart } from 'es-toolkit/compat';
 
 import type { CeloEpochDetails, CeloEpochElectionRewardDetails, CeloEpochElectionRewardDetailsResponse, CeloEpochListResponse } from 'types/api/epochs';
 
+import { EXPONENT } from 'toolkit/utils/consts';
+
 import * as addressMock from '../address/address';
 import * as tokenMock from '../tokens/tokenInfo';
 import * as tokenTransferMock from '../tokens/tokenTransfer';
@@ -24,7 +26,7 @@ export const epoch1: CeloEpochDetails = {
       token: tokenMock.tokenInfoERC20a,
       total: {
         value: '1000000000000000000',
-        decimals: '18',
+        decimals: EXPONENT.toString(),
       },
     },
   },
@@ -87,15 +89,15 @@ export const list: CeloEpochListResponse = {
       start_block_number: 18390714,
       distribution: {
         carbon_offsetting_transfer: {
-          decimals: '18',
+          decimals: EXPONENT.toString(),
           value: '1723199576750509130678',
         },
         community_transfer: {
-          decimals: '18',
+          decimals: EXPONENT.toString(),
           value: '68927983070020365227',
         },
         transfers_total: {
-          decimals: '18',
+          decimals: EXPONENT.toString(),
           value: '1792127559820529495905',
         },
       },

mocks/noves/transaction.ts

@@ -1,5 +1,6 @@
 import type { NovesResponseData } from 'types/api/noves';
 
+import { EXPONENT } from 'toolkit/utils/consts';
 import type { TokensData } from 'ui/tx/assetFlows/utils/getTokensData';
 
 export const hash = '0x380400d04ebb4179a35b1d7fdef260776915f015e978f8587ef2704b843d4e53';
@@ -28,7 +29,7 @@ export const transaction: NovesResponseData = {
         },
         token: {
           address: '0x1bfe4298796198f8664b18a98640cec7c89b5baa',
-          decimals: 18,
+          decimals: EXPONENT,
           name: 'PQR-Test',
           symbol: 'PQR',
         },
@@ -47,7 +48,7 @@ export const transaction: NovesResponseData = {
         },
         token: {
           address: 'ETH',
-          decimals: 18,
+          decimals: EXPONENT,
           name: 'ETH',
           symbol: 'ETH',
         },
@@ -69,7 +70,7 @@ export const transaction: NovesResponseData = {
     transactionFee: {
       amount: '395521502109448',
       token: {
-        decimals: 18,
+        decimals: EXPONENT,
         symbol: 'ETH',
       },
     },

toolkit/utils/consts.ts

@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js';
 
-export const WEI = new BigNumber(10 ** 18);
+export const EXPONENT = 18;
+export const WEI = new BigNumber(10 ** EXPONENT);
 export const GWEI = new BigNumber(10 ** 9);
 export const WEI_IN_GWEI = WEI.dividedBy(GWEI);
 export const ZERO = new BigNumber(0);

ui/address/contract/methods/form/ContractMethodFieldInput.tsx

@@ -10,7 +10,7 @@ import { Field } from 'toolkit/chakra/field';
 import { Input } from 'toolkit/chakra/input';
 import { InputGroup } from 'toolkit/chakra/input-group';
 import { ClearButton } from 'toolkit/components/buttons/ClearButton';
-import { HOUR, SECOND } from 'toolkit/utils/consts';
+import { EXPONENT, HOUR, SECOND } from 'toolkit/utils/consts';
 
 import ContractMethodAddressButton from './ContractMethodAddressButton';
 import ContractMethodFieldLabel from './ContractMethodFieldLabel';
@@ -34,7 +34,7 @@ interface Props {
 const ContractMethodFieldInput = ({ data, hideLabel, path: name, className, isDisabled, isOptional: isOptionalProp, level }: Props) => {
   const ref = React.useRef<HTMLInputElement>(null);
 
-  const [ intPower, setIntPower ] = React.useState<number>(18);
+  const [ intPower, setIntPower ] = React.useState<number>(EXPONENT);
 
   const isNativeCoin = data.fieldType === 'native_coin';
   const isOptional = isOptionalProp || isNativeCoin;

ui/block/BlockDetails.tsx

@@ -345,7 +345,7 @@ const BlockDetails = ({ query }: Props) => {
         </>
       ) }
 
-      { !rollupFeature.isEnabled && !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && (
+      { !rollupFeature.isEnabled && !totalReward.isEqualTo(ZERO) && (
         <>
           <DetailedInfo.ItemLabel
             hint={

ui/block/BlockRewards.tsx

@@ -1,18 +1,15 @@
 import { chakra, Text } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 
-import useApiQuery from 'lib/api/useApiQuery';
 import { currencyUnits } from 'lib/units';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import { Hint } from 'toolkit/components/Hint/Hint';
-import { WEI, ZERO } from 'toolkit/utils/consts';
 import { space } from 'toolkit/utils/htmlEntities';
 
-import getBlockReward from '../../lib/block/getBlockReward';
 import RawDataSnippet from '../shared/RawDataSnippet';
 import type { BlockQuery } from './useBlockQuery';
+import { useKDABlockRewardsData } from './useKDABlockRewards';
 
 interface Props {
   query: BlockQuery;
@@ -21,33 +18,6 @@ interface Props {
 type MouseEnterLeaveHandler = (event: React.MouseEvent<HTMLDivElement>) => void;
 type MouseEnterLeaveLabelHandler = (event: React.MouseEvent<HTMLSpanElement>) => void;
 
-type TKDABlockRewardsData = {
-  isLoading: boolean;
-  loading: {
-    queryIsLoading: boolean;
-    withdrawalsIsLoading: boolean;
-  };
-  data: {
-    blockData?: BlockQuery['data'];
-    withdrawalsData?: { items: Array<{ amount?: string }> };
-  };
-  calculatedValues: {
-    rewardAmount: BigNumber;
-    rewardBaseFee: BigNumber;
-    txFees: BigNumber;
-    burntFees: BigNumber;
-    hasRewardBaseFee: boolean;
-    hasTxFees: boolean;
-    hasBurntFees: boolean;
-  } | null;
-  formattedValues: {
-    rewardAmount?: string;
-    rewardBaseFee?: string;
-    txFees?: string;
-    burntFees?: string;
-  };
-};
-
 interface TKDABreakdownItemProps {
   isLoading: boolean;
   onMouseEnter?: MouseEnterLeaveHandler;
@@ -116,55 +86,7 @@ const BreakdownLabel = React.forwardRef<HTMLSpanElement, BreakdownLabelProps>(({
 
 BreakdownLabel.displayName = 'BreakdownLabel';
 
-export const KDABlockRewardsData = (query: BlockQuery): TKDABlockRewardsData => {
-  const { data, isLoading: queryIsLoading } = query;
-
-  const { data: withdrawalsData, isLoading: withdrawalsIsLoading } = useApiQuery('general:block_withdrawals', {
-    queryParams: { height_or_hash: `${ data?.height }` },
-  });
-  const { totalReward, burntFees, txFees } = data ? getBlockReward(data) : { totalReward: ZERO, burntFees: ZERO, txFees: ZERO };
-
-  const calculatedValues = useMemo(() => {
-    if (!withdrawalsData?.items?.length) {
-      return null;
-    }
-
-    const [ reward ] = withdrawalsData.items;
-    const rewardAmount = BigNumber(reward.amount ?? 0);
-    const rewardBaseFee = BigNumber(rewardAmount.toNumber() - totalReward.toNumber() + burntFees.toNumber());
-
-    return {
-      rewardAmount: rewardAmount.dividedBy(WEI),
-      rewardBaseFee: rewardBaseFee.dividedBy(WEI),
-      txFees: txFees.dividedBy(WEI),
-      burntFees: burntFees.dividedBy(WEI),
-      hasRewardBaseFee: !rewardBaseFee.isEqualTo(ZERO),
-      hasTxFees: !txFees.isEqualTo(ZERO),
-      hasBurntFees: !burntFees.isEqualTo(ZERO),
-    };
-  }, [ withdrawalsData, totalReward, burntFees, txFees ]);
-
-  return {
-    isLoading: withdrawalsIsLoading || queryIsLoading,
-    loading: {
-      queryIsLoading,
-      withdrawalsIsLoading,
-    },
-    data: {
-      blockData: data,
-      withdrawalsData,
-    },
-    calculatedValues,
-    formattedValues: {
-      rewardAmount: calculatedValues?.rewardAmount ? BigNumber(calculatedValues.rewardAmount).toFixed() : undefined,
-      rewardBaseFee: calculatedValues?.rewardBaseFee ? BigNumber(calculatedValues.rewardBaseFee).toFixed() : undefined,
-      txFees: calculatedValues?.txFees ? BigNumber(calculatedValues.txFees).toFixed() : undefined,
-      burntFees: calculatedValues?.burntFees ? BigNumber(calculatedValues.burntFees).toFixed() : undefined,
-    },
-  };
-};
-
-const KDABlockRewards = ({ query /* data, txFees, burntFees, totalReward */ }: Props) => {
+const KDABlockRewards = ({ query }: Props) => {
   const blockRewardValuesRef = React.useRef<HTMLDivElement>(null);
   const blockRewardLabelRef = React.useRef<HTMLSpanElement>(null);
   const txFeesValuesRef = React.useRef<HTMLDivElement>(null);
@@ -181,7 +103,8 @@ const KDABlockRewards = ({ query /* data, txFees, burntFees, totalReward */ }: P
       txFees,
       burntFees,
     },
-  } = KDABlockRewardsData(query);
+  } = useKDABlockRewardsData(query);
+
   const {
     hasRewardBaseFee,
     hasTxFees,
@@ -260,7 +183,7 @@ const KDABlockRewards = ({ query /* data, txFees, burntFees, totalReward */ }: P
             <Text color="text.primary" fontSize="sm" display="inline" fontFamily="var(--global-font-body, var(--font-fallback))">
               <chakra.span whiteSpace="nowrap">
                 <Hint label="PoW mining reward"/>
-                Block reward
+                Mining reward
               </chakra.span>
             </Text>
           </KDABreakdownItem>

ui/block/useKDABlockRewards.tsx

@@ -0,0 +1,82 @@
+import BigNumber from 'bignumber.js';
+import { useMemo } from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { WEI, ZERO } from 'toolkit/utils/consts';
+
+import getBlockReward from '../../lib/block/getBlockReward';
+import type { BlockQuery } from './useBlockQuery';
+
+export type TKDABlockRewardsData = {
+  isLoading: boolean;
+  loading: {
+    queryIsLoading: boolean;
+    withdrawalsIsLoading: boolean;
+  };
+  data: {
+    blockData?: BlockQuery['data'];
+    withdrawalsData?: { items: Array<{ amount?: string }> };
+  } | null;
+  calculatedValues: {
+    rewardAmount: BigNumber;
+    rewardBaseFee: BigNumber;
+    txFees: BigNumber;
+    burntFees: BigNumber;
+    hasRewardBaseFee: boolean;
+    hasTxFees: boolean;
+    hasBurntFees: boolean;
+  } | null;
+  formattedValues: {
+    rewardAmount?: string;
+    rewardBaseFee?: string;
+    txFees?: string;
+    burntFees?: string;
+  };
+};
+
+export const useKDABlockRewardsData = (query: BlockQuery): TKDABlockRewardsData => {
+  const { data, isLoading: queryIsLoading } = query;
+  const { data: withdrawalsData, isLoading: withdrawalsIsLoading } = useApiQuery('general:block_withdrawals', {
+    queryParams: { height_or_hash: `${ data?.height }` },
+  });
+  const { totalReward, burntFees, txFees } = data ? getBlockReward(data) : { totalReward: ZERO, burntFees: ZERO, txFees: ZERO };
+
+  const calculatedValues = useMemo(() => {
+    if (!withdrawalsData?.items?.length) {
+      return null;
+    }
+
+    const [ reward ] = withdrawalsData.items;
+    const rewardAmount = BigNumber(reward.amount ?? 0);
+    const rewardBaseFee = BigNumber(rewardAmount.toNumber() - totalReward.toNumber() + burntFees.toNumber());
+
+    return {
+      rewardAmount: rewardAmount.dividedBy(WEI),
+      rewardBaseFee: rewardBaseFee.dividedBy(WEI),
+      txFees: txFees.dividedBy(WEI),
+      burntFees: burntFees.dividedBy(WEI),
+      hasRewardBaseFee: !rewardBaseFee.isEqualTo(ZERO),
+      hasTxFees: !txFees.isEqualTo(ZERO),
+      hasBurntFees: !burntFees.isEqualTo(ZERO),
+    };
+  }, [ withdrawalsData, totalReward, burntFees, txFees ]);
+
+  return {
+    isLoading: withdrawalsIsLoading || queryIsLoading,
+    loading: {
+      queryIsLoading,
+      withdrawalsIsLoading,
+    },
+    data: {
+      blockData: data,
+      withdrawalsData,
+    },
+    calculatedValues,
+    formattedValues: {
+      rewardAmount: calculatedValues?.rewardAmount ? BigNumber(calculatedValues.rewardAmount).toFixed() : undefined,
+      rewardBaseFee: calculatedValues?.rewardBaseFee ? BigNumber(calculatedValues.rewardBaseFee).toFixed() : undefined,
+      txFees: calculatedValues?.txFees ? BigNumber(calculatedValues.txFees).toFixed() : undefined,
+      burntFees: calculatedValues?.burntFees ? BigNumber(calculatedValues.burntFees).toFixed() : undefined,
+    },
+  };
+};