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.