feat(explorer): reenable solana ping widget (#23443)

explorer/src/pages/ClusterStatsPage.tsx

@@ -18,6 +18,7 @@ import { useVoteAccounts } from "providers/accounts/vote-accounts";
 import { CoingeckoStatus, useCoinGecko } from "utils/coingecko";
 import { Epoch } from "components/common/Epoch";
 import { TimestampToggle } from "components/common/TimestampToggle";
+import { SolanaPingCard } from "components/SolanaPingCard";
 
 const CLUSTER_STATS_TIMEOUT = 5000;
 
@@ -36,7 +37,7 @@ export function ClusterStatsPage() {
         <StatsCardBody />
       </div>
       <TpsCard />
-      {/* <SolanaPingCard /> */}
+      <SolanaPingCard />
     </div>
   );
 }

explorer/src/providers/stats/SolanaPingProvider.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Cluster, clusterSlug, useCluster } from "providers/cluster";
 import { fetch } from "cross-fetch";
+import { useStatsProvider } from "providers/stats/solanaClusterStats";
 
 const FETCH_PING_INTERVAL = 60 * 1000;
 
@@ -33,7 +34,6 @@ export type PingInfo = {
 
 export enum PingStatus {
   Loading,
-  Refreshing,
   Ready,
   Error,
 }
@@ -76,11 +76,16 @@ function downsample(points: PingInfo[], bucketSize: number): PingInfo[] {
 
 export function SolanaPingProvider({ children }: Props) {
   const { cluster } = useCluster();
+  const { active } = useStatsProvider();
   const [rollup, setRollup] = React.useState<PingRollupInfo | undefined>({
     status: PingStatus.Loading,
   });
 
   React.useEffect(() => {
+    if (!active) {
+      return;
+    }
+
     const url = getPingUrl(cluster);
 
     setRollup({
@@ -137,17 +142,13 @@ export function SolanaPingProvider({ children }: Props) {
     };
 
     const fetchPingInterval = setInterval(() => {
-      setRollup({
-        status: PingStatus.Refreshing,
-      });
-
       fetchPingMetrics();
     }, FETCH_PING_INTERVAL);
     fetchPingMetrics();
     return () => {
       clearInterval(fetchPingInterval);
     };
-  }, [cluster]);
+  }, [cluster, active]);
 
   return <PingContext.Provider value={rollup}>{children}</PingContext.Provider>;
 }

explorer/src/providers/stats/index.tsx

@@ -1,7 +1,12 @@
+import { SolanaPingProvider } from "providers/stats/SolanaPingProvider";
 import React from "react";
 import { SolanaClusterStatsProvider } from "./solanaClusterStats";
 
 type Props = { children: React.ReactNode };
 export function StatsProvider({ children }: Props) {
-  return <SolanaClusterStatsProvider>{children}</SolanaClusterStatsProvider>;
+  return (
+    <SolanaClusterStatsProvider>
+      <SolanaPingProvider>{children}</SolanaPingProvider>
+    </SolanaClusterStatsProvider>
+  );
 }