chore: merge with develop

apps/hubble-stats/app/layout.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import Head from 'next/head';
 import {
   WebbUIProvider,
   Footer,
@@ -89,8 +88,9 @@ export default function RootLayout({
             logoLink={WEBB_MKT_URL}
             footer={footer}
           />
-          <main className="flex-1 overflow-y-auto overflow-scroll">
-            <div className="max-w-[1000px] mx-auto">
+
+          <main className="flex-1 overflow-y-auto">
+            <div className="max-w-[1240px] mx-auto">
               <Header />
               {children}
               <Footer isMinimal style={{ background: 'inherit' }} />

apps/hubble-stats/app/page.tsx

@@ -1,9 +1,9 @@
 import { Metadata } from 'next';
-
 import {
   KeyMetricsTableContainer,
   ShieldedTablesContainer,
 } from '../containers';
+import { VolumeChartsContainer } from '../containers/VolumeChartsContainer';
 
 export const metadata: Metadata = {
   title: 'Hubble Stats',
@@ -13,6 +13,7 @@ export const metadata: Metadata = {
 export default async function Index() {
   return (
     <div className="py-4 space-y-8">
+      <VolumeChartsContainer />
       <KeyMetricsTableContainer />
       <ShieldedTablesContainer />
     </div>

apps/hubble-stats/components/Areachart/Areachart.tsx

@@ -0,0 +1,58 @@
+import { ResponsiveContainer, AreaChart, Area, Tooltip, XAxis } from 'recharts';
+import { AreachartProps } from './types';
+
+export const Areachart = (props: AreachartProps) => {
+  const {
+    data,
+    setDate,
+    setValue,
+    isDarkMode,
+    width = '100%',
+    height = 180,
+  } = props;
+
+  return (
+    <ResponsiveContainer width={width} height={height}>
+      <AreaChart
+        data={data}
+        onMouseLeave={() => {
+          setDate && setDate(null);
+          setValue && setValue(null);
+        }}
+      >
+        <XAxis
+          dataKey="date"
+          tickFormatter={(date) =>
+            new Date(date).toLocaleDateString('en-US', {
+              day: 'numeric',
+            })
+          }
+          strokeOpacity={0}
+          tick={{
+            fontSize: '16px',
+            fill: '#9CA0B0',
+            fontWeight: 400,
+          }}
+          tickMargin={16}
+        />
+        <Tooltip
+          contentStyle={{ display: 'none' }}
+          content={({ active, payload }) => {
+            if (active && payload && payload.length) {
+              setValue && setValue(payload[0].payload['value']);
+              setDate && setDate(payload[0].payload['date']);
+            }
+
+            return null;
+          }}
+        />
+        <Area
+          dataKey="value"
+          stroke={isDarkMode ? '#C6BBFA' : '#624FBE'}
+          fillOpacity={0}
+          strokeWidth={2}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+};

apps/hubble-stats/components/Areachart/index.ts

@@ -0,0 +1,2 @@
+export * from './Areachart';
+export * from './types';

apps/hubble-stats/components/Areachart/types.ts

@@ -0,0 +1,8 @@
+export type AreachartProps = {
+  data: any;
+  setValue: (value: number | null) => void;
+  setDate: (date: Date | null) => void;
+  isDarkMode: boolean;
+  width?: number | string;
+  height?: number | string;
+};

apps/hubble-stats/components/Barchart/Barchart.tsx

@@ -0,0 +1,53 @@
+import { ResponsiveContainer, BarChart, XAxis, Tooltip, Bar } from 'recharts';
+import { BarchartProps } from './types';
+
+export const Barchart = (props: BarchartProps) => {
+  const {
+    data,
+    setValue,
+    setDate,
+    isDarkMode,
+    width = '100%',
+    height = 180,
+  } = props;
+
+  return (
+    <ResponsiveContainer width={width} height={height}>
+      <BarChart
+        data={data}
+        onMouseLeave={() => {
+          setValue && setValue(null);
+          setDate && setDate(null);
+        }}
+      >
+        <XAxis
+          dataKey="date"
+          tickFormatter={(date) =>
+            new Date(date).toLocaleDateString('en-US', {
+              day: 'numeric',
+            })
+          }
+          strokeOpacity={0}
+          tick={{
+            fontSize: '16px',
+            fill: '#9CA0B0',
+            fontWeight: 400,
+          }}
+          tickMargin={16}
+        />
+        <Tooltip
+          contentStyle={{ display: 'none' }}
+          content={({ active, payload }) => {
+            if (active && payload && payload.length) {
+              setValue && setValue(payload[0].payload['value']);
+              setDate && setDate(payload[0].payload['date']);
+            }
+
+            return null;
+          }}
+        />
+        <Bar dataKey="value" fill={isDarkMode ? '#81B3F6' : '#3D7BCE'} />
+      </BarChart>
+    </ResponsiveContainer>
+  );
+};

apps/hubble-stats/components/Barchart/index.ts

@@ -0,0 +1,2 @@
+export * from './Barchart';
+export * from './types';

apps/hubble-stats/components/Barchart/types.ts

@@ -0,0 +1,8 @@
+export type BarchartProps = {
+  data: any;
+  setValue: (value: number | null) => void;
+  setDate: (date: Date | null) => void;
+  isDarkMode: boolean;
+  width?: number | string;
+  height?: number | string;
+};

apps/hubble-stats/components/Header/Header.tsx

@@ -24,7 +24,7 @@ export const Header = () => {
       <div>
         <Breadcrumbs>
           <Link href="/">
-            <BreadcrumbsItem icon={<GridFillIcon />} isLast className="ml-0">
+            <BreadcrumbsItem icon={<GridFillIcon />} className="ml-0">
               Hubble Overview
             </BreadcrumbsItem>
           </Link>

apps/hubble-stats/components/index.ts

@@ -5,3 +5,5 @@ export * from './PoolTransactionsTable';
 export * from './PoolTypeChip';
 export * from './ShieldedAssetsTable';
 export * from './ShieldedPoolsTable';
+export * from './Areachart';
+export * from './Barchart';

apps/hubble-stats/containers/VolumeChartsContainer/VolumeChartsContainer.tsx

@@ -0,0 +1,100 @@
+'use client';
+import { useEffect, useMemo, useState } from 'react';
+import { DaysFilterType, ChartContainer } from '@webb-tools/webb-ui-components';
+import { Areachart, Barchart } from '../../components';
+
+export const VolumeChartsContainer = () => {
+  // Current TVLVolume & Volume values (Default values)
+  const [currentTvlValue, setCurrentTvlValue] = useState<number>(13.6);
+  const [currentVolumeValue, setCurrentVolumeValue] = useState<number>(8.56);
+
+  // TVLVolume value & Set TVLVolume value (When user hover on chart - Tooltip response value)
+  const [tvlValue, setTvlValue] = useState<number | null>(null);
+  const [tvlDate, setTVLDate] = useState<Date | null>(null);
+
+  // 24 Hour Volume value & Set Volume value (When user hover on chart - Tooltip response value)
+  const [volumeDate, setVolumeDate] = useState<Date | null>(null);
+  const [volumeValue, setVolumeValue] = useState<number | null>(null);
+
+  // 24 Hour Volume data type (day, week, month) - Default value is Week
+  const [volumeDataType, setVolumeDataType] = useState<DaysFilterType>('week');
+
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleThemeChange = () => {
+      setIsDarkMode(localStorage.getItem('theme') === 'dark');
+    };
+
+    handleThemeChange();
+
+    window.addEventListener('storage', handleThemeChange);
+
+    return () => {
+      window.removeEventListener('storage', handleThemeChange);
+    };
+  }, []);
+
+  const tvlData = useMemo(() => {
+    const data = [];
+
+    for (let i = 0; i < 100; i++) {
+      data.push({
+        date: new Date(Date.now() + i * 24 * 60 * 60 * 1000),
+        value: Math.floor(Math.random() * 20) + 1,
+      });
+    }
+
+    return data;
+  }, []);
+
+  const volumeData = useMemo(() => {
+    const data = [];
+
+    for (let i = 0; i < 100; i++) {
+      data.push({
+        date: new Date(Date.now() + i * 24 * 60 * 60 * 1000),
+        value: Math.floor(Math.random() * 20) + 1,
+      });
+    }
+
+    return data;
+  }, []);
+
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      {/* TVL Chart Container */}
+      <ChartContainer
+        heading="TVL"
+        currentValue={currentTvlValue}
+        value={tvlValue}
+        date={tvlDate}
+      >
+        <Areachart
+          data={tvlData}
+          setDate={setTVLDate}
+          setValue={setTvlValue}
+          isDarkMode={isDarkMode}
+        />
+      </ChartContainer>
+
+      {/* 24 Hour Volume Chart Container */}
+      <ChartContainer
+        heading="Volume 24H"
+        currentValue={currentVolumeValue}
+        value={volumeValue}
+        date={volumeDate}
+        filterType="days"
+        daysFilterType={volumeDataType}
+        setDaysFilterType={setVolumeDataType}
+      >
+        <Barchart
+          data={volumeData}
+          setDate={setVolumeDate}
+          setValue={setVolumeValue}
+          isDarkMode={isDarkMode}
+        />
+      </ChartContainer>
+    </div>
+  );
+};

apps/hubble-stats/containers/VolumeChartsContainer/index.ts

@@ -0,0 +1 @@
+export * from './VolumeChartsContainer';