From 74660e08fb3e2fc1b77df1a15027a092bb808271 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Mon, 18 Mar 2024 11:46:52 +1100
Subject: [PATCH] component for interest rates display

---
 components/TokenList.tsx                      | 39 +++++------------
 components/explore/SpotCards.tsx              | 12 +++---
 components/explore/SpotTable.tsx              | 33 +++++---------
 components/shared/TableRatesDisplay.tsx       | 34 +++++++++++++++
 .../stats/tokens/TokenOverviewTable.tsx       | 43 +++++--------------
 components/token/ActionPanel.tsx              | 19 +++-----
 utils/numbers.ts                              |  2 +-
 7 files changed, 78 insertions(+), 104 deletions(-)
 create mode 100644 components/shared/TableRatesDisplay.tsx

diff --git a/components/TokenList.tsx b/components/TokenList.tsx
index 9f5745d3..bd2d011b 100644
--- a/components/TokenList.tsx
+++ b/components/TokenList.tsx
@@ -50,6 +50,7 @@ import { floorToDecimal } from 'utils/numbers'
 import SheenLoader from './shared/SheenLoader'
 import useAccountInterest from 'hooks/useAccountInterest'
 import { handleGoToTradePage } from 'utils/markets'
+import TableRatesDisplay from './shared/TableRatesDisplay'
 
 export const handleOpenCloseBorrowModal = (borrowBank: Bank) => {
   const group = mangoStore.getState().group
@@ -424,25 +425,10 @@ const TokenList = () => {
                     </Td>
                     <Td>
                       <div className="flex justify-end space-x-1.5">
-                        <Tooltip content={t('deposit-rate')}>
-                          <p className="cursor-help text-th-up">
-                            <FormatNumericValue
-                              value={depositRate}
-                              decimals={2}
-                            />
-                            %
-                          </p>
-                        </Tooltip>
-                        <span className="text-th-fgd-4">|</span>
-                        <Tooltip content={t('borrow-rate')}>
-                          <p className="cursor-help text-th-down">
-                            <FormatNumericValue
-                              value={borrowRate}
-                              decimals={2}
-                            />
-                            %
-                          </p>
-                        </Tooltip>
+                        <TableRatesDisplay
+                          borrowRate={borrowRate}
+                          depositRate={depositRate}
+                        />
                       </div>
                     </Td>
                     <Td>
@@ -601,15 +587,12 @@ const MobileTokenListItem = ({ data }: { data: TableData }) => {
                 </div>
                 <div className="col-span-1">
                   <p className="text-xs text-th-fgd-3">{t('rates')}</p>
-                  <p className="space-x-2 font-mono">
-                    <span className="text-th-up">
-                      <FormatNumericValue value={depositRate} decimals={2} />%
-                    </span>
-                    <span className="font-normal text-th-fgd-4">|</span>
-                    <span className="text-th-down">
-                      <FormatNumericValue value={borrowRate} decimals={2} />%
-                    </span>
-                  </p>
+                  <div className="flex space-x-1.5 font-mono">
+                    <TableRatesDisplay
+                      borrowRate={borrowRate}
+                      depositRate={depositRate}
+                    />
+                  </div>
                 </div>
                 <div className="col-span-1">
                   <ActionsMenu bank={bank} />
diff --git a/components/explore/SpotCards.tsx b/components/explore/SpotCards.tsx
index 29803fcb..8d3a2012 100644
--- a/components/explore/SpotCards.tsx
+++ b/components/explore/SpotCards.tsx
@@ -17,6 +17,7 @@ import useThemeWrapper from 'hooks/useThemeWrapper'
 import TokenReduceOnlyDesc from '@components/shared/TokenReduceOnlyDesc'
 import CollateralWeightDisplay from '@components/shared/CollateralWeightDisplay'
 import WatchlistButton from './WatchlistButton'
+import TableRatesDisplay from '@components/shared/TableRatesDisplay'
 
 const SpotCards = ({ tokens }: { tokens: BankWithMarketData[] }) => {
   const { t } = useTranslation(['common', 'explore', 'trade'])
@@ -144,13 +145,10 @@ const SpotCards = ({ tokens }: { tokens: BankWithMarketData[] }) => {
                   <p className="tooltip-underline mb-1">{t('rates')}</p>
                 </Tooltip>
                 <div className="flex space-x-1.5 font-mono">
-                  <p className="text-th-up">
-                    <FormatNumericValue value={depositRate} decimals={2} />%
-                  </p>
-                  <span className="text-th-fgd-4">|</span>
-                  <p className="text-th-down">
-                    <FormatNumericValue value={borrowRate} decimals={2} />%
-                  </p>
+                  <TableRatesDisplay
+                    borrowRate={borrowRate}
+                    depositRate={depositRate}
+                  />
                 </div>
               </div>
               <Button
diff --git a/components/explore/SpotTable.tsx b/components/explore/SpotTable.tsx
index 43726eb7..83d91570 100644
--- a/components/explore/SpotTable.tsx
+++ b/components/explore/SpotTable.tsx
@@ -37,6 +37,7 @@ import CollateralWeightDisplay from '@components/shared/CollateralWeightDisplay'
 import WatchlistButton from './WatchlistButton'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { TOKEN_WATCHLIST_KEY } from 'utils/constants'
+import TableRatesDisplay from '@components/shared/TableRatesDisplay'
 
 type TableData = {
   assetWeight: string
@@ -365,21 +366,10 @@ const SpotTable = ({ tokens }: { tokens: BankWithMarketData[] }) => {
                         </Td>
                         <Td>
                           <div className="flex justify-end space-x-1.5">
-                            <p className="text-th-up">
-                              <FormatNumericValue
-                                value={depositRate}
-                                decimals={2}
-                              />
-                              %
-                            </p>
-                            <span className="text-th-fgd-4">|</span>
-                            <p className="text-th-down">
-                              <FormatNumericValue
-                                value={borrowRate}
-                                decimals={2}
-                              />
-                              %
-                            </p>
+                            <TableRatesDisplay
+                              borrowRate={borrowRate}
+                              depositRate={depositRate}
+                            />
                           </div>
                         </Td>
                         <Td>
@@ -547,14 +537,11 @@ const MobileSpotItem = ({ data }: { data: TableData }) => {
                 </div>
                 <div className="col-span-1">
                   <p className="text-xs text-th-fgd-3">{t('rates')}</p>
-                  <div className="flex space-x-1.5">
-                    <p className="font-mono text-th-up">
-                      <FormatNumericValue value={depositRate} decimals={2} />%
-                    </p>
-                    <span className="text-th-fgd-4">|</span>
-                    <p className="font-mono text-th-down">
-                      <FormatNumericValue value={borrowRate} decimals={2} />%
-                    </p>
+                  <div className="flex space-x-1.5 font-mono">
+                    <TableRatesDisplay
+                      borrowRate={borrowRate}
+                      depositRate={depositRate}
+                    />
                   </div>
                 </div>
                 <div className="col-span-1">
diff --git a/components/shared/TableRatesDisplay.tsx b/components/shared/TableRatesDisplay.tsx
new file mode 100644
index 00000000..5bc478be
--- /dev/null
+++ b/components/shared/TableRatesDisplay.tsx
@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next'
+import FormatNumericValue from './FormatNumericValue'
+import Tooltip from './Tooltip'
+
+const TableRatesDisplay = ({
+  borrowRate,
+  depositRate,
+}: {
+  borrowRate: number
+  depositRate: number
+}) => {
+  const { t } = useTranslation('common')
+  return (
+    <>
+      <Tooltip content={t('deposit-rate')}>
+        <p
+          className={`cursor-help ${
+            !depositRate || depositRate < 0.01 ? 'text-th-fgd-4' : 'text-th-up'
+          }`}
+        >
+          <FormatNumericValue value={depositRate || 0} decimals={2} />%
+        </p>
+      </Tooltip>
+      <span className="text-th-fgd-4">|</span>
+      <Tooltip content={t('borrow-rate')}>
+        <p className="cursor-help text-th-down">
+          <FormatNumericValue value={borrowRate || 0} decimals={2} />%
+        </p>
+      </Tooltip>
+    </>
+  )
+}
+
+export default TableRatesDisplay
diff --git a/components/stats/tokens/TokenOverviewTable.tsx b/components/stats/tokens/TokenOverviewTable.tsx
index b951eb9a..933f0886 100644
--- a/components/stats/tokens/TokenOverviewTable.tsx
+++ b/components/stats/tokens/TokenOverviewTable.tsx
@@ -17,7 +17,6 @@ import {
   TrHead,
 } from '@components/shared/TableElements'
 import useMangoGroup from 'hooks/useMangoGroup'
-import FormatNumericValue from '@components/shared/FormatNumericValue'
 import BankAmountWithValue from '@components/shared/BankAmountWithValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import Decimal from 'decimal.js'
@@ -25,6 +24,7 @@ import { useCallback } from 'react'
 import { useSortableData } from 'hooks/useSortableData'
 import TableTokenName from '@components/shared/TableTokenName'
 import { formatTokenSymbol } from 'utils/tokens'
+import TableRatesDisplay from '@components/shared/TableRatesDisplay'
 
 export const goToTokenPage = (token: string, router: NextRouter) => {
   const query = { ...router.query, ['token']: token }
@@ -253,18 +253,10 @@ const TokenOverviewTable = () => {
                     </Td>
                     <Td>
                       <div className="flex justify-end space-x-1.5">
-                        <p className="text-th-up">
-                          <FormatNumericValue
-                            value={depositRate}
-                            decimals={2}
-                          />
-                          %
-                        </p>
-                        <span className="text-th-fgd-4">|</span>
-                        <p className="text-th-down">
-                          <FormatNumericValue value={borrowRate} decimals={2} />
-                          %
-                        </p>
+                        <TableRatesDisplay
+                          borrowRate={borrowRate}
+                          depositRate={depositRate}
+                        />
                       </div>
                     </Td>
                     <Td>
@@ -369,25 +361,12 @@ const TokenOverviewTable = () => {
                           </div>
                           <div className="col-span-1">
                             <p className="text-xs">{t('rates')}</p>
-                            <p className="space-x-2">
-                              <span className="font-mono text-th-up">
-                                <FormatNumericValue
-                                  value={depositRate}
-                                  decimals={2}
-                                />
-                                %
-                              </span>
-                              <span className="font-normal text-th-fgd-4">
-                                |
-                              </span>
-                              <span className="font-mono text-th-down">
-                                <FormatNumericValue
-                                  value={borrowRate}
-                                  decimals={2}
-                                />
-                                %
-                              </span>
-                            </p>
+                            <div className="flex space-x-1.5 font-mono">
+                              <TableRatesDisplay
+                                borrowRate={borrowRate}
+                                depositRate={depositRate}
+                              />
+                            </div>
                           </div>
                           <div className="col-span-1">
                             <p className="text-xs">{t('utilization')}</p>
diff --git a/components/token/ActionPanel.tsx b/components/token/ActionPanel.tsx
index 30224023..8693a0a3 100644
--- a/components/token/ActionPanel.tsx
+++ b/components/token/ActionPanel.tsx
@@ -3,7 +3,7 @@ import DepositWithdrawModal from '@components/modals/DepositWithdrawModal'
 import Button, { LinkButton } from '@components/shared/Button'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
 import Modal from '@components/shared/Modal'
-import Tooltip from '@components/shared/Tooltip'
+import TableRatesDisplay from '@components/shared/TableRatesDisplay'
 import UnsettledTrades from '@components/trade/UnsettledTrades'
 import { ArrowDownTrayIcon, ArrowUpTrayIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
@@ -148,18 +148,11 @@ const ActionPanel = ({ bank }: { bank: Bank }) => {
           </div>
           <div className="flex justify-between border-t border-th-bkg-4 py-3">
             <p>{t('rates')}</p>
-            <div className="flex justify-end space-x-1.5">
-              <Tooltip content={t('deposit-rate')}>
-                <p className="cursor-help font-mono text-th-up">
-                  <FormatNumericValue value={depositRate} decimals={2} />%
-                </p>
-              </Tooltip>
-              <span className="text-th-fgd-4">|</span>
-              <Tooltip content={t('borrow-rate')}>
-                <p className="cursor-help font-mono text-th-down">
-                  <FormatNumericValue value={borrowRate} decimals={2} />%
-                </p>
-              </Tooltip>
+            <div className="flex justify-end space-x-1.5 font-mono">
+              <TableRatesDisplay
+                borrowRate={borrowRate}
+                depositRate={depositRate}
+              />
             </div>
           </div>
         </div>
diff --git a/utils/numbers.ts b/utils/numbers.ts
index 6774404a..73d99376 100644
--- a/utils/numbers.ts
+++ b/utils/numbers.ts
@@ -5,7 +5,7 @@ export const formatNumericValue = (
   decimals?: number,
   roundUp?: boolean,
 ): string => {
-  if (!value) return '–'
+  if (!value && value !== 0) return '–'
   const numberValue = Number(value)
   let formattedValue
   if (decimals !== undefined) {