Merge branch 'block-details-api' of github.com:blockscout/frontend into blocks-list-api

lib/block/getBlockReward.ts

-import { utils } from 'ethers';
+import BigNumber from 'bignumber.js';
 
 import type { Block } from 'types/api/block';
 
 export default function getBlockReward(block: Block) {
-  const txFees = utils.parseUnits(block.tx_fees || '0', 'wei');
-  const burntFees = utils.parseUnits(String(block.burnt_fees || '0'), 'wei');
-  const totalReward = utils.parseUnits(
-    String(
-      block.rewards?.find(({ type }) => type === 'Miner Reward' || type === 'Validator Reward')?.reward ||
-      '0',
-    ),
-    'wei',
-  );
-  const staticReward = totalReward.sub(txFees).add(burntFees);
+  const txFees = BigNumber(block.tx_fees || 0);
+  const burntFees = BigNumber(block.burnt_fees || 0);
+  const minerReward = block.rewards?.find(({ type }) => type === 'Miner Reward' || type === 'Validator Reward')?.reward;
+  const totalReward = BigNumber(minerReward || 0);
+  const staticReward = totalReward.minus(txFees).plus(burntFees);
 
   return {
     totalReward,

lib/consts.ts

-export const WEI = BigInt(10 ** 18);
-export const GWEI = BigInt(10 ** 9);
+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);

package.json

@@ -24,6 +24,7 @@
     "@tanstack/react-query": "^4.0.10",
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/react-scroll": "^1.8.4",
+    "bignumber.js": "^9.1.0",
     "dayjs": "^1.11.5",
     "ethers": "^5.7.1",
     "framer-motion": "^6",

ui/block/BlockDetails.tsx

 import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, Alert } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
-import { utils, constants } from 'ethers';
+import BigNumber from 'bignumber.js';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
@@ -10,6 +10,7 @@ import type { Block } from 'types/api/block';
 import clockIcon from 'icons/clock.svg';
 import flameIcon from 'icons/flame.svg';
 import getBlockReward from 'lib/block/getBlockReward';
+import { WEI, WEI_IN_GWEI, ZERO } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
 import type { ErrorType } from 'lib/hooks/useFetch';
 import useFetch from 'lib/hooks/useFetch';
@@ -119,7 +120,7 @@ const BlockDetails = () => {
         { /* api doesn't return the block processing time yet */ }
         { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
       </DetailsInfoItem>
-      { !totalReward.eq(constants.Zero) && (
+      { !totalReward.isEqualTo(ZERO) && (
         <DetailsInfoItem
           title="Block reward"
           hint={
@@ -128,25 +129,25 @@ const BlockDetails = () => {
           }
           columnGap={ 1 }
         >
-          <Text>{ utils.formatUnits(totalReward) } { network?.currency }</Text>
-          { (!txFees.eq(constants.Zero) || !burntFees.eq(constants.Zero)) && (
+          <Text>{ totalReward.dividedBy(WEI).toFixed() } { network?.currency }</Text>
+          { (!txFees.isEqualTo(ZERO) || !burntFees.isEqualTo(ZERO)) && (
             <Text variant="secondary" whiteSpace="break-spaces">(
               <Tooltip label="Static block reward">
-                <span>{ utils.formatUnits(staticReward) }</span>
+                <span>{ staticReward.dividedBy(WEI).toFixed() }</span>
               </Tooltip>
-              { !txFees.eq(constants.Zero) && (
+              { !txFees.isEqualTo(ZERO) && (
                 <>
                   { space }+{ space }
                   <Tooltip label="Txn fees">
-                    <span>{ utils.formatUnits(txFees) }</span>
+                    <span>{ txFees.dividedBy(WEI).toFixed() }</span>
                   </Tooltip>
                 </>
               ) }
-              { !burntFees.eq(constants.Zero) && (
+              { !burntFees.isEqualTo(ZERO) && (
                 <>
                   { space }-{ space }
                   <Tooltip label="Burnt fees">
-                    <span>{ utils.formatUnits(burntFees) }</span>
+                    <span>{ burntFees.dividedBy(WEI).toFixed() }</span>
                   </Tooltip>
                 </>
               ) }
@@ -161,12 +162,12 @@ const BlockDetails = () => {
         title="Gas used"
         hint="The total gas amount used in the block and its percentage of gas filled in the block."
       >
-        <Text>{ utils.commify(data.gas_used) }</Text>
+        <Text>{ BigNumber(data.gas_used).toFormat() }</Text>
         <Utilization
           ml={ 4 }
           mr={ 5 }
           colorScheme="gray"
-          value={ utils.parseUnits(data.gas_used).mul(10_000).div(utils.parseUnits(data.gas_limit)).toNumber() / 10_000 }
+          value={ BigNumber(data.gas_used).dividedBy(BigNumber(data.gas_limit)).toNumber() }
         />
         <GasUsedToTargetRatio value={ data.gas_target_percentage || undefined }/>
       </DetailsInfoItem>
@@ -174,16 +175,16 @@ const BlockDetails = () => {
         title="Gas limit"
         hint="Total gas limit provided by all transactions in the block."
       >
-        <Text>{ utils.commify(data.gas_limit) }</Text>
+        <Text>{ BigNumber(data.gas_limit).toFormat() }</Text>
       </DetailsInfoItem>
       { data.base_fee_per_gas && (
         <DetailsInfoItem
           title="Base fee per gas"
           hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion."
         >
-          <Text>{ utils.formatUnits(utils.parseUnits(String(data.base_fee_per_gas), 'wei')) } { network?.currency } </Text>
+          <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { network?.currency } </Text>
           <Text variant="secondary" whiteSpace="pre">
-            { space }({ utils.formatUnits(utils.parseUnits(String(data.base_fee_per_gas), 'wei'), 'gwei') } Gwei)
+            { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } Gwei)
           </Text>
         </DetailsInfoItem>
       ) }
@@ -195,18 +196,26 @@ const BlockDetails = () => {
         }
       >
         <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
-        <Text ml={ 1 }>{ utils.formatUnits(burntFees) } { network?.currency }</Text>
-        { !txFees.eq(constants.Zero) && (
+        <Text ml={ 1 }>{ burntFees.dividedBy(WEI).toFixed() } { network?.currency }</Text>
+        { !txFees.isEqualTo(ZERO) && (
           <Tooltip label="Burnt fees / Txn fees * 100%">
             <Box>
               <Utilization
                 ml={ 4 }
-                value={ burntFees.mul(10_000).div(txFees).toNumber() / 10_000 }
+                value={ burntFees.dividedBy(txFees).toNumber() }
               />
             </Box>
           </Tooltip>
         ) }
       </DetailsInfoItem>
+      { data.priority_fee && (
+        <DetailsInfoItem
+          title="Priority fee / Tip"
+          hint="User-defined tips sent to validator for transaction priority/inclusion."
+        >
+          { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { network?.currency }
+        </DetailsInfoItem>
+      ) }
       { /* api doesn't support extra data yet */ }
       { /* <DetailsInfoItem
         title="Extra data"
@@ -241,13 +250,13 @@ const BlockDetails = () => {
             title="Difficulty"
             hint="Block difficulty for miner, used to calibrate block generation time."
           >
-            { utils.commify(data.difficulty) }
+            { BigNumber(data.difficulty).toFormat() }
           </DetailsInfoItem>
           <DetailsInfoItem
             title="Total difficulty"
             hint="Total difficulty of the chain until this block."
           >
-            { utils.commify(data.total_difficulty) }
+            { BigNumber(data.total_difficulty).toFormat() }
           </DetailsInfoItem>
 
           { sectionGap }
@@ -293,7 +302,7 @@ const BlockDetails = () => {
                 title={ type }
                 hint="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees."
               >
-                { utils.formatUnits(utils.parseUnits(String(reward), 'wei')) } { network?.currency }
+                { BigNumber(reward).dividedBy(WEI).toFixed() } { network?.currency }
               </DetailsInfoItem>
             )) }
         </>

ui/pages/MarketplaceApp.tsx

@@ -25,7 +25,9 @@ const MarketplaceApp = ({ app, isLoading }: Props) => {
   const sandboxAttributeValue = 'allow-forms allow-orientation-lock ' +
         'allow-pointer-lock allow-popups-to-escape-sandbox ' +
         'allow-same-origin allow-scripts ' +
-        'allow-top-navigation-by-user-activation';
+        'allow-top-navigation-by-user-activation allow-popups';
+
+  const allowAttributeValue = 'clipboard-read; clipboard-write;';
 
   useEffect(() => {
     if (app && !isFrameLoading) {
@@ -46,6 +48,7 @@ const MarketplaceApp = ({ app, isLoading }: Props) => {
 
         { app && (
           <Box
+            allow={ allowAttributeValue }
             ref={ ref }
             sandbox={ sandboxAttributeValue }
             as="iframe"

ui/shared/CurrencyValue.tsx

 import { Box, Text, chakra } from '@chakra-ui/react';
-import { utils, constants } from 'ethers';
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
+import { WEI, GWEI } from 'lib/consts';
+
 interface Props {
   value: string;
   unit?: 'wei' | 'gwei' | 'ether';
   currency?: string;
   exchangeRate?: string;
   className?: string;
+  accuracyUsd?: number;
 }
 
-const CurrencyValue = ({ value, currency = '', unit = 'wei', exchangeRate, className }: Props) => {
-  const valueBn = utils.parseUnits(value, unit);
-  const exchangeRateBn = utils.parseUnits(exchangeRate || '0', 'ether');
-  const usdBn = valueBn.mul(exchangeRateBn).div(constants.WeiPerEther);
+const CurrencyValue = ({ value, currency = '', unit = 'wei', exchangeRate, className, accuracyUsd }: Props) => {
+  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);
+  const exchangeRateBn = new BigNumber(exchangeRate || 0);
+  const usdBn = valueCurr.times(exchangeRateBn);
 
   return (
     <Box as="span" className={ className }>
       <Text as="span">
-        { Number(utils.formatUnits(valueBn)).toLocaleString() }{ currency ? ` ${ currency }` : '' }</Text>
+        { valueCurr.toFixed() }{ currency ? ` ${ currency }` : '' }
+      </Text>
       { exchangeRate !== undefined && exchangeRate !== null &&
-        <Text as="span" variant="secondary" whiteSpace="pre" fontWeight={ 400 }> (${ utils.formatUnits(usdBn) })</Text> }
+        // TODO: mb need to implement rounding to the first significant digit
+        <Text as="span" variant="secondary" whiteSpace="pre" fontWeight={ 400 }> (${ accuracyUsd ? usdBn.toFixed(accuracyUsd) : usdBn.toFixed() })</Text>
+      }
     </Box>
   );
 };

ui/tx/TxDetails.tsx

 import { Grid, GridItem, Text, Box, Icon, Link, Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
-import { utils } from 'ethers';
+import BigNumber from 'bignumber.js';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
@@ -9,6 +9,7 @@ import type { Transaction } from 'types/api/transaction';
 
 import clockIcon from 'icons/clock.svg';
 import flameIcon from 'icons/flame.svg';
+import { WEI, WEI_IN_GWEI } from 'lib/consts';
 // import errorIcon from 'icons/status/error.svg';
 // import successIcon from 'icons/status/success.svg';
 import dayjs from 'lib/date/dayjs';
@@ -166,17 +167,17 @@ const TxDetails = () => {
         title="Gas price"
         hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage."
       >
-        <Text mr={ 1 }>{ utils.formatUnits(utils.parseUnits(String(data.gas_price), 'wei')) } { selectedNetwork?.currency }</Text>
-        <Text variant="secondary">({ Number(utils.formatUnits(utils.parseUnits(String(data.gas_price), 'wei'), 'gwei')) } Gwei)</Text>
+        <Text mr={ 1 }>{ BigNumber(data.gas_price).dividedBy(WEI).toFixed() } { selectedNetwork?.currency }</Text>
+        <Text variant="secondary">({ BigNumber(data.gas_price).dividedBy(WEI_IN_GWEI).toFixed() } Gwei)</Text>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Gas limit & usage by txn"
         hint="Actual gas amount used by the transaction."
       >
-        <Text>{ utils.commify(data.gas_used) }</Text>
+        <Text>{ BigNumber(data.gas_used).toFormat() }</Text>
         <TextSeparator/>
-        <Text >{ utils.commify(data.gas_limit) }</Text>
-        <Utilization ml={ 4 } value={ utils.parseUnits(data.gas_used).mul(10_000).div(utils.parseUnits(data.gas_limit)).toNumber() / 10_000 }/>
+        <Text >{ BigNumber(data.gas_limit).toFormat() }</Text>
+        <Utilization ml={ 4 } value={ BigNumber(data.gas_used).dividedBy(BigNumber(data.gas_limit)).toNumber() }/>
       </DetailsInfoItem>
       { (data.base_fee_per_gas || data.max_fee_per_gas || data.max_priority_fee_per_gas) && (
         <DetailsInfoItem
@@ -187,21 +188,21 @@ const TxDetails = () => {
           { data.base_fee_per_gas && (
             <Box>
               <Text as="span" fontWeight="500">Base: </Text>
-              <Text fontWeight="600" as="span">{ utils.formatUnits(utils.parseUnits(String(data.base_fee_per_gas), 'wei'), 'gwei') }</Text>
+              <Text fontWeight="600" as="span">{ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
             </Box>
           ) }
           { data.max_fee_per_gas && (
             <Box>
               <TextSeparator/>
               <Text as="span" fontWeight="500">Max: </Text>
-              <Text fontWeight="600" as="span">{ utils.formatUnits(utils.parseUnits(String(data.max_fee_per_gas), 'wei'), 'gwei') }</Text>
+              <Text fontWeight="600" as="span">{ BigNumber(data.max_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
             </Box>
           ) }
           { data.max_priority_fee_per_gas && (
             <Box>
               <TextSeparator/>
               <Text as="span" fontWeight="500">Max priority: </Text>
-              <Text fontWeight="600" as="span">{ utils.formatUnits(utils.parseUnits(String(data.max_priority_fee_per_gas), 'wei'), 'gwei') }</Text>
+              <Text fontWeight="600" as="span">{ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
             </Box>
           ) }
         </DetailsInfoItem>

yarn.lock

@@ -2460,6 +2460,11 @@ big.js@^3.1.3:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
   integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
 
+bignumber.js@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.0.tgz#8d340146107fe3a6cb8d40699643c302e8773b62"
+  integrity sha512-4LwHK4nfDOraBCtst+wOWIHbu1vhvAPJK8g8nROd4iuc3PSEjWif/qwbkh8jwCJz6yDBvtU4KPynETgrfh7y3A==
+
 bn.js@^4.11.9:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"