manual input infura id

package-lock.json

@@ -3595,6 +3595,11 @@
         "@ethersproject/strings": "^5.1.0"
       }
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -12331,6 +12336,32 @@
       "requires": {
         "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
         "ethereumjs-util": "^5.1.1"
+      },
+      "dependencies": {
+        "ethereumjs-abi": {
+          "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#ee3994657fa7a427238e6ba92a84d0b529bbcde0",
+          "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
+          "requires": {
+            "bn.js": "^4.11.8",
+            "ethereumjs-util": "^6.0.0"
+          },
+          "dependencies": {
+            "ethereumjs-util": {
+              "version": "6.2.1",
+              "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-6.2.1.tgz",
+              "integrity": "sha512-W2Ktez4L01Vexijrm5EB6w7dg4n/TgpoYU4avuT5T3Vmnw/eCRtiBrJfQYS/DCSvDIOLn2k57GcHdeBcgVxAqw==",
+              "requires": {
+                "@types/bn.js": "^4.11.3",
+                "bn.js": "^4.11.0",
+                "create-hash": "^1.1.2",
+                "elliptic": "^6.5.2",
+                "ethereum-cryptography": "^0.1.3",
+                "ethjs-util": "0.1.6",
+                "rlp": "^2.2.3"
+              }
+            }
+          }
+        }
       }
     },
     "eth-tx-summary": {
@@ -12484,6 +12515,7 @@
     "ethereumjs-abi": {
       "version": "0.6.8",
       "resolved": "git+https://github.com/ethereumjs/ethereumjs-abi.git#1ce6a1d64235fabe2aaf827fd606def55693508f",
+      "optional": true,
       "requires": {
         "bn.js": "^4.11.8",
         "ethereumjs-util": "^6.0.0"
@@ -12493,6 +12525,7 @@
           "version": "6.2.1",
           "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-6.2.1.tgz",
           "integrity": "sha512-W2Ktez4L01Vexijrm5EB6w7dg4n/TgpoYU4avuT5T3Vmnw/eCRtiBrJfQYS/DCSvDIOLn2k57GcHdeBcgVxAqw==",
+          "optional": true,
           "requires": {
             "@types/bn.js": "^4.11.3",
             "bn.js": "^4.11.0",
@@ -21014,7 +21047,7 @@
               }
             },
             "ethereumjs-abi": {
-              "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#1a27c59c15ab1e95ee8e5c4ed6ad814c49cc439e",
+              "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#ee3994657fa7a427238e6ba92a84d0b529bbcde0",
               "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
               "requires": {
                 "bn.js": "^4.11.8",

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import './App.css';
-import { RemixClient } from './RemixClient'
+import '@fortawesome/fontawesome-free/css/all.css'
+import { RemixClient, INFURA_ID_KEY } from './RemixClient'
 const p = new RemixClient()
 function App() {
 
@@ -22,7 +23,6 @@ function App() {
     for(const account of accounts){
       document.getElementById('accounts').innerHTML += `<li className="list-group-item">${account}</li>`
     }
-    
   })
 
   p.internalEvents.on('chainChanged', (chain) => {
@@ -38,6 +38,10 @@ function App() {
   return (
     <div className="App">
       <div className="btn-group-vertical mt-5 w-25" role="group">
+        <div class="text-center w-100">
+          <i class="fas fa-info-circle mr-2 bg-light" title="Wallet connect reuire an infura id in order to make request to the network."/><a target="_blank" href="https://infura.io/dashboard/ethereum">infura settings</a>
+          <input onChange={(e) => { localStorage.setItem(INFURA_ID_KEY, e.target.value)}} id="input-infura-id" placeholder="Infura Id" className="mt-2 mb-2 ml-2"></input>          
+        </div>
         <button id="connectbtn" type="button" onClick={openModal} className="btn btn-primary">Connect to a wallet</button>
         <button id="disconnectbtn" type="button" onClick={disconnect} className="btn btn-primary mt-2">Disconnect</button>
       </div>

src/RemixClient.js

@@ -7,11 +7,12 @@ import {
 import WalletConnectProvider from "@walletconnect/web3-provider";
 import Torus from "@toruslabs/torus-embed";
 import Authereum from "authereum";
-import Web3Modal from "web3modal";
+import Web3Modal, { local } from "web3modal";
 import BurnerConnectProvider from "@burner-wallet/burner-connect-provider";
 import MewConnect from "@myetherwallet/mewconnect-web-client";
 import EventManager from "events"
 
+export const INFURA_ID_KEY = 'walletconnect-infura-id'
 
 export class RemixClient extends PluginClient {
   provider
@@ -21,19 +22,6 @@ export class RemixClient extends PluginClient {
     this.methods = ["sendAsync"];
     this.internalEvents = new EventManager()
     this.onload()
-    this.web3Modal = new Web3Modal({
-      providerOptions: this.getProviderOptions() // required
-    });
-  }
-
-  async init() {
-    const currentTheme = await this.call('theme', 'currentTheme')
-    this.web3Modal.updateTheme(currentTheme.quality)
-
-    this.on('theme', 'themeChanged', (theme) => {
-      this.web3Modal.updateTheme(theme.quality)
-    })
-
   }
 
   /**
@@ -42,6 +30,9 @@ export class RemixClient extends PluginClient {
   async onConnect() {
 
     try {
+      this.web3Modal = new Web3Modal({
+        providerOptions: this.getProviderOptions() // required
+      })
       this.provider = await this.web3Modal.connect();
     } catch (e) {
       console.error("Could not get a wallet connection", e);
@@ -85,14 +76,17 @@ export class RemixClient extends PluginClient {
     else if (id === 42) networkName = "Kovan";
     else networkName = "Custom";
     return networkName
+  }
 
+  getInfuraId () {
+    return localStorage.getItem(INFURA_ID_KEY)
   }
 
   /**
    * Disconnect wallet button pressed.
    */
   async onDisconnect() {
-
+    this.web3Modal = null
     // TODO: Which providers have close method?
     if (this.provider && this.provider.close) {
       await this.provider.close();
@@ -106,7 +100,6 @@ export class RemixClient extends PluginClient {
     } else {
       this.internalEvents.emit('disconnect')
     }
-
   }
 
   getProviderOptions() {
@@ -114,7 +107,7 @@ export class RemixClient extends PluginClient {
       walletconnect: {
         package: WalletConnectProvider,
         options: {
-          infuraId: '66e95624569c4b47a67648448e32126e',
+          infuraId: this.getInfuraId(),
           bridge: 'https://wallet-connect-bridge.dyn.plugin.remixproject.org:8080/'
         }
       },
@@ -134,7 +127,7 @@ export class RemixClient extends PluginClient {
       mewconnect: {
         package: MewConnect, // required
         options: {
-          infuraId: "66e95624569c4b47a67648448e32126e" // required
+          infuraId: this.getInfuraId() // required
         }
       }
       /*,