add health impact component

components/modals/BorrowModal.tsx

@@ -13,6 +13,7 @@ import Input from '../forms/Input'
 import Label from '../forms/Label'
 import Button, { LinkButton } from '../shared/Button'
 import DepositTokenList from '../shared/DepositTokenList'
+import HealthImpact from '../shared/HealthImpact'
 import Loading from '../shared/Loading'
 import Modal from '../shared/Modal'
 import { EnterBottomExitBottom, FadeInFadeOut } from '../shared/Transitions'
@@ -39,17 +40,6 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
     return group?.banksMap.get(selectedToken)
   }, [selectedToken])
 
-  const healthImpact = useMemo(() => {
-    const group = mangoStore.getState().group
-    if (!group || !bank || !mangoAccount) return 0
-
-    return mangoAccount
-      .simHealthRatioWithTokenPositionChanges(group, [
-        { tokenName: bank.name, tokenAmount: parseFloat(inputAmount) * -1 },
-      ])
-      .toNumber()
-  }, [mangoAccount, bank, inputAmount])
-
   const tokenMax = useMemo(() => {
     const group = mangoStore.getState().group
     if (!group || !bank) return 0
@@ -191,16 +181,10 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
               />
             </div>
           </div>
-          <div className="space-y-2 border-y border-th-bkg-3 py-4">
-            <div className="flex justify-between">
-              <p>{t('health-impact')}</p>
-              <p className="text-th-red">{healthImpact}</p>
-            </div>
-            {/* <div className="flex justify-between">
-              <p>{t('borrow-value')}</p>
-              <p className="text-th-fgd-1">$1,000.00</p>
-            </div> */}
-          </div>
+          <HealthImpact
+            tokenName={selectedToken}
+            amount={parseFloat(inputAmount)}
+          />
         </div>
         <Button
           onClick={handleWithdraw}

components/modals/WithdrawModal.tsx

@@ -11,6 +11,7 @@ import ButtonGroup from '../forms/ButtonGroup'
 import Input from '../forms/Input'
 import Label from '../forms/Label'
 import Button, { LinkButton } from '../shared/Button'
+import HealthImpact from '../shared/HealthImpact'
 import Loading from '../shared/Loading'
 import Modal from '../shared/Modal'
 import { EnterBottomExitBottom, FadeInFadeOut } from '../shared/Transitions'
@@ -43,16 +44,6 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
     return amount ? floorToDecimal(amount, bank.mintDecimals) : 0
   }, [mangoAccount, bank])
 
-  const healthImpact = useMemo(() => {
-    const group = mangoStore.getState().group
-    if (!group || !bank || !mangoAccount) return 0
-    return mangoAccount
-      .simHealthRatioWithTokenPositionChanges(group, [
-        { tokenName: bank.name, tokenAmount: parseFloat(inputAmount) * -1 },
-      ])
-      .toNumber()
-  }, [mangoAccount, bank, inputAmount])
-
   const handleSizePercentage = useCallback(
     (percentage: string) => {
       setSizePercentage(percentage)
@@ -173,16 +164,10 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
                 />
               </div>
             </div>
-            <div className="space-y-2 border-y border-th-bkg-3 py-4">
-              <div className="flex justify-between">
-                <p>{t('health-impact')}</p>
-                <p className="text-th-red">{healthImpact}</p>
-              </div>
-              {/* <div className="flex justify-between">
-              <p>{t('withdrawal-value')}</p>
-              <p className="text-th-fgd-1">$1,000.00</p>
-            </div> */}
-            </div>
+            <HealthImpact
+              tokenName={selectedToken}
+              amount={parseFloat(inputAmount)}
+            />
           </div>
           <div className="mt-4 flex justify-center">
             <Button

components/shared/HealthImpact.tsx

@@ -0,0 +1,71 @@
+import { HealthType } from '@blockworks-foundation/mango-v4'
+import { ArrowRightIcon } from '@heroicons/react/solid'
+import { useTranslation } from 'next-i18next'
+import { useMemo } from 'react'
+import mangoStore from '../../store/state'
+
+const HealthImpact = ({
+  tokenName,
+  amount,
+}: {
+  tokenName: string
+  amount: number
+}) => {
+  const { t } = useTranslation('common')
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+
+  const currentHealth = useMemo(() => {
+    if (!mangoAccount) return 0
+    return mangoAccount.getHealthRatioUi(HealthType.maint)
+  }, [mangoAccount])
+
+  const projectedHealth = useMemo(() => {
+    const group = mangoStore.getState().group
+    if (!group || !mangoAccount) return 0
+    const projectedHealth = mangoAccount
+      .simHealthRatioWithTokenPositionChanges(group, [
+        { tokenName: tokenName, tokenAmount: amount * -1 },
+      ])
+      .toNumber()
+
+    return projectedHealth > 100
+      ? 100
+      : projectedHealth < 0
+      ? 0
+      : projectedHealth
+  }, [mangoAccount, tokenName, amount])
+
+  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>
+        <div className="flex items-center space-x-2">
+          <p className="text-th-fgd-1">{currentHealth}%</p>
+          <ArrowRightIcon className="h-4 w-4 text-th-fgd-3" />
+          <p
+            className={
+              projectedHealth < 50 && projectedHealth > 15
+                ? 'text-th-orange'
+                : projectedHealth <= 15
+                ? 'text-th-red'
+                : 'text-th-green'
+            }
+          >
+            {projectedHealth.toFixed(2)}%{' '}
+            <span
+              className={`text-xs ${
+                projectedHealth >= currentHealth
+                  ? 'text-th-green'
+                  : 'text-th-red'
+              }`}
+            >
+              ({(projectedHealth - currentHealth).toFixed(2)}%)
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HealthImpact