mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

first commit

Browse Source
pull/3674/head
yann300 5 years ago committed by Aniket
parent 2b7b94c867
commit de764729b1
4 changed files with 48396 additions and 18 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 48227
      package-lock.json
  2. 5
      public/index.html
  3. 38
      src/App.js
  4. 144
      src/RemixClient.js

48227
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
public/index.html
Unescape View File

@ -4,10 +4,9 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="wallet connect"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
@ -24,7 +23,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Wallet Connect</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

38
src/App.js
Unescape View File

@ -1,24 +1,32 @@
import React from 'react'; import React from 'react';
import logo from './logo.svg';
import './App.css'; import './App.css';
import { RemixClient } from './RemixClient'
function App() { function App() {
const p = new RemixClient()
const openModal = () => {
p.openModal()
}
const clearLocalStorage = () => {
localStorage.clear()
document.getElementById('accounts').innerHTML = ''
document.getElementById('chain').innerHTML = ''
}
p.internalEvents.on('accountsChanged', (accounts) => {
document.getElementById('accounts').innerHTML = JSON.stringify(accounts)
})
p.internalEvents.on('chainChanged', (chain) => {
document.getElementById('chain').innerHTML = chain
})
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <div className="btn-group mt-5" role="group">
<img src={logo} className="App-logo" alt="logo" /> <button type="button" onClick={openModal} className="btn btn-primary">Connect</button>
<p> <button type="button" onClick={clearLocalStorage} className="btn btn-primary">Clear Local Sessions</button>
Edit <code>src/App.js</code> and save to reload. </div>
</p> <div><label><b>Accounts: </b></label><label className="ml-1" id="accounts"> - </label></div>
<a <div><label><b>ChainId: </b></label><label className="ml-1" id="chain"> - </label></div>
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div> </div>
); );
} }

144
src/RemixClient.js
Unescape View File

@ -0,0 +1,144 @@
import { PluginClient } from '@remixproject/plugin';
import { createClient } from '@remixproject/plugin-iframe';
import WalletConnectProvider from "@walletconnect/web3-provider";
import Torus from "@toruslabs/torus-embed";
import Authereum from "authereum";
import Web3Modal from "web3modal";
import UniLogin from "@unilogin/provider";
import BurnerConnectProvider from "@burner-wallet/burner-connect-provider";
import MewConnect from "@myetherwallet/mewconnect-web-client";
import EventManager from "events"
export class RemixClient extends PluginClient {
constructor() {
super();
this.methods = ["sendAsync"];
this.internalEvents = new EventManager()
createClient(this);
this.onload()
}
async initModal () {
try {
const currentTheme = await this.call('theme', 'currentTheme')
console.log('theme', currentTheme)
this.web3Modal.updateTheme(currentTheme.quality)
this.on('theme', 'themeChanged', (theme) => {
this.web3Modal.updateTheme(theme.quality)
console.log('theme', theme)
})
this.web3Modal.on('connect', (provider) => {
this.provider = provider
this.internalEvents.emit('accountsChanged', provider.accounts || [])
this.internalEvents.emit('chainChanged', provider.chainId)
this.provider.on("accountsChanged", (accounts) => {
this.internalEvents.emit('accountsChanged', accounts || [])
});
this.provider.on("chainChanged", (chain) => {
this.internalEvents.emit('chainChanged', chain)
});
})
} catch (e) {
console.log(e)
}
}
async openModal () {
if (!this.web3Modal) {
this.web3Modal = new Web3Modal({
providerOptions: this.getProviderOptions() // required
});
await this.initModal()
}
if (!this.web3Modal.show) {
this.web3Modal.toggleModal()
}
}
getProviderOptions () {
const providerOptions = {
walletconnect: {
package: WalletConnectProvider,
options: {
infuraId: '83d4d660ce3546299cbe048ed95b6fad'
}
},
torus: {
package: Torus, // required
options: {}
},
authereum: {
package: Authereum
},
unilogin: {
package: UniLogin // required
},
burnerconnect: {
package: BurnerConnectProvider, // required
options: {
defaultNetwork: "100"
}
},
mewconnect: {
package: MewConnect, // required
options: {
infuraId: "83d4d660ce3546299cbe048ed95b6fad" // required
}
}
/*,
fortmatic: {
package: Fortmatic,
options: {
key: process.env.REACT_APP_FORTMATIC_KEY
}
},
authereum: {
package: Authereum
},
portis: {
package: Portis, // required
options: {
id: "PORTIS_ID" // required
}
},
squarelink: {
package: Squarelink, // required
options: {
id: "SQUARELINK_ID" // required
}
},
arkane: {
package: Arkane, // required
options: {
clientId: "ARKANE_CLIENT_ID" // required
}
},
dcentwallet: {
package: DcentProvider, // required
options: {
rpcUrl: "INSERT_RPC_URL" // required
}
}*/
};
return providerOptions;
};
sendAsync = (data) => {
return new Promise((resolve, reject) => {
if (this.provider) {
this.provider.sendAsync(data, (error, message) => {
// console.log('in plugin', data, error, message)
if (error) return reject(error)
resolve(message)
})
} else {
return reject('Provider not loaded')
}
})
}
}
Write Preview
Loading…
Cancel
Save