View on github: https://github.com/Schwartz10/web3-state-manager/
This node module is exceptionally useful for developers writing blockchain apps using the react-redux
module
The web3-state-manager does exactly what it's named - it syncs your application's front-end state with the state of web3 through the redux store.
It's also capable of placing a single smart contract in your redux store. Find configuration instructions below.
The Challenge:
Managing the front end application state with web3 can get tricky - especially when users switch between networks and accounts on MetaMask.
Configuration:
npm install web3-state-manager
Wherever you define your redux store:
example of redux config before adding web3 state manager:
// uses combine reducers to split up reducer logicconst reducer = ;const store = ;;
example of redux config after adding web3 state manager:
// import reducers from web3-state-manager // simply add the web3-state-manager custom reducers (one ore more) to combine reducersconst reducer = const store = ;;
Then, on your front end using React, simply render the Web3StateManager component anywhere in your app, as long as its rendered after the redux Provider Component:
; { return <div> ... /* other JSX in a high up component */ <Web3StateManager /> </div> }
Note: For performance reasons, it's recommended to render Web3StateManager as high up in your render tree as possible - rerendering the Web3StateManager component could cause weird bugs.
Passing props to the Web3StateManager Component:
Web3StateManager takes props. All props are optional.
Prop | Value | Description |
---|---|---|
interval |
Number (ms) | How often Web3StateManager should re-ping web3 for updates |
requiredNetwork |
Number (1 => Mainnet, 2 => Morden, 3 => Ropsten, 4 => Rinkby) | Sets validNetwork prop in redux store to false if the user is not on the requiredNetwork |
localProvider |
URI (localhost:8545) | Instructs the web manager to construct the web3 object from a local provider instead of using one injected from the browser. Do not use this prop in addition to using MetaMask or another web3 injection extension. The localProvider will always take precedent |
contract |
compiled smart contract from Truffle | will put the compiled and deployed smart contract on the redux store. The compiled contract must also be migrated to the same network that the user is on. See below for further instructions |
Interacting with smart contracts through Web3StateManager and redux
If you're using Truffle, after contract compilation you should have a build directory in your file structure containing JSON's that look like:
To interact with this contract:
; { return <div> ... /* other JSX in a high up component */ <Web3StateManager contract=Contract /> </div> }// simply pass the compiled contract to the Web3StateManager and it will take care of the rest
In any component, subscribe to the contract
property of state and you can call contract functions directly
// outside of your component, require your contract in mapStateToProps { return contract: statecontract } { // access your contract via props const contract = thisprops; return <button onClick= {contract}>Call random smart contract }
view on npm: https://www.npmjs.com/package/web3-state-manager