add to balances table

components/shared/BalancesTable.tsx

@@ -10,8 +10,7 @@ import { useRouter } from 'next/router'
 import { useCallback, useMemo } from 'react'
 import {
   floorToDecimal,
-  formatDecimal,
-  formatFixedDecimals,
+  formatNumericValue,
   getDecimalCount,
   trimDecimals,
 } from 'utils/numbers'
@@ -25,6 +24,7 @@ import AmountWithValue from './AmountWithValue'
 import ConnectEmptyState from './ConnectEmptyState'
 import { useWallet } from '@solana/wallet-adapter-react'
 import Decimal from 'decimal.js'
+import FormatNumericValue from './FormatNumericValue'
 
 const BalancesTable = () => {
   const { t } = useTranslation(['common', 'trade'])
@@ -109,12 +109,14 @@ const BalancesTable = () => {
                 <Td className="text-right">
                   <Balance bank={bank} />
                   <p className="text-sm text-th-fgd-4">
-                    {mangoAccount
-                      ? `${formatFixedDecimals(
-                          mangoAccount.getTokenBalanceUi(bank) * bank.uiPrice,
-                          true
-                        )}`
-                      : '$0.00'}
+                    <FormatNumericValue
+                      value={
+                        mangoAccount
+                          ? mangoAccount.getTokenBalanceUi(bank) * bank.uiPrice
+                          : 0
+                      }
+                      isUsd
+                    />
                   </p>
                 </Td>
                 <Td className="text-right">
@@ -172,24 +174,33 @@ const BalancesTable = () => {
                 <div className="mb-0.5 flex justify-end space-x-1.5">
                   <Balance bank={bank} />
                   <span className="text-sm text-th-fgd-4">
-                    {mangoAccount
-                      ? `${formatFixedDecimals(
-                          mangoAccount.getTokenBalanceUi(bank) * bank.uiPrice,
-                          false,
-                          true
-                        )}`
-                      : '$0.00'}
+                    <FormatNumericValue
+                      value={
+                        mangoAccount
+                          ? mangoAccount.getTokenBalanceUi(bank) * bank.uiPrice
+                          : 0
+                      }
+                      isUsd
+                    />
                   </span>
                 </div>
                 <div className="flex space-x-2">
                   <p className="text-xs text-th-fgd-4">
                     {t('trade:in-orders')}:{' '}
-                    <span className="font-mono text-th-fgd-3">{inOrders}</span>
+                    <span className="font-mono text-th-fgd-3">
+                      <FormatNumericValue
+                        value={inOrders}
+                        decimals={bank.mintDecimals}
+                      />
+                    </span>
                   </p>
                   <p className="text-xs text-th-fgd-4">
                     {t('trade:unsettled')}:{' '}
                     <span className="font-mono text-th-fgd-3">
-                      {unsettled ? unsettled.toFixed(bank.mintDecimals) : 0}
+                      <FormatNumericValue
+                        value={unsettled}
+                        decimals={bank.mintDecimals}
+                      />
                     </span>
                   </p>
                 </div>
@@ -319,21 +330,21 @@ const Balance = ({ bank }: { bank: Bank }) => {
             handleTradeFormBalanceClick(Math.abs(balance), isBaseOrQuote)
           }
         >
-          {formatDecimal(balance, bank.mintDecimals)}
+          <FormatNumericValue value={balance} decimals={bank.mintDecimals} />
         </LinkButton>
       ) : asPath.includes('/swap') ? (
         <LinkButton
           className="font-normal underline-offset-4"
           onClick={() =>
             handleSwapFormBalanceClick(
-              floorToDecimal(balance, bank.mintDecimals).toNumber()
+              Number(formatNumericValue(balance, bank.mintDecimals))
             )
           }
         >
-          {formatDecimal(balance, bank.mintDecimals)}
+          <FormatNumericValue value={balance} decimals={bank.mintDecimals} />
         </LinkButton>
       ) : (
-        formatDecimal(balance, bank.mintDecimals)
+        <FormatNumericValue value={balance} decimals={bank.mintDecimals} />
       )}
     </p>
   )