React-MetaMask-Login-Button

This button can be used to:

• Install MetaMask
• Log in to MetaMak
• Connect to the right network
• Redirect to your app
• Log in to your app

Installation

$ npm install react-metamask-login-button
or
$ yarn add react-metamask-login-button

Usage

import React,{Component} from 'react';
import MetaMaskLoginButton from 'react-metamask-login-button';
 
class App extends Component {
  constructor() {
    super();
 }
  render() {
    return (
      <div>
        <MetaMaskLoginButton />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, appElement);

Optional Modifications

Optional changes to the views can be made for each component. For example the "Signed in with MetaMask screen" can be changed to a login screen for your app by making modifications to the login.js component

import React, { Component } from "react";
import  {Form,Button} from "react-bootstrap";
import Web3 from "web3";

export default class Login extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Form>
          <Form.Group controlId="formBasicEmail">
            <Form.Label>Email address</Form.Label>
            <Form.Control type="email" placeholder="Enter email" />
          </Form.Group>

          <Form.Group controlId="formBasicPassword">
            <Form.Label>Password</Form.Label>
            <Form.Control type="password" placeholder="Password" />
          </Form.Group>
          <Button variant="primary" type="submit">
            Submit
          </Button>
        </Form>
      </div>
    );
  }
}