Hubble Stats - Pool Overview

apps/hubble-stats/app/layout.tsx

@@ -1,8 +1,7 @@
 'use client';
-import { useEffect } from 'react';
+
 import {
   WebbUIProvider,
-  useDarkMode,
   Footer,
   SideBar,
   Logo,
@@ -20,19 +19,13 @@ 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,
 }: {
   children: React.ReactNode;
 }) {
-  const [, setIsDarkMode] = useDarkMode();
-
-  useEffect(() => {
-    setIsDarkMode('light');
-  }, [setIsDarkMode]);
-
   const items: ItemProps[] = [
     {
       name: 'Hubble',
@@ -96,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/app/pool/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import {
   PoolMetadataTableContainer,
+  PoolOverviewContainer,
   PoolTransactionsTableContainer,
 } from '../../../containers';
 
@@ -8,6 +9,12 @@ export default function Pool({ params }: { params: { slug: string } }) {
 
   return (
     <div className="py-4 space-y-8">
+      <div className="flex gap-4">
+        <div className="w-[400px]">
+          <PoolOverviewContainer />
+        </div>
+        <div className="flex-grow"></div>
+      </div>
       <PoolTransactionsTableContainer />
       <PoolMetadataTableContainer />
     </div>

apps/hubble-stats/components/Areachart/Areachart.tsx → 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

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

apps/hubble-stats/components/Areachart/types.ts → 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 → 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

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

apps/hubble-stats/components/Barchart/types.ts → 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/PoolOverviewItem/PoolOverviewItem.tsx

@@ -0,0 +1,61 @@
+import { FC } from 'react';
+import cx from 'classnames';
+import { Typography } from '@webb-tools/webb-ui-components';
+import { getRoundedAmountString } from '@webb-tools/webb-ui-components/utils';
+import { ArrowRight } from '@webb-tools/icons';
+
+import { PoolOverviewItemProps } from './types';
+
+const PoolOverviewItem: FC<PoolOverviewItemProps> = ({
+  title,
+  value,
+  changeRate,
+  prefix,
+  className,
+}) => {
+  return (
+    <div className={cx('px-2', className)}>
+      <div className="flex justify-center items-center gap-1">
+        <Typography variant="h5" fw="black" className="text-center">
+          {value && (prefix ?? '')}
+          {getRoundedAmountString(value, 2, {
+            roundingFunction: Math.floor,
+            totalLength: 0,
+          })}
+        </Typography>
+        {changeRate && (
+          <Typography
+            variant="utility"
+            tw="black"
+            className={cx(
+              'flex items-center',
+              'uppercase text-mono-120 dark:text-mono-80 !text-[12px]',
+              {
+                '!text-green-70': changeRate >= 0,
+                '!text-red-70': changeRate < 0,
+              }
+            )}
+          >
+            <ArrowRight
+              className={cx({
+                '-rotate-90 !fill-green-70': changeRate >= 0,
+                'rotate-90 !fill-red-70': changeRate < 0,
+              })}
+            />
+            {getRoundedAmountString(Math.abs(changeRate), 2)}%
+          </Typography>
+        )}
+      </div>
+
+      <Typography
+        variant="utility"
+        tw="black"
+        className="w-full uppercase block text-center text-mono-120 dark:text-mono-80 !text-[12px]"
+      >
+        {title}
+      </Typography>
+    </div>
+  );
+};
+
+export default PoolOverviewItem;

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

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

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

@@ -0,0 +1,7 @@
+export interface PoolOverviewItemProps {
+  title: string;
+  value?: number;
+  changeRate?: number;
+  prefix?: string;
+  className?: string;
+}

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { Chip, ChipProps } from '@webb-tools/webb-ui-components';
+
+import { PoolType, PoolTypeChipProps } from './types';
+
+const typeColorMap: Record<PoolType, ChipProps['color']> = {
+  single: 'purple',
+  multi: 'blue',
+};
+
+const PoolTypeChip: FC<PoolTypeChipProps> = ({ type = 'single', name }) => {
+  return <Chip color={typeColorMap[type]}>{name ?? type}</Chip>;
+};
+
+export default PoolTypeChip;

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

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

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

@@ -0,0 +1,6 @@
+export type PoolType = 'single' | 'multi';
+
+export interface PoolTypeChipProps {
+  type?: PoolType;
+  name?: string;
+}

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

@@ -18,14 +18,19 @@ import {
 import { ShieldedAssetDark, ShieldedAssetLight } from '@webb-tools/icons';
 
 import { ShieldedAssetType, ShieldedAssetsTableProps } from './types';
-import { HeaderCell, NumberCell, PoolTypeCell, ShieldedCell } from '../table';
+import { HeaderCell, NumberCell, ShieldedCell } from '../table';
+import { PoolTypeChip } from '..';
 
 const columnHelper = createColumnHelper<ShieldedAssetType>();
 
 const staticColumns: ColumnDef<ShieldedAssetType, any>[] = [
   columnHelper.accessor('poolType', {
     header: () => <HeaderCell title="Pool Type" />,
-    cell: (props) => <PoolTypeCell type={props.getValue()} />,
+    cell: (props) => (
+      <div className="text-center">
+        <PoolTypeChip type={props.getValue()} />
+      </div>
+    ),
   }),
   columnHelper.accessor('composition', {
     header: () => <HeaderCell title="Composition" />,

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

@@ -1,4 +1,4 @@
-import { PoolType } from '../table/types';
+import { PoolType } from '../PoolTypeChip/types';
 
 export interface ShieldedAssetType {
   assetAddress: string;

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

@@ -12,7 +12,8 @@ import {
 import { Table, IconsGroup, fuzzyFilter } from '@webb-tools/webb-ui-components';
 
 import { ShieldedPoolType, ShieldedPoolsTableProps } from './types';
-import { HeaderCell, NumberCell, PoolTypeCell, ShieldedCell } from '../table';
+import { HeaderCell, NumberCell, ShieldedCell } from '../table';
+import { PoolTypeChip } from '..';
 
 const columnHelper = createColumnHelper<ShieldedPoolType>();
 
@@ -30,7 +31,11 @@ const columns: ColumnDef<ShieldedPoolType, any>[] = [
   }),
   columnHelper.accessor('poolType', {
     header: () => <HeaderCell title="Pool Type" />,
-    cell: (props) => <PoolTypeCell type={props.getValue()} />,
+    cell: (props) => (
+      <div className="text-center">
+        <PoolTypeChip type={props.getValue()} />
+      </div>
+    ),
   }),
   columnHelper.accessor('token', {
     header: () => <HeaderCell title="Token #" className="justify-end" />,

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

@@ -1,4 +1,4 @@
-import { PoolType } from '../table/types';
+import { PoolType } from '../PoolTypeChip/types';
 
 export interface ShieldedPoolType {
   poolSymbol: string;

apps/hubble-stats/components/index.ts

@@ -1,7 +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';