https://github.com/consensysmesh/reflux-tx
Reflux store and a component wrapper to connect React components with Ethereum transaction states
https://github.com/consensysmesh/reflux-tx
Last synced: 12 months ago
JSON representation
Reflux store and a component wrapper to connect React components with Ethereum transaction states
- Host: GitHub
- URL: https://github.com/consensysmesh/reflux-tx
- Owner: ConsenSysMesh
- License: mit
- Created: 2015-08-05T02:12:13.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-05-14T22:23:08.000Z (about 10 years ago)
- Last Synced: 2024-11-11T19:41:42.962Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 1.52 MB
- Stars: 30
- Watchers: 16
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
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`:
``
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() {
}
```
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](https://github.com/ckeenan/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`.