web3-state-manager

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:

import user from './user' // a reducer from a previous file
import { createStore, combineReducers } from 'redux'
 
// uses combine reducers to split up reducer logic
const reducer = combineReducers({ user });
const store = createStore(reducer);
export default store;
 
combineReducers({user, web3, validNetwork, account, contract})

example of redux config after adding web3 state manager:

import user from './user' // a reducer from a previous file
import { createStore, combineReducers } from 'redux'
// import reducers from web3-state-manager
import {web3, validNetwork, account, contract} from 'web3-state-manager'
 
// simply add the web3-state-manager custom reducers (one ore more) to combine reducers
const reducer = combineReducers({user, web3, validNetwork, account, contract})
const store = createStore(reducer);
export default 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:

import { Web3StateManager } from 'web3-state-manager';
 
render(){
  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:

{
  "contractName": "NoteOwnership",
  "abi": [...]
  ...
}

To interact with this contract:

import Contract from '<path>/contracts/Contract.json'
import { Web3StateManager } from 'web3-state-manager';
 
render(){
  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
 
function mapStateToProps(state){
  return(
    contract: state.contract
  )
}
 
render(){
  // access your contract via props
  const { contract } = this.props;
  return(
    <button onClick={() => {contract.randomFunc()}}>Call random smart contract function</button>
  )
}

view on npm: https://www.npmjs.com/package/web3-state-manager