Transaction Preview
{conversionErrorMessage}
} {quote.error &&{quote.error}
} @@ -408,7 +425,6 @@ export function AddCollateralAndLeverage({ onClick={handleLeverage} isLoading={isLoadingPermit2 || leveragePending || quote.isLoading || isLoadingInputConversion} disabled={ - !support.supportsLeverage || route == null || collateralInputError !== null || conversionErrorMessage !== null || diff --git a/src/modals/leverage/components/remove-collateral-and-deleverage.tsx b/src/modals/leverage/components/remove-collateral-and-deleverage.tsx index 610c59bf..bd4caff8 100644 --- a/src/modals/leverage/components/remove-collateral-and-deleverage.tsx +++ b/src/modals/leverage/components/remove-collateral-and-deleverage.tsx @@ -1,4 +1,5 @@ import { useCallback, useMemo, useState } from 'react'; +import { useConnection } from 'wagmi'; import Input from '@/components/Input/Input'; import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton'; import { Tooltip } from '@/components/ui/tooltip'; @@ -9,13 +10,13 @@ import { useDeleverageQuote } from '@/hooks/useDeleverageQuote'; import { useDeleverageTransaction } from '@/hooks/useDeleverageTransaction'; import { formatBalance } from '@/utils/balance'; import type { Market, MarketPosition } from '@/utils/types'; -import type { LeverageSupport } from '@/hooks/leverage/types'; +import type { LeverageRoute } from '@/hooks/leverage/types'; import { computeLtv, formatLtvPercent, getLTVColor } from '@/modals/borrow/components/helpers'; import { BorrowPositionRiskCard } from '@/modals/borrow/components/borrow-position-risk-card'; type RemoveCollateralAndDeleverageProps = { market: Market; - support: LeverageSupport; + route: LeverageRoute | null; currentPosition: MarketPosition | null; oraclePrice: bigint; onSuccess?: () => void; @@ -24,13 +25,14 @@ type RemoveCollateralAndDeleverageProps = { export function RemoveCollateralAndDeleverage({ market, - support, + route, currentPosition, oraclePrice, onSuccess, isRefreshing = false, }: RemoveCollateralAndDeleverageProps): JSX.Element { - const route = support.route; + const { address: account } = useConnection(); + const isSwapRoute = route?.kind === 'swap'; const [withdrawCollateralAmount, setWithdrawCollateralAmount] = useState{quote.error}
} @@ -216,7 +230,6 @@ export function RemoveCollateralAndDeleverage({ onClick={handleDeleverage} isLoading={deleveragePending || quote.isLoading} disabled={ - !support.supportsDeleverage || route == null || withdrawInputError !== null || quote.error !== null || diff --git a/src/modals/leverage/leverage-modal.tsx b/src/modals/leverage/leverage-modal.tsx index 6a979afe..0d6d3709 100644 --- a/src/modals/leverage/leverage-modal.tsx +++ b/src/modals/leverage/leverage-modal.tsx @@ -1,11 +1,12 @@ -import { useCallback, useState } from 'react'; -import { erc20Abi } from 'viem'; +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { type Address, erc20Abi } from 'viem'; import { useConnection, useReadContract } from 'wagmi'; import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal'; import { ModalIntentSwitcher } from '@/components/common/Modal/ModalIntentSwitcher'; import { TokenIcon } from '@/components/shared/token-icon'; import { Badge } from '@/components/ui/badge'; -import { useLeverageSupport } from '@/hooks/useLeverageSupport'; +import { useLeverageRouteAvailability } from '@/hooks/leverage/useLeverageRouteAvailability'; +import type { LeverageRoute } from '@/hooks/leverage/types'; import type { Market, MarketPosition } from '@/utils/types'; import { AddCollateralAndLeverage } from './components/add-collateral-and-leverage'; import { RemoveCollateralAndDeleverage } from './components/remove-collateral-and-deleverage'; @@ -32,9 +33,56 @@ export function LeverageModal({ toggleLeverageDeleverage = true, }: LeverageModalProps): JSX.Element { const [mode, setMode] = useState<'leverage' | 'deleverage'>(defaultMode); + const [routeMode, setRouteMode] = useState<'swap' | 'erc4626'>('erc4626'); const { address: account } = useConnection(); - const support = useLeverageSupport({ market }); - const isErc4626Route = support.route?.kind === 'erc4626'; + + const { swapRoute, isErc4626ModeAvailable, availableRouteModes, isErc4626ProbeLoading, isErc4626ProbeRefetching } = + useLeverageRouteAvailability({ + chainId: market.morphoBlue.chain.id, + collateralTokenAddress: market.collateralAsset.address, + loanTokenAddress: market.loanAsset.address, + }); + + useEffect(() => { + if (availableRouteModes.length === 0) return; + if (availableRouteModes.includes(routeMode)) return; + + const waitingForErc4626Availability = + routeMode === 'erc4626' && !isErc4626ModeAvailable && (isErc4626ProbeLoading || isErc4626ProbeRefetching); + if (waitingForErc4626Availability) return; + + setRouteMode(availableRouteModes[0]); + }, [availableRouteModes, routeMode, isErc4626ModeAvailable, isErc4626ProbeLoading, isErc4626ProbeRefetching]); + + const route = useMemo