show maint health and init health everywhere

components/TokenList.tsx

@@ -245,7 +245,10 @@ const TokenList = () => {
                   <td className="w-[16.67%] pt-4 text-right">
                     <p className="px-2">
                       {mangoAccount
-                        ? formatDecimal(mangoAccount.getTokenBalanceUi(bank))
+                        ? formatDecimal(
+                            mangoAccount.getTokenBalanceUi(bank),
+                            bank.mintDecimals
+                          )
                         : 0}
                     </p>
                     <p className="px-2 text-sm text-th-fgd-4">

components/modals/BorrowModal.tsx

@@ -33,16 +33,12 @@ const getMaxBorrowForToken = (
     bank.uiDeposits() - bank.uiBorrows(),
     bank.mintDecimals
   )
-  const currentBalance = mangoAccount?.getTokenBalanceUi(bank) || 0
   const maxBorrow = mangoAccount?.getMaxWithdrawWithBorrowForTokenUi(
     group,
     bank.mint
   )
 
-  return Math.min(
-    vaultBalance,
-    floorToDecimal(maxBorrow, bank.mintDecimals)
-  )
+  return Math.min(vaultBalance, floorToDecimal(maxBorrow, bank.mintDecimals))
 }
 
 interface BorrowModalProps {

components/shared/HealthImpact.tsx

@@ -17,16 +17,21 @@ const HealthImpact = ({
   const { t } = useTranslation('common')
   const mangoAccount = mangoStore((s) => s.mangoAccount.current)
 
-  const currentHealth = useMemo(() => {
+  const currentMaintHealth = useMemo(() => {
     if (!mangoAccount) return 0
     return mangoAccount.getHealthRatioUi(HealthType.maint)
   }, [mangoAccount])
 
-  const projectedHealth = useMemo(() => {
+  const currentInitHealth = useMemo(() => {
+    if (!mangoAccount) return 0
+    return mangoAccount.getHealthRatioUi(HealthType.init)
+  }, [mangoAccount])
+
+  const maintProjectedHealth = useMemo(() => {
     const group = mangoStore.getState().group
     if (!group || !mangoAccount) return 0
-    const projectedHealth = mangoAccount
-      .simHealthRatioWithTokenPositionUiChanges(
+    const projectedHealth =
+      mangoAccount.simHealthRatioWithTokenPositionUiChanges(
         group,
         [{ mintPk, uiTokenAmount: isDeposit ? uiAmount : uiAmount * -1 }],
         HealthType.maint
@@ -39,32 +44,77 @@ const HealthImpact = ({
       : projectedHealth
   }, [mangoAccount, mintPk, uiAmount, isDeposit])
 
+  const initProjectedHealth = useMemo(() => {
+    const group = mangoStore.getState().group
+    if (!group || !mangoAccount) return 0
+    const projectedHealth =
+      mangoAccount.simHealthRatioWithTokenPositionUiChanges(
+        group,
+        [{ mintPk, uiTokenAmount: isDeposit ? uiAmount : uiAmount * -1 }],
+        HealthType.init
+      )
+
+    return projectedHealth > 100
+      ? 100
+      : projectedHealth < 0
+      ? 0
+      : projectedHealth
+  }, [mangoAccount, mintPk, uiAmount, isDeposit])
+
   return (
     <div className="space-y-2 border-y border-th-bkg-3 px-2 py-4">
       <div className="flex justify-between">
-        <p>{t('health-impact')}</p>
+        <p>Maint {t('health-impact')}</p>
         <div className="flex items-center space-x-2">
-          <p className="text-th-fgd-1">{currentHealth}%</p>
+          <p className="text-th-fgd-1">{currentMaintHealth}%</p>
           <ArrowRightIcon className="h-4 w-4 text-th-fgd-3" />
           <p
             className={
-              projectedHealth < 50 && projectedHealth > 15
+              maintProjectedHealth < 50 && maintProjectedHealth > 15
                 ? 'text-th-orange'
-                : projectedHealth <= 15
+                : maintProjectedHealth <= 15
                 ? 'text-th-red'
                 : 'text-th-green'
             }
           >
-            {projectedHealth.toFixed(2)}%{' '}
+            {maintProjectedHealth.toFixed(2)}%{' '}
             <span
               className={`text-xs ${
-                projectedHealth >= currentHealth
+                maintProjectedHealth >= currentMaintHealth
                   ? 'text-th-green'
                   : 'text-th-red'
               }`}
             >
-              ({projectedHealth >= currentHealth ? '+' : ''}
-              {(projectedHealth - currentHealth).toFixed(2)}%)
+              ({maintProjectedHealth >= currentMaintHealth ? '+' : ''}
+              {(maintProjectedHealth - currentMaintHealth).toFixed(2)}%)
+            </span>
+          </p>
+        </div>
+      </div>
+      <div className="flex justify-between">
+        <p>Init {t('health-impact')}</p>
+        <div className="flex items-center space-x-2">
+          <p className="text-th-fgd-1">{currentInitHealth}%</p>
+          <ArrowRightIcon className="h-4 w-4 text-th-fgd-3" />
+          <p
+            className={
+              initProjectedHealth < 50 && initProjectedHealth > 15
+                ? 'text-th-orange'
+                : initProjectedHealth <= 15
+                ? 'text-th-red'
+                : 'text-th-green'
+            }
+          >
+            {initProjectedHealth.toFixed(2)}%{' '}
+            <span
+              className={`text-xs ${
+                initProjectedHealth >= currentInitHealth
+                  ? 'text-th-green'
+                  : 'text-th-red'
+              }`}
+            >
+              ({initProjectedHealth >= currentInitHealth ? '+' : ''}
+              {(initProjectedHealth - currentInitHealth).toFixed(2)}%)
             </span>
           </p>
         </div>

pages/index.tsx

@@ -113,6 +113,14 @@ const Index: NextPage = () => {
     return 0
   }, [totalInterestData])
 
+  const maintHealth = useMemo(() => {
+    return mangoAccount ? mangoAccount.getHealthRatioUi(HealthType.maint) : 100
+  }, [mangoAccount])
+
+  const initHealth = useMemo(() => {
+    return mangoAccount ? mangoAccount.getHealthRatioUi(HealthType.init) : 100
+  }, [mangoAccount])
+
   return !chartToShow ? (
     <>
       <div className="mb-8 flex flex-col md:mb-10 lg:flex-row lg:items-end lg:justify-between">
@@ -217,17 +225,16 @@ const Index: NextPage = () => {
         </div>
         <AccountActions />
       </div>
-      <div className="grid grid-cols-4 gap-x-6 border-b border-th-bkg-3 md:border-b-0">
-        <div className="col-span-4 border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
-          <p className="text-th-fgd-3">{t('health')}</p>
-          <p className="text-2xl font-bold text-th-fgd-1">
-            {mangoAccount
-              ? mangoAccount.getHealthRatioUi(HealthType.maint)
-              : 100}
-            %
-          </p>
+      <div className="grid grid-cols-5 gap-x-6 border-b border-th-bkg-3 md:border-b-0">
+        <div className="col-span-5 border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
+          <p className="text-th-fgd-3">Maint {t('health')}</p>
+          <p className="text-2xl font-bold text-th-fgd-1">{maintHealth}%</p>
         </div>
-        <div className="col-span-4 border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
+        <div className="col-span-5 border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
+          <p className="text-th-fgd-3">Init {t('health')}</p>
+          <p className="text-2xl font-bold text-th-fgd-1">{initHealth}%</p>
+        </div>
+        <div className="col-span-5 border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
           <p className="text-th-fgd-3">{t('free-collateral')}</p>
           <p className="text-2xl font-bold text-th-fgd-1">
             {mangoAccount
@@ -240,7 +247,7 @@ const Index: NextPage = () => {
               : (0).toFixed(2)}
           </p>
         </div>
-        <div className="col-span-4 flex items-center justify-between border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
+        <div className="col-span-5 flex items-center justify-between border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
           <div>
             <p className="text-th-fgd-3">{t('pnl')}</p>
             <p className="text-2xl font-bold text-th-fgd-1">
@@ -256,7 +263,7 @@ const Index: NextPage = () => {
             </IconButton>
           ) : null}
         </div>
-        <div className="col-span-4 flex items-center justify-between border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
+        <div className="col-span-5 flex items-center justify-between border-t border-th-bkg-3 py-4 md:col-span-2 md:border-l md:border-t-0 md:pl-6 lg:col-span-1">
           <div>
             <p className="text-th-fgd-3">{t('total-interest-value')}</p>
             <p className="text-2xl font-bold text-th-fgd-1">

utils/numbers.ts

@@ -9,6 +9,8 @@ export const formatDecimal = (
 ) => {
   if (opts?.fixed) return value.toFixed(decimals)
 
+  if (value < 0.000001 && decimals === 6) return digits6.format(0.0)
+
   if (decimals === 2) return digits2.format(value)
   if (decimals === 6) return digits6.format(value)
   if (decimals === 9) return digits9.format(value)