Welcome a new frontend library OpenZeppelin Network.js

General Announcements
1

:warning: This project is deprecated . We are no longer actively developing new features nor addressing issues. Read here for more info, and reach out if you are interested in taking over maintenance. We suggest looking into web3-react for a popular alternative to this project.

Greetings Zeppeliners!

Writing smart contracts is only part of the job the other part is delivering them to real-world. Building a frontend for a smart contract is notoriously tricky and requires some deep and specific knowledge around Web3 providers and Web3 utility libraries.

OpenZeppelin Network.js an easy to use and reliable library that provides one line access to Web3 API.
• Hides various Web3 providers behind common API
• One line access to the Web3 providers (Metamask, Infura, Geth, Portis, 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

Before Network.js

  let web3;
  // Modern dapp browsers...
  if (window.ethereum) {
    web3 = new Web3(window.ethereum);
  }
  // Legacy dapp browsers...
  else if (window.web3) {
    // Use Mist/MetaMask's provider.
    web3 = window.web3;
    console.log('Injected web3 detected.');
  }

  if (web3) {
    // Request account access if needed
    await window.ethereum.enable();
    // Acccounts now exposed
    // Use web3 to get the user's accounts.
    const accounts = await web3.eth.getAccounts();
    // Get the contract instance.
    const networkId = await web3.eth.net.getId();
    const isMetaMask = web3.currentProvider.isMetaMask;
    this.setState({ web3, accounts, networkId, isMetaMask });
  }

After Network.js

  const web3Context = useWeb3Injected();
  // Usually it is a good idea not to request access to the accounts immediately
  await web3Context.requestAuth();
  const { accounts, networkId, networkName, providerName, lib, connected } = web3Context;
  this.setState({ accounts, networkId, networkName, providerName, lib, connected });

*with React hooks.

Do you struggle to detect network, accounts or connection change with various providers?
No worries, we got you covered!

web3Context.on(Web3Context.NetworkIdChangedEventName, (networkId, networkName) => {
  setNetwork({ networkId, networkName });
});

web3Context.on(Web3Context.AccountsChangedEventName, async accounts => {
  setWallet({ accounts, balance: await getBalance(web3Context) });
});

Feeling excited?
Try it out with updated starter-kit.

Just run openzeppelin unpack starter inside empty folder and follow the instructions.

Cheers and all the best!

8 Likes