@dapperlabs/react-web3

react-web3?

Context provider for interacting with injected web3.

values provided on context:

• web3: the injected web3 instance
• checkingForWeb3: boolean indicating whether still actively waiting for injection.
• account: current user wallet address
• network: current network id
• requestAccounts: utility method for requesting the users accounts
• getAccounts: utility method for accessing the user accounts
• personalSign: utility method for performing a personal sign

Setup

Import the provider and wrap your application in it.

import { Web3Provider } from '@dapperlabs/react-web3'

function Root() {
  return (
    <Web3Provider>
      <MyDApp />
    </Web3Provider>
  )
}

Context

Context is directly available via import { Web3Context } from '@dapperlabs/react-web3 and can be consumed however you'd like:

• useContext(Web3Context)
• static contextType = Web3Context
• <Web3Context.Consumer />

HOC (withWeb3)

Decorates your component with the above context values spread onto it.

---

<Web3Toolbar />

Utility component to drop into your app that will render the current values of the context properties.

import { Web3Toolbar } ...

function MyDapp() {
  return (
    <div>
      {process.env.NODE_ENV !== 'production' && (  
        <Web3Toolbar />
      )}
      <OtherStuff />
    </div>
  )
}

---

Hooks

If you'd rather not use the provider + context interface, you can use hooks directly in your components.

• useInjectedWeb3()
• useWeb3Status( true/false ) where the parameter indicates whether to poll for the status.

function () {
  const [web3, checkingForWeb3] = useInjectedWeb3();
  const [account, network] = useWeb3Status();
  ...
}