chore: cleanup

Author: OnlyJousting

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

@@ -6,7 +6,7 @@ import { SubTitle } from '@/lend/components/DetailsMarket/styles'
 import { useBandsData } from '@/lend/hooks/useBandsData'
 import networks from '@/lend/networks'
 import { PageContentProps } from '@/lend/types/lend.types'
-import { BandsChart } from '@/llamalend/widgets/bands-chart/BandsChart'
+import { BandsChart } from '@/llamalend/features/bands-chart/BandsChart'
 import { Stack, useTheme } from '@mui/material'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
 import { useReleaseChannel } from '@ui-kit/hooks/useLocalStorage'

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

@@ -1,9 +1,9 @@
 import { PageContentProps } from '@/lend/types/lend.types'
-import { useProcessedBandsData } from '@/llamalend/hooks/useBandsData'
+import { useMarketBands } from '@/llamalend/features/bands-chart/queries/market-bands.query'
+import { useMarketOraclePrices } from '@/llamalend/features/bands-chart/queries/market-oracle-prices.query'
+import { useUserBands } from '@/llamalend/features/bands-chart/queries/user-bands.query'
+import { useProcessedBandsData } from '@/llamalend/features/bands-chart/useBandsData'
 import { useLoanExists } from '@/llamalend/queries/loan-exists'
-import { useMarketBands } from '@/llamalend/widgets/bands-chart/queries/market-bands.query'
-import { useMarketOraclePrices } from '@/llamalend/widgets/bands-chart/queries/market-oracle-prices.query'
-import { useUserBands } from '@/llamalend/widgets/bands-chart/queries/user-bands.query'
 
 export const useBandsData = ({ rChainId, rOwmId, api }: Pick<PageContentProps, 'rChainId' | 'api' | 'rOwmId'>) => {
   const { data: marketOraclePrices } = useMarketOraclePrices({ chainId: rChainId, marketId: rOwmId })

apps/main/src/llamalend/widgets/bands-chart/BandsChart.tsx renamed to apps/main/src/llamalend/features/bands-chart/BandsChart.tsx

@@ -1,10 +1,9 @@
-import { DataZoomComponentOption } from 'echarts'
 import ReactECharts, { type EChartsOption } from 'echarts-for-react'
-import { useMemo, useRef, useEffect, useState, useCallback } from 'react'
+import { useMemo, useRef, useCallback, useState, useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import Spinner, { SpinnerWrapper } from 'ui/src/Spinner'
+import { ChartDataPoint, BandsBalancesData, BandsChartPalette } from '@/llamalend/features/bands-chart/types'
 import { Token } from '@/llamalend/features/borrow/types'
-import { ChartDataPoint, BandsBalancesData, BandsChartPalette } from '@/llamalend/widgets/bands-chart/types'
 import { Box, Stack, useTheme, ThemeProvider } from '@mui/material'
 import { DesignSystem } from '@ui-kit/themes/design'
 import { getChartOptions } from './chartOptions'
@@ -23,12 +22,6 @@ type BandsChartProps = {
   height?: number
 }
 
-type DataZoomEvent = {
-  start?: number
-  end?: number
-  batch?: { start?: number; end?: number }[]
-}
-
 export const BandsChart = ({
   collateralToken,
   borrowToken,
@@ -147,76 +140,17 @@ export const BandsChart = ({
     ],
   )
 
-  // Persist dataZoom (start/end) across renders
-  const [zoom, setZoom] = useState<{ start?: number; end?: number }>({})
-  const initializedZoomRef = useRef(false)
-  const lastZoomRef = useRef<{ start?: number; end?: number }>({})
-  const chartRef = useRef<ReactECharts | null>(null)
+  const [initialZoom, setInitialZoom] = useState<{ start?: number; end?: number }>({})
 
   useEffect(() => {
-    if (!initializedZoomRef.current && chartData.length > 0 && initialZoomIndices) {
+    if (chartData.length > 0 && initialZoomIndices) {
       const start = (initialZoomIndices.startIndex / chartData.length) * 100
       const end = ((initialZoomIndices.endIndex + 1) / chartData.length) * 100
-      setZoom({ start, end })
-      lastZoomRef.current = { start, end }
-      initializedZoomRef.current = true
+      setInitialZoom({ start, end })
     }
   }, [chartData.length, initialZoomIndices])
 
-  useEffect(() => {
-    if (chartData.length === 0 || !initialZoomIndices) return
-
-    const isFullRange =
-      lastZoomRef.current.start !== undefined &&
-      lastZoomRef.current.end !== undefined &&
-      lastZoomRef.current.start <= 0.0001 &&
-      lastZoomRef.current.end >= 99.999
-
-    if (Object.keys(lastZoomRef.current).length === 0 || isFullRange) {
-      const start = (initialZoomIndices.startIndex / chartData.length) * 100
-      const end = ((initialZoomIndices.endIndex + 1) / chartData.length) * 100
-
-      if (lastZoomRef.current.start !== start || lastZoomRef.current.end !== end) {
-        setZoom({ start, end })
-        lastZoomRef.current = { start, end }
-      }
-    }
-  }, [chartData.length, userBandsBalances.length, oraclePrice, initialZoomIndices])
-
-  const onEvents = useMemo(
-    () => ({
-      dataZoom: (evt: DataZoomEvent) => {
-        const payload = Array.isArray(evt?.batch) && evt.batch.length ? evt.batch[0] : evt
-        const s = payload?.start
-        const e = payload?.end
-        if (typeof s === 'number' && typeof e === 'number') {
-          const prev = lastZoomRef.current
-          if (prev.start !== s || prev.end !== e) {
-            lastZoomRef.current = { start: s, end: e }
-            setZoom({ start: s, end: e })
-          }
-        }
-      },
-    }),
-    [],
-  )
-
-  const optionWithZoom: EChartsOption = useMemo(() => {
-    if (option.dataZoom && Array.isArray(option.dataZoom) && zoom) {
-      const dz = option.dataZoom.map((z: DataZoomComponentOption) => {
-        if (z && 'type' in z && z.type === 'slider') {
-          return {
-            ...z,
-            ...(zoom.start != null ? { start: zoom.start } : {}),
-            ...(zoom.end != null ? { end: zoom.end } : {}),
-          }
-        }
-        return z
-      })
-      return { ...option, dataZoom: dz }
-    }
-    return option
-  }, [option, zoom])
+  const chartRef = useRef<ReactECharts | null>(null)
 
   if (chartData.length === 0) {
     return (
@@ -244,10 +178,21 @@ export const BandsChart = ({
       <Box sx={{ width: '99%', fontVariantNumeric: 'tabular-nums', height }}>
         <ReactECharts
           ref={chartRef}
-          option={optionWithZoom}
+          option={{
+            ...option,
+            dataZoom: option.dataZoom?.map((z: any) => {
+              if (z && 'type' in z && z.type === 'slider') {
+                return {
+                  ...z,
+                  ...(initialZoom.start != null ? { start: initialZoom.start } : {}),
+                  ...(initialZoom.end != null ? { end: initialZoom.end } : {}),
+                }
+              }
+              return z
+            }),
+          }}
           style={{ width: '100%', height: '100%' }}
-          opts={{ renderer: 'svg' }}
-          onEvents={onEvents}
+          opts={{ renderer: 'canvas' }}
           lazyUpdate
         />
       </Box>

apps/main/src/llamalend/widgets/bands-chart/TooltipContent.tsx renamed to apps/main/src/llamalend/features/bands-chart/TooltipContent.tsx

@@ -1,6 +1,6 @@
 import { Token } from '@/llamalend/features/borrow/types'
 import { TooltipItem, TooltipItems, TooltipWrapper } from '@/llamalend/widgets/tooltips/TooltipComponents'
-import { Box, Stack, useTheme } from '@mui/material'
+import { Box, useTheme } from '@mui/material'
 import Typography from '@mui/material/Typography'
 import { formatNumber } from '@ui/utils'
 import { t } from '@ui-kit/lib/i18n'

apps/main/src/llamalend/widgets/bands-chart/chartOptions.ts renamed to apps/main/src/llamalend/features/bands-chart/chartOptions.ts

@@ -7,11 +7,9 @@ import { userMarketValidationSuite } from '@ui-kit/lib/model/query/user-market-v
 import { createValidationSuite } from '@ui-kit/lib/validation'
 import { sortLendBands, sortMintBands, fetchLendChartBandBalancesData, fetchMintChartBandBalancesData } from './utils'
 
-// Extend UserMarketQuery locally to include loanExists
 type UserBandsQuery = UserMarketQuery & { loanExists: boolean | undefined | null }
 type UserBandsParams = UserMarketParams & { loanExists: boolean | undefined | null }
 
-// Create custom validation suite that includes both user market validation and loan exists validation
 const userBandsValidationSuite = createValidationSuite((params: UserBandsParams) => {
   userMarketValidationSuite(params)
   loanExistsValidationGroup({ loanExists: params.loanExists })

apps/main/src/llamalend/widgets/bands-chart/queries/market-bands.query.ts renamed to apps/main/src/llamalend/features/bands-chart/queries/market-bands.query.ts

@@ -1,5 +1,3 @@
-import { LendMarketTemplate } from '@curvefi/llamalend-api/lib/lendMarkets'
-
 export type ChartDataPoint = {
   n: number | string
   pUpDownMedian: number