add useStaticJsonRpc hook, instead of using only one rpc url

packages/react-app/src/App.jsx

@@ -23,9 +23,17 @@ import {
   Wallet,
   WalletConnectTransactionDisplay,
 } from "./components";
-import { INFURA_ID, NETWORK, NETWORKS } from "./constants";
+import { ALCHEMY_KEY, INFURA_ID, NETWORK, NETWORKS } from "./constants";
 import { Transactor } from "./helpers";
-import { useBalance, useExchangePrice, useGasPrice, useLocalStorage, usePoller, useUserProvider } from "./hooks";
+import {
+  useBalance,
+  useExchangePrice,
+  useGasPrice,
+  useLocalStorage,
+  usePoller,
+  useStaticJsonRPC,
+  useUserProvider,
+} from "./hooks";
 
 import WalletConnect from "@walletconnect/client";
 
@@ -62,14 +70,21 @@ if (!targetNetwork) {
 // 😬 Sorry for all the console logging
 const DEBUG = false;
 
-// 🛰 providers
 if (DEBUG) console.log("📡 Connecting to Mainnet Ethereum");
+
+// 🛰 providers
+const providers = [
+  "https://rpc.scaffoldeth.io:48544",
+  "https://eth-mainnet.gateway.pokt.network/v1/lb/611156b4a585a20035148406",
+  `https://eth-mainnet.alchemyapi.io/v2/${ALCHEMY_KEY}`,
+];
+
 // const mainnetProvider = getDefaultProvider("mainnet", { infura: INFURA_ID, etherscan: ETHERSCAN_KEY, quorum: 1 });
 // const mainnetProvider = new InfuraProvider("mainnet",INFURA_ID);
 //
 // attempt to connect to our own scaffold eth rpc and if that fails fall back to infura...
 // Using StaticJsonRpcProvider as the chainId won't change see https://github.com/ethers-io/ethers.js/issues/901
-const scaffoldEthProvider = new StaticJsonRpcProvider("https://rpc.scaffoldeth.io:48544");
+// const scaffoldEthProvider = new StaticJsonRpcProvider("https://rpc.scaffoldeth.io:48544");
 //const mainnetInfura = new StaticJsonRpcProvider("https://mainnet.infura.io/v3/" + INFURA_ID);
 // ( ⚠️ Getting "failed to meet quorum" errors? Check your INFURA_I
 
@@ -78,7 +93,7 @@ const localProviderUrl = targetNetwork.rpcUrl;
 // as you deploy to other networks you can set REACT_APP_PROVIDER=https://dai.poa.network in packages/react-app/.env
 const localProviderUrlFromEnv = process.env.REACT_APP_PROVIDER ? process.env.REACT_APP_PROVIDER : localProviderUrl;
 if (DEBUG) console.log("🏠 Connecting to provider:", localProviderUrlFromEnv);
-let localProvider = new StaticJsonRpcProvider(localProviderUrlFromEnv);
+// let localProvider = new StaticJsonRpcProvider(localProviderUrlFromEnv);
 
 // 🔭 block explorer URL
 const blockExplorer = targetNetwork.blockExplorer;
@@ -166,7 +181,8 @@ function App(props) {
     }
   };
 
-  const mainnetProvider = scaffoldEthProvider; //scaffoldEthProvider && scaffoldEthProvider._network ?  : mainnetInfura;
+  const localProvider = useStaticJsonRPC([localProviderUrlFromEnv]);
+  const mainnetProvider = useStaticJsonRPC(providers, providers[0]); //scaffoldEthProvider && scaffoldEthProvider._network ?  : mainnetInfura;
 
   const [injectedProvider, setInjectedProvider] = useState();
 

packages/react-app/src/constants.js

@@ -7,6 +7,8 @@ export const ETHERSCAN_KEY = "PSW8C433Q667DVEX5BCRMGNAH9FSGFZ7Q8";
 // BLOCKNATIVE ID FOR Notify.js:
 export const BLOCKNATIVE_DAPPID = "0b58206a-f3c0-4701-a62f-73c7243e8c77";
 
+export const ALCHEMY_KEY = "oKxs-03sij-U_N0iOlrSsZFr29-IqbuF";
+
 // EXTERNAL CONTRACTS
 
 export const DAI_ADDRESS = "0x6B175474E89094C44Da98b954EedeAC495271d0F";

packages/react-app/src/hooks/index.js

@@ -16,3 +16,4 @@ export { default as usePoller } from "./Poller";
 export { default as useResolveName } from "./ResolveName";
 export { default as useTokenList } from "./TokenList";
 export { default as useUserProvider } from "./UserProvider";
+export { default as useStaticJsonRPC } from "./useStaticJsonRPC";

packages/react-app/src/hooks/useStaticJsonRPC.js

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from "react";
+import { ethers } from "ethers";
+
+const createProvider = async url => {
+  const p = new ethers.providers.StaticJsonRpcProvider(url);
+
+  await p.ready;
+
+  return p;
+};
+
+export default function useStaticJsonRPC(urlArray) {
+  const [provider, setProvider] = useState(() => new ethers.providers.StaticJsonRpcProvider(urlArray[0]));
+
+  const handleProviders = useCallback(async () => {
+    try {
+      const p = await Promise.race(urlArray.map(createProvider));
+      const _p = await p;
+
+      setProvider(_p);
+    } catch (error) {
+      // todo: show notification error about provider issues
+      console.log(error);
+    }
+  }, [urlArray]);
+
+  useEffect(() => {
+    handleProviders();
+    // eslint-disable-next-line
+  }, [JSON.stringify(urlArray)]);
+
+  return provider;
+}