Improve Hubble Stats Timeout (#1732)

apps/hubble-stats/app/pool/[slug]/page.tsx

@@ -1,17 +1,16 @@
 import { notFound } from 'next/navigation';
-
+import { Suspense } from 'react';
+import { VANCHORS_MAP } from '../../../constants';
 import {
   PoolInfoCardContainer,
+  PoolMetadataTableContainer,
   PoolOverviewChartsContainer,
-  PoolWrappingChartsContainer,
-  PoolTransactionsTableContainer,
   PoolOverviewTableContainer,
+  PoolTransactionsTableContainer,
+  PoolWrappingChartsContainer,
   PoolWrappingTableContainer,
-  PoolMetadataTableContainer,
 } from '../../../containers';
-import { VANCHORS_MAP } from '../../../constants';
 import { getDateDataForPage } from '../../../utils';
-import { Suspense } from 'react';
 
 // revalidate every 5 seconds
 export const revalidate = 5;

apps/hubble-stats/containers/HeaderChipsContainer/HeaderChipsContainer.tsx

@@ -3,9 +3,9 @@ import { ArrowRightUp, DatabaseLine } from '@webb-tools/icons';
 import { HeaderChipItem } from '../../components';
 import { getHeaderChipsTvlData, getHeaderChipsDepositData } from '../../data';
 
-export default async function HeaderChipsContainer() {
+export default function HeaderChipsContainer() {
   return (
-    <div className="hidden md:flex items-center gap-2 lg:gap-4">
+    <div className="items-center hidden gap-2 md:flex lg:gap-4">
       <HeaderChipItem
         Icon={DatabaseLine}
         label="TVL"

apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx

@@ -1,13 +1,18 @@
 import cx from 'classnames';
-
+import { cache } from 'react';
 import { KeyMetricItem } from '../../components/KeyMetricItem';
 import {
-  getKeyMetricDepositData,
-  getKeyMetricRelayerFeesData,
-  getKeyMetricTvlData,
-  getKeyMetricWrappingFeesData,
+  getKeyMetricDepositData as getDeposit,
+  getKeyMetricRelayerFeesData as getRealyerFees,
+  getKeyMetricTvlData as getTVL,
+  getKeyMetricWrappingFeesData as getWrappingFees,
 } from '../../data';
 
+const getKeyMetricDepositData = cache(getDeposit);
+const getKeyMetricRelayerFeesData = cache(getRealyerFees);
+const getKeyMetricTvlData = cache(getTVL);
+const getKeyMetricWrappingFeesData = cache(getWrappingFees);
+
 export default function KeyMetricsTableContainer(props: {
   epochStart: number;
   epochNow: number;

apps/hubble-stats/containers/PoolInfoCardContainer/PoolInfoCardContainer.tsx

@@ -9,7 +9,14 @@ import {
   PoolTypeChip,
 } from '../../components';
 import { VANCHORS_MAP } from '../../constants';
-import { getPoolInfoCardTvlData, getPoolInfoCardDepositData } from '../../data';
+import {
+  getPoolInfoCardTvlData as getPoolTvl,
+  getPoolInfoCardDepositData as getPoolDeposit,
+} from '../../data';
+import { cache } from 'react';
+
+const getPoolInfoCardTvlData = cache(getPoolTvl);
+const getPoolInfoCardDepositData = cache(getPoolDeposit);
 
 export default function PoolInfoCardContainer({
   poolAddress,

apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx

@@ -1,8 +1,11 @@
 import { Typography } from '@webb-tools/webb-ui-components';
 
+import { cache } from 'react';
 import { PoolMetadataTable } from '../../components';
 import { PoolAttributeType } from '../../components/PoolMetadataTable/types';
-import { getPoolMetadataTableData } from '../../data';
+import { getPoolMetadataTableData as getData } from '../../data';
+
+const getPoolMetadataTableData = cache(getData);
 
 export default async function PoolMetadataTableContainer({
   poolAddress,

apps/hubble-stats/containers/PoolOverviewTableContainer/PoolOverviewTableContainer.tsx

@@ -1,18 +1,22 @@
-import { type FC, Suspense } from 'react';
 import {
-  TableAndChartTabs,
   TabContent,
+  TableAndChartTabs,
   Typography,
 } from '@webb-tools/webb-ui-components';
+import { Suspense, cache, type FC } from 'react';
 
-import { PoolOverviewTable, ContainerSkeleton } from '../../components';
+import { ContainerSkeleton, PoolOverviewTable } from '../../components';
 import { PoolOverviewDataType } from '../../components/PoolOverviewTable/types';
 import {
-  getPoolDepositTableData,
-  getPoolWithdrawalTableData,
-  getPoolRelayerEarningsTableData,
+  getPoolDepositTableData as getDeposit,
+  getPoolRelayerEarningsTableData as getRelayerEarnings,
+  getPoolWithdrawalTableData as getWithdrawal,
 } from '../../data';
 
+const getPoolDepositTableData = cache(getDeposit);
+const getPoolWithdrawalTableData = cache(getWithdrawal);
+const getPoolRelayerEarningsTableData = cache(getRelayerEarnings);
+
 const deposit24hTab = 'Deposits 24H' as const;
 const withdrawal24hTab = 'Withdrawals 24H' as const;
 const relayerEarningsTab = 'Relayer Earnings' as const;

apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx

@@ -1,11 +1,13 @@
-import { type FC, Suspense } from 'react';
-import { TableAndChartTabs, TabContent } from '@webb-tools/webb-ui-components';
+import { TabContent, TableAndChartTabs } from '@webb-tools/webb-ui-components';
+import { Suspense, cache, type FC } from 'react';
 
-import { PoolTransactionsTable, ContainerSkeleton } from '../../components';
-import { getPoolTransactionsTableData } from '../../data';
+import { ContainerSkeleton, PoolTransactionsTable } from '../../components';
+import { getPoolTransactionsTableData as getData } from '../../data';
 
 const pageSize = 10;
 
+const getPoolTransactionsTableData = cache(getData);
+
 const allTab = 'All Transactions' as const;
 const depositsTab = 'Deposits' as const;
 const transfersTab = 'Transfers' as const;

apps/hubble-stats/containers/PoolWrappingChartsContainer/PoolWrappingChartsContainer.tsx

@@ -1,11 +1,11 @@
-import { type FC, Suspense } from 'react';
-import { TableAndChartTabs, TabContent } from '@webb-tools/webb-ui-components';
+import { TabContent, TableAndChartTabs } from '@webb-tools/webb-ui-components';
+import { Suspense } from 'react';
 
+import { PoolChartSkeleton } from '../../components';
 import {
   PoolTwlChartContainer,
   PoolWrappingFeesChartContainer,
 } from '../charts';
-import { PoolChartSkeleton } from '../../components';
 import { PoolChartPropsType } from '../charts/types';
 
 const twlTab = 'TWL';

apps/hubble-stats/containers/PoolWrappingTableContainer/PoolWrappingTableContainer.tsx

@@ -1,13 +1,19 @@
-import { type FC, Suspense } from 'react';
 import {
-  TableAndChartTabs,
   TabContent,
+  TableAndChartTabs,
   Typography,
 } from '@webb-tools/webb-ui-components';
+import { Suspense, cache, type FC } from 'react';
 
-import { PoolWrappingTable, ContainerSkeleton } from '../../components';
+import { ContainerSkeleton, PoolWrappingTable } from '../../components';
 import { PoolWrappingDataType } from '../../components/PoolWrappingTable/types';
-import { getPoolTwlTableData, getPoolWrappingFeesTableData } from '../../data';
+import {
+  getPoolTwlTableData as getTwl,
+  getPoolWrappingFeesTableData as getWrappingFees,
+} from '../../data';
+
+const getPoolTwlTableData = cache(getTwl);
+const getPoolWrappingFeesTableData = cache(getWrappingFees);
 
 const twlTab = 'TWL';
 const wrappingFeesTab = 'Wrapping Fees';

apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx

@@ -1,13 +1,16 @@
-import { type FC, Suspense } from 'react';
-import { TableAndChartTabs, TabContent } from '@webb-tools/webb-ui-components';
+import { TabContent, TableAndChartTabs } from '@webb-tools/webb-ui-components';
+import { Suspense, cache, type FC } from 'react';
 
-import ShieldedAssetsTableContainer from './ShieldedAssetsTableContainer';
-import ShieldedPoolsTableContainer from './ShieldedPoolsTableContainer';
+import { ContainerSkeleton } from '../../components';
 import {
-  getShieldedAssetsTableData,
-  getShieldedPoolsTableData,
+  getShieldedAssetsTableData as getShieldedAssets,
+  getShieldedPoolsTableData as getShieldedPools,
 } from '../../data/shieldedTables';
-import { ContainerSkeleton } from '../../components';
+import ShieldedAssetsTableContainer from './ShieldedAssetsTableContainer';
+import ShieldedPoolsTableContainer from './ShieldedPoolsTableContainer';
+
+const getShieldedAssetsTableData = cache(getShieldedAssets);
+const getShieldedPoolsTableData = cache(getShieldedPools);
 
 const pageSize = 5;
 const assetsTableTab = 'Shielded Assets';

apps/hubble-stats/containers/charts/OverviewTvlChartContainer.tsx

@@ -1,7 +1,10 @@
-import { getOverviewTvlChartData } from '../../data';
+import { cache } from 'react';
+import { getOverviewTvlChartData as getData } from '../../data';
 import { AreaChartContainerClient } from './client';
 import { ChartProps } from './types';
 
+const getOverviewTvlChartData = cache(getData);
+
 export default async function OverviewTvlChartContainer(props: ChartProps) {
   const { numDatesFromStart, startingEpoch } = props;
 

apps/hubble-stats/containers/charts/OverviewVolumeChartContainer.tsx

@@ -1,7 +1,10 @@
-import { getOverviewVolumeChartData } from '../../data';
+import { cache } from 'react';
+import { getOverviewVolumeChartData as getData } from '../../data';
 import { VolumeChartContainerClient } from './client';
 import { ChartProps } from './types';
 
+const getOverviewVolumeChartData = cache(getData);
+
 export default async function OverviewVolumeChartContainer(props: ChartProps) {
   const { numDatesFromStart, startingEpoch, epochNow } = props;
 

apps/hubble-stats/containers/charts/PoolRelayerEarningsChartContainer.tsx

@@ -1,7 +1,10 @@
-import { getPoolRelayerEarningsChartData } from '../../data';
+import { cache } from 'react';
+import { getPoolRelayerEarningsChartData as getData } from '../../data';
 import { BarChartContainerClient } from './client';
 import { PoolChartPropsType } from './types';
 
+const getPoolRelayerEarningsChartData = cache(getData);
+
 export default async function PoolRelayerEarningsChartContainer(
   props: PoolChartPropsType
 ) {

apps/hubble-stats/containers/charts/PoolTvlChartContainer.tsx

@@ -1,7 +1,10 @@
-import { getPoolTvlChartData } from '../../data';
+import { cache } from 'react';
+import { getPoolTvlChartData as getData } from '../../data';
 import { AreaChartContainerClient } from './client';
 import { PoolChartPropsType } from './types';
 
+const getPoolTvlChartData = cache(getData);
+
 export default async function PoolTvlChartContainer(props: PoolChartPropsType) {
   const { poolAddress, numDatesFromStart, startingEpoch } = props;
 

apps/hubble-stats/containers/charts/PoolTwlChartContainer.tsx

@@ -1,7 +1,10 @@
-import { getPoolTwlChartData } from '../../data';
+import { cache } from 'react';
+import { getPoolTwlChartData as getData } from '../../data';
 import { AreaChartContainerClient } from './client';
 import { PoolChartPropsType } from './types';
 
+const getPoolTwlChartData = cache(getData);
+
 export default async function PoolTwlChartContainer(props: PoolChartPropsType) {
   const { poolAddress, numDatesFromStart, startingEpoch } = props;
 

apps/hubble-stats/containers/charts/PoolVolumeChartContainer.tsx

@@ -1,7 +1,10 @@
-import { getPoolVolumeChartData } from '../../data';
+import { cache } from 'react';
+import { getPoolVolumeChartData as getData } from '../../data';
 import { VolumeChartContainerClient } from './client';
 import { PoolChartPropsType } from './types';
 
+const getPoolVolumeChartData = cache(getData);
+
 export default async function PoolVolumeChartContainer(
   props: PoolChartPropsType
 ) {

apps/hubble-stats/containers/charts/PoolWrappingFeesChartContainer.tsx

@@ -1,7 +1,10 @@
-import { getPoolWrappingFeesChartData } from '../../data';
+import { cache } from 'react';
+import { getPoolWrappingFeesChartData as getData } from '../../data';
 import { BarChartContainerClient } from './client';
 import { PoolChartPropsType } from './types';
 
+const getPoolWrappingFeesChartData = cache(getData);
+
 export default async function PoolWrappingFeesChartContainer(
   props: PoolChartPropsType
 ) {

apps/hubble-stats/data/shieldedTables/getShieldedAssetsTableData.ts

@@ -5,22 +5,14 @@ import { EPOCH_DAY_INTERVAL, getDateFromEpoch } from '../../utils';
 import { getDepositInTimeRangeByVAnchor } from '../utils';
 import { VANCHORS_MAP, VANCHOR_ADDRESSES } from '../../constants';
 import { ShieldedAssetType } from '../../components/ShieldedAssetsTable/types';
+import { SubgraphUrlType } from '../../types';
 
-const getAssetInfoFromVAnchor = async (
+const getWithdrawals24h = async (
+  supportedSubgraphs: Array<SubgraphUrlType>,
   vAnchorAddress: string,
+  tokenSymbol: string,
   epochNow: number
 ) => {
-  const vanchor = VANCHORS_MAP[vAnchorAddress];
-  const { fungibleTokenSymbol: tokenSymbol, supportedSubgraphs } = vanchor;
-
-  const deposits24h = await getDepositInTimeRangeByVAnchor(
-    vAnchorAddress,
-    epochNow - EPOCH_DAY_INTERVAL,
-    epochNow,
-    supportedSubgraphs
-  );
-
-  let withdrawals24h: number | undefined;
   try {
     const withdrawalVAnchorsByChainsData =
       await vAnchorClient.Withdrawal.GetVAnchorWithdrawalByChainsAndByToken15MinsInterval(
@@ -31,7 +23,7 @@ const getAssetInfoFromVAnchor = async (
         getDateFromEpoch(epochNow)
       );
 
-    withdrawals24h = withdrawalVAnchorsByChainsData.reduce(
+    return withdrawalVAnchorsByChainsData.reduce(
       (withdrawal, vAnchorsByChain) => {
         const withdrawalVAnchorsByChain = vAnchorsByChain.reduce(
           (withdrawalByChain, vAnchorWithdrawal) =>
@@ -44,8 +36,31 @@ const getAssetInfoFromVAnchor = async (
       0
     );
   } catch {
-    withdrawals24h = undefined;
+    return;
   }
+};
+
+const getAssetInfoFromVAnchor = async (
+  vAnchorAddress: string,
+  epochNow: number
+) => {
+  const vanchor = VANCHORS_MAP[vAnchorAddress];
+  const { fungibleTokenSymbol: tokenSymbol, supportedSubgraphs } = vanchor;
+
+  const [deposits24h, withdrawals24h] = await Promise.all([
+    getDepositInTimeRangeByVAnchor(
+      vAnchorAddress,
+      epochNow - EPOCH_DAY_INTERVAL,
+      epochNow,
+      supportedSubgraphs
+    ),
+    getWithdrawals24h(
+      supportedSubgraphs,
+      vAnchorAddress,
+      tokenSymbol,
+      epochNow
+    ),
+  ]);
 
   return {
     address: vanchor.fungibleTokenAddress,

apps/hubble-stats/data/shieldedTables/getShieldedPoolsTableData.ts

@@ -12,13 +12,15 @@ const getPoolInfoFromVAnchor = async (
   // plus one for fungible token
   const tokenNum = vAnchor.composition.length + 1;
 
-  const deposits24h = await getDepositInTimeRangeByVAnchor(
-    vAnchorAddress,
-    epochNow - EPOCH_DAY_INTERVAL,
-    epochNow,
-    vAnchor.supportedSubgraphs
-  );
-  const tvl = await getTvlByVAnchor(vAnchorAddress, vAnchor.supportedSubgraphs);
+  const [deposits24h, tvl] = await Promise.all([
+    getDepositInTimeRangeByVAnchor(
+      vAnchorAddress,
+      epochNow - EPOCH_DAY_INTERVAL,
+      epochNow,
+      vAnchor.supportedSubgraphs
+    ),
+    getTvlByVAnchor(vAnchorAddress, vAnchor.supportedSubgraphs),
+  ]);
 
   return {
     address: vAnchorAddress,

package.json

@@ -211,7 +211,7 @@
     "@webb-tools/test-utils": "0.1.4-126",
     "@webb-tools/tokens": "1.0.8",
     "@webb-tools/utils": "0.5.39",
-    "@webb-tools/vanchor-client": "0.1.25",
+    "@webb-tools/vanchor-client": "0.1.26",
     "@webb-tools/wasm-utils": "0.1.4-126",
     "autoprefixer": "10.4.14",
     "babel-jest": "29.5.0",

yarn.lock

@@ -10945,10 +10945,10 @@
     ethers "5.7.0"
     snarkjs "^0.6.10"
 
-"@webb-tools/[email protected].25":
-  version "0.1.25"
-  resolved "https://registry.yarnpkg.com/@webb-tools/vanchor-client/-/vanchor-client-0.1.25.tgz#23d09f39f665231bc6604752d40bdb07a74bd3fd"
-  integrity sha512-vq6Se8LgO/Tr6XK0pvyn7cCW27GFVn6GNO83WnULjm8uyKAjxeFscb4SONn765g9WDYkE9zEANZJSaVWX1FYrw==
+"@webb-tools/[email protected].26":
+  version "0.1.26"
+  resolved "https://registry.yarnpkg.com/@webb-tools/vanchor-client/-/vanchor-client-0.1.26.tgz#e03b0c3b33e1e4bab3ce9a47bfad00adc873ed0b"
+  integrity sha512-XpBJDJLE9JsMoIrlpUH8ExxA0ntaulXh3HhyIOLrVWIkwv3+Eb/O2QfJ7IAeoZ2/wl+qw/8VMtq5Z0oc924uHw==
   dependencies:
     "@graphprotocol/client-cli" "3.0.0"
     ts-node "10.9.1"