Merge pull request #101 from ar-io/PE-7022-add-ao-network-performance…

…-degradation-warning

PE-7022: add-ao-network-performance-degradation-warning

src/components/GlobalDataProvider.tsx

@@ -1,31 +1,32 @@
+import { AO_CU_URL, log } from '@src/constants';
 import { useEffectOnce } from '@src/hooks/useEffectOnce';
 import { useGlobalState } from '@src/store';
 import { cleanupDbCache } from '@src/store/db';
 import { ReactElement, useEffect } from 'react';
 
-const GlobalDataProvider = ({
-  children,
-}: {
-  children: ReactElement;
-}) => {
-  const twoMinutes = 120000;
+// Time to wait in ms to check if the AO CU URL is congested
+const CONGESTION_WINDOW = 5000;
+const TWO_MINUTES = 120000;
+
+const GlobalDataProvider = ({ children }: { children: ReactElement }) => {
 
   const setBlockHeight = useGlobalState((state) => state.setBlockHeight);
   const setCurrentEpoch = useGlobalState((state) => state.setCurrentEpoch);
   const setTicker = useGlobalState((state) => state.setTicker);
   const arweave = useGlobalState((state) => state.arweave);
   const arioReadSDK = useGlobalState((state) => state.arIOReadSDK);
+  const setAoCongested = useGlobalState((state) => state.setAoCongested);
 
   useEffectOnce(() => {
     const update = async () => {
-      // perform this first as retrieving the current epic takes some time 
-      const {Ticker} = await arioReadSDK.getInfo();
+      // perform this first as retrieving the current epic takes some time
+      const { Ticker } = await arioReadSDK.getInfo();
       setTicker(Ticker);
 
       const currentEpoch = await arioReadSDK.getCurrentEpoch();
       setCurrentEpoch(currentEpoch);
 
-      if(currentEpoch?.epochIndex) {
+      if (currentEpoch?.epochIndex) {
         cleanupDbCache(currentEpoch.epochIndex);
       }
     };
@@ -34,15 +35,42 @@ const GlobalDataProvider = ({
   });
 
   useEffect(() => {
+    // Block Height Updater
     const updateBlockHeight = async () => {
       const blockHeight = await (await arweave.blocks.getCurrent()).height;
       setBlockHeight(blockHeight);
     };
     updateBlockHeight();
-    const interval = setInterval(updateBlockHeight, twoMinutes);
+    const interval = setInterval(updateBlockHeight, TWO_MINUTES);
+
+    // AO congestion checker: Checks CU URL every 30 seconds and if it takes longer than 5 seconds will
+    // dispatch a warning to the user
+
+    const checkAoCongestion = () => {
+      const startTime = Date.now();
+      fetch(AO_CU_URL, { method: 'HEAD' })
+        .then((res) => {
+          const endTime = Date.now();
+          if (!res.ok) {
+            log.error('AO CU URL is down');
+            setAoCongested(true);
+          } else if (endTime - startTime > CONGESTION_WINDOW) {
+            setAoCongested(true);
+          }
+        })
+        .catch((error) => {
+          log.error('AO CU URL is down', error);
+          setAoCongested(true);
+        });
+    };
+
+    checkAoCongestion();
+    const congestionInterval = setInterval(checkAoCongestion, 30000);
 
     return () => {
       clearInterval(interval);
+      clearInterval(congestionInterval);
+      setAoCongested(false);
     };
   });
 

src/components/NetworkStatusBanner.tsx

@@ -0,0 +1,45 @@
+import { useGlobalState } from '@src/store';
+import { useEffect, useState } from 'react';
+
+function NetworkStatusBanner() {
+  const [online, setOnline] = useState(navigator.onLine);
+  const aoCongested = useGlobalState((state) => state.aoCongested);
+
+  const [statusMessage, setStatusMessage] = useState('');
+
+  useEffect(() => {
+    window.addEventListener('online', () => setOnline(true));
+    window.addEventListener('offline', () => setOnline(false));
+
+    // Cleanup listeners
+    return () => {
+      window.removeEventListener('online', () => setOnline(true));
+      window.removeEventListener('offline', () => setOnline(false));
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!online) {
+      setStatusMessage(`We can't connect to the Internet. Please check your connection
+            and try again.`);
+    } else if (aoCongested) {
+      setStatusMessage(
+        'The AO network is experiencing congestion, load times may be longer than usual.',
+      );
+    } else {
+      setStatusMessage('');
+    }
+  }, [online, aoCongested]);
+
+  return (
+    <>
+      {statusMessage && (
+        <div className="flex flex-row items-center justify-center bg-warning p-2 text-sm font-bold text-containerL0">
+          <span>{statusMessage}</span>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default NetworkStatusBanner;

src/layout/AppRouterLayout.tsx

@@ -1,10 +1,12 @@
+import NetworkStatusBanner from '@src/components/NetworkStatusBanner';
 import { Toaster } from 'react-hot-toast';
 import { Outlet } from 'react-router-dom';
 import Sidebar from './Sidebar';
 
 function AppRouterLayout() {
   return (
     <div className="h-screen w-screen overflow-x-auto overflow-y-hidden scrollbar dark:bg-grey-1000 dark:text-grey-100">
+      <NetworkStatusBanner />
       <div className="flex">
         <Sidebar />
         <div className="w-full grow">

src/layout/Sidebar.tsx

@@ -54,10 +54,7 @@ const ROUTES_SECONDARY = [
 const FORMATTED_CHANGELOG = changeLog
   .substring(changeLog.indexOf('## [Unreleased]') + 16)
   .trim()
-  .replace(/\[([\w.]+)\]/g, (match, text) => {
-    console.log(match, text);
-    return `v${text}`;
-  });
+  .replace(/\[([\w.]+)\]/g, (match, text) => `v${text}`);
 
 const Sidebar = () => {
   const location = useLocation();
@@ -132,7 +129,7 @@ const Sidebar = () => {
         >
           {sidebarOpen && (
             <button
-              className="grow pl-3 text-xs text-low/50 text-left"
+              className="grow pl-3 text-left text-xs text-low/50"
               onClick={() => setShowChangeLogModal(true)}
             >
               v{process.env.npm_package_version}-

src/pages/Gateways/index.tsx

@@ -199,7 +199,7 @@ const Gateways = () => {
       <Header />
       <Banner />
       <div className="mb-8">
-        <div className="flex w-full items-center rounded-t-xl border border-grey-600 py-[0.9375rem] pl-6 pr-[0.8125rem] bg-containerL3">
+        <div className="flex w-full items-center rounded-t-xl border border-grey-600 bg-containerL3 py-[0.9375rem] pl-6 pr-[0.8125rem]">
           <div className="grow text-sm text-mid">Gateways</div>
         </div>
         <TableView

src/store/index.ts

@@ -36,6 +36,7 @@ export type GlobalState = {
   };
   walletStateInitialized: boolean;
   ticker: string;
+  aoCongested: boolean;
 };
 
 export type GlobalStateActions = {
@@ -50,6 +51,7 @@ export type GlobalStateActions = {
   setBalances(ar: number, io: number): void;
   setWalletStateInitialized: (initialized: boolean) => void;
   setTicker: (ticker: string) => void;
+  setAoCongested: (congested: boolean) => void;
 };
 
 export const initialGlobalState: GlobalState = {
@@ -73,6 +75,7 @@ export const initialGlobalState: GlobalState = {
   },
   walletStateInitialized: false,
   ticker: 'tIO',
+  aoCongested: false,
 };
 export class GlobalStateActionBase implements GlobalStateActions {
   constructor(
@@ -115,6 +118,10 @@ export class GlobalStateActionBase implements GlobalStateActions {
   setTicker = (ticker: string) => {
     this.set({ ticker });
   };
+
+  setAoCongested = (congested: boolean) => {
+    this.set({ aoCongested: congested });
+  };
 }
 
 export interface GlobalStateInterface extends GlobalState, GlobalStateActions {}

tailwind.config.js

@@ -41,6 +41,7 @@ export default {
       containerL3: '#1E1E24',
       'streak-up': '#3DB7C2',
       'text-red': '#DB4354',
+      warning: '#ffb938',
     },
   },
   plugins: [