refactor: market advanced details parameters prework

apps/main/src/lend/components/DetailsMarket/components/DetailsContracts.tsx

@@ -2,12 +2,16 @@ import { ReactNode } from 'react'
 import { zeroAddress } from 'viem'
 import ChipInactive from '@/lend/components/ChipInactive'
 import DetailInfoAddressLookup from '@/lend/components/DetailsMarket/components/DetailInfoAddressLookup'
-import { SubTitle } from '@/lend/components/DetailsMarket/styles'
 import TokenLabel from '@/lend/components/TokenLabel'
 import { PageContentProps } from '@/lend/types/lend.types'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
 import Box from '@ui/Box'
 import Chip from '@ui/Typography/Chip'
 import { t } from '@ui-kit/lib/i18n'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { Spacing } = SizesAndSpaces
 
 type ContractItems = { label: ReactNode; address: string | undefined; invalidText?: string }[]
 
@@ -31,8 +35,8 @@ const DetailsContracts = ({ rChainId, market }: Pick<PageContentProps, 'rChainId
     ]
 
   return (
-    <>
-      <SubTitle>{t`Contracts`}</SubTitle>
+    <Stack gap={Spacing.xs}>
+      <Typography variant="headingXsBold">{t`Contracts`}</Typography>
       <Box grid gridRowGap={3}>
         {contracts.map((contracts, idx) => (
           <div key={`contracts-${idx}`}>
@@ -61,7 +65,7 @@ const DetailsContracts = ({ rChainId, market }: Pick<PageContentProps, 'rChainId
           </div>
         ))}
       </Box>
-    </>
+    </Stack>
   )
 }
 

apps/main/src/lend/components/DetailsMarket/styles.ts

@@ -1,11 +1,6 @@
 import { styled } from 'styled-components'
 import Box from '@ui/Box'
 
-export const SubTitle = styled.h3`
-  font-size: var(--font-size-3);
-  margin-bottom: var(--spacing-1);
-`
-
 export type StatsProps = {
   isBorderBottom?: boolean
   isMultiLine?: boolean

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

@@ -1,18 +1,17 @@
 import { BandsComp } from '@/lend/components/BandsComp'
 import ChartOhlcWrapper from '@/lend/components/ChartOhlcWrapper'
 import DetailsContracts from '@/lend/components/DetailsMarket/components/DetailsContracts'
-import MarketParameters from '@/lend/components/DetailsMarket/components/MarketParameters'
-import { SubTitle } from '@/lend/components/DetailsMarket/styles'
 import networks from '@/lend/networks'
 import { PageContentProps } from '@/lend/types/lend.types'
 import { BandsChart } from '@/llamalend/features/bands-chart/BandsChart'
 import { useBandsData } from '@/llamalend/features/bands-chart/hooks/useBandsData'
 import { getBandsChartToken } from '@/llamalend/features/bands-chart/utils'
-import { Stack, useTheme } from '@mui/material'
+import { MarketParameters } from '@/llamalend/features/market-parameters/MarketParameters'
+import { useTheme } from '@mui/material'
+import Stack from '@mui/material/Stack'
 import { getLib } from '@ui-kit/features/connect-wallet'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
 import { useNewBandsChart } from '@ui-kit/hooks/useFeatureFlags'
-import { t } from '@ui-kit/lib/i18n'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 const { Spacing } = SizesAndSpaces
@@ -108,10 +107,8 @@ export const MarketInformationComp = ({
           <Stack sx={{ flexGrow: 1, padding: Spacing.md }}>
             <DetailsContracts rChainId={rChainId} market={market} />
           </Stack>
-          <Stack sx={{ backgroundColor: (t) => t.design.Layer[2].Fill, padding: Spacing.md, minWidth: '18.75rem' }}>
-            <SubTitle>{t`Parameters`}</SubTitle>
-            <MarketParameters rChainId={rChainId} rOwmId={rOwmId} type={type} />
-          </Stack>
+
+          <MarketParameters chainId={rChainId} marketId={rOwmId} marketType="lend" action={type} />
         </Stack>
       )}
     </>

apps/main/src/lend/components/PageLoanCreate/LoanFormCreate/index.tsx

@@ -1,7 +1,6 @@
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import AlertFormError from '@/lend/components/AlertFormError'
 import AlertLoanSummary from '@/lend/components/AlertLoanSummary'
-import MarketParameters from '@/lend/components/DetailsMarket/components/MarketParameters'
 import DialogFormWarning from '@/lend/components/DialogFormWarning'
 import InpToken from '@/lend/components/InpToken'
 import InpTokenBorrow from '@/lend/components/InpTokenBorrow'
@@ -20,8 +19,10 @@ import useStore from '@/lend/store/useStore'
 import { Api, type MarketUrlParams, OneWayMarketTemplate, PageContentProps } from '@/lend/types/lend.types'
 import { getLoanManagePathname } from '@/lend/utils/utilsRouter'
 import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
+import { MarketParameters } from '@/llamalend/features/market-parameters/MarketParameters'
 import type { HealthMode } from '@/llamalend/llamalend.types'
 import { useLoanExists } from '@/llamalend/queries/loan-exists'
+import Stack from '@mui/material/Stack'
 import Accordion from '@ui/Accordion'
 import AlertBox from '@ui/AlertBox'
 import Box from '@ui/Box'
@@ -440,7 +441,9 @@ const LoanCreate = ({
 
       {!isAdvancedMode && (
         <Accordion btnLabel={<TextCaption isCaps isBold>{t`Market details`}</TextCaption>}>
-          <MarketParameters rChainId={rChainId} rOwmId={rOwmId} type="borrow" />
+          <Stack>
+            <MarketParameters chainId={rChainId} marketId={rOwmId} />
+          </Stack>
         </Accordion>
       )}
     </>

apps/main/src/lend/entities/market-details.ts

@@ -8,103 +8,66 @@ import type { MarketQuery, MarketParams } from '@ui-kit/lib/model/query/root-key
 
 const getLendMarket = (marketId: string) => requireLib('llamaApi').getLendMarket(marketId)
 
-type MarketCapAndAvailable = {
-  cap: number
-  available: number
-}
-type MarketMaxLeverage = {
-  maxLeverage: string | null
-}
-type MarketCollateralAmounts = {
-  collateralAmount: number
-  borrowedAmount: number
-}
-
-/**
- * The purpose of this query is to allow fetching market collateral amounts on chain
- * in order to display the most current data when a wallet is connected.
- * */
-const _getMarketCapAndAvailable = async ({ marketId }: MarketQuery): Promise<MarketCapAndAvailable> => {
-  const market = getLendMarket(marketId)
-  const capAndAvailable = await market.stats.capAndAvailable(false, USE_API)
-  return {
-    cap: +capAndAvailable.cap,
-    available: +capAndAvailable.available,
-  }
-}
-
 export const { useQuery: useMarketCapAndAvailable, invalidate: invalidateMarketCapAndAvailable } = queryFactory({
   queryKey: (params: MarketParams) => [...rootKeys.market(params), 'marketCapAndAvailable', 'v1'] as const,
-  queryFn: _getMarketCapAndAvailable,
+  queryFn: async ({ marketId }: MarketQuery) => {
+    const market = getLendMarket(marketId)
+    const capAndAvailable = await market.stats.capAndAvailable(false, USE_API)
+    return {
+      cap: +capAndAvailable.cap,
+      available: +capAndAvailable.available,
+    }
+  },
   refetchInterval: '1m',
   validationSuite: marketIdValidationSuite,
 })
 
-/**
- * The purpose of this query is to allow fetching market max leverage on chain
- * in order to display the most current data when a wallet is connected.
- * */
-const _getMarketMaxLeverage = async ({ marketId }: MarketQuery): Promise<MarketMaxLeverage> => {
-  const market = getLendMarket(marketId)
-  const maxLeverage = market.leverage.hasLeverage() ? await market.leverage.maxLeverage(market?.minBands) : null
-  return { maxLeverage }
-}
-
 export const { useQuery: useMarketMaxLeverage } = queryFactory({
   queryKey: (params: MarketParams) => [...rootKeys.market(params), 'marketMaxLeverage', 'v1'] as const,
-  queryFn: _getMarketMaxLeverage,
+  queryFn: async ({ marketId }: MarketQuery) => {
+    const market = getLendMarket(marketId)
+    const maxLeverage = market.leverage.hasLeverage() ? await market.leverage.maxLeverage(market?.minBands) : null
+    return { maxLeverage }
+  },
   validationSuite: marketIdValidationSuite,
 })
 
-/**
- * The purpose of this query is to allow fetching market collateral amounts on chain
- * in order to display the most current data when a wallet is connected.
- * */
-const _getMarketCollateralAmounts = async ({ marketId }: MarketQuery): Promise<MarketCollateralAmounts> => {
-  const market = getLendMarket(marketId)
-  const ammBalance = await market.stats.ammBalances(false, USE_API)
-  return {
-    collateralAmount: +ammBalance.collateral,
-    borrowedAmount: +ammBalance.borrowed,
-  }
-}
-
 export const { useQuery: useMarketCollateralAmounts, invalidate: invalidateMarketCollateralAmounts } = queryFactory({
   queryKey: (params: MarketParams) => [...rootKeys.market(params), 'marketCollateralAmounts', 'v1'] as const,
-  queryFn: _getMarketCollateralAmounts,
+  queryFn: async ({ marketId }: MarketQuery) => {
+    const market = getLendMarket(marketId)
+    const ammBalance = await market.stats.ammBalances(false, USE_API)
+    return {
+      collateralAmount: +ammBalance.collateral,
+      borrowedAmount: +ammBalance.borrowed,
+    }
+  },
   refetchInterval: '1m',
   validationSuite: marketIdValidationSuite,
 })
 
-const _fetchOnChainMarketRate = async ({ marketId }: MarketQuery) => ({
-  rates: await getLendMarket(marketId).stats.rates(false, false),
-  rewardsApr: await getLendMarket(marketId).vault.rewardsApr(false),
-  crvRates: await getLendMarket(marketId).vault.crvApr(false),
-})
-
 /**
  * The purpose of this query is to allow fetching market parameters on chain
  * in order to display the most current data when a wallet is connected.
  * The api data can have a few minutes delay.
  * */
 export const { useQuery: useMarketOnChainRates, invalidate: invalidateMarketOnChainRates } = queryFactory({
   queryKey: (params: MarketParams) => [...rootKeys.market(params), 'marketOnchainData', 'v1'] as const,
-  queryFn: _fetchOnChainMarketRate,
+  queryFn: async ({ marketId }: MarketQuery) => ({
+    rates: await getLendMarket(marketId).stats.rates(false, false),
+    rewardsApr: await getLendMarket(marketId).vault.rewardsApr(false),
+    crvRates: await getLendMarket(marketId).vault.crvApr(false),
+  }),
   refetchInterval: '1m',
   validationSuite: marketIdValidationSuite,
 })
 
-const _fetchMarketPricePerShare = async ({ marketId }: MarketQuery) => {
-  const market = getLendMarket(marketId)
-  return await market.vault.previewRedeem(1)
-}
-
-/**
- * Fetches the price per share of a market on chain
- */
 export const { useQuery: useMarketPricePerShare, invalidate: invalidateMarketPricePerShare } = queryFactory({
   queryKey: (params: MarketParams) => [...rootKeys.market(params), 'marketPricePerShare', 'v1'] as const,
-  queryFn: _fetchMarketPricePerShare,
+  queryFn: async ({ marketId }: MarketQuery) => {
+    const market = getLendMarket(marketId)
+    return await market.vault.previewRedeem(1)
+  },
   refetchInterval: '1m',
   validationSuite: marketIdValidationSuite,
 })