diff --git a/apps/main/src/llamalend/entities/llama-markets.ts b/apps/main/src/llamalend/entities/llama-markets.ts index aa8d58d38..df83d6809 100644 --- a/apps/main/src/llamalend/entities/llama-markets.ts +++ b/apps/main/src/llamalend/entities/llama-markets.ts @@ -243,7 +243,7 @@ const convertMintMarket = ( url: getInternalUrl( 'crvusd', chain, - `${CRVUSD_ROUTES.PAGE_MARKETS}/${name}/${hasBorrow ? 'manage/loan' : 'create'}`, + `${CRVUSD_ROUTES.PAGE_MARKETS}/${address}/${hasBorrow ? 'manage/loan' : 'create'}`, ), isFavorite: favoriteMarkets.has(llamma), rewards: [...(campaigns[address.toLowerCase()] ?? []), ...(campaigns[llamma.toLowerCase()] ?? [])], diff --git a/apps/main/src/loan/components/PageLoanCreate/Page.tsx b/apps/main/src/loan/components/PageLoanCreate/Page.tsx index 01ca8fc62..9872a8e63 100644 --- a/apps/main/src/loan/components/PageLoanCreate/Page.tsx +++ b/apps/main/src/loan/components/PageLoanCreate/Page.tsx @@ -12,14 +12,9 @@ import { hasLeverage } from '@/loan/components/PageLoanCreate/utils' import { useMintMarket } from '@/loan/entities/mint-markets' import { useMarketDetails } from '@/loan/hooks/useMarketDetails' import useStore from '@/loan/store/useStore' -import { type CollateralUrlParams, type LlamaApi, Llamma } from '@/loan/types/loan.types' +import { type MarketUrlParams, type LlamaApi, Llamma } from '@/loan/types/loan.types' import { getTokenName } from '@/loan/utils/utilsLoan' -import { - getLoanCreatePathname, - getLoanManagePathname, - parseCollateralParams, - useChainId, -} from '@/loan/utils/utilsRouter' +import { getLoanCreatePathname, getLoanManagePathname, parseMarketParams, useChainId } from '@/loan/utils/utilsRouter' import Stack from '@mui/material/Stack' import { AppPageFormsWrapper, AppPageFormTitleWrapper } from '@ui/AppPage' import Box from '@ui/Box' @@ -39,8 +34,8 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces' const { Spacing } = SizesAndSpaces const Page = () => { - const params = useParams() - const { rFormType = null, rCollateralId } = parseCollateralParams(params) + const params = useParams() + const { rFormType = null, rMarket } = parseMarketParams(params) const push = useNavigate() const { connectState, llamaApi: curve = null } = useConnection() const rChainId = useChainId(params) @@ -48,7 +43,7 @@ const Page = () => { const { address } = useAccount() const [loaded, setLoaded] = useState(false) - const { data: market } = useMintMarket({ chainId: rChainId, marketId: rCollateralId }) + const { data: market } = useMintMarket({ chainId: rChainId, marketId: rMarket }) const marketId = market?.id ?? '' const pageLoaded = !isLoading(connectState) @@ -170,7 +165,7 @@ const Page = () => { )} - {rChainId && rCollateralId && ( + {rChainId && rMarket && ( { llammaId={marketId} params={params} rChainId={rChainId} - rCollateralId={rCollateralId} + rMarket={rMarket} rFormType={rFormType} fetchInitial={fetchInitial} /> diff --git a/apps/main/src/loan/components/PageLoanCreate/index.tsx b/apps/main/src/loan/components/PageLoanCreate/index.tsx index 9ba8d9b77..634cf41f1 100644 --- a/apps/main/src/loan/components/PageLoanCreate/index.tsx +++ b/apps/main/src/loan/components/PageLoanCreate/index.tsx @@ -44,7 +44,7 @@ const LoanCreate = ({ loanExists: boolean | undefined fetchInitial: (curve: LlamaApi, isLeverage: boolean, llamma: Llamma) => void }) => { - const { curve, llamma, loanExists, params, rCollateralId, rFormType, rChainId } = props + const { curve, llamma, loanExists, params, rMarket, rFormType, rChainId } = props const push = useNavigate() const collateralAlert = useCollateralAlert(llamma?.address) const [releaseChannel] = useReleaseChannel() @@ -66,15 +66,15 @@ const LoanCreate = ({ const handleTabClick = useCallback( (formType: FormType) => { if (loanExists) { - push(getLoanManagePathname(params, rCollateralId, 'loan')) + push(getLoanManagePathname(params, rMarket, 'loan')) } else { if (curve && llamma) { fetchInitial(curve, formType === 'leverage', llamma) } - push(getLoanCreatePathname(params, rCollateralId, formType)) + push(getLoanCreatePathname(params, rMarket, formType)) } }, - [curve, fetchInitial, llamma, loanExists, push, params, rCollateralId], + [curve, fetchInitial, llamma, loanExists, push, params, rMarket], ) return ( diff --git a/apps/main/src/loan/components/PageLoanCreate/types.ts b/apps/main/src/loan/components/PageLoanCreate/types.ts index 1649efab8..bd4840c86 100644 --- a/apps/main/src/loan/components/PageLoanCreate/types.ts +++ b/apps/main/src/loan/components/PageLoanCreate/types.ts @@ -1,7 +1,7 @@ import { Dispatch, ReactNode, SetStateAction } from 'react' import type { FormEstGas, FormStatus as Fs } from '@/loan/components/PageLoanManage/types' import type { LiqRangeSliderIdx } from '@/loan/store/types' -import { ChainId, type CollateralUrlParams, LlamaApi, HealthMode, Llamma } from '@/loan/types/loan.types' +import { ChainId, type MarketUrlParams, LlamaApi, HealthMode, Llamma } from '@/loan/types/loan.types' import type { Step } from '@ui/Stepper/types' export type FormType = 'create' | 'leverage' @@ -28,9 +28,9 @@ export type PageLoanCreateProps = { isLeverage: boolean llamma: Llamma | null llammaId: string - params: CollateralUrlParams + params: MarketUrlParams rChainId: ChainId - rCollateralId: string + rMarket: string rFormType: string | null } diff --git a/apps/main/src/loan/components/PageLoanManage/Page.tsx b/apps/main/src/loan/components/PageLoanManage/Page.tsx index 4e61c79f3..0d2aa2e04 100644 --- a/apps/main/src/loan/components/PageLoanManage/Page.tsx +++ b/apps/main/src/loan/components/PageLoanManage/Page.tsx @@ -15,11 +15,11 @@ import { useLoanPositionDetails } from '@/loan/hooks/useLoanPositionDetails' import { useMarketDetails } from '@/loan/hooks/useMarketDetails' import useTitleMapper from '@/loan/hooks/useTitleMapper' import useStore from '@/loan/store/useStore' -import type { CollateralUrlParams } from '@/loan/types/loan.types' +import type { MarketUrlParams } from '@/loan/types/loan.types' import { getCollateralListPathname, getLoanCreatePathname, - parseCollateralParams, + parseMarketParams, useChainId, } from '@/loan/utils/utilsRouter' import Stack from '@mui/material/Stack' @@ -39,8 +39,8 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces' const { Spacing } = SizesAndSpaces const Page = () => { - const params = useParams() - const { rFormType, rCollateralId } = parseCollateralParams(params) + const params = useParams() + const { rFormType, rMarket } = parseMarketParams(params) const push = useNavigate() const { connectState, llamaApi: curve = null } = useConnection() const pageLoaded = !isLoading(connectState) @@ -48,12 +48,13 @@ const Page = () => { const rChainId = useChainId(params) const { address } = useAccount() - const { data: market } = useMintMarket({ chainId: rChainId, marketId: rCollateralId }) + const { data: market } = useMintMarket({ chainId: rChainId, marketId: rMarket }) const marketId = market?.id ?? '' const isMdUp = useLayoutStore((state) => state.isMdUp) const isPageVisible = useLayoutStore((state) => state.isPageVisible) 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) @@ -62,8 +63,8 @@ const Page = () => { const [loaded, setLoaded] = useState(false) - const isValidRouterParams = !!rChainId && !!rCollateralId && !!rFormType const isReady = !!curve?.signerAddress && !!market + const isValidRouterParams = !!rChainId && !!rMarket && !!rFormType const marketDetails = useMarketDetails({ chainId: rChainId, llamma: market, llammaId: marketId }) const positionDetails = useLoanPositionDetails({ @@ -74,18 +75,18 @@ const Page = () => { useEffect(() => { if (curve && pageLoaded) { - if (rChainId && rCollateralId && rFormType && curve.signerAddress && market) { + if (rChainId && rMarket && rFormType && curve.signerAddress && market) { void (async () => { const fetchedLoanDetails = await fetchLoanDetails(curve, market) if (!fetchedLoanDetails.loanExists) { resetUserDetailsState(market) - push(getLoanCreatePathname(params, rCollateralId)) + push(getLoanCreatePathname(params, rMarket)) } setLoaded(true) })() } else { - const args = { rChainId, rCollateralId, rFormType, signer: curve.signerAddress, market } - console.warn(`Cannot find market ${rCollateralId}, redirecting to list`, args) + const args = { rChainId, rMarket, rFormType, signer: curve.signerAddress, market } + console.warn(`Cannot find market ${rMarket}, redirecting to list`, args) push(getCollateralListPathname(params)) } } @@ -152,7 +153,7 @@ const Page = () => { {...formProps} params={params} rChainId={rChainId} - rCollateralId={rCollateralId} + rMarket={rMarket} rFormType={rFormType as FormType} titleMapper={titleMapper} /> diff --git a/apps/main/src/loan/components/PageLoanManage/index.tsx b/apps/main/src/loan/components/PageLoanManage/index.tsx index 22e5d2c66..0ef339205 100644 --- a/apps/main/src/loan/components/PageLoanManage/index.tsx +++ b/apps/main/src/loan/components/PageLoanManage/index.tsx @@ -32,7 +32,7 @@ const tabsCollateral: TabOption[] = [ { value: 'collateral-decrease', label: t`Remove` }, ] -const LoanManage = ({ curve, isReady, llamma, llammaId, params, rChainId, rCollateralId, rFormType }: Props) => { +const LoanManage = ({ curve, isReady, llamma, llammaId, params, rChainId, rMarket, rFormType }: Props) => { const push = useNavigate() type Tab = 'loan' | 'collateral' | 'deleverage' @@ -59,7 +59,7 @@ const LoanManage = ({ curve, isReady, llamma, llammaId, params, rChainId, rColla variant="contained" size="medium" value={!rFormType ? 'loan' : rFormType} - onChange={(key) => push(getLoanManagePathname(params, rCollateralId, key as FormType))} + onChange={(key) => push(getLoanManagePathname(params, rMarket, key as FormType))} options={tabs} fullWidth /> diff --git a/apps/main/src/loan/components/PageLoanManage/types.ts b/apps/main/src/loan/components/PageLoanManage/types.ts index af1d0b33f..5c95e04af 100644 --- a/apps/main/src/loan/components/PageLoanManage/types.ts +++ b/apps/main/src/loan/components/PageLoanManage/types.ts @@ -1,4 +1,4 @@ -import { ChainId, type CollateralUrlParams, LlamaApi, Llamma, TitleMapper } from '@/loan/types/loan.types' +import { ChainId, type MarketUrlParams, LlamaApi, Llamma, TitleMapper } from '@/loan/types/loan.types' export type DetailInfoTypes = 'user' | 'llamma' export type FormType = 'loan' | 'collateral' | 'swap' | 'deleverage' export type LoanFormType = 'loan-increase' | 'loan-decrease' | 'loan-liquidate' @@ -29,9 +29,9 @@ export type PageLoanManageProps = { isReady: boolean llamma: Llamma | null llammaId: string - params: CollateralUrlParams + params: MarketUrlParams rChainId: ChainId - rCollateralId: string + rMarket: string rFormType: FormType titleMapper: TitleMapper } diff --git a/apps/main/src/loan/types/loan.types.ts b/apps/main/src/loan/types/loan.types.ts index 8847284d7..b5ad6637f 100644 --- a/apps/main/src/loan/types/loan.types.ts +++ b/apps/main/src/loan/types/loan.types.ts @@ -15,8 +15,8 @@ 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 UrlParams = NetworkUrlParams & Partial +export type MarketUrlParams = NetworkUrlParams & { market: string; formType: RFormType } +export type UrlParams = NetworkUrlParams & Partial export type AlertType = 'info' | 'warning' | 'error' | 'danger' diff --git a/apps/main/src/loan/utils/utilsRouter.ts b/apps/main/src/loan/utils/utilsRouter.ts index 7ca3d5d80..91141b41a 100644 --- a/apps/main/src/loan/utils/utilsRouter.ts +++ b/apps/main/src/loan/utils/utilsRouter.ts @@ -1,6 +1,6 @@ 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 MarketUrlParams, type NetworkUrlParams, type UrlParams } from '@/loan/types/loan.types' import { getInternalUrl, LLAMALEND_ROUTES } from '@ui-kit/shared/routes' import { Chain } from '@ui-kit/utils' @@ -17,18 +17,18 @@ export const useChainId = ({ network }: NetworkUrlParams) => export const getLoanCreatePathname = ( params: NetworkUrlParams, - collateralId: string, + market: string, formType?: 'create' | 'leverage' | 'borrow', ) => getPath( params, - `${ROUTE.PAGE_MARKETS}/${collateralId}${ROUTE.PAGE_CREATE}${formType && formType !== 'create' ? `/${formType}` : ''}`, + `${ROUTE.PAGE_MARKETS}/${market}${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 getLoanManagePathname = (params: NetworkUrlParams, market: string, formType: ManageFormType) => + getPath(params, `${ROUTE.PAGE_MARKETS}/${market}${ROUTE.PAGE_MANAGE}/${formType}`) -export const parseCollateralParams = ({ collateralId, formType: rFormType }: CollateralUrlParams) => ({ +export const parseMarketParams = ({ market, formType: rFormType }: MarketUrlParams) => ({ rFormType: rFormType ?? '', - rCollateralId: collateralId.toLowerCase(), + rMarket: market.toLowerCase(), }) diff --git a/apps/main/src/routes/crvusd.routes.tsx b/apps/main/src/routes/crvusd.routes.tsx index 9bd2ac1c8..acde2a481 100644 --- a/apps/main/src/routes/crvusd.routes.tsx +++ b/apps/main/src/routes/crvusd.routes.tsx @@ -64,34 +64,34 @@ export const crvusdRoutes = crvusdLayoutRoute.addChildren([ ...layoutProps, }), createRoute({ - path: '$network/markets/$collateralId/create/$formType', + path: '$network/markets/$market/create/$formType', component: CreateLoan, head: ({ params }) => ({ - meta: [{ title: `Create - ${params.collateralId} - Curve` }], + meta: [{ title: `Create - ${params.market} - Curve` }], }), ...layoutProps, }), createRoute({ - path: '$network/markets/$collateralId/create', + path: '$network/markets/$market/create', component: CreateLoan, head: ({ params }) => ({ - meta: [{ title: `Create - ${params.collateralId} - Curve` }], + meta: [{ title: `Create - ${params.market} - Curve` }], }), ...layoutProps, }), createRoute({ - path: '$network/markets/$collateralId/manage/$formType', + path: '$network/markets/$market/manage/$formType', component: ManageLoan, head: ({ params }) => ({ - meta: [{ title: `Manage - ${params.collateralId} - Curve` }], + meta: [{ title: `Manage - ${params.market} - Curve` }], }), ...layoutProps, }), createRoute({ - path: '$network/markets/$collateralId/manage', + path: '$network/markets/$market/manage', component: ManageLoan, head: ({ params }) => ({ - meta: [{ title: `Manage - ${params.collateralId} - Curve` }], + meta: [{ title: `Manage - ${params.market} - Curve` }], }), ...layoutProps, }),