Browser Node Quick Start¶
This quick start will guide you through getting to a simple e2e transfer flow running between two peers running browser nodes that runs through an intermediary routing node.
We assume you're starting with an existing JS application that runs in the browser.
Local Development With Local Blockchains¶
Spinning Up a Trio Stack Locally¶
View server node docs to spin up a trio stack.
This gives you a router to interact with and non-router nodes to test transfers to and from, as well as local EVM chains and messaging services.
Spinning Up the iframe App Locally¶
The iframe app will securely store the node's private keys in a separate browser window which's storage cannot be accessed by other windows, i.e. dapps which integrate the browser node.
Run the app by running the command:
make start-iframe-app
The iframe app is configured by default to communicate with the local stack and EVM chains that are spun up with make start-trio
. There is a config file generated at the root called browser.config.json
which uses the same configuration API as documented here.
The iframe app runs by default at http://localhost:3030
.
Using Docker
We have published the iframe app on Docker. You can run it like so:
docker run -p "5000:5000" connextproject/vector_iframe_app:latest
Application Installation and Instantiation¶
You can install the browser-node
into a React (or similar) application via npm:
npm i @connext/vector-browser-node @connext/vector-utils @connext/vector-types
Somewhere in your page load code, you can instantiate the browser node using the connect
call, specifying the local iframe app:
const client = await BrowserNode.connect({
iframeSrc: "http://localhost:3030",
logger: pino(),
});
Once this is connected, the client
has the interface documented in the node API docs. The steps to follow for basic operation are:
- Setup a channel with your local router.
- Deposit funds into your channel, transfer, and withdraw.
Local Development With Remote Testnets¶
If you do not want/need to run a local blockchain/router/messaging service, you can skip the steps above and jump straight to "Application Installation and Instantiation". The connect call will instead be:
const client = await BrowserNode.connect({
logger: pino(),
});
This will connect to our hosted iframe app at https://wallet.connext.network
which is configured to communicate to the testnets and mainnets that we currently support. You can setup channels with router nodes from our list of hosted nodes.