feat: added simulateTrade (#413)

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',
       )}
     >

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() {
     </div>
   )
 
-  if (account && account.deposits.length)
+  if (account)
     return (
       <Card className='h-fit' title={tabs}>
         <AccountBalancesTable
-          account={account}
+          account={updatedAccount || account}
           borrowingData={borrowAssetsData}
           lendingData={lendingAssetsData}
           tableBodyClassName='gradient-card-content'

src/components/Trade/TradeModule/SwapForm/index.tsx

@@ -1,28 +1,30 @@
 import debounce from 'lodash.debounce'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
+import estimateExactIn from 'api/swap/estimateExactIn'
 import Divider from 'components/Divider'
-import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { SLIPPAGE_KEY } from 'constants/localStore'
-import { BN_ZERO } from 'constants/math'
-import useCurrentAccount from 'hooks/useCurrentAccount'
-import useLocalStorage from 'hooks/useLocalStorage'
-import usePrices from 'hooks/usePrices'
-import useStore from 'store'
-import { byDenom } from 'utils/array'
-import { defaultFee } from 'utils/constants'
 import RangeInput from 'components/RangeInput'
-import { asyncThrottle, BN } from 'utils/helpers'
 import AssetAmountInput from 'components/Trade/TradeModule/SwapForm/AssetAmountInput'
 import MarginToggle from 'components/Trade/TradeModule/SwapForm/MarginToggle'
 import OrderTypeSelector from 'components/Trade/TradeModule/SwapForm/OrderTypeSelector'
 import { AvailableOrderType } from 'components/Trade/TradeModule/SwapForm/OrderTypeSelector/types'
 import TradeSummary from 'components/Trade/TradeModule/SwapForm/TradeSummary'
-import { BNCoin } from 'types/classes/BNCoin'
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import estimateExactIn from 'api/swap/estimateExactIn'
+import { SLIPPAGE_KEY } from 'constants/localStore'
+import { BN_ZERO } from 'constants/math'
+import useAutoLendEnabledAccountIds from 'hooks/useAutoLendEnabledAccountIds'
+import useCurrentAccount from 'hooks/useCurrentAccount'
 import useHealthComputer from 'hooks/useHealthComputer'
+import useLocalStorage from 'hooks/useLocalStorage'
 import useMarketBorrowings from 'hooks/useMarketBorrowings'
+import usePrices from 'hooks/usePrices'
+import useToggle from 'hooks/useToggle'
 import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
+import useStore from 'store'
+import { BNCoin } from 'types/classes/BNCoin'
+import { byDenom } from 'utils/array'
+import { defaultFee } from 'utils/constants'
+import { asyncThrottle, BN } from 'utils/helpers'
 
 interface Props {
   buyAsset: Asset
@@ -38,16 +40,18 @@ export default function SwapForm(props: Props) {
   const { computeMaxSwapAmount } = useHealthComputer(account)
   const { data: borrowAssets } = useMarketBorrowings()
 
-  const [isMarginChecked, setMarginChecked] = useState(false)
+  const [isMarginChecked, setMarginChecked] = useToggle()
   const [buyAssetAmount, setBuyAssetAmount] = useState(BN_ZERO)
   const [sellAssetAmount, setSellAssetAmount] = useState(BN_ZERO)
   const [maxBuyableAmountEstimation, setMaxBuyableAmountEstimation] = useState(BN_ZERO)
   const [selectedOrderType, setSelectedOrderType] = useState<AvailableOrderType>('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])
+        simulateTrade(removeCoin, addCoin, debtCoin, isAutoLendEnabled ? 'lend' : 'deposit')
-        addDeposits([addCoin])
+      }, 100),
-        if (debtCoin.amount.isGreaterThan(BN_ZERO)) addDebts([debtCoin])
+    [simulateTrade, isAutoLendEnabled],
-      }, 1000),
-    [removeDeposits, addDeposits, addDebts],
   )
 
   useEffect(() => {
     setBuyAssetAmount(BN_ZERO)
     setSellAssetAmount(BN_ZERO)
-    removeDeposits([])
+    simulateTrade(
-    addDeposits([])
+      BNCoin.fromDenomAndBigNumber(buyAsset.denom, BN_ZERO),
-    addDebts([])
+      BNCoin.fromDenomAndBigNumber(sellAsset.denom, BN_ZERO),
-  }, [buyAsset.denom, sellAsset.denom, removeDeposits, addDeposits, addDebts])
+      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 (
     <>

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,
   }
 }