add collateral value to balance tables

components/TokenList.tsx

@@ -32,6 +32,7 @@ import useBanksWithBalances, {
 import useUnownedAccount from 'hooks/useUnownedAccount'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import TokenLogo from './shared/TokenLogo'
+import useHealthContributions from 'hooks/useHealthContributions'
 
 const TokenList = () => {
   const { t } = useTranslation(['common', 'token', 'trade'])
@@ -40,6 +41,7 @@ const TokenList = () => {
     true
   )
   const { mangoAccount, mangoAccountAddress } = useMangoAccount()
+  const { initContributions } = useHealthContributions()
   const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
   const totalInterestData = mangoStore(
     (s) => s.mangoAccount.interestTotals.data
@@ -48,14 +50,26 @@ const TokenList = () => {
   const showTableView = width ? width > breakpoints.md : false
   const banks = useBanksWithBalances('balance')
 
+  // const filteredBanks = useMemo(() => {
+  //   if (banks.length) {
+  //     return showZeroBalances || !mangoAccountAddress
+  //       ? banks
+  //       : banks.filter((b) => Math.abs(b.balance) > 0)
+  //   }
+  //   return []
+  // }, [banks, mangoAccountAddress, showZeroBalances])
+
   const filteredBanks = useMemo(() => {
-    if (banks.length) {
+    if (!banks.length) return []
-      return showZeroBalances || !mangoAccountAddress
+    if (showZeroBalances || !mangoAccountAddress) return banks
-        ? banks
+    const filtered = banks.filter((b) => {
-        : banks.filter((b) => Math.abs(b.balance) > 0)
+      const contribution =
-    }
+        initContributions.find((cont) => cont.asset === b.bank.name)
-    return []
+          ?.contribution || 0
-  }, [banks, mangoAccountAddress, showZeroBalances])
+      return Math.abs(contribution) > 0
+    })
+    return filtered
+  }, [banks, mangoAccountAddress, showZeroBalances, initContributions])
 
   return (
     <ContentBox hideBorder hidePadding>
@@ -66,141 +80,174 @@ const TokenList = () => {
             disabled={!mangoAccount}
             onChange={() => setShowZeroBalances(!showZeroBalances)}
           >
-            {t('show-zero-balances')}
+            {t('account:zero-collateral')}
           </Switch>
         </div>
       ) : null}
       {showTableView ? (
-        <Table>
+        <div className="thin-scroll overflow-x-auto">
-          <thead>
+          <Table>
-            <TrHead>
+            <thead>
-              <Th className="text-left">{t('token')}</Th>
+              <TrHead>
-              <Th>
+                <Th className="text-left">{t('token')}</Th>
-                <div className="flex justify-end">
+                <Th>
-                  <Tooltip content="A negative balance represents a borrow">
+                  <div className="flex justify-end">
-                    <span className="tooltip-underline">{t('balance')}</span>
+                    <Tooltip content="A negative balance represents a borrow">
+                      <span className="tooltip-underline">{t('balance')}</span>
+                    </Tooltip>
+                  </div>
+                </Th>
+                <Th>
+                  <div className="flex justify-end">
+                    <Tooltip content={t('account:tooltip-collateral-value')}>
+                      <span className="tooltip-underline">
+                        {t('account:collateral-value')}
+                      </span>
+                    </Tooltip>
+                  </div>
+                </Th>
+                <Th className="text-right">{t('trade:in-orders')}</Th>
+                <Th className="text-right">{t('trade:unsettled')}</Th>
+                <Th className="flex justify-end" id="account-step-nine">
+                  <Tooltip content="The sum of interest earned and interest paid for each token">
+                    <span className="tooltip-underline">
+                      {t('interest-earned-paid')}
+                    </span>
                   </Tooltip>
-                </div>
+                </Th>
-              </Th>
+                <Th id="account-step-ten">
-              <Th className="text-right">{t('trade:in-orders')}</Th>
+                  <div className="flex justify-end">
-              <Th className="text-right">{t('trade:unsettled')}</Th>
+                    <Tooltip content="The interest rates for depositing (green/left) and borrowing (red/right)">
-              <Th className="flex justify-end" id="account-step-nine">
+                      <span className="tooltip-underline">{t('rates')}</span>
-                <Tooltip content="The sum of interest earned and interest paid for each token">
+                    </Tooltip>
-                  <span className="tooltip-underline">
+                  </div>
-                    {t('interest-earned-paid')}
+                </Th>
-                  </span>
+                <Th className="text-right">
-                </Tooltip>
+                  <span>{t('actions')}</span>
-              </Th>
+                </Th>
-              <Th id="account-step-ten">
+              </TrHead>
-                <div className="flex justify-end">
+            </thead>
-                  <Tooltip content="The interest rates for depositing (green/left) and borrowing (red/right)">
+            <tbody>
-                    <span className="tooltip-underline">{t('rates')}</span>
+              {filteredBanks.map((b) => {
-                  </Tooltip>
+                const bank = b.bank
-                </div>
-              </Th>
-              <Th className="text-right">
-                <span>{t('actions')}</span>
-              </Th>
-            </TrHead>
-          </thead>
-          <tbody>
-            {filteredBanks.map((b) => {
-              const bank = b.bank
 
-              const tokenBalance = b.balance
+                const tokenBalance = b.balance
-              const symbol = bank.name === 'MSOL' ? 'mSOL' : bank.name
+                const symbol = bank.name === 'MSOL' ? 'mSOL' : bank.name
 
-              const hasInterestEarned = totalInterestData.find(
+                const hasInterestEarned = totalInterestData.find(
-                (d) =>
+                  (d) =>
-                  d.symbol.toLowerCase() === symbol.toLowerCase() ||
+                    d.symbol.toLowerCase() === symbol.toLowerCase() ||
-                  (symbol === 'ETH (Portal)' && d.symbol === 'ETH')
+                    (symbol === 'ETH (Portal)' && d.symbol === 'ETH')
-              )
+                )
 
-              const interestAmount = hasInterestEarned
+                const interestAmount = hasInterestEarned
-                ? hasInterestEarned.borrow_interest * -1 +
+                  ? hasInterestEarned.borrow_interest * -1 +
-                  hasInterestEarned.deposit_interest
+                    hasInterestEarned.deposit_interest
-                : 0
+                  : 0
 
-              const interestValue = hasInterestEarned
+                const interestValue = hasInterestEarned
-                ? hasInterestEarned.borrow_interest_usd * -1 +
+                  ? hasInterestEarned.borrow_interest_usd * -1 +
-                  hasInterestEarned.deposit_interest_usd
+                    hasInterestEarned.deposit_interest_usd
-                : 0.0
+                  : 0.0
 
-              const inOrders = spotBalances[bank.mint.toString()]?.inOrders || 0
+                const inOrders =
+                  spotBalances[bank.mint.toString()]?.inOrders || 0
 
-              const unsettled =
+                const unsettled =
-                spotBalances[bank.mint.toString()]?.unsettled || 0
+                  spotBalances[bank.mint.toString()]?.unsettled || 0
 
-              return (
+                const collateralValue =
-                <TrBody key={bank.name}>
+                  initContributions.find((val) => val.asset === bank.name)
-                  <Td>
+                    ?.contribution || 0
-                    <div className="flex items-center">
+
-                      <div className="mr-2.5 flex flex-shrink-0 items-center">
+                const assetWeight = bank.initAssetWeight.toNumber()
-                        <TokenLogo bank={bank} />
+                const liabWeight = bank.initLiabWeight.toNumber()
+
+                return (
+                  <TrBody key={bank.name}>
+                    <Td>
+                      <div className="flex items-center">
+                        <div className="mr-2.5 flex flex-shrink-0 items-center">
+                          <TokenLogo bank={bank} />
+                        </div>
+                        <p className="font-body">{symbol}</p>
                       </div>
-                      <p className="font-body">{symbol}</p>
+                    </Td>
-                    </div>
+                    <Td className="text-right">
-                  </Td>
-                  <Td className="text-right">
-                    <BankAmountWithValue
-                      amount={tokenBalance}
-                      bank={bank}
-                      stacked
-                    />
-                  </Td>
-                  <Td className="text-right">
-                    <BankAmountWithValue
-                      amount={inOrders}
-                      bank={bank}
-                      stacked
-                    />
-                  </Td>
-                  <Td className="text-right">
-                    <BankAmountWithValue
-                      amount={unsettled}
-                      bank={bank}
-                      stacked
-                    />
-                  </Td>
-                  <Td>
-                    <div className="flex flex-col text-right">
                       <BankAmountWithValue
-                        amount={interestAmount}
+                        amount={tokenBalance}
                         bank={bank}
-                        value={interestValue}
                         stacked
                       />
-                    </div>
+                    </Td>
-                  </Td>
+                    <Td className="text-right">
-                  <Td>
+                      <p>
-                    <div className="flex justify-end space-x-1.5">
+                        <FormatNumericValue value={collateralValue} isUsd />
-                      <p className="text-th-up">
+                      </p>
+                      <p className="text-sm text-th-fgd-4">
                         <FormatNumericValue
-                          value={bank.getDepositRateUi()}
+                          value={
+                            collateralValue >= 0 ? assetWeight : liabWeight
+                          }
                           decimals={2}
                         />
-                        %
+                        x
                       </p>
-                      <span className="text-th-fgd-4">|</span>
+                    </Td>
-                      <p className="text-th-down">
+                    <Td className="text-right">
-                        <FormatNumericValue
+                      <BankAmountWithValue
-                          value={bank.getBorrowRateUi()}
+                        amount={inOrders}
-                          decimals={2}
+                        bank={bank}
+                        stacked
+                      />
+                    </Td>
+                    <Td className="text-right">
+                      <BankAmountWithValue
+                        amount={unsettled}
+                        bank={bank}
+                        stacked
+                      />
+                    </Td>
+                    <Td>
+                      <div className="flex flex-col text-right">
+                        <BankAmountWithValue
+                          amount={interestAmount}
+                          bank={bank}
+                          value={interestValue}
+                          stacked
                         />
-                        %
+                      </div>
-                      </p>
+                    </Td>
-                    </div>
+                    <Td>
-                  </Td>
+                      <div className="flex justify-end space-x-1.5">
-                  <Td>
+                        <p className="text-th-up">
-                    <div className="flex items-center justify-end">
+                          <FormatNumericValue
-                      <ActionsMenu bank={bank} mangoAccount={mangoAccount} />
+                            value={bank.getDepositRateUi()}
-                    </div>
+                            decimals={2}
-                  </Td>
+                          />
-                </TrBody>
+                          %
-              )
+                        </p>
-            })}
+                        <span className="text-th-fgd-4">|</span>
-          </tbody>
+                        <p className="text-th-down">
-        </Table>
+                          <FormatNumericValue
+                            value={bank.getBorrowRateUi()}
+                            decimals={2}
+                          />
+                          %
+                        </p>
+                      </div>
+                    </Td>
+                    <Td>
+                      <div className="flex items-center justify-end">
+                        <ActionsMenu bank={bank} mangoAccount={mangoAccount} />
+                      </div>
+                    </Td>
+                  </TrBody>
+                )
+              })}
+            </tbody>
+          </Table>
+        </div>
       ) : (
         <div className="border-b border-th-bkg-3">
           {filteredBanks.map((b) => {
@@ -218,6 +265,7 @@ const MobileTokenListItem = ({ bank }: { bank: BankWithBalance }) => {
   const { t } = useTranslation(['common', 'token'])
   const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
   const { mangoAccount } = useMangoAccount()
+  const { initContributions } = useHealthContributions()
   const totalInterestData = mangoStore(
     (s) => s.mangoAccount.interestTotals.data
   )
@@ -247,6 +295,13 @@ const MobileTokenListItem = ({ bank }: { bank: BankWithBalance }) => {
 
   const unsettled = spotBalances[mint.toString()]?.unsettled || 0
 
+  const collateralValue =
+    initContributions.find((val) => val.asset === tokenBank.name)
+      ?.contribution || 0
+
+  const assetWeight = tokenBank.initAssetWeight.toNumber()
+  const liabWeight = tokenBank.initLiabWeight.toNumber()
+
   return (
     <Disclosure>
       {({ open }) => (
@@ -296,6 +351,24 @@ const MobileTokenListItem = ({ bank }: { bank: BankWithBalance }) => {
           >
             <Disclosure.Panel>
               <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                <div className="col-span-1">
+                  <Tooltip content={t('account:tooltip-collateral-value')}>
+                    <p className="tooltip-underline text-xs text-th-fgd-3">
+                      {t('account:collateral-value')}
+                    </p>
+                  </Tooltip>
+                  <p className="font-mono text-th-fgd-2">
+                    <FormatNumericValue value={collateralValue} isUsd />
+                    <span className="text-th-fgd-3">
+                      {' '}
+                      <FormatNumericValue
+                        value={collateralValue >= 0 ? assetWeight : liabWeight}
+                        decimals={2}
+                      />
+                      x
+                    </span>
+                  </p>
+                </div>
                 <div className="col-span-1">
                   <p className="text-xs text-th-fgd-3">
                     {t('trade:in-orders')}

components/shared/BalancesTable.tsx

@@ -26,15 +26,18 @@ import useBanksWithBalances, {
 import useUnownedAccount from 'hooks/useUnownedAccount'
 import { Disclosure, Transition } from '@headlessui/react'
 import TokenLogo from './TokenLogo'
+import useHealthContributions from 'hooks/useHealthContributions'
+import Tooltip from './Tooltip'
 
 const BalancesTable = () => {
-  const { t } = useTranslation(['common', 'trade'])
+  const { t } = useTranslation(['common', 'account', 'trade'])
   const { mangoAccount, mangoAccountAddress } = useMangoAccount()
   const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
   const { width } = useViewport()
   const { connected } = useWallet()
   const showTableView = width ? width > breakpoints.md : false
   const banks = useBanksWithBalances('balance')
+  const { initContributions } = useHealthContributions()
 
   const filteredBanks = useMemo(() => {
     if (banks.length) {
@@ -57,6 +60,15 @@ const BalancesTable = () => {
           <TrHead>
             <Th className="bg-th-bkg-1 text-left">{t('token')}</Th>
             <Th className="bg-th-bkg-1 text-right">{t('balance')}</Th>
+            <Th>
+              <div className="flex justify-end">
+                <Tooltip content={t('account:tooltip-collateral-value')}>
+                  <span className="tooltip-underline">
+                    {t('account:collateral-value')}
+                  </span>
+                </Tooltip>
+              </div>
+            </Th>
             <Th className="bg-th-bkg-1 text-right">{t('trade:in-orders')}</Th>
             <Th className="bg-th-bkg-1 text-right" id="trade-step-ten">
               {t('trade:unsettled')}
@@ -71,6 +83,13 @@ const BalancesTable = () => {
             const inOrders = spotBalances[bank.mint.toString()]?.inOrders || 0
             const unsettled = spotBalances[bank.mint.toString()]?.unsettled || 0
 
+            const collateralValue =
+              initContributions.find((val) => val.asset === bank.name)
+                ?.contribution || 0
+
+            const assetWeight = bank.initAssetWeight.toNumber()
+            const liabWeight = bank.initLiabWeight.toNumber()
+
             return (
               <TrBody key={bank.name} className="text-sm">
                 <Td>
@@ -90,6 +109,18 @@ const BalancesTable = () => {
                     />
                   </p>
                 </Td>
+                <Td className="text-right">
+                  <p>
+                    <FormatNumericValue value={collateralValue} isUsd />
+                  </p>
+                  <p className="text-sm text-th-fgd-4">
+                    <FormatNumericValue
+                      value={collateralValue >= 0 ? assetWeight : liabWeight}
+                      decimals={2}
+                    />
+                    x
+                  </p>
+                </Td>
                 <Td className="text-right">
                   <BankAmountWithValue amount={inOrders} bank={bank} stacked />
                 </Td>
@@ -110,6 +141,13 @@ const BalancesTable = () => {
           const inOrders = spotBalances[bank.mint.toString()]?.inOrders || 0
           const unsettled = spotBalances[bank.mint.toString()]?.unsettled || 0
 
+          const collateralValue =
+            initContributions.find((val) => val.asset === bank.name)
+              ?.contribution || 0
+
+          const assetWeight = bank.initAssetWeight.toNumber()
+          const liabWeight = bank.initLiabWeight.toNumber()
+
           return (
             <Disclosure key={bank.name}>
               {({ open }) => (
@@ -153,6 +191,30 @@ const BalancesTable = () => {
                   >
                     <Disclosure.Panel>
                       <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                        <div className="col-span-1">
+                          <Tooltip
+                            content={t('account:tooltip-collateral-value')}
+                          >
+                            <p className="tooltip-underline text-xs text-th-fgd-3">
+                              {t('account:collateral-value')}
+                            </p>
+                          </Tooltip>
+                          <p className="font-mono text-th-fgd-2">
+                            <FormatNumericValue value={collateralValue} isUsd />
+                            <span className="text-th-fgd-3">
+                              {' '}
+                              <FormatNumericValue
+                                value={
+                                  collateralValue >= 0
+                                    ? assetWeight
+                                    : liabWeight
+                                }
+                                decimals={2}
+                              />
+                              x
+                            </span>
+                          </p>
+                        </div>
                         <div className="col-span-1">
                           <p className="text-xs text-th-fgd-3">
                             {t('trade:in-orders')}

hooks/useHealthContributions.ts

@@ -0,0 +1,24 @@
+import { HealthType } from '@blockworks-foundation/mango-v4'
+import mangoStore from '@store/mangoStore'
+import { useMemo } from 'react'
+import useMangoAccount from './useMangoAccount'
+
+export default function useHealthContributions() {
+  const { mangoAccount } = useMangoAccount()
+
+  const [initContributions, maintContributions] = useMemo(() => {
+    const group = mangoStore.getState().group
+    if (!mangoAccount || !group) return [[], []]
+    const init = mangoAccount.getHealthContributionPerAssetUi(
+      group,
+      HealthType.init
+    )
+    const maint = mangoAccount.getHealthContributionPerAssetUi(
+      group,
+      HealthType.maint
+    )
+    return [init, maint]
+  }, [mangoAccount])
+
+  return { initContributions, maintContributions }
+}

public/locales/en/account.json

@@ -1,6 +1,7 @@
 {
     "assets": "Assets",
     "assets-liabilities": "Assets & Liabilities",
+    "collateral-value": "Collateral Value",
     "cumulative-interest-chart": "Cumulative Interst Chart",
     "daily-volume": "24h Volume",
     "export": "Export {{dataType}}",
@@ -11,6 +12,7 @@
     "no-pnl-history": "No PnL History",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",
+    "tooltip-collateral-value": "The amount of capital this token gives you to use for trades and loans.",
     "tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
     "tooltip-leverage": "Total assets value divided by account equity value",
     "tooltip-pnl": "The amount your account has profited or lost",
@@ -19,5 +21,6 @@
     "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
     "total-funding-earned": "Total Funding Earned",
     "volume-chart": "Volume Chart",
-    "week-starting": "Week starting {{week}}"
+    "week-starting": "Week starting {{week}}",
+    "zero-collateral": "Zero Collateral"
 }

public/locales/en/common.json

@@ -138,7 +138,6 @@
   "sell": "Sell",
   "settings": "Settings",
   "show-more": "Show More",
-  "show-zero-balances": "Show Zero Balances",
   "solana-tps": "Solana TPS",
   "soon": "Soon",
   "spot": "Spot",

public/locales/es/account.json

@@ -1,6 +1,7 @@
 {
     "assets": "Assets",
     "assets-liabilities": "Assets & Liabilities",
+    "collateral-value": "Collateral Value",
     "cumulative-interest-chart": "Cumulative Interst Chart",
     "daily-volume": "24h Volume",
     "export": "Export {{dataType}}",
@@ -11,6 +12,7 @@
     "no-pnl-history": "No PnL History",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",
+    "tooltip-collateral-value": "The amount of capital this token gives you to use for trades and loans.",
     "tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
     "tooltip-leverage": "Total assets value divided by account equity value",
     "tooltip-pnl": "The amount your account has profited or lost",
@@ -19,5 +21,6 @@
     "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
     "total-funding-earned": "Total Funding Earned",
     "volume-chart": "Volume Chart",
-    "week-starting": "Week starting {{week}}"
+    "week-starting": "Week starting {{week}}",
+    "zero-collateral": "Zero Collateral"
 }

public/locales/es/common.json

@@ -138,7 +138,6 @@
   "sell": "Sell",
   "settings": "Settings",
   "show-more": "Show More",
-  "show-zero-balances": "Show Zero Balances",
   "solana-tps": "Solana TPS",
   "soon": "Soon",
   "spot": "Spot",

public/locales/ru/account.json

@@ -1,6 +1,7 @@
 {
     "assets": "Assets",
     "assets-liabilities": "Assets & Liabilities",
+    "collateral-value": "Collateral Value",
     "cumulative-interest-chart": "Cumulative Interst Chart",
     "daily-volume": "24h Volume",
     "export": "Export {{dataType}}",
@@ -11,6 +12,7 @@
     "no-pnl-history": "No PnL History",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",
+    "tooltip-collateral-value": "The amount of capital this token gives you to use for trades and loans.",
     "tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
     "tooltip-leverage": "Total assets value divided by account equity value",
     "tooltip-pnl": "The amount your account has profited or lost",
@@ -19,5 +21,6 @@
     "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
     "total-funding-earned": "Total Funding Earned",
     "volume-chart": "Volume Chart",
-    "week-starting": "Week starting {{week}}"
+    "week-starting": "Week starting {{week}}",
+    "zero-collateral": "Zero Collateral"
 }

public/locales/ru/common.json

@@ -138,7 +138,6 @@
   "sell": "Sell",
   "settings": "Settings",
   "show-more": "Show More",
-  "show-zero-balances": "Show Zero Balances",
   "solana-tps": "Solana TPS",
   "soon": "Soon",
   "spot": "Spot",

public/locales/zh/account.json

@@ -1,6 +1,7 @@
 {
     "assets": "Assets",
     "assets-liabilities": "Assets & Liabilities",
+    "collateral-value": "Collateral Value",
     "cumulative-interest-chart": "Cumulative Interst Chart",
     "daily-volume": "24h Volume",
     "export": "Export {{dataType}}",
@@ -11,6 +12,7 @@
     "no-pnl-history": "No PnL History",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",
+    "tooltip-collateral-value": "The amount of capital this token gives you to use for trades and loans.",
     "tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
     "tooltip-leverage": "Total assets value divided by account equity value",
     "tooltip-pnl": "The amount your account has profited or lost",
@@ -19,5 +21,6 @@
     "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
     "total-funding-earned": "Total Funding Earned",
     "volume-chart": "Volume Chart",
-    "week-starting": "Week starting {{week}}"
+    "week-starting": "Week starting {{week}}",
+    "zero-collateral": "Zero Collateral"
 }

public/locales/zh/common.json

@@ -138,7 +138,6 @@
   "sell": "卖",
   "settings": "设置",
   "show-more": "显示更多",
-  "show-zero-balances": "显示零余额",
   "solana-tps": "Solana TPS",
   "soon": "Soon",
   "spot": "现货",

public/locales/zh_tw/account.json

@@ -1,6 +1,7 @@
 {
     "assets": "Assets",
     "assets-liabilities": "Assets & Liabilities",
+    "collateral-value": "Collateral Value",
     "cumulative-interest-chart": "Cumulative Interst Chart",
     "daily-volume": "24h Volume",
     "export": "Export {{dataType}}",
@@ -11,6 +12,7 @@
     "no-pnl-history": "No PnL History",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",
+    "tooltip-collateral-value": "The amount of capital this token gives you to use for trades and loans.",
     "tooltip-free-collateral": "The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw",
     "tooltip-leverage": "Total assets value divided by account equity value",
     "tooltip-pnl": "The amount your account has profited or lost",
@@ -19,5 +21,6 @@
     "tooltip-total-interest": "The value of interest earned (deposits) minus interest paid (borrows)",
     "total-funding-earned": "Total Funding Earned",
     "volume-chart": "Volume Chart",
-    "week-starting": "Week starting {{week}}"
+    "week-starting": "Week starting {{week}}",
+    "zero-collateral": "Zero Collateral"
 }

public/locales/zh_tw/common.json

@@ -138,7 +138,6 @@
   "sell": "賣",
   "settings": "設置",
   "show-more": "顯示更多",
-  "show-zero-balances": "顯示零餘額",
   "solana-tps": "Solana TPS",
   "soon": "Soon",
   "spot": "現貨",