From d3c73303c53cc1dd0c6c6b18ce624d288feaa80e Mon Sep 17 00:00:00 2001 From: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com> Date: Thu, 7 Sep 2023 09:46:19 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20borrow=20not=20updating?= =?UTF-8?q?=20vault=20values=20(#436)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modals/Vault/VaultBorrowings.tsx | 15 ++++--- .../Modals/Vault/VaultModalContent.tsx | 44 ++++++++++++------- src/hooks/useUpdatedAccount/index.ts | 8 ++-- 3 files changed, 40 insertions(+), 27 deletions(-) diff --git a/src/components/Modals/Vault/VaultBorrowings.tsx b/src/components/Modals/Vault/VaultBorrowings.tsx index fab52543..7fcac368 100644 --- a/src/components/Modals/Vault/VaultBorrowings.tsx +++ b/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) { /> ) -} +} \ No newline at end of file diff --git a/src/components/Modals/Vault/VaultModalContent.tsx b/src/components/Modals/Vault/VaultModalContent.tsx index 393d88f1..e780a604 100644 --- a/src/components/Modals/Vault/VaultModalContent.tsx +++ b/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( @@ -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([]) + const [depositCoins, setDepositCoins] = useState([]) + const [borrowCoins, setBorrowCoins] = useState([]) 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: () => ( ( ) -} +} \ No newline at end of file diff --git a/src/hooks/useUpdatedAccount/index.ts b/src/hooks/useUpdatedAccount/index.ts index 22cb6bb6..68ced9b7 100644 --- a/src/hooks/useUpdatedAccount/index.ts +++ b/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], )