Merge branch 'develop' into PS/dkg-stats-fixes

tangle-network · Sep 18, 2023 · a45b1c9 · a45b1c9
2 parents 61e3eb7 + 030e6ff
commit a45b1c9
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 65 deletions.
diff --git a/apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx b/apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx
@@ -10,50 +10,42 @@ import {
 import { CoinIcon, ContrastLine } from '@webb-tools/icons';
 
 import { VANCHORS_MAP } from '../../constants';
-
 import { BreadcrumbType } from './types';
 
 const Breadcrumbs: FC = () => {
   const pathname = usePathname();
-  const parts = pathname.split('/');
-  let activeItem = parts[parts.length - 1];
 
-  // check if current path is /pool/<poolAddress>
-  if (parts.length === 3 && parts[0] === '' && parts[1] === 'pool') {
-    const poolAddress = parts[2];
-    // if invalid poolAddress, the breadcrumb only show the default item
-    if (!VANCHORS_MAP[poolAddress]) {
-      activeItem = '';
-    } else {
-      activeItem = VANCHORS_MAP[poolAddress].fungibleTokenName;
+  const breadCrumbs = useMemo<BreadcrumbType[]>(() => {
+    // check if current path is /pool/<0x...>
+    if (/^\/pool\/0x\w+/.test(pathname)) {
+      const poolAddress = pathname.split('/')[2];
+      if (VANCHORS_MAP[poolAddress]) {
+        return [
+          {
+            label: 'Hubble Overview',
+            isLast: false,
+            icon: <ContrastLine className="!fill-mono-120" />,
+            href: '/',
+          },
+          {
+            label: VANCHORS_MAP[poolAddress].fungibleTokenName,
+            isLast: true,
+            icon: <CoinIcon />,
+            href: '#',
+          },
+        ];
+      }
     }
-  }
 
-  const breadCrumbs = useMemo(() => {
-    const breadCrumbItems: BreadcrumbType[] = [
+    return [
       {
         label: 'Hubble Overview',
-        isLast: activeItem === '',
-        icon: (
-          <ContrastLine className={activeItem !== '' ? 'fill-mono-120' : ''} />
-        ),
+        isLast: true,
+        icon: <ContrastLine />,
         href: '/',
-        textClassName: '!text-[12px] lg:!text-[16px] normal-case',
       },
     ];
-
-    if (activeItem !== '') {
-      breadCrumbItems.push({
-        label: activeItem,
-        isLast: true,
-        icon: <CoinIcon />,
-        href: '',
-        textClassName: '!text-[12px] lg:!text-[16px] normal-case',
-      });
-    }
-
-    return breadCrumbItems;
-  }, [activeItem]);
+  }, [pathname]);
 
   return (
     <BreadcrumbsCmp>
@@ -62,7 +54,7 @@ const Breadcrumbs: FC = () => {
           <BreadcrumbsItem
             icon={breadcrumb.icon}
             className={breadcrumb.className}
-            textClassName={breadcrumb.textClassName}
+            textClassName="!text-[12px] lg:!text-[16px] normal-case"
             isLast={breadcrumb.isLast}
           >
             {breadcrumb.label}

diff --git a/apps/hubble-stats/components/Breadcrumbs/types.ts b/apps/hubble-stats/components/Breadcrumbs/types.ts
@@ -4,5 +4,4 @@ export type BreadcrumbType = {
   icon: JSX.Element;
   href: string;
   className?: string;
-  textClassName?: string;
 };
diff --git a/apps/hubble-stats/components/PoolWrappingTable/PoolWrappingTable.tsx b/apps/hubble-stats/components/PoolWrappingTable/PoolWrappingTable.tsx
@@ -70,8 +70,7 @@ const staticColumns: ColumnDef<PoolWrappingDataType, any>[] = [
       />
     ),
     cell: (props) => {
-      const currency =
-        props.row.getParentRow()?.original.symbol ?? props.row.original.symbol;
+      const currency = props.row.original.symbol;
       return <NumberCell value={props.getValue()} suffix={` ${currency}`} />;
     },
   }),
@@ -104,9 +103,7 @@ const PoolWrappingTable: FC<PoolWrappingTableProps> = ({
             </div>
           ),
           cell: (props) => {
-            const currency =
-              props.row.getParentRow()?.original.symbol ??
-              props.row.original.symbol;
+            const currency = props.row.original.symbol;
 
             return typeof props.row.original.chainsData[typedChainId] ===
               'number' ? (

diff --git a/apps/hubble-stats/constants/subgraphs.ts b/apps/hubble-stats/constants/subgraphs.ts
@@ -1,7 +1,7 @@
 import { PresetTypedChainId } from '@webb-tools/dapp-types';
 import vAnchorClient from '@webb-tools/vanchor-client';
 
-export const LIVE_SUBGRAPH_MAP = {
+const LIVE_SUBGRAPH_MAP = {
   [PresetTypedChainId.AthenaOrbit]:
     vAnchorClient.SubgraphUrl.vAnchorOrbitAthena,
   [PresetTypedChainId.HermesOrbit]:
@@ -12,13 +12,21 @@ export const LIVE_SUBGRAPH_MAP = {
     vAnchorClient.SubgraphUrl.vAnchorTangleTestnet,
 };
 
+const LOCAL_SUBGRAPH_MAP = {
+  [PresetTypedChainId.AthenaLocalnet]:
+    vAnchorClient.SubgraphUrl.vAnchorAthenaLocal,
+  [PresetTypedChainId.HermesLocalnet]:
+    vAnchorClient.SubgraphUrl.vAnchorHermesLocal,
+  [PresetTypedChainId.DemeterLocalnet]:
+    vAnchorClient.SubgraphUrl.vAnchorDemeterLocal,
+};
+
 const LIVE_SUBGRAPH_URLS = Object.values(LIVE_SUBGRAPH_MAP);
+const LOCAL_SUBGRAPH_URLS = Object.values(LOCAL_SUBGRAPH_MAP);
 
-export const LOCAL_SUBGRAPH_URLS = [
-  vAnchorClient.SubgraphUrl.vAnchorAthenaLocal,
-  vAnchorClient.SubgraphUrl.vAnchorHermesLocal,
-  vAnchorClient.SubgraphUrl.vAnchorDemeterLocal,
-];
+export const ACTIVE_SUBGRAPH_MAP = process.env.USING_LOCAL_SUBGRAPHS
+  ? LOCAL_SUBGRAPH_MAP
+  : LIVE_SUBGRAPH_MAP;
 
 export const ACTIVE_SUBGRAPH_URLS = process.env.USING_LOCAL_SUBGRAPHS
   ? LOCAL_SUBGRAPH_URLS

diff --git a/apps/hubble-stats/constants/vanchor.ts b/apps/hubble-stats/constants/vanchor.ts
@@ -1,14 +1,11 @@
-import { PresetTypedChainId } from '@webb-tools/dapp-types';
 import onChainDataJson from '@webb-tools/api-provider-environment/generated/on-chain-config.json';
 
+import { ACTIVE_SUBGRAPH_MAP } from './subgraphs';
 import { getVAnchorMapFromOnChainData } from '../utils';
 
-export const ACTIVE_CHAINS = [
-  PresetTypedChainId.HermesOrbit,
-  PresetTypedChainId.DemeterOrbit,
-  PresetTypedChainId.AthenaOrbit,
-  PresetTypedChainId.TangleTestnet,
-];
+export const ACTIVE_CHAINS = Object.keys(ACTIVE_SUBGRAPH_MAP).map(
+  (typedChainedId) => +typedChainedId
+);
 
 export const VANCHORS_MAP = getVAnchorMapFromOnChainData(
   onChainDataJson,

diff --git a/apps/hubble-stats/data/getPoolOverviewTableData.ts b/apps/hubble-stats/data/getPoolOverviewTableData.ts
@@ -2,7 +2,7 @@ import { formatEther } from 'viem';
 import vAnchorClient from '@webb-tools/vanchor-client';
 
 import { PoolOverviewDataType } from '../components/PoolOverviewTable/types';
-import { ACTIVE_CHAINS, VANCHORS_MAP, LIVE_SUBGRAPH_MAP } from '../constants';
+import { ACTIVE_CHAINS, VANCHORS_MAP, ACTIVE_SUBGRAPH_MAP } from '../constants';
 import { getAggregateValue, getValidDatesToQuery } from '../utils';
 
 export type PoolOverviewTableDataType = {
@@ -26,7 +26,7 @@ export default async function getPoolOverviewTableData(
     try {
       const deposit24hData =
         await vAnchorClient.Deposit.GetVAnchorDepositByChain15MinsInterval(
-          LIVE_SUBGRAPH_MAP[typedChainId],
+          ACTIVE_SUBGRAPH_MAP[typedChainId],
           poolAddress,
           date24h,
           dateNow
@@ -49,7 +49,7 @@ export default async function getPoolOverviewTableData(
     try {
       const withdrawal24hData =
         await vAnchorClient.Withdrawal.GetVAnchorWithdrawalByChain15MinsInterval(
-          LIVE_SUBGRAPH_MAP[typedChainId],
+          ACTIVE_SUBGRAPH_MAP[typedChainId],
           poolAddress,
           date24h,
           dateNow
@@ -75,7 +75,7 @@ export default async function getPoolOverviewTableData(
     try {
       const relayerEarningsData =
         await vAnchorClient.RelayerFee.GetVAnchorRelayerFeeByChain(
-          LIVE_SUBGRAPH_MAP[typedChainId],
+          ACTIVE_SUBGRAPH_MAP[typedChainId],
           poolAddress
         );
       relayerEarningsByVAnchorByChain = +formatEther(

diff --git a/apps/hubble-stats/data/getPoolTransactionsData.ts b/apps/hubble-stats/data/getPoolTransactionsData.ts
@@ -3,7 +3,7 @@ import vAnchorClient from '@webb-tools/vanchor-client';
 
 import {
   VANCHORS_MAP,
-  LIVE_SUBGRAPH_MAP,
+  ACTIVE_SUBGRAPH_MAP,
   ACTIVE_SUBGRAPH_URLS,
 } from '../constants';
 import { getTimePassedByEpoch } from '../utils';
@@ -20,9 +20,9 @@ export default async function getPoolTransactionsData(
 ): Promise<PoolTransactionDataType> {
   const { nativeTokenByChain } = VANCHORS_MAP[poolAddress];
 
-  const subgraphByTypedChainIdMap = Object.keys(LIVE_SUBGRAPH_MAP).reduce(
+  const subgraphByTypedChainIdMap = Object.keys(ACTIVE_SUBGRAPH_MAP).reduce(
     (map, typedChainId) => {
-      map[LIVE_SUBGRAPH_MAP[+typedChainId]] = +typedChainId;
+      map[ACTIVE_SUBGRAPH_MAP[+typedChainId]] = +typedChainId;
       return map;
     },
     {} as Record<string, number>

diff --git a/apps/hubble-stats/data/getPoolWrappingTableData.ts b/apps/hubble-stats/data/getPoolWrappingTableData.ts
@@ -2,7 +2,7 @@ import { formatEther } from 'viem';
 import vAnchorClient from '@webb-tools/vanchor-client';
 
 import { PoolWrappingDataType } from '../components/PoolWrappingTable/types';
-import { ACTIVE_CHAINS, VANCHORS_MAP, LIVE_SUBGRAPH_MAP } from '../constants';
+import { ACTIVE_CHAINS, VANCHORS_MAP, ACTIVE_SUBGRAPH_MAP } from '../constants';
 import { getAggregateValue } from '../utils';
 
 export type PoolWrappingTableDataType = {
@@ -27,7 +27,7 @@ export default async function getPoolWrappingTableData(
     let twlByVAnchorByChain: number | undefined;
     try {
       const twlData = await vAnchorClient.TWL.GetVAnchorTWLByChain(
-        LIVE_SUBGRAPH_MAP[typedChainId],
+        ACTIVE_SUBGRAPH_MAP[typedChainId],
         poolAddress
       );
 
@@ -58,7 +58,7 @@ export default async function getPoolWrappingTableData(
         try {
           const twlData =
             await vAnchorClient.TWL.GetVAnchorTWLByChainAndByToken(
-              LIVE_SUBGRAPH_MAP[typedChainId],
+              ACTIVE_SUBGRAPH_MAP[typedChainId],
               poolAddress,
               // query for native token needs to convert to ETH
               token === nativeTokenByChain[typedChainId] ? 'ETH' : token
@@ -90,7 +90,7 @@ export default async function getPoolWrappingTableData(
     try {
       const wrappingFeesData =
         await vAnchorClient.WrappingFee.GetVAnchorWrappingFeeByChain(
-          LIVE_SUBGRAPH_MAP[typedChainId],
+          ACTIVE_SUBGRAPH_MAP[typedChainId],
           poolAddress
         );
 
@@ -126,7 +126,7 @@ export default async function getPoolWrappingTableData(
         try {
           const wrappingFeesData =
             await vAnchorClient.WrappingFee.GetVAnchorWrappingFeeByChainAndByToken(
-              LIVE_SUBGRAPH_MAP[typedChainId],
+              ACTIVE_SUBGRAPH_MAP[typedChainId],
               poolAddress,
               // query for native token needs to convert to ETH
               token === nativeTokenByChain[typedChainId] ? 'ETH' : token

diff --git a/apps/hubble-stats/next.config.js b/apps/hubble-stats/next.config.js
@@ -7,6 +7,12 @@ const { composePlugins, withNx } = require('@nx/next');
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
+  // at default environment variable is only accessible by the server, resulting in hydration mismatch
+  // make environment variable accessible by both the server and client
+  env: {
+    USING_LOCAL_SUBGRAPHS: process.env.USING_LOCAL_SUBGRAPHS ?? '',
+  },
+
   nx: {
     // Set this to true if you would like to use SVGR
     // See: https://github.com/gregberge/svgr

diff --git a/apps/hubble-stats/utils/getVAnchorMapFromOnChainData.ts b/apps/hubble-stats/utils/getVAnchorMapFromOnChainData.ts
@@ -60,7 +60,7 @@ const getVAnchorMapFromOnChainData = (
             treasuryAddress,
             creationTimestamp,
             composition: isNativeAllowed
-              ? [wrappableTokens, nativeCurrency.symbol]
+              ? [...wrappableTokens, nativeCurrency.symbol]
               : wrappableTokens,
             supportedChains: [+typedChainId],
             nativeTokenByChain: {