Name: reflux-tx
Owner: ConsenSys
Description: Reflux store and a component wrapper to connect React components with Ethereum transaction states
Created: 2015-08-05 02:12:13.0
Updated: 2017-11-21 19:55:48.0
Pushed: 2016-05-14 22:23:08.0
Size: 1590
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Reflux store & higher order component for monitoring Ethereum transactions in real-time.
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' }
}
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 < /b>
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})
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:
tions.add({
hash: '0x30f42ba1f7d816d850fd172e128ffbacee7564e0cb41cc27c1e9af743aace6bc',
txType: 'deposit',
parentAddress: '0x26ac60acb581516b175010730a2bcee041bb0099'
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
ole.log(this.props.received)
fo: {...}, receipt: {...}, data: {...}}, ...]
ole.log(this.props.confirmed)
fo: {...}, receipt: {...}, data: {...}}, ...]
ole.log(this.props.pending)
fo: {...}, data: {...}}, ...]
ole.log(this.props.dropped)
fo: {...}, data: {...}}, ...]
ole.log(this.props.failed)
fo: {...}, data: {...}}, ...]
ole.log(this.props.blockNumber)
0
For another example check out reflux-tx-example
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.