feat: vebal page chart and stats layout

app/(app)/vebal/manage/page.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { VebalManage } from '@/lib/modules/vebal/VebalManage'
+import { Stack } from '@chakra-ui/react'
+
+export default function VebalManagePage() {
+  return (
+    <Stack gap="lg">
+      <VebalManage />
+    </Stack>
+  )
+}

app/(app)/vebal/page.tsx

@@ -1,12 +1,5 @@
-'use client'
-
-import { VebalInfo } from '@/lib/modules/vebal/VebalInfo'
 import { Stack } from '@chakra-ui/react'
 
-export default function VebalPage() {
-  return (
-    <Stack gap="lg">
-      <VebalInfo />
-    </Stack>
-  )
+export default function VeBALPage() {
+  return <Stack></Stack>
 }

lib/modules/vebal/VebalBreadcrumbs.tsx

@@ -0,0 +1,31 @@
+import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button } from '@chakra-ui/react'
+import { ChevronRight, Home } from 'react-feather'
+
+export function VebalBreadcrumbs() {
+  return (
+    <Breadcrumb
+      color="grayText"
+      spacing="sm"
+      fontSize="sm"
+      separator={
+        <Box color="border.base">
+          <ChevronRight size={16} />
+        </Box>
+      }
+    >
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">
+          <Button variant="link" size="xs" color="grayText">
+            <Home size={16} />
+          </Button>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        <BreadcrumbLink href={'/vebal/manage'}>veBAL</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbItem isCurrentPage>
+        <BreadcrumbLink href="#">Manage</BreadcrumbLink>
+      </BreadcrumbItem>
+    </Breadcrumb>
+  )
+}

lib/modules/vebal/VebalManage.tsx

@@ -0,0 +1,54 @@
+import { useUserAccount } from '../web3/UserAccountProvider'
+import { Button, Heading, Stack, Text, VStack } from '@chakra-ui/react'
+import { VebalStatsLayout } from './VebalStats/VebalStatsLayout'
+import { VebalBreadcrumbs } from '@/lib/modules/vebal/VebalBreadcrumbs'
+
+export function VebalManage() {
+  const { isConnected } = useUserAccount()
+
+  if (!isConnected) {
+    return <Text>Not connected</Text>
+  }
+
+  return (
+    <Stack spacing="lg">
+      <VebalBreadcrumbs />
+      <VStack align="start" w="full">
+        <Stack
+          w="full"
+          justify="space-between"
+          alignItems="center"
+          spacing="md"
+          direction={{ base: 'column', md: 'row' }}
+        >
+          <Heading as="h2" size="lg" variant="special">
+            Manage veBAL
+          </Heading>
+
+          <Stack spacing="md" direction={{ base: 'column', md: 'row' }}>
+            <Button
+              onClick={() => {
+                //
+              }}
+              size="lg"
+              isDisabled={false}
+            >
+              Extend lock
+            </Button>
+            <Button
+              onClick={() => {
+                //
+              }}
+              variant="primary"
+              size="lg"
+              isDisabled={false}
+            >
+              Get veBAL
+            </Button>
+          </Stack>
+        </Stack>
+      </VStack>
+      <VebalStatsLayout />
+    </Stack>
+  )
+}

lib/modules/vebal/VebalStats/AllVebalStatsValues.tsx

@@ -0,0 +1,14 @@
+'use client'
+import { Stack } from '@chakra-ui/react'
+import BigNumber from 'bignumber.js'
+
+export type VebalAllStatsValues = {
+  balance: string | undefined
+  rank: number | undefined
+  percentOfAllSupply: BigNumber | undefined
+  lockedUntil: string | undefined
+}
+
+export function AllVebalStatsValues() {
+  return <Stack></Stack>
+}

lib/modules/vebal/VebalStats/UserVebalStatsValues.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import React, { useMemo } from 'react'
+import { Heading, Skeleton, Text, Tooltip, VStack } from '@chakra-ui/react'
+import { bn, fNum } from '@/lib/shared/utils/numbers'
+import { useVebalUserData } from '@/lib/modules/vebal/useVebalUserData'
+import { useVebalLockInfo } from '@/lib/modules/vebal/useVebalLockInfo'
+import { differenceInDays, format } from 'date-fns'
+import BigNumber from 'bignumber.js'
+
+export type VebalUserStatsValues = {
+  balance: string | undefined
+  rank: number | undefined
+  percentOfAllSupply: BigNumber | undefined
+  lockedUntil: string | undefined
+}
+
+export function UserVebalStatsValues() {
+  const lockInfo = useVebalLockInfo()
+  const vebalUserData = useVebalUserData()
+
+  const vebalUserStatsValues: VebalUserStatsValues | undefined = useMemo(() => {
+    if (vebalUserData.isConnected) {
+      const balance = vebalUserData.data?.veBalGetUser.balance
+      const rank = vebalUserData.data?.veBalGetUser.rank ?? undefined
+      const percentOfAllSupply = vebalUserData.data
+        ? bn(vebalUserData.data.veBalGetUser.balance || 0).div(
+            lockInfo.mainnetLockedInfo.totalSupply || 0
+          )
+        : undefined
+      const lockedUntil =
+        !lockInfo.mainnetLockedInfo.lockedEndDate || lockInfo.mainnetLockedInfo.isExpired
+          ? undefined
+          : format(lockInfo.mainnetLockedInfo.lockedEndDate, 'yyyy-MM-dd')
+
+      return {
+        balance,
+        rank,
+        percentOfAllSupply,
+        lockedUntil,
+      }
+    }
+  }, [lockInfo.mainnetLockedInfo, vebalUserData.isConnected, vebalUserData.data])
+
+  return (
+    <>
+      <VStack spacing="0" align="flex-start" w="full">
+        <Text variant="secondary" fontWeight="semibold" fontSize="sm" mt="xxs">
+          My veBAL
+        </Text>
+        {vebalUserData.loading ? (
+          <Skeleton height="28px" w="100px" />
+        ) : (
+          <Heading size="h4">
+            {typeof vebalUserStatsValues?.balance === 'string' ? (
+              fNum('token', vebalUserStatsValues.balance)
+            ) : (
+              <>&mdash;</>
+            )}
+          </Heading>
+        )}
+      </VStack>
+      <VStack spacing="0" align="flex-start" w="full">
+        <Text variant="secondary" fontWeight="semibold" fontSize="sm" mt="xxs">
+          My rank
+        </Text>
+        {vebalUserData.loading ? (
+          <Skeleton height="28px" w="100px" />
+        ) : (
+          <Heading size="h4">{vebalUserStatsValues?.rank ?? <>&mdash;</>}</Heading>
+        )}
+      </VStack>
+      <VStack spacing="0" align="flex-start" w="full">
+        <Text variant="secondary" fontWeight="semibold" fontSize="sm" mt="xxs">
+          My share of veBAL
+        </Text>
+        {vebalUserData.loading ? (
+          <Skeleton height="28px" w="100px" />
+        ) : (
+          <Heading size="h4">
+            {vebalUserStatsValues?.percentOfAllSupply ? (
+              fNum('feePercent', vebalUserStatsValues.percentOfAllSupply)
+            ) : (
+              <>&mdash;</>
+            )}
+          </Heading>
+        )}
+      </VStack>
+      <VStack spacing="0" align="flex-start" w="full">
+        <Text variant="secondary" fontWeight="semibold" fontSize="sm" mt="xxs">
+          Expiry date
+        </Text>
+        {lockInfo.isLoading ? (
+          <Skeleton height="28px" w="100px" />
+        ) : (
+          <Tooltip
+            label={
+              vebalUserStatsValues?.lockedUntil
+                ? `Expires ${format(new Date(vebalUserStatsValues.lockedUntil), 'dd MMM yyyy')}`
+                : undefined
+            }
+          >
+            <Heading size="h4">
+              {vebalUserStatsValues?.lockedUntil ? (
+                `${differenceInDays(new Date(vebalUserStatsValues.lockedUntil), new Date())} days`
+              ) : (
+                <>&mdash;</>
+              )}
+            </Heading>
+          </Tooltip>
+        )}
+      </VStack>
+    </>
+  )
+}