diff --git a/apps/main/src/llamalend/queries/market-list/llama-markets.ts b/apps/main/src/llamalend/queries/market-list/llama-markets.ts index 787ae4441a..3be78013cb 100644 --- a/apps/main/src/llamalend/queries/market-list/llama-markets.ts +++ b/apps/main/src/llamalend/queries/market-list/llama-markets.ts @@ -319,11 +319,7 @@ const convertMintMarket = ( }, type: LlamaMarketType.Mint, deprecatedMessage: DEPRECATED_LLAMAS[chain]?.[llamma] ?? null, - url: getInternalUrl( - 'crvusd', - chain, - `${CRVUSD_ROUTES.PAGE_MARKETS}/${name}/${hasBorrow ? 'manage/loan' : 'create'}`, - ), + url: getInternalUrl('crvusd', chain, `${CRVUSD_ROUTES.PAGE_MARKETS}/${name}`), isFavorite: favoriteMarkets.has(llamma), rewards: [...(campaigns[address.toLowerCase()] ?? []), ...(campaigns[llamma.toLowerCase()] ?? [])], leverage, diff --git a/apps/main/src/loan/components/ChartBandBalances/index.tsx b/apps/main/src/loan/components/ChartBandBalances/index.tsx index 79b2962ae0..1fde041773 100644 --- a/apps/main/src/loan/components/ChartBandBalances/index.tsx +++ b/apps/main/src/loan/components/ChartBandBalances/index.tsx @@ -17,7 +17,7 @@ import { styled } from 'styled-components' import ChartBandBalancesSettings from '@/loan/components/ChartBandBalances/ChartBandBalancesSettings' import type { BrushStartEndIndex } from '@/loan/components/ChartBandBalances/types' import ChartTooltip, { TipContent, TipIcon, TipTitle } from '@/loan/components/ChartTooltip' -import type { PageLoanManageProps } from '@/loan/components/PageLoanManage/types' +import type { ManageLoanProps } from '@/loan/components/PageMintMarket/types' import useStore from '@/loan/store/useStore' import { BandsBalancesData } from '@/loan/types/loan.types' import { getTokenName } from '@/loan/utils/utilsLoan' @@ -26,7 +26,7 @@ import Spinner, { SpinnerWrapper } from '@ui/Spinner' import { BN, FORMAT_OPTIONS, formatNumber } from '@ui/utils' import { t } from '@ui-kit/lib/i18n' -interface Props extends Pick { +interface Props extends Pick { brushIndex: BrushStartEndIndex data: BandsBalancesData[] oraclePrice: string | undefined @@ -38,7 +38,7 @@ interface Props extends Pick { const ChartBandBalances = ({ brushIndex, - llamma, + market: llamma, data, oraclePrice, oraclePriceBand, diff --git a/apps/main/src/loan/components/ChartUserBands.tsx b/apps/main/src/loan/components/ChartUserBands.tsx index 9779b853eb..07ff63c146 100644 --- a/apps/main/src/loan/components/ChartUserBands.tsx +++ b/apps/main/src/loan/components/ChartUserBands.tsx @@ -79,7 +79,7 @@ const ChartUserBands = ({ { - const params = useParams() - const { rFormType = null, rCollateralId } = parseCollateralParams(params) - const push = useNavigate() - const { isHydrated, llamaApi: curve = null, connectState } = useCurve() - const rChainId = useChainId(params) - const { connect: connectWallet, provider } = useWallet() - const { address } = useConnection() - const [loaded, setLoaded] = useState(false) - - const market = useMintMarket({ chainId: rChainId, marketId: rCollateralId }) - const marketId = market?.id ?? '' - - const formValues = useStore((state) => state.loanCreate.formValues) - const { data: loanExists } = useLoanExists({ chainId: rChainId, marketId, userAddress: address }) - const isMdUp = useLayoutStore((state) => state.isMdUp) - const fetchLoanDetails = useStore((state) => state.loans.fetchLoanDetails) - const fetchUserLoanWalletBalances = useStore((state) => state.loans.fetchUserLoanWalletBalances) - const resetUserDetailsState = useStore((state) => state.loans.resetUserDetailsState) - const setFormValues = useStore((state) => state.loanCreate.setFormValues) - const setStateByKeys = useStore((state) => state.loanCreate.setStateByKeys) - - const maxSlippage = useUserProfileStore((state) => state.maxSlippage.crypto) - - const isReady = !!market - const isLeverage = rFormType === 'leverage' - - const marketDetails = useMarketDetails({ chainId: rChainId, llamma: market, llammaId: marketId }) - const network = networks[rChainId] - const { - data: userCollateralEvents, - isLoading: collateralEventsIsLoading, - isError: collateralEventsIsError, - } = useUserCollateralEvents({ - app: 'crvusd', - chain: isChain(network.id) ? network.id : undefined, - controllerAddress: market?.controller as Address, - userAddress: curve?.signerAddress, - collateralToken: market && { - symbol: market.collateralSymbol, - address: market.collateral, - decimals: market.collateralDecimals, - name: market.collateralSymbol, - }, - borrowToken: CRVUSD, - network, - }) - - const fetchInitial = useCallback( - (curve: LlamaApi, isLeverage: boolean, llamma: Llamma) => { - // reset createLoan estGas, detailInfo state - setStateByKeys({ - formEstGas: {}, - detailInfo: {}, - detailInfoLeverage: {}, - liqRanges: {}, - liqRangesMapper: {}, - maxRecv: {}, - maxRecvLeverage: {}, - }) - - const updatedFormValues = { ...formValues, n: formValues.n || llamma.defaultBands } - void setFormValues(curve, isLeverage, llamma, updatedFormValues, maxSlippage) - - if (curve.signerAddress) { - void fetchUserLoanWalletBalances(curve, llamma) - } - }, - [fetchUserLoanWalletBalances, formValues, maxSlippage, setFormValues, setStateByKeys], - ) - - useEffect(() => { - if (!isHydrated || !curve || !market) return - resetUserDetailsState(market) - fetchInitial(curve, isLeverage, market) - void fetchLoanDetails(curve, market) - setLoaded(true) - }, [isHydrated, curve, market, resetUserDetailsState, fetchInitial, isLeverage, fetchLoanDetails]) - - // redirect if loan exists - useEffect(() => { - if (!loaded && market && loanExists) { - push(getLoanManagePathname(params, market.id, 'loan')) - } - }, [loaded, loanExists, market, params, push]) - - // redirect if form is leverage but no leverage option - useEffect(() => { - if (market && rFormType === 'leverage' && !hasV1Leverage(market)) { - push(getLoanCreatePathname(params, market.id)) - } - }, [loaded, rFormType, market, push, params]) - - // max slippage updated - useEffect(() => { - if (loaded && !!curve && market) { - void setFormValues(curve, isLeverage, market, formValues, maxSlippage) - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [maxSlippage]) - - usePageVisibleInterval(() => { - if (curve && market) { - void fetchLoanDetails(curve, market) - } - }, REFRESH_INTERVAL['1m']) - - const TitleComp = () => ( - - {/** TODO: generalize or re-use existing market counting technique, see `createCountMarket` in llama-markets.ts */} - {market?.id === 'sfrxeth2' ? 'sfrxETH v2' : getTokenName(market).collateral} - - ) - - return isHydrated && !market ? ( - - ) : provider ? ( - <> - - - {rChainId && rCollateralId && ( - - )} - - - {!loanExists && ( - t.design.Layer[1].Fill }}> - - {userCollateralEvents?.events && userCollateralEvents.events.length > 0 && ( - - )} - - )} - - - {} - - - - - ) : ( - - connectWallet()} - isLoading={isLoading(connectState)} - /> - - ) -} - -const Title = styled(TextEllipsis)` - color: var(--page--text-color); - font-size: var(--font-size-5); - font-weight: bold; - line-height: 1; - padding: 0 2px; -` - -export default Page diff --git a/apps/main/src/loan/components/PageLoanCreate/index.tsx b/apps/main/src/loan/components/PageLoanCreate/index.tsx deleted file mode 100644 index 6a27973b91..0000000000 --- a/apps/main/src/loan/components/PageLoanCreate/index.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import { useCallback, useMemo } from 'react' -import { CreateLoanForm } from '@/llamalend/features/borrow/components/CreateLoanForm' -import type { OnBorrowFormUpdate } from '@/llamalend/features/borrow/types' -import type { BorrowMutation, CreateLoanOptions } from '@/llamalend/mutations/create-loan.mutation' -import LoanFormCreate from '@/loan/components/PageLoanCreate/LoanFormCreate' -import type { FormType, FormValues, PageLoanCreateProps } from '@/loan/components/PageLoanCreate/types' -import { DEFAULT_FORM_VALUES } from '@/loan/components/PageLoanCreate/utils' -import useCollateralAlert from '@/loan/hooks/useCollateralAlert' -import networks from '@/loan/networks' -import useStore from '@/loan/store/useStore' -import { LlamaApi, Llamma } from '@/loan/types/loan.types' -import { hasV1Leverage } from '@/loan/utils/leverage' -import { getLoanCreatePathname, getLoanManagePathname } from '@/loan/utils/utilsRouter' -import Stack from '@mui/material/Stack' -import { AppFormContentWrapper } from '@ui/AppForm' -import { useNavigate } from '@ui-kit/hooks/router' -import { useCreateLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags' -import { t } from '@ui-kit/lib/i18n' -import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher' -import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces' - -const { MaxWidth } = SizesAndSpaces - -/** - * Callback that synchronizes the `ChartOhlc` component with the `RangeSlider` component in the new `BorrowTabContents`. - */ -const useOnFormUpdate = ({ curve, llamma }: PageLoanCreateProps): OnBorrowFormUpdate => - useCallback( - async ({ debt, userCollateral, range, slippage, leverageEnabled }) => { - if (!curve || !llamma) return - const { setFormValues, setStateByKeys } = useStore.getState().loanCreate - const formValues: FormValues = { - ...DEFAULT_FORM_VALUES, - n: range, - debt: `${debt ?? ''}`, - collateral: `${userCollateral ?? ''}`, - } - await setFormValues(curve, leverageEnabled, llamma, formValues, `${slippage}`) - setStateByKeys({ isEditLiqRange: true }) - }, - [curve, llamma], - ) - -const LoanCreate = ({ - fetchInitial, - ...props -}: PageLoanCreateProps & { - loanExists: boolean | undefined - fetchInitial: (curve: LlamaApi, isLeverage: boolean, llamma: Llamma) => void -}) => { - const { curve, llamma, loanExists, params, rCollateralId, rFormType, rChainId } = props - const push = useNavigate() - const collateralAlert = useCollateralAlert(llamma?.address) - const isBorrowUnifiedForm = useCreateLoanMuiForm() - const onUpdate = useOnFormUpdate(props) - const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated) - - const onCreated: NonNullable = useCallback( - async (_data, _receipt, { slippage, leverageEnabled }: BorrowMutation) => - curve && llamma && (await onLoanCreated(curve, leverageEnabled, llamma, slippage)), - [curve, llamma, onLoanCreated], - ) - - type Tab = 'create' | 'leverage' - const tabs: TabOption[] = useMemo( - () => - isBorrowUnifiedForm - ? // the new borrow form contains both create and leverage functionality - [{ value: 'create' as const, label: t`Borrow` }] - : [ - { value: 'create' as const, label: t`Create Loan` }, - ...(hasV1Leverage(llamma) ? [{ value: 'leverage' as const, label: t`Leverage` }] : []), - ], - [llamma, isBorrowUnifiedForm], - ) - - const handleTabClick = useCallback( - (formType: FormType) => { - if (loanExists) { - push(getLoanManagePathname(params, rCollateralId, 'loan')) - } else { - if (curve && llamma) { - fetchInitial(curve, formType === 'leverage', llamma) - } - push(getLoanCreatePathname(params, rCollateralId, formType)) - } - }, - [curve, fetchInitial, llamma, loanExists, push, params, rCollateralId], - ) - - return ( - - handleTabClick(key as FormType)} - options={tabs} - /> - {isBorrowUnifiedForm ? ( - - ) : ( - t.design.Layer[1].Fill }}> - - - - - )} - - ) -} - -export default LoanCreate diff --git a/apps/main/src/loan/components/PageLoanCreate/utils.ts b/apps/main/src/loan/components/PageLoanCreate/utils.ts deleted file mode 100644 index f16621e9a8..0000000000 --- a/apps/main/src/loan/components/PageLoanCreate/utils.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type { FormDetailInfoLeverage, FormStatus, FormValues } from '@/loan/components/PageLoanCreate/types' -import { DEFAULT_FORM_STATUS as FORM_STATUS } from '@/loan/components/PageLoanManage/utils' - -export const DEFAULT_DETAIL_INFO_LEVERAGE: FormDetailInfoLeverage = { - collateral: '', - leverage: '', - routeName: '', - maxRange: null, - healthFull: '', - healthNotFull: '', - bands: [0, 0], - prices: [], - priceImpact: '', - isHighImpact: false, - error: '', - loading: false, -} - -export const DEFAULT_FORM_STATUS: FormStatus = { - ...FORM_STATUS, - warning: '', - step: '', -} - -export const DEFAULT_FORM_VALUES: FormValues = { - collateral: '', - collateralError: '', - debt: '', - debtError: '', - n: null, -} diff --git a/apps/main/src/loan/components/PageLoanManage/index.tsx b/apps/main/src/loan/components/PageLoanManage/index.tsx deleted file mode 100644 index 481e69d179..0000000000 --- a/apps/main/src/loan/components/PageLoanManage/index.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import { useEffect, useMemo, useState } from 'react' -import { AddCollateralForm } from '@/llamalend/features/manage-loan/components/AddCollateralForm' -import { RemoveCollateralForm } from '@/llamalend/features/manage-loan/components/RemoveCollateralForm' -import { RepayForm } from '@/llamalend/features/manage-loan/components/RepayForm' -import CollateralDecrease from '@/loan/components/PageLoanManage/CollateralDecrease' -import CollateralIncrease from '@/loan/components/PageLoanManage/CollateralIncrease' -import LoanDecrease from '@/loan/components/PageLoanManage/LoanDecrease' -import LoanDeleverage from '@/loan/components/PageLoanManage/LoanDeleverage' -import LoanIncrease from '@/loan/components/PageLoanManage/LoanIncrease' -import LoanLiquidate from '@/loan/components/PageLoanManage/LoanLiquidate' -import type { - CollateralFormType, - FormType, - LoanFormType, - PageLoanManageProps, -} from '@/loan/components/PageLoanManage/types' -import networks from '@/loan/networks' -import { hasDeleverage } from '@/loan/utils/leverage' -import { getLoanManagePathname } from '@/loan/utils/utilsRouter' -import Stack from '@mui/material/Stack' -import { AppFormContentWrapper } from '@ui/AppForm' -import { useNavigate } from '@ui-kit/hooks/router' -import { useManageLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags' -import { t } from '@ui-kit/lib/i18n' -import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher' -import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces' - -interface Props extends PageLoanManageProps {} - -const { MaxWidth } = SizesAndSpaces - -const tabsLoan: TabOption[] = [ - { value: 'loan-increase', label: t`Borrow more` }, - { value: 'loan-decrease', label: t`Repay` }, - { value: 'loan-liquidate', label: t`Self-liquidate` }, -] - -const tabsCollateral: TabOption[] = [ - { value: 'collateral-increase', label: t`Add` }, - { value: 'collateral-decrease', label: t`Remove` }, -] - -const LoanManage = ({ curve, isReady, llamma, llammaId, params, rChainId, rCollateralId, rFormType }: Props) => { - const push = useNavigate() - const shouldUseManageLoanMuiForm = useManageLoanMuiForm() - const useMuiForm = shouldUseManageLoanMuiForm && !!llamma - - type Tab = 'loan' | 'collateral' | 'deleverage' - const tabs: TabOption[] = [ - { value: 'loan' as const, label: t`Loan` }, - { value: 'collateral' as const, label: t`Collateral` }, - ...(hasDeleverage(llamma) ? [{ value: 'deleverage' as const, label: t`Delever` }] : []), - ] - - type SubTab = LoanFormType | CollateralFormType - const [subTab, setSubTab] = useState('loan-increase') - - const subTabs = useMemo( - () => (rFormType === 'loan' ? tabsLoan : rFormType === 'collateral' ? tabsCollateral : []), - [rFormType], - ) - useEffect(() => setSubTab(subTabs[0]?.value), [subTabs]) - - const formProps = { curve, isReady, llamma, llammaId, rChainId } - - return ( - - push(getLoanManagePathname(params, rCollateralId, key as FormType))} - options={tabs} - /> - - {useMuiForm ? ( - <> - - - {subTab === 'loan-increase' && ( - t.design.Layer[1].Fill }}> - - - - - )} - {subTab === 'loan-decrease' && llamma && ( - {}} - fromBorrowed - fromCollateral - fromWallet - /> - )} - {subTab === 'loan-liquidate' && } - {subTab === 'collateral-increase' && llamma && ( - {}} - /> - )} - {subTab === 'collateral-decrease' && llamma && ( - {}} - /> - )} - {/** Deleverage has no subtabs */} - {rFormType === 'deleverage' && } - - ) : ( - t.design.Layer[1].Fill }}> - - - - {subTab === 'loan-increase' && } - {subTab === 'loan-decrease' && } - {subTab === 'loan-liquidate' && } - {subTab === 'collateral-increase' && } - {subTab === 'collateral-decrease' && } - {/** Deleverage has no subtabs */} - {rFormType === 'deleverage' && } - - - )} - - ) -} - -export default LoanManage diff --git a/apps/main/src/loan/components/PageLoanManage/types.ts b/apps/main/src/loan/components/PageLoanManage/types.ts deleted file mode 100644 index 61ca3cec0d..0000000000 --- a/apps/main/src/loan/components/PageLoanManage/types.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { ChainId, type CollateralUrlParams, LlamaApi, Llamma } from '@/loan/types/loan.types' - -export type FormType = 'loan' | 'collateral' | 'swap' | 'deleverage' -export type LoanFormType = 'loan-increase' | 'loan-decrease' | 'loan-liquidate' -export type CollateralFormType = 'collateral-increase' | 'collateral-decrease' - -export type FormStatus = { - isApproved: boolean - isComplete: boolean - isInProgress: boolean - error: string -} - -export type FormEstGas = { - estimatedGas: number - loading?: boolean -} - -export type FormDetailInfo = { - healthFull: string - healthNotFull: string - bands: [number, number] - prices: string[] - loading: boolean -} - -export type PageLoanManageProps = { - curve: LlamaApi | null - isReady: boolean - llamma: Llamma | null - llammaId: string - params: CollateralUrlParams - rChainId: ChainId - rCollateralId: string - rFormType: FormType -} diff --git a/apps/main/src/loan/components/PageLoanManage/utils.ts b/apps/main/src/loan/components/PageLoanManage/utils.ts deleted file mode 100644 index ec180233b2..0000000000 --- a/apps/main/src/loan/components/PageLoanManage/utils.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { FormDetailInfo, FormEstGas, FormStatus } from '@/loan/components/PageLoanManage/types' -import { UserWalletBalances } from '@/loan/types/loan.types' - -export const DEFAULT_DETAIL_INFO: FormDetailInfo = { - healthFull: '', - healthNotFull: '', - bands: [0, 0], - prices: [], - loading: false, -} - -export const DEFAULT_FORM_EST_GAS: FormEstGas = { - estimatedGas: 0, - loading: false, -} - -export const DEFAULT_FORM_STATUS: FormStatus = { - isApproved: false, - isComplete: false, - isInProgress: false, - error: '', -} - -export const DEFAULT_USER_WALLET_BALANCES: UserWalletBalances = { - collateral: '0', - stablecoin: '0', - error: '', -} diff --git a/apps/main/src/loan/components/PageLoanManage/CollateralDecrease/index.tsx b/apps/main/src/loan/components/PageMintMarket/CollateralDecrease/index.tsx similarity index 97% rename from apps/main/src/loan/components/PageLoanManage/CollateralDecrease/index.tsx rename to apps/main/src/loan/components/PageMintMarket/CollateralDecrease/index.tsx index 50ebb2a47b..b469a8520d 100644 --- a/apps/main/src/loan/components/PageLoanManage/CollateralDecrease/index.tsx +++ b/apps/main/src/loan/components/PageMintMarket/CollateralDecrease/index.tsx @@ -7,10 +7,10 @@ import DetailInfoHealth from '@/loan/components/DetailInfoHealth' import DetailInfoLiqRange from '@/loan/components/DetailInfoLiqRange' import DialogHealthWarning from '@/loan/components/DialogHealthWarning' import LoanFormConnect from '@/loan/components/LoanFormConnect' -import type { FormStatus, FormValues, StepKey } from '@/loan/components/PageLoanManage/CollateralDecrease/types' -import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageLoanManage/styles' -import type { FormEstGas, PageLoanManageProps } from '@/loan/components/PageLoanManage/types' -import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS } from '@/loan/components/PageLoanManage/utils' +import type { FormStatus, FormValues, StepKey } from '@/loan/components/PageMintMarket/CollateralDecrease/types' +import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageMintMarket/styles' +import type { FormEstGas, ManageLoanProps } from '@/loan/components/PageMintMarket/types' +import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS } from '@/loan/components/PageMintMarket/utils' import { DEFAULT_WALLET_BALANCES } from '@/loan/constants' import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails' import networks from '@/loan/networks' @@ -36,9 +36,10 @@ import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput' import { TokenLabel } from '@ui-kit/shared/ui/TokenLabel' import { decimal, type Decimal } from '@ui-kit/utils' -interface Props extends Pick {} +interface Props extends Pick {} -const CollateralDecrease = ({ curve, llamma, llammaId, rChainId }: Props) => { +const CollateralDecrease = ({ curve, market: llamma, rChainId }: Props) => { + const llammaId = llamma?.id ?? '' const isSubscribed = useRef(false) const activeKey = useStore((state) => state.loanCollateralDecrease.activeKey) diff --git a/apps/main/src/loan/components/PageLoanManage/CollateralDecrease/types.ts b/apps/main/src/loan/components/PageMintMarket/CollateralDecrease/types.ts similarity index 90% rename from apps/main/src/loan/components/PageLoanManage/CollateralDecrease/types.ts rename to apps/main/src/loan/components/PageMintMarket/CollateralDecrease/types.ts index 109e43db9f..d962f16a34 100644 --- a/apps/main/src/loan/components/PageLoanManage/CollateralDecrease/types.ts +++ b/apps/main/src/loan/components/PageMintMarket/CollateralDecrease/types.ts @@ -1,4 +1,4 @@ -import type { FormDetailInfo as Di, FormStatus as Fs } from '@/loan/components/PageLoanManage/types' +import type { FormDetailInfo as Di, FormStatus as Fs } from '@/loan/components/PageMintMarket/types' import { LiqRange } from '@/loan/types/loan.types' export type FormValues = { diff --git a/apps/main/src/loan/components/PageLoanManage/CollateralIncrease/index.tsx b/apps/main/src/loan/components/PageMintMarket/CollateralIncrease/index.tsx similarity index 97% rename from apps/main/src/loan/components/PageLoanManage/CollateralIncrease/index.tsx rename to apps/main/src/loan/components/PageMintMarket/CollateralIncrease/index.tsx index c1d5ecb723..9deaa807d0 100644 --- a/apps/main/src/loan/components/PageLoanManage/CollateralIncrease/index.tsx +++ b/apps/main/src/loan/components/PageMintMarket/CollateralIncrease/index.tsx @@ -8,10 +8,10 @@ import DetailInfoHealth from '@/loan/components/DetailInfoHealth' import DetailInfoLiqRange from '@/loan/components/DetailInfoLiqRange' import DialogHealthWarning from '@/loan/components/DialogHealthWarning' import LoanFormConnect from '@/loan/components/LoanFormConnect' -import type { FormStatus, FormValues, StepKey } from '@/loan/components/PageLoanManage/CollateralIncrease/types' -import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageLoanManage/styles' -import type { FormEstGas, PageLoanManageProps } from '@/loan/components/PageLoanManage/types' -import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS } from '@/loan/components/PageLoanManage/utils' +import type { FormStatus, FormValues, StepKey } from '@/loan/components/PageMintMarket/CollateralIncrease/types' +import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageMintMarket/styles' +import type { FormEstGas, ManageLoanProps } from '@/loan/components/PageMintMarket/types' +import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS } from '@/loan/components/PageMintMarket/utils' import { DEFAULT_WALLET_BALANCES } from '@/loan/constants' import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails' import networks from '@/loan/networks' @@ -37,9 +37,10 @@ import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput' import { TokenLabel } from '@ui-kit/shared/ui/TokenLabel' import { decimal, type Decimal } from '@ui-kit/utils' -interface Props extends Pick {} +interface Props extends Pick {} -const CollateralIncrease = ({ curve, isReady, llamma, llammaId }: Props) => { +const CollateralIncrease = ({ curve, isReady, market: llamma }: Props) => { + const llammaId = llamma?.id ?? '' const isSubscribed = useRef(false) const activeKey = useStore((state) => state.loanCollateralIncrease.activeKey) diff --git a/apps/main/src/loan/components/PageLoanManage/CollateralIncrease/types.ts b/apps/main/src/loan/components/PageMintMarket/CollateralIncrease/types.ts similarity index 90% rename from apps/main/src/loan/components/PageLoanManage/CollateralIncrease/types.ts rename to apps/main/src/loan/components/PageMintMarket/CollateralIncrease/types.ts index 8b9f5faa99..77a7cf6966 100644 --- a/apps/main/src/loan/components/PageLoanManage/CollateralIncrease/types.ts +++ b/apps/main/src/loan/components/PageMintMarket/CollateralIncrease/types.ts @@ -1,4 +1,4 @@ -import type { FormDetailInfo as Di, FormStatus as Fs } from '@/loan/components/PageLoanManage/types' +import type { FormDetailInfo as Di, FormStatus as Fs } from '@/loan/components/PageMintMarket/types' import { LiqRange } from '@/loan/types/loan.types' export type FormValues = { diff --git a/apps/main/src/loan/components/PageMintMarket/CreateLoanTabs.tsx b/apps/main/src/loan/components/PageMintMarket/CreateLoanTabs.tsx new file mode 100644 index 0000000000..b785c9ce8f --- /dev/null +++ b/apps/main/src/loan/components/PageMintMarket/CreateLoanTabs.tsx @@ -0,0 +1,73 @@ +import { useCallback } from 'react' +import { CreateLoanForm } from '@/llamalend/features/borrow/components/CreateLoanForm' +import type { OnBorrowFormUpdate } from '@/llamalend/features/borrow/types' +import type { BorrowMutation, CreateLoanOptions } from '@/llamalend/mutations/create-loan.mutation' +import LoanFormCreate from '@/loan/components/PageMintMarket/LoanFormCreate' +import type { FormValues, PageLoanCreateProps } from '@/loan/components/PageMintMarket/types' +import { DEFAULT_FORM_VALUES } from '@/loan/components/PageMintMarket/utils' +import networks from '@/loan/networks' +import useStore from '@/loan/store/useStore' +import { hasV1Leverage } from '@/loan/utils/leverage' +import { useCreateLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags' +import { t } from '@ui-kit/lib/i18n' +import { FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs' + +/** + * Callback that synchronizes the `ChartOhlc` component with the `RangeSlider` component in the new `BorrowTabContents`. + */ +const useOnFormUpdate = ({ curve, market }: Pick): OnBorrowFormUpdate => + useCallback( + async ({ debt, userCollateral, range, slippage, leverageEnabled }) => { + if (!curve || !market) return + const { setFormValues, setStateByKeys } = useStore.getState().loanCreate + const formValues: FormValues = { + ...DEFAULT_FORM_VALUES, + n: range, + debt: `${debt ?? ''}`, + collateral: `${userCollateral ?? ''}`, + } + await setFormValues(curve, leverageEnabled, market, formValues, `${slippage}`) + setStateByKeys({ isEditLiqRange: true }) + }, + [curve, market], + ) + +function CreateLoanTab({ market, curve, rChainId }: PageLoanCreateProps) { + const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated) + const onCreated: NonNullable = useCallback( + async (_data, _receipt, { slippage, leverageEnabled }: BorrowMutation) => + curve && market && (await onLoanCreated(curve, leverageEnabled, market, slippage)), + [curve, market, onLoanCreated], + ) + + const onUpdate = useOnFormUpdate({ market, curve }) + return ( + + ) +} + +const LendCreateTabsNewMenu = [ + { value: 'create', label: t`Borrow`, component: CreateLoanTab }, +] satisfies FormTab[] + +const LendCreateTabsOldMenu = [ + { value: 'create', label: t`Create Loan`, component: LoanFormCreate }, + { + value: 'leverage', + label: t`Leverage`, + component: (p) => , + visible: ({ market }) => market && hasV1Leverage(market), + }, +] satisfies FormTab[] + +export const CreateLoanTabs = (props: PageLoanCreateProps) => { + const menu = useCreateLoanMuiForm() ? LendCreateTabsNewMenu : LendCreateTabsOldMenu + const shouldWrap = menu === LendCreateTabsOldMenu + return +} diff --git a/apps/main/src/loan/components/PageLoanManage/LoanDecrease/index.tsx b/apps/main/src/loan/components/PageMintMarket/LoanDecrease/index.tsx similarity index 97% rename from apps/main/src/loan/components/PageLoanManage/LoanDecrease/index.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanDecrease/index.tsx index e0e1613d81..db22be61c9 100644 --- a/apps/main/src/loan/components/PageLoanManage/LoanDecrease/index.tsx +++ b/apps/main/src/loan/components/PageMintMarket/LoanDecrease/index.tsx @@ -7,10 +7,10 @@ import DetailInfoEstimateGas from '@/loan/components/DetailInfoEstimateGas' import DetailInfoHealth from '@/loan/components/DetailInfoHealth' import DetailInfoLiqRange from '@/loan/components/DetailInfoLiqRange' import LoanFormConnect from '@/loan/components/LoanFormConnect' -import type { FormStatus, FormValues, StepKey } from '@/loan/components/PageLoanManage/LoanDecrease/types' -import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageLoanManage/styles' -import type { FormEstGas, PageLoanManageProps } from '@/loan/components/PageLoanManage/types' -import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS } from '@/loan/components/PageLoanManage/utils' +import type { FormStatus, FormValues, StepKey } from '@/loan/components/PageMintMarket/LoanDecrease/types' +import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageMintMarket/styles' +import type { FormEstGas, ManageLoanProps } from '@/loan/components/PageMintMarket/types' +import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS } from '@/loan/components/PageMintMarket/utils' import { DEFAULT_WALLET_BALANCES } from '@/loan/constants' import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails' import networks from '@/loan/networks' @@ -38,10 +38,11 @@ import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput' import { TokenLabel } from '@ui-kit/shared/ui/TokenLabel' import { decimal, type Decimal } from '@ui-kit/utils' -interface Props extends Pick {} +interface Props extends Pick {} // Loan repay -const LoanDecrease = ({ curve, llamma, llammaId, params, rChainId }: Props) => { +const LoanDecrease = ({ curve, market: llamma, params, rChainId }: Props) => { + const llammaId = llamma?.id ?? '' const isSubscribed = useRef(false) const push = useNavigate() diff --git a/apps/main/src/loan/components/PageLoanManage/LoanDecrease/types.ts b/apps/main/src/loan/components/PageMintMarket/LoanDecrease/types.ts similarity index 91% rename from apps/main/src/loan/components/PageLoanManage/LoanDecrease/types.ts rename to apps/main/src/loan/components/PageMintMarket/LoanDecrease/types.ts index cd6433e332..97dd7348b7 100644 --- a/apps/main/src/loan/components/PageLoanManage/LoanDecrease/types.ts +++ b/apps/main/src/loan/components/PageMintMarket/LoanDecrease/types.ts @@ -1,4 +1,4 @@ -import type { FormDetailInfo as Di, FormStatus as Fs } from '@/loan/components/PageLoanManage/types' +import type { FormDetailInfo as Di, FormStatus as Fs } from '@/loan/components/PageMintMarket/types' import { LiqRange } from '@/loan/types/loan.types' export type FormValues = { diff --git a/apps/main/src/loan/components/PageLoanManage/LoanDeleverage/components/DialogHighPriceImpactWarning.tsx b/apps/main/src/loan/components/PageMintMarket/LoanDeleverage/components/DialogHighPriceImpactWarning.tsx similarity index 100% rename from apps/main/src/loan/components/PageLoanManage/LoanDeleverage/components/DialogHighPriceImpactWarning.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanDeleverage/components/DialogHighPriceImpactWarning.tsx diff --git a/apps/main/src/loan/components/PageLoanManage/LoanDeleverage/components/LoanDeleverageAlertFull.tsx b/apps/main/src/loan/components/PageMintMarket/LoanDeleverage/components/LoanDeleverageAlertFull.tsx similarity index 97% rename from apps/main/src/loan/components/PageLoanManage/LoanDeleverage/components/LoanDeleverageAlertFull.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanDeleverage/components/LoanDeleverageAlertFull.tsx index ebb1743c14..0f47568b14 100644 --- a/apps/main/src/loan/components/PageLoanManage/LoanDeleverage/components/LoanDeleverageAlertFull.tsx +++ b/apps/main/src/loan/components/PageMintMarket/LoanDeleverage/components/LoanDeleverageAlertFull.tsx @@ -1,5 +1,5 @@ import { styled } from 'styled-components' -import type { FormValues } from '@/loan/components/PageLoanManage/LoanDeleverage/types' +import type { FormValues } from '@/loan/components/PageMintMarket/LoanDeleverage/types' import { Llamma, UserLoanDetails } from '@/loan/types/loan.types' import { getTokenName } from '@/loan/utils/utilsLoan' import Box from '@ui/Box' diff --git a/apps/main/src/loan/components/PageLoanManage/LoanDeleverage/components/LoanDeleverageAlertPartial.tsx b/apps/main/src/loan/components/PageMintMarket/LoanDeleverage/components/LoanDeleverageAlertPartial.tsx similarity index 96% rename from apps/main/src/loan/components/PageLoanManage/LoanDeleverage/components/LoanDeleverageAlertPartial.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanDeleverage/components/LoanDeleverageAlertPartial.tsx index 81353f4baa..19cf8b36c1 100644 --- a/apps/main/src/loan/components/PageLoanManage/LoanDeleverage/components/LoanDeleverageAlertPartial.tsx +++ b/apps/main/src/loan/components/PageMintMarket/LoanDeleverage/components/LoanDeleverageAlertPartial.tsx @@ -1,5 +1,5 @@ import { styled } from 'styled-components' -import type { FormValues } from '@/loan/components/PageLoanManage/LoanDeleverage/types' +import type { FormValues } from '@/loan/components/PageMintMarket/LoanDeleverage/types' import { Llamma, UserLoanDetails } from '@/loan/types/loan.types' import { getTokenName } from '@/loan/utils/utilsLoan' import Box from '@ui/Box' diff --git a/apps/main/src/loan/components/PageLoanManage/LoanDeleverage/index.tsx b/apps/main/src/loan/components/PageMintMarket/LoanDeleverage/index.tsx similarity index 95% rename from apps/main/src/loan/components/PageLoanManage/LoanDeleverage/index.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanDeleverage/index.tsx index 4c343b178d..e8dd0e07af 100644 --- a/apps/main/src/loan/components/PageLoanManage/LoanDeleverage/index.tsx +++ b/apps/main/src/loan/components/PageMintMarket/LoanDeleverage/index.tsx @@ -9,15 +9,15 @@ import DetailInfoHealth from '@/loan/components/DetailInfoHealth' import DetailInfoLiqRange from '@/loan/components/DetailInfoLiqRange' import DetailInfoSlippageTolerance from '@/loan/components/DetailInfoSlippageTolerance' import LoanFormConnect from '@/loan/components/LoanFormConnect' -import DetailInfoTradeRoutes from '@/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoTradeRoutes' -import DialogHighPriceImpactWarning from '@/loan/components/PageLoanManage/LoanDeleverage/components/DialogHighPriceImpactWarning' -import LoanDeleverageAlertFull from '@/loan/components/PageLoanManage/LoanDeleverage/components/LoanDeleverageAlertFull' -import LoanDeleverageAlertPartial from '@/loan/components/PageLoanManage/LoanDeleverage/components/LoanDeleverageAlertPartial' -import type { FormDetailInfo, FormStatus, FormValues } from '@/loan/components/PageLoanManage/LoanDeleverage/types' -import { DEFAULT_FORM_VALUES } from '@/loan/components/PageLoanManage/LoanDeleverage/utils' -import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageLoanManage/styles' -import type { PageLoanManageProps } from '@/loan/components/PageLoanManage/types' -import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS } from '@/loan/components/PageLoanManage/utils' +import DialogHighPriceImpactWarning from '@/loan/components/PageMintMarket/LoanDeleverage/components/DialogHighPriceImpactWarning' +import LoanDeleverageAlertFull from '@/loan/components/PageMintMarket/LoanDeleverage/components/LoanDeleverageAlertFull' +import LoanDeleverageAlertPartial from '@/loan/components/PageMintMarket/LoanDeleverage/components/LoanDeleverageAlertPartial' +import type { FormDetailInfo, FormStatus, FormValues } from '@/loan/components/PageMintMarket/LoanDeleverage/types' +import { DEFAULT_FORM_VALUES } from '@/loan/components/PageMintMarket/LoanDeleverage/utils' +import DetailInfoTradeRoutes from '@/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoTradeRoutes' +import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageMintMarket/styles' +import type { ManageLoanProps } from '@/loan/components/PageMintMarket/types' +import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS } from '@/loan/components/PageMintMarket/utils' import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails' import networks from '@/loan/networks' import useStore from '@/loan/store/useStore' @@ -51,11 +51,11 @@ import { decimal, type Decimal } from '@ui-kit/utils' // Loan Deleverage const LoanDeleverage = ({ curve, - llamma, - llammaId, + market: llamma, params, rChainId, -}: Pick) => { +}: Pick) => { + const llammaId = llamma?.id ?? '' const isSubscribed = useRef(false) const push = useNavigate() diff --git a/apps/main/src/loan/components/PageLoanManage/LoanDeleverage/types.ts b/apps/main/src/loan/components/PageMintMarket/LoanDeleverage/types.ts similarity index 93% rename from apps/main/src/loan/components/PageLoanManage/LoanDeleverage/types.ts rename to apps/main/src/loan/components/PageMintMarket/LoanDeleverage/types.ts index 1002ca1859..20f44d0666 100644 --- a/apps/main/src/loan/components/PageLoanManage/LoanDeleverage/types.ts +++ b/apps/main/src/loan/components/PageMintMarket/LoanDeleverage/types.ts @@ -1,4 +1,4 @@ -import type { FormDetailInfo as Di, FormStatus as Fs } from '@/loan/components/PageLoanManage/types' +import type { FormDetailInfo as Di, FormStatus as Fs } from '@/loan/components/PageMintMarket/types' import { LiqRange } from '@/loan/types/loan.types' export type FormValues = { diff --git a/apps/main/src/loan/components/PageLoanManage/LoanDeleverage/utils.ts b/apps/main/src/loan/components/PageMintMarket/LoanDeleverage/utils.ts similarity index 85% rename from apps/main/src/loan/components/PageLoanManage/LoanDeleverage/utils.ts rename to apps/main/src/loan/components/PageMintMarket/LoanDeleverage/utils.ts index fc20d216c8..c8061ac7f3 100644 --- a/apps/main/src/loan/components/PageLoanManage/LoanDeleverage/utils.ts +++ b/apps/main/src/loan/components/PageMintMarket/LoanDeleverage/utils.ts @@ -1,8 +1,8 @@ -import type { FormDetailInfo, FormStatus, FormValues } from '@/loan/components/PageLoanManage/LoanDeleverage/types' +import type { FormDetailInfo, FormStatus, FormValues } from '@/loan/components/PageMintMarket/LoanDeleverage/types' import { DEFAULT_DETAIL_INFO as DETAIL_INFO, DEFAULT_FORM_STATUS as FORM_STATUS, -} from '@/loan/components/PageLoanManage/utils' +} from '@/loan/components/PageMintMarket/utils' export const DEFAULT_FORM_STATUS: FormStatus = { ...FORM_STATUS, diff --git a/apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfo.tsx b/apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfo.tsx similarity index 87% rename from apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfo.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfo.tsx index e91db6f69c..62735a99e9 100644 --- a/apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfo.tsx +++ b/apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfo.tsx @@ -1,8 +1,8 @@ import { useMemo } from 'react' import { useChainId } from 'wagmi' -import DetailInfoLeverage from '@/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoLeverage' -import DetailInfoNonLeverage from '@/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoNonLeverage' -import type { FormDetailInfo, FormDetailInfoSharedProps } from '@/loan/components/PageLoanCreate/types' +import DetailInfoLeverage from '@/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoLeverage' +import DetailInfoNonLeverage from '@/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoNonLeverage' +import type { CreateFormDetailInfo, FormDetailInfoSharedProps } from '@/loan/components/PageMintMarket/types' import useStore from '@/loan/store/useStore' import DetailInfo from '@ui/DetailInfo' import { getActiveStep } from '@ui/Stepper/helpers' @@ -10,7 +10,7 @@ import { FORMAT_OPTIONS, formatNumber } from '@ui/utils' import { t } from '@ui-kit/lib/i18n' import { useTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate' -const DetailInfoComp = (props: FormDetailInfo) => { +const DetailInfoComp = (props: CreateFormDetailInfo) => { const { activeKeyLiqRange, formValues, isLeverage, isReady, llamma, haveSigner, steps, updateFormValues } = props const chainId = useChainId() diff --git a/apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoLeverage.tsx b/apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoLeverage.tsx similarity index 94% rename from apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoLeverage.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoLeverage.tsx index b6f887f596..b4d95f9614 100644 --- a/apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoLeverage.tsx +++ b/apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoLeverage.tsx @@ -5,9 +5,9 @@ import DetailInfoHealth from '@/loan/components/DetailInfoHealth' import DetailInfoLiqRange from '@/loan/components/DetailInfoLiqRange' import DetailInfoN from '@/loan/components/DetailInfoN' import DetailInfoSlippageTolerance from '@/loan/components/DetailInfoSlippageTolerance' -import DetailInfoTradeRoutes from '@/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoTradeRoutes' -import type { FormDetailInfo, FormDetailInfoSharedProps } from '@/loan/components/PageLoanCreate/types' -import { DEFAULT_DETAIL_INFO_LEVERAGE } from '@/loan/components/PageLoanCreate/utils' +import DetailInfoTradeRoutes from '@/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoTradeRoutes' +import type { CreateFormDetailInfo, FormDetailInfoSharedProps } from '@/loan/components/PageMintMarket/types' +import { DEFAULT_DETAIL_INFO_LEVERAGE } from '@/loan/components/PageMintMarket/utils' import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails' import useStore from '@/loan/store/useStore' import { getTokenName } from '@/loan/utils/utilsLoan' @@ -30,13 +30,13 @@ const DetailInfoLeverage = ({ haveSigner, healthMode, llamma, - llammaId, steps, handleSelLiqRange, selectedLiqRange, setHealthMode, handleLiqRangesEdit, -}: FormDetailInfo & FormDetailInfoSharedProps) => { +}: CreateFormDetailInfo & FormDetailInfoSharedProps) => { + const llammaId = llamma?.id ?? '' const detailInfo = useStore((state) => state.loanCreate.detailInfoLeverage[activeKey] ?? DEFAULT_DETAIL_INFO_LEVERAGE) const formValues = useStore((state) => state.loanCreate.formValues) const isEditLiqRange = useStore((state) => state.loanCreate.isEditLiqRange) diff --git a/apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoNonLeverage.tsx b/apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoNonLeverage.tsx similarity index 91% rename from apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoNonLeverage.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoNonLeverage.tsx index 7122f77c83..62ec8fc9b9 100644 --- a/apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoNonLeverage.tsx +++ b/apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoNonLeverage.tsx @@ -3,8 +3,8 @@ import DetailInfoEstGas from '@/loan/components/DetailInfoEstimateGas' import DetailInfoHealth from '@/loan/components/DetailInfoHealth' import DetailInfoLiqRange from '@/loan/components/DetailInfoLiqRange' import DetailInfoN from '@/loan/components/DetailInfoN' -import type { FormDetailInfo, FormDetailInfoSharedProps } from '@/loan/components/PageLoanCreate/types' -import { DEFAULT_DETAIL_INFO } from '@/loan/components/PageLoanManage/utils' +import type { CreateFormDetailInfo, FormDetailInfoSharedProps } from '@/loan/components/PageMintMarket/types' +import { DEFAULT_DETAIL_INFO } from '@/loan/components/PageMintMarket/utils' import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails' import useStore from '@/loan/store/useStore' import { LiquidationRangeSlider } from '@ui-kit/shared/ui/LiquidationRangeSlider' @@ -22,13 +22,13 @@ const DetailInfoNonLeverage = ({ isReady, isValidFormValues = true, llamma, - llammaId, steps, handleSelLiqRange, selectedLiqRange, setHealthMode, handleLiqRangesEdit, -}: FormDetailInfo & FormDetailInfoSharedProps) => { +}: CreateFormDetailInfo & FormDetailInfoSharedProps) => { + const llammaId = llamma?.id ?? '' const detailInfo = useStore((state) => state.loanCreate.detailInfo[activeKey] ?? DEFAULT_DETAIL_INFO) const formValues = useStore((state) => state.loanCreate.formValues) const isEditLiqRange = useStore((state) => state.loanCreate.isEditLiqRange) diff --git a/apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoTradeRoutes.tsx b/apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoTradeRoutes.tsx similarity index 100% rename from apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoTradeRoutes.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfoTradeRoutes.tsx diff --git a/apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DialogHealthLeverageWarning.tsx b/apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DialogHealthLeverageWarning.tsx similarity index 100% rename from apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DialogHealthLeverageWarning.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanFormCreate/components/DialogHealthLeverageWarning.tsx diff --git a/apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/index.tsx b/apps/main/src/loan/components/PageMintMarket/LoanFormCreate/index.tsx similarity index 79% rename from apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/index.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanFormCreate/index.tsx index da7248e120..9bda28bd64 100644 --- a/apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/index.tsx +++ b/apps/main/src/loan/components/PageMintMarket/LoanFormCreate/index.tsx @@ -5,21 +5,28 @@ import { MarketParameters } from '@/llamalend/features/market-parameters/MarketP import AlertFormError from '@/loan/components/AlertFormError' import DialogHealthWarning from '@/loan/components/DialogHealthWarning' import LoanFormConnect from '@/loan/components/LoanFormConnect' -import DetailInfo from '@/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfo' -import DialogHealthLeverageWarning from '@/loan/components/PageLoanCreate/LoanFormCreate/components/DialogHealthLeverageWarning' -import type { FormStatus, FormValues, PageLoanCreateProps, StepKey } from '@/loan/components/PageLoanCreate/types' -import { StyledInpChip } from '@/loan/components/PageLoanManage/styles' -import type { FormEstGas } from '@/loan/components/PageLoanManage/types' -import { DEFAULT_FORM_EST_GAS } from '@/loan/components/PageLoanManage/utils' +import DetailInfo from '@/loan/components/PageMintMarket/LoanFormCreate/components/DetailInfo' +import DialogHealthLeverageWarning from '@/loan/components/PageMintMarket/LoanFormCreate/components/DialogHealthLeverageWarning' +import { StyledInpChip } from '@/loan/components/PageMintMarket/styles' +import type { + CreateFormStatus, + FormEstGas, + FormValues, + PageLoanCreateProps, + StepKey, +} from '@/loan/components/PageMintMarket/types' +import { DEFAULT_FORM_EST_GAS } from '@/loan/components/PageMintMarket/utils' import { DEFAULT_WALLET_BALANCES } from '@/loan/constants' +import useCollateralAlert from '@/loan/hooks/useCollateralAlert' import networks from '@/loan/networks' import { DEFAULT_FORM_STATUS } from '@/loan/store/createLoanCollateralIncreaseSlice' import useStore from '@/loan/store/useStore' -import { CollateralAlert, LlamaApi, Llamma } from '@/loan/types/loan.types' +import { LlamaApi, Llamma } from '@/loan/types/loan.types' import { curveProps } from '@/loan/utils/helpers' import { hasDeleverage } from '@/loan/utils/leverage' import { getStepStatus, getTokenName } from '@/loan/utils/utilsLoan' -import { getLoanManagePathname } from '@/loan/utils/utilsRouter' +import { getMintMarketPathname } from '@/loan/utils/utilsRouter' +import type { MintMarketTemplate } from '@curvefi/llamalend-api/lib/mintMarkets' import Accordion from '@ui/Accordion' import AlertBox from '@ui/AlertBox' import Box from '@ui/Box' @@ -29,7 +36,7 @@ import Stepper from '@ui/Stepper/Stepper' import type { Step } from '@ui/Stepper/types' import TxInfoBar from '@ui/TxInfoBar' import { formatNumber, scanTxPath } from '@ui/utils' -import { notify } from '@ui-kit/features/connect-wallet' +import { notify, useCurve } from '@ui-kit/features/connect-wallet' import { useUserProfileStore } from '@ui-kit/features/user-profile' import { useLegacyTokenInput } from '@ui-kit/hooks/useFeatureFlags' import { t, Trans } from '@ui-kit/lib/i18n' @@ -38,18 +45,71 @@ import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput' import { TokenLabel } from '@ui-kit/shared/ui/TokenLabel' import { decimal, type Decimal } from '@ui-kit/utils' +const useFetchInitial = ({ + market: llamma, + isLeverage, +}: { + market: MintMarketTemplate | null + isLeverage: boolean +}) => { + const { isHydrated, llamaApi: curve = null } = useCurve() + const maxSlippage = useUserProfileStore((state) => state.maxSlippage.crypto) + const formValues = useStore((state) => state.loanCreate.formValues) + const setFormValues = useStore((state) => state.loanCreate.setFormValues) + const setStateByKeys = useStore((state) => state.loanCreate.setStateByKeys) + const resetUserDetailsState = useStore((state) => state.loans.resetUserDetailsState) + const fetchLoanDetails = useStore((state) => state.loans.fetchLoanDetails) + const [loaded, setLoaded] = useState(false) + + const fetchInitial = useCallback( + (curve: LlamaApi, isLeverage: boolean, llamma: Llamma) => { + // reset createLoan estGas, detailInfo state + setStateByKeys({ + formEstGas: {}, + detailInfo: {}, + detailInfoLeverage: {}, + liqRanges: {}, + liqRangesMapper: {}, + maxRecv: {}, + maxRecvLeverage: {}, + }) + + const updatedFormValues = { ...formValues, n: formValues.n || llamma.defaultBands } + void setFormValues(curve, isLeverage, llamma, updatedFormValues, maxSlippage) + }, + [formValues, maxSlippage, setFormValues, setStateByKeys], + ) + + useEffect(() => { + if (!isHydrated || !curve || !llamma) return + resetUserDetailsState(llamma) + fetchInitial(curve, isLeverage, llamma) + void fetchLoanDetails(curve, llamma) + setLoaded(true) + }, [isHydrated, curve, llamma, resetUserDetailsState, fetchInitial, isLeverage, fetchLoanDetails]) + + // max slippage updated + useEffect(() => { + if (loaded && curve && llamma) { + void setFormValues(curve, isLeverage, llamma, formValues, maxSlippage) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [maxSlippage]) + + return fetchInitial +} + const LoanCreate = ({ - collateralAlert, + isLeverage = false, curve, isReady, - llamma, - llammaId, + market, params, rChainId, - rFormType, -}: PageLoanCreateProps & { collateralAlert: CollateralAlert | null }) => { +}: PageLoanCreateProps & { isLeverage?: boolean }) => { + const collateralAlert = useCollateralAlert(market?.address) const isSubscribed = useRef(false) - const isLeverage = rFormType === 'leverage' + useFetchInitial({ market, isLeverage }) const activeKey = useStore((state) => state.loanCreate.activeKey) const activeKeyLiqRange = useStore((state) => state.loanCreate.activeKeyLiqRange) @@ -63,7 +123,7 @@ const LoanCreate = ({ ) const userWalletBalancesLoading = useStore((state) => state.loans.userWalletBalancesLoading) const userWalletBalances = useStore( - (state) => state.loans.userWalletBalancesMapper[llammaId] ?? DEFAULT_WALLET_BALANCES, + (state) => state.loans.userWalletBalancesMapper[market?.id ?? ''] ?? DEFAULT_WALLET_BALANCES, ) const fetchStepApprove = useStore((state) => state.loanCreate.fetchStepApprove) const fetchStepCreate = useStore((state) => state.loanCreate.fetchStepCreate) @@ -83,17 +143,17 @@ const LoanCreate = ({ const network = networks[rChainId] const shouldUseLegacyTokenInput = useLegacyTokenInput() - const [stablecoinAddress, collateralAddress] = llamma?.coinAddresses ?? [] + const [stablecoinAddress, collateralAddress] = market?.coinAddresses ?? [] const { data: collateralUsdRate } = useTokenUsdRate({ chainId: network.chainId, tokenAddress: collateralAddress }) const { data: stablecoinUsdRate } = useTokenUsdRate({ chainId: network.chainId, tokenAddress: stablecoinAddress }) const updateFormValues = useCallback( (updatedFormValues: FormValues) => { - if (curve && llamma) { - void setFormValues(curve, isLeverage, llamma, updatedFormValues, maxSlippage) + if (curve && market) { + void setFormValues(curve, isLeverage, market, updatedFormValues, maxSlippage) } }, - [curve, isLeverage, llamma, maxSlippage, setFormValues], + [curve, isLeverage, market, maxSlippage, setFormValues], ) const reset = useCallback( @@ -160,7 +220,7 @@ const LoanCreate = ({ llamma: Llamma, confirmedHealthWarning: boolean, formEstGas: FormEstGas, - formStatus: FormStatus, + formStatus: CreateFormStatus, formValues: FormValues, maxSlippage: string, steps: Step[], @@ -255,12 +315,12 @@ const LoanCreate = ({ // steps useEffect(() => { - if (curve && llamma) { + if (curve && market) { const updatedSteps = getSteps( activeKey, curve, isLeverage, - llamma, + market, confirmedHealthWarning, formEstGas, formStatus, @@ -274,7 +334,7 @@ const LoanCreate = ({ }, [ confirmedHealthWarning, healthMode?.message, - llamma?.id, + market?.id, haveSigner, formEstGas.loading, formStatus, @@ -306,7 +366,7 @@ const LoanCreate = ({ id="inpCollateralAmt" type="number" labelProps={{ - label: t`${llamma?.collateralSymbol} Avail.`, + label: t`${market?.collateralSymbol} Avail.`, ...(haveSigner ? { descriptionLoading: userWalletBalancesLoading, @@ -336,16 +396,16 @@ const LoanCreate = ({ walletBalance={{ loading: haveSigner && userWalletBalancesLoading, balance: decimal(userWalletBalances.collateral), - symbol: llamma?.collateralSymbol, + symbol: market?.collateralSymbol, usdRate: collateralUsdRate, }} balance={decimal(formValues.collateral)} tokenSelector={ } onBalance={onCollateralChanged} @@ -368,7 +428,7 @@ const LoanCreate = ({ handleInpChange('debt', val)} /> @@ -395,7 +455,7 @@ const LoanCreate = ({ walletBalance={{ loading: !maxRecv, balance: decimal(maxRecv), - symbol: llamma ? getTokenName(llamma).stablecoin : undefined, + symbol: market ? getTokenName(market).stablecoin : undefined, usdRate: stablecoinUsdRate, buttonTestId: 'debtMax', }} @@ -404,9 +464,9 @@ const LoanCreate = ({ tokenSelector={ } onBalance={onDebtChanged} @@ -427,19 +487,18 @@ const LoanCreate = ({ isAdvanceMode={isAdvancedMode} isLeverage={isLeverage} isReady={isReady} - llamma={llamma} - llammaId={llammaId} + llamma={market} steps={steps} setHealthMode={setHealthMode} updateFormValues={updateFormValues} /> - {rFormType === 'leverage' && ( + {isLeverage && (

{t`You can leverage your collateral up to 9x. This has the effect of repeat trading crvUSD to collateral and depositing to maximize your collateral position. Essentially, all borrowed crvUSD is utilized to purchase more collateral.`}

{t`Be careful, if the collateral price dips, you would need to repay the entire amount to reclaim your initial position.`}

- {!hasDeleverage(llamma) && ( + {!hasDeleverage(market) && (

{t`WARNING: The corresponding deleverage button is also not yet available.`}

)}
@@ -450,7 +509,7 @@ const LoanCreate = ({ {/* actions */} - {formStatus.warning === 'warning-loan-exists' && llamma ? ( + {formStatus.warning === 'warning-loan-exists' && market ? ( {t`Transaction complete`} ) : healthMode.message ? ( {healthMode.message} @@ -460,8 +519,8 @@ const LoanCreate = ({ {txInfoBar} {steps && } - {formStatus.isComplete && llamma && ( - + {formStatus.isComplete && market && ( + Manage loan )} @@ -469,7 +528,7 @@ const LoanCreate = ({ {!isAdvancedMode && ( - + )} diff --git a/apps/main/src/loan/components/PageLoanManage/LoanIncrease/index.tsx b/apps/main/src/loan/components/PageMintMarket/LoanIncrease/index.tsx similarity index 95% rename from apps/main/src/loan/components/PageLoanManage/LoanIncrease/index.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanIncrease/index.tsx index ef43a3c81a..945f23d83d 100644 --- a/apps/main/src/loan/components/PageLoanManage/LoanIncrease/index.tsx +++ b/apps/main/src/loan/components/PageMintMarket/LoanIncrease/index.tsx @@ -7,14 +7,14 @@ import DetailInfoHealth from '@/loan/components/DetailInfoHealth' import DetailInfoLiqRange from '@/loan/components/DetailInfoLiqRange' import DialogHealthWarning from '@/loan/components/DialogHealthWarning' import LoanFormConnect from '@/loan/components/LoanFormConnect' -import type { FormStatus, FormValues, StepKey } from '@/loan/components/PageLoanManage/LoanIncrease/types' -import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageLoanManage/styles' -import type { FormEstGas, PageLoanManageProps } from '@/loan/components/PageLoanManage/types' +import type { FormStatus, FormValues, StepKey } from '@/loan/components/PageMintMarket/LoanIncrease/types' +import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageMintMarket/styles' +import type { FormEstGas, ManageLoanProps } from '@/loan/components/PageMintMarket/types' import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS, DEFAULT_USER_WALLET_BALANCES, -} from '@/loan/components/PageLoanManage/utils' +} from '@/loan/components/PageMintMarket/utils' import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails' import networks from '@/loan/networks' import { DEFAULT_FORM_STATUS, getMaxRecvActiveKey } from '@/loan/store/createLoanIncreaseSlice' @@ -22,7 +22,9 @@ import useStore from '@/loan/store/useStore' import { type ChainId, LlamaApi, Llamma } from '@/loan/types/loan.types' import { curveProps } from '@/loan/utils/helpers' import { getStepStatus, getTokenName } from '@/loan/utils/utilsLoan' +import Stack from '@mui/material/Stack' import AlertBox from '@ui/AlertBox' +import { AppFormContentWrapper } from '@ui/AppForm' import Box from '@ui/Box' import InputProvider, { InputDebounced, InputMaxBtn } from '@ui/InputComp' import { getActiveStep } from '@ui/Stepper/helpers' @@ -39,10 +41,11 @@ import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput' import { TokenLabel } from '@ui-kit/shared/ui/TokenLabel' import { decimal, type Decimal } from '@ui-kit/utils' -interface Props extends Pick {} +interface Props extends Pick {} // Borrow more -const LoanIncrease = ({ curve, isReady, llamma, llammaId }: Props) => { +const LoanIncrease = ({ curve, isReady, market: llamma }: Props) => { + const llammaId = llamma?.id ?? '' const isSubscribed = useRef(false) const activeKey = useStore((state) => state.loanIncrease.activeKey) @@ -454,3 +457,14 @@ const LoanIncrease = ({ curve, isReady, llamma, llammaId }: Props) => { } export default LoanIncrease + +/** + * The new implementation of LoanBorrowMore with mui isn't ready yet. For now, we wrap the old one for styling. + */ +export const LoanIncreaseWrapped = (props: ManageLoanProps) => ( + t.design.Layer[1].Fill }}> + + + + +) diff --git a/apps/main/src/loan/components/PageLoanManage/LoanIncrease/types.ts b/apps/main/src/loan/components/PageMintMarket/LoanIncrease/types.ts similarity index 91% rename from apps/main/src/loan/components/PageLoanManage/LoanIncrease/types.ts rename to apps/main/src/loan/components/PageMintMarket/LoanIncrease/types.ts index 55436612ad..0f539f04ca 100644 --- a/apps/main/src/loan/components/PageLoanManage/LoanIncrease/types.ts +++ b/apps/main/src/loan/components/PageMintMarket/LoanIncrease/types.ts @@ -1,4 +1,4 @@ -import type { FormDetailInfo as Di, FormStatus as Fs } from '@/loan/components/PageLoanManage/types' +import type { FormDetailInfo as Di, FormStatus as Fs } from '@/loan/components/PageMintMarket/types' import { LiqRange } from '@/loan/types/loan.types' export type FormValues = { diff --git a/apps/main/src/loan/components/PageLoanManage/LoanLiquidate/index.tsx b/apps/main/src/loan/components/PageMintMarket/LoanLiquidate/index.tsx similarity index 95% rename from apps/main/src/loan/components/PageLoanManage/LoanLiquidate/index.tsx rename to apps/main/src/loan/components/PageMintMarket/LoanLiquidate/index.tsx index 85950e562e..93c76d8106 100644 --- a/apps/main/src/loan/components/PageLoanManage/LoanLiquidate/index.tsx +++ b/apps/main/src/loan/components/PageMintMarket/LoanLiquidate/index.tsx @@ -5,9 +5,9 @@ import AlertFormWarning from '@/loan/components/AlertFormWarning' import DetailInfoEstimateGas from '@/loan/components/DetailInfoEstimateGas' import DetailInfoSlippageTolerance from '@/loan/components/DetailInfoSlippageTolerance' import LoanFormConnect from '@/loan/components/LoanFormConnect' -import type { FormStatus, StepKey } from '@/loan/components/PageLoanManage/LoanLiquidate/types' -import type { FormEstGas, PageLoanManageProps } from '@/loan/components/PageLoanManage/types' -import { DEFAULT_FORM_EST_GAS } from '@/loan/components/PageLoanManage/utils' +import type { FormStatus, StepKey } from '@/loan/components/PageMintMarket/LoanLiquidate/types' +import type { FormEstGas, ManageLoanProps } from '@/loan/components/PageMintMarket/types' +import { DEFAULT_FORM_EST_GAS } from '@/loan/components/PageMintMarket/utils' import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails' import networks from '@/loan/networks' import { DEFAULT_FORM_STATUS, haveEnoughCrvusdForLiquidation } from '@/loan/store/createLoanLiquidate' @@ -28,9 +28,10 @@ import { notify } from '@ui-kit/features/connect-wallet' import { useUserProfileStore } from '@ui-kit/features/user-profile' import { t, Trans } from '@ui-kit/lib/i18n' -interface Props extends Pick {} +interface Props extends Pick {} -const LoanLiquidate = ({ curve, llamma, llammaId, params, rChainId }: Props) => { +const LoanLiquidate = ({ curve, market: llamma, params, rChainId }: Props) => { + const llammaId = llamma?.id ?? '' const { chainId, haveSigner } = curveProps(curve) const isSubscribed = useRef(false) diff --git a/apps/main/src/loan/components/PageLoanManage/LoanLiquidate/types.ts b/apps/main/src/loan/components/PageMintMarket/LoanLiquidate/types.ts similarity index 72% rename from apps/main/src/loan/components/PageLoanManage/LoanLiquidate/types.ts rename to apps/main/src/loan/components/PageMintMarket/LoanLiquidate/types.ts index b65afbe67c..af55ae0e52 100644 --- a/apps/main/src/loan/components/PageLoanManage/LoanLiquidate/types.ts +++ b/apps/main/src/loan/components/PageMintMarket/LoanLiquidate/types.ts @@ -1,4 +1,4 @@ -import type { FormStatus as Fs } from '@/loan/components/PageLoanManage/types' +import type { FormStatus as Fs } from '@/loan/components/PageMintMarket/types' export type FormValues = { maxSlippage: string diff --git a/apps/main/src/loan/components/PageMintMarket/ManageLoanTabs.tsx b/apps/main/src/loan/components/PageMintMarket/ManageLoanTabs.tsx new file mode 100644 index 0000000000..7aeba97b60 --- /dev/null +++ b/apps/main/src/loan/components/PageMintMarket/ManageLoanTabs.tsx @@ -0,0 +1,123 @@ +import { AddCollateralForm } from '@/llamalend/features/manage-loan/components/AddCollateralForm' +import { RemoveCollateralForm } from '@/llamalend/features/manage-loan/components/RemoveCollateralForm' +import { RepayForm } from '@/llamalend/features/manage-loan/components/RepayForm' +import { useClosePositionTab } from '@/llamalend/features/manage-soft-liquidation/hooks/useClosePositionTab' +import { useImproveHealthTab } from '@/llamalend/features/manage-soft-liquidation/hooks/useImproveHealthTab' +import { ClosePosition } from '@/llamalend/features/manage-soft-liquidation/ui/tabs/ClosePosition' +import { ImproveHealth } from '@/llamalend/features/manage-soft-liquidation/ui/tabs/ImproveHealth' +import CollateralDecrease from '@/loan/components/PageMintMarket/CollateralDecrease' +import CollateralIncrease from '@/loan/components/PageMintMarket/CollateralIncrease' +import LoanDecrease from '@/loan/components/PageMintMarket/LoanDecrease' +import LoanDeleverage from '@/loan/components/PageMintMarket/LoanDeleverage' +import LoanIncrease, { LoanIncreaseWrapped } from '@/loan/components/PageMintMarket/LoanIncrease' +import LoanLiquidate from '@/loan/components/PageMintMarket/LoanLiquidate' +import type { ManageLoanProps } from '@/loan/components/PageMintMarket/types' +import networks from '@/loan/networks' +import { hasDeleverage, hasV1Leverage } from '@/loan/utils/leverage' +import { useManageLoanMuiForm, useManageSoftLiquidation } from '@ui-kit/hooks/useFeatureFlags' +import { t } from '@ui-kit/lib/i18n' +import { type FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs' + +const ImproveHealthTab = ({ rChainId, market }: ManageLoanProps) => ( + +) + +const ClosePositionTab = ({ rChainId, market }: ManageLoanProps) => ( + +) + +const LoanRepayFromWalletTab = ({ rChainId, market, isReady }: ManageLoanProps) => ( + +) + +const LoanRepayFromCollateralTab = ({ rChainId, market, isReady }: ManageLoanProps) => ( + +) + +const LoanAddCollateralTab = ({ rChainId, market, isReady }: ManageLoanProps) => ( + +) + +const LoanRemoveCollateralTab = ({ rChainId, market, isReady }: ManageLoanProps) => ( + +) + +const MintManageLegacyMenu = [ + { + value: 'loan' as const, + label: t`Loan`, + subTabs: [ + { value: 'loan-increase', label: t`Borrow more`, component: LoanIncrease }, + { value: 'loan-decrease', label: t`Repay`, component: LoanDecrease }, + { value: 'loan-liquidate', label: t`Self-liquidate`, component: LoanLiquidate }, + ], + }, + { + value: 'collateral' as const, + label: t`Collateral`, + subTabs: [ + { value: 'collateral-increase', label: t`Add`, component: CollateralIncrease }, + { value: 'collateral-decrease', label: t`Remove`, component: CollateralDecrease }, + ], + }, + { + value: 'deleverage' as const, + label: t`Delever`, + component: LoanDeleverage, + visible: ({ market }) => hasDeleverage(market), + }, +] satisfies FormTab[] + +const MintManageNewMenu = [ + { + value: 'borrow', + label: ({ market }) => (hasV1Leverage(market) ? t`Leverage` : t`Borrow`), + component: LoanIncreaseWrapped, + }, + { + value: 'repay', + label: t`Repay`, + subTabs: [ + { value: 'from-wallet', label: t`From wallet`, component: LoanRepayFromWalletTab }, + { value: 'from-collateral', label: t`From collateral`, component: LoanRepayFromCollateralTab }, + ], + }, + { + value: 'collateral', + label: t`Collateral`, + subTabs: [ + { value: 'add', label: t`Add`, component: LoanAddCollateralTab }, + { value: 'remove', label: t`Remove`, component: LoanRemoveCollateralTab }, + ], + }, +] satisfies FormTab[] + +const MintManageSoftLiquidationMenu = [ + { + value: 'soft-liquidation', + label: t`Manage soft liquidation`, + subTabs: [ + { value: 'improve-health', label: t`Improve health`, component: ImproveHealthTab }, + { value: 'close-position', label: t`Close position`, component: ClosePositionTab }, + ], + }, +] satisfies FormTab[] + +export const ManageLoanTabs = ({ + isInSoftLiquidation, + ...pageProps +}: ManageLoanProps & { isInSoftLiquidation: boolean | undefined }) => { + const shouldUseSoftLiquidation = useManageSoftLiquidation() && isInSoftLiquidation + const shouldUseManageLoanMuiForm = useManageLoanMuiForm() + const menu = shouldUseSoftLiquidation + ? MintManageSoftLiquidationMenu + : shouldUseManageLoanMuiForm + ? MintManageNewMenu + : MintManageLegacyMenu + const shouldWrap = menu == MintManageLegacyMenu || menu == MintManageSoftLiquidationMenu // todo: `LoanFormWrapper` in soft liquidation + return +} diff --git a/apps/main/src/loan/components/PageLoanManage/Page.tsx b/apps/main/src/loan/components/PageMintMarket/MintMarketPage.tsx similarity index 52% rename from apps/main/src/loan/components/PageLoanManage/Page.tsx rename to apps/main/src/loan/components/PageMintMarket/MintMarketPage.tsx index cfc8b42e6f..a86f458958 100644 --- a/apps/main/src/loan/components/PageLoanManage/Page.tsx +++ b/apps/main/src/loan/components/PageMintMarket/MintMarketPage.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from 'react' import { Address } from 'viem' import { useConnection } from 'wagmi' -import { ManageSoftLiquidation } from '@/llamalend/features/manage-soft-liquidation' import { MarketDetails } from '@/llamalend/features/market-details' import { BorrowPositionDetails, NoPosition } from '@/llamalend/features/market-position-details' import { UserPositionHistory } from '@/llamalend/features/user-position-history' @@ -9,58 +8,47 @@ import { useUserCollateralEvents } from '@/llamalend/features/user-position-hist import { useLoanExists } from '@/llamalend/queries/loan-exists' import { DetailPageStack } from '@/llamalend/widgets/DetailPageStack' import { MarketInformationComp } from '@/loan/components/MarketInformationComp' -import LoanMange from '@/loan/components/PageLoanManage/index' -import type { FormType } from '@/loan/components/PageLoanManage/types' +import { CreateLoanTabs } from '@/loan/components/PageMintMarket/CreateLoanTabs' +import { ManageLoanTabs } from '@/loan/components/PageMintMarket/ManageLoanTabs' import { useMintMarket } from '@/loan/entities/mint-markets' import { useLoanPositionDetails } from '@/loan/hooks/useLoanPositionDetails' import { useMarketDetails } from '@/loan/hooks/useMarketDetails' import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails' import networks from '@/loan/networks' import useStore from '@/loan/store/useStore' -import type { CollateralUrlParams } from '@/loan/types/loan.types' -import { hasDeleverage } from '@/loan/utils/leverage' -import { getLoanCreatePathname, parseCollateralParams, useChainId } from '@/loan/utils/utilsRouter' +import { type CollateralUrlParams } from '@/loan/types/loan.types' +import { getCollateralListPathname, useChainId } from '@/loan/utils/utilsRouter' import { isChain } from '@curvefi/prices-api' import Stack from '@mui/material/Stack' import { AppPageFormsWrapper } from '@ui/AppPage' import Box from '@ui/Box' import { ConnectWalletPrompt, isLoading, useCurve, useWallet } from '@ui-kit/features/connect-wallet' -import { useLayoutStore } from '@ui-kit/features/layout' -import { useNavigate, useParams } from '@ui-kit/hooks/router' -import { useManageSoftLiquidation } from '@ui-kit/hooks/useFeatureFlags' +import { useParams } from '@ui-kit/hooks/router' import usePageVisibleInterval from '@ui-kit/hooks/usePageVisibleInterval' import { t } from '@ui-kit/lib/i18n' import { REFRESH_INTERVAL } from '@ui-kit/lib/model' +import { ErrorPage } from '@ui-kit/pages/ErrorPage' import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces' import { CRVUSD } from '@ui-kit/utils/address' const { Spacing } = SizesAndSpaces -const Page = () => { +export const MintMarketPage = () => { const params = useParams() - const { rFormType, rCollateralId } = parseCollateralParams(params) - const push = useNavigate() + const rCollateralId = params.collateralId.toLowerCase() const { connectState, llamaApi: curve = null, isHydrated } = useCurve() const rChainId = useChainId(params) const { address } = useConnection() + const { connect: connectWallet, provider } = useWallet() + const [loaded, setLoaded] = useState(false) const market = useMintMarket({ chainId: rChainId, marketId: rCollateralId }) const marketId = market?.id ?? '' - const isMdUp = useLayoutStore((state) => state.isMdUp) const { data: loanExists } = useLoanExists({ chainId: rChainId, marketId, userAddress: address }) const fetchLoanDetails = useStore((state) => state.loans.fetchLoanDetails) - const fetchUserLoanDetails = useStore((state) => state.loans.fetchUserLoanDetails) - const resetUserDetailsState = useStore((state) => state.loans.resetUserDetailsState) - const { provider, connect: connectWallet } = useWallet() const loanStatus = useUserLoanDetails(market?.id ?? '')?.userStatus?.colorKey ?? '' - const isManageSoftLiq = useManageSoftLiquidation() && loanStatus !== 'healthy' && loanStatus !== '' - const [loaded, setLoaded] = useState(false) - - const isValidRouterParams = !!rChainId && !!rCollateralId && !!rFormType - const isReady = !!curve?.signerAddress && !!market - const marketDetails = useMarketDetails({ chainId: rChainId, llamma: market, llammaId: marketId }) const positionDetails = useLoanPositionDetails({ chainId: rChainId, @@ -89,94 +77,68 @@ const Page = () => { }) useEffect(() => { - if (isHydrated && curve && rCollateralId && market) { + if (isHydrated && curve && market) { void (async () => { - const fetchedLoanDetails = await fetchLoanDetails(curve, market) - if (!fetchedLoanDetails.loanExists) { - resetUserDetailsState(market) - push(getLoanCreatePathname(params, rCollateralId)) - } + await fetchLoanDetails(curve, market) setLoaded(true) })() } - }, [ - isReady, - isHydrated, - rFormType, - curve, - rCollateralId, - market, - fetchLoanDetails, - resetUserDetailsState, - push, - params, - ]) + }, [isHydrated, curve, market, fetchLoanDetails]) - // redirect if form is deleverage but no deleverage option - useEffect(() => { - if (market && rFormType === 'deleverage' && !hasDeleverage(market)) { - push(getLoanCreatePathname(params, market.id)) - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [loaded, rFormType, market]) - - usePageVisibleInterval(() => { + usePageVisibleInterval(async () => { if (curve?.signerAddress && market && loanExists) { - void fetchLoanDetails(curve, market) - void fetchUserLoanDetails(curve, market) + await fetchLoanDetails(curve, market) } }, REFRESH_INTERVAL['1m']) const formProps = { curve, isReady: !!curve?.signerAddress && !!market, - llamma: market ?? null, - llammaId: marketId, + market: market ?? null, rChainId, + params, } - return provider ? ( + return isHydrated && !market ? ( + + ) : provider ? ( <> - {isManageSoftLiq && } - {isValidRouterParams && !isManageSoftLiq && ( - - )} + {loaded && + (loanExists ? ( + + ) : ( + + ))} - {loanExists ? ( - t.design.Layer[1].Fill }}> + t.design.Layer[1].Fill }}> + {loanExists ? ( - {userCollateralEvents?.events && userCollateralEvents.events.length > 0 && ( - t.design.Layer[1].Fill }} - > - - - )} - - ) : ( - t.design.Layer[1].Fill }}> - - - )} + ) : ( + t.design.Layer[1].Fill }}> + + + )} + {userCollateralEvents?.events && userCollateralEvents.events.length > 0 && ( + t.design.Layer[1].Fill }} + > + + + )} + - {} + @@ -193,5 +155,3 @@ const Page = () => { ) } - -export default Page diff --git a/apps/main/src/loan/components/PageLoanManage/styles.ts b/apps/main/src/loan/components/PageMintMarket/styles.ts similarity index 100% rename from apps/main/src/loan/components/PageLoanManage/styles.ts rename to apps/main/src/loan/components/PageMintMarket/styles.ts diff --git a/apps/main/src/loan/components/PageLoanCreate/types.ts b/apps/main/src/loan/components/PageMintMarket/types.ts similarity index 68% rename from apps/main/src/loan/components/PageLoanCreate/types.ts rename to apps/main/src/loan/components/PageMintMarket/types.ts index 3e81e90868..8885ab613a 100644 --- a/apps/main/src/loan/components/PageLoanCreate/types.ts +++ b/apps/main/src/loan/components/PageMintMarket/types.ts @@ -1,11 +1,41 @@ import { Dispatch, ReactNode, SetStateAction } from 'react' import type { HealthMode } from '@/llamalend/llamalend.types' -import type { FormEstGas, FormStatus as Fs } from '@/loan/components/PageLoanManage/types' import type { LiqRangeSliderIdx } from '@/loan/store/types' import { ChainId, type CollateralUrlParams, LlamaApi, Llamma } from '@/loan/types/loan.types' import type { Step } from '@ui/Stepper/types' -export type FormType = 'create' | 'leverage' +export type CreateFormType = 'create' | 'leverage' +export type ManageFormType = 'loan' | 'collateral' | 'swap' | 'deleverage' +export type LoanFormType = 'loan-increase' | 'loan-decrease' | 'loan-liquidate' +export type CollateralFormType = 'collateral-increase' | 'collateral-decrease' + +export type FormStatus = { + isApproved: boolean + isComplete: boolean + isInProgress: boolean + error: string +} + +export type FormEstGas = { + estimatedGas: number + loading?: boolean +} + +export type FormDetailInfo = { + healthFull: string + healthNotFull: string + bands: [number, number] + prices: string[] + loading: boolean +} + +export type ManageLoanProps = { + curve: LlamaApi | null + isReady: boolean + market: Llamma | null + params: CollateralUrlParams + rChainId: ChainId +} export type FormValues = { collateral: string @@ -17,7 +47,7 @@ export type FormValues = { export type StepKey = 'APPROVAL' | 'CREATE' | '' -export interface FormStatus extends Fs { +export interface CreateFormStatus extends FormStatus { error: string warning: 'loan-exists' | string step: StepKey @@ -26,16 +56,12 @@ export interface FormStatus extends Fs { export type PageLoanCreateProps = { curve: LlamaApi | null isReady: boolean - isLeverage: boolean - llamma: Llamma | null - llammaId: string + market: Llamma | null params: CollateralUrlParams rChainId: ChainId - rCollateralId: string - rFormType: string | null } -export type FormDetailInfo = { +export type CreateFormDetailInfo = { activeKey: string activeKeyLiqRange: string chainId: ChainId @@ -48,7 +74,6 @@ export type FormDetailInfo = { isLeverage: boolean isReady: boolean llamma: Llamma | null - llammaId: string steps: Step[] setHealthMode: Dispatch> updateFormValues: (updatedFormValues: FormValues) => void diff --git a/apps/main/src/loan/components/PageMintMarket/utils.ts b/apps/main/src/loan/components/PageMintMarket/utils.ts new file mode 100644 index 0000000000..d035ba2757 --- /dev/null +++ b/apps/main/src/loan/components/PageMintMarket/utils.ts @@ -0,0 +1,63 @@ +import { + type CreateFormStatus, + FormDetailInfo, + type FormDetailInfoLeverage, + FormEstGas, + FormStatus, + type FormValues, +} from '@/loan/components/PageMintMarket/types' +import { UserWalletBalances } from '@/loan/types/loan.types' + +export const DEFAULT_DETAIL_INFO: FormDetailInfo = { + healthFull: '', + healthNotFull: '', + bands: [0, 0], + prices: [], + loading: false, +} + +export const DEFAULT_FORM_EST_GAS: FormEstGas = { + estimatedGas: 0, + loading: false, +} + +export const DEFAULT_FORM_STATUS: FormStatus = { + isApproved: false, + isComplete: false, + isInProgress: false, + error: '', +} + +export const DEFAULT_USER_WALLET_BALANCES: UserWalletBalances = { + collateral: '0', + stablecoin: '0', + error: '', +} + +export const DEFAULT_CREATE_FORM_STATUS: CreateFormStatus = { + ...DEFAULT_FORM_STATUS, + warning: '', + step: '', +} + +export const DEFAULT_DETAIL_INFO_LEVERAGE: FormDetailInfoLeverage = { + collateral: '', + leverage: '', + routeName: '', + maxRange: null, + healthFull: '', + healthNotFull: '', + bands: [0, 0], + prices: [], + priceImpact: '', + isHighImpact: false, + error: '', + loading: false, +} +export const DEFAULT_FORM_VALUES: FormValues = { + collateral: '', + collateralError: '', + debt: '', + debtError: '', + n: null, +} diff --git a/apps/main/src/loan/constants.ts b/apps/main/src/loan/constants.ts index 02ad04f0e9..dbabae35de 100644 --- a/apps/main/src/loan/constants.ts +++ b/apps/main/src/loan/constants.ts @@ -4,19 +4,9 @@ import { CRVUSD_ROUTES } from '@ui-kit/shared/routes' export const CRVUSD_ADDRESS = '0xf939e0a03fb07f59a73314e73794be0e57ac1b4e' as const export const SCRVUSD_VAULT_ADDRESS = '0x0655977FEb2f289A4aB78af67BAB0d17aAb84367' // same address as token -export const ROUTE = { - ...CRVUSD_ROUTES, - PAGE_INTEGRATIONS: '/integrations', - PAGE_CREATE: '/create', - PAGE_MANAGE: '/manage', - PAGE_404: '/404', -} +export const ROUTE = { ...CRVUSD_ROUTES, PAGE_INTEGRATIONS: '/integrations', PAGE_404: '/404' } -export const SCRVUSD_GAS_ESTIMATE = { - FIRST_DEPOSIT: 95500, - FOLLOWING_DEPOSIT: 78500, - WITHDRAW: 73500, -} +export const SCRVUSD_GAS_ESTIMATE = { FIRST_DEPOSIT: 95500, FOLLOWING_DEPOSIT: 78500, WITHDRAW: 73500 } export enum TITLE { isInMarket = 'isInMarket', @@ -32,11 +22,7 @@ export enum TITLE { myHealth = 'myHealth', } -export const DEFAULT_WALLET_BALANCES: UserWalletBalances = { - stablecoin: '0', - collateral: '0', - error: '', -} +export const DEFAULT_WALLET_BALANCES: UserWalletBalances = { stablecoin: '0', collateral: '0', error: '' } export enum RouteAggregator { Odos = 'odos', diff --git a/apps/main/src/loan/lib/apiCrvusd.ts b/apps/main/src/loan/lib/apiCrvusd.ts index 43cc3a148e..edaaf47463 100644 --- a/apps/main/src/loan/lib/apiCrvusd.ts +++ b/apps/main/src/loan/lib/apiCrvusd.ts @@ -1,7 +1,7 @@ import { cloneDeep } from 'lodash' import { getIsUserCloseToLiquidation, getLiquidationStatus, reverseBands, sortBandsMint } from '@/llamalend/llama.utils' -import type { MaxRecvLeverage as MaxRecvLeverageForm } from '@/loan/components/PageLoanCreate/types' -import type { FormDetailInfo as FormDetailInfoDeleverage } from '@/loan/components/PageLoanManage/LoanDeleverage/types' +import type { FormDetailInfo as FormDetailInfoDeleverage } from '@/loan/components/PageMintMarket/LoanDeleverage/types' +import type { MaxRecvLeverage as MaxRecvLeverageForm } from '@/loan/components/PageMintMarket/types' import networks from '@/loan/networks' import type { LiqRange, MaxRecvLeverage, Provider } from '@/loan/store/types' import { ChainId, LlamaApi, Llamma, UserLoanDetails, type BandBalance } from '@/loan/types/loan.types' diff --git a/apps/main/src/loan/store/createLoanCollateralDecreaseSlice.ts b/apps/main/src/loan/store/createLoanCollateralDecreaseSlice.ts index 471b451173..f9c6ad664d 100644 --- a/apps/main/src/loan/store/createLoanCollateralDecreaseSlice.ts +++ b/apps/main/src/loan/store/createLoanCollateralDecreaseSlice.ts @@ -1,13 +1,13 @@ import lodash from 'lodash' import type { StoreApi } from 'zustand' import { updateUserEventsApi } from '@/llamalend/llama.utils' -import type { FormStatus, FormValues } from '@/loan/components/PageLoanManage/CollateralDecrease/types' -import type { FormDetailInfo, FormEstGas } from '@/loan/components/PageLoanManage/types' +import type { FormStatus, FormValues } from '@/loan/components/PageMintMarket/CollateralDecrease/types' +import type { FormDetailInfo, FormEstGas } from '@/loan/components/PageMintMarket/types' import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS, DEFAULT_FORM_STATUS as FORM_STATUS, -} from '@/loan/components/PageLoanManage/utils' +} from '@/loan/components/PageMintMarket/utils' import networks from '@/loan/networks' import type { State } from '@/loan/store/useStore' import { ChainId, LlamaApi, Llamma } from '@/loan/types/loan.types' diff --git a/apps/main/src/loan/store/createLoanCollateralIncreaseSlice.ts b/apps/main/src/loan/store/createLoanCollateralIncreaseSlice.ts index 8466f46497..3893176b0d 100644 --- a/apps/main/src/loan/store/createLoanCollateralIncreaseSlice.ts +++ b/apps/main/src/loan/store/createLoanCollateralIncreaseSlice.ts @@ -1,13 +1,13 @@ import lodash from 'lodash' import type { StoreApi } from 'zustand' import { updateUserEventsApi } from '@/llamalend/llama.utils' -import type { FormStatus, FormValues } from '@/loan/components/PageLoanManage/CollateralIncrease/types' -import type { FormDetailInfo, FormEstGas } from '@/loan/components/PageLoanManage/types' +import type { FormStatus, FormValues } from '@/loan/components/PageMintMarket/CollateralIncrease/types' +import type { FormDetailInfo, FormEstGas } from '@/loan/components/PageMintMarket/types' import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS, DEFAULT_FORM_STATUS as FORM_STATUS, -} from '@/loan/components/PageLoanManage/utils' +} from '@/loan/components/PageMintMarket/utils' import networks from '@/loan/networks' import type { State } from '@/loan/store/useStore' import { ChainId, LlamaApi, Llamma } from '@/loan/types/loan.types' diff --git a/apps/main/src/loan/store/createLoanCreateSlice.ts b/apps/main/src/loan/store/createLoanCreateSlice.ts index f5df1c2bd7..eea8fd7df6 100644 --- a/apps/main/src/loan/store/createLoanCreateSlice.ts +++ b/apps/main/src/loan/store/createLoanCreateSlice.ts @@ -2,19 +2,21 @@ import lodash from 'lodash' import type { StoreApi } from 'zustand' import { updateUserEventsApi } from '@/llamalend/llama.utils' import { refetchLoanExists } from '@/llamalend/queries/loan-exists' -import type { - FormDetailInfoLeverage, - FormStatus, - FormValues, - MaxRecvLeverage, -} from '@/loan/components/PageLoanCreate/types' import { + type CreateFormStatus, + type FormDetailInfo, + type FormDetailInfoLeverage, + type FormEstGas, + type FormValues, + type MaxRecvLeverage, +} from '@/loan/components/PageMintMarket/types' +import { + DEFAULT_CREATE_FORM_STATUS, + DEFAULT_DETAIL_INFO, DEFAULT_DETAIL_INFO_LEVERAGE, - DEFAULT_FORM_STATUS, + DEFAULT_FORM_EST_GAS, DEFAULT_FORM_VALUES, -} from '@/loan/components/PageLoanCreate/utils' -import type { FormDetailInfo, FormEstGas } from '@/loan/components/PageLoanManage/types' -import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS } from '@/loan/components/PageLoanManage/utils' +} from '@/loan/components/PageMintMarket/utils' import networks from '@/loan/networks' import type { LiqRange, LiqRangesMapper } from '@/loan/store/types' import type { State } from '@/loan/store/useStore' @@ -33,7 +35,7 @@ type SliceState = { detailInfo: { [activeKey: string]: FormDetailInfo } detailInfoLeverage: { [activeKey: string]: FormDetailInfoLeverage } formEstGas: { [activeKey: string]: FormEstGas } - formStatus: FormStatus + formStatus: CreateFormStatus formValues: FormValues liqRanges: { [activeKey: string]: LiqRange[] } liqRangesMapper: { [activeKey: string]: LiqRangesMapper } @@ -122,7 +124,7 @@ const DEFAULT_STATE: SliceState = { detailInfo: {}, detailInfoLeverage: {}, formEstGas: {}, - formStatus: DEFAULT_FORM_STATUS, + formStatus: DEFAULT_CREATE_FORM_STATUS, formValues: DEFAULT_FORM_VALUES, liqRanges: {}, liqRangesMapper: {}, diff --git a/apps/main/src/loan/store/createLoanDecreaseSlice.ts b/apps/main/src/loan/store/createLoanDecreaseSlice.ts index 745591c178..ec02b8e8c9 100644 --- a/apps/main/src/loan/store/createLoanDecreaseSlice.ts +++ b/apps/main/src/loan/store/createLoanDecreaseSlice.ts @@ -1,13 +1,13 @@ import lodash from 'lodash' import type { StoreApi } from 'zustand' import { updateUserEventsApi } from '@/llamalend/llama.utils' -import type { FormStatus, FormValues } from '@/loan/components/PageLoanManage/LoanDecrease/types' -import type { FormDetailInfo, FormEstGas } from '@/loan/components/PageLoanManage/types' +import type { FormStatus, FormValues } from '@/loan/components/PageMintMarket/LoanDecrease/types' +import type { FormDetailInfo, FormEstGas } from '@/loan/components/PageMintMarket/types' import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS, DEFAULT_FORM_STATUS as FORM_STATUS, -} from '@/loan/components/PageLoanManage/utils' +} from '@/loan/components/PageMintMarket/utils' import networks from '@/loan/networks' import type { State } from '@/loan/store/useStore' import { ChainId, LlamaApi, Llamma } from '@/loan/types/loan.types' diff --git a/apps/main/src/loan/store/createLoanDeleverageSlice.ts b/apps/main/src/loan/store/createLoanDeleverageSlice.ts index 08e2753acd..f8cef8b743 100644 --- a/apps/main/src/loan/store/createLoanDeleverageSlice.ts +++ b/apps/main/src/loan/store/createLoanDeleverageSlice.ts @@ -1,14 +1,14 @@ import lodash from 'lodash' import type { StoreApi } from 'zustand' import { updateUserEventsApi } from '@/llamalend/llama.utils' -import type { FormDetailInfo, FormStatus, FormValues } from '@/loan/components/PageLoanManage/LoanDeleverage/types' +import type { FormDetailInfo, FormStatus, FormValues } from '@/loan/components/PageMintMarket/LoanDeleverage/types' import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_STATUS, DEFAULT_FORM_VALUES, -} from '@/loan/components/PageLoanManage/LoanDeleverage/utils' -import type { FormEstGas } from '@/loan/components/PageLoanManage/types' -import { DEFAULT_FORM_EST_GAS } from '@/loan/components/PageLoanManage/utils' +} from '@/loan/components/PageMintMarket/LoanDeleverage/utils' +import type { FormEstGas } from '@/loan/components/PageMintMarket/types' +import { DEFAULT_FORM_EST_GAS } from '@/loan/components/PageMintMarket/utils' import networks from '@/loan/networks' import type { State } from '@/loan/store/useStore' import { ChainId, LlamaApi, Llamma, UserLoanDetails } from '@/loan/types/loan.types' diff --git a/apps/main/src/loan/store/createLoanIncreaseSlice.ts b/apps/main/src/loan/store/createLoanIncreaseSlice.ts index 303315de54..e52015ccb5 100644 --- a/apps/main/src/loan/store/createLoanIncreaseSlice.ts +++ b/apps/main/src/loan/store/createLoanIncreaseSlice.ts @@ -1,13 +1,13 @@ import lodash from 'lodash' import type { StoreApi } from 'zustand' import { updateUserEventsApi } from '@/llamalend/llama.utils' -import type { FormStatus, FormValues } from '@/loan/components/PageLoanManage/LoanIncrease/types' -import type { FormDetailInfo, FormEstGas } from '@/loan/components/PageLoanManage/types' +import type { FormStatus, FormValues } from '@/loan/components/PageMintMarket/LoanIncrease/types' +import type { FormDetailInfo, FormEstGas } from '@/loan/components/PageMintMarket/types' import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS, DEFAULT_FORM_STATUS as FORM_STATUS, -} from '@/loan/components/PageLoanManage/utils' +} from '@/loan/components/PageMintMarket/utils' import networks from '@/loan/networks' import type { State } from '@/loan/store/useStore' import { ChainId, LlamaApi, Llamma } from '@/loan/types/loan.types' diff --git a/apps/main/src/loan/store/createLoanLiquidate.ts b/apps/main/src/loan/store/createLoanLiquidate.ts index 9246356f64..b5c978448c 100644 --- a/apps/main/src/loan/store/createLoanLiquidate.ts +++ b/apps/main/src/loan/store/createLoanLiquidate.ts @@ -1,9 +1,9 @@ import lodash from 'lodash' import { StoreApi } from 'zustand' import { updateUserEventsApi } from '@/llamalend/llama.utils' -import type { FormStatus } from '@/loan/components/PageLoanManage/LoanLiquidate/types' -import type { FormEstGas } from '@/loan/components/PageLoanManage/types' -import { DEFAULT_FORM_EST_GAS, DEFAULT_FORM_STATUS as FORM_STATUS } from '@/loan/components/PageLoanManage/utils' +import type { FormStatus } from '@/loan/components/PageMintMarket/LoanLiquidate/types' +import type { FormEstGas } from '@/loan/components/PageMintMarket/types' +import { DEFAULT_FORM_EST_GAS, DEFAULT_FORM_STATUS as FORM_STATUS } from '@/loan/components/PageMintMarket/utils' import networks from '@/loan/networks' import type { State } from '@/loan/store/useStore' import { ChainId, LlamaApi, Llamma, UserWalletBalances } from '@/loan/types/loan.types' diff --git a/apps/main/src/loan/types/loan.types.ts b/apps/main/src/loan/types/loan.types.ts index f9469fd064..882b6366cd 100644 --- a/apps/main/src/loan/types/loan.types.ts +++ b/apps/main/src/loan/types/loan.types.ts @@ -16,13 +16,12 @@ export type ChainId = 1 // note lend also has other chains, but we only use eth export type NetworkEnum = Extract export type NetworkUrlParams = { network: NetworkEnum } -export type CollateralUrlParams = NetworkUrlParams & { collateralId: string; formType: RFormType } +export type CollateralUrlParams = NetworkUrlParams & { collateralId: string } export type UrlParams = NetworkUrlParams & Partial export type AlertType = 'info' | 'warning' | 'error' | 'danger' export type Provider = BrowserProvider -export type RFormType = 'loan' | 'deleverage' | 'collateral' | 'leverage' | '' export interface NetworkConfig extends BaseConfig { api: typeof curvejsApi diff --git a/apps/main/src/loan/utils/utilsRouter.ts b/apps/main/src/loan/utils/utilsRouter.ts index 7ca3d5d80f..08aa93a673 100644 --- a/apps/main/src/loan/utils/utilsRouter.ts +++ b/apps/main/src/loan/utils/utilsRouter.ts @@ -1,6 +1,5 @@ -import type { FormType as ManageFormType } from '@/loan/components/PageLoanManage/types' import { ROUTE } from '@/loan/constants' -import { ChainId, type CollateralUrlParams, type NetworkUrlParams, type UrlParams } from '@/loan/types/loan.types' +import { ChainId, type NetworkUrlParams, type UrlParams } from '@/loan/types/loan.types' import { getInternalUrl, LLAMALEND_ROUTES } from '@ui-kit/shared/routes' import { Chain } from '@ui-kit/utils' @@ -15,20 +14,5 @@ export const useChainId = ({ network }: NetworkUrlParams) => ethereum: Chain.Ethereum as const, })[network] as ChainId -export const getLoanCreatePathname = ( - params: NetworkUrlParams, - collateralId: string, - formType?: 'create' | 'leverage' | 'borrow', -) => - getPath( - params, - `${ROUTE.PAGE_MARKETS}/${collateralId}${ROUTE.PAGE_CREATE}${formType && formType !== 'create' ? `/${formType}` : ''}`, - ) - -export const getLoanManagePathname = (params: NetworkUrlParams, collateralId: string, formType: ManageFormType) => - getPath(params, `${ROUTE.PAGE_MARKETS}/${collateralId}${ROUTE.PAGE_MANAGE}/${formType}`) - -export const parseCollateralParams = ({ collateralId, formType: rFormType }: CollateralUrlParams) => ({ - rFormType: rFormType ?? '', - rCollateralId: collateralId.toLowerCase(), -}) +export const getMintMarketPathname = (params: NetworkUrlParams, collateralId: string) => + getPath(params, `${ROUTE.PAGE_MARKETS}/${collateralId}`) diff --git a/apps/main/src/routes/crvusd.routes.tsx b/apps/main/src/routes/crvusd.routes.tsx index 008d89c706..247d7fd070 100644 --- a/apps/main/src/routes/crvusd.routes.tsx +++ b/apps/main/src/routes/crvusd.routes.tsx @@ -1,8 +1,7 @@ import '@/global-extensions' import CrvStaking from '@/loan/components/PageCrvUsdStaking/Page' import Integrations from '@/loan/components/PageIntegrations/Page' -import CreateLoan from '@/loan/components/PageLoanCreate/Page' -import ManageLoan from '@/loan/components/PageLoanManage/Page' +import { MintMarketPage } from '@/loan/components/PageMintMarket/MintMarketPage' import { Page as PegKeepersPage } from '@/loan/components/PagePegKeepers' import { CrvUsdClientLayout } from '@/loan/CrvUsdClientLayout' import Skeleton from '@mui/material/Skeleton' @@ -70,39 +69,18 @@ export const crvusdRoutes = crvusdLayoutRoute.addChildren([ }), createRoute({ path: '$network/markets/$collateralId', - loader: ({ params: { network, collateralId } }) => redirectTo(`/crvusd/${network}/markets/${collateralId}/create/`), + component: MintMarketPage, + head: ({ params }) => ({ meta: [{ title: `${params.collateralId} - Curve Llamalend` }] }), ...layoutProps, }), createRoute({ - path: '$network/markets/$collateralId/create/$formType', - component: CreateLoan, - head: ({ params }) => ({ - meta: [{ title: `Create - ${params.collateralId} - Curve Llamalend` }], - }), - ...layoutProps, - }), - createRoute({ - path: '$network/markets/$collateralId/create', - component: CreateLoan, - head: ({ params }) => ({ - meta: [{ title: `Create - ${params.collateralId} - Curve Llamalend` }], - }), + path: '$network/markets/$collateralId/create/{-$formType}', + loader: ({ params: { network, collateralId } }) => redirectTo(`/crvusd/${network}/markets/${collateralId}`), ...layoutProps, }), createRoute({ - path: '$network/markets/$collateralId/manage/$formType', - component: ManageLoan, - head: ({ params }) => ({ - meta: [{ title: `Manage - ${params.collateralId} - Curve Llamalend` }], - }), - ...layoutProps, - }), - createRoute({ - path: '$network/markets/$collateralId/manage', - component: ManageLoan, - head: ({ params }) => ({ - meta: [{ title: `Manage - ${params.collateralId} - Curve Llamalend` }], - }), + path: '$network/markets/$collateralId/manage/{-$formType}', + loader: ({ params: { network, collateralId } }) => redirectTo(`/crvusd/${network}/markets/${collateralId}`), ...layoutProps, }), createRoute({ diff --git a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx index 82f6e5b320..5cb77cf7ca 100644 --- a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx +++ b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx @@ -8,12 +8,12 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces' const { MaxWidth } = SizesAndSpaces -type FnOrValue = ((props: Props) => Result | undefined) | Result +type FnOrValue = ((props: Props) => Result | null | undefined) | Result const applyFnOrValue = ( fnOrValue: FnOrValue | undefined, props: Props, -): R | undefined => (typeof fnOrValue === 'function' ? fnOrValue(props) : fnOrValue) +): R | undefined => (typeof fnOrValue === 'function' ? fnOrValue(props) : fnOrValue) ?? undefined type FormSubTab = Omit, 'subTabs'> diff --git a/tests/cypress/e2e/llamalend/llamalend-markets.cy.ts b/tests/cypress/e2e/llamalend/llamalend-markets.cy.ts index 6cfa99fe58..c6c30936c2 100644 --- a/tests/cypress/e2e/llamalend/llamalend-markets.cy.ts +++ b/tests/cypress/e2e/llamalend/llamalend-markets.cy.ts @@ -272,7 +272,7 @@ describe(`LlamaLend Markets`, () => { it(`should navigate to market details`, () => { const [type, urlRegex] = oneOf( - ['mint', /\/crvusd\/\w+\/markets\/.+\/create/], + ['mint', /\/crvusd\/\w+\/markets\/[\w-]+\/?$/], ['lend', /\/lend\/\w+\/markets\/.+\/create/], ) withFilterChips(() => { diff --git a/tests/cypress/support/routes.ts b/tests/cypress/support/routes.ts index 17b531d96f..79d8167c02 100644 --- a/tests/cypress/support/routes.ts +++ b/tests/cypress/support/routes.ts @@ -30,7 +30,7 @@ export const oneAppRoute = () => `crvusd/ethereum${oneOf( ...recordValues(CRVUSD_ROUTES).map((r) => // use market detail page, the list page redirects to the llamalend app - r == CRVUSD_ROUTES.PAGE_MARKETS ? `${CRVUSD_ROUTES.PAGE_MARKETS}/WBTC/create` : r, + r == CRVUSD_ROUTES.PAGE_MARKETS ? `${CRVUSD_ROUTES.PAGE_MARKETS}/WBTC` : r, ), )}`, llamalend: () => `llamalend/ethereum${oneOf(...recordValues(LLAMALEND_ROUTES))}`,