Network JS is deprecated. We are no longer developing new features nor addressing issues. Read here for more info.

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

Building a dapp from Scratch →