chore: refactor code

apps/hubble-stats/app/layout.tsx

@@ -19,7 +19,7 @@ import {
   WEBB_DOCS_URL,
   WEBB_MKT_URL,
 } from '@webb-tools/webb-ui-components/constants';
-import { Header } from '../components/Header';
+import { Header } from '../components';
 
 export default function RootLayout({
   children,
@@ -89,12 +89,10 @@ export default function RootLayout({
             footer={footer}
           />
 
-          <main className="flex-1 overflow-y-auto">
-            <div className="max-w-[1240px] mx-auto">
-              <Header />
-              {children}
-              <Footer isMinimal style={{ background: 'inherit' }} />
-            </div>
+          <main className="flex-1 px-10 overflow-y-auto">
+            <Header />
+            {children}
+            <Footer isMinimal style={{ background: 'inherit' }} />
           </main>
         </body>
       </WebbUIProvider>

apps/hubble-stats/app/page.tsx

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

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

@@ -1,19 +1,24 @@
-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;
+import { FC } from 'react';
+import {
+  ResponsiveContainer,
+  AreaChart as AreaChartCmp,
+  Area,
+  Tooltip,
+  XAxis,
+} from 'recharts';
+import { AreaChartProps } from './types';
 
+const AreaChart: FC<AreaChartProps> = ({
+  data,
+  setDate,
+  setValue,
+  isDarkMode,
+  width = '100%',
+  height = 180,
+}) => {
   return (
     <ResponsiveContainer width={width} height={height}>
-      <AreaChart
+      <AreaChartCmp
         data={data}
         onMouseLeave={() => {
           setDate && setDate(null);
@@ -52,7 +57,9 @@ export const Areachart = (props: AreachartProps) => {
           fillOpacity={0}
           strokeWidth={2}
         />
-      </AreaChart>
+      </AreaChartCmp>
     </ResponsiveContainer>
   );
 };
+
+export default AreaChart;

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

@@ -1,2 +1 @@
-export * from './Areachart';
-export * from './types';
+export { default as AreaChart } from './AreaChart';

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

@@ -1,4 +1,4 @@
-export type AreachartProps = {
+export type AreaChartProps = {
   data: any;
   setValue: (value: number | null) => void;
   setDate: (date: Date | null) => void;

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

@@ -1,19 +1,24 @@
-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;
+import { FC } from 'react';
+import {
+  ResponsiveContainer,
+  BarChart as BarChartCmp,
+  XAxis,
+  Tooltip,
+  Bar,
+} from 'recharts';
+import { BarChartProps } from './types';
 
+const BarChart: FC<BarChartProps> = ({
+  data,
+  setValue,
+  setDate,
+  isDarkMode,
+  width = '100%',
+  height = 180,
+}) => {
   return (
     <ResponsiveContainer width={width} height={height}>
-      <BarChart
+      <BarChartCmp
         data={data}
         onMouseLeave={() => {
           setValue && setValue(null);
@@ -47,7 +52,9 @@ export const Barchart = (props: BarchartProps) => {
           }}
         />
         <Bar dataKey="value" fill={isDarkMode ? '#81B3F6' : '#3D7BCE'} />
-      </BarChart>
+      </BarChartCmp>
     </ResponsiveContainer>
   );
 };
+
+export default BarChart;

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

@@ -1,2 +1 @@
-export * from './Barchart';
-export * from './types';
+export { default as BarChart } from './BarChart';

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

@@ -1,4 +1,4 @@
-export type BarchartProps = {
+export type BarChartProps = {
   data: any;
   setValue: (value: number | null) => void;
   setDate: (date: Date | null) => void;

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

@@ -9,7 +9,7 @@ import {
 import Link from 'next/link';
 import React, { useMemo } from 'react';
 
-export const Header = () => {
+const Header = () => {
   const tvl = useMemo(() => {
     return 'TVL: $13,642,124';
   }, []);
@@ -80,3 +80,5 @@ export const VolumeChip: React.FC<VolumeChipProps> = ({
     </Chip>
   );
 };
+
+export default Header;

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

@@ -1 +1 @@
-export * from './Header';
+export { default as Header } from './Header';

apps/hubble-stats/components/index.ts

@@ -1,9 +1,10 @@
+export * from './AreaChart';
+export * from './BarChart';
+export * from './Header';
 export * from './KeyMetricItem';
 export * from './PoolMetadataTable';
 export * from './PoolOverviewItem';
 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 → apps/hubble-stats/containers/OverviewChartsContainer/OverviewChartsContainer.tsx

@@ -1,9 +1,10 @@
 'use client';
+
 import { useEffect, useMemo, useState } from 'react';
 import { DaysFilterType, ChartContainer } from '@webb-tools/webb-ui-components';
-import { Areachart, Barchart } from '../../components';
+import { AreaChart, BarChart } from '../../components';
 
-export const VolumeChartsContainer = () => {
+const OverviewChartsContainer = () => {
   // Current TVLVolume & Volume values (Default values)
   const [currentTvlValue, setCurrentTvlValue] = useState<number>(13.6);
   const [currentVolumeValue, setCurrentVolumeValue] = useState<number>(8.56);
@@ -70,7 +71,7 @@ export const VolumeChartsContainer = () => {
         value={tvlValue}
         date={tvlDate}
       >
-        <Areachart
+        <AreaChart
           data={tvlData}
           setDate={setTVLDate}
           setValue={setTvlValue}
@@ -88,7 +89,7 @@ export const VolumeChartsContainer = () => {
         daysFilterType={volumeDataType}
         setDaysFilterType={setVolumeDataType}
       >
-        <Barchart
+        <BarChart
           data={volumeData}
           setDate={setVolumeDate}
           setValue={setVolumeValue}
@@ -98,3 +99,5 @@ export const VolumeChartsContainer = () => {
     </div>
   );
 };
+
+export default OverviewChartsContainer;

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

@@ -0,0 +1 @@
+export { default as OverviewChartsContainer } from './OverviewChartsContainer';

apps/hubble-stats/containers/index.ts

@@ -1,4 +1,5 @@
 export * from './KeyMetricsTableContainer';
+export * from './OverviewChartsContainer';
 export * from './PoolMetadataTableContainer';
 export * from './PoolOverviewContainer';
 export * from './PoolTransactionsTableContainer';