Skip to content
This repository has been archived by the owner on May 28, 2021. It is now read-only.

Latest commit

 

History

History
119 lines (83 loc) · 7.29 KB

README.md

File metadata and controls

119 lines (83 loc) · 7.29 KB
Raw

Alt text

Browser SDK

The Connext Browser SDK is the simplest way to add micropayments to any web app.

Connext is the protocol for p2p micropayments, built using state channels on the Ethereum blockchain. This SDK creates a Connext client inside of an iframe in your browser page, and then uses that client along with some minimal UI components to dispatch transfers to a recipient.

The SDK supports the following features:

  • 🎩 Email-based login via Magic.
  • 💳 Debit card on/offboarding via Moonpay.
  • ⛽ End-to-end Ethereum gas (transaction fee) abstraction.
  • 💵 Transfers in USD by default, with optional customizeability to other currencies.
  • 🦊 Login using any popular Ethereum wallet such as Metamask. (coming soon!)

Table of Contents

Installation

You can install the SDK using npm:

npm i --save connext

Quick Start

After installing, import the SDK into your web app, instantiate it and open the login UI.

import ConnextSDK from "connext";

const connext = new ConnextSDK();
await connext.login();

Note that by default the sdk will spin up in staging mode on the Rinkeby Ethereum testnet. You will be able to create and send transactions, but they will not use real money. To send real-world value, you can instantiate the sdk in production mode:

const connext = new ConnextSDK("production");

After going through the login flow, your SDK is now ready to go! Open the deposit UI to put funds into Connext:

await connext.deposit();

You can query balance or the user's SDK identifier with:

const id = connext.publicIdentifier; // id = "indra123abc..."
const balance = await connext.balance(); // balance = "1.234567"

And send micropayments using a recipient identifier and amount:

await connext.transfer("indra987zxy...", "12.5");

Lastly, to open the withdraw UI:

await connext.withdraw();

Advanced Configuration

By default the browser SDK uses Dai, a USD-stable token on Ethereum, and connects to our bootstrap Connext node on testnet or mainnet.

You can use the SDK with your own Connext node and/or token too -- just pass in the following when instantiating:

const connext = new ConnextSDK({
  tokenAddress: "0xabc123...",
  nodeUrl: "https://node.example.com",
  ethProviderUrl: "https://infura.com/abc123",
});

Note that our bootstrap nodes will not work with custom assets. If you are using your own token, you will need to run your own Connext node.

API Reference

Method Example Description Params Response
instantiation const connext = new ConnextSDK('production'); Instantiates SDK with provided config (defaulting to 'sandbox' mode) Either of: String: 'production' or: ConfigObject: { tokenAddress: token address ethProviderUrl: Ethereum node RPC url nodeUrl: Connext node url }
login await connext.login(); Opens the login UI
publicIdentifier const id = connext.publicIdentifier; Gets the user's unique public identifier String e.g. indra123abc...
deposit await connext.deposit(); Opens the deposit UI
withdraw await connext.withdraw(); Opens the withdraw UI
balance await connext.balance(); Gets the user's balance String e.g. 0.12456
transfer await connext.transfer(id, amount); Sends amount to the specified public identifier - String: public identifier of recipient - String: amount to send
getTransactionHistory await connext.getTransactionHistory(); Gets a history of previous transactions //TODO
logout await connext.lougout(); Logs user out and resets SDK state

Development

To work on the Connext Browser SDK itself:

$ git clone [email protected]:connext/browser-connext.git
$ make browser-sdk

Now, you should be able to open the demo and test like so:

$ make start