node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »

reflux-tx

reflux-tx

Reflux store & higher order component for monitoring Ethereum transactions in real-time.

Features

  • Serverless (excluding eth client)
  • Persistent - uses localstorage, retains state over page refreshes
  • Associate arbitrary data with any transaction
  • Detect chain reorgs and failed transactions
  • States filterable by extra properties you can associate w txs
  • Multiple chain support

TX States

states

pending

TX has been accepted as valid, is waiting for receipt into a valid block

received

TX has been received into a block, is waiting for sufficient confirmation

dropped

TX is dropped when a tx with equal or higher nonce has been received

confirmed

Enough blocks have passed since receipt to consider the TX confirmed & a reversion is sufficiently unlikely

failed

TX is failed when a tx with equal or higher nonce is confirmed

Installation

npm install reflux-tx

or for the browserified version which exposes global refluxTX:

<script type='text/javascript' src='./dist/refluxTX.min.js'></script>

If using with webpack, you'll need these config additions to support localforage:

    module: {
        noParse: [ /localforage\/dist\/localforage.js/ ],
        loaders: [ {test: /localforage\/dist\/localforage.js/, loader: 'exports?localforage'} ]
    },
    resolve: {
        alias: { 'localforage': 'localforage/dist/localforage.js' }
    }
    

Usage

initialization

Before connecting to the store, you must first initialize it in a toplevel component with TXActions.connect(). This loads the genesis identifier required for storing any transaction data.

Available options

versions >= 0.2.0

Note: for version 0.2.0 and above, web3 is a required parameter for TXStore.connect so the provider option is removed

Field Name Description Default
confirmCount Number of blocks before a tx is sufficiently confirmed 12
bufferSize Max number of resolved transactions (failed + confirmed) to keep in localstorage per-account 100

Example:

TXActions.connect(web3, {confirmCount: 10, bufferSize: 5})

versions < 0.2.0

Field Name Description Default
provider web3 http provider assumes already set
confirmCount Number of blocks before a tx is sufficiently confirmed 12
bufferSize Max number of resolved transactions (failed + confirmed) to keep in localstorage per-account 100

Example:

TXActions.connect({provider: 'http://localhost:8545', confirmCount: 10, bufferSize: 5})

create a transaction

Add transaction to TXStore with TXActions.add(txInfo) where txInfo is an object or array of objects containing at least a {hash: '0x..'} property referencing a transaction hash. Any additional properties will be saved and can be used to filter out transactions by arbitrary data.

Example:

TXActions.add({
    hash: '0x30f42ba1f7d816d850fd172e128ffbacee7564e0cb41cc27c1e9af743aace6bc',
    txType: 'deposit',
    parentAddress: '0x26ac60acb581516b175010730a2bcee041bb0099'
});

view transactions

React components can use the TXComponent wrapper to inherit the latest blockNumber, timestamp (block.timesamp), and blockHash along with array representations of each transaction state as its properties.

Transaction state objects have 3 possible fields

Field Name Value In tx states
info txInfo added via TXActions.add() *
data object returned from web3.eth.getTransaction *
receipt object returned from web3.eth.getTransactionReceipt pending, received, confirmed

Example:

    render() {
        <TXComponent filter={{txType: 'deposit'}} >
            <MyComponent />
        </TXComponent>
    }

Would be represented in MyComponent as

console.log(this.props.received)
[{info: {...}, receipt: {...}, data: {...}}, ...]
 
console.log(this.props.confirmed)
[{info: {...}, receipt: {...}, data: {...}}, ...]
 
console.log(this.props.pending)
[{info: {...}, data: {...}}, ...]
 
console.log(this.props.dropped)
[{info: {...}, data: {...}}, ...]
 
console.log(this.props.failed)
[{info: {...}, data: {...}}, ...]
 
console.log(this.props.blockNumber)
30000

Example

For another example check out reflux-tx-example

Notes

reflux-tx will only subscribe to new block info when it's needed for tx confirmations. For that reason, a component's block properties (blockNumber, timestamp, blockHash) will update only while you have pending or received transactions matching the wrapping TXComponent's filter and keys.