Most dapps are recreating the same functionality over and over again as others. In essence, every consumer facing application that runs on Ethereum utilizes web3 and therefore must write similar functionality to manage wallet changes, transactions, etc. The Bounties Network is working to build a library that provides these functionalities right out of the box.

Introduction

This sub-library of the bounties-modules consists of the authentication, client, and transactions modules. These will eventually be ripped out into their own library, along with some higher order components to secure wallet-protected areas and walk users through transaction flows.

Before jumping in to see how to use these modules, its important to understand how they work. The main driver is the client. It is running the updateWalletData on loop to detect any changes to wallet access. When it is first initialized and gains access to the wallet it will emit a SET_INITIALIZED event that is picked up by the authentication module. The authentication module will then attempt to retrieve information on the current address being injected by the wallet from a server. Once complete, the getCurrentUserSelector will be filled in with the latest information on that user (if there is any).

Usage

There is really no better way to explain how these modules can be used than checkout our authentication starter kit and bounties starter kit. The rest of the section will explain some examples found in those repositories.

Configuration

import config from '@bounties-network/modules'

config.settings = {
  "networkName": "starter kit",
  "requiredNetwork": "rinkeby",
  "url": {
    "rinkeby": "http://localhost:8000"
  }
}

When only using bounties-modules for web3 management, there are a lot less things necessary to configure. The code block above is an example from the authentication starter kit that only runs on Rinkeby. For a complete explanation of every parameter, check out the configuration documentation.

Protecting Views

render() {
  const { currentUser, loading, showLogin } = this.props
  
  // default to show login
  let content = (
    <Login
      loading={loading}
      showLogin={showLogin}
    />
  )
  
  // show protected content if current user is defined
  if (currentUser) {
    content = <Protected />
  }
  
  return content
}

Protecting a view is as easy as checking if the currentUser has been assigned. The getCurrentUserSelector can be used in mapStateToProps to pass the value through to the component's props.

Handling Transactions

The last major piece in managing web3 is are transactions. The Transactions module offers allows developers to quickly integrate notifications for transaction events quickly. By dispatching setPendingReceipt with the corresponding transaction hash, the module will store the hash and poll it for updates. Once the transaction has been minded on-chain, a SET_TRANSACTION_COMPLETED action will be dispatched. Any saga will be able to listen for that and act accordingly.