Home

Awesome

This package is now deprecated. Please refer to web3-react.

Web3: Webpacked

Building your dApp in React? Check out the sibling React library, web3-webpacked-react!

Example GIF

This project is a drop-in solution for single-page Ethereum dApps. It's a webpacked library consisting of:

Example Projects

Projects using web-webpacked include:

Open a PR to add your project to this list!

Installation

Script Tag

Include the minified bundle (820 KiB) in your source code:

<script src="js/web3Webpacked.min.js"></script>

This binds the library to the window as w3w.

NPM

If you'd like to roll your own webpack solution, you can use the npm package:

npm install web3-webpacked

const w3w = require('web3-webpacked')

In either case, to initialize the package:

window.addEventListener('load', () => {
  console.log('Initializing web3 upon page load.')
  w3w.initializeWeb3(config)
})

If you don't need web3 functionality immediately on page load, you can initialize the package later:

if (document.readyState === 'complete') {
  console.log('Initializing web3 after page load.')
  w3w.initializeWeb3(config)
}

See Config Options for more instructions on what to include in the optional config variable, or Usage to jump right in.

Config Options

The following options can be set in the config variable passed to initializeWeb3.

handler

pollTime

supportedNetworks

Default Values

The default config values are below. You are encouraged to customize these!

let config = {
  handlers: {
    // Prompt the user to e.g. install MetaMask or download Trust
    noWeb3Handler: () => {
      console.error('No web3 instance detected.')
    },
    // Check blockchain-dependent data
    web3Ready: () => {
      console.log('web3 initialized.')
    },
    // Notify the user of error, deal with unsupported networks
    web3ErrorHandler: (error) => {
      if (error.name === networkErrorName) {
        console.error(error.message)
      } else {
        console.error(`web3 Error: ${error}`)
      }
    },
    // Notify the user that they have switched networks, potentially re-instatiate smart contracts
    web3NetworkChangeHandler: (networkId, oldNetworkId) => {
      console.log(`Network switched from ${oldNetworkId} to ${networkId}.`)
    },
    // Notify the user that they have switched accounts, update balances
    web3AccountChangeHandler: (account, oldAccount) => {
      if (account === null) {
        console.log('No account detected, a password unlock is likely required.')
      } else {
        console.log(`Primary account switched from ${oldAccount} to ${account}.`)
      }
    }
  },
  pollTime: 1000, // 1 second
  supportedNetworks: [1, 3, 4, 42] // mainnet, ropsten, rinkeby, kovan
}

Usage

Notes