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

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

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/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"