A Quick Guide to MetaMask Snaps

In the last blog, we learned about the MetaMask Flask and how developers can utilize it. Now, we will understand Snaps which is the first feature introduced in the MetaMask Flask.

What is MetaMask Snap?

It is the first feature that MetaMask Flask introduced. It lets developers introduce code snippets to extend the functionality of metamask and create completely new kinds of dapps. Anyone can create a Snap and users can decide which snaps they want to use. It allows developers to expand the functionality of MetaMask at runtime. It allows developers to build and plug in their own APIs to MetaMask.

MetaMask is the 1st wallet to provide the flexibility of extensibility to developers, paving the way to scale the number of features and provide personalization of wallet and Dapp.

How does Snap work?

Current version of Snaps can only change the MetaMask UI in restricted ways. But still Developers can do a lot more than expected. The MetaMask team will continue to update it to meet developer demands.

For Example: Now Developers can use Snap to manage the user’s keys for different protocols. If the protocol uses SLIP-44 ID, JavaScript signing libraries, and publicly available node endpoints. Developers can add support for it to MetaMask.

• Parts of Snap: At High level, It consists of:

1. A way for MetaMask to securely execute third-party JavaScript code.
2. APIs for websites and MetaMask to communicate with individual Snaps.

Snaps can extend MetaMask's JSON-RPC API and modify the MetaMask application's behaviour during runtime. MetaMask will leverage this in the future to support many blockchains and other decentralized protocols, new types of cryptography, new types of crypto assets, UI customization, and a plethora of other features.

How to interact with MetaMask Snaps? {Filecoin}

In this section we will take example of Filecoin Snap. Filecoin Snap is developed in collaboration with Protocol Labs and Chainsafe. We can find a hosted version of the Filecoin snap frontend here.

• Step 1: Go to MetaMask Flask and Open Settings.

• Step 2: We will see that a new feature is added i.e. Snaps.

• Step 3: Click on Snaps and We will see No Snaps Installed.

• Step 4: Now we will go to https://filsnap.netlify.app/ and Click on CONNECT TO METAMASK.

• Step 5: A notification will pop up and Click on Connect.

• Step 6: A new notification will pop up and Click on Approve & Install.

• Step 7: We will be directed to the Filsnap demo.

• Step 8: If we go back to MetaMask Flask. Click on Snaps and We will see Filsnap is added and is currently running.

• Step 9: Now let's write Hello World inside Sign custom message to check if our snap is able to execute the code or not. Click on SIGN.

• Step 10: A notification will pop up. And we can see that snap is working.

• Step 11: Now we will scroll down and Click on Approve.

• Step 12: Here we can see that the signature of the message is generated. This means that code is executed and snap is working.

How to interact with MetaMask Snap? {Template}

In this section we will take an example of Template Snap. This is created by MetaMask Team.

• Step 1: If we go to MetaMask Flask and Open Settings. Then we will Click on Snaps and We will see No Snaps Installed.

• Step 2: Now we will go to https://metamask.github.io/template-snap/ and Click on Connect.

• Step 3: A notification will pop up and Click on Connect.

• Step 4: A new notification will pop up and Click on Approve & Install.

• Step 5: If we go back to MetaMask Flask. Click on Snaps and We will see MetaMask Template Snap is added and is currently running.

• Step 6: Now if we go back to https://metamask.github.io/template-snap/ and Click on Send Hello. We can see that a custom confirmation is generated and snap is working.

Pros and Cons

Conclusion

MetaMask is the first wallet to offer extensibility. Snaps will boost the rate of innovation not just in Ethereum, but the entire Web3 ecosystem. Now Web3 developers can use the full power of MetaMask and create entirely new types of dapps. Any developer can create a Snap, and users will be able to choose which Snaps to utilize and integrate into their wallet in the future.

Support us at Gitcoin

Resources

• Snap Docs
• Official Demo
• Official Notification

Read more

• MetaMask Flask: A wallet for Web3 developers
• Install MetaMask on Brave browser
• Generate Ethereum Wallet from Private Key
• An introduction to cryptocurrency wallet