🐛 fix: borrow not updating vault values (#436)

src/components/Modals/Vault/VaultBorrowings.tsx

@@ -10,6 +10,7 @@ import Slider from 'components/Slider'
 import Text from 'components/Text'
 import TokenInput from 'components/TokenInput'
 import { BN_ZERO } from 'constants/math'
+import { ORACLE_DENOM } from 'constants/oracle'
 import useHealthComputer from 'hooks/useHealthComputer'
 import useMarketAssets from 'hooks/useMarketAssets'
 import usePrices from 'hooks/usePrices'
@@ -20,7 +21,6 @@ import { byDenom } from 'utils/array'
 import { findCoinByDenom, getAssetByDenom } from 'utils/assets'
 import { formatPercent } from 'utils/formatters'
 import { getValueFromBNCoins, mergeBNCoinArrays } from 'utils/helpers'
-import { ORACLE_DENOM } from 'constants/oracle'
 
 export interface VaultBorrowingsProps {
   borrowings: BNCoin[]
@@ -35,6 +35,7 @@ export interface VaultBorrowingsProps {
 }
 
 export default function VaultBorrowings(props: VaultBorrowingsProps) {
+  const { borrowings, onChangeBorrowings } = props
   const { data: marketAssets } = useMarketAssets()
   const { data: prices } = usePrices()
   const vaultModal = useStore((s) => s.vaultModal)
@@ -74,22 +75,22 @@ export default function VaultBorrowings(props: VaultBorrowingsProps) {
   useEffect(() => {
     const selectedBorrowDenoms = vaultModal?.selectedBorrowDenoms || []
     if (
-      props.borrowings.length === selectedBorrowDenoms.length &&
-      props.borrowings.every((coin) => selectedBorrowDenoms.includes(coin.denom))
+      borrowings.length === selectedBorrowDenoms.length &&
+      borrowings.every((coin) => selectedBorrowDenoms.includes(coin.denom))
     ) {
       return
     }
     const updatedBorrowings = selectedBorrowDenoms.map((denom) => {
-      const amount = findCoinByDenom(denom, props.borrowings)?.amount || BN_ZERO
+      const amount = findCoinByDenom(denom, borrowings)?.amount || BN_ZERO
 
       return new BNCoin({
         denom,
         amount: amount.toString(),
       })
     })
-    props.onChangeBorrowings(updatedBorrowings)
     setPercentage(calculateSliderPercentage(maxBorrowAmounts, updatedBorrowings))
-  }, [vaultModal, props, maxBorrowAmounts])
+    onChangeBorrowings(updatedBorrowings)
+  }, [vaultModal, maxBorrowAmounts, borrowings, onChangeBorrowings])
 
   function onChangeSlider(value: number) {
     if (props.borrowings.length !== 1) return
@@ -236,4 +237,4 @@ export default function VaultBorrowings(props: VaultBorrowingsProps) {
       />
     </div>
   )
-}
+}

src/components/Modals/Vault/VaultModalContent.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 import Accordion from 'components/Accordion'
 import AccountSummary from 'components/Account/AccountSummary'
@@ -30,8 +30,9 @@ interface Props {
 }
 
 export default function VaultModalContent(props: Props) {
-  const { addDebts, addedDebts, removedDeposits, removedLends, simulateVaultDeposit } =
-    useUpdatedAccount(props.account)
+  const { addedDebts, removedDeposits, removedLends, simulateVaultDeposit } = useUpdatedAccount(
+    props.account,
+  )
 
   const { data: prices } = usePrices()
   const [displayCurrency] = useLocalStorage<string>(
@@ -40,7 +41,8 @@ export default function VaultModalContent(props: Props) {
   )
   const [isOpen, toggleOpen] = useIsOpenArray(2, false)
   const [isCustomRatio, setIsCustomRatio] = useState(false)
-  const [selectedCoins, setSelectedCoins] = useState<BNCoin[]>([])
+  const [depositCoins, setDepositCoins] = useState<BNCoin[]>([])
+  const [borrowCoins, setBorrowCoins] = useState<BNCoin[]>([])
   const displayAsset = useDisplayAsset()
   const { actions: depositActions, totalValue } = useDepositVault({
     vault: props.vault,
@@ -66,14 +68,6 @@ export default function VaultModalContent(props: Props) {
     return []
   }, [displayAsset, prices, props.vault.cap, totalValue])
 
-  const handleDepositSelect = useCallback(
-    (selectedCoins: BNCoin[]) => {
-      simulateVaultDeposit(props.vault.address, selectedCoins)
-      setSelectedCoins(selectedCoins)
-    },
-    [props.vault.address, simulateVaultDeposit],
-  )
-
   const onChangeIsCustomRatio = useCallback(
     (isCustomRatio: boolean) => setIsCustomRatio(isCustomRatio),
     [setIsCustomRatio],
@@ -84,6 +78,22 @@ export default function VaultModalContent(props: Props) {
     [removedDeposits, removedLends],
   )
 
+  const onChangeDeposits = useCallback(
+    (coins: BNCoin[]) => {
+      setDepositCoins(coins)
+      simulateVaultDeposit(props.vault.address, coins, borrowCoins)
+    },
+    [borrowCoins, props.vault.address, simulateVaultDeposit],
+  )
+
+  const onChangeBorrowings = useCallback(
+    (coins: BNCoin[]) => {
+      setBorrowCoins(coins)
+      simulateVaultDeposit(props.vault.address, depositCoins, coins)
+    },
+    [depositCoins, props.vault.address, simulateVaultDeposit],
+  )
+
   function getDepositSubTitle() {
     if (isOpen[0] && props.isDeposited)
       return (
@@ -130,8 +140,8 @@ export default function VaultModalContent(props: Props) {
           {
             renderContent: () => (
               <VaultDeposit
-                deposits={selectedCoins}
-                onChangeDeposits={handleDepositSelect}
+                deposits={depositCoins}
+                onChangeDeposits={onChangeDeposits}
                 primaryAsset={props.primaryAsset}
                 secondaryAsset={props.secondaryAsset}
                 account={props.account}
@@ -150,11 +160,11 @@ export default function VaultModalContent(props: Props) {
           {
             renderContent: () => (
               <VaultBorrowings
-                borrowings={addedDebts}
+                borrowings={borrowCoins}
                 deposits={deposits}
                 primaryAsset={props.primaryAsset}
                 secondaryAsset={props.secondaryAsset}
-                onChangeBorrowings={addDebts}
+                onChangeBorrowings={onChangeBorrowings}
                 vault={props.vault}
                 depositActions={depositActions}
                 depositCapReachedCoins={depositCapReachedCoins}
@@ -172,4 +182,4 @@ export default function VaultModalContent(props: Props) {
       <AccountSummary account={props.account} />
     </div>
   )
-}
+}

src/hooks/useUpdatedAccount/index.ts

@@ -148,10 +148,9 @@ export function useUpdatedAccount(account?: Account) {
   )
 
   const simulateVaultDeposit = useCallback(
-    (address: string, coins: BNCoin[]) => {
+    (address: string, coins: BNCoin[], borrowCoins: BNCoin[]) => {
       if (!account) return
 
-      const value = getValueFromBNCoins(coins, prices)
       const totalDeposits: BNCoin[] = []
       const totalLends: BNCoin[] = []
 
@@ -161,9 +160,12 @@ export function useUpdatedAccount(account?: Account) {
         totalLends.push(lend)
       })
 
-      addVaultValues([{ address, value }])
       removeDeposits(totalDeposits)
       removeLends(totalLends)
+      addDebts(borrowCoins)
+
+      const value = getValueFromBNCoins([...coins, ...borrowCoins], prices)
+      addVaultValues([{ address, value }])
     },
     [account, prices],
   )