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
$ npm install react-metamask-login-button
or
$ yarn add react-metamask-login-button
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 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>
);
}
}