Fix auto lend setting (#425)

* fix: fixed the auto-lend setting impact

* fix: fixed trade layout and autoLend

src/components/Account/AccountMenuContent.tsx

@@ -11,7 +11,11 @@ import { Account, Plus, PlusCircled } from 'components/Icons'
 import Overlay from 'components/Overlay'
 import Text from 'components/Text'
 import WalletBridges from 'components/Wallet/WalletBridges'
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { LEND_ASSETS_KEY } from 'constants/localStore'
+import useAutoLend from 'hooks/useAutoLend'
 import useCurrentWalletBalance from 'hooks/useCurrentWalletBalance'
+import useLocalStorage from 'hooks/useLocalStorage'
 import useToggle from 'hooks/useToggle'
 import useStore from 'store'
 import { defaultFee } from 'utils/constants'
@@ -34,6 +38,8 @@ export default function AccountMenuContent(props: Props) {
   const [showMenu, setShowMenu] = useToggle()
   const [isCreating, setIsCreating] = useToggle()
   const transactionFeeCoinBalance = useCurrentWalletBalance(baseCurrency.denom)
+  const [lendAssets] = useLocalStorage<boolean>(LEND_ASSETS_KEY, DEFAULT_SETTINGS.lendAssets)
+  const { enableAutoLendAccountId } = useAutoLend()
 
   const hasCreditAccounts = !!props.accounts.length
   const isAccountSelected = isNumber(accountId)
@@ -57,6 +63,7 @@ export default function AccountMenuContent(props: Props) {
 
     if (accountId) {
       navigate(getRoute(getPage(pathname), address, accountId))
+      if (lendAssets) enableAutoLendAccountId(accountId)
       useStore.setState({
         focusComponent: {
           component: <AccountFund />,

src/components/Earn/Lend/LendingActionButtons.tsx

@@ -9,7 +9,7 @@ import Text from 'components/Text'
 import { Tooltip } from 'components/Tooltip'
 import ConditionalWrapper from 'hocs/ConditionalWrapper'
 import useAlertDialog from 'hooks/useAlertDialog'
-import useAutoLendEnabledAccountIds from 'hooks/useAutoLendEnabledAccountIds'
+import useAutoLend from 'hooks/useAutoLend'
 import useCurrentAccountDeposits from 'hooks/useCurrentAccountDeposits'
 import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal'
 import useStore from 'store'
@@ -27,7 +27,7 @@ export default function LendingActionButtons(props: Props) {
   const accountDeposits = useCurrentAccountDeposits()
   const { openLend, openReclaim } = useLendAndReclaimModal()
   const { open: showAlertDialog } = useAlertDialog()
-  const { isAutoLendEnabledForCurrentAccount } = useAutoLendEnabledAccountIds()
+  const { isAutoLendEnabledForCurrentAccount } = useAutoLend()
   const assetDepositAmount = accountDeposits.find(byDenom(asset.denom))?.amount
   const address = useStore((s) => s.address)
   const { accountId } = useParams()

src/components/Modals/BorrowModal.tsx

@@ -15,7 +15,7 @@ import Text from 'components/Text'
 import TitleAndSubCell from 'components/TitleAndSubCell'
 import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
 import { BN_ZERO } from 'constants/math'
-import useAutoLendEnabledAccountIds from 'hooks/useAutoLendEnabledAccountIds'
+import useAutoLend from 'hooks/useAutoLend'
 import useCurrentAccount from 'hooks/useCurrentAccount'
 import useHealthComputer from 'hooks/useHealthComputer'
 import useToggle from 'hooks/useToggle'
@@ -64,7 +64,7 @@ function BorrowModal(props: Props) {
   const [max, setMax] = useState(BN_ZERO)
   const { simulateBorrow, simulateRepay } = useUpdatedAccount(account)
 
-  const { autoLendEnabledAccountIds } = useAutoLendEnabledAccountIds()
+  const { autoLendEnabledAccountIds } = useAutoLend()
   const isAutoLendEnabled = autoLendEnabledAccountIds.includes(account.id)
   const { computeMaxBorrowAmount } = useHealthComputer(account)
 
@@ -85,7 +85,7 @@ function BorrowModal(props: Props) {
       result = await repay({
         accountId: account.id,
         coin: BNCoin.fromDenomAndBigNumber(asset.denom, amount),
-        accountBalance: percentage === 100,
+        accountBalance: max.isEqualTo(amount),
         lend,
       })
     } else {

src/components/Modals/FundWithdraw/FundAccount.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import Button from 'components/Button'
 import DepositCapMessage from 'components/DepositCapMessage'
@@ -8,7 +8,7 @@ import Text from 'components/Text'
 import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
 import WalletBridges from 'components/Wallet/WalletBridges'
 import { BN_ZERO } from 'constants/math'
-import useAutoLendEnabledAccountIds from 'hooks/useAutoLendEnabledAccountIds'
+import useAutoLend from 'hooks/useAutoLend'
 import useMarketAssets from 'hooks/useMarketAssets'
 import useToggle from 'hooks/useToggle'
 import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
@@ -38,7 +38,7 @@ export default function FundAccount(props: Props) {
   const hasAssetSelected = fundingAssets.length > 0
   const hasFundingAssets =
     fundingAssets.length > 0 && fundingAssets.every((a) => a.toCoin().amount !== '0')
-  const { autoLendEnabledAccountIds } = useAutoLendEnabledAccountIds()
+  const { autoLendEnabledAccountIds } = useAutoLend()
   const isAutoLendEnabled = autoLendEnabledAccountIds.includes(accountId)
   const { simulateDeposits } = useUpdatedAccount(account)
   const { data: marketAssets } = useMarketAssets()

src/components/Modals/Settings/index.tsx

@@ -22,6 +22,7 @@ import {
 } from 'constants/localStore'
 import { BN_ZERO } from 'constants/math'
 import useAlertDialog from 'hooks/useAlertDialog'
+import useAutoLend from 'hooks/useAutoLend'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useStore from 'store'
 import { getDisplayCurrencies, getEnabledMarketAssets } from 'utils/assets'
@@ -34,6 +35,7 @@ export default function SettingsModal() {
   const { open: showResetDialog } = useAlertDialog()
   const displayCurrencies = getDisplayCurrencies()
   const assets = getEnabledMarketAssets()
+  const { setAutoLendOnAllAccounts } = useAutoLend()
   const [customSlippage, setCustomSlippage] = useState<number>(0)
   const [inputRef, setInputRef] = useState<React.RefObject<HTMLInputElement>>()
   const [isCustom, setIsCustom] = useState(false)
@@ -103,6 +105,7 @@ export default function SettingsModal() {
 
   const handleLendAssets = useCallback(
     (value: boolean) => {
+      setAutoLendOnAllAccounts(value)
       setLendAssets(value)
     },
     [setLendAssets],
@@ -228,8 +231,8 @@ export default function SettingsModal() {
         onChange={handleLendAssets}
         name='lendAssets'
         value={lendAssets}
-        label='Lend assets in credit account'
-        description='By turning this on you will automatically lend out all the assets you deposit into your credit account to earn yield.'
+        label='Lend assets in credit accounts'
+        description='By turning this on you will automatically lend out all the assets you deposit into your credit accounts to earn yield.'
         withStatus
       />
       <SettingsSwitch

src/components/Switch/SwitchAutoLend.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 
 import SwitchWithLabel from 'components/Switch/SwitchWithLabel'
-import useAutoLendEnabledAccountIds from 'hooks/useAutoLendEnabledAccountIds'
+import useAutoLend from 'hooks/useAutoLend'
 
 interface Props {
   accountId: string
@@ -10,7 +10,7 @@ interface Props {
 
 export default function SwitchAutoLend(props: Props) {
   const { accountId, className } = props
-  const { autoLendEnabledAccountIds, toggleAutoLend } = useAutoLendEnabledAccountIds()
+  const { autoLendEnabledAccountIds, toggleAutoLend } = useAutoLend()
   const isAutoLendEnabled = autoLendEnabledAccountIds.includes(accountId)
 
   return (

src/components/Trade/TradeChart/TVChartContainer.tsx

@@ -105,7 +105,7 @@ export const TVChartContainer = (props: Props) => {
   }, [props.buyAsset.mainnetDenom, props.sellAsset.mainnetDenom])
 
   return (
-    <Card title='Trading Chart' contentClassName='px-0.5 pb-0.5 h-full '>
+    <Card title='Trading Chart' contentClassName='px-0.5 pb-0.5 h-full'>
       <div ref={chartContainerRef} className='h-full' />
     </Card>
   )

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

@@ -13,7 +13,7 @@ import TradeSummary from 'components/Trade/TradeModule/SwapForm/TradeSummary'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { SLIPPAGE_KEY } from 'constants/localStore'
 import { BN_ZERO } from 'constants/math'
-import useAutoLendEnabledAccountIds from 'hooks/useAutoLendEnabledAccountIds'
+import useAutoLend from 'hooks/useAutoLend'
 import useCurrentAccount from 'hooks/useCurrentAccount'
 import useHealthComputer from 'hooks/useHealthComputer'
 import useLocalStorage from 'hooks/useLocalStorage'
@@ -51,7 +51,7 @@ export default function SwapForm(props: Props) {
   const [selectedOrderType, setSelectedOrderType] = useState<AvailableOrderType>('Market')
   const [isConfirming, setIsConfirming] = useToggle()
   const [estimatedFee, setEstimatedFee] = useState(defaultFee)
-  const { autoLendEnabledAccountIds } = useAutoLendEnabledAccountIds()
+  const { autoLendEnabledAccountIds } = useAutoLend()
   const isAutoLendEnabled = account ? autoLendEnabledAccountIds.includes(account.id) : false
 
   const throttledEstimateExactIn = useMemo(() => asyncThrottle(estimateExactIn, 250), [])

src/components/Trade/TradeModule/index.tsx

@@ -18,7 +18,7 @@ export default function TradeModule(props: Props) {
       className={classNames(
         'relative isolate max-w-full overflow-hidden rounded-base',
         'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-base before:p-[1px] before:border-glas',
-        'row-span-2 h-full',
+        'h-full',
       )}
     >
       <AssetSelector

src/hooks/useAutoLend.ts

@@ -1,12 +1,16 @@
-import useLocalStorage from 'hooks/useLocalStorage'
 import { AUTO_LEND_ENABLED_ACCOUNT_IDS_KEY } from 'constants/localStore'
 import useCurrentAccount from 'hooks/useCurrentAccount'
+import useLocalStorage from 'hooks/useLocalStorage'
+import useStore from 'store'
 
-function useAutoLendEnabledAccountIds(): {
+export default function useAutoLend(): {
   autoLendEnabledAccountIds: string[]
   toggleAutoLend: (accountId: string) => void
   isAutoLendEnabledForCurrentAccount: boolean
+  setAutoLendOnAllAccounts: (lendAssets: boolean) => void
+  enableAutoLendAccountId: (accountId: string) => void
 } {
+  const accounts = useStore((s) => s.accounts)
   const currentAccount = useCurrentAccount()
   const [autoLendEnabledAccountIds, setAutoLendEnabledAccountIds] = useLocalStorage<string[]>(
     AUTO_LEND_ENABLED_ACCOUNT_IDS_KEY,
@@ -27,7 +31,22 @@ function useAutoLendEnabledAccountIds(): {
     ? autoLendEnabledAccountIds.includes(currentAccount.id)
     : false
 
-  return { autoLendEnabledAccountIds, toggleAutoLend, isAutoLendEnabledForCurrentAccount }
-}
+  const setAutoLendOnAllAccounts = (lendAssets: boolean) => {
+    const allAccountIds = accounts ? accounts.map((account) => account.id) : []
+    setAutoLendEnabledAccountIds(lendAssets ? allAccountIds : [])
+  }
 
-export default useAutoLendEnabledAccountIds
+  const enableAutoLendAccountId = (accountId: string) => {
+    const setOfAccountIds = new Set(autoLendEnabledAccountIds)
+
+    if (!setOfAccountIds.has(accountId)) setOfAccountIds.add(accountId)
+  }
+
+  return {
+    autoLendEnabledAccountIds,
+    toggleAutoLend,
+    isAutoLendEnabledForCurrentAccount,
+    setAutoLendOnAllAccounts,
+    enableAutoLendAccountId,
+  }
+}

src/pages/TradePage.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react'
 
+import AccountDetailsCard from 'components/Trade/AccountDetailsCard'
 import TradeChart from 'components/Trade/TradeChart'
 import TradeModule from 'components/Trade/TradeModule'
 import { getEnabledMarketAssets } from 'utils/assets'
-import AccountDetailsCard from 'components/Trade/AccountDetailsCard'
 
 export default function TradePage() {
   const enabledMarketAssets = getEnabledMarketAssets()
@@ -19,6 +19,7 @@ export default function TradePage() {
         onChangeSellAsset={setSellAsset}
       />
       <TradeChart buyAsset={buyAsset} sellAsset={sellAsset} />
+      <div />
       <AccountDetailsCard />
     </div>
   )

tailwind.config.js

@@ -245,7 +245,8 @@ module.exports = {
           filter: 'blur(clamp(60px, 10vw, 110px))',
         },
         '.border-glas': {
-          background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0))',
+          background:
+            'linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05))',
           mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
           '-webkit-mask-composite': 'xor',
           maskComposite: 'exclude',