Disable auto-connect and implement sendAsync api

pull/3674/head
ioedeveloper 2 years ago committed by Aniket
parent f4762b92df
commit f327934167
  1. 2
      apps/remix-ide/src/app/udapp/run-tab.js
  2. 70
      apps/wallet-connect/src/app/app.tsx
  3. 74
      apps/wallet-connect/src/services/RemixClient.ts
  4. 4
      libs/remix-ui/run-tab/src/lib/actions/deploy.ts

@ -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)
}

@ -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 = () => {
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 = ""
for(const account of accounts){
document.getElementById('accounts').innerHTML += `<li className="list-group-item">${account}</li>`
}
})
const [ethereumClient, setEthereumClient] = useState<EthereumClient>(null)
const [wagmiClient, setWagmiClient] = useState(null)
p.internalEvents.on('chainChanged', (chain) => {
document.getElementById('chain').innerHTML = chain
showButtons(true)
})
useEffect(() => {
(async () => {
await p.init()
const ethereumClient = new EthereumClient(p.wagmiClient, p.chains)
p.internalEvents.on('disconnect', (chain) => {
document.getElementById('accounts').innerHTML = ''
document.getElementById('chain').innerHTML = ''
showButtons(false)
})
setWagmiClient(p.wagmiClient)
setEthereumClient(ethereumClient)
})()
}, [])
return (
<div className="App">
<div className="btn-group-vertical mt-5 w-25" role="group">
<div className="text-center w-100">
<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>
<input onChange={(e) => {}} id="walletconnect-project-id" placeholder="Project 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>
<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>Network: </b></label><label className="ml-1" id="chain"> - </label></div>
<div style={{ display: 'inline-block' }}>
{ wagmiClient && <WagmiConfig client={wagmiClient}>
<Web3Button label='Connect to a wallet' />
</WagmiConfig>
}
</div>
{ p.wagmiClient &&
<WagmiConfig client={p.wagmiClient}>
<Web3Button />
<div style={{ display: 'inline-block', paddingLeft: 30, marginTop: 5 }}>
{ wagmiClient &&
<WagmiConfig client={wagmiClient}>
<Web3NetworkSwitch />
</WagmiConfig>
}
{ ethereumClient && <Web3Modal projectId={PROJECT_ID} ethereumClient={ethereumClient} /> }
</div>
{ ethereumClient && <Web3Modal projectId={PROJECT_ID} ethereumClient={ethereumClient} themeMode={'dark'} /> }
</div>
)
}

@ -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 EventManager from 'events'
import { arbitrum, mainnet, polygon, optimism, Chain, goerli, sepolia } from 'wagmi/chains'
import { PROJECT_ID } from './constant'
export class RemixClient extends PluginClient {
internalEvents: EventManager
wagmiClient
chains: Chain[]
constructor() {
super()
createClient(this)
this.methods = ["sendAsync"]
this.internalEvents = new EventManager()
this.methods = ["sendAsync", "init"]
this.onload()
}
/**
* Connect wallet button pressed.
*/
async onConnect() {
async init() {
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) => {
if (error) return reject(error)
resolve(message)
this.wagmiClient.provider.send(data.method, data.params).then((message) => {
resolve({"jsonrpc": "2.0", "result": message, "id": data.id})
}).catch((error) => {
reject(error)
})
} else {
resolve({"jsonrpc": "2.0", "result": [], "id": data.id})

@ -363,10 +363,12 @@ export const getNetworkProxyAddresses = async (plugin: RunTab, dispatch: React.D
const deployments = []
for (const proxyAddress in Object.keys(parsedNetworkFile.deployments)) {
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 })
}
}
dispatch(fetchProxyDeploymentsSuccess(deployments))
} else {
dispatch(fetchProxyDeploymentsSuccess([]))
@ -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) {

Loading…
Cancel
Save