Merge pull request #229 from blockscout/bigint

bignumber

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

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

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"