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. 😁

👾 Eric Bishard - MetaMask DevRel
🧙‍♂️ Lauren Dutton - Infura DevRel
🚨 MetaMask SDK Help ~ ConsenSys Discord

TOC

• ❓
• 🪄 Hackathon Tips
• 🎯 Start Here
• ⚙️ Examples and Demos
• ❓ What is MetaMask SDK?
• ❓ Why MetaMask SDK?
• ❓ How It Differs From Competitors
• Additional Resources

MetaMask SDK for Dapp Developers

For Dapp Developers: The MetaMask JavaScript SDK is for use with any web application and for it's most basic use simply needs to be installed and instantiated inside your project. This ensures that when eth_requestAccounts is called that the user has the opportunity to connect to MetaMask Extension or Mobile.

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 and Truffle to build locally:

💻 MetaMask SDK Workshop.

You can also watch the video for the Linea/MetaMask SDK Workshop here: Build on Linea : An L2 and MetaMask SDK Crash Course

Examples and Demos ⚙️

Want to see how to implement MetaMask SDK?

There are a few React repositories here with basic implementation:

• MetaMask SDK Implementation: Examples
• MetaMask & Unity Demo Video
• Bringing Web3 to Games and Apps with the MetaMask SDK
• It's our wallet, let's build it together

What is MetaMask SDK?

The MetaMask SDK lets developers connect to MetaMask Extension or Mobile app independently from web, desktop or mobile or ReactNative, Unity and iOS apps with their respective SDK packages. Providing and easy to implement and seamless solution.

MetaMask JavaScript SDK
An NPM package which can be used for

• React
• Pure JavaScript
• React Native
• Electron
• Other web frameworks
• Node.js

As well as our other packages for Unity and Native Mobile

• MetaMask Unity SDK
• MetaMask Unreal SDK (coming soon)
• MetaMask Native iOS SDK
• MetaMask Native Android SDK (coming soon)

Our JavaScript NPM Packages

Consisting of the official NPM package for JS SDK as well as our developer preview React component kits:

• @metamask/sdk
  • Official JS MetaMask SDK
• @metamask/sdk-react
  • Library with react hooks (state management)
• @metamask/sdk-react-ui
  • Integrate basic connect button UI into your Dapp

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 others coming soon.

The team is working on integrating MetaMask SDK into WAGMI and potentially other solutions that developers use to connect to various wallets. Check the docs.metamask.io site for these integrations.

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

If you would like to explore the @metamask/sdk-react package to preview what is coming for React developers, just know that until the README and docs are updated to support this package, it is play at your own risk!

If you would like to work directly with our API team to build the future of MetaMask check out our MetaMask Improvement Proposals GitHub Repo

Check out the Interview with Jacob.eth from HyperPlay & Game7

• Unveiling: HyperPlay and Better Patterns For Web3 Gaming

MetaMask Tutorials

If you are just getting started with MetaMask I suggest first going through our MetaMask API tutorials on building with React:

• Create a React dapp with local state
• Create a React dapp with global state
• Integrate a Feedback Form into your Dapp

Helpful Tools When Working With MetaMask

• Build on Linea
• Chainlist.org
• eSerialize
• MetaMask API Playground
• OneClickDapp

👊😉👍