update some UI + use react localstorage state instead of localstorage.get...

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,15 @@
+asset-manifest.json,1619522159000,8c119d74f71b359095d4dea494bf2e6f1985c9c2bb13c3a6c5c8f43e07b0fa80
+index.html,1619522159000,7fbf4eab8dd72a935ebdf5aa6457ddc9dfccbfc5725e4302442159b263f4bcb9
+robots.txt,1619522134000,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+manifest.json,1619522134000,bbc83466d30f4298fe74e5aa5cb2102777c3c4c3c6207053bf681afec132f64c
+static/css/main.405fd889.chunk.css,1619522159000,947e9cd691f0f29d379dca788c3bad828fade766cd34d278a62692d2fb3d0b9a
+logo.png,1619522134000,5218185f37b3886ed2a44d34d819e4500f7c88560583500e99e6315d2aeb5aab
+static/js/2.8c80d600.chunk.js.LICENSE.txt,1619522159000,4321060f0acdf6cb3895cc1db53f43abf0a535f42e832b09cff127b5fe835c33
+static/css/main.405fd889.chunk.css.map,1619522159000,b4b3fd5e22bbe66fd1266ba7053ae763d1d7c94c15cc0f2d54610ab44e76f1be
+static/js/main.7ef8618a.chunk.js,1619522159000,09c6607ec05e6115bfcc412c83969e65e36d76a12db3dbebc42958bbb6767a96
+static/js/main.7ef8618a.chunk.js.map,1619522159000,4bc6698be13e41935a5575610ce50cf350f1227d94b049ccc6dc2c1662709b1b
+static/js/runtime-main.78613f47.js.map,1619522159000,ea69ede724534d2e3e243d1fdedd7760cb4a7d6722b7fe1ce3b21c3c3076f436
+static/js/runtime-main.78613f47.js,1619522159000,6fb8ef8de1e38eb4da926119e3ee8c16c16fbf60dd603062b906676d7ea8875d
+favicon.ico,1619522134000,face924cbdc795fb1f88c904da64401e9e0c432fb966e4ea11109ebc47229be7
+static/js/2.8c80d600.chunk.js,1619522159000,d294007f422943e80b7fa70c941c52d10d70bad884ee2885267fd597b801cab8
+static/js/2.8c80d600.chunk.js.map,1619522159000,15e5c0dbca699ac19468d0113246307aff0c8c2934e34cbd141a69fa12414916

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "walletconnect"
+  }
+}

firebase.json

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

package.json

@@ -8,15 +8,12 @@
     "@burner-wallet/burner-connect-provider": "^0.1.1",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@myetherwallet/mewconnect-web-client": "^2.1.23-beta.9",
-    "@portis/web3": "^4.0.0",
-    "@remixproject/plugin": "^0.3.11",
-    "@remixproject/plugin-iframe": "^0.3.11",
-    "@remixproject/plugin-webview": "^0.3.11",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.5",
-    "@toruslabs/torus-embed": "^1.10.8",
-    "@walletconnect/web3-provider": "^1.4.1",
+    "@portis/web3": "^4.0.6",
+    "@remixproject/plugin": "^0.3.24",
+    "@remixproject/plugin-iframe": "^0.3.24",
+    "@remixproject/plugin-webview": "^0.3.24",
+    "@toruslabs/torus-embed": "^1.14.0",
+    "@walletconnect/web3-provider": "^1.6.6",
     "authereum": "^0.1.14",
     "dcent-provider": "^0.3.0-beta",
     "fortmatic": "^2.2.1",
@@ -25,7 +22,7 @@
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "squarelink": "^1.1.4",
-    "web3modal": "^1.9.3"
+    "web3modal": "^1.9.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import '@fortawesome/fontawesome-free/css/all.css'
 import { RemixClient, INFURA_ID_KEY } from './RemixClient'
 const p = new RemixClient()
 function App() {
 
+  const [infuraId, setinfuraId] = useLocalStorage(
+      INFURA_ID_KEY,
+      ''
+  );
+
   const openModal = () => {
-    p.onConnect()
+    p.onConnect(infuraId)
   }
 
   const disconnect = () => {
@@ -38,12 +43,13 @@ 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 className="text-center w-100">
+          <i className="fas fa-info-circle mr-2 bg-light" title="Wallet connect requires an Infura ID in order to make a request to the network."/><a target="_blank" href="https://infura.io/dashboard/ethereum">INFURA settings</a>
+          <input value={infuraId} onChange={(e) => { setinfuraId(e.target.value)}} id="input-infura-id" placeholder="Please provide an Infura ID" className="form-control mt-2 mb-2"></input>          
+
+        <button disabled={!infuraId} id="connectbtn" type="button" onClick={openModal} className="btn btn-primary w-100">Connect to a wallet</button>
+        <button id="disconnectbtn" type="button" onClick={disconnect} className="btn btn-primary mt-2 w-100">Disconnect</button>
         </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>
       <div id='accounts-container'>
         <div><label><b>Accounts: </b></label><br></br><ul className="list-group list-group-flush" id="accounts"></ul></div>
@@ -54,3 +60,37 @@ function App() {
 }
 
 export default App;
+
+export const useLocalStorage = (key, initialValue) => {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+
+      return initialValue;
+    }
+  });
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+
+    }
+  };
+  return [storedValue, setValue];
+}

src/RemixClient.js

@@ -12,7 +12,7 @@ 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 const INFURA_ID_KEY = 'INFURA_ID_KEY'
 
 export class RemixClient extends PluginClient {
   provider
@@ -21,14 +21,16 @@ export class RemixClient extends PluginClient {
     createClient(this);
     this.methods = ["sendAsync"];
     this.internalEvents = new EventManager()
+    this.infuraId = ''
     this.onload()
   }
 
   /**
    * Connect wallet button pressed.
    */
-  async onConnect() {
-
+  async onConnect(infuraId) {
+    // set infura id
+    this.infuraId = infuraId
     try {
       this.web3Modal = new Web3Modal({
         providerOptions: this.getProviderOptions() // required
@@ -79,14 +81,14 @@ export class RemixClient extends PluginClient {
   }
 
   getInfuraId () {
-    return localStorage.getItem(INFURA_ID_KEY)
+    return this.infuraId
   }
 
   /**
    * 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();
@@ -100,6 +102,7 @@ export class RemixClient extends PluginClient {
     } else {
       this.internalEvents.emit('disconnect')
     }
+    this.web3Modal = null
   }
 
   getProviderOptions() {
@@ -169,14 +172,27 @@ export class RemixClient extends PluginClient {
   };
 
   sendAsync = (data) => {
-    return new Promise((resolve, reject) => {
+    return new Promise(async (resolve, reject) => {
       if (this.provider) {
         this.provider.sendAsync(data, (error, message) => {
           if (error) return reject(error)
           resolve(message)
         })
       } else {
-        resolve({"jsonrpc": "2.0", "result": [], "id": data.id})
+        const infuraKey = window.localStorage.getItem(INFURA_ID_KEY)
+        if (infuraKey) {
+          await this.onConnect(infuraKey)
+          if (this.provider) {
+            this.provider.sendAsync(data, (error, message) => {
+              if (error) return reject(error)
+              resolve(message)
+            })
+          } else {
+            resolve({"jsonrpc": "2.0", "result": [], "id": data.id})
+          }
+        } else {
+          resolve({"jsonrpc": "2.0", "result": [], "id": data.id})
+        }
       }
     })
   }