This package has been deprecated

Author message:

Package no longer supported. Use @metamask-checker/react instead.

React Metamask Checker

Live demo

Description

React component which uses Render Props approach for checking Web3 instance object injected by Metamask extension.

Note: since v2.0.0 only new version of Metamask API is supported. Related links:

• https://medium.com/metamask/breaking-changes-to-the-metamask-inpage-provider-b4dde069dd0a,
• https://metamask.github.io/metamask-docs/API_Reference/Ethereum_Provider#new-api

Installation

yarn add react-metamask-checker

Testing

yarn test:jest # Runs Jest with coverage collection 
yarn test:coverage # Sends coverage to .coveralls.io 
yarn test # yarn test:jest && yarn test:coverage 

Usage

// ./containers/App.js
 
import React, { Component } from 'react'
import MetamaskChecker from 'react-metamask-checker'
 
import Loader from './components/Loader'
import Err from './components/Error'
import Content from './components/Content'
 
class App extends Component {
 
  async initialize (provider, account, network) {
    console.log(provider, account, network)
  }
 
  render () {
 
    const props = {
      /* Ethereum network_id (numeric) which should be selected in Metamask */
      // network : null,
 
      /* Ethereum account (address) which should be selected in Metamask */
      // account : null,
 
      /* Function which executes on checking error */
      // onCheckError   : async (error) => null,
 
      /* Function which executes on checking success */
      onCheckSuccess : async (provider, account, network) => await this.initialize(provider, account, network),
 
      renderDefault : () => <Loader />,
 
      renderErrored : error => <Err message={error.message || 'Unexpected error'} />,
 
      renderChecked : (provider, account, network) => <Content />
    }
 
    return <MetamaskChecker {...props} />
  }
}