refactor: merge lend create and manage loan + vault pages

apps/main/src/lend/components/AlertNoLoanFound.tsx

@@ -1,7 +1,7 @@
 import { styled } from 'styled-components'
 import useStore from '@/lend/store/useStore'
 import type { UrlParams } from '@/lend/types/lend.types'
-import { getLoanCreatePathname } from '@/lend/utils/utilsRouter'
+import { getLoanPathname } from '@/lend/utils/utilsRouter'
 import AlertBox from '@ui/AlertBox'
 import type { AlertType } from '@ui/AlertBox/types'
 import Button from '@ui/Button'
@@ -25,7 +25,7 @@ const AlertNoLoanFound = ({ alertType, owmId }: { alertType?: AlertType; owmId:
           size="large"
           onClick={() => {
             setStateByKeyMarkets('marketDetailsView', 'market')
-            push(getLoanCreatePathname(params, owmId))
+            push(getLoanPathname(params, owmId))
           }}
         >
           Create loan

apps/main/src/lend/components/BandsComp.tsx

@@ -9,46 +9,39 @@ import { t } from '@ui-kit/lib/i18n'
 
 type BandsCompProps = {
   pageProps: PageContentProps
-  page: 'create' | 'manage'
-  loanExists: boolean
+  loanExists: boolean | undefined
 }
 
-export const BandsComp = ({ pageProps, page, loanExists }: BandsCompProps) => {
+export const BandsComp = ({ pageProps, loanExists }: BandsCompProps) => {
   const { rChainId, rOwmId, market } = pageProps
-  const [selectedBand, setSelectedBand] = useState<'user' | 'market'>(page === 'create' ? 'market' : 'user')
+  const [selectedBand, setSelectedBand] = useState<'user' | 'market'>(loanExists ? 'user' : 'market')
 
-  const SelectorMenu =
-    page === 'create' ? null : (
-      <SelectorRow>
-        <SelectorButton
-          variant="text"
-          className={selectedBand === 'user' ? 'active' : ''}
-          onClick={() => setSelectedBand('user')}
-        >
-          {t`Position Bands`}
-        </SelectorButton>
-        <SelectorButton
-          variant="text"
-          className={selectedBand === 'market' ? 'active' : ''}
-          onClick={() => setSelectedBand('market')}
-        >
-          {t`Market Bands`}
-        </SelectorButton>
-      </SelectorRow>
-    )
+  const SelectorMenu = loanExists && (
+    <SelectorRow>
+      <SelectorButton
+        variant="text"
+        className={selectedBand === 'user' ? 'active' : ''}
+        onClick={() => setSelectedBand('user')}
+      >
+        {t`Position Bands`}
+      </SelectorButton>
+      <SelectorButton
+        variant="text"
+        className={selectedBand === 'market' ? 'active' : ''}
+        onClick={() => setSelectedBand('market')}
+      >
+        {t`Market Bands`}
+      </SelectorButton>
+    </SelectorRow>
+  )
 
   return (
     <Stack>
       {selectedBand === 'user' && loanExists && (
         <DetailsUserLoanChartBandBalances {...pageProps} selectorMenu={SelectorMenu} />
       )}
       {(selectedBand === 'market' || !loanExists) && (
-        <DetailsLoanChartBalances
-          rChainId={rChainId}
-          rOwmId={rOwmId}
-          market={market}
-          selectorMenu={loanExists ? SelectorMenu : undefined}
-        />
+        <DetailsLoanChartBalances rChainId={rChainId} rOwmId={rOwmId} market={market} selectorMenu={SelectorMenu} />
       )}
     </Stack>
   )

apps/main/src/lend/components/InpChipVaultShareUsdRate.tsx

@@ -1,4 +1,4 @@
-import { StyledInpChip } from '@/lend/components/PageLoanManage/styles'
+import { StyledInpChip } from '@/lend/components/styles'
 import useVaultShares from '@/lend/hooks/useVaultShares'
 import { ChainId } from '@/lend/types/lend.types'
 import Box from '@ui/Box'

apps/main/src/lend/components/InpToken.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import InpChipUsdRate from '@/lend/components/InpChipUsdRate'
-import { StyledInpChip } from '@/lend/components/PageLoanManage/styles'
+import { StyledInpChip } from '@/lend/components/styles'
 import type { NetworkConfig } from '@/lend/types/lend.types'
 import Box from '@ui/Box'
 import InputProvider, { InputDebounced, InputMaxBtn } from '@ui/InputComp'

apps/main/src/lend/components/InpTokenBorrow.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import InpChipUsdRate from '@/lend/components/InpChipUsdRate'
-import { StyledInpChip } from '@/lend/components/PageLoanManage/styles'
 import { FieldsTitle } from '@/lend/components/SharedFormStyles/FieldsWrapper'
+import { StyledInpChip } from '@/lend/components/styles'
 import type { NetworkConfig } from '@/lend/types/lend.types'
 import Box from '@ui/Box'
 import type { BoxProps } from '@ui/Box/types'

apps/main/src/lend/components/InpTokenRemove.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import InpChipUsdRate from '@/lend/components/InpChipUsdRate'
-import { StyledInpChip } from '@/lend/components/PageLoanManage/styles'
 import { FieldsTitle } from '@/lend/components/SharedFormStyles/FieldsWrapper'
+import { StyledInpChip } from '@/lend/components/styles'
 import type { NetworkConfig } from '@/lend/types/lend.types'
 import Box from '@ui/Box'
 import type { BoxProps } from '@ui/Box/types'

apps/main/src/lend/components/MarketInformationComp.tsx

@@ -18,24 +18,17 @@ const { Spacing } = SizesAndSpaces
 
 type MarketInformationCompProps = {
   pageProps: PageContentProps
-  loanExists?: boolean
+  loanExists: boolean | undefined
   userActiveKey: string
   type: 'borrow' | 'supply'
-  page?: 'create' | 'manage'
 }
 
 const EMPTY_ARRAY: never[] = []
 
 /**
- * Reusable component for OHLC charts, Bands (if applicable), and market parameters. For /create, /manage, /vault pages.
+ * Reusable component for OHLC charts, Bands (if applicable), and market parameters, used in market and vault pages.
  */
-export const MarketInformationComp = ({
-  pageProps,
-  loanExists = false,
-  userActiveKey,
-  type,
-  page = 'manage',
-}: MarketInformationCompProps) => {
+export const MarketInformationComp = ({ pageProps, loanExists, userActiveKey, type }: MarketInformationCompProps) => {
   const { rChainId, rOwmId, market } = pageProps
   const collateralTokenAddress = market?.collateral_token.address
   const borrowedTokenAddress = market?.borrowed_token.address
@@ -88,7 +81,7 @@ export const MarketInformationComp = ({
       )}
       {type === 'borrow' && !newBandsChartEnabled && isAdvancedMode && (
         <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill, gap: Spacing.md, padding: Spacing.md }}>
-          <BandsComp pageProps={pageProps} page={page} loanExists={loanExists} />
+          <BandsComp pageProps={pageProps} loanExists={loanExists} />
         </Stack>
       )}
       {market && isAdvancedMode && (

apps/main/src/lend/components/PageLoanManage/Page.tsx → apps/main/src/lend/components/PageLendMarket/LendMarketPage.tsx

@@ -3,7 +3,8 @@ import type { Address } from 'viem'
 import CampaignRewardsBanner from '@/lend/components/CampaignRewardsBanner'
 import { MarketInformationComp } from '@/lend/components/MarketInformationComp'
 import { MarketInformationTabs } from '@/lend/components/MarketInformationTabs'
-import { ManageLoanTabs } from '@/lend/components/PageLoanManage/ManageLoanTabs'
+import { LoanCreateTabs } from '@/lend/components/PageLendMarket/LoanCreateTabs'
+import { ManageLoanTabs } from '@/lend/components/PageLendMarket/ManageLoanTabs'
 import { useOneWayMarket } from '@/lend/entities/chain'
 import { useBorrowPositionDetails } from '@/lend/hooks/useBorrowPositionDetails'
 import { useLendPageTitle } from '@/lend/hooks/useLendPageTitle'
@@ -13,8 +14,8 @@ import { helpers } from '@/lend/lib/apiLending'
 import networks from '@/lend/networks'
 import useStore from '@/lend/store/useStore'
 import { type MarketUrlParams } from '@/lend/types/lend.types'
-import { getVaultPathname, parseMarketParams } from '@/lend/utils/helpers'
-import { getCollateralListPathname } from '@/lend/utils/utilsRouter'
+import { getCollateralListPathname, parseMarketParams } from '@/lend/utils/helpers'
+import { getVaultPathname } from '@/lend/utils/utilsRouter'
 import { MarketDetails } from '@/llamalend/features/market-details'
 import { BorrowPositionDetails, NoPosition } from '@/llamalend/features/market-position-details'
 import { UserPositionHistory } from '@/llamalend/features/user-position-history'
@@ -35,41 +36,28 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 const { Spacing } = SizesAndSpaces
 
-const Page = () => {
+export const LendMarketPage = () => {
   const params = useParams<MarketUrlParams>()
-  const { rMarket, rChainId } = parseMarketParams(params)
+  const { rMarket, rChainId: chainId } = parseMarketParams(params)
+
+  const { data: market, isSuccess } = useOneWayMarket(chainId, rMarket)
   const { llamaApi: api = null, connectState } = useCurve()
   const titleMapper = useTitleMapper()
-  const { data: market, isSuccess } = useOneWayMarket(rChainId, rMarket)
-  const rOwmId = market?.id ?? ''
-  const userActiveKey = helpers.getUserActiveKey(api, market!)
+  const { provider, connect } = useWallet()
+
   const isPageVisible = useLayoutStore((state) => state.isPageVisible)
   const fetchAllMarketDetails = useStore((state) => state.markets.fetchAll)
+  const fetchUserMarketBalances = useStore((state) => state.user.fetchUserMarketBalances)
   const fetchAllUserMarketDetails = useStore((state) => state.user.fetchAll)
   const setMarketsStateKey = useStore((state) => state.markets.setStateByKey)
-  const { provider, connect } = useWallet()
 
+  const marketId = market?.id ?? '' // todo: use market?.id directly everywhere since we pass the market too!
+  const userActiveKey = helpers.getUserActiveKey(api, market!)
   const { signerAddress } = api ?? {}
+  useLendPageTitle(market?.collateral_token?.symbol ?? rMarket, t`Lend`)
 
-  const { data: loanExists } = useLoanExists({
-    chainId: rChainId,
-    marketId: market?.id,
-    userAddress: signerAddress,
-  })
-
-  const [isLoaded, setLoaded] = useState(false)
-
-  const borrowPositionDetails = useBorrowPositionDetails({
-    chainId: rChainId,
-    market: market ?? undefined,
-    marketId: rOwmId,
-  })
-  const marketDetails = useMarketDetails({
-    chainId: rChainId,
-    llamma: market,
-    llammaId: rOwmId,
-  })
-  const network = networks[rChainId]
+  const marketDetails = useMarketDetails({ chainId, market, marketId })
+  const network = networks[chainId]
   const {
     data: userCollateralEvents,
     isLoading: collateralEventsIsLoading,
@@ -83,62 +71,73 @@ const Page = () => {
     borrowToken: market?.borrowed_token,
     network,
   })
+  const { data: loanExists, isLoading: isLoanExistsLoading } = useLoanExists({
+    chainId,
+    marketId: marketId,
+    userAddress: signerAddress,
+  })
 
-  const isInSoftLiquidation =
-    borrowPositionDetails.liquidationAlert.softLiquidation || borrowPositionDetails.liquidationAlert.hardLiquidation
+  const [isLoaded, setLoaded] = useState(false)
 
-  useEffect(() => {
-    if (api && market && isPageVisible) {
-      if (loanExists) setMarketsStateKey('marketDetailsView', 'user')
-      setLoaded(true)
-    }
-  }, [api, isPageVisible, loanExists, market, setMarketsStateKey])
+  const borrowPositionDetails = useBorrowPositionDetails({ chainId, market: market, marketId })
 
   useEffect(() => {
     // delay fetch rest after form details are fetched first
     const timer = setTimeout(async () => {
-      if (!api || !market || !isPageVisible || !isLoaded) return
-      void fetchAllMarketDetails(api, market, true)
-      if (api.signerAddress && loanExists) {
-        void fetchAllUserMarketDetails(api, market, true)
+      if (!api || !market || !isPageVisible) return
+      await fetchAllMarketDetails(api, market, true)
+      if (api.signerAddress) {
+        await fetchUserMarketBalances(api, market, true)
+        if (loanExists) {
+          void fetchAllUserMarketDetails(api, market, true)
+        }
       }
     }, REFRESH_INTERVAL['3s'])
     return () => clearTimeout(timer)
-  }, [api, fetchAllMarketDetails, fetchAllUserMarketDetails, isLoaded, isPageVisible, loanExists, market])
-
-  useLendPageTitle(market?.collateral_token?.symbol, 'Manage')
-
-  const pageProps = {
-    params,
-    rChainId,
-    rOwmId,
-    isLoaded,
+  }, [
     api,
+    fetchAllMarketDetails,
+    fetchUserMarketBalances,
+    fetchAllUserMarketDetails,
+    isPageVisible,
     market,
-    userActiveKey,
-    titleMapper,
-  }
+    loanExists,
+  ])
+
+  useEffect(() => {
+    if (api && market && isPageVisible) {
+      if (loanExists) setMarketsStateKey('marketDetailsView', 'user')
+      setLoaded(true)
+    }
+  }, [api, isPageVisible, loanExists, market, setMarketsStateKey])
 
-  const positionDetailsHrefs = {
-    borrow: '',
-    supply: getVaultPathname(params, rOwmId),
-  }
+  const pageProps = { params, rChainId: chainId, rOwmId: marketId, isLoaded, api, market, userActiveKey, titleMapper }
 
   return isSuccess && !market ? (
     <ErrorPage title="404" subtitle={t`Market Not Found`} continueUrl={getCollateralListPathname(params)} />
   ) : provider ? (
     <>
       <DetailPageStack>
         <AppPageFormsWrapper>
-          {rChainId && rOwmId && <ManageLoanTabs isInSoftLiquidation={isInSoftLiquidation} {...pageProps} />}
+          {chainId &&
+            marketId &&
+            !isLoanExistsLoading &&
+            (loanExists ? (
+              <ManageLoanTabs position={borrowPositionDetails} {...pageProps} />
+            ) : (
+              <LoanCreateTabs {...pageProps} params={params} />
+            ))}
         </AppPageFormsWrapper>
         <Stack flexDirection="column" flexGrow={1} sx={{ gap: Spacing.md }}>
           <CampaignRewardsBanner
-            chainId={rChainId}
+            chainId={chainId}
             borrowAddress={market?.addresses?.controller || ''}
             supplyAddress={market?.addresses?.vault || ''}
           />
-          <MarketInformationTabs currentTab={'borrow'} hrefs={positionDetailsHrefs}>
+          <MarketInformationTabs
+            currentTab={'borrow'}
+            hrefs={{ borrow: '', supply: getVaultPathname(params, marketId) }}
+          >
             {loanExists ? (
               <BorrowPositionDetails {...borrowPositionDetails} />
             ) : (
@@ -185,5 +184,3 @@ const Page = () => {
     </Box>
   )
 }
-
-export default Page

apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/components/DetailInfoLeverage.tsx → apps/main/src/lend/components/PageLendMarket/LoanBorrowMore/components/DetailInfoLeverage.tsx

@@ -7,7 +7,7 @@ import DetailInfoLiqRange from '@/lend/components/DetailInfoLiqRange'
 import DetailInfoPriceImpact from '@/lend/components/DetailInfoPriceImpact'
 import DetailInfoRate from '@/lend/components/DetailInfoRate'
 import DetailInfoSlippageTolerance from '@/lend/components/DetailInfoSlippageTolerance'
-import { _parseValues } from '@/lend/components/PageLoanManage/LoanBorrowMore/utils'
+import { _parseValues } from '@/lend/components/PageLendMarket/LoanBorrowMore/utils'
 import networks from '@/lend/networks'
 import useStore from '@/lend/store/useStore'
 import { PageContentProps } from '@/lend/types/lend.types'