diff --git a/src/components/Account/AccountMenuContent.tsx b/src/components/Account/AccountMenuContent.tsx index 902919e3..80793a29 100644 --- a/src/components/Account/AccountMenuContent.tsx +++ b/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(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: , diff --git a/src/components/Earn/Lend/LendingActionButtons.tsx b/src/components/Earn/Lend/LendingActionButtons.tsx index 792d79a1..46d32e29 100644 --- a/src/components/Earn/Lend/LendingActionButtons.tsx +++ b/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() diff --git a/src/components/Modals/BorrowModal.tsx b/src/components/Modals/BorrowModal.tsx index d0cc20d2..d50ea9b4 100644 --- a/src/components/Modals/BorrowModal.tsx +++ b/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 { diff --git a/src/components/Modals/FundWithdraw/FundAccount.tsx b/src/components/Modals/FundWithdraw/FundAccount.tsx index 4d34c148..1b920e41 100644 --- a/src/components/Modals/FundWithdraw/FundAccount.tsx +++ b/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() diff --git a/src/components/Modals/Settings/index.tsx b/src/components/Modals/Settings/index.tsx index 93b1e948..71852f91 100644 --- a/src/components/Modals/Settings/index.tsx +++ b/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(0) const [inputRef, setInputRef] = useState>() 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 /> { }, [props.buyAsset.mainnetDenom, props.sellAsset.mainnetDenom]) return ( - +
) diff --git a/src/components/Trade/TradeModule/SwapForm/index.tsx b/src/components/Trade/TradeModule/SwapForm/index.tsx index 8ae945e9..83f57c2a 100644 --- a/src/components/Trade/TradeModule/SwapForm/index.tsx +++ b/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('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), []) diff --git a/src/components/Trade/TradeModule/index.tsx b/src/components/Trade/TradeModule/index.tsx index 8af62e08..321549d0 100644 --- a/src/components/Trade/TradeModule/index.tsx +++ b/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', )} > void isAutoLendEnabledForCurrentAccount: boolean + setAutoLendOnAllAccounts: (lendAssets: boolean) => void + enableAutoLendAccountId: (accountId: string) => void } { + const accounts = useStore((s) => s.accounts) const currentAccount = useCurrentAccount() const [autoLendEnabledAccountIds, setAutoLendEnabledAccountIds] = useLocalStorage( 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, + } +} diff --git a/src/pages/TradePage.tsx b/src/pages/TradePage.tsx index 71fcdab5..db21893a 100644 --- a/src/pages/TradePage.tsx +++ b/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} /> +
) diff --git a/tailwind.config.js b/tailwind.config.js index 2a11ffb0..38c413ac 100644 --- a/tailwind.config.js +++ b/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',