From 58019ed8cc82ce204b538e43995fccaa64a1d3cf Mon Sep 17 00:00:00 2001
From: pkxro <solponomarev@gmail.com>
Date: Sat, 9 Nov 2024 22:25:46 -0500
Subject: [PATCH] nit: add warning of ping api issues (#401)

- The network is humming and seeing 0 to 1 slot latency for tx inclusion
but there is an issue with statistic reporting. Adding disclaimer until
the issue is resolved

---------

Co-authored-by: Noah Gundotra <noah@gundotra.org>
---
 app/components/LiveTransactionStatsCard.tsx | 18 +++++++++++++++++-
 app/page.tsx                                |  5 ++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/components/LiveTransactionStatsCard.tsx b/app/components/LiveTransactionStatsCard.tsx
index 07aa9ed4..db3ed4f8 100644
--- a/app/components/LiveTransactionStatsCard.tsx
+++ b/app/components/LiveTransactionStatsCard.tsx
@@ -39,7 +39,19 @@ export function LiveTransactionStatsCard() {
             <div className="card-header">
                 <h4 className="card-header-title">Live Transaction Stats</h4>
             </div>
+
             <TpsCardBody series={series} setSeries={setSeries} />
+            <div className="alert alert-warning m-2" role="alert">
+                Note: We are aware of an issue with ping statistic reporting. Ping statistics may not reflect actual
+                network performance. Please see{' '}
+                <a
+                    href="https://www.validators.app/ping-thing?locale=en&network=mainnet"
+                    className="text-white text-decoration-underline"
+                >
+                    validators.app
+                </a>{' '}
+                for more information.
+            </div>
             <PingStatsCardBody series={series} setSeries={setSeries} />
         </div>
     );
@@ -273,7 +285,11 @@ function PingStatsCardBody({ series, setSeries }: { series: Series; setSeries: S
         return <PingStatsNotReady error={pingInfo.status === PingStatus.Error} retry={pingInfo.retry} />;
     }
 
-    return <PingBarChart pingInfo={pingInfo} series={series} setSeries={setSeries} />;
+    return (
+        <>
+            <PingBarChart pingInfo={pingInfo} series={series} setSeries={setSeries} />
+        </>
+    );
 }
 
 type StatsNotReadyProps = { error: boolean; retry?: () => void };
diff --git a/app/page.tsx b/app/page.tsx
index 4a74b565..60023177 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -71,7 +71,10 @@ function StakingComponent() {
 
     const activeStake = React.useMemo(() => {
         if (voteAccounts && delinquentStake) {
-            return voteAccounts.current.reduce((prev, current) => prev + current.activatedStake, BigInt(0)) + delinquentStake;
+            return (
+                voteAccounts.current.reduce((prev, current) => prev + current.activatedStake, BigInt(0)) +
+                delinquentStake
+            );
         }
     }, [voteAccounts, delinquentStake]);