Disable auto-connect and implement sendAsync api

apps/remix-ide/src/app/udapp/run-tab.js

@@ -170,7 +170,7 @@ export class RunTab extends ViewPlugin {
     await addProvider('injected-optimism-provider', 'L2 - Optimism Provider', true, false)
     await addProvider('injected-arbitrum-one-provider', 'L2 - Arbitrum One Provider', true, false)
   
-    await addProvider('walletconnect', 'Wallet Connect', false, false)
+    await addProvider('walletConnect2', 'Wallet Connect', false, false)
     
   }
 

apps/wallet-connect/src/app/app.tsx

@@ -1,68 +1,44 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import '../css/app.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import { PROJECT_ID } from '../services/constant'
 import { EthereumClient } from '@web3modal/ethereum'
-import { Web3Button, Web3Modal } from '@web3modal/react'
+import { Web3Button, Web3Modal, Web3NetworkSwitch } from '@web3modal/react'
 import { WagmiConfig } from 'wagmi'
 import { RemixClient } from '../services/RemixClient'
 
 const p = new RemixClient()
-const ethereumClient = new EthereumClient(p.wagmiClient, p.chains)
 
 function App() {
-  const openModal = () => {
+  const [ethereumClient, setEthereumClient] = useState<EthereumClient>(null)
-    p.onConnect()
+  const [wagmiClient, setWagmiClient] = useState(null)
-  }
 
-  const disconnect = () => {
+  useEffect(() => {
-    p.onDisconnect()
+    (async () => {
-  }
+      await p.init()
+      const ethereumClient = new EthereumClient(p.wagmiClient, p.chains)
       
-  const showButtons = (connected = true) => {
+      setWagmiClient(p.wagmiClient)
-    document.getElementById("disconnectbtn").style.display = document.getElementById("accounts-container").style.display = connected? 'block':'none'
+      setEthereumClient(ethereumClient)
-    document.getElementById("connectbtn").style.display =  connected? 'none':'block'
+    })()
-  }
+  }, [])
-
-  p.internalEvents.on('accountsChanged', (accounts) => {
-    document.getElementById('accounts').innerHTML = ""
-    for(const account of accounts){
-      document.getElementById('accounts').innerHTML += `<li className="list-group-item">${account}</li>`
-    }
-  })
-
-  p.internalEvents.on('chainChanged', (chain) => {
-    document.getElementById('chain').innerHTML = chain
-    showButtons(true)
-  })
-
-  p.internalEvents.on('disconnect', (chain) => {
-    document.getElementById('accounts').innerHTML = ''
-    document.getElementById('chain').innerHTML = ''
-    showButtons(false)
-  })
 
   return (
     <div className="App">
-      <div className="btn-group-vertical mt-5 w-25" role="group">
+          <div style={{ display: 'inline-block' }}>
-        <div className="text-center w-100">
+            { wagmiClient && <WagmiConfig client={wagmiClient}>
-          <i className="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">Walletconnect cloud settings</a>
+                <Web3Button label='Connect to a wallet' />
-          <input onChange={(e) => {}} id="walletconnect-project-id" placeholder="Project Id" className="mt-2 mb-2 ml-2"></input>          
+              </WagmiConfig>
-        </div>
+            }
-        <button id="connectbtn" type="button" onClick={openModal} className="btn btn-primary">Connect to a wallet</button>
+          </div>
-        <button id="disconnectbtn" type="button" onClick={disconnect} className="btn btn-primary mt-2">Disconnect</button>
+          <div style={{ display: 'inline-block', paddingLeft: 30, marginTop: 5 }}>
-      </div>
+            { wagmiClient && 
-      <div id='accounts-container'>
+              <WagmiConfig client={wagmiClient}>
-        <div><label><b>Accounts: </b></label><br></br><ul className="list-group list-group-flush" id="accounts"></ul></div>
+                <Web3NetworkSwitch />
-        <div><label><b>Network: </b></label><label className="ml-1" id="chain"> - </label></div>
+              </WagmiConfig>
-      </div>
+            }
-      { p.wagmiClient && 
+          </div>
-        <WagmiConfig client={p.wagmiClient}>
+      { ethereumClient && <Web3Modal projectId={PROJECT_ID} ethereumClient={ethereumClient} themeMode={'dark'} /> }
-          <Web3Button />
-        </WagmiConfig>
-      }
-
-      { ethereumClient && <Web3Modal projectId={PROJECT_ID} ethereumClient={ethereumClient} /> }
     </div>
   )
 }

apps/wallet-connect/src/services/RemixClient.ts

@@ -2,98 +2,42 @@ import { PluginClient } from '@remixproject/plugin'
 import { createClient } from '@remixproject/plugin-webview'
 import { w3mConnectors, w3mProvider } from '@web3modal/ethereum'
 import { configureChains, createClient as wagmiCreateClient } from 'wagmi'
-import { arbitrum, mainnet, polygon, Chain } from 'wagmi/chains'
+import { arbitrum, mainnet, polygon, optimism, Chain, goerli, sepolia } from 'wagmi/chains'
-import EventManager from 'events'
 import { PROJECT_ID } from './constant'
 
 export class RemixClient extends PluginClient {
-    internalEvents: EventManager
     wagmiClient
     chains: Chain[]
 
     constructor() {
         super()
         createClient(this)
-        this.methods = ["sendAsync"]
+        this.methods = ["sendAsync", "init"]
-        this.internalEvents = new EventManager()
         this.onload()
     }
 
-    /**
+    async init() {
-     * Connect wallet button pressed.
-     */
-    async onConnect() {
         try {
-            this.chains = [arbitrum, mainnet, polygon]
+            this.chains = [arbitrum, mainnet, polygon, optimism, goerli, sepolia]
           
             const { provider } = configureChains(this.chains, [w3mProvider({ projectId: PROJECT_ID })])
             this.wagmiClient = wagmiCreateClient({
-              autoConnect: true,
+              autoConnect: false,
               connectors: w3mConnectors({ projectId: PROJECT_ID, version: 1, chains: this.chains }),
               provider
             })
-
-            this.internalEvents.emit('accountsChanged', this.wagmiClient.provider.accounts || [])
-            this.internalEvents.emit('chainChanged', await this.detectNetwork(this.wagmiClient.provider.chainId))
-    
-            // Subscribe to accounts change
-            this.wagmiClient.provider.on("accountsChanged", (accounts) => {
-                this.internalEvents.emit('accountsChanged', accounts || [])
-            })
-    
-            // Subscribe to chainId change
-            this.wagmiClient.provider.on("chainChanged", async (chainId) => {
-                this.internalEvents.emit('chainChanged', await this.detectNetwork(chainId))
-            })
-    
-            // Subscribe to networkId change
-            this.wagmiClient.provider.on("networkChanged", (networkId) => {
-                this.internalEvents.emit('networkChanged', networkId)
-            })
-    
-            // Subscribe to networkId change
-            this.wagmiClient.provider.on("disconnect", () => {
-                this.internalEvents.emit('disconnect')
-            })
         } catch (e) {
             return console.error("Could not get a wallet connection", e)
         }
     }
 
-    async detectNetwork(id) {
-        let networkName = null
-
-        id = parseInt(id)
-        // 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.wagmiClient.provider && this.wagmiClient.provider.close) {
-            await this.wagmiClient.provider.close()
-            this.wagmiClient.provider = null
-        } else {
-            this.internalEvents.emit('disconnect')
-        }
-    }
-
     sendAsync = (data) => {
         return new Promise((resolve, reject) => {
             if (this.wagmiClient.provider) {
-                this.wagmiClient.provider.sendAsync(data, (error, message) => {
+                this.wagmiClient.provider.send(data.method, data.params).then((message) => {
-                    if (error) return reject(error)
+                    resolve({"jsonrpc": "2.0", "result": message, "id": data.id})
-                    resolve(message)
+                }).catch((error) => {
+                    reject(error)
                 })
             } else {
                 resolve({"jsonrpc": "2.0", "result": [], "id": data.id})

libs/remix-ui/run-tab/src/lib/actions/deploy.ts

@@ -363,9 +363,11 @@ export const getNetworkProxyAddresses = async (plugin: RunTab, dispatch: React.D
     const deployments = []
 
     for (const proxyAddress in Object.keys(parsedNetworkFile.deployments)) {
-      const solcBuildExists = await plugin.call('fileManager', 'exists', `.deploys/upgradeable-contracts/${identifier}/solc-${parsedNetworkFile.deployments[proxyAddress].implementationAddress}.json`)
+      if (parsedNetworkFile.deployments[proxyAddress] && parsedNetworkFile.deployments[proxyAddress].implementationAddress) {
+        const solcBuildExists = await plugin.call('fileManager', 'exists', `.deploys/upgradeable-contracts/${identifier}/solc-${parsedNetworkFile.deployments[proxyAddress].implementationAddress}.json`)
 
-      if (solcBuildExists) deployments.push({ address: proxyAddress, date: parsedNetworkFile.deployments[proxyAddress].date, contractName: parsedNetworkFile.deployments[proxyAddress].contractName })
+        if (solcBuildExists) deployments.push({ address: proxyAddress, date: parsedNetworkFile.deployments[proxyAddress].date, contractName: parsedNetworkFile.deployments[proxyAddress].contractName })
+      }
     }
     dispatch(fetchProxyDeploymentsSuccess(deployments))
   } else {
@@ -383,7 +385,7 @@ export const isValidContractUpgrade = async (plugin: RunTab, proxyAddress: strin
     const networkFile: string = await plugin.call('fileManager', 'readFile', `.deploys/upgradeable-contracts/${identifier}/UUPS.json`)
     const parsedNetworkFile: NetworkDeploymentFile = JSON.parse(networkFile)
 
-      if (parsedNetworkFile.deployments[proxyAddress]) {
+      if (parsedNetworkFile.deployments[proxyAddress] && parsedNetworkFile.deployments[proxyAddress].implementationAddress) {
         const solcBuildExists = await plugin.call('fileManager', 'exists', `.deploys/upgradeable-contracts/${identifier}/solc-${parsedNetworkFile.deployments[proxyAddress].implementationAddress}.json`)
         
         if (solcBuildExists) {