feat: get lock snapshots from api

packages/lib/modules/vebal/VebalStats/VebalStatsLayout.tsx

@@ -1,14 +1,31 @@
 'use client'
 
-import { Stack } from '@chakra-ui/react'
+import { Skeleton, Stack } from '@chakra-ui/react'
 import { VebalStats } from '@repo/lib/modules/vebal/VebalStats/VebalStats'
-import { VeBALLocksChart } from '@repo/lib/modules/vebal/vebal-chart/VebalLocksChart'
+import { VebalLocksChart } from '@repo/lib/modules/vebal/vebal-chart/VebalLocksChart'
+import { useVebalLockInfo } from '@repo/lib/modules/vebal/useVebalLockInfo'
+import { useVebalUserData } from '@repo/lib/modules/vebal/useVebalUserData'
+import { useMemo } from 'react'
 
 export function VebalStatsLayout() {
+  const lockInfo = useVebalLockInfo()
+  const { loading, data } = useVebalUserData()
+
+  const lockSnapshots = useMemo(() => data?.veBalGetUser.lockSnapshots ?? [], [data])
+
   return (
     <Stack direction={{ base: 'column', md: 'row' }} justifyContent="stretch" spacing="md" w="full">
       <VebalStats w={{ base: 'full', md: 'md' }} />
-      <VeBALLocksChart h={{ base: 'md', md: 'auto' }} w="full" />
+      {loading || lockInfo.isLoading ? (
+        <Skeleton h={{ base: 'md', md: 'auto' }} w="full" />
+      ) : (
+        <VebalLocksChart
+          h={{ base: 'md', md: 'auto' }}
+          lockSnapshots={lockSnapshots}
+          mainnetLockedInfo={lockInfo.mainnetLockedInfo}
+          w="full"
+        />
+      )}
     </Stack>
   )
 }

packages/lib/modules/vebal/useVebalLockInfo.ts

@@ -32,6 +32,8 @@ interface MulticallLockInfoResponse {
   }
 }
 
+export type UseVebalLockInfoResult = ReturnType<typeof useVebalLockInfo>
+
 export function useVebalLockInfo() {
   const { userAddress, isConnected } = useUserAccount()
 

packages/lib/modules/vebal/vebal-chart/VebalLocksChart.tsx

@@ -1,19 +1,38 @@
-import { Card, CardProps } from '@chakra-ui/react'
+import { Card, CardProps, Text, VStack } from '@chakra-ui/react'
 
 import ReactECharts from 'echarts-for-react'
-import { useVebalLocksChart } from './useVebalLocksChart'
+import { useVebalLocksChart, UseVebalLocksChartParams } from './useVebalLocksChart'
+import { ChartBubbleIcon } from '@repo/lib/shared/components/icons/ChartBubbleIcon'
 
-export function VeBALLocksChart(props: CardProps) {
-  const { options, onChartReady, onEvents } = useVebalLocksChart()
+export function VebalLocksChart({
+  mainnetLockedInfo,
+  lockSnapshots,
+  ...props
+}: CardProps & UseVebalLocksChartParams) {
+  const { options, onChartReady, onEvents, insufficientData } = useVebalLocksChart({
+    mainnetLockedInfo,
+    lockSnapshots,
+  })
 
   return (
     <Card position="relative" {...props}>
-      <ReactECharts
-        onChartReady={onChartReady}
-        onEvents={onEvents}
-        option={options}
-        style={{ height: '100%', width: '100%' }}
-      />
+      {insufficientData ? (
+        <VStack h="full" justifyContent="center">
+          <Text variant="secondary">
+            <ChartBubbleIcon size={16} />
+          </Text>
+          <Text fontSize="lg" fontWeight={700} variant="secondary">
+            Not enough data
+          </Text>
+        </VStack>
+      ) : (
+        <ReactECharts
+          onChartReady={onChartReady}
+          onEvents={onEvents}
+          option={options}
+          style={{ height: '100%', width: '100%' }}
+        />
+      )}
     </Card>
   )
 }