Skip to content

Commit bead6ec

Browse files
SteveMieskoskiSteveMieskoski
committedAug 5, 2020
link to new documentation
·
v2.2.0-beta.12.1.5-beta.1
1 parent 6cdc53b commit bead6ec

File tree

2 files changed

+321
-320
lines changed

2 files changed

+321
-320
lines changed
 

‎OLD_README.md

+320
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,320 @@
1+
MEWconnect Client for MEW wallet
2+
==========
3+
4+
5+
With the MEWconnect client, users can use your DApp in any desktop browser without
6+
installing an extension. Additionally, end-to-end encryption using client-side generated
7+
keys keeps all user activity private.
8+
9+
For DApp developers to integrate with MEW wallet using MEWconnect, all you need to do is drop a
10+
few lines of code into your application, and the MEW wallet app and MEWconnect client will take care of the
11+
rest.
12+
13+
## Getting Started
14+
15+
### Installation
16+
17+
```shell
18+
# With NPM
19+
npm install @myetherwallet/mewconnect-web-client
20+
```
21+
22+
### Initializing MEWconnect and a Web3 instance using the default node
23+
24+
```javascript
25+
import MEWconnect from "@myetherwallet/mewconnect-web-client"
26+
import Web3 from "web3"
27+
28+
const CHAIN_ID = 1
29+
30+
// Initialize
31+
export const mewConnect = new MEWconnect.Provider()
32+
33+
// Initialize a Web3 Provider object
34+
export const ethereum = mewConnect.makeWeb3Provider(CHAIN_ID)
35+
36+
// Initialize a Web3 object
37+
export const web3 = new Web3(ethereum)
38+
39+
```
40+
41+
#### Alternatively, a node rpc url may be supplied
42+
43+
- Note: only websocket urls are supported.
44+
```javascript
45+
import MEWconnect from "@myetherwallet/mewconnect-web-client"
46+
import Web3 from "web3"
47+
48+
const ETH_JSONRPC_URL = "wss://mainnet.infura.io/v3/<YOUR_INFURA_API_KEY>"
49+
const CHAIN_ID = 1
50+
51+
// Initialize MEWconnect
52+
export const mewConnect = new MEWconnect.Provider()
53+
54+
// Initialize a Web3 Provider object
55+
export const ethereum = mewConnect.makeWeb3Provider(CHAIN_ID, ETH_JSONRPC_URL)
56+
57+
// Initialize a Web3 object
58+
export const web3 = new Web3(ethereum)
59+
60+
```
61+
62+
### Use EIP-1102 to obtain authorization and get Ethereum accounts
63+
64+
Invoking EIP-1102 will show a QR code dialog if the user's mobile wallet is not
65+
already connected to their browser. The following code should run in response to
66+
a user-initiated action such as clicking a button to ensure the pop up is not
67+
blocked by the browser.
68+
69+
```javascript
70+
// Use eth_RequestAccounts
71+
ethereum.send("eth_requestAccounts").then((accounts) => {
72+
console.log(`User's address is ${accounts[0]}`)
73+
74+
})
75+
76+
// Alternatively, you can use ethereum.enable()
77+
ethereum.enable().then((accounts) => {
78+
console.log(`User's address is ${accounts[0]}`)
79+
})
80+
```
81+
82+
That's it! Once the connection between the phone and the site is established, the Web3 object
83+
(`web3`) and the Web3 Provider (`ethereum`) are ready to be used as usual.
84+
85+
## MEWconnect.Provider
86+
87+
### Options
88+
The MEWconnect.Provider can take an options object with the following fields:
89+
90+
- windowClosedError (default ```false```) Indicates whether the provider should throw an error when the popup window is closed by the user.
91+
92+
### Events
93+
```javascript
94+
const mewConnect = new MEWconnect.Provider()
95+
mewConnect.on('[event]')
96+
```
97+
- popupWindowClosed
98+
99+
Emitted when the popup window is closed by the user
100+
101+
- disconnected
102+
103+
Emitted when the user becomes disconnected (Both by disconnecting and if the connection is broken)
104+
105+
---
106+
## Example
107+
An example may be found in the example directory
108+
109+
---
110+
111+
## Tokens
112+
In order to have your token included in the list of tokens identified by the app the token needs to be included as a token in the [ethereum-lists](https://github.com/MyEtherWallet/ethereum-lists) repository.
113+
114+
Instructions one how to add a token there may be found [here](https://kb.myetherwallet.com/en/tokens/adding-token-as-a-default/)
115+
116+
## Debugging
117+
118+
The MEWconnect client uses the debug library to provide verbose debug logging. In local storage add the key 'debug' with the value:
119+
- \*
120+
- to see everything
121+
- MEWconnect: *
122+
- to see everything related to the MEWconnect client
123+
- MEWconnect:connection-state
124+
- to see the connection state when it changes
125+
- MEWconnect:webRTC-communication
126+
- to see the events and signals related to webRTC
127+
- MEWconnect:websocketWrapper
128+
- to see the events related to setting up the webRTC connection
129+
- MEWconnect:*,MEWconnectVerbose:*,simple-peer
130+
- what we usually use for debugging
131+
132+
133+
<br>
134+
<br>
135+
<br>
136+
<br>
137+
<br>
138+
<br>
139+
<br>
140+
<br>
141+
142+
----
143+
144+
145+
146+
147+
148+
149+
150+
151+
152+
153+
154+
155+
156+
157+
158+
159+
160+
161+
162+
163+
164+
165+
### Using only the wallet with an external web3 instance (not recommended)
166+
167+
Install the client
168+
```npm i @myetherwallet/mewconnect-web-client```
169+
170+
171+
172+
173+
### Get the code
174+
The example requires both MEWconnect-web-client (this repo) and MEWconnect-Signal-Server (MEWconnect-hanshake-server)
175+
176+
```
177+
git clone https://github.com/MyEtherWallet/MEWconnect-web-client.git
178+
```
179+
Install the dependencies:
180+
181+
```
182+
npm install
183+
```
184+
185+
Start the server serving the example initiator and receiver:
186+
```
187+
npm start
188+
```
189+
190+
###### Get the signaling server
191+
Clone the repo:
192+
193+
```
194+
git clone https://github.com/MyEtherWallet/MEWconnect-hanshake-server.git
195+
```
196+
Install the dependencies:
197+
198+
```
199+
npm install
200+
```
201+
202+
Start the signaling server:
203+
```
204+
npm start
205+
```
206+
207+
### Usage
208+
Two Peers are needed with one designated as the Initiator and the other as the Receiver.
209+
210+
Require the MEWconnect client
211+
```javascript
212+
let mewConnect = require('@myetherwallet/mewconnect-web-client').Client;
213+
```
214+
215+
Initiate the client
216+
```javascript
217+
let mewConnectClient = mewConnect.init();
218+
```
219+
220+
MEWconnect Client functions as an event emitter.
221+
The connection details are passed along with the 'codeDisplay' event
222+
```javascript
223+
mewConnectClient.on('codeDisplay', code => {
224+
// do something with the code.
225+
// to work with the MEWconnect Mobile applications display it as a qrcode
226+
}
227+
```
228+
229+
230+
Now call the initiatorStart method to create the connection details:
231+
```javascript
232+
mewConnectClient.initiatorStart('https://signal-server-url')
233+
```
234+
235+
Once a p2p connection is established the client will emit a 'rtcConnected' event
236+
```javascript
237+
mewConnectClient.on('rtcConnected', () =>{
238+
alert('congrats you are connected to mew connect!')
239+
})
240+
```
241+
242+
Once a connection is extablished call the 'sendRtcMessage' method to interact with the app
243+
```javascript
244+
mewConnectClient.sendRtcMessage('address', {})
245+
```
246+
247+
The 'sendRtcMessage' method takes two parameters (message type, message data)
248+
249+
To get the response listen for an event matching the sent message type
250+
```javascript
251+
mewConnectClient.on('address', address => {
252+
alert('got address: ' + address)
253+
})
254+
```
255+
256+
Currently the app supports two other message types: 'signMessage', and 'signTx'
257+
258+
exists you can get the address or send a transaction or message to the mobile app for signing.
259+
260+
The data portion of those two message types are:
261+
262+
**signMessage**
263+
```json
264+
{
265+
hash: 'hash of the message to be signed',
266+
text: 'text of the message to be signed'
267+
}
268+
```
269+
270+
**signTx**
271+
```json
272+
{
273+
nonce:"0x00",
274+
gasPrice:"0x098bca5a00",
275+
gas:"0x5208",
276+
to:"0xc3982F1DbAB6DA9d95F579B9A5f9c5CAb13F8cfC",
277+
value:"0xb1a2bc2ec50000",
278+
data:"",
279+
chainId:3
280+
281+
}
282+
```
283+
284+
If the p2p connection fails to be established the client can attempt to use an intermediate TURN server to facilitate the connection.
285+
To signal a failed p2p attempt the client can call the 'useFallback' method on the client
286+
```javascript
287+
mewConnectClient.useFallback()
288+
```
289+
290+
Additional events are emitted at various points to signal various stages of the connection
291+
292+
**SocketConnectedEvent**
293+
- successfully connected to the signal server
294+
295+
**RtcInitiatedEvent**
296+
- Peer identified via the signal server, and a p2p connection will be attempted
297+
298+
**UsingFallback**
299+
- One of the peers failed to establish a p2p connection and will attempt to use an intermediate TURN server to facilitate the connection
300+
301+
**RtcConnectedEvent**
302+
- p2p connection established
303+
304+
**RtcClosedEvent**
305+
- p2p connection closed
306+
307+
**RtcDisconnectEvent**
308+
- p2p disconnected
309+
310+
**RtcErrorEvent**
311+
- p2p connection error occured
312+
313+
314+
315+
316+
317+
318+
---
319+
##### Browser
320+
mew-connect-client can be included for use in the browser via webpack or browerfy

‎README.md

+1-320
Original file line numberDiff line numberDiff line change
@@ -1,323 +1,4 @@
11
[MEWconnect Demo](https://myetherwallet.github.io/MEWconnect-web-client/#/home)
22

33

4-
MEWconnect Client for MEW wallet
5-
==========
6-
7-
8-
With the MEWconnect client, users can use your DApp in any desktop browser without
9-
installing an extension. Additionally, end-to-end encryption using client-side generated
10-
keys keeps all user activity private.
11-
12-
For DApp developers to integrate with MEW wallet using MEWconnect, all you need to do is drop a
13-
few lines of code into your application, and the MEW wallet app and MEWconnect client will take care of the
14-
rest.
15-
16-
## Getting Started
17-
18-
### Installation
19-
20-
```shell
21-
# With NPM
22-
npm install @myetherwallet/mewconnect-web-client
23-
```
24-
25-
### Initializing MEWconnect and a Web3 instance using the default node
26-
27-
```javascript
28-
import MEWconnect from "@myetherwallet/mewconnect-web-client"
29-
import Web3 from "web3"
30-
31-
const CHAIN_ID = 1
32-
33-
// Initialize
34-
export const mewConnect = new MEWconnect.Provider()
35-
36-
// Initialize a Web3 Provider object
37-
export const ethereum = mewConnect.makeWeb3Provider(CHAIN_ID)
38-
39-
// Initialize a Web3 object
40-
export const web3 = new Web3(ethereum)
41-
42-
```
43-
44-
#### Alternatively, a node rpc url may be supplied
45-
46-
- Note: only websocket urls are supported.
47-
```javascript
48-
import MEWconnect from "@myetherwallet/mewconnect-web-client"
49-
import Web3 from "web3"
50-
51-
const ETH_JSONRPC_URL = "wss://mainnet.infura.io/v3/<YOUR_INFURA_API_KEY>"
52-
const CHAIN_ID = 1
53-
54-
// Initialize MEWconnect
55-
export const mewConnect = new MEWconnect.Provider()
56-
57-
// Initialize a Web3 Provider object
58-
export const ethereum = mewConnect.makeWeb3Provider(CHAIN_ID, ETH_JSONRPC_URL)
59-
60-
// Initialize a Web3 object
61-
export const web3 = new Web3(ethereum)
62-
63-
```
64-
65-
### Use EIP-1102 to obtain authorization and get Ethereum accounts
66-
67-
Invoking EIP-1102 will show a QR code dialog if the user's mobile wallet is not
68-
already connected to their browser. The following code should run in response to
69-
a user-initiated action such as clicking a button to ensure the pop up is not
70-
blocked by the browser.
71-
72-
```javascript
73-
// Use eth_RequestAccounts
74-
ethereum.send("eth_requestAccounts").then((accounts) => {
75-
console.log(`User's address is ${accounts[0]}`)
76-
77-
})
78-
79-
// Alternatively, you can use ethereum.enable()
80-
ethereum.enable().then((accounts) => {
81-
console.log(`User's address is ${accounts[0]}`)
82-
})
83-
```
84-
85-
That's it! Once the connection between the phone and the site is established, the Web3 object
86-
(`web3`) and the Web3 Provider (`ethereum`) are ready to be used as usual.
87-
88-
## MEWconnect.Provider
89-
90-
### Options
91-
The MEWconnect.Provider can take an options object with the following fields:
92-
93-
- windowClosedError (default ```false```) Indicates whether the provider should throw an error when the popup window is closed by the user.
94-
95-
### Events
96-
```javascript
97-
const mewConnect = new MEWconnect.Provider()
98-
mewConnect.on('[event]')
99-
```
100-
- popupWindowClosed
101-
102-
Emitted when the popup window is closed by the user
103-
104-
- disconnected
105-
106-
Emitted when the user becomes disconnected (Both by disconnecting and if the connection is broken)
107-
108-
---
109-
## Example
110-
An example may be found in the example directory
111-
112-
---
113-
114-
## Tokens
115-
In order to have your token included in the list of tokens identified by the app the token needs to be included as a token in the [ethereum-lists](https://github.com/MyEtherWallet/ethereum-lists) repository.
116-
117-
Instructions one how to add a token there may be found [here](https://kb.myetherwallet.com/en/tokens/adding-token-as-a-default/)
118-
119-
## Debugging
120-
121-
The MEWconnect client uses the debug library to provide verbose debug logging. In local storage add the key 'debug' with the value:
122-
- \*
123-
- to see everything
124-
- MEWconnect: *
125-
- to see everything related to the MEWconnect client
126-
- MEWconnect:connection-state
127-
- to see the connection state when it changes
128-
- MEWconnect:webRTC-communication
129-
- to see the events and signals related to webRTC
130-
- MEWconnect:websocketWrapper
131-
- to see the events related to setting up the webRTC connection
132-
- MEWconnect:*,MEWconnectVerbose:*,simple-peer
133-
- what we usually use for debugging
134-
135-
136-
<br>
137-
<br>
138-
<br>
139-
<br>
140-
<br>
141-
<br>
142-
<br>
143-
<br>
144-
145-
----
146-
147-
148-
149-
150-
151-
152-
153-
154-
155-
156-
157-
158-
159-
160-
161-
162-
163-
164-
165-
166-
167-
168-
### Using only the wallet with an external web3 instance (not recommended)
169-
170-
Install the client
171-
```npm i @myetherwallet/mewconnect-web-client```
172-
173-
174-
175-
176-
### Get the code
177-
The example requires both MEWconnect-web-client (this repo) and MEWconnect-Signal-Server (MEWconnect-hanshake-server)
178-
179-
```
180-
git clone https://github.com/MyEtherWallet/MEWconnect-web-client.git
181-
```
182-
Install the dependencies:
183-
184-
```
185-
npm install
186-
```
187-
188-
Start the server serving the example initiator and receiver:
189-
```
190-
npm start
191-
```
192-
193-
###### Get the signaling server
194-
Clone the repo:
195-
196-
```
197-
git clone https://github.com/MyEtherWallet/MEWconnect-hanshake-server.git
198-
```
199-
Install the dependencies:
200-
201-
```
202-
npm install
203-
```
204-
205-
Start the signaling server:
206-
```
207-
npm start
208-
```
209-
210-
### Usage
211-
Two Peers are needed with one designated as the Initiator and the other as the Receiver.
212-
213-
Require the MEWconnect client
214-
```javascript
215-
let mewConnect = require('@myetherwallet/mewconnect-web-client').Client;
216-
```
217-
218-
Initiate the client
219-
```javascript
220-
let mewConnectClient = mewConnect.init();
221-
```
222-
223-
MEWconnect Client functions as an event emitter.
224-
The connection details are passed along with the 'codeDisplay' event
225-
```javascript
226-
mewConnectClient.on('codeDisplay', code => {
227-
// do something with the code.
228-
// to work with the MEWconnect Mobile applications display it as a qrcode
229-
}
230-
```
231-
232-
233-
Now call the initiatorStart method to create the connection details:
234-
```javascript
235-
mewConnectClient.initiatorStart('https://signal-server-url')
236-
```
237-
238-
Once a p2p connection is established the client will emit a 'rtcConnected' event
239-
```javascript
240-
mewConnectClient.on('rtcConnected', () =>{
241-
alert('congrats you are connected to mew connect!')
242-
})
243-
```
244-
245-
Once a connection is extablished call the 'sendRtcMessage' method to interact with the app
246-
```javascript
247-
mewConnectClient.sendRtcMessage('address', {})
248-
```
249-
250-
The 'sendRtcMessage' method takes two parameters (message type, message data)
251-
252-
To get the response listen for an event matching the sent message type
253-
```javascript
254-
mewConnectClient.on('address', address => {
255-
alert('got address: ' + address)
256-
})
257-
```
258-
259-
Currently the app supports two other message types: 'signMessage', and 'signTx'
260-
261-
exists you can get the address or send a transaction or message to the mobile app for signing.
262-
263-
The data portion of those two message types are:
264-
265-
**signMessage**
266-
```json
267-
{
268-
hash: 'hash of the message to be signed',
269-
text: 'text of the message to be signed'
270-
}
271-
```
272-
273-
**signTx**
274-
```json
275-
{
276-
nonce:"0x00",
277-
gasPrice:"0x098bca5a00",
278-
gas:"0x5208",
279-
to:"0xc3982F1DbAB6DA9d95F579B9A5f9c5CAb13F8cfC",
280-
value:"0xb1a2bc2ec50000",
281-
data:"",
282-
chainId:3
283-
284-
}
285-
```
286-
287-
If the p2p connection fails to be established the client can attempt to use an intermediate TURN server to facilitate the connection.
288-
To signal a failed p2p attempt the client can call the 'useFallback' method on the client
289-
```javascript
290-
mewConnectClient.useFallback()
291-
```
292-
293-
Additional events are emitted at various points to signal various stages of the connection
294-
295-
**SocketConnectedEvent**
296-
- successfully connected to the signal server
297-
298-
**RtcInitiatedEvent**
299-
- Peer identified via the signal server, and a p2p connection will be attempted
300-
301-
**UsingFallback**
302-
- One of the peers failed to establish a p2p connection and will attempt to use an intermediate TURN server to facilitate the connection
303-
304-
**RtcConnectedEvent**
305-
- p2p connection established
306-
307-
**RtcClosedEvent**
308-
- p2p connection closed
309-
310-
**RtcDisconnectEvent**
311-
- p2p disconnected
312-
313-
**RtcErrorEvent**
314-
- p2p connection error occured
315-
316-
317-
318-
319-
320-
321-
---
322-
##### Browser
323-
mew-connect-client can be included for use in the browser via webpack or browerfy
4+
Documentation for MEWconnect-web-client can be found [here](https://myetherwallet.github.io/MEWconnect-Protocol-Documentation/)

0 commit comments

Comments
 (0)
Please sign in to comment.