Merge pull request #1424 from curvefi/refactor/mint-market-address-url

feat: use mint market controller address in url instead of id

Author: DanielSchiavini

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()] ?? [])],

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,16 +34,16 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 const { Spacing } = SizesAndSpaces
 
 const Page = () => {
-  const params = useParams<CollateralUrlParams>()
-  const { rFormType = null, rCollateralId } = parseCollateralParams(params)
+  const params = useParams<MarketUrlParams>()
+  const { rFormType = null, rMarket } = parseMarketParams(params)
   const push = useNavigate()
   const { connectState, llamaApi: curve = null } = useConnection()
   const rChainId = useChainId(params)
   const { connect: connectWallet, provider } = useWallet()
   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 = () => {
       )}
       <DetailPageStack>
         <AppPageFormsWrapper>
-          {rChainId && rCollateralId && (
+          {rChainId && rMarket && (
             <LoanCreate
               curve={curve}
               isReady={isReady}
@@ -180,7 +175,7 @@ const Page = () => {
               llammaId={marketId}
               params={params}
               rChainId={rChainId}
-              rCollateralId={rCollateralId}
+              rMarket={rMarket}
               rFormType={rFormType}
               fetchInitial={fetchInitial}
             />

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 (

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
 }
 

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,21 +39,22 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 const { Spacing } = SizesAndSpaces
 
 const Page = () => {
-  const params = useParams<CollateralUrlParams>()
-  const { rFormType, rCollateralId } = parseCollateralParams(params)
+  const params = useParams<MarketUrlParams>()
+  const { rFormType, rMarket } = parseMarketParams(params)
   const push = useNavigate()
   const { connectState, llamaApi: curve = null } = useConnection()
   const pageLoaded = !isLoading(connectState)
   const titleMapper = useTitleMapper()
   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}
             />

apps/main/src/loan/components/PageLoanManage/index.tsx

@@ -32,7 +32,7 @@ const tabsCollateral: TabOption<CollateralFormType>[] = [
   { 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
       />

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
 }

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<INetworkName, 'ethereum'>
 
 export type NetworkUrlParams = { network: NetworkEnum }
-export type CollateralUrlParams = NetworkUrlParams & { collateralId: string; formType: RFormType }
-export type UrlParams = NetworkUrlParams & Partial<CollateralUrlParams>
+export type MarketUrlParams = NetworkUrlParams & { market: string; formType: RFormType }
+export type UrlParams = NetworkUrlParams & Partial<MarketUrlParams>
 
 export type AlertType = 'info' | 'warning' | 'error' | 'danger'
 

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(),
 })

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,
   }),