feat(PE-5031): Block network calls when no network and show banner

src/components/layout/Navbar/Navbar.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useRegistrationState } from '../../../state/contexts/RegistrationState';
@@ -8,12 +9,36 @@ import './styles.css';
 
 function NavBar() {
   const [, dispatchRegisterState] = useRegistrationState();
+  const [online, setOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    window.addEventListener('online', () => setOnline(true));
+    window.addEventListener('offline', () => setOnline(false));
+    return () => {
+      window.removeEventListener('online', () => setOnline(true));
+      window.removeEventListener('offline', () => setOnline(false));
+    };
+  }, []);
 
   return (
     <div
       className="flex flex-column"
       style={{ gap: '0px', position: 'relative' }}
     >
+      {online ? null : (
+        <div
+          className="flex flex-row center"
+          style={{
+            backgroundColor: 'var(--accent)',
+            padding: '10px',
+          }}
+        >
+          <span className="text black bold">
+            We can&apos;t connect to the Internet. Please check your connection
+            and try again.
+          </span>
+        </div>
+      )}
       <div className="navbar" style={{ position: 'relative' }}>
         <div className="flex-row flex-left" style={{ width: 'fit-content' }}>
           <Link

src/components/layout/Notifications/Notifications.tsx

@@ -1,4 +1,5 @@
 import * as Sentry from '@sentry/react';
+import { NoNetworkError } from '@src/utils/errors';
 import { notification } from 'antd';
 import { ArgsProps } from 'antd/es/notification/interface';
 import { useEffect } from 'react';
@@ -24,6 +25,10 @@ export default function Notifications() {
       console.debug('Error sent to sentry:', error, sentryID);
     }
 
+    if (error instanceof NoNetworkError) {
+      return;
+    }
+
     showNotification({
       type: 'error',
       title: error.name,

src/services/ArweaveServiceController.ts

@@ -0,0 +1,40 @@
+import { NoNetworkError } from '@src/utils/errors';
+
+import { ArweaveCompositeDataProvider } from './arweave/ArweaveCompositeDataProvider';
+
+class ArweaveServiceController {
+  private _provider: ArweaveCompositeDataProvider;
+
+  constructor(provider: ArweaveCompositeDataProvider) {
+    this._provider = provider;
+    return new Proxy(this, this._methodInterceptor());
+  }
+
+  private _methodInterceptor(): ProxyHandler<ArweaveServiceController> {
+    return {
+      get: (target, prop: string | symbol, receiver: any) => {
+        const origMethod = (target._provider as any)[prop];
+        if (typeof origMethod === 'function') {
+          return (...args: any[]) => {
+            // Call the validation function
+            this._validateMethodAccess();
+
+            // Proceed with the original method
+            return origMethod.apply(target._provider, args);
+          };
+        }
+        return Reflect.get(target._provider, prop, receiver);
+      },
+    };
+  }
+
+  private _validateMethodAccess() {
+    // TODO: add gateway and arns service validation based on health checks
+
+    if (!navigator.onLine) {
+      throw new NoNetworkError('No Network Connection, please try again later');
+    }
+  }
+}
+
+export default ArweaveServiceController;

src/state/actions.ts

@@ -1,3 +1,4 @@
+import ArweaveServiceController from '@src/services/ArweaveServiceController';
 import { ArweaveWalletConnector } from '@src/types';
 import Arweave from 'arweave';
 import { Dispatch } from 'react';
@@ -28,11 +29,13 @@ export async function dispatchNewGateway(
       arweave: arweaveDataProvider,
     });
 
-    const provider = new ArweaveCompositeDataProvider(
-      arweaveDataProvider,
-      warpDataProvider,
-      contractCacheProviders,
-    );
+    const provider = new ArweaveServiceController(
+      new ArweaveCompositeDataProvider(
+        arweaveDataProvider,
+        warpDataProvider,
+        contractCacheProviders,
+      ),
+    ) as any as ArweaveCompositeDataProvider;
     const blockHeight = await provider.getCurrentBlockHeight();
     dispatch({
       type: 'setBlockHeight',

src/state/contexts/GlobalState.tsx

@@ -1,3 +1,4 @@
+import ArweaveServiceController from '@src/services/ArweaveServiceController';
 import { ArConnectWalletConnector } from '@src/services/wallets';
 import React, {
   Dispatch,
@@ -48,11 +49,13 @@ const initialState: GlobalState = {
   gateway: 'ar-io.dev',
   blockHeight: undefined,
   lastBlockUpdateTimestamp: undefined,
-  arweaveDataProvider: new ArweaveCompositeDataProvider(
-    defaultArweave,
-    defaultWarp,
-    defaultContractCache,
-  ),
+  arweaveDataProvider: new ArweaveServiceController(
+    new ArweaveCompositeDataProvider(
+      defaultArweave,
+      defaultWarp,
+      defaultContractCache,
+    ),
+  ) as any as ArweaveCompositeDataProvider,
 };
 
 const GlobalStateContext = createContext<[GlobalState, Dispatch<GlobalAction>]>(

src/utils/errors.ts

@@ -4,3 +4,10 @@ export class ContractInteractionError extends Error {
     this.name = 'Contract Interaction Error';
   }
 }
+
+export class NoNetworkError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'No Network Detected';
+  }
+}