DEV Community 👩‍💻👨‍💻

Cover image for MetaMask and Web3 Resources
Eric Bishard
Eric Bishard

Posted on • Updated on

MetaMask and Web3 Resources

Link to SmartCon2022 Slides

Not just a crypto wallet but a gateway to exploring blockchain decentralized applications.

With over 20 million users worldwide, MetaMask empowers users with the ability to buy, store, send and swap Ethereum based tokens (ERC-20, ERC-721 (NFTs), and more).

Users can connect to blockchain applications and overall own their own data by generating passwords and keys on their own devices where they only have the access to their accounts and data with the right to choose what they want to share and keep private.

Before we dive any deeper into the MetaMask ecosystem, take a minute to explore the meaning of any of the terms you may not already know in the list below:

Blockchain, Decentralization, Smart Contracts, Trustless, Wallet, Account, Address, Public Key, Private Key, Keystore File, Mnemonic/Seed Phrase, Hardware Wallet, Identicon, Hexadecimal, Seed, Brain Wallet, Entropy, Derivation, Encryption, Encrypted Keys

Developing with MetaMask

If you are a developer wanting to connect users to your decentralized application you can achieve the basics such basic vierification of the user and initiating transactions all the way to complete user account onboarding with convenience libraries like ethers, web3.js, truffle, embark and others.

The MetaMask Docs can get you started by downloading the extension, familiarization you with the Ethereum Provider API to running a test network.

As well we have some amazing web tools out there for working with the MetaMask RPC API, the various network and chainIds you need to know and some handy tools to help convert chainIds to hex.

The easiest way to jump right in learning how to develop with MetaMask (NodeJS required) is to try your hand at Creating a Simple Dapp

Other resources that I think you should consider if you are new to web3 development are:

MetaMask now provides a metamask-onboarding library designed to improve and simplify the onboarding experience. The new library exposes an API to initiate the onboarding process. In the process, it registers your site as the origin of the onboarding request. MetaMask will check for this origin after the user completes the onboarding flow. If it finds an origin, the final confirmation button of the MetaMask onboarding flow will indicate that the user will be redirected back to your site.

JSON-RPC and Open RPC

In order to interact with the Ethereum blockchain (reading data or sending transactions) we connect to an Ethereum node.

All Ethereum client implement a JSON-RPC spec, these are uniform sets of methods that apps rely on regardless of the specific node or client implementation.

JSON-RPC is a stateless, light-weight remote procedure call (RPC) protocol. It defines several data structures and the rules around their processing. It's simple and transport agnostic in that the concepts can be used within the same process, over sockets, over HTTP, or in many various message passing environments using JSON data.

OpenRPC

To learn more about JSON-RPC the creators of OpenRPC (Shane Jonas and Zach Belford) have created a series of tutorials that can get you up and running. Below are links to their videos and some of the online tools they use to get you started.

Onboarding Users

As an Ethereum enabled site developer, sending users offsite to install MetaMask presents challenges. Most notably, you must inform the user to return to your site and refresh their browser after the installation.

MetaMask now provides a metamask-onboarding library designed to improve and simplify the onboarding experience. The new library exposes an API to initiate the onboarding process. This process registers your site as the origin of the onboarding request. MetaMask will check for this origin after the user completes the onboarding flow. If it finds an origin, the final confirmation button of the MetaMask onboarding flow will indicate that the user will be redirected back to your site.

MetaMask cares deeply about user experience and has been working diligently to give developers the tools they need in order to improve their own applications contributing overall to the usability of web3 technologies.

Additional Features and Resources

MetaMask User Explanatory Videos

Beyond getting familiar with all of the great Web3 and MetaMask dev tools above, we want to highlight the various bite sized user feature and announcement videos we have produced. Having overall knowledge of the various MetaMask features and UI, this can help to understand what is possible with MetaMask and aid in building world class decentralized applications.

As well, here is a video of a fireside chat with the founders of MetaMask

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈