Auto Lend Switch (#660)

* refactor: moved the autolend logic to the switch

* tidy: update default value

* adjust logic of auto-lend for switch component

---------

Co-authored-by: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>

src/components/Account/AccountFund/AccountFundContent.tsx

@@ -11,7 +11,6 @@ import WalletBridges from 'components/Wallet/WalletBridges'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'
-import useAutoLend from 'hooks/useAutoLend'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useMarketAssets from 'hooks/useMarketAssets'
 import useToggle from 'hooks/useToggle'
@@ -34,20 +33,17 @@ interface Props {
 
 export default function AccountFundContent(props: Props) {
   const deposit = useStore((s) => s.deposit)
-  const accounts = useStore((s) => s.accounts)
   const walletAssetModal = useStore((s) => s.walletAssetsModal)
   const [isConfirming, setIsConfirming] = useState(false)
-  const [lendAssets, setLendAssets] = useLocalStorage<boolean>(
+  const [lendAssets] = useLocalStorage<boolean>(
     LocalStorageKeys.LEND_ASSETS,
     DEFAULT_SETTINGS.lendAssets,
   )
   const [fundingAssets, setFundingAssets] = useState<BNCoin[]>([])
   const { data: marketAssets } = useMarketAssets()
   const { data: walletBalances } = useWalletBalances(props.address)
-  const { autoLendEnabledAccountIds } = useAutoLend()
   const [isLending, toggleIsLending] = useToggle(lendAssets)
   const { simulateDeposits } = useUpdatedAccount(props.account)
-  const autoLendEnabled = autoLendEnabledAccountIds.includes(props.accountId)
   const baseAsset = getBaseAsset()
 
   const hasAssetSelected = fundingAssets.length > 0
@@ -134,14 +130,6 @@ export default function AccountFundContent(props: Props) {
     })
   }, [])
 
-  useEffect(() => {
-    toggleIsLending(autoLendEnabled)
-  }, [autoLendEnabled, toggleIsLending])
-
-  useEffect(() => {
-    if (accounts?.length === 1 && isLending) setLendAssets(true)
-  }, [isLending, accounts, lendAssets, setLendAssets])
-
   const depositCapReachedCoins = useMemo(() => {
     const depositCapReachedCoins: BNCoin[] = []
     fundingAssets.forEach((asset) => {
@@ -205,8 +193,6 @@ export default function AccountFundContent(props: Props) {
         <SwitchAutoLend
           className='pt-4 mt-4 border border-transparent border-t-white/10'
           accountId={props.accountId}
-          value={!props.isFullPage ? isLending : undefined}
-          onChange={!props.isFullPage ? toggleIsLending : undefined}
         />
       </div>
       <Button

src/components/Switch/SwitchAutoLend.tsx

@@ -1,32 +1,51 @@
 import classNames from 'classnames'
+import { useCallback } from 'react'
 
 import SwitchWithLabel from 'components/Switch/SwitchWithLabel'
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useAutoLend from 'hooks/useAutoLend'
+import useLocalStorage from 'hooks/useLocalStorage'
 
 interface Props {
   accountId: string
   className?: string
-  onChange?: () => void
-  value?: boolean
 }
 
 export default function SwitchAutoLend(props: Props) {
   const { accountId, className } = props
-  const { autoLendEnabledAccountIds, toggleAutoLend } = useAutoLend()
-  const isAutoLendEnabled = autoLendEnabledAccountIds.includes(accountId)
+  const { autoLendEnabledAccountIds, disableAutoLend, enableAutoLend } = useAutoLend()
+  const isAutoLendEnabledForAccount = autoLendEnabledAccountIds.includes(accountId)
+  const [isAutoLendEnabled, setIsAutoLendEnabled] = useLocalStorage<boolean>(
+    LocalStorageKeys.LEND_ASSETS,
+    DEFAULT_SETTINGS.lendAssets,
+  )
 
-  function handleToggle() {
-    if (props.onChange) return props.onChange()
-
-    toggleAutoLend(accountId)
+  const handleToggle = useCallback(() => {
+    if (!isAutoLendEnabledForAccount) {
+      enableAutoLend(accountId)
+      return
     }
 
+    if (isAutoLendEnabled) {
+      setIsAutoLendEnabled(false)
+      disableAutoLend(accountId)
+    }
+  }, [
+    accountId,
+    disableAutoLend,
+    enableAutoLend,
+    isAutoLendEnabled,
+    isAutoLendEnabledForAccount,
+    setIsAutoLendEnabled,
+  ])
+
   return (
     <div className={classNames('w-full', className)}>
       <SwitchWithLabel
-        name='isLending'
+        name={`isLending-${accountId}`}
         label='Lend assets to earn yield'
-        value={props.value !== undefined ? props.value : isAutoLendEnabled}
+        value={isAutoLendEnabledForAccount}
         onChange={handleToggle}
         tooltip={`Fund your account and lend assets effortlessly! By lending, you'll earn attractive interest (APY) without impacting your loan to value (LTV). It's a win-win situation - don't miss out on this easy opportunity to grow your holdings!`}
       />

src/hooks/useAutoLend.ts

@@ -5,7 +5,8 @@ import useStore from 'store'
 
 export default function useAutoLend(): {
   autoLendEnabledAccountIds: string[]
-  toggleAutoLend: (accountId: string) => void
+  enableAutoLend: (accountId: string) => void
+  disableAutoLend: (accountId: string) => void
   isAutoLendEnabledForCurrentAccount: boolean
   setAutoLendOnAllAccounts: (lendAssets: boolean) => void
   enableAutoLendAccountId: (accountId: string) => void
@@ -17,13 +18,15 @@ export default function useAutoLend(): {
     [],
   )
 
-  const toggleAutoLend = (accountId: string) => {
+  const enableAutoLend = (accountId: string) => {
     const setOfAccountIds = new Set(autoLendEnabledAccountIds)
+    setOfAccountIds.add(accountId)
+    setAutoLendEnabledAccountIds(Array.from(setOfAccountIds))
+  }
 
-    setOfAccountIds.has(accountId)
-      ? setOfAccountIds.delete(accountId)
-      : setOfAccountIds.add(accountId)
-
+  const disableAutoLend = (accountId: string) => {
+    const setOfAccountIds = new Set(autoLendEnabledAccountIds)
+    setOfAccountIds.delete(accountId)
     setAutoLendEnabledAccountIds(Array.from(setOfAccountIds))
   }
 
@@ -45,7 +48,8 @@ export default function useAutoLend(): {
 
   return {
     autoLendEnabledAccountIds,
-    toggleAutoLend,
+    enableAutoLend,
+    disableAutoLend,
     isAutoLendEnabledForCurrentAccount,
     setAutoLendOnAllAccounts,
     enableAutoLendAccountId,

src/pages/_layout.tsx

@@ -46,6 +46,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     LocalStorageKeys.REDUCE_MOTION,
     DEFAULT_SETTINGS.reduceMotion,
   )
+
   const accountDetailsExpanded = useStore((s) => s.accountDetailsExpanded)
   const isFullWidth =
     location.pathname.includes('trade') ||
@@ -64,7 +65,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           'lg:mt-[73px]',
           'flex',
           'min-h-screen gap-6 px-4 py-6 w-full relative',
-          isFullWidth && accountId && (accountDetailsExpanded ? 'pr-118' : 'pr-24'),
+          !focusComponent &&
+            isFullWidth &&
+            accountId &&
+            (accountDetailsExpanded ? 'pr-118' : 'pr-24'),
           !reduceMotion && isFullWidth && 'transition-all duration-300',
           'justify-center',
           focusComponent && 'items-center',