npm

Need private packages and team management tools?Check out npm Orgs. »

@dapperlabs/react-web3

0.1.0 • Public • Published

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();
  ...
}

Keywords

none

install

npm i @dapperlabs/react-web3

Downloadsweekly downloads

3

version

0.1.0

license

ISC

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability