fix

lib/bigint/divideBns.ts

-import BigNumber from 'bignumber.js';
-
-export default function divideBns(dividend: string | number, divisor: string | number, accuracy?: number) {
-  const dividendBn = new BigNumber(dividend);
-  const divisorBn = new BigNumber(divisor);
-  const result = dividendBn.dividedBy(divisorBn);
-  let numResult: string;
-  if (accuracy) {
-    numResult = result.toFixed(accuracy);
-  }
-  numResult = result.toFixed();
-
-  return parseFloat(numResult);
-}

lib/tx/getValue.tsx → lib/getValueWithUnit.tsx

@@ -2,7 +2,7 @@ import BigNumber from 'bignumber.js';
 
 import { WEI, GWEI } from 'lib/consts';
 
-export default function getValue(value: string | number, unit: 'wei' | 'gwei' | 'ether' = 'wei') {
+export default function getValueWithUnit(value: string | number, unit: 'wei' | 'gwei' | 'ether' = 'wei') {
   let unitBn: BigNumber.Value;
   switch (unit) {
     case 'wei':

ui/shared/CurrencyValue.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import type { Unit } from 'types/unit';
 
-import getValue from 'lib/tx/getValue';
+import getValueWithUnit from 'lib/getValueWithUnit';
 
 interface Props {
   value: string;
@@ -17,7 +17,7 @@ interface Props {
 }
 
 const CurrencyValue = ({ value, currency = '', unit, exchangeRate, className, accuracy, accuracyUsd }: Props) => {
-  const valueCurr = getValue(value, unit);
+  const valueCurr = getValueWithUnit(value, unit);
   const valueResult = parseFloat(accuracy ? valueCurr.toFixed(accuracy) : valueCurr.toFixed());
 
   let usdContent;

ui/txs/TxAdditionalInfo.tsx

@@ -5,9 +5,8 @@ import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
 
-import divideBns from 'lib/bigint/divideBns';
+import getValueWithUnit from 'lib/getValueWithUnit';
 import link from 'lib/link/link';
-import getValue from 'lib/tx/getValue';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import TextSeparator from 'ui/shared/TextSeparator';
 import Utilization from 'ui/shared/Utilization';
@@ -48,7 +47,7 @@ const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
             <Text>{ BigNumber(tx.gas_used).toFormat() }</Text>
             <TextSeparator/>
             <Text>{ BigNumber(tx.gas_limit).toFormat() }</Text>
-            <Utilization ml={ 4 } value={ Number(divideBns(tx.gas_used, tx.gas_limit, 2)) }/>
+            <Utilization ml={ 4 } value={ Number(BigNumber(tx.gas_used).dividedBy(BigNumber(tx.gas_limit)).toFixed(2)) }/>
           </Flex>
         </Box>
       ) }
@@ -58,19 +57,19 @@ const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
           { tx.base_fee_per_gas !== null && (
             <Box>
               <Text as="span" fontWeight="500">Base: </Text>
-              <Text fontWeight="600" as="span">{ getValue(tx.base_fee_per_gas, 'gwei').toFixed() }</Text>
+              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.base_fee_per_gas, 'gwei').toFixed() }</Text>
             </Box>
           ) }
           { tx.max_fee_per_gas !== null && (
             <Box>
               <Text as="span" fontWeight="500">Max: </Text>
-              <Text fontWeight="600" as="span">{ getValue(tx.max_fee_per_gas, 'gwei').toFixed() }</Text>
+              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_fee_per_gas, 'gwei').toFixed() }</Text>
             </Box>
           ) }
           { tx.max_priority_fee_per_gas !== null && (
             <Box>
               <Text as="span" fontWeight="500">Max priority: </Text>
-              <Text fontWeight="600" as="span">{ getValue(tx.max_priority_fee_per_gas, 'gwei').toFixed() }</Text>
+              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_priority_fee_per_gas, 'gwei').toFixed() }</Text>
             </Box>
           ) }
         </Box>

ui/txs/TxsListItem.tsx

@@ -18,8 +18,8 @@ import type { Transaction } from 'types/api/transaction';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import transactionIcon from 'icons/transactions.svg';
 import dayjs from 'lib/date/dayjs';
+import getValueWithUnit from 'lib/getValueWithUnit';
 import link from 'lib/link/link';
-import getValue from 'lib/tx/getValue';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -113,11 +113,11 @@ const TxsListItem = ({ tx }: {tx: Transaction}) => {
         </Flex>
         <Box mt={ 2 }>
           <Text as="span">Value { appConfig.network.currency } </Text>
-          <Text as="span" variant="secondary">{ parseFloat(getValue(tx.value).toFixed()) }</Text>
+          <Text as="span" variant="secondary">{ parseFloat(getValueWithUnit(tx.value).toFixed()) }</Text>
         </Box>
         <Box mt={ 2 } mb={ 3 }>
           <Text as="span">Fee { appConfig.network.currency } </Text>
-          <Text as="span" variant="secondary">{ parseFloat(getValue(tx.fee.value).toFixed()) }</Text>
+          <Text as="span" variant="secondary">{ parseFloat(getValueWithUnit(tx.fee.value).toFixed()) }</Text>
         </Box>
       </Box>
       <Modal isOpen={ isOpen } onClose={ onClose } size="full">

ui/txs/TxsSkeletonDesktop.tsx

@@ -11,7 +11,7 @@ const TxsInternalsSkeletonDesktop = ({ isPending }: {isPending?: boolean}) => {
         <Skeleton w="78px"/>
         <Skeleton w="360px"/>
       </Flex>
-      <SkeletonTable columns={ [ '20%', '20%', '20%', '20%', '20%' ] }/>
+      <SkeletonTable columns={ [ '32px', '20%', '18%', '15%', '11%', '292px', '18%', '18%' ] }/>
     </>
   );
 };