Skip to content

MetaMask

Jump to bottom
bunnie-xia edited this page May 13, 2020 · 5 revisions

What is MetaMask:

Metamask:

  • is a wallet that stores information about cryptocurrency;
  • it works like a bridge between normal browsers and the Ethereum blockchain;
  • it is an extension that allows any regular user from a Web application to connect to the Ethereum network and interact with DApps(Decentralized Applications).

Dapps:

  • short for decentralized apps, are a new type of web application that are built on top of the Ethereum blockchain. These applications often require users to submit transactions to the blockchain, or use keys [ link to keys] to sign messages.

Why MetaMask:

  • cut off time consuming comparing to traditional form-filling login
  • provide security for user info comparing to social media login

MetaMask Connection (Dataflow):

  • MetaMask works like a bridge between normal browsers and the Ethereum blockchain
  • it connects React App to Ganache, and connects Web3.js to a contract

MetaMask Tutorial:

Setup MetaMask:
- For testing purpose, click on “Import Wallet” - For real case, click on “Create a Wallet”

***

- Go to Ganache, copy wallet seed as circle in red rectangle below:

***

- Go back to MetaMask and paste the copied wallet seed:

- Enter password and click “Import”. MetaMask account is successfully created.

  • Connecting MetaMask and Ganache:
    open Ganache —> click on MetaMask browser extension —> click setting in MetaMask extension —> click network inside of the setting —> click add network —> copy and paste “RPC server” link from Ganache, eg: HTTP://127.0.0.1:7545 —> click Save - click the “Network” dropdown menu that’s on top right corner of the extension and next to the MetaMask “My account” icon —> change to the newly created network corresponding to the RPC server

  • Import Ganache account to MetaMask extension:
    open Ganache copy “PRIVATE KEY” from keys section —> go to MetaMask —> click “import account” —> paste the copied private key to the input box —> click “import”

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);

Resource:

why MetaMask: https://www.toptal.com/ethereum/one-click-login-flows-a-metamask-tutorial#how-the-login-flow-works
what is MetaMask: https://medium.com/@markmuskardin/developing-a-blockchain-ui-checkout-flow-with-metamask-74adf99eda1
more: https://www.bitdegree.org/tutorials/metamask-wallet-review/
installation: https://github.com/MetaMask/React-MetaMask-Login-Button
MetaMask documentation: https://docs.metamask.io/guide/getting-started.html#basic-considerations
Dapp concept: https://metamask.io/
data flow/ connection: https://observablehq.com/@consensys-academy/web3-js-and-metamask

Clone this wiki locally