diff --git a/src/components/Account/AccountDetails.tsx b/src/components/Account/AccountDetails.tsx index 0401fccd..a455db0b 100644 --- a/src/components/Account/AccountDetails.tsx +++ b/src/components/Account/AccountDetails.tsx @@ -79,7 +79,7 @@ function AccountDetails(props: Props) { data-testid='account-details' className={classNames( isExpanded ? 'right-6' : '-right-80', - 'w-100 flex items-start gap-6 absolute top-6', + 'w-100 flex items-start gap-4 absolute top-6', !reduceMotion && 'transition-all duration-300', )} > diff --git a/src/components/Trade/AccountDetailsCard.tsx b/src/components/Trade/AccountDetailsCard.tsx index 4a9caa03..84d00294 100644 --- a/src/components/Trade/AccountDetailsCard.tsx +++ b/src/components/Trade/AccountDetailsCard.tsx @@ -5,9 +5,11 @@ import Card from 'components/Card' import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData' import useCurrentAccount from 'hooks/useCurrentAccount' import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData' +import useStore from 'store' export default function AccountDetailsCard() { const account = useCurrentAccount() + const updatedAccount = useStore((s) => s.updatedAccount) const { availableAssets: borrowAvailableAssets, accountBorrowedAssets } = useBorrowMarketAssetsTableData() const { availableAssets: lendingAvailableAssets, accountLentAssets } = @@ -27,11 +29,11 @@ export default function AccountDetailsCard() { ) - if (account && account.deposits.length) + if (account) return ( ('Market') - const [isConfirming, setIsConfirming] = useState(false) + const [isConfirming, setIsConfirming] = useToggle() const [estimatedFee, setEstimatedFee] = useState(defaultFee) + const { autoLendEnabledAccountIds } = useAutoLendEnabledAccountIds() + const isAutoLendEnabled = account ? autoLendEnabledAccountIds.includes(account.id) : false const throttledEstimateExactIn = useMemo(() => asyncThrottle(estimateExactIn, 250), []) - const { removeDeposits, addDeposits, addDebts } = useUpdatedAccount(account) + const { simulateTrade } = useUpdatedAccount(account) const borrowAsset = useMemo( () => borrowAssets.find(byDenom(sellAsset.denom)), @@ -163,20 +167,21 @@ export default function SwapForm(props: Props) { const debouncedUpdateAccount = useMemo( () => debounce((removeCoin: BNCoin, addCoin: BNCoin, debtCoin: BNCoin) => { - removeDeposits([removeCoin]) - addDeposits([addCoin]) - if (debtCoin.amount.isGreaterThan(BN_ZERO)) addDebts([debtCoin]) - }, 1000), - [removeDeposits, addDeposits, addDebts], + simulateTrade(removeCoin, addCoin, debtCoin, isAutoLendEnabled ? 'lend' : 'deposit') + }, 100), + [simulateTrade, isAutoLendEnabled], ) useEffect(() => { setBuyAssetAmount(BN_ZERO) setSellAssetAmount(BN_ZERO) - removeDeposits([]) - addDeposits([]) - addDebts([]) - }, [buyAsset.denom, sellAsset.denom, removeDeposits, addDeposits, addDebts]) + simulateTrade( + BNCoin.fromDenomAndBigNumber(buyAsset.denom, BN_ZERO), + BNCoin.fromDenomAndBigNumber(sellAsset.denom, BN_ZERO), + BNCoin.fromDenomAndBigNumber(sellAsset.denom, BN_ZERO), + isAutoLendEnabled ? 'lend' : 'deposit', + ) + }, [buyAsset.denom, sellAsset.denom, simulateTrade, isAutoLendEnabled]) useEffect(() => { const removeDepositAmount = sellAssetAmount.isGreaterThanOrEqualTo(sellSideMarginThreshold) @@ -215,7 +220,7 @@ export default function SwapForm(props: Props) { } setIsConfirming(false) } - }, [account?.id, swapTx]) + }, [account?.id, swapTx, setIsConfirming]) return ( <> diff --git a/src/hooks/useUpdatedAccount/index.ts b/src/hooks/useUpdatedAccount/index.ts index 250f2bd8..1460ff3e 100644 --- a/src/hooks/useUpdatedAccount/index.ts +++ b/src/hooks/useUpdatedAccount/index.ts @@ -1,5 +1,6 @@ import { useCallback, useEffect, useState } from 'react' +import { BN_ZERO } from 'constants/math' import { addCoins, addValueToVaults, @@ -120,6 +121,26 @@ export function useUpdatedAccount(account?: Account) { [account, removeDeposits, removeLends, addDebts], ) + const simulateTrade = useCallback( + (removeCoin: BNCoin, addCoin: BNCoin, debtCoin: BNCoin, target: 'deposit' | 'lend') => { + removeDeposits([]) + removeLends([]) + addDebts([]) + addDeposits([]) + addLends([]) + + const { deposits, lends } = getDepositsAndLendsAfterCoinSpent(removeCoin, account) + + removeDeposits([deposits]) + removeLends([lends]) + if (target === 'deposit') addDeposits([addCoin]) + if (target === 'lend') addLends([addCoin]) + + if (debtCoin.amount.isGreaterThan(BN_ZERO)) addDebts([debtCoin]) + }, + [account, addDebts, addDeposits, addLends, removeDeposits, removeLends], + ) + useEffect(() => { if (!account) return @@ -166,6 +187,7 @@ export function useUpdatedAccount(account?: Account) { simulateDeposits, simulateLending, simulateRepay, + simulateTrade, simulateWithdraw, } }