Merge pull request #207 from 1Hive/fix-fallback-httpprovider-when-wro…

…ng-network

Reload on network change + Fallaback to http provider when wrong chainId

packages/react-app/src/networks.ts

@@ -32,7 +32,7 @@ export const networks = {
     governAddress: '0xa0F5e6759d49063040eAB18c1B0E684C45a4B4cA',
     governQueueAddress: '0x19B918802eA9C71c500Ca481917F383f3992cDB0',
     celesteAddress: '0xdd58ebed3c36460939285a92807f90e3d3a26789',
-    httpProvider: 'https://rinkeby.infura.io/v3/',
+    httpProvider: 'https://rinkeby.infura.io/v3',
     defaultToken: TOKENS.HoneyTest,
     nativeToken: TOKENS.Ether,
     isTestNetwork: true,
@@ -49,7 +49,7 @@ export const networks = {
     defaultEthNode: 'https://xdai.poanetwork.dev/',
     questFactory: HardhatDeployement[100]?.xdai.contracts.QuestFactory.address,
     govern: '', // TODO : When govern will be on xDai
-    httpProvider: 'https://xdai.poanetwork.dev/',
+    httpProvider: 'https://xdai.poanetwork.dev',
     defaultToken: TOKENS.Honey,
     nativeToken: TOKENS.xDAI,
     stableToken: TOKENS.xDAI,

packages/react-app/src/utils/web3.utils.ts

@@ -11,6 +11,8 @@ import { wrapError } from './errors.util';
 import { Logger } from './logger';
 
 const DEFAULT_LOCAL_CHAIN = 'private';
+const ethOrWeb = (window as any).ethereum ?? (window as any).web3?.currentProvider;
+ethOrWeb?.on('chainChanged', (_chainId: string) => window.location.reload());
 
 export function getWeb3(): Web3 {
   let ethereum: any = null;
@@ -158,13 +160,18 @@ export function fromBigNumber(bigNumber: BigNumber | string, decimals: number |
 }
 
 export function getDefaultProvider() {
-  const { httpProvider } = getNetwork();
-  let ethOrWeb = (window as any).ethereum ?? (window as any).web3;
-  if (!ethOrWeb) {
-    ethOrWeb = new Web3.providers.HttpProvider(`${httpProvider}/${env('INFURA_API_KEY')}`);
+  const { httpProvider, chainId: expectedChainId } = getNetwork();
+  let provider = ethOrWeb;
+  if (!provider || +provider.chainId !== +expectedChainId) {
+    const infuraId = env('INFURA_API_KEY');
+    if (infuraId) {
+      provider = new Web3.providers.HttpProvider(`${httpProvider}/${infuraId}`);
+    } else {
+      throw new Error(`No http provider key provided in env`);
+    }
   }
 
-  return ethOrWeb && new ethersUtil.providers.Web3Provider(ethOrWeb);
+  return provider && new ethersUtil.providers.Web3Provider(provider);
 }
 
 // Re-export some web3-utils functions

packages/react-app/template.env

@@ -0,0 +1 @@
+REACT_APP_INFURA_API_KEY=[INFURA_ID]