Integrate back-end with Overview Charts and Key Metrics Table (#1557)

Co-authored-by: Trung-Tin Pham <[email protected]>
tangle-network · Aug 25, 2023 · a3853bd · a3853bd
1 parent ee60e32
commit a3853bd
Show file tree

Hide file tree

Showing 32 changed files with 778 additions and 156 deletions.
diff --git a/.env.example b/.env.example
@@ -42,3 +42,6 @@ BRIDGE_DAPP_HOSTED_ORBIT_MULTLICALL3_ADDRESS=""
 BRIDGE_DAPP_ATHENA_ORBIT_MULTICALL3_DEPLOYMENT_BLOCK=0
 BRIDGE_DAPP_HERMES_ORBIT_MULTICALL3_DEPLOYMENT_BLOCK=0
 BRIDGE_DAPP_DEMETER_ORBIT_MULTICALL3_DEPLOYMENT_BLOCK=0
+
+VANCHOR_ADDRESSES='["<VANCHOR_ADDRESS>"]'
+ACTIVE_SUBGRAPHS="local"
diff --git a/apps/hubble-stats/components/AreaChart/AreaChart.tsx b/apps/hubble-stats/components/AreaChart/AreaChart.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import {
   ResponsiveContainer,
   AreaChart as AreaChartCmp,
@@ -10,6 +10,7 @@ import {
 } from 'recharts';
 import { useDarkMode } from '@webb-tools/webb-ui-components';
 
+import { ChartTooltip } from '..';
 import { AreaChartProps } from './types';
 
 const AreaChart: FC<AreaChartProps> = ({
@@ -18,9 +19,17 @@ const AreaChart: FC<AreaChartProps> = ({
   setValue,
   width = '100%',
   height = 180,
+  showTooltip = true,
+  tooltipLabel = '',
+  tooltipValuePrefix = '',
 }) => {
   const [isDarkMode] = useDarkMode();
 
+  const fillColor = useMemo(
+    () => (isDarkMode ? '#C6BBFA' : '#624FBE'),
+    [isDarkMode]
+  );
+
   return (
     <ResponsiveContainer width={width} height={height}>
       <AreaChartCmp
@@ -44,21 +53,38 @@ const AreaChart: FC<AreaChartProps> = ({
             fontWeight: 400,
           }}
           tickMargin={16}
+          interval="preserveStartEnd"
         />
         <Tooltip
           contentStyle={{ display: 'none' }}
           content={({ active, payload }) => {
             if (active && payload && payload.length) {
               setValue && setValue(payload[0].payload['value']);
               setDate && setDate(payload[0].payload['date']);
+              if (!showTooltip) {
+                return null;
+              }
+              return (
+                <ChartTooltip
+                  date={payload[0].payload['date']}
+                  info={[
+                    {
+                      color: fillColor,
+                      label: tooltipLabel,
+                      value: payload[0].payload['value'],
+                      valuePrefix: tooltipValuePrefix,
+                    },
+                  ]}
+                />
+              );
             }
 
             return null;
           }}
         />
         <Area
           dataKey="value"
-          stroke={isDarkMode ? '#C6BBFA' : '#624FBE'}
+          stroke={fillColor}
           fillOpacity={0}
           strokeWidth={2}
         />

diff --git a/apps/hubble-stats/components/AreaChart/types.ts b/apps/hubble-stats/components/AreaChart/types.ts
@@ -7,4 +7,7 @@ export type AreaChartProps = {
   setDate: (date: Date | null) => void;
   width?: number | string;
   height?: number | string;
+  showTooltip?: boolean;
+  tooltipLabel?: string;
+  tooltipValuePrefix?: string;
 };
diff --git a/apps/hubble-stats/components/BarChart/BarChart.tsx b/apps/hubble-stats/components/BarChart/BarChart.tsx
@@ -54,6 +54,7 @@ const BarChart: FC<BarChartProps> = ({
             fontWeight: 400,
           }}
           tickMargin={16}
+          interval="preserveStartEnd"
         />
         <Tooltip
           contentStyle={{ display: 'none' }}

diff --git a/apps/hubble-stats/components/ChartTooltip/ChartTooltip.tsx b/apps/hubble-stats/components/ChartTooltip/ChartTooltip.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { Typography } from '@webb-tools/webb-ui-components';
+
+import { ChartTooltipProps } from './types';
+
+const ChartTooltip: FC<ChartTooltipProps> = ({ date, info }) => {
+  return (
+    <div className="rounded-lg p-2 bg-[rgba(255,255,255,0.70)] dark:bg-[rgba(31,29,43,0.70)]">
+      <Typography variant="body2">
+        {new Date(date).toLocaleDateString('en-US', {
+          month: 'short',
+          day: 'numeric',
+          year: 'numeric',
+        })}
+      </Typography>
+      {info.map((item, idx) => (
+        <div key={idx} className="flex items-center gap-1">
+          <div
+            className="rounded-full w-2 h-2"
+            style={{ backgroundColor: item.color }}
+          />
+          <Typography variant="body2">
+            {item.label}: {item.valuePrefix ?? ''}
+            {item.value.toFixed(2)}
+            {item.valueSuffix ?? ''}
+          </Typography>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ChartTooltip;
diff --git a/apps/hubble-stats/components/ChartTooltip/index.ts b/apps/hubble-stats/components/ChartTooltip/index.ts
@@ -0,0 +1 @@
+export { default as ChartTooltip } from './ChartTooltip';
diff --git a/apps/hubble-stats/components/ChartTooltip/types.ts b/apps/hubble-stats/components/ChartTooltip/types.ts
@@ -0,0 +1,10 @@
+export interface ChartTooltipProps {
+  date: Date;
+  info: Array<{
+    color: string;
+    label: string;
+    value: number;
+    valuePrefix?: string;
+    valueSuffix?: string;
+  }>;
+}
diff --git a/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx b/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx
@@ -4,12 +4,14 @@ import { Typography } from '@webb-tools/webb-ui-components';
 import { getRoundedAmountString } from '@webb-tools/webb-ui-components/utils';
 
 import { MetricItemProps } from './types';
+import { getRoundedDownWith2Decimals } from '../../utils';
 
 const KeyMetricItem: FC<MetricItemProps> = ({
   title,
   value,
   prefix,
   changeRate,
+  suffix,
 }) => {
   return (
     <div
@@ -28,34 +30,34 @@ const KeyMetricItem: FC<MetricItemProps> = ({
           <Typography
             variant="body1"
             fw="black"
-            className="uppercase text-mono-140 dark:text-mono-40"
+            className="text-mono-140 dark:text-mono-40"
           >
-            {value && (prefix ?? '')}
+            {typeof value === 'number' && (prefix ?? '')}
             {typeof value === 'number' && value < 10000
-              ? value
-              : getRoundedAmountString(value, 2, {
-                  roundingFunction: Math.floor,
-                  totalLength: 0,
-                })}
+              ? Math.floor(value * 100) / 100
+              : getRoundedDownWith2Decimals(value)}
+            {typeof value === 'number' && (suffix ?? '')}
           </Typography>
         </span>
 
         {/* Change Rate */}
-        {changeRate && (
-          <span>
-            <Typography
-              variant="body2"
-              fw="bold"
-              className={cx({
-                '!text-green-70': changeRate >= 0,
-                '!text-red-70': changeRate < 0,
-              })}
-            >
-              ({changeRate >= 0 ? `+` : `-`}
-              {getRoundedAmountString(Math.abs(changeRate), 2)}%)
-            </Typography>
-          </span>
-        )}
+        {typeof changeRate === 'number' &&
+          Number.isFinite(changeRate) &&
+          !Number.isNaN(changeRate) && (
+            <span>
+              <Typography
+                variant="body2"
+                fw="bold"
+                className={cx({
+                  '!text-green-70': changeRate >= 0,
+                  '!text-red-70': changeRate < 0,
+                })}
+              >
+                ({changeRate >= 0 ? `+` : `-`}
+                {getRoundedAmountString(Math.abs(changeRate), 2)}%)
+              </Typography>
+            </span>
+          )}
       </div>
     </div>
   );

diff --git a/apps/hubble-stats/components/KeyMetricItem/types.ts b/apps/hubble-stats/components/KeyMetricItem/types.ts
@@ -3,4 +3,5 @@ export interface MetricItemProps {
   value?: number;
   changeRate?: number;
   prefix?: string;
+  suffix?: string;
 }
diff --git a/apps/hubble-stats/components/VolumeChart/VolumeChart.tsx b/apps/hubble-stats/components/VolumeChart/VolumeChart.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { FC } from 'react';
+import { ResponsiveContainer, BarChart, XAxis, Tooltip, Bar } from 'recharts';
+
+import { ChartTooltip } from '..';
+import { VolumeChartProps } from './types';
+
+const VolumeChart: FC<VolumeChartProps> = ({
+  data,
+  setValue,
+  setDate,
+  width = '100%',
+  height = 180,
+}) => {
+  return (
+    <ResponsiveContainer width={width} height={height}>
+      <BarChart
+        data={data}
+        onMouseLeave={() => {
+          setValue && setValue(null);
+          setDate && setDate(null);
+        }}
+        barGap={0}
+      >
+        <XAxis
+          dataKey="date"
+          tickFormatter={(date) =>
+            new Date(date).toLocaleDateString('en-US', {
+              day: 'numeric',
+            })
+          }
+          strokeOpacity={0}
+          tick={{
+            fontSize: '16px',
+            fill: '#9CA0B0',
+            fontWeight: 400,
+          }}
+          tickMargin={16}
+          interval="preserveStartEnd"
+        />
+        <Tooltip
+          content={({ active, payload }) => {
+            if (active && payload && payload.length) {
+              setValue && setValue(payload[0].payload['deposit']);
+              setDate && setDate(payload[0].payload['date']);
+              return (
+                <ChartTooltip
+                  date={payload[0].payload['date']}
+                  info={[
+                    {
+                      color: '#624FBE',
+                      label: 'Deposits',
+                      value: payload[0].payload['deposit'],
+                      valueSuffix: ' tTNT',
+                    },
+                    {
+                      color: '#B5A9F2',
+                      label: 'Withdrawals',
+                      value: payload[0].payload['withdrawal'],
+                      valueSuffix: ' tTNT',
+                    },
+                  ]}
+                />
+              );
+            }
+            return null;
+          }}
+        />
+        <Bar dataKey="deposit" fill="#624FBE" />
+        <Bar dataKey="withdrawal" fill="#B5A9F2" />
+      </BarChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default VolumeChart;
diff --git a/apps/hubble-stats/components/VolumeChart/index.ts b/apps/hubble-stats/components/VolumeChart/index.ts
@@ -0,0 +1 @@
+export { default as VolumeChart } from './VolumeChart';
diff --git a/apps/hubble-stats/components/VolumeChart/types.ts b/apps/hubble-stats/components/VolumeChart/types.ts
@@ -0,0 +1,11 @@
+export type VolumeChartProps = {
+  data: Array<{
+    date: Date;
+    deposit: number;
+    withdrawal: number;
+  }>;
+  setValue: (value: number | null) => void;
+  setDate: (date: Date | null) => void;
+  width?: number | string;
+  height?: number | string;
+};
diff --git a/apps/hubble-stats/components/index.ts b/apps/hubble-stats/components/index.ts
@@ -1,6 +1,7 @@
 export * from './AreaChart';
 export * from './BarChart';
 export * from './Breadcrumbs';
+export * from './ChartTooltip';
 export * from './KeyMetricItem';
 export * from './NetworkPoolTable';
 export * from './NetworkTokenTable';
@@ -10,5 +11,6 @@ export * from './PoolTransactionsTable';
 export * from './PoolTypeChip';
 export * from './ShieldedAssetsTable';
 export * from './ShieldedPoolsTable';
+export * from './VolumeChart';
 
 export * from './sideBar';
diff --git a/apps/hubble-stats/constants/index.ts b/apps/hubble-stats/constants/index.ts
@@ -1,9 +1,21 @@
 import vAnchorClient from '@webb-tools/vanchor-client';
 
-export const vAnchorAddresses = ['0x4b88368Eb14D7d09f0ca737832cEBfb8F12e3f05'];
-
-export const allSubgraphUrls = [
+export const LIVE_SUBGRAPH_URLS = [
   vAnchorClient.SubgraphUrl.vAnchorOrbitAthena,
   vAnchorClient.SubgraphUrl.vAnchorOrbitHermes,
   vAnchorClient.SubgraphUrl.vAnchorOrbitDemeter,
 ];
+
+export const LOCAL_SUBGRAPH_URLS = [
+  vAnchorClient.SubgraphUrl.vAnchorAthenaLocal,
+  vAnchorClient.SubgraphUrl.vAnchorHermesLocal,
+  vAnchorClient.SubgraphUrl.vAnchorDemeterLocal,
+];
+
+export const ACTIVE_SUBGRAPH_URLS = process.env.USING_LOCAL_SUBGRAPHS
+  ? LOCAL_SUBGRAPH_URLS
+  : LIVE_SUBGRAPH_URLS;
+
+export const VANCHOR_ADDRESSES: string[] = process.env.VANCHOR_ADDRESSES
+  ? JSON.parse(process.env.VANCHOR_ADDRESSES)
+  : ['0x7aA556dD0AF8bed063444E14A6A9af46C9266973'];