Metamask explained in 2 mins

Metamask is the most popular wallet in crypto

But when you are a beginner, Metamask is NOT easy.

 In this article I will explain what is Metamask, and how to integrate it with a Dapp, in a simple way

.





Metamask has more than 10M users.

 It works on Ethereum, and all Blockchain based on Ethereum, like Binance Smart Chain or Polygon. 

Metamask stores the private keys of users.

Each private key is associated to a public Ethereum address

The private key never leaves the wallet, and is used to sign transactions. 

The address identifies an account and can be shown to anyone.



When a user uses a Dapp:



• First, The html, css and Javascript code of the Dapp is loaded in the user web browser

• The user clicks on a button to perform some action

• The Dapp creates a transaction

• The user confirms the transaction, using a Metamask popup

• Finally, the transaction is sent to Ethereum by Metamask.





To install Metamask, go to the google chrome store, search for the metamask extension, and install it

. After, you should see a fox icon in your extension menu.



When you open Metamask for the first time, it’s going to ask you to create a password and a new account. 

After you finish the setup, you will have a few addresses with their associated private keys.






If you connect Metamask to a local development Blockchain, like Ganache, there are a few caveats.

• It can be useful to synchronize the accounts of Ganache with Metamask.

 For this, you can import the mnemonic phrase of Ganache into Metamask.
• 

Every time you restart Ganache, Make sure to click on reset accounts in Metamask settings.

If you don’t do it your transactions will fail.





In the Javascript code of your Dapp, you will use a library like Web3 or Ethers. 

To integrate with Metamask, these libraries need to wait for Metamask to be loaded, so that they can connect to the Metamask provider.

 You can either code the integration from scratch, but it’s easy to get it wrong and trigger a race condition.

 Or, you can use a library, like:

• @metamask/detect provider, for something simple
• 

Or web3-react, if you need something more powerful





Now, you know what is Metamask, and how to integrate it with your Dapp

. If you want to dive deeper in the code integration with Metamask,

You can checkout this other video where I show you the full Javascript code, step by step.