Hubble Stats dummy data (#1499)

tangle-network · Aug 4, 2023 · 85ac1bd · 85ac1bd
1 parent 926caf6
commit 85ac1bd
Show file tree

Hide file tree

Showing 34 changed files with 622 additions and 254 deletions.
diff --git a/apps/hubble-stats/app/page.tsx b/apps/hubble-stats/app/page.tsx
@@ -8,7 +8,9 @@ export default async function Index() {
   return (
     <div className="py-4 space-y-6">
       <OverviewChartsContainer />
+      {/* @ts-expect-error Server Component */}
       <KeyMetricsTableContainer />
+      {/* @ts-expect-error Server Component */}
       <ShieldedTablesContainer />
     </div>
   );

diff --git a/apps/hubble-stats/app/pool/[slug]/page.tsx b/apps/hubble-stats/app/pool/[slug]/page.tsx
@@ -12,16 +12,22 @@ export default function Pool({ params }: { params: { slug: string } }) {
     <div className="py-4 space-y-8">
       <div className="flex flex-col lg:flex-row gap-4">
         <div className="lg:w-[400px]">
-          <PoolOverviewContainer />
+          {/* TypeScript doesn't understand async components. */}
+          {/* Current approach: https://github.com/vercel/next.js/issues/42292#issuecomment-1298459024 */}
+          {/* @ts-expect-error Server Component */}
+          <PoolOverviewContainer poolAddress={poolAddress} />
         </div>
         <div className="flex-grow"></div>
       </div>
 
-      <NetworkTablesContainer />
+      {/* @ts-expect-error Server Component */}
+      <NetworkTablesContainer poolAddress={poolAddress} />
 
-      <PoolTransactionsTableContainer />
+      {/* @ts-expect-error Server Component */}
+      <PoolTransactionsTableContainer poolAddress={poolAddress} />
 
-      <PoolMetadataTableContainer />
+      {/* @ts-expect-error Server Component */}
+      <PoolMetadataTableContainer poolAddress={poolAddress} />
     </div>
   );
 }
diff --git a/apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx b/apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx
@@ -13,15 +13,19 @@ import { BreadcrumbType } from './types';
 
 const Breadcrumbs: FC = () => {
   const pathname = usePathname();
+  const parts = pathname.split('/');
+  let activeItem = parts[parts.length - 1];
 
-  const breadCrumbs = useMemo(() => {
-    const parts = pathname.split('/');
-    const activeItem = parts[parts.length - 1];
+  if (parts.length === 3 && parts[0] === '' && parts[1] === 'pool') {
+    // TODO: handle getting pool name from address and redirect user if invalid address
+    activeItem = 'webbParachain';
+  }
 
+  const breadCrumbs = useMemo(() => {
     const breadCrumbItems: BreadcrumbType[] = [
       {
         label: 'Hubble Overview',
-        isLast: activeItem !== '' ? false : true,
+        isLast: activeItem === '',
         icon: (
           <ContrastLine className={activeItem !== '' ? 'fill-mono-120' : ''} />
         ),
@@ -39,7 +43,7 @@ const Breadcrumbs: FC = () => {
     }
 
     return breadCrumbItems;
-  }, [pathname]);
+  }, [activeItem]);
 
   return (
     <BreadcrumbsCmp>

diff --git a/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx b/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx
@@ -52,8 +52,8 @@ const staticColumns: ColumnDef<NetworkPoolType, any>[] = [
 ];
 
 const NetworkPoolTable: FC<NetworkPoolTableProps> = ({
-  typedChainIds,
-  data,
+  typedChainIds = [],
+  data = [],
   prefixUnit = '$',
 }) => {
   const sortedTypedChainIds = useMemo(

diff --git a/apps/hubble-stats/components/NetworkPoolTable/types.ts b/apps/hubble-stats/components/NetworkPoolTable/types.ts
@@ -19,12 +19,12 @@ export interface NetworkPoolTableProps {
   /**
    * The list of all available chains
    */
-  typedChainIds: number[];
+  typedChainIds?: number[];
 
   /**
    * The data for whole table
    */
-  data: Array<NetworkPoolType>;
+  data?: Array<NetworkPoolType>;
 
   /**
    * The prefix unit of all the values on the table

diff --git a/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx b/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx
@@ -71,13 +71,15 @@ const staticColumns: ColumnDef<NetworkTokenType, any>[] = [
         className="text-mono-200 dark:text-mono-0"
       />
     ),
-    cell: (props) => <NumberCell value={props.getValue()} prefix="$" />,
+    cell: (props) => (
+      <NumberCell value={props.getValue()} prefix="$" className="lowercase" />
+    ),
   }),
 ];
 
 const NetworkTokenTable: FC<NetworkTokenTableProps> = ({
-  typedChainIds,
-  data,
+  typedChainIds = [],
+  data = [],
   prefixUnit = '$',
 }) => {
   const sortedTypedChainIds = useMemo(
@@ -106,6 +108,7 @@ const NetworkTokenTable: FC<NetworkTokenTableProps> = ({
               <NumberCell
                 value={props.row.original.chainsData[typedChainId]}
                 prefix={prefixUnit}
+                className="lowercase"
               />
             ) : (
               <Typography variant="body1" ta="center">

diff --git a/apps/hubble-stats/components/NetworkTokenTable/types.ts b/apps/hubble-stats/components/NetworkTokenTable/types.ts
@@ -29,12 +29,12 @@ export interface NetworkTokenTableProps {
   /**
    * The list of all available chains
    */
-  typedChainIds: number[];
+  typedChainIds?: number[];
 
   /**
    * The data for whole table (list of tokens and subTokens)
    */
-  data: Array<NetworkTokenType>;
+  data?: Array<NetworkTokenType>;
 
   /**
    * The prefix unit of all the values on the table

diff --git a/apps/hubble-stats/components/PoolMetadataTable/PoolMetadataTable.tsx b/apps/hubble-stats/components/PoolMetadataTable/PoolMetadataTable.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { FC } from 'react';
+import cx from 'classnames';
 import {
   createColumnHelper,
   useReactTable,
@@ -36,27 +37,28 @@ const columns: ColumnDef<PoolAttributeType, any>[] = [
       <Typography
         variant="body1"
         ta="center"
-        className="text-mono-140 dark:text-mono-40"
+        className={cx(
+          'text-mono-140 dark:text-mono-40',
+          'flex justify-center items-center gap-1'
+        )}
       >
-        {props.getValue() ? (
-          props.row.original.isAddress ? (
-            <div className="flex justify-center items-center gap-1">
-              {shortenHex(props.getValue())}
-              {props.row.original.externalLink && (
-                <a
-                  href={props.row.original.externalLink}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <ExternalLinkIcon className="fill-mono-140 dark:fill-mono-40" />
-                </a>
-              )}
-            </div>
-          ) : (
-            props.getValue()
-          )
-        ) : (
+        {props.getValue() === undefined ? (
           '-'
+        ) : props.row.original.isAddress ? (
+          <>
+            {shortenHex(props.getValue())}
+            {props.row.original.externalLink && (
+              <a
+                href={props.row.original.externalLink}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <ExternalLinkIcon className="fill-mono-140 dark:fill-mono-40" />
+              </a>
+            )}
+          </>
+        ) : (
+          props.getValue()
         )}
       </Typography>
     ),

diff --git a/apps/hubble-stats/components/PoolOverviewItem/PoolOverviewItem.tsx b/apps/hubble-stats/components/PoolOverviewItem/PoolOverviewItem.tsx
@@ -18,7 +18,7 @@ const PoolOverviewItem: FC<PoolOverviewItemProps> = ({
       <div className="flex justify-center items-center gap-1">
         <Typography variant="h5" fw="black" className="text-center">
           {value && (prefix ?? '')}
-          {getRoundedAmountString(value, 2, {
+          {getRoundedAmountString(value, 1, {
             roundingFunction: Math.floor,
             totalLength: 0,
           })}
@@ -42,7 +42,7 @@ const PoolOverviewItem: FC<PoolOverviewItemProps> = ({
                 'rotate-90 !fill-red-70': changeRate < 0,
               })}
             />
-            {getRoundedAmountString(Math.abs(changeRate), 2)}%
+            {getRoundedAmountString(Math.abs(changeRate), 1)}%
           </Typography>
         )}
       </div>

diff --git a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx
@@ -12,6 +12,7 @@ import {
   Table as RTTable,
 } from '@tanstack/react-table';
 import { Table, fuzzyFilter, ChainChip } from '@webb-tools/webb-ui-components';
+import { chainsConfig } from '@webb-tools/dapp-config/chains';
 
 import { PoolTransactionType, PoolTransactionsTableProps } from './types';
 import {
@@ -45,16 +46,18 @@ const columns: ColumnDef<PoolTransactionType, any>[] = [
       />
     ),
   }),
-  columnHelper.accessor('source', {
+  columnHelper.accessor('sourceTypedChainId', {
     header: () => <HeaderCell title="Source" className="justify-start" />,
     cell: (props) => (
       <ChainChip
-        chainName={props.row.original.source}
-        chainType={props.row.original.sourceChainType}
+        chainName={chainsConfig[props.getValue()].name}
+        chainType={chainsConfig[props.getValue()].group}
+        // shorten the title to last word of the chain name
+        title={chainsConfig[props.getValue()].name.split(' ').pop()}
       />
     ),
   }),
-  columnHelper.accessor('destination', {
+  columnHelper.accessor('destinationTypedChainId', {
     header: () => <HeaderCell title="Destination" className="justify-start" />,
     cell: (props) => <DestinationCell />,
   }),

diff --git a/apps/hubble-stats/components/PoolTransactionsTable/types.ts b/apps/hubble-stats/components/PoolTransactionsTable/types.ts
@@ -1,15 +1,13 @@
-import { ChainGroup } from '@webb-tools/dapp-config';
 import { ActivityType } from '../table/types';
 
 export type PoolTransactionType = {
   txHash: string;
   activity: ActivityType;
   tokenAmount: number;
   tokenSymbol: string;
-  source: string;
-  sourceChainType: ChainGroup;
-  destination: string;
-  time: number;
+  sourceTypedChainId: number;
+  destinationTypedChainId?: number;
+  time?: string;
 };
 
 export interface PoolTransactionsTableProps {

diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx
@@ -71,7 +71,7 @@ const columns: ColumnDef<ShieldedAssetType, any>[] = [
 ];
 
 const ShieldedAssetsTable: FC<ShieldedAssetsTableProps> = ({
-  data,
+  data = [],
   pageSize,
 }) => {
   const table = useReactTable({

diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/types.ts b/apps/hubble-stats/components/ShieldedAssetsTable/types.ts
@@ -12,6 +12,6 @@ export interface ShieldedAssetType {
 }
 
 export interface ShieldedAssetsTableProps {
-  data: ShieldedAssetType[];
+  data?: ShieldedAssetType[];
   pageSize: number;
 }
diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx b/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx
@@ -42,7 +42,9 @@ const columns: ColumnDef<ShieldedPoolType, any>[] = [
   }),
   columnHelper.accessor('token', {
     header: () => <HeaderCell title="Token #" className="justify-end" />,
-    cell: (props) => <NumberCell value={props.getValue()} />,
+    cell: (props) => (
+      <NumberCell value={props.getValue()} className="text-right" />
+    ),
   }),
   columnHelper.accessor('deposits24h', {
     header: () => <HeaderCell title="24H Deposits" />,
@@ -65,7 +67,7 @@ const columns: ColumnDef<ShieldedPoolType, any>[] = [
 ];
 
 const ShieldedPoolsTable: FC<ShieldedPoolsTableProps> = ({
-  data,
+  data = [],
   pageSize,
 }) => {
   const table = useReactTable({

diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/types.ts b/apps/hubble-stats/components/ShieldedPoolsTable/types.ts
@@ -11,6 +11,6 @@ export interface ShieldedPoolType {
 }
 
 export interface ShieldedPoolsTableProps {
-  data: ShieldedPoolType[];
+  data?: ShieldedPoolType[];
   pageSize: number;
 }
diff --git a/apps/hubble-stats/components/table/types.ts b/apps/hubble-stats/components/table/types.ts
@@ -25,7 +25,7 @@ export interface ActivityCellProps {
 }
 
 export interface TimeCellProps {
-  time?: number;
+  time?: string;
   className?: string;
 }