feat: new position details on crvusd/lend

apps/main/next.config.js

@@ -65,7 +65,7 @@ const nextConfiguration = {
     permanent: false
   }, {
     source: '/llamalend/:network',
-    destination: '/llamalend/ethereum/markets/',
+    destination: '/llamalend/:network/markets/',
     permanent: false
   }, {
     source: '/crvusd/:network',

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

@@ -0,0 +1,74 @@
+import { useState } from 'react'
+import { styled } from 'styled-components'
+import DetailsLoanChartBalances from '@/lend/components/DetailsMarket/components/DetailsLoanChartBalances'
+import DetailsUserLoanChartBandBalances from '@/lend/components/DetailsUser/components/DetailsUserLoanChartBandBalances'
+import { PageContentProps } from '@/lend/types/lend.types'
+import { Stack } from '@mui/material'
+import Button from '@ui/Button'
+import { t } from '@ui-kit/lib/i18n'
+
+type BandsCompProps = {
+  pageProps: PageContentProps
+  page: 'create' | 'manage'
+  loanExists: boolean
+}
+
+export const BandsComp = ({ pageProps, page, loanExists }: BandsCompProps) => {
+  const { rChainId, rOwmId, market } = pageProps
+  const [selectedBand, setSelectedBand] = useState<'user' | 'market'>(page === 'create' ? 'market' : 'user')
+
+  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>
+    )
+
+  return (
+    <Stack>
+      {selectedBand === 'user' && loanExists && (
+        <DetailsUserLoanChartBandBalances {...pageProps} selectorMenu={SelectorMenu} />
+      )}
+      {(selectedBand === 'market' || !loanExists) && (
+        <DetailsLoanChartBalances
+          rChainId={rChainId}
+          rOwmId={rOwmId}
+          market={market}
+          selectorMenu={loanExists ? SelectorMenu : undefined}
+        />
+      )}
+    </Stack>
+  )
+}
+
+const SelectorRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: var(--spacing-2);
+`
+
+const SelectorButton = styled(Button)`
+  color: inherit;
+  font: var(--font);
+  font-size: var(--font-size-2);
+  font-weight: bold;
+  text-transform: none;
+  opacity: 0.7;
+  &.active {
+    opacity: 1;
+    border-bottom: 2px solid var(--page--text-color);
+  }
+`

apps/main/src/lend/components/ChartBandBalances/index.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, useMemo } from 'react'
+import { Dispatch, ReactNode, useMemo } from 'react'
 import {
   Bar,
   Brush,
@@ -43,7 +43,7 @@ const ChartBandBalances = ({
   oraclePrice: string | undefined
   oraclePriceBand: number | null | undefined
   showLiquidationIndicator: boolean
-  title: string
+  title: string | ReactNode
   setBrushIndex: Dispatch<BrushStartEndIndex>
 }) => {
   const { borrowed_token, collateral_token } = market ?? {}

apps/main/src/lend/components/ChartOhlcWrapper/index.tsx

@@ -17,7 +17,7 @@ import { useUserProfileStore } from '@ui-kit/features/user-profile'
 import { t } from '@ui-kit/lib/i18n'
 import { ChartOhlcWrapperProps, LendingMarketTokens } from './types'
 
-const ChartOhlcWrapper = ({ rChainId, userActiveKey, rOwmId }: ChartOhlcWrapperProps) => {
+const ChartOhlcWrapper = ({ rChainId, userActiveKey, rOwmId, betaBackgroundColor }: ChartOhlcWrapperProps) => {
   const market = useOneWayMarket(rChainId, rOwmId).data
   const borrowMoreActiveKey = useStore((state) => state.loanBorrowMore.activeKey)
   const loanRepayActiveKey = useStore((state) => state.loanRepay.activeKey)
@@ -347,7 +347,8 @@ const ChartOhlcWrapper = ({ rChainId, userActiveKey, rOwmId }: ChartOhlcWrapperP
     chartType: 'crvusd',
     chartStatus: currentChart.fetchStatus,
     chartHeight,
-    chartExpanded: false,
+    chartExpanded,
+    betaBackgroundColor,
     themeType: theme,
     ohlcData: currentChart.data,
     volumeData: chartLlammaOhlc.volumeData,
@@ -374,7 +375,7 @@ const ChartOhlcWrapper = ({ rChainId, userActiveKey, rOwmId }: ChartOhlcWrapperP
   return chartExpanded ? (
     <ExpandedWrapper activityHidden={activityHidden}>
       <Wrapper variant={'secondary'} chartExpanded={chartExpanded}>
-        <ChartWrapper {...ChartWrapperProps} />
+        <ChartWrapper {...ChartWrapperProps} chartExpanded={chartExpanded} />
       </Wrapper>
       <LpEventsWrapperExpanded>
         {market && <PoolActivity poolAddress={market.addresses.amm} chainId={rChainId} coins={coins} />}
@@ -407,7 +408,7 @@ const ChartOhlcWrapper = ({ rChainId, userActiveKey, rOwmId }: ChartOhlcWrapperP
       {poolInfo === 'poolActivity' && market && (
         <PoolActivity poolAddress={market.addresses.amm} chainId={rChainId} coins={coins} />
       )}
-      {poolInfo === 'chart' && <ChartWrapper {...ChartWrapperProps} />}
+      {poolInfo === 'chart' && <ChartWrapper {...ChartWrapperProps} chartExpanded={chartExpanded} />}
     </Wrapper>
   )
 }

apps/main/src/lend/components/ChartOhlcWrapper/types.ts

@@ -29,8 +29,9 @@ export interface TradesDataProps {
   chainId: ChainId
 }
 
-export interface ChartOhlcWrapperProps {
+export type ChartOhlcWrapperProps = {
   rChainId: ChainId
-  userActiveKey: string
   rOwmId: string
+  userActiveKey: string
+  betaBackgroundColor?: string
 }

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

@@ -1,5 +1,5 @@
 import lodash from 'lodash'
-import { useMemo, useState } from 'react'
+import { ReactNode, useMemo, useState } from 'react'
 import ChartBandBalances from '@/lend/components/ChartBandBalances'
 import type { BrushStartEndIndex } from '@/lend/components/ChartBandBalances/types'
 import { DEFAULT_BAND_CHART_DATA } from '@/lend/components/DetailsUser/utils'
@@ -11,7 +11,10 @@ const DetailsLoanChartBalances = ({
   rChainId,
   rOwmId,
   market,
-}: Pick<PageContentProps, 'rChainId' | 'rOwmId' | 'market'>) => {
+  selectorMenu,
+}: Pick<PageContentProps, 'rChainId' | 'rOwmId' | 'market'> & {
+  selectorMenu?: ReactNode
+}) => {
   const statsBandsResp = useStore((state) => state.markets.statsBandsMapper[rChainId]?.[rOwmId])
   const loanPricesResp = useStore((state) => state.markets.pricesMapper[rChainId]?.[rOwmId])
 
@@ -62,7 +65,7 @@ const DetailsLoanChartBalances = ({
       oraclePrice={oraclePrice}
       oraclePriceBand={oraclePriceBand}
       showLiquidationIndicator={false}
-      title={t`Bands`}
+      title={selectorMenu ?? t`Bands`}
       setBrushIndex={setBrushIndex}
     />
   )

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

@@ -1,5 +1,5 @@
 import lodash from 'lodash'
-import { useEffect, useMemo, useState } from 'react'
+import { ReactNode, useEffect, useMemo, useState } from 'react'
 import ChartBandBalances from '@/lend/components/ChartBandBalances'
 import type { BrushStartEndIndex } from '@/lend/components/ChartBandBalances/types'
 import { DEFAULT_BAND_CHART_DATA } from '@/lend/components/DetailsUser/utils'
@@ -14,7 +14,10 @@ const DetailsUserLoanChartBandBalances = ({
   rOwmId,
   api,
   market,
-}: Pick<PageContentProps, 'api' | 'rChainId' | 'rOwmId' | 'market'>) => {
+  selectorMenu,
+}: Pick<PageContentProps, 'api' | 'rChainId' | 'rOwmId' | 'market'> & {
+  selectorMenu?: ReactNode
+}) => {
   const loansPrices = useStore((state) => state.markets.pricesMapper[rChainId]?.[rOwmId])
   const loansStatsBands = useStore((state) => state.markets.statsBandsMapper[rChainId]?.[rOwmId])
   const userActiveKey = helpers.getUserActiveKey(api, market!)
@@ -70,7 +73,7 @@ const DetailsUserLoanChartBandBalances = ({
       oraclePrice={oraclePrice}
       oraclePriceBand={oraclePriceBand}
       showLiquidationIndicator={!!liquidationBand}
-      title={t`Bands`}
+      title={selectorMenu ?? t`Bands`}
       setBrushIndex={setBrushIndex}
     />
   )

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

@@ -0,0 +1,78 @@
+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 { Stack, useTheme } from '@mui/material'
+import { useUserProfileStore } from '@ui-kit/features/user-profile'
+import { t } from '@ui-kit/lib/i18n'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { Spacing } = SizesAndSpaces
+
+type MarketInformationCompProps = {
+  pageProps: PageContentProps
+  chartExpanded: boolean
+  loanExists?: boolean
+  userActiveKey: string
+  type: 'borrow' | 'supply'
+  page?: 'create' | 'manage'
+}
+
+/**
+ * Reusable component for OHLC charts, Bands (if applicable), and market parameters. For /create, /manage, /vault pages.
+ */
+export const MarketInformationComp = ({
+  pageProps,
+  chartExpanded,
+  loanExists = false,
+  userActiveKey,
+  type,
+  page = 'manage',
+}: MarketInformationCompProps) => {
+  const { rChainId, rOwmId, market } = pageProps
+  const theme = useTheme()
+  const isAdvancedMode = useUserProfileStore((state) => state.isAdvancedMode)
+
+  return (
+    <>
+      {networks[rChainId]?.pricesData && !chartExpanded && (
+        <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill, gap: Spacing.md, padding: Spacing.md }}>
+          <ChartOhlcWrapper
+            rChainId={rChainId}
+            rOwmId={rOwmId}
+            userActiveKey={userActiveKey}
+            betaBackgroundColor={theme.design.Layer[1].Fill}
+          />
+        </Stack>
+      )}
+      {type === 'borrow' && isAdvancedMode && (
+        <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill, gap: Spacing.md, padding: Spacing.md }}>
+          <BandsComp pageProps={pageProps} page={page} loanExists={loanExists} />
+        </Stack>
+      )}
+      {market && isAdvancedMode && (
+        <Stack
+          sx={{
+            backgroundColor: (t) => t.design.Layer[1].Fill,
+            flexDirection: 'column',
+            // 1100px
+            '@media (min-width: 68.75rem)': {
+              flexDirection: 'row',
+            },
+          }}
+        >
+          <Stack sx={{ flexGrow: 1, padding: Spacing.md }}>
+            <DetailsContracts rChainId={rChainId} market={market} type={type} />
+          </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>
+        </Stack>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,34 @@
+import { ReactNode, useState } from 'react'
+import { Box } from '@mui/material'
+import { t } from '@ui-kit/lib/i18n'
+import { TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher'
+
+type TabValue = 'borrow' | 'lend'
+
+type MarketInformationTabsProps = {
+  currentTab: TabValue
+  hrefs: {
+    borrow: string
+    lend: string
+  }
+  children: ReactNode
+}
+
+/**
+ * Used in Lend markets to compose with PositionDetails if there is a user position (borrow or supply)
+ * for this market or with MarketDetails if there is no user position.
+ */
+export const MarketInformationTabs = ({ currentTab, hrefs, children }: MarketInformationTabsProps) => {
+  const TABS: { value: TabValue; label: string; href: string }[] = [
+    { value: 'borrow', label: t`Borrow`, href: hrefs.borrow },
+    { value: 'lend', label: t`Lend`, href: hrefs.lend },
+  ]
+  const [tab, setTab] = useState<TabValue>(currentTab)
+
+  return (
+    <Box>
+      <TabsSwitcher value={tab} onChange={setTab} variant="contained" size="small" options={TABS} />
+      <Box sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>{children}</Box>
+    </Box>
+  )
+}