@myetherwallet/mewconnect-web-client

Getting Started

Running the Example:

The example requires both MEWconnect-Client (this repo) and MEWconnect-Signal-Server (mew-signer-hs)

Clone the repo:

git clone <repo address>

Install the dependencies:

npm install

Start the server serving the example initiator and receiver:

npm start

Get the signaling server

Clone the repo:

git clone <repo address>

Install the dependencies:

npm install

Start the signaling server:

npm start

Open two browser tabs/windows:-->

Usage

In the browser via the file /browser/MewConnect.min.js

Two Peers are needed with one designated as the Initiator and the other as the Receiver.

let mewConnectClient = new MewConnect.Client(communicatorFunc, loggingFunc, depends);

(MewConnect.Client takes the same parameters)

The MewConnect takes:

• communicatorFunc (Optional):

  • A function or null
  • If a function it is called on each lifeCycle event.
  • with two arguments:
    • a String denoting the specific signal
    • null or an object containing data related to the signal;

        let signalStateChange = function(signal, data){
          if(signal === "codeDisplay"){
              console.log(data); // this is the code that gets entered into the receiver
            };
          };
  

  • If null listeners can be attached for specific lifecycle events via registerLifeCycleListener

• loggingFunc (Optional):

  • a optional function to provide logging or null (to use the default)

• additionalLibs (Optional):

  • a dictionary (object) containing dependencies as they are declared in the scope.
    • the dependencies are:
      • node.js crypto or polyfill
      • secp256k1
      • ethereumjs-util
      • node.js buffer.Buffer (e.g. require("buffer").Buffer) or polyfill
      • simple-peer or MewRTC (an ES6 port of simple-peer)

  •     let cryptoFuncs = new MewConnect.Crypto(crypto, secp256k1, ethereumjs-util, buffer.Buffer);
    
        let depends = {wrtc: MewRTC,
             cryptoImpl: cryptoFuncs,
              io: io,
              ethUtils: ""
        };
    

The url of the signaling server is passed to the initiatorStart method on MewConnectInitiator which begins the sequence by connecting to the signaling server and waiting for the signal indicating a receiver peer is ready.

let url = "https://localhost:3001";  //Url to the signaling server
mewConnectInitiator.initiatorStart(url);

Initiator

let mewConnectInitiator = new MewConnect.Initiator(communicatorFunc, loggingFunc, depends);

Receiver

let mewConnectReceiver = new MewConnect.Receiver(communicatorFunc, loggingFunc, depends);

The url of the signaling server and an object containing the key and connection Id from the initiator is passed to the receiverStart method on MewConnect. This begins the sequence of connecting to the signaling server and then creating the WebRTC connection between the Initiator and Receiver.

• if no initiator peer exists for the Receiver then the connection will fail.

let parameters = {
    key: "part of the connection code before the dash",
    connId: "part of the connection code after the dash"
};

or using the helper on MewConnect

let parameters = mewConnectReceiver.parseConnectionDetailString(connectionCode);

let url = "https://localhost:3001"; //Url to the signaling server
mewConnectReceiver.receiverStart(url, parameters);

Webpack

The dist folder version contains only the Web Client for use in a bundle via a require call.

Browser

The contents of the browser directory expose all the components for setting up the Web Core, and a Client on window.

It can be added via a script tag:

<script src="./browser/MewConnect.min.js"></script>