disconnect button

src/App.css

@@ -36,3 +36,7 @@
     transform: rotate(360deg);
   }
 }
+
+#disconnectbtn, #accounts-container {
+  display: none;
+}

src/App.js

@@ -7,8 +7,22 @@ function App() {
   const openModal = () => {
     p.onConnect()
   }
+
+  const disconnect = () => {
+    p.onDisconnect()
+  }
+
+  const showButtons = (connected = true) =>{
+    document.getElementById("disconnectbtn").style.display = document.getElementById("accounts-container").style.display = connected? 'block':'none';
+    document.getElementById("connectbtn").style.display =  connected? 'none':'block';
+  }
+
   p.internalEvents.on('accountsChanged', (accounts) => {
-    document.getElementById('accounts').innerHTML = JSON.stringify(accounts)
+    document.getElementById('accounts').innerHTML = ""
+    for(const account of accounts){
+      document.getElementById('accounts').innerHTML += `<li className="list-group-item">${account}</li>`
+    }
+    showButtons(accounts.length > 0)
   })
 
   p.internalEvents.on('chainChanged', (chain) => {
@@ -18,15 +32,19 @@ function App() {
   p.internalEvents.on('disconnect', (chain) => {
     document.getElementById('accounts').innerHTML = ''
     document.getElementById('chain').innerHTML = ''
+    showButtons(false)
   })
   return (
     <div className="App">
-      <div className="btn-group mt-5" role="group"> 
-        <button type="button" onClick={openModal} className="btn btn-primary">Connect</button>
+      <div className="btn-group-vertical mt-5 w-25" role="group"> 
+        <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><label><b>Accounts: </b></label><label className="ml-1" id="accounts"> - </label></div>
+      <div id='accounts-container'>
+        <div><label><b>Accounts: </b></label><br></br><ul className="list-group list-group-flush" id="accounts"></ul></div>
         <div><label><b>ChainId: </b></label><label className="ml-1" id="chain"> - </label></div>
       </div>
+    </div>
   );
 }
 

src/RemixClient.js

@@ -1,5 +1,9 @@
-import { PluginClient } from '@remixproject/plugin';
-import { createClient } from '@remixproject/plugin-iframe';
+import {
+  PluginClient
+} from '@remixproject/plugin';
+import {
+  createClient
+} from '@remixproject/plugin-webview';
 import WalletConnectProvider from "@walletconnect/web3-provider";
 import Torus from "@toruslabs/torus-embed";
 import Authereum from "authereum";
@@ -43,13 +47,13 @@ export class RemixClient extends PluginClient {
     console.log("Opening a dialog", this.web3Modal);
     try {
       this.provider = await this.web3Modal.connect();
-      } catch(e) {
+    } catch (e) {
       console.log("Could not get a wallet connection", e);
       return;
     }
 
     this.internalEvents.emit('accountsChanged', this.provider.accounts || [])
-      this.internalEvents.emit('chainChanged', this.provider.chainId)
+    this.internalEvents.emit('chainChanged', await this.detectNetwork(this.provider.chainId))
 
     // Subscribe to accounts change
     this.provider.on("accountsChanged", (accounts) => {
@@ -57,8 +61,8 @@ export class RemixClient extends PluginClient {
     });
 
     // Subscribe to chainId change
-      this.provider.on("chainChanged", (chainId) => {
-        this.internalEvents.emit('chainChanged', chainId)
+    this.provider.on("chainChanged", async (chainId) => {
+      this.internalEvents.emit('chainChanged', await this.detectNetwork(chainId))
     });
 
     // Subscribe to networkId change
@@ -72,12 +76,49 @@ export class RemixClient extends PluginClient {
     });
   }
 
-    getProviderOptions () {
+  async detectNetwork(id) {
+
+    let networkName = null;
+
+    // https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md
+    if (id === 1) networkName = "Main";
+    else if (id === 2) networkName = "Morden (deprecated)";
+    else if (id === 3) networkName = "Ropsten";
+    else if (id === 4) networkName = "Rinkeby";
+    else if (id === 5) networkName = "Goerli";
+    else if (id === 42) networkName = "Kovan";
+    else networkName = "Custom";
+    return networkName
+
+  }
+
+  /**
+   * Disconnect wallet button pressed.
+   */
+  async onDisconnect() {
+
+    // TODO: Which providers have close method?
+    if (this.provider && this.provider.close) {
+      await this.provider.close();
+
+      // If the cached provider is not cleared,
+      // WalletConnect will default to the existing session
+      // and does not allow to re-scan the QR code with a new wallet.
+      // Depending on your use case you may want or want not his behavir.
+      await this.web3Modal.clearCachedProvider();
+      this.provider = null;
+    } else {
+      this.internalEvents.emit('disconnect')
+    }
+
+  }
+
+  getProviderOptions() {
     const providerOptions = {
       walletconnect: {
         package: WalletConnectProvider,
         options: {
-              infuraId: '83d4d660ce3546299cbe048ed95b6fad'
+          infuraId: '83d4d660ce3546299cbe048ed95b6fad',
         }
       },
       torus: {
@@ -150,4 +191,4 @@ export class RemixClient extends PluginClient {
       }
     })
   }
-  }
+}