feat: new position details on crvusd/lend

apps/main/src/lend/components/DetailsUser/components/DetailsUserLoan.tsx

@@ -25,6 +25,8 @@ import Box from '@ui/Box'
 import ListInfoItem, { ListInfoItems, ListInfoItemsWrapper } from '@ui/ListInfo'
 import { breakpoints } from '@ui/utils'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
+import { useBetaFlag } from '@ui-kit/hooks/useLocalStorage'
+import { PositionDetailsWrapper } from './PositionDetailsWrapper'
 
 const DetailsUserLoan = (pageProps: PageContentProps) => {
   const { rChainId, rOwmId, api, market, titleMapper, userActiveKey } = pageProps
@@ -34,6 +36,7 @@ const DetailsUserLoan = (pageProps: PageContentProps) => {
 
   const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
   const isSoftLiquidation = useUserLoanStatus(userActiveKey) === 'soft_liquidation'
+  const [isBeta] = useBetaFlag()
 
   const { signerAddress } = api ?? {}
 
@@ -83,32 +86,43 @@ const DetailsUserLoan = (pageProps: PageContentProps) => {
         <DetailsConnectWallet />
       ) : foundLoan ? (
         <div>
-          {isSoftLiquidation && (
+          {!isBeta && isSoftLiquidation && (
             <AlertContent>
               <DetailsUserLoanAlertSoftLiquidation {...pageProps} />
             </AlertContent>
           )}
 
-          <ContentWrapper paddingTop isBorderBottom>
-            <StatsWrapper>
-              <CellUserMain {...pageProps} market={cellProps.market} type="borrow" />
+          {isBeta && (
+            <PositionDetailsWrapper
+              rChainId={rChainId}
+              market={market}
+              marketId={rOwmId}
+              userActiveKey={userActiveKey}
+            />
+          )}
 
-              {/* stats */}
-              <ListInfoItemsWrapper>
-                {contents.map((groupedContents, idx) => (
-                  <ListInfoItems key={`contents${idx}`}>
-                    {groupedContents
-                      .filter(({ show }) => _showContent(show))
-                      .map(({ titleKey, content }, idx) => (
-                        <ListInfoItem key={`content${idx}`} {...titleMapper[titleKey]}>
-                          {content}
-                        </ListInfoItem>
-                      ))}
-                  </ListInfoItems>
-                ))}
-              </ListInfoItemsWrapper>
-            </StatsWrapper>
-          </ContentWrapper>
+          {!isBeta && (
+            <ContentWrapper paddingTop isBorderBottom>
+              <StatsWrapper>
+                <CellUserMain {...pageProps} market={cellProps.market} type="borrow" />
+
+                {/* stats */}
+                <ListInfoItemsWrapper>
+                  {contents.map((groupedContents, idx) => (
+                    <ListInfoItems key={`contents${idx}`}>
+                      {groupedContents
+                        .filter(({ show }) => _showContent(show))
+                        .map(({ titleKey, content }, idx) => (
+                          <ListInfoItem key={`content${idx}`} {...titleMapper[titleKey]}>
+                            {content}
+                          </ListInfoItem>
+                        ))}
+                    </ListInfoItems>
+                  ))}
+                </ListInfoItemsWrapper>
+              </StatsWrapper>
+            </ContentWrapper>
+          )}
 
           {/* CHARTS */}
           <ContentWrapper>

apps/main/src/lend/components/DetailsUser/components/PositionDetailsWrapper.tsx

@@ -0,0 +1,21 @@
+import { usePositionDetails } from '@/lend/hooks/usePositionDetails'
+import { ChainId, OneWayMarketTemplate } from '@/lend/types/lend.types'
+import { PositionDetails } from '@ui-kit/shared/ui/PositionDetails'
+
+type PositionDetailsWrapperProps = {
+  rChainId: ChainId
+  market: OneWayMarketTemplate | null | undefined
+  marketId: string
+  userActiveKey: string
+}
+
+export const PositionDetailsWrapper = ({ rChainId, market, marketId, userActiveKey }: PositionDetailsWrapperProps) => {
+  const positionDetailsProps = usePositionDetails({
+    rChainId,
+    market,
+    marketId,
+    userActiveKey,
+  })
+
+  return <PositionDetails {...positionDetailsProps} />
+}

apps/main/src/lend/entities/chains.ts

@@ -0,0 +1,18 @@
+import { getSupportedChains as getSupportedChainsFromApi } from '@curvefi/prices-api/chains'
+import { getChains } from '@curvefi/prices-api/llamalend'
+import { EmptyValidationSuite } from '@ui-kit/lib'
+import { queryFactory } from '@ui-kit/lib/model'
+
+export const { fetchQuery: fetchSupportedChains, setQueryData: setSupportedChains } = queryFactory({
+  queryKey: () => ['prices-api', 'supported-chains'] as const,
+  queryFn: getSupportedChainsFromApi,
+  staleTime: '1d',
+  validationSuite: EmptyValidationSuite,
+})
+
+export const { fetchQuery: fetchSupportedLendingChains, setQueryData: setSupportedLendingChains } = queryFactory({
+  queryKey: () => ['prices-api', 'supported-lending-chains'] as const,
+  queryFn: getChains,
+  staleTime: '1d',
+  validationSuite: EmptyValidationSuite,
+})

apps/main/src/lend/hooks/usePositionDetails.ts

@@ -0,0 +1,126 @@
+import meanBy from 'lodash/meanBy'
+import { useMemo } from 'react'
+import { useMarketOnChainRates } from '@/lend/entities/market-onchain-rate'
+import { useTokenUsdRate } from '@/lend/entities/token'
+import networks from '@/lend/networks'
+import useStore from '@/lend/store/useStore'
+import { ChainId, OneWayMarketTemplate } from '@/lend/types/lend.types'
+import { useLendingSnapshots } from '@/llamalend/entities/lending-snapshots'
+import type { Address, Chain } from '@curvefi/prices-api'
+import { PositionDetailsProps } from '@ui-kit/shared/ui/PositionDetails'
+
+type UsePositionDetailsProps = {
+  rChainId: ChainId
+  market: OneWayMarketTemplate | null | undefined
+  marketId: string
+  userActiveKey: string
+}
+
+export const usePositionDetails = ({
+  rChainId,
+  market,
+  marketId,
+  userActiveKey,
+}: UsePositionDetailsProps): PositionDetailsProps => {
+  const userLoanDetailsResp = useStore((state) => state.user.loansDetailsMapper[userActiveKey])
+  const isFetchingAll = useStore((state) => state.markets.isFetchingAll)
+  const marketRate = useStore((state) => state.markets.ratesMapper[rChainId]?.[marketId])
+  const prices = useStore((state) => state.markets.pricesMapper[rChainId]?.[marketId])
+
+  const { data: onchainData, isLoading: isOnchainRatesLoading } = useMarketOnChainRates({ chainId: rChainId, marketId })
+  const { data: collateralUsdRate, isLoading: collateralUsdRateLoading } = useTokenUsdRate({
+    chainId: rChainId,
+    tokenAddress: market?.addresses?.collateral_token,
+  })
+  const { data: borrowedUsdRate, isLoading: borrowedUsdRateLoading } = useTokenUsdRate({
+    chainId: rChainId,
+    tokenAddress: market?.addresses?.borrowed_token,
+  })
+
+  const { details: userLoanDetails } = userLoanDetailsResp ?? {}
+
+  const { data: crvUsdSnapshots, isLoading: isSnapshotsLoading } = useLendingSnapshots({
+    blockchainId: networks[rChainId].id as Chain,
+    contractAddress: market?.addresses?.controller as Address,
+  })
+
+  const thirtyDayAvgRate = useMemo(() => {
+    if (!crvUsdSnapshots) return null
+
+    const thirtyDaysAgo = new Date()
+    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+
+    const recentSnapshots = crvUsdSnapshots.filter((snapshot) => new Date(snapshot.timestamp) > thirtyDaysAgo)
+
+    if (recentSnapshots.length === 0) return null
+
+    return meanBy(recentSnapshots, ({ borrowApy }) => borrowApy) * 100
+  }, [crvUsdSnapshots])
+
+  const borrowApy = onchainData?.rates?.borrowApy ?? marketRate?.rates?.borrowApy
+
+  const collateralTotalValue = useMemo(() => {
+    if (!collateralUsdRate || !userLoanDetails?.state?.collateral) return null
+    return (
+      Number(userLoanDetails?.state?.collateral) * Number(collateralUsdRate) + Number(userLoanDetails?.state?.borrowed)
+    )
+  }, [userLoanDetails?.state?.collateral, userLoanDetails?.state?.borrowed, collateralUsdRate])
+
+  return {
+    isSoftLiquidation: userLoanDetails?.status?.colorKey === 'soft_liquidation',
+    health: {
+      value: Number(userLoanDetails?.healthFull),
+      loading: isFetchingAll ?? true,
+    },
+    borrowAPR: {
+      value: borrowApy != null ? Number(borrowApy) : null,
+      thirtyDayAvgRate: thirtyDayAvgRate,
+      loading: isOnchainRatesLoading || isSnapshotsLoading || !market?.addresses.controller,
+    },
+    liquidationRange: {
+      value: userLoanDetails?.prices ? userLoanDetails.prices.map(Number) : null,
+      rangeToLiquidation:
+        prices?.prices?.oraclePrice && userLoanDetails?.prices
+          ? (Number(userLoanDetails?.prices?.[1]) / Number(prices.prices.oraclePrice)) * 100
+          : null,
+      loading: isFetchingAll ?? true,
+    },
+    bandRange: {
+      value: userLoanDetails?.bands ? userLoanDetails.bands : null,
+      loading: isFetchingAll ?? true,
+    },
+    collateralValue: {
+      totalValue: collateralTotalValue,
+      collateral: {
+        value: userLoanDetails?.state?.collateral ? Number(userLoanDetails.state.collateral) : null,
+        usdRate: collateralUsdRate ?? null,
+        symbol: market?.collateral_token?.symbol,
+      },
+      borrow: {
+        value: userLoanDetails?.state?.borrowed ? Number(userLoanDetails.state.borrowed) : null,
+        usdRate: borrowedUsdRate ?? null,
+        symbol: market?.borrowed_token?.symbol,
+      },
+      loading: isFetchingAll || collateralUsdRateLoading || borrowedUsdRateLoading,
+    },
+    ltv: {
+      value: collateralTotalValue ? (Number(userLoanDetails?.state?.debt) / collateralTotalValue) * 100 : null,
+      loading: isFetchingAll ?? true,
+    },
+    pnl: {
+      currentProfit: userLoanDetails?.pnl?.currentProfit ? Number(userLoanDetails.pnl.currentProfit) : null,
+      currentPositionValue: userLoanDetails?.pnl?.currentPosition ? Number(userLoanDetails.pnl.currentPosition) : null,
+      depositedValue: userLoanDetails?.pnl?.deposited ? Number(userLoanDetails.pnl.deposited) : null,
+      percentageChange: userLoanDetails?.pnl?.percentage ? Number(userLoanDetails.pnl.percentage) : null,
+      loading: isFetchingAll ?? true,
+    },
+    leverage: {
+      value: userLoanDetails?.leverage ? Number(userLoanDetails.leverage) : null,
+      loading: isFetchingAll ?? true,
+    },
+    totalDebt: {
+      value: userLoanDetails?.state?.debt ? Number(userLoanDetails.state.debt) : null,
+      loading: isFetchingAll ?? true,
+    },
+  }
+}

apps/main/src/lend/store/createMarketsSlice.ts

@@ -25,6 +25,7 @@ import { getLib } from '@ui-kit/features/connect-wallet'
 type StateKey = keyof typeof DEFAULT_STATE
 
 type SliceState = {
+  isFetchingAll: boolean
   statsParametersMapper: { [chainId: string]: MarketsStatsParametersMapper }
   statsBandsMapper: { [chainId: string]: MarketsStatsBandsMapper }
   statsTotalsMapper: { [chainId: string]: MarketsStatsTotalsMapper }
@@ -62,6 +63,7 @@ export type MarketsSlice = {
 }
 
 const DEFAULT_STATE: SliceState = {
+  isFetchingAll: true,
   statsParametersMapper: {},
   statsBandsMapper: {},
   statsTotalsMapper: {},
@@ -86,6 +88,8 @@ const createMarketsSlice = (set: SetState<State>, get: GetState<State>): Markets
 
       const { chainId } = api
 
+      sliceState.setStateByKey('isFetchingAll', true)
+
       const fnMapper = {
         statsParametersMapper: apiLending.market.fetchStatsParameters,
         statsBandsMapper: apiLending.market.fetchStatsBands,
@@ -116,6 +120,7 @@ const createMarketsSlice = (set: SetState<State>, get: GetState<State>): Markets
         cMapper[owmId] = resp[owmId]
       })
       sliceState.setStateByActiveKey(k, chainId.toString(), cMapper)
+      sliceState.setStateByKey('isFetchingAll', false)
     },
 
     fetchAll: async (api, OneWayMarketTemplate, shouldRefetch) => {

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

@@ -6,10 +6,13 @@ import DetailsInfo from '@/loan/components/LoanInfoLlamma/components/DetailsInfo
 import LoanInfoParameters from '@/loan/components/LoanInfoLlamma/LoanInfoParameters'
 import { SubTitle } from '@/loan/components/LoanInfoLlamma/styles'
 import type { PageLoanManageProps } from '@/loan/components/PageLoanManage/types'
+import { useMarketDetails } from '@/loan/hooks/useMarketDetails'
 import useStore from '@/loan/store/useStore'
 import { breakpoints } from '@ui/utils/responsive'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
+import { useBetaFlag } from '@ui-kit/hooks/useLocalStorage'
 import { t } from '@ui-kit/lib/i18n'
+import { MarketDetails } from '@ui-kit/shared/ui/MarketDetails'
 
 interface Props extends Pick<PageLoanManageProps, 'llamma' | 'llammaId' | 'rChainId' | 'titleMapper'> {
   className?: string
@@ -18,14 +21,22 @@ interface Props extends Pick<PageLoanManageProps, 'llamma' | 'llammaId' | 'rChai
 const LoanInfoLlamma = (props: Props) => {
   const { rChainId, llamma, llammaId } = props
   const chartExpanded = useStore((state) => state.ohlcCharts.chartExpanded)
-
   const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
+  const [isBeta] = useBetaFlag()
+  const marketDetailsProps = useMarketDetails({
+    rChainId,
+    llamma,
+    llammaId,
+  })
 
   return (
     <Wrapper>
-      <div className="wrapper">
-        <DetailsInfo {...props} collateralId={llammaId} />
-      </div>
+      {!isBeta && (
+        <div className="wrapper">
+          <DetailsInfo {...props} collateralId={llammaId} />
+        </div>
+      )}
+      {isBeta && <MarketDetails {...marketDetailsProps} />}
 
       {!chartExpanded && (
         <div className={isAdvancedMode ? 'wrapper' : ''}>

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

@@ -9,13 +9,16 @@ import ChartUserLiquidationRange from '@/loan/components/LoanInfoUser/components
 import UserInfos from '@/loan/components/LoanInfoUser/components/UserInfos'
 import type { PageLoanManageProps } from '@/loan/components/PageLoanManage/types'
 import { DEFAULT_HEALTH_MODE } from '@/loan/components/PageLoanManage/utils'
+import { useLoanPositionDetails } from '@/loan/hooks/useLoanPositionDetails'
 import { useUserLoanDetails, useUserLoanStatus } from '@/loan/hooks/useUserLoanDetails'
 import useStore from '@/loan/store/useStore'
 import { ChainId } from '@/loan/types/loan.types'
 import Box from '@ui/Box'
 import { breakpoints } from '@ui/utils/responsive'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
+import { useBetaFlag } from '@ui-kit/hooks/useLocalStorage'
 import { t } from '@ui-kit/lib/i18n'
+import { PositionDetails } from '@ui-kit/shared/ui/PositionDetails'
 
 interface Props extends Pick<PageLoanManageProps, 'llamma' | 'llammaId' | 'titleMapper'> {
   rChainId: ChainId
@@ -28,10 +31,17 @@ const LoanInfoUser = ({ llamma, llammaId, rChainId, titleMapper }: Props) => {
 
   const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
   const isSoftLiquidation = useUserLoanStatus(llammaId) === 'soft_liquidation'
+  const [isBeta] = useBetaFlag()
 
   const { oraclePriceBand } = loanDetails ?? {}
 
   const [healthMode, setHealthMode] = useState(DEFAULT_HEALTH_MODE)
+  const positionDetailsProps = useLoanPositionDetails({
+    rChainId,
+    llamma,
+    llammaId,
+    health: healthMode.percent,
+  })
 
   useEffect(() => {
     if (!isUndefined(oraclePriceBand) && healthFull && healthNotFull && userBands) {
@@ -54,15 +64,18 @@ const LoanInfoUser = ({ llamma, llammaId, rChainId, titleMapper }: Props) => {
 
   return (
     <Wrapper>
-      <StatsWrapper className={`wrapper ${isSoftLiquidation ? 'alert' : 'first'}`}>
-        <UserInfos
-          llammaId={llammaId}
-          llamma={llamma}
-          isSoftLiquidation={isSoftLiquidation}
-          healthMode={healthMode}
-          titleMapper={titleMapper}
-        />
-      </StatsWrapper>
+      {isBeta && <PositionDetails {...positionDetailsProps} />}
+      {!isBeta && (
+        <StatsWrapper className={`wrapper ${isSoftLiquidation ? 'alert' : 'first'}`}>
+          <UserInfos
+            llammaId={llammaId}
+            llamma={llamma}
+            isSoftLiquidation={isSoftLiquidation}
+            healthMode={healthMode}
+            titleMapper={titleMapper}
+          />
+        </StatsWrapper>
+      )}
 
       {!chartExpanded && (
         <div className="wrapper">