Skip to content

README.adoc

Latest commit

 

History

History
145 lines (99 loc) · 3.66 KB

README.adoc

File metadata and controls

145 lines (99 loc) · 3.66 KB

Interbit UI Tools

A set of UI tools, including the Interbit middleware for connecting chains to a GUI and using them with React and Redux.

Interbit Middleware

Redux middleware to connect configured interbit blockchains to redux store state.

This middleware creates a connected interface and a hypervisor, then loads and connects to chains and peers that have been specified in the index.html file.

Setting Up

Installing dependencies

The middleware is included in the interbit-ui-tools package.

npm i --save interbit-ui-tools redux redux-saga

Creating the Redux Store

Because the interbit middleware contains a saga that must be run there are several steps to including it in your redux store.

  1. Creating the Interbit middleware

  2. Creating the Redux Saga middleware

  3. Including the reducer

  4. Including the middlewares with your store on createStore

  5. Running the saga

    {% include "code/README-saga.js" %}

Specifying Chains in index.html

The middleware automatically connects to any chains that are specified on the first DOM element in index.html with an id of interbit.

Specify chain IDs using a data tag starting with data-chain-id-chain-name. The chain-name will be in camelCase when it is used as a chain alias to mount state on in the middleware’s redux store.

{% include "code/README-index-div.html" %}

The above data tag results in a chain named myChain being mounted in the middleware state as follows:

{% include "code/README-chains-html.js" %}

The chains property contains chain state for each of the connected chains and the chainData section contains metadata about the chains including their status (LOADING, BLOCKING, etc.) as well as their chainId.

Caution

Incomplete content. These statuses need to be documented in an API reference and linked to from here.

Specifying peers in index.html

You can specify peers for your browser node to connect to in index.html as well. There are specified the same was as chains using the data-peer-hints attribute.

If no port is specified the middleware will attempt to connect on port 80 for http connections and 443 for https connections.

To specify multiple peers, separate them using a comma.

If no peers are specified the middleware attempts to connect to localhost:5000, which is the default set by interbit when it runs a node.

<div id="interbit" data-peer-hints="your-blockchain-node.com,localhost:1234" />

Using Interbit Config to Specify Chains in index.html

Interbit config can be used to automatically update chain IDs as you generate new chains and adjust your network configuration.

To configure an application which has the index.html file in <cwd>/public/index.html add the following to the Interbit configuration.

{% include "code/README-chains-config.js" %}

Getting Interbit State

Getting interbit state once the middleware is attached works through the redux store.

const state = store.getState()
console.log(state.interbit)

Dispatching to Interbit

The middleware comes with an action creator that wraps your blockchain action in a redux action with the chain alias of the chain you wish to dispatch your action to.

The middleware intercepts the blockchain action and returns the promise from the blockchain to the user after dispatch. This promise will resolve when the action is blocked or reject on failure.

{% include "code/README-dispatch.js" %}

Advanced Use

The middleware can be configured to allow authorized joins to interbit account chains.

Caution
 This content is incomplete.