From ba665fd066bba82e70d67f39f7e908112a513620 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Sat, 28 Jan 2023 20:56:32 +1100
Subject: [PATCH] add new formatting functions to borrow page

---
 components/borrow/AssetsBorrowsTable.tsx | 44 +++++++++--------------
 components/borrow/BorrowPage.tsx         | 13 ++++---
 components/borrow/YourBorrowsTable.tsx   | 45 +++++++-----------------
 3 files changed, 38 insertions(+), 64 deletions(-)

diff --git a/components/borrow/AssetsBorrowsTable.tsx b/components/borrow/AssetsBorrowsTable.tsx
index 62647b28..b1bf1572 100644
--- a/components/borrow/AssetsBorrowsTable.tsx
+++ b/components/borrow/AssetsBorrowsTable.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next'
 import Image from 'next/legacy/image'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useViewport } from '../../hooks/useViewport'
-import { formatDecimal, formatFixedDecimals } from '../../utils/numbers'
+import { formatNumericValue } from '../../utils/numbers'
 import { breakpoints } from '../../utils/theme'
 import { IconButton } from '../shared/Button'
 import Tooltip from '@components/shared/Tooltip'
@@ -113,30 +113,26 @@ const AssetsBorrowsTable = () => {
                   </Td>
                   <Td>
                     <div className="flex flex-col text-right">
-                      <p>{formatFixedDecimals(borrows)}</p>
-                      <p className="text-th-fgd-4">
-                        {formatFixedDecimals(borrows * price, true, true)}
-                      </p>
+                      <AmountWithValue
+                        amount={borrows}
+                        value={borrows * price}
+                        stacked
+                      />
                     </div>
                   </Td>
                   <Td>
                     <div className="flex flex-col text-right">
-                      <p>
-                        {available > 0 ? formatFixedDecimals(available) : '0'}
-                      </p>
-                      <p className="text-th-fgd-4">
-                        {available > 0
-                          ? formatFixedDecimals(available * price, false, true)
-                          : '$0.00'}
-                      </p>
+                      <AmountWithValue
+                        amount={available}
+                        amountDecimals={bank.mintDecimals}
+                        value={available * price}
+                        stacked
+                      />
                     </div>
                   </Td>
                   <Td>
                     <p className="text-right text-th-down">
-                      {formatDecimal(bank.getBorrowRateUi(), 2, {
-                        fixed: true,
-                      })}
-                      %
+                      {formatNumericValue(bank.getBorrowRateUi(), 2)}%
                     </p>
                   </Td>
                   <Td>
@@ -198,21 +194,15 @@ const AssetsBorrowsTable = () => {
                         {t('available')}
                       </p>
                       <AmountWithValue
-                        amount={formatFixedDecimals(available)}
-                        value={formatFixedDecimals(
-                          available * price,
-                          true,
-                          true
-                        )}
+                        amount={available}
+                        amountDecimals={bank.mintDecimals}
+                        value={available * price}
                       />
                     </div>
                     <div>
                       <p className="mb-0.5 text-right text-xs">{t('rate')}</p>
                       <p className="text-right text-th-down">
-                        {formatDecimal(bank.getBorrowRateUi(), 2, {
-                          fixed: true,
-                        })}
-                        %
+                        {formatNumericValue(bank.getBorrowRateUi(), 2)}%
                       </p>
                     </div>
                     <IconButton
diff --git a/components/borrow/BorrowPage.tsx b/components/borrow/BorrowPage.tsx
index 98ec392f..135ac41c 100644
--- a/components/borrow/BorrowPage.tsx
+++ b/components/borrow/BorrowPage.tsx
@@ -8,7 +8,7 @@ import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
 import FlipNumbers from 'react-flip-numbers'
 import Button from '@components/shared/Button'
 import mangoStore from '@store/mangoStore'
-import { formatFixedDecimals } from 'utils/numbers'
+import { formatCurrencyValue } from 'utils/numbers'
 import { useEffect, useMemo, useState } from 'react'
 import YourBorrowsTable from './YourBorrowsTable'
 import AssetsBorrowsTable from './AssetsBorrowsTable'
@@ -20,6 +20,7 @@ import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
 import TabButtons from '@components/shared/TabButtons'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
+import FormatNumericValue from '@components/shared/FormatNumericValue'
 
 const BorrowPage = () => {
   const { t } = useTranslation(['common', 'borrow'])
@@ -131,7 +132,7 @@ const BorrowPage = () => {
                     play
                     delay={0.05}
                     duration={1}
-                    numbers={formatFixedDecimals(borrowValue, true, true)}
+                    numbers={formatCurrencyValue(borrowValue, 2)}
                   />
                 ) : (
                   <FlipNumbers
@@ -144,7 +145,7 @@ const BorrowPage = () => {
                   />
                 )
               ) : (
-                <span>{formatFixedDecimals(borrowValue, true, true)}</span>
+                <FormatNumericValue value={borrowValue} decimals={2} isUsd />
               )}
             </div>
           </div>
@@ -153,7 +154,11 @@ const BorrowPage = () => {
               {t('borrow:available-to-borrow')}
             </p>
             <p className="mb-1 font-display text-2xl text-th-fgd-2">
-              {formatFixedDecimals(collateralRemaining, true, true)}
+              <FormatNumericValue
+                value={collateralRemaining}
+                decimals={2}
+                isUsd
+              />
             </p>
             <div className="mt-[2px] flex h-2 w-full rounded-full bg-th-bkg-3 md:w-48">
               <div
diff --git a/components/borrow/YourBorrowsTable.tsx b/components/borrow/YourBorrowsTable.tsx
index 37449e4a..07593b69 100644
--- a/components/borrow/YourBorrowsTable.tsx
+++ b/components/borrow/YourBorrowsTable.tsx
@@ -10,7 +10,7 @@ import useMangoAccount from 'hooks/useMangoAccount'
 import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/legacy/image'
-import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
+import { formatNumericValue } from 'utils/numbers'
 import { breakpoints } from 'utils/theme'
 import { Table, Td, Th, TrBody, TrHead } from '../shared/TableElements'
 import useMangoGroup from 'hooks/useMangoGroup'
@@ -113,14 +113,9 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
                     <Td className="text-right">
                       {mangoAccount ? (
                         <AmountWithValue
-                          amount={formatDecimal(
-                            borrowedAmount,
-                            bank.mintDecimals
-                          )}
-                          value={formatFixedDecimals(
-                            borrowedAmount * bank.uiPrice,
-                            true
-                          )}
+                          amount={borrowedAmount}
+                          amountDecimals={bank.mintDecimals}
+                          value={borrowedAmount * bank.uiPrice}
                           stacked
                         />
                       ) : (
@@ -129,22 +124,14 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
                     </Td>
                     <Td className="text-right">
                       <AmountWithValue
-                        amount={formatDecimal(
-                          available.toNumber(),
-                          bank.mintDecimals
-                        )}
-                        value={formatFixedDecimals(
-                          available.toNumber() * bank.uiPrice,
-                          true
-                        )}
+                        amount={available}
+                        amountDecimals={bank.mintDecimals}
+                        value={available.toNumber() * bank.uiPrice}
                         stacked
                       />
                     </Td>
                     <Td className="text-right text-th-down">
-                      {formatDecimal(bank.getBorrowRateUi(), 2, {
-                        fixed: true,
-                      })}
-                      %
+                      {formatNumericValue(bank.getBorrowRateUi(), 2)}%
                     </Td>
                     <Td>
                       <div className="flex items-center justify-end space-x-2">
@@ -218,23 +205,15 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
                         {t('borrow:borrowed-amount')}
                       </p>
                       <AmountWithValue
-                        amount={formatDecimal(
-                          borrowedAmount,
-                          bank.mintDecimals
-                        )}
-                        value={formatFixedDecimals(
-                          borrowedAmount * bank.uiPrice,
-                          true
-                        )}
+                        amount={borrowedAmount}
+                        amountDecimals={bank.mintDecimals}
+                        value={borrowedAmount * bank.uiPrice}
                       />
                     </div>
                     <div>
                       <p className="mb-0.5 text-right text-xs">{t('rate')}</p>
                       <p className="text-right text-th-down">
-                        {formatDecimal(bank.getBorrowRateUi(), 2, {
-                          fixed: true,
-                        })}
-                        %
+                        {formatNumericValue(bank.getBorrowRateUi(), 2)}%
                       </p>
                     </div>
                     <div className="flex space-x-2">