# connext-browser-sdk > Browser SDK for Connext Latest version **1.0.3** (published 2020-08-23) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install connext-browser-sdk pnpm add connext-browser-sdk yarn add connext-browser-sdk bun add connext-browser-sdk ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support; large bundle. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.3 | | Published | 2020-08-23 | | First published | 2020-08-23 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 9 | | Unpacked size | 11.7 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 10 | | Author | Connext & Friends | | Maintainers | pedrouid | ## Links - npm: https://www.npmjs.com/package/connext-browser-sdk - Repository: https://github.com/connext/browser-sdk - Homepage: https://github.com/connext/browser-sdk#readme - Issues: https://github.com/connext/browser-sdk/issues - npm.io page: https://npm.io/package/connext-browser-sdk ## Dependencies (9) - [react](https://npm.io/package/react.md) ^16.13.1 - [rollup](https://npm.io/package/rollup.md) ^2.26.4 - [magic-sdk](https://npm.io/package/magic-sdk.md) ^2.4.7 - [react-dom](https://npm.io/package/react-dom.md) ^16.13.1 - [eventemitter3](https://npm.io/package/eventemitter3.md) 4.0.4 - [react-qr-code](https://npm.io/package/react-qr-code.md) ^1.0.2 - [@connext/types](https://npm.io/package/@connext/types.md) ^7.3.2 - [@connext/client](https://npm.io/package/@connext/client.md) ^7.3.2 - [@connext/channel-provider](https://npm.io/package/@connext/channel-provider.md) ^7.3.2 ## Recent versions - 1.0.3 (latest) — 2020-08-23 - 1.0.2 — 2020-08-23 - 1.0.1 — 2020-08-23 - 1.0.0 — 2020-08-23 ## README ![Alt text](https://github.com/connext/browser-sdk/blob/master/public/Connext-Horizontal-Logo.png?raw=true) # Browser SDK The Connext Browser SDK is the simplest way to add micropayments to any web app. [Connext](https://connext.network) is the protocol for p2p micropayments, built using [state channels](https://docs.connext.network/en/latest/quickstart/introduction.html#state-channel-basics) on the Ethereum blockchain. This SDK creates a [Connext client](https://docs.connext.network/en/latest/quickstart/clientInstantiation.html) 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](https://magic.link). - 💳 Debit card on/offboarding via [Moonpay](https://moonpay.io). - ⛽ 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](https://metamask.io). (coming soon!) ### Table of Contents - [Installation](https://github.com/connext/browser-sdk/blob/master/README.md#installation) - [Quick Start](https://github.com/connext/browser-sdk/blob/master/README.md#quick-start) - [Advanced Configuration](https://github.com/connext/browser-sdk/blob/master/README.md#advanced-configuration) - [API Reference](https://github.com/connext/browser-sdk/blob/master/README.md#api-reference) - [Development](https://github.com/connext/browser-sdk/blob/master/README.md#development) ## Installation You can install the SDK using npm: ```bash npm i --save connext ``` ## Quick Start After installing, import the SDK into your web app, instantiate it and open the login UI. ```javascript 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: ```javascript 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: ```javascript await connext.deposit(); ``` You can query balance or the user's SDK identifier with: ```javascript const id = connext.publicIdentifier; // id = "indra123abc..." const balance = await connext.balance(); // balance = "1.234567" ``` And send micropayments using a recipient identifier and amount: ```javascript await connext.transfer("indra987zxy...", "12.5"); ``` Lastly, to open the withdraw UI: ```javascript 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](https://docs.connext.network/en/latest/how-to/deploy-indra.html) and/or token too -- just pass in the following when instantiating: ```javascript 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: ```bash $ git clone git@github.com:connext/browser-connext.git $ make browser-sdk ``` Now, you should be able to open the demo and test like so: ```bash $ make start ``` --- _Source: https://npm.io/package/connext-browser-sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._