React-onboard-provider NPM

react-onboard-provider

Wrapper for https://github.com/blocknative/onboard with react hooks and uses ethers-gasnow.

Install

npm install react-onboard-provider

Quick Start

import { useProvider, Wallets } from 'react-onboard-provider'
import ethers from 'ethers'

// infura project id
const INFURA_PROJECT_ID = process.env.INFURA_ID

// alchemy project id
const ALCHEMY_PROJECT_ID = process.env.ALCHEMY_PROJECT_IDL

// ethereum network id 
const networkId = 1

// app name
const APP_NAME = 'sample'

// app url
const APP_URL = 'https://foo.bar'

// email (only required for trezor)
const APP_EMAIL = 'x@y.com'

// initialize wallets object to provide to useProvider
const params = {
  networkId,
  APP_URL,
  APP_EMAIL,
  APP_NAME,
  INFURA_PROJECT_ID,
  ALCHEMY_PROJECT_ID,
  defaultTo: 'alchemy'
}
const wallets = Wallets(params)

function onWalletChange(wallet) {
  // effect for changes in wallet
}

function onAddressChange(address) {
  // effect for changes in address
}

// optional parameter - determines which provider is used if metamask/any other wallet isn't found
function makeProvider(networkId) {
  return ethers.getDefaultProvider(networkId)
}

const App = () => {
  const { signerOrProvider } = useProvider({
    wallets,
    effects: {
      onWalletChange,
      onAddressChange
    },
    networkId,
    env: {
      INFURA_PROJECT_ID,
      ALCHEMY_PROJECT_ID
    }
  })
}