[Health Computer]: update wasm + support borrow to wallet (#318)

* [Health Computer]: update wasm + support borrow to wallet

* [test]: fixed tests for account details

__tests__/components/Account/AccountDetails.test.tsx

@@ -5,6 +5,11 @@ import useCurrentAccount from 'hooks/useCurrentAccount'
 import useStore from 'store'
 
 jest.mock('hooks/useCurrentAccount', () => jest.fn(() => null))
+jest.mock('hooks/useHealthComputer', () =>
+  jest.fn(() => ({
+    health: 0,
+  })),
+)
 
 const mockedUseCurrentAccount = useCurrentAccount as jest.Mock
 

src/components/Account/AccountDetails.tsx

@@ -2,7 +2,9 @@ import { Gauge } from 'components/Gauge'
 import { Heart } from 'components/Icons'
 import Text from 'components/Text'
 import useCurrentAccount from 'hooks/useCurrentAccount'
+import useHealthComputer from 'hooks/useHealthComputer'
 import useStore from 'store'
+import { formatHealth } from 'utils/formatters'
 
 interface Props {
   account: Account
@@ -18,6 +20,7 @@ export default function AccountDetailsController() {
 }
 
 function AccountDetails(props: Props) {
+  const { health } = useHealthComputer(props.account)
   return (
     <div
       data-testid='account-details'
@@ -29,7 +32,7 @@ function AccountDetails(props: Props) {
           Health
         </Text>
         <Text size='xs' className='w-full text-center'>
-          89%
+          {formatHealth(health)}
         </Text>
       </div>
       <div className='w-full border border-x-0 border-white/20 py-4'>

src/components/Modals/BorrowModal.tsx

@@ -20,6 +20,7 @@ import { hardcodedFee } from 'utils/constants'
 import { formatPercent, formatValue } from 'utils/formatters'
 import { BN } from 'utils/helpers'
 import useHealthComputer from 'hooks/useHealthComputer'
+import { BorrowTarget } from 'types/enums/borrowTarget'
 
 function getDebtAmount(modal: BorrowModal | null) {
   return BN((modal?.marketData as BorrowMarketTableData)?.debt ?? 0).toString()
@@ -110,10 +111,13 @@ function BorrowModal(props: Props) {
       return
     }
 
-    computeMaxBorrowAmount(asset.denom).then((maxBorrowAmount) => {
+    computeMaxBorrowAmount(
+      asset.denom,
+      borrowToWallet ? BorrowTarget.Wallet : BorrowTarget.Deposit,
+    ).then((maxBorrowAmount) => {
       setMax(BN(Math.min(maxBorrowAmount, modal?.marketData?.liquidity?.amount.toNumber() || 0)))
     })
-  }, [isRepay, modal, asset.denom, computeMaxBorrowAmount])
+  }, [isRepay, modal, asset.denom, computeMaxBorrowAmount, borrowToWallet])
 
   useEffect(() => {
     if (!modal?.asset) return

src/hooks/useHealthComputer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import usePrices from 'hooks/usePrices'
 import useAssetParams from 'hooks/useAssetParams'
@@ -16,6 +16,7 @@ import {
 import { convertAccountToPositions } from 'utils/accounts'
 import { VaultPositionValue } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
 import useStore from 'store'
+import { BorrowTarget } from 'types/enums/borrowTarget'
 
 export default function useHealthComputer(account: Account) {
   const { data: prices } = usePrices()
@@ -23,6 +24,7 @@ export default function useHealthComputer(account: Account) {
   const { data: vaultConfigs } = useVaultConfigs()
   const baseCurrency = useStore((s) => s.baseCurrency)
 
+  const [health, setHealth] = useState(0)
   const positions = useMemo(() => convertAccountToPositions(account), [account])
   const baseCurrencyPrice = useMemo(
     () => prices.find((price) => price.denom === baseCurrency.denom)?.amount || 0,
@@ -120,20 +122,19 @@ export default function useHealthComputer(account: Account) {
     }
   }, [priceData, denomsData, vaultConfigsData, vaultPositionValues, positions])
 
-  const computeHealth = useCallback(() => {
-    async function callComputeHealthWasmFn(): Promise<number> {
-      if (!healthComputer) return 0
-      return Number((await compute_health_js(healthComputer)).max_ltv_health_factor) || 0
+  useEffect(() => {
+    async function computeHealthWasm() {
+      if (!healthComputer) return
+      setHealth(Number((await compute_health_js(healthComputer)).max_ltv_health_factor) || 0)
     }
-
-    return callComputeHealthWasmFn()
+    computeHealthWasm()
   }, [healthComputer])
 
   const computeMaxBorrowAmount = useCallback(
-    (denom: string) => {
+    (denom: string, target: BorrowTarget) => {
       async function callMaxBorrowWasmFn(denom: string): Promise<number> {
         if (!healthComputer) return 0
-        return await max_borrow_estimate_js(healthComputer, denom)
+        return await max_borrow_estimate_js(healthComputer, denom, target)
       }
 
       return callMaxBorrowWasmFn(denom)
@@ -153,5 +154,5 @@ export default function useHealthComputer(account: Account) {
     [healthComputer],
   )
 
-  return { computeHealth, computeMaxBorrowAmount, computeMaxWithdrawAmount }
+  return { health, computeMaxBorrowAmount, computeMaxWithdrawAmount }
 }

src/types/enums/borrowTarget.ts

@@ -0,0 +1,4 @@
+export enum BorrowTarget {
+  Deposit = 'deposit',
+  Wallet = 'wallet',
+}

src/utils/formatters.ts

@@ -123,6 +123,12 @@ export const formatValue = (amount: number | string, options?: FormatOptions): s
 
   return returnValue
 }
+export function formatHealth(health: number) {
+  return formatValue(health, {
+    minDecimals: 0,
+    maxDecimals: 2,
+  })
+}
 
 export function formatLeverage(leverage: number) {
   return formatValue(leverage, {

src/utils/health_computer/index.d.ts

@@ -8,15 +8,16 @@ export function compute_health_js(health_computer: any): any
 /**
  * @param {any} health_computer
  * @param {any} withdraw_denom
- * @returns {HealthResponse}
+ * @returns {any}
  */
 export function max_withdraw_estimate_js(health_computer: any, withdraw_denom: any): any
 /**
  * @param {any} health_computer
  * @param {any} borrow_denom
+ * @param {any} target
  * @returns {any}
  */
-export function max_borrow_estimate_js(health_computer: any, borrow_denom: any): any
+export function max_borrow_estimate_js(health_computer: any, borrow_denom: any, target: any): any
 
 export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module
 
@@ -24,7 +25,7 @@ export interface InitOutput {
   readonly memory: WebAssembly.Memory
   readonly compute_health_js: (a: number) => number
   readonly max_withdraw_estimate_js: (a: number, b: number) => number
-  readonly max_borrow_estimate_js: (a: number, b: number) => number
+  readonly max_borrow_estimate_js: (a: number, b: number, c: number) => number
   readonly allocate: (a: number) => number
   readonly deallocate: (a: number) => void
   readonly requires_stargate: () => void

src/utils/health_computer/index.js

@@ -242,12 +242,14 @@ export function max_withdraw_estimate_js(health_computer, withdraw_denom) {
 /**
  * @param {any} health_computer
  * @param {any} borrow_denom
+ * @param {any} target
  * @returns {any}
  */
-export function max_borrow_estimate_js(health_computer, borrow_denom) {
+export function max_borrow_estimate_js(health_computer, borrow_denom, target) {
   const ret = wasm.max_borrow_estimate_js(
     addHeapObject(health_computer),
     addHeapObject(borrow_denom),
+    addHeapObject(target),
   )
   return takeObject(ret)
 }

src/utils/health_computer/index_bg.wasm.d.ts

@@ -3,7 +3,7 @@
 export const memory: WebAssembly.Memory
 export function compute_health_js(a: number): number
 export function max_withdraw_estimate_js(a: number, b: number): number
-export function max_borrow_estimate_js(a: number, b: number): number
+export function max_borrow_estimate_js(a: number, b: number, c: number): number
 export function allocate(a: number): number
 export function deallocate(a: number): void
 export function requires_stargate(): void