DEV Community

Cover image for MetaMask SDK Dev Guide
Eric Bishard for MetaMask

Posted on • Updated on

MetaMask SDK Dev Guide

To help get started on MetaMask SDK, we have prepared the following resources; you can also contact our ConsenSys and MetaMask SDK team members with the links below. 😁

The MetaMask SDK can be used in conjunction with the MetaMask API, if you need an introduction check out: Introduction to MetaMask API

πŸ‘Ύ Eric Bishard - MetaMask DevRel
πŸ§™β€β™‚οΈ Ziad Saab - Snaps DevRel


Hackathon Tips πŸͺ„

Beyond our normal judging criteria, communication of your idea and its features and explaining what your project does and what products and bounties you are applying for is just as important.

Check out Ultimate Hackathon Survival Guide if you are new to hackathons!

Start Here 🎯

To start building, follow this workshop which implements MetaMask SDK, manages React state for the MetaMask wallet and uses Truffle and Ganache to build locally: MetaMask Workshop.

Examples and Demos βš™οΈ

Want to see how to implement MetaMask SDK?

There are a few React repositories here with basic implementation:

What is MetaMask SDK?

The MetaMask SDK lets developers connect to MetaMask Extension or Mobile app independently from where their dapp/app/application is running (web, desktop or mobile) and from how it is developed (ie. JavaScript, native iOS/Android, Unity).

Providing and easy to implement and seamless solution.

Why MetaMask SDK?

Because so far there weren't many options to connect to MetaMask Extension and Mobile seamlessly: you could only have your dapp run on Desktop web browser with MetaMask Extension, being open on MetaMask Mobile in-app browser or use third party libraries that usually are not easy to implement/integrate into dapps and don't offer the best UX. And this was only working for web dapps. All the rest of applications were excluded from it.

The MetaMask SDK solves that by being a solution that works on every Javascript frontend/backend platform (Web, React, React Native, NodeJS), as well as mobile (native iOS & Android under development), Unity (mobile, desktop and WebGL) and we are expanding these supported platforms.

How It Differs From Competitors?

Being developed by MetaMask for MetaMask is the only solution that can provide the best integrated interaction solution.

If your web dapp already supports MetaMask extension, making it work on both desktop and mobile web browser and connect with MetaMask mobile app as well as MetaMask Extension is a matter of 2 lines of code and the remains the same.

We are also developing UI kits for specific JS frameworks like React and React Native initially and probably others after them. Providing UI components that also integrate higher level libraries like EtherJS, Wagmi allowing for an easier handling of everything related to the blockchain interaction through MetaMask Mobile app.

We are working on doing the same high level interaction (with NFTs for example) for Unity developers that are usually less experienced with Web3 and the blockchain in general.

MetaMask SDK is also developing new features on top of it that will expand possibilities and this is only possible because MetaMask SDK code is part of the MetaMask Mobile app as well. The first one and most requested one is "Session Persistence" that persist the user session so that the user doesn't have to re-scan the QRCode if the app has been closed or the dapp is reloaded.

Everything using the highest level of encryption and security in general.

Additional Resources


Top comments (1)

labsterx profile image

Hi Eric,

Thanks for the great article! I was trying to use the MetaMask SDK with VueJS and found it quite difficult to get started. I found a number of error messages from metamask-sdk.js.

Could you please help taking a look at this code:

You can see the error messages after running it using "npm run dev". The code for using MetaMask SDK is in src/main.js.

I'd appreciate your help!