@dapp-stack/redux-eth

Redux wrapper around Ethereum. We use ethers.js

Installation

# Yarn
yarn add @dapp-stack/redux-eth

# NPM
npm install @dapp-stack/redux-ieth

Initialize with react

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { combineEpics, createEpicMiddleware } from 'redux-observable';
import { combineReducers, compose, createStore, applyMiddleware } from 'redux';
import * as eth from "@dapp-stack/redux-eth";

const rootEpic = combineEpics(
  ...eth.epics
);

const rootReducer = combineReducers({
  eth: eth.reducer
});

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const epicMiddleware = createEpicMiddleware();
const store = createStore(
  rootReducer,
  composeEnhancers(
    applyMiddleware(epicMiddleware)
  )
);

epicMiddleware.run(rootEpic);

ReactDOM.render(
  <Provider store={store}>
    <YourComponent />
  </Provider>, 
  document.getElementById('root')
);

State

Structure of the state;

type ProviderState = {
  instance?: ethers.providers.Web3Provider;
  network?: ethers.utils.Network;
  string?: number;
  address?: string;
  transactionCount?: number;
  blockNumber?: number;
  blocks: ethers.providers.Block[];
  transactions: ethers.providers.TransactionResponse[];
  errors: {
    [event: string]: Error | null;
  };
  loading: {
    [event: string]: boolean;
  };
}

type ContractsState = { [name: string]: ethers.Contract }

type State = {
  contracts: ContractsState;
  provider: ProviderState;
}

Actions

Actions name follow UNIX style:

• provider.start: Initialize metadata from the network
• provider.findTransaction: Find a transaction by hash
• provider.findBlock: Find a block by number
• contracts.load: Load the contracts, takes the tracker as parameter

You can use them with redux as follow:

connect(
  mapStateToProps,
  {
    start: ipfs.actions.provider.start,
  },
)(YourComponent);

You can also see a detailed usage of the package in our dev-tools