diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx index 772c2ad3e..ca0023eb8 100644 --- a/packages/react-app/src/App.jsx +++ b/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(); diff --git a/packages/react-app/src/constants.js b/packages/react-app/src/constants.js index 8c388ee9e..3ffb27e6b 100644 --- a/packages/react-app/src/constants.js +++ b/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"; diff --git a/packages/react-app/src/hooks/index.js b/packages/react-app/src/hooks/index.js index 3f4327435..e0a511c78 100644 --- a/packages/react-app/src/hooks/index.js +++ b/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"; diff --git a/packages/react-app/src/hooks/useStaticJsonRPC.js b/packages/react-app/src/hooks/useStaticJsonRPC.js new file mode 100644 index 000000000..71e7e1215 --- /dev/null +++ b/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; +}