openzeppelin-network.js

One line access to Web3 in your dApp.

Hides various Web3 providers behind common API.
One line access to the Web3 providers (Metamask, Infura, Geth, Portis and etc).
Supports multiple Web3 providers within the same app.
First class support of meta-txs.
React integration using hooks.
Network, accounts, and connection changed events for all web3 providers.
Will fire events even for HTTP and forcefully terminated providers.

Overview

Installation

npm install @openzeppelin/network

Usage

With React Hooks

Import the library:

import { useWeb3Injected, useWeb3Network, useEphemeralKey } from '@openzeppelin/network/react';

Get Web3Context with React Hooks inside functional component:

const injected = useWeb3Injected();
const local = useWeb3Network('http://127.0.0.1:8545');

Use Web3Context to get fresh data:

const { accounts, networkId, networkName, providerName, lib, connected } = web3Context;

Network.js will re-render component when network, accounts or connetion state change.

To use GSN with any hook specify GSN as an option, providing a signing key:

const local = useWeb3Network('http://127.0.0.1:8545', {
  gsn: { signKey: useEphemeralKey() }
});

With Vanilla Javascript

Import the library:

import { fromInjected, fromConnection } from '@openzeppelin/network';

Get Web3Context:

const injected = await fromInjected();
const local = await fromConnection('http://127.0.0.1:8545');

To use GSN include a gsn option, including a signing key:

const local = await fromConnection('http://127.0.0.1:8545', {
  gsn: { signKey: ephemeral() }
});

Use Web3Context to get fresh data immediately:

const { accounts, networkId, networkName, providerName, lib, connected } = web3Context;

Subscribe to events to get notified:

function updateNetwork(networkId, networkName) {}
function updateAccounts(accounts) {}
function updateConnection(connected) {}
 
web3Context.on(Web3Context.NetworkIdChangedEventName, updateNetwork);
web3Context.on(Web3Context.AccountsChangedEventName, updateAccounts);
web3Context.on(Web3Context.ConnectionChangedEventName, updateConnection);

Unsubscribe from events once you don't need them:

web3Context.off(Web3Context.NetworkIdChangedEventName, updateNetwork);
web3Context.off(Web3Context.AccountsChangedEventName, updateAccounts);
web3Context.off(Web3Context.ConnectionChangedEventName, updateConnection);

Learn More

Try it out on the GSN Starter Kit: run npx @openzeppelin/cli unpack gsn in a new directory and follow the instructions.
For detailed usage information, take a look at the API Reference.

License

Released under the MIT License.

npm