manual input infura id

3 years ago · 2703b073f1
parent fbeec480d3
commit 2703b073f1
3 changed files with 52 additions and 22 deletions
--- a/package-lock.json
+++ b/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",
--- a/src/App.js
+++ b/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) => {
@ -37,7 +37,11 @@ function App() {
  })
  return (
    <div className="App">
-      <div className="btn-group-vertical mt-5 w-25" role="group"> 
+      <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>
--- a/src/RemixClient.js
+++ b/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
        }
      }
      /*,