Parity Bonds

It’s time to get down and dirty with the blockchain.

For this we will introduce the oo7-parity package, which provides a high-level reactive Bond API.

To set this up, all we need do is import bonds from the oo7-parity module, so ensure you have this at the top of your file:

1
import { bonds } from 'oo7-parity'

Watch the block

For our first task, we will introduce the simplest of all bonds: bonds.height. This evaluates to the number of the latest block, expressed as a simple number.

In app.jsx:

1
2
3
4
5
6
7
export class App extends React.Component {
  render () {
    return (
      <Rspan>{bonds.height}</Rspan>
    )
  }
}

It’s not especially pretty so you can add some style on it.

We also provide the formatBlockNumber function:

1
const formatBlockNumber = (n) => '#' + ('' + n).replace(/(\d)(?=(\d{3})+$)/g, '$1,')

You can use it through

1
import { bonds, formatBlockNumber } from 'oo7-parity'

Blocks

The block number is great and all, but perhaps we’re more intereseted in the latest block itself. Parity can help us there with the bonds.blocks object. This is a lazy-evaluated ‘array’ of bonds which can subscribe to. To give yourself an idea of its capabilities, let’s try it out in the console. First we will expose the bonds object to the environment by adding this at the end of our obejct’s constructor:

1
window.bonds = bonds

Having reloaded, quickly open the Chrome JS console, alter the environment to 127.0.0.1 and evaluate the block at number 69 with bonds.blocks[69].log()

Note that since it’s all asynchronous, we must use the .log() trick to feed the result into the console (it’s exactly equivalent to .map(console.log)) The result is, of course, the block object representing the 69th mined block on this chain.

Naturally, bonds.blocks is able to accept any number, even a bond, as its subscript. Let’s make our dapp always give us the timestamp of the latest block.

1
2
3
4
<div>
  Latest block timestamp is:
  <Rspan>{bonds.blocks[bonds.blocks.height].map(b => b.timestamp).map(_ => _.toString())}</Rspan>
</div>

That map is a bit cumbersome, the bond API knows about subscripting, which means the .timestamp can be moved out of the map

Furthermore, bonds.blocks[bonds.height] is a fairly common expression. So much so that it has a shorter alias: bonds.head, so in fact the simplest means of expressing this becomes:

1
{ bonds.head.timestamp.map(_ => _.toString())}

Composing expressions

These expressios are sometimes very useful, but often you want to do some blockchain based computation on this information.

Parity puts various means at your disposal to help you here:

  • bonds.balance(address): evaluates to the current balanece of account at address

  • bonds.transactionCount(address): evaluates to the current transaction count (‘nonce’) of account at address

  • bonds.code(address): evaluates to the current ‘contract’ code of account at address

  • bonds.storageAt(address, location): evaluates to the value in storage location of account at address

Use the first one:

1
2
3
4
5
6
<div>
  Current block authors balance is:
  <Rspan>
    {bonds.balance(bonds.head.author).map(formatBalance)}
  </Rspan>
</div>

Our balance

Parity can help us get information about our own accounts in a reactive manner.

Some apis like:

  • bonds.coinbase: evaluates to the node’s current block authoring address.

  • bonds.accounts: evaluates to the list of accounts available for the dapp to use.

  • bonds.me: evaluates to the preferred account for this dapp to use. In parity, this is the account visible in the Parity Signer at the bottom right of the page.

  • bonds.accountsInfo: evaluates to the mapping between dapp-visible addresses and account metadata.