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

  npm install parity-reactive-ui --save

Usage

  // Assume React is already required.
  var 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.
  parity.bonds = setupBonds(parity.api);

  class 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:

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

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

  npm 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