import { useCallback, useMemo, useState } from 'react' import Accordion from 'components/Accordion' import AccountSummary from 'components/Account/AccountSummary' import VaultBorrowings from 'components/Modals/Vault/VaultBorrowings' import VaultBorrowingsSubTitle from 'components/Modals/Vault/VaultBorrowingsSubTitle' import VaultDeposit from 'components/Modals/Vault/VaultDeposits' import VaultDepositSubTitle from 'components/Modals/Vault/VaultDepositsSubTitle' import Text from 'components/Text' import { DEFAULT_SETTINGS } from 'constants/defaultSettings' import { LocalStorageKeys } from 'constants/localStorageKeys' import { BN_ZERO } from 'constants/math' import useDepositVault from 'hooks/broadcast/useDepositVault' import useDisplayAsset from 'hooks/useDisplayAsset' import useIsOpenArray from 'hooks/useIsOpenArray' import useLocalStorage from 'hooks/useLocalStorage' import usePrices from 'hooks/usePrices' import { useUpdatedAccount } from 'hooks/useUpdatedAccount' import { BNCoin } from 'types/classes/BNCoin' import { getCoinValue, magnify } from 'utils/formatters' import { getCapLeftWithBuffer } from 'utils/generic' import { mergeBNCoinArrays } from 'utils/helpers' interface Props { vault: Vault | DepositedVault primaryAsset: Asset secondaryAsset: Asset account: Account isDeposited?: boolean } export default function VaultModalContent(props: Props) { const { addedDebts, removedDeposits, removedLends, simulateVaultDeposit } = useUpdatedAccount( props.account, ) const { data: prices } = usePrices() const [displayCurrency] = useLocalStorage( LocalStorageKeys.DISPLAY_CURRENCY, DEFAULT_SETTINGS.displayCurrency, ) const [isOpen, toggleOpen] = useIsOpenArray(2, false) const [isCustomRatio, setIsCustomRatio] = useState(false) const [depositCoins, setDepositCoins] = useState([]) const [borrowCoins, setBorrowCoins] = useState([]) const displayAsset = useDisplayAsset() const { actions: depositActions, totalValue } = useDepositVault({ vault: props.vault, reclaims: removedLends, deposits: removedDeposits, borrowings: addedDebts, kind: 'default', }) const depositCapReachedCoins = useMemo(() => { const capLeft = getCapLeftWithBuffer(props.vault.cap) if (totalValue.isGreaterThan(capLeft)) { const amount = magnify( getCoinValue( BNCoin.fromDenomAndBigNumber(props.vault.cap.denom, capLeft), prices, ).toString(), displayAsset, ) return [BNCoin.fromDenomAndBigNumber(displayAsset.denom, amount)] } return [] }, [displayAsset, prices, props.vault.cap, totalValue]) const onChangeIsCustomRatio = useCallback( (isCustomRatio: boolean) => setIsCustomRatio(isCustomRatio), [setIsCustomRatio], ) const deposits = useMemo( () => mergeBNCoinArrays(removedDeposits, removedLends), [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 ( The amounts you enter below will be added to your current position. ) if (isOpen[0]) return null return ( coin.denom === props.primaryAsset.denom)?.amount || BN_ZERO } secondaryAmount={ deposits.find((coin) => coin.denom === props.secondaryAsset.denom)?.amount || BN_ZERO } primaryAsset={props.primaryAsset} secondaryAsset={props.secondaryAsset} displayCurrency={displayCurrency} /> ) } function getBorrowingsSubTitle() { if (isOpen[1] && props.isDeposited) return ( The amounts you enter below will be added to your current position. ) if (isOpen[1]) return null return } return (
( ), title: 'Deposit', renderSubTitle: getDepositSubTitle, isOpen: isOpen[0], toggleOpen: (index: number) => toggleOpen(index), }, { renderContent: () => ( ), title: 'Borrow', renderSubTitle: getBorrowingsSubTitle, isOpen: isOpen[1], toggleOpen: (index: number) => toggleOpen(index), }, ]} />
) }