fix rounding

ui/shared/CurrencyValue.tsx

@@ -18,13 +18,20 @@ interface Props {
 
 const CurrencyValue = ({ value, currency = '', unit, exchangeRate, className, accuracy, accuracyUsd }: Props) => {
   const valueCurr = getValueWithUnit(value, unit);
-  const valueResult = parseFloat(accuracy ? valueCurr.toFixed(accuracy) : valueCurr.toFixed());
+  const valueResult = accuracy ? valueCurr.dp(accuracy).toFormat() : valueCurr.toFormat();
 
   let usdContent;
   if (exchangeRate !== undefined && exchangeRate !== null) {
     const exchangeRateBn = new BigNumber(exchangeRate);
     const usdBn = valueCurr.times(exchangeRateBn);
-    const usdResult = parseFloat(accuracyUsd ? usdBn.toFixed(accuracyUsd) : usdBn.toFixed());
+    let usdResult: string;
+    if (accuracyUsd && !usdBn.isEqualTo(0)) {
+      const usdBnDp = usdBn.dp(accuracyUsd);
+      usdResult = usdBnDp.isEqualTo(0) ? usdBn.precision(accuracyUsd).toFormat() : usdBnDp.toFormat();
+    } else {
+      usdResult = usdBn.toFormat();
+    }
+
     usdContent = (
       <Text as="span" variant="secondary" whiteSpace="pre" fontWeight={ 400 }> (${ usdResult })</Text>
     );
@@ -32,7 +39,7 @@ const CurrencyValue = ({ value, currency = '', unit, exchangeRate, className, ac
 
   return (
     <Box as="span" className={ className }>
-      <Text as="span">
+      <Text display="inline-block">
         { valueResult }{ currency ? ` ${ currency }` : '' }
       </Text>
       { usdContent }

ui/txs/TxAdditionalInfo.tsx

@@ -57,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">{ getValueWithUnit(tx.base_fee_per_gas, 'gwei').toFixed() }</Text>
+              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.base_fee_per_gas, 'gwei').toFormat() }</Text>
             </Box>
           ) }
           { tx.max_fee_per_gas !== null && (
             <Box>
               <Text as="span" fontWeight="500">Max: </Text>
-              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_fee_per_gas, 'gwei').toFixed() }</Text>
+              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_fee_per_gas, 'gwei').toFormat() }</Text>
             </Box>
           ) }
           { tx.max_priority_fee_per_gas !== null && (
             <Box>
               <Text as="span" fontWeight="500">Max priority: </Text>
-              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_priority_fee_per_gas, 'gwei').toFixed() }</Text>
+              <Text fontWeight="600" as="span">{ getValueWithUnit(tx.max_priority_fee_per_gas, 'gwei').toFormat() }</Text>
             </Box>
           ) }
         </Box>

ui/txs/TxsListItem.tsx

@@ -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(getValueWithUnit(tx.value).toFixed()) }</Text>
+          <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).toFormat() }</Text>
         </Box>
         <Box mt={ 2 } mb={ 3 }>
           <Text as="span">Fee { appConfig.network.currency } </Text>
-          <Text as="span" variant="secondary">{ parseFloat(getValueWithUnit(tx.fee.value).toFixed()) }</Text>
+          <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).toFormat() }</Text>
         </Box>
       </Box>
       <Modal isOpen={ isOpen } onClose={ onClose } size="full">