From 0bc2e3281faf4334c9b5728818a947c5f07678a9 Mon Sep 17 00:00:00 2001
From: Pavan Soratur <pavanvsoratur@gmail.com>
Date: Wed, 19 Jul 2023 08:45:24 -0700
Subject: [PATCH] Adds hubble-stats chart component to webb-ui-components and
 storybook (#1430)

---
 apps/hubble-stats/app/layout.tsx              |   7 +-
 apps/hubble-stats/app/page.tsx                |   3 +-
 .../components/Areachart/Areachart.tsx        |  58 +++++++
 .../components/Areachart/index.ts             |   2 +
 .../components/Areachart/types.ts             |   8 +
 .../components/Barchart/Barchart.tsx          |  53 ++++++
 .../hubble-stats/components/Barchart/index.ts |   2 +
 .../hubble-stats/components/Barchart/types.ts |   8 +
 .../hubble-stats/components/Header/Header.tsx |   2 +-
 apps/hubble-stats/components/index.ts         |   2 +
 .../KeyMetricsTableContainer.tsx              |   3 +-
 .../VolumeChartsContainer.tsx                 | 100 +++++++++++
 .../containers/VolumeChartsContainer/index.ts |   1 +
 .../ChartContainer/ChartContainer.tsx         | 120 +++++++++++++
 .../src/components/ChartContainer/index.ts    |   2 +
 .../src/components/ChartContainer/types.ts    |  18 ++
 .../src/components/index.ts                   |   1 +
 .../webb-ui-components/src/css/typography.css |   4 +
 .../organisms/ChartContainer.stories.jsx      | 159 ++++++++++++++++++
 package.json                                  |   1 +
 yarn.lock                                     | 145 ++++++++++++++++
 21 files changed, 691 insertions(+), 8 deletions(-)
 create mode 100644 apps/hubble-stats/components/Areachart/Areachart.tsx
 create mode 100644 apps/hubble-stats/components/Areachart/index.ts
 create mode 100644 apps/hubble-stats/components/Areachart/types.ts
 create mode 100644 apps/hubble-stats/components/Barchart/Barchart.tsx
 create mode 100644 apps/hubble-stats/components/Barchart/index.ts
 create mode 100644 apps/hubble-stats/components/Barchart/types.ts
 create mode 100644 apps/hubble-stats/containers/VolumeChartsContainer/VolumeChartsContainer.tsx
 create mode 100644 apps/hubble-stats/containers/VolumeChartsContainer/index.ts
 create mode 100644 libs/webb-ui-components/src/components/ChartContainer/ChartContainer.tsx
 create mode 100644 libs/webb-ui-components/src/components/ChartContainer/index.ts
 create mode 100644 libs/webb-ui-components/src/components/ChartContainer/types.ts
 create mode 100644 libs/webb-ui-components/src/stories/organisms/ChartContainer.stories.jsx

diff --git a/apps/hubble-stats/app/layout.tsx b/apps/hubble-stats/app/layout.tsx
index 1c7da27883..38a7296bab 100644
--- a/apps/hubble-stats/app/layout.tsx
+++ b/apps/hubble-stats/app/layout.tsx
@@ -1,7 +1,5 @@
 'use client';
-
 import { useEffect } from 'react';
-import Head from 'next/head';
 import {
   WebbUIProvider,
   useDarkMode,
@@ -97,8 +95,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' }} />
diff --git a/apps/hubble-stats/app/page.tsx b/apps/hubble-stats/app/page.tsx
index 7c2136c21a..9733649b45 100644
--- a/apps/hubble-stats/app/page.tsx
+++ b/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>
diff --git a/apps/hubble-stats/components/Areachart/Areachart.tsx b/apps/hubble-stats/components/Areachart/Areachart.tsx
new file mode 100644
index 0000000000..f566f99d53
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/apps/hubble-stats/components/Areachart/index.ts b/apps/hubble-stats/components/Areachart/index.ts
new file mode 100644
index 0000000000..521207731b
--- /dev/null
+++ b/apps/hubble-stats/components/Areachart/index.ts
@@ -0,0 +1,2 @@
+export * from './Areachart';
+export * from './types';
diff --git a/apps/hubble-stats/components/Areachart/types.ts b/apps/hubble-stats/components/Areachart/types.ts
new file mode 100644
index 0000000000..770559d846
--- /dev/null
+++ b/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;
+};
diff --git a/apps/hubble-stats/components/Barchart/Barchart.tsx b/apps/hubble-stats/components/Barchart/Barchart.tsx
new file mode 100644
index 0000000000..922cac393b
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/apps/hubble-stats/components/Barchart/index.ts b/apps/hubble-stats/components/Barchart/index.ts
new file mode 100644
index 0000000000..b371b63545
--- /dev/null
+++ b/apps/hubble-stats/components/Barchart/index.ts
@@ -0,0 +1,2 @@
+export * from './Barchart';
+export * from './types';
diff --git a/apps/hubble-stats/components/Barchart/types.ts b/apps/hubble-stats/components/Barchart/types.ts
new file mode 100644
index 0000000000..1f07189afd
--- /dev/null
+++ b/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;
+};
diff --git a/apps/hubble-stats/components/Header/Header.tsx b/apps/hubble-stats/components/Header/Header.tsx
index 9e5a76b9ca..cef444b5ec 100644
--- a/apps/hubble-stats/components/Header/Header.tsx
+++ b/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>
diff --git a/apps/hubble-stats/components/index.ts b/apps/hubble-stats/components/index.ts
index ae5875d8f4..63cb56962e 100644
--- a/apps/hubble-stats/components/index.ts
+++ b/apps/hubble-stats/components/index.ts
@@ -3,3 +3,5 @@ export * from './PoolMetadataTable';
 export * from './PoolTransactionsTable';
 export * from './ShieldedAssetsTable';
 export * from './ShieldedPoolsTable';
+export * from './Areachart';
+export * from './Barchart';
diff --git a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx
index 8b7aaa6a80..1f248ffd41 100644
--- a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx
+++ b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx
@@ -11,8 +11,7 @@ const KeyMetricsTableContainer: FC = () => {
       className={cx(
         'w-full rounded-lg overflow-hidden',
         'border-2 border-mono-0 dark:border-mono-160',
-        'bg-[linear-gradient(180deg,rgba(255,255,255,0.80)_0%,rgba(255,255,255,0.00)_100%)]',
-        'dark:bg-[linear-gradient(180deg,rgba(43,47,64,0.80)0%,rgba(43,47,64,0.00)_100%)]'
+        'backdrop-blur-xl'
       )}
     >
       <div className="w-full table table-fixed border-collapse">
diff --git a/apps/hubble-stats/containers/VolumeChartsContainer/VolumeChartsContainer.tsx b/apps/hubble-stats/containers/VolumeChartsContainer/VolumeChartsContainer.tsx
new file mode 100644
index 0000000000..8246126ca1
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/apps/hubble-stats/containers/VolumeChartsContainer/index.ts b/apps/hubble-stats/containers/VolumeChartsContainer/index.ts
new file mode 100644
index 0000000000..c06ca8259a
--- /dev/null
+++ b/apps/hubble-stats/containers/VolumeChartsContainer/index.ts
@@ -0,0 +1 @@
+export * from './VolumeChartsContainer';
diff --git a/libs/webb-ui-components/src/components/ChartContainer/ChartContainer.tsx b/libs/webb-ui-components/src/components/ChartContainer/ChartContainer.tsx
new file mode 100644
index 0000000000..082266275a
--- /dev/null
+++ b/libs/webb-ui-components/src/components/ChartContainer/ChartContainer.tsx
@@ -0,0 +1,120 @@
+import { useMemo, forwardRef } from 'react';
+import { ChartContainerProps } from './types';
+import { Chip } from '../Chip';
+import { twMerge } from 'tailwind-merge';
+import { Typography } from '../../typography/Typography';
+
+/**
+ * Container for charts (e.g. TVL, Volume, etc.) that displays chart heading, value, chart (should be passed as a child) and along with optional chart filters (e.g days, tokens and chains).
+ *
+ * Props for this component:
+ *
+ * - heading - Heading of the chart (Optional) - E.g. TVL, Volume 24H, etc.
+ * - currentValue - Latest value - E.g. $1.2m, $2.3k, etc.
+ * - value - Value to be displayed in currentValue's place when hovering over the chart (Tooltip response)
+ * - date - Date corresponding to the value displayed beside value when hovering over the chart (Tooltip response)
+ * - filterType - Type of filter to be displayed (Optional) - E.g. days (days, week, month), tokens and chains
+ * - daysFilterType - Type of days filter to be displayed (Optional) - E.g. day, week, month
+ * - setDaysFilterType - Function to set the days filter type (Optional)
+ * - className - Optional className for the container
+ */
+export const ChartContainer = forwardRef<HTMLDivElement, ChartContainerProps>(
+  (
+    {
+      heading,
+      currentValue,
+      value,
+      date,
+      filterType,
+      daysFilterType,
+      setDaysFilterType,
+      className: wrapperClassName,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const className = useMemo(() => {
+      return twMerge(
+        'p-6 flex flex-col justify-between gap-4 border-2 rounded-lg dark:border-mono-160 border-mono-0 backdrop-blur-xl',
+        wrapperClassName
+      );
+    }, [wrapperClassName]);
+
+    return (
+      <div className={className} ref={ref} {...props}>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col justify-between gap-4">
+            {heading && (
+              <Typography
+                variant="h5"
+                fw="bold"
+                className="!text-[20px] !leading-[30px] text-mono-200 dark:text-mono-0"
+              >
+                {heading}
+              </Typography>
+            )}
+
+            <div className="flex flex-row items-center gap-2">
+              <Typography
+                variant="h4"
+                fw="bold"
+                className="!text-[24px] !leading-[36px] text-mono-200 dark:text-mono-0"
+              >
+                {`$${value ?? currentValue}m`}
+              </Typography>
+
+              <Typography
+                variant="body4"
+                fw="bold"
+                className="!text-[12px] !leading-[15px] text-mono-120"
+              >
+                {date &&
+                  new Date(date).toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                  })}
+              </Typography>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1">
+            {filterType === 'days' && daysFilterType && setDaysFilterType ? (
+              <>
+                <Chip
+                  color="blue"
+                  className="cursor-pointer"
+                  isSelected={daysFilterType === 'day'}
+                  onClick={() => setDaysFilterType('day')}
+                >
+                  D
+                </Chip>
+                <Chip
+                  color="blue"
+                  className="cursor-pointer"
+                  isSelected={daysFilterType === 'week'}
+                  onClick={() => setDaysFilterType('week')}
+                >
+                  W
+                </Chip>
+                <Chip
+                  color="blue"
+                  className="cursor-pointer"
+                  isSelected={daysFilterType === 'month'}
+                  onClick={() => setDaysFilterType('month')}
+                >
+                  M
+                </Chip>
+              </>
+            ) : filterType === 'tokensAndChains' ? (
+              <>{/* Token and Chain selectors */}</>
+            ) : null}
+          </div>
+        </div>
+
+        <div>{children}</div>
+      </div>
+    );
+  }
+);
diff --git a/libs/webb-ui-components/src/components/ChartContainer/index.ts b/libs/webb-ui-components/src/components/ChartContainer/index.ts
new file mode 100644
index 0000000000..a95bbf68ae
--- /dev/null
+++ b/libs/webb-ui-components/src/components/ChartContainer/index.ts
@@ -0,0 +1,2 @@
+export * from './ChartContainer';
+export * from './types';
diff --git a/libs/webb-ui-components/src/components/ChartContainer/types.ts b/libs/webb-ui-components/src/components/ChartContainer/types.ts
new file mode 100644
index 0000000000..74e79398f4
--- /dev/null
+++ b/libs/webb-ui-components/src/components/ChartContainer/types.ts
@@ -0,0 +1,18 @@
+export type ChartContainerProps = {
+  heading?: string;
+  currentValue: number;
+  value: number | null;
+  date: Date | null;
+  filterType?: 'days' | 'tokensAndChains';
+
+  // Days filter
+  daysFilterType?: DaysFilterType;
+  setDaysFilterType?: (daysFilterType: DaysFilterType) => void;
+
+  //TODO:  Tokens and chains filter
+
+  className?: string;
+  children: React.ReactNode;
+};
+
+export type DaysFilterType = 'day' | 'week' | 'month';
diff --git a/libs/webb-ui-components/src/components/index.ts b/libs/webb-ui-components/src/components/index.ts
index 3e88192746..c1869b84ca 100644
--- a/libs/webb-ui-components/src/components/index.ts
+++ b/libs/webb-ui-components/src/components/index.ts
@@ -10,6 +10,7 @@ export * from './BridgeInputs';
 export * from './Button';
 export * from './Card';
 export * from './CardTable';
+export * from './ChartContainer';
 export * from './ChainsRing';
 export * from './CheckBox';
 export * from './CheckBoxMenu';
diff --git a/libs/webb-ui-components/src/css/typography.css b/libs/webb-ui-components/src/css/typography.css
index 69f8ea1784..84c9e15b17 100644
--- a/libs/webb-ui-components/src/css/typography.css
+++ b/libs/webb-ui-components/src/css/typography.css
@@ -110,3 +110,7 @@ code,
   font-family: 'Cousine', monospace;
   font-size: 16px;
 }
+
+.recharts-cartesian-axis-tick-value tspan {
+  font-family: 'Cousine', monospace !important;
+}
\ No newline at end of file
diff --git a/libs/webb-ui-components/src/stories/organisms/ChartContainer.stories.jsx b/libs/webb-ui-components/src/stories/organisms/ChartContainer.stories.jsx
new file mode 100644
index 0000000000..dd32089b00
--- /dev/null
+++ b/libs/webb-ui-components/src/stories/organisms/ChartContainer.stories.jsx
@@ -0,0 +1,159 @@
+import { useState, useMemo } from 'react';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  Tooltip,
+  BarChart,
+  Bar,
+  ResponsiveContainer,
+} from 'recharts';
+import { ChartContainer } from '../../components';
+
+export default {
+  title: 'Design System/Organisms/ChartContainer',
+  component: ChartContainer,
+};
+
+export const TVL = () => {
+  const [currentTvlValue, setCurrentTvlValue] = useState(13.6);
+  const [tvlValue, setTvlValue] = useState(null);
+  const [tvlDate, setTVLDate] = useState(null);
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const tvlData = useMemo(() => {
+    const data = [];
+
+    for (let i = 0; i < 200; i++) {
+      data.push({
+        date: new Date(Date.now() + i * 24 * 60 * 60 * 1000),
+        value: Math.floor(Math.random() * 20) + 1,
+      });
+    }
+
+    return data;
+  }, []);
+
+  return (
+    <ChartContainer
+      heading="TVL"
+      currentValue={currentTvlValue}
+      value={tvlValue}
+      date={tvlDate}
+    >
+      <ResponsiveContainer width="100%" height={180}>
+        <AreaChart
+          data={tvlData}
+          onMouseLeave={() => {
+            setTVLDate && setTVLDate(null);
+            setTvlValue && setTvlValue(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) {
+                setTvlValue && setTvlValue(payload[0].payload['value']);
+                setTVLDate && setTVLDate(payload[0].payload['date']);
+              }
+
+              return null;
+            }}
+          />
+          <Area
+            dataKey="value"
+            stroke={isDarkMode ? '#C6BBFA' : '#624FBE'}
+            fillOpacity={0}
+            strokeWidth={2}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </ChartContainer>
+  );
+};
+
+export const Volume = () => {
+  const [currentVolumeValue, setCurrentVolumeValue] = useState(8.56);
+  const [volumeDate, setVolumeDate] = useState(null);
+  const [volumeValue, setVolumeValue] = useState(null);
+  const [volumeDataType, setVolumeDataType] = useState('week');
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const volumeData = useMemo(() => {
+    const data = [];
+
+    for (let i = 0; i < 200; i++) {
+      data.push({
+        date: new Date(Date.now() + i * 24 * 60 * 60 * 1000),
+        value: Math.floor(Math.random() * 20) + 1,
+      });
+    }
+
+    return data;
+  }, []);
+
+  return (
+    <ChartContainer
+      heading="Volume 24H"
+      currentValue={currentVolumeValue}
+      value={volumeValue}
+      date={volumeDate}
+      filterType="days"
+      daysFilterType={volumeDataType}
+      setDaysFilterType={setVolumeDataType}
+    >
+      <ResponsiveContainer width="100%" height={180}>
+        <BarChart
+          data={volumeData}
+          onMouseLeave={() => {
+            setVolumeValue && setVolumeValue(null);
+            setVolumeDate && setVolumeDate(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) {
+                setVolumeValue && setVolumeValue(payload[0].payload['value']);
+                setVolumeDate && setVolumeDate(payload[0].payload['date']);
+              }
+
+              return null;
+            }}
+          />
+          <Bar dataKey="value" fill={isDarkMode ? '#81B3F6' : '#3D7BCE'} />
+        </BarChart>
+      </ResponsiveContainer>
+    </ChartContainer>
+  );
+};
diff --git a/package.json b/package.json
index 125efd9a57..e4e4fb8e3d 100644
--- a/package.json
+++ b/package.json
@@ -272,6 +272,7 @@
     "sass-loader": "^13.0.0",
     "storybook": "^7.0.12",
     "storybook-addon-react-router-v6": "^1.0.0",
+    "storybook-dark-mode": "^3.0.0",
     "storybook-tailwind-dark-mode": "^1.0.22",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
diff --git a/yarn.lock b/yarn.lock
index 18b2ae2d2f..13b39989f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5985,6 +5985,15 @@
     "@storybook/preview-api" "7.0.25"
     "@storybook/types" "7.0.25"
 
+"@storybook/addons@^7.0.0":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-7.0.27.tgz#b7aa5ab0e8de621187ca8fc9ee14a35d9d8355c9"
+  integrity sha512-LGfd8OAwS+zl7qQyLSAg/JjkfDDyf2uhwZIMYHomv3Oow/KT8kPqAdLqmsuAYBrTFBEqX3duemdHgjG7lVv9qQ==
+  dependencies:
+    "@storybook/manager-api" "7.0.27"
+    "@storybook/preview-api" "7.0.27"
+    "@storybook/types" "7.0.27"
+
 "@storybook/api@7.0.25":
   version "7.0.25"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-7.0.25.tgz#0eee105403b4395796b9b0b161e69d9fc17c9184"
@@ -5993,6 +6002,14 @@
     "@storybook/client-logger" "7.0.25"
     "@storybook/manager-api" "7.0.25"
 
+"@storybook/api@^7.0.0":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-7.0.27.tgz#7916533fab68dc997a972b3dc5727054ebae4bb8"
+  integrity sha512-kvqtnahIdyp+c7qwG/IhY6e1ynet/G9k92J6n3UEpMqy0b+jKMpGE45uGdiMg5EDVGjvlDqN8Ed7v/ZDJFjlOw==
+  dependencies:
+    "@storybook/client-logger" "7.0.27"
+    "@storybook/manager-api" "7.0.27"
+
 "@storybook/blocks@7.0.12":
   version "7.0.12"
   resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.0.12.tgz#4b92955c49f7beea58df1c0f8d3138dc54a01444"
@@ -6166,6 +6183,18 @@
     qs "^6.10.0"
     telejson "^7.0.3"
 
+"@storybook/channel-postmessage@7.0.27":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-7.0.27.tgz#b73b2273e19568d2a7e9c0859a23d128d41279c2"
+  integrity sha512-ScpiStUHvtgy9RrCFNyzzH9l+zHF80lSwW/BZ1MRETJ9ZaOVPrm03U0Ju01wJC57DYPROwPU/wKMetNqKKEhdA==
+  dependencies:
+    "@storybook/channels" "7.0.27"
+    "@storybook/client-logger" "7.0.27"
+    "@storybook/core-events" "7.0.27"
+    "@storybook/global" "^5.0.0"
+    qs "^6.10.0"
+    telejson "^7.0.3"
+
 "@storybook/channel-websocket@7.0.25":
   version "7.0.25"
   resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-7.0.25.tgz#89807b21a7733e866dd0272f0eb4ef8a4ef7bae9"
@@ -6186,6 +6215,11 @@
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.0.25.tgz#558395bc17d17424171d8815900feb0d7d048c11"
   integrity sha512-FLuXysj0uHBQNHpfiggtyaV0EFCMVWgEQjJLeBysqB/+sBCtpjrD7kUKrgJFF+N/IEhJq/dlWt7jOpxT2bffQA==
 
+"@storybook/channels@7.0.27":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.0.27.tgz#3dc577c45d57406546ec02d92c22ebfa6acc5d6b"
+  integrity sha512-YppvPa1qMyC+oCQJ3tf7Quzpf2NnBlvIRLPJiGAMssUwX5qE0iKe9lTtkNwMaNxEvzz6rDxewSlz+f/MWr4gPw==
+
 "@storybook/cli@7.0.25":
   version "7.0.25"
   resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.0.25.tgz#e97d55b203afaa92c2eeaad8df78887865ec02ab"
@@ -6252,6 +6286,13 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
+"@storybook/client-logger@7.0.27":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.0.27.tgz#22675527cca26e5f275157b8bbc72fd102856177"
+  integrity sha512-t4F0ByHP4MNiyVI5sgqtxSccr4RmPAqTr/h6CeGLJKWzUYobBV5hwKUd/qlfwdjev2u9C7AdLFPBKVcHX5PteA==
+  dependencies:
+    "@storybook/global" "^5.0.0"
+
 "@storybook/codemod@7.0.25":
   version "7.0.25"
   resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.0.25.tgz#cf5e79fc5dc9d48d34a92f349b4a6a60386258c6"
@@ -6299,6 +6340,20 @@
     use-resize-observer "^9.1.0"
     util-deprecate "^1.0.2"
 
+"@storybook/components@^7.0.0":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.0.27.tgz#5d33aa742ce4685eafb5deac9f943fd40c32809a"
+  integrity sha512-utt4fA1td7QHpvuD/9dWm9UEoO5xTU3EsXk/U2fPUQzN9NEsbWKV/QubUYIpVy5iwwgUyMvqzWHM0veAriJW5A==
+  dependencies:
+    "@storybook/client-logger" "7.0.27"
+    "@storybook/csf" "^0.1.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/theming" "7.0.27"
+    "@storybook/types" "7.0.27"
+    memoizerific "^1.11.3"
+    use-resize-observer "^9.1.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/core-client@7.0.12":
   version "7.0.12"
   resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-7.0.12.tgz#3c381cc5c42bf990cea27c90be8d2e594fb9a5be"
@@ -6377,6 +6432,11 @@
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.0.25.tgz#a2754a8af5de78a47a0bc2193f3baf80e302ad7b"
   integrity sha512-abM0M+H19eZu0dRK+/2PB0W9b7xXFhiPddXpFCjIfJQFGPIwGBWVAFot1bKR5Mu4IB9OftkJYMRtYEEBrNep3A==
 
+"@storybook/core-events@7.0.27", "@storybook/core-events@^7.0.0":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.0.27.tgz#94c7f8877998a25e8d14bafa51839fedfa442769"
+  integrity sha512-sNnqgO5i5DUIqeQfNbr987KWvAciMN9FmMBuYdKjVFMqWFyr44HTgnhfKwZZKl+VMDYkHA9Do7UGSYZIKy0P4g==
+
 "@storybook/core-server@7.0.12":
   version "7.0.12"
   resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.0.12.tgz#f666057f4b003b15cff4037cf43ab8c91c001d43"
@@ -6632,6 +6692,27 @@
     telejson "^7.0.3"
     ts-dedent "^2.0.0"
 
+"@storybook/manager-api@7.0.27":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.0.27.tgz#270e560e791f4275882e844af228ba78450b492e"
+  integrity sha512-CVgy4ti8h0Xc4nxiPujTzhMANl9wmfLGvSA9ZX6YUBbKFV4UOL4oj105iHPW7Ngse6Qoqj0rnhkOSmLczXT03w==
+  dependencies:
+    "@storybook/channels" "7.0.27"
+    "@storybook/client-logger" "7.0.27"
+    "@storybook/core-events" "7.0.27"
+    "@storybook/csf" "^0.1.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/router" "7.0.27"
+    "@storybook/theming" "7.0.27"
+    "@storybook/types" "7.0.27"
+    dequal "^2.0.2"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    semver "^7.3.7"
+    store2 "^2.14.2"
+    telejson "^7.0.3"
+    ts-dedent "^2.0.0"
+
 "@storybook/manager@7.0.12":
   version "7.0.12"
   resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-7.0.12.tgz#917d60c5822c002d37ce169a22b4492055575284"
@@ -6752,6 +6833,27 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/preview-api@7.0.27":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.0.27.tgz#6e414a95ecca61fe817d67433588d06301d5c5e2"
+  integrity sha512-FhauTuLzRsaIaEORQP5lxYrzwRgZPMnfYEPnzduyGgPiY6VZkS6wIiO6pKzat83V1L4J7m5aZhTB3HtvTwPhvg==
+  dependencies:
+    "@storybook/channel-postmessage" "7.0.27"
+    "@storybook/channels" "7.0.27"
+    "@storybook/client-logger" "7.0.27"
+    "@storybook/core-events" "7.0.27"
+    "@storybook/csf" "^0.1.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/types" "7.0.27"
+    "@types/qs" "^6.9.5"
+    dequal "^2.0.2"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    synchronous-promise "^2.0.15"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/preview@7.0.25":
   version "7.0.25"
   resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.0.25.tgz#a18fc4425f38e59f63f588fca812d1e7b6e2fabd"
@@ -6862,6 +6964,15 @@
     memoizerific "^1.11.3"
     qs "^6.10.0"
 
+"@storybook/router@7.0.27":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.0.27.tgz#c7beffb1eb40fb525d9fbeabcac2ca25e8259f2a"
+  integrity sha512-Onflm2mERipuYB3SR+0CFAZKPbDiLsJdgX09BP8bGrg7dVYwiGkL5dc9H/CP0KPxtC7kXT8x1Zc+yx0Y0kWiJw==
+  dependencies:
+    "@storybook/client-logger" "7.0.27"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+
 "@storybook/store@7.0.25":
   version "7.0.25"
   resolved "https://registry.yarnpkg.com/@storybook/store/-/store-7.0.25.tgz#5041e214f8cb648e90893b3aaadba6a976572d3c"
@@ -6931,6 +7042,16 @@
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
+"@storybook/theming@7.0.27", "@storybook/theming@^7.0.0":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.0.27.tgz#62d6f4af8e8e2089c0b84e4d47a1a4ec3ba06fb3"
+  integrity sha512-l2Lc8xX8QXQO8c9gpzdUUJ+0YqLoh8w74I7lzxiife0TzEQrhWD9aRJAVimm8Vzfq5x3CNeJNFHc5PcG8ypQig==
+  dependencies:
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@storybook/client-logger" "7.0.27"
+    "@storybook/global" "^5.0.0"
+    memoizerific "^1.11.3"
+
 "@storybook/types@7.0.12":
   version "7.0.12"
   resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.0.12.tgz#e3942135a3ff7a8932c2be449c078727d579d24d"
@@ -6951,6 +7072,16 @@
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
 
+"@storybook/types@7.0.27":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.0.27.tgz#5e8a3bc8d973a519f1ca48fca5b34d53de9683e0"
+  integrity sha512-pmJuIm+kGaZiDMyl2i5KFS9iGWrpW1jVcp9OMtHeK20LBzY5Hxq/JMc3E+fbVNkAX2hVlVGbbVUNPTvd9AjbrA==
+  dependencies:
+    "@storybook/channels" "7.0.27"
+    "@types/babel__core" "^7.0.0"
+    "@types/express" "^4.7.0"
+    file-system-cache "2.3.0"
+
 "@substrate/connect-extension-protocol@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@substrate/connect-extension-protocol/-/connect-extension-protocol-1.0.1.tgz#fa5738039586c648013caa6a0c95c43265dbe77d"
@@ -23118,6 +23249,20 @@ storybook-addon-react-router-v6@^1.0.0:
   dependencies:
     react-inspector "^6.0.1"
 
+storybook-dark-mode@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/storybook-dark-mode/-/storybook-dark-mode-3.0.0.tgz#4c9d59de28c84a0c159ddc3d18e4e8e33db779a9"
+  integrity sha512-aeAvqP/mmdccEiCsvx6aw3M0i7mZSiXROsrAsEQN8vl1lAg3FZN+y3Xu/f+ye59wLMRuKJC/JBp7E3/H7vLBRQ==
+  dependencies:
+    "@storybook/addons" "^7.0.0"
+    "@storybook/api" "^7.0.0"
+    "@storybook/components" "^7.0.0"
+    "@storybook/core-events" "^7.0.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/theming" "^7.0.0"
+    fast-deep-equal "^3.1.3"
+    memoizerific "^1.11.3"
+
 storybook-tailwind-dark-mode@^1.0.22:
   version "1.0.22"
   resolved "https://registry.yarnpkg.com/storybook-tailwind-dark-mode/-/storybook-tailwind-dark-mode-1.0.22.tgz#1a873e36375d53ea709ad61169cb12840c07ae39"