paritytech/parity-reactive-ui

Name: parity-reactive-ui

Owner: Parity Technologies

Description: The Bond-based Parity Reactive UI library

Created: 2017-01-26 15:14:47.0

Updated: 2018-01-15 15:51:29.0

Pushed: 2018-01-09 11:13:50.0

Homepage: null

Size: 687

Language: JavaScript

GitHub Committers

Other Committers

README

oo7-react

A small library to provide oo7 (Joint Asynchronous Mapping Expression System) Bond-based Reactive components for Ethereum and Parity.

The reactive components provided are:

• AccountIcon (an identicon image for a given account);

• AccountLabel (a full Semantic UI label for a given account);

• InlineAccount (a simple display component for an account designed to flow in text);

• SigningButton (a button which completes a message-signing operation when clicked and displays the progress to the user);

• SigningProgressLabel (a full Semantic UI label for displaying the progress of a signing a message);

• TransactButton (a button which posts a transaction when clicked and displays the progress to the user);

• TransactionProgressLabel (a full Semantic UI label for displaying the progress of a transaction);

• BButton (a Semantic UI derived Button that accepts Bonds for certain props);

• InputBond (a Semantic UI derived Input component that accepts a Bond for its output);

• AddressInputBond (an InputBond-like component for addresses);

• HashBond (an InputBond-like component for 32 byte hashes);

• URLBond (an InputBond-like component for URLs).

Installation

m install parity-reactive-ui --save

Usage

 Assume React is already required.
r pru = require('parity-reactive-ui'),
  InlineAccount = pru.InlineAccount,
  oo7parity = require('oo7-parity'),
  setupBonds = oo7parity.setupBonds;

 We assume parity has been polluted into the global namespace.
rity.bonds = setupBonds(parity.api);

ass App extends React.Component {
  render() {
      return (<div>
          Your current address is <InlineAccount address={parity.bonds.me} />.
        </div>);
  }

Hacking

There are two hacking environment available in this repo:

<summary> `npm run watch:dev` # works in the parity dapp environment, no hot reload.</summary>

Before running the main command, this setup requires exposing the `public` directory as a local dapp:

`ln -s $PWD/public /path/to/parity/dapps/pruit`

`Restart parity` and head over to the PRUIT app. This environment is suitable to test any component that interact with the Parity DApp API

<summary> `npm run dev` # works in localhost, has hot reload </summary>

Go to `localhost:9999`

This environment is suitable to quick test any parity-reactive-ui components that does not directly interact with the Parity dapp API.

Tests

m test

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

Release History

• 0.1.2 Fix issue with Balance.
• 0.1.1 Initial release