@energyweb/origin-ui-web3
TypeScript icon, indicating that this package has built-in type declarations

0.2.2 • Public • Published

Energy Web Foundation Logo

Origin UI Web3

Installation

This package is available through the npm registry.

npm install @energyweb/origin-ui-web3
yarn add @energyweb/origin-ui-web3

Description

React library for managing connection to blockchain wallet. Implementation is based on Web3Provider from ethers package. Web3 state provider is built with React Context and React Hooks.

Currently available wallet adapters:

Requirements

Please note, that this package has React 17.0.2+ as peerDependency.

Usage

  1. Wrap your application into Web3ContextProvider at the top level.
import { Web3ContextProvider } from '@energyweb/origin-ui-web3'

const AppRoot = () => {
   return (
     <Web3ContextProvider>
       <App />
     </Web3ContextProvider>
   );
}
  1. Get the web3 context
import { useWeb3 } from '@energyweb/origin-ui-web3'

const Component = () => {
  const {
    connect, // async function for connecting to a wallet: (adapter: Adapter) => Promise<void>
    disconnect, // async function for disconnecting from a current wallet: () => Promise<void>
    account, // currently connected account address: string
    chainId, // current chain id: number
    web3, // Web3Provider
    isActive // indicator of active connection to a wallet: boolean
  } = useWeb3();

  return (
    ...
  )
}
  1. Connect to a wallet you need
import { useWeb3, MetamaskAdapter, NotAllowedChainIdError } from '@energyweb/origin-ui-web3'

const ConnectComponent = () => {
  const { connect, account } = useWeb3();

  const handleError = (error: any) => {
    if (error instanceof NotAllowedChainIdError) {
      // or some other custom error handling
      console.log('You are connecting to not allowed chain');
    }
    console.log('Some error from Metamask: ', error);
  }

  const handleConnect = async () => {
    // supply allowedChainIds: number[] as first arg
    // you can also supply custom errorHandler as second arg
    await connect(new MetamaskAdapter([1, 2], handleError))
  }

  return (
    <>
    {!account ?
       <button onClick={handleConnect}>
          Connect Metamask
       </button>
       : <span>{account}</span>
    }
    </>
  )
}

Utils

For each adapter we are also supplying HOC and Errors specific to wallet adapter of which is used.

HOC:

import { withMetamask } from '@energyweb/origin-ui-web3'

export const withMetamask(Target, Placeholder)
/* Target - is your React Component to be blocked from user view until he connects a wallet; */

// Placeholder - is a React Component blocking the view until the wallet is connected,
// typically with a Connect button and some info text.

Errors:

import {
  NoEthProviderError,
  NotAllowedChainIdError,
  UserRejectedError,
  InvalidParametersError
} from '@energyweb/origin-ui-web3'

Contributing Guidelines

See contributing.md

Questions and Support

For questions and support please use open a new Issue.

EW-DOS

The Energy Web Decentralized Operating System is a blockchain-based, multi-layer digital infrastructure.

The purpose of EW-DOS is to develop and deploy an open and decentralized digital operating system for the energy sector in support of a low-carbon, customer-centric energy future.

We develop blockchain technology, full-stack applications and middleware packages that facilitate participation of Distributed Energy Resources on the grid and create open market places for transparent and efficient renewable energy trading.

  • To learn about more about the EW-DOS tech stack and the energy-sector challenges our use cases address, see our documentation.

For a deep-dive into the motivation and methodology behind our technical solutions, we encourage you to read our White Papers:

Connect with Energy Web

License

This package is licensed under the MIT - see the LICENSE file for details

Acknowledgement

This library was inspired by the web3-react/core. Kudos to the author and contributors for creating/maintaining this great project!

Readme

Keywords

none

Package Sidebar

Install

npm i @energyweb/origin-ui-web3

Weekly Downloads

3

Version

0.2.2

License

MIT

Unpacked Size

139 kB

Total Files

23

Last publish

Collaborators

  • kyleiankian
  • energywebdev
  • aznagy
  • bagaric
  • pkosin
  • drgorb
  • kroy
  • manihagh