DEV Community: MetaMask

Survival guide to DevConnect Istanbul MetaMask bounties

Francesco Andreoli — Sat, 18 Nov 2023 12:20:51 +0000

🔥 MetaMaskDev at ETHGlobal Istanbul - Comprehensive Guide

Welcome to ETHGlobal Istanbul during EFDevconnect! Here's a comprehensive guide to MetaMaskDev's SDK, Snaps, and LineaBuild links to enhance your experience ⬇️

➡️ METAMASK SDK

1. Core JS Package No Frills:

Explore the MetaMask Core JS Package for a no-frills, essential integration into your project.
Check out the accompanying React Example Branch for a practical demonstration.

2. SDK Button Component && Provider:

For a more sophisticated user interface, consider the SDK Button Component && Provider.
See it in action with the React Example Branch for easy integration into React-based applications.

3. Web3 Onboard Integration:

Dive into the Web3 Onboard Integration option for a seamless connection with MetaMask.
Explore the corresponding React Example Branch to understand the integration process.

Other MetaMask SDK Options:

Discover additional options in the MetaMask SDK Documentation.

MetaMask SDK Developer Guide:

For a deeper understanding, check out the MetaMask SDK Developer Guide to navigate the development landscape effectively.

LINEA

Refer to the Linea Documentation for comprehensive insights into LineaBuild.
Easily connect Linea Testnet to MetaMask using this link.
Access Linea's resources, such as the Infura Faucet for Linea (requires a Free Infura Account) and the Linea Chat Faucet supporting Converse, XMTP, and Coinbase Wallet.
Get visual with Linea Videos for practical demonstrations and tutorials.

METAMASK SNAPS

Delve into the Snaps Documentation for a comprehensive understanding of MetaMask Snaps.
Explore the Snaps Directory to discover and contribute to the MetaMask Snaps ecosystem.
Contribute to the DogeCoin Repo for an open-source MetaMask Snap project.

Snaps Workshop Videos:

MetaMask 🛠 Snaps Workshop: A hands-on workshop to guide you through MetaMask Snaps.
How to create a MetaMask Snap: Step-by-step instructions on creating your MetaMask Snap.
What are Snaps? A Developer Intro: An insightful overview for developers new to MetaMask Snaps.

ALL ETH GLOBAL CONSENSYS BOUNTIES

Explore and participate in ETH Global Prizes to amplify your impact on the Ethereum ecosystem.

Feel free to explore these resources, enhance your knowledge, and enjoy the event!

MetaMask SDK Dev Guide

Eric Bishard — Wed, 22 Mar 2023 08:13:18 +0000

This document helps you to find all resources associated with the MetaMask SDK.

You can also contact our MetaMask SDK DevRel and other DevRel and community team leaders with the links below:

🧔‍♂️ Eric Bishard - Consensys DevRel (MetaMask SDK)

🧙‍♂️ Ziad Saab - Consensys DevRel (MetaMask Snaps)
👩 Lauren Dutton - Consensys DevRel (Infura)
👩🏽 Emily Lin - Consensys DevRel (Linea)

🤌 Mirko Garozo - MetaMask DevRel (General) / Ecosystem Guru
🧔🏻 Francesco - Consensys DevRel (General) / Ecosystem Guru

Chat With Consensys DevRels 24/7

🚨 Consensys Developer Chat

MetaMask SDK for Dapp Developers

For Dapp Developers: The MetaMask JavaScript SDK can be used with any web application, Electron desktop app or ReactNative project. At its most basic implementation, one must install the @metamask/sdk using npm and instantiate the SDK inside your project. This ensures that when eth_requestAccounts is called, the user can connect to MetaMask Mobile (or Extension within a web browser).

For React developers, in particular, we have several dedicated React packages that include the @metamask/sdk with Context and UI components.

💻 MetaMask SDK Workshop with ViteJS + React & TypeScript.
⚙️ Source Code for Video: https://github.com/MetaMask/react-sdk-linea-workshop

As well we have a minimal examples directory within the JavaScript SDK repo which can get you up to speed with Create React App, Electron, NextJS, NodeJS, Pure Javascript, ReactNative, and VueJS. These are cut-to-the-chase examples for all JavaScript project types.

Example Demos and Package Links

Want to see how to implement MetaMask SDK?

There are a few React repositories here with basic implementation:

The MetaMask JavaScript SDK
is an NPM package which can be used for:

All JavaScript NPM Packages and Demos

@metamask/sdk
- Official JS MetaMask SDK
- Demo: Workshop demo branch
@metamask/sdk-react
- Library with react hooks (state management)
- Demo: SDK official example
@metamask/sdk-react-ui
- Integrate basic connect button UI into your Dapp
- SDK React UI wraps WAGMI Hooks
- Demo: SDK official example
- Demo: Workshop demo branch
@web3-onboard/metamask
- Wallet module for connecting MetaMask Wallet SDK to web3-onboard
- Demo: Workshop demo branch

Not a JavaScript developer? Working on other platforms? Check out our other SDK packages for other platforms:

Why MetaMask SDK?

The MetaMask SDK is a library that provides a reliable, secure, and seamless connection from your dapps and web3 games and mobile apps to MetaMask Mobile.

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), Unity (mobile, desktop and WebGL) and we are expanding these supported platforms in the future as well a creating supporting component libraries.

Additional Resources

In addition to our MetaMask Developer Site here are some other topics you may be interested in

Hackathon Tips 🪄

Participating in a hackathon? Communicating your idea and its features as well as explaining what your project does and what products you are using and what bounties you are applying for in your project, a README is very important.

Get tips for hacking, strategy and information in general from our Ultimate Hackathon Survival Guide.

MetaMask API Improvement Proposals

Work directly with our API team to build the future of MetaMask, check out our MetaMask Improvement Proposals GitHub Repo

Interview with Jacob.eth from HyperPlay & Game7

Unveiling: HyperPlay and Better Patterns For Web3 Gaming

MetaMask API Tutorials

If you are just getting started with MetaMask I suggest first going through our MetaMask API tutorials (which do not include the SDK) for building with React:

Helpful Tools When Working With MetaMask

👊😉👍

Signing data with MetaMask

Gui Bibeau — Wed, 01 Feb 2023 01:38:11 +0000

Signing is an act that carries a big responsibility. You sign things like contracts, cheques, and legal documents. If you create an application for signing things, chances are that any mediumly tech-savvy person will be able to use it. But in the blockchain world, what does signing mean?

This question you should take lightly, especially when it comes to your users and presenting them with transactions, messages, and data to be signed. Establishing trust with your users is critical and will be the tutorial's focus. In the following few paragraphs, we will put our dual UX and blockchain hats on and sign a message with Metamask.

Signing a message

First, Let's demystify what signing means in the world of crypto. In the physical world, your identity is proven with an identification card or, in some contexts, a written signature. This validity is typically ensured because they are verified by a trusted entity such as a notary or a governmental organization.

Trust in a blockchain comes from nodes in the network agreeing on the validity of transactions between two parties. It is to these transactions that the term signing is most often applied. Signing a transaction on Ethereum means using a private key to authorize a transfer of Ether or interaction with a smart contract on the Ethereum blockchain. It proves the ownership of the Ethereum address associated with the private key and allows the transaction to be added to the blockchain.

But signing goes beyond this. It can also be used for other purposes. For example, signing a message can be used to proven to come from a specific address. This is useful for many use cases like authentication, authorizations, and even exchanges of information. MetaMask, a fully featured wallet, can be used to sign messages and data. We will see popular methods and even explore cutting-edge Dapp architectures built on top of it.

Signing a message with MetaMask

MetaMask always does its best to make sure standards are followed and that the user is in control of their information. The methods we'll discuss today are the ones we recommend to be implemented by Dapps. We'll discuss signing simple messages and signing typed data. The respective methods are eth_sign and eth_signTypedData and can be submitted through the window.ethereum.request JSON-RPC API.

Signing a simple message

In some cases, if you want to have users approve or sign a message and don't intend to use the message on a chain, you can use the personnal_sign method, defined in EIP-191. This method is also relatively simple to implement in your code:

// the message to be signed
const message = 'I like tacos and I approved of this message'
const from = '0x...' //* pass in the user's address here
window.ethereum.request({
      method: 'personal_sign',
      params: [mesasge, from],
})

The advantage of this method is by far its simplicity and readability for users; they will be prompted by the MetaMask extension and will have a similar user experience to signing a document or a simple contract. A well-known use case is "Sign In With Ethereum," abbreviated as SIWE, defined in EIP-4361, where users approve connecting to an application and this signature is validated before a session is created in the server.

Even if we see that 95% of users typically will approve a request for signature, one of the limits with personnal_sign is around using it inside smart contracts. While we can use the string value of the message inside a smart contract, a string is expensive to parse into more complicated data formats.

This is where eth_signTypedData_v4 comes in!

Signing typed data.

JSON or JavaScript Object Notation is a famous data format used in web applications. However, JSON support is limited in the world of smart contracts, where performance means increasing user costs. Luckily EIP-712 is a proposed standard that allows users to sign data that smart contracts can understand.

Its usage is fairly similar to personal_sign, instead you simply have to pass a request of type eth_signTypedData_v4 and specify the Solidity types and details about the smart contract verifying the message:

// The message will be parsed in 
const message = JSON.stringify({
    domain: {
      chainId,
      name: "Example App",
      verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
      version: "1",
    },
    // should implement the top level type
    message: {
      prompt: "Are Doritos tacos any good?",
      answer: `YES THEY ARE!`,
    },
    // Top level type
    primaryType: 'QA',
    types: {
      EIP712Domain: [
        { name: 'name', type: 'string' },
        { name: 'version', type: 'string' },
        { name: 'chainId', type: 'uint256' },
        { name: 'verifyingContract', type: 'address' },
      ],
     // defining the top level type here. types refer to Solidity types    
      QA: [
        { name: 'prompt', type: 'string' },
        { name: 'answer', type: 'string' },
      ],
    },
  });
const from = '0x...' 
window.ethereum.request({ 
    method: 'eth_signTypedData_v4',
     params: [from, message]
})

The lift for front-end developers is a bit higher, but the most significant advantage of this signing method is that it opens up a world of possibilities for smart contracts! It also helps that we witness upwards of 97% approval of these messages in MetaMask! Now let's explore what kind of robust architectures you can unlock with eth_signTypedData_v4

A New Generation of Dapps!

In a world where malicious actors abound, moving approvals on-chain has a considerable amount of benefits:

auditable code
ability to create authorization layers that live on-chain directly without requiring user approvals on each action.

The last benefit is one I want to explore more. Since typed data is easy to understand for smart contracts, we can use it to hold long-lived user approvals on-chain. Take this example, a smart-contract implementing a paycheck every two weeks. The steps would happen as follows:

An employer deposits a 10,000$ amount in a smart contract for the next ten weeks of paychecks
The employer signs an authorization using eth_signTypedData_v4 that approves 1000$ per week for an employee
The employee, on his own, will claim the salary each week
The smart contract will verify if the authorization is valid and allow the disbursement
The employer can revoke his authorization at any time if they terminate the contract

This kind of scenario is the user experience you can implement if you integrate eth_signTypedData_v4. It would help if you worked towards a user interface that communicates what happens and educates users about your smart contract when implementing such an authorization layer.

Conclusion

We saw a lot of advanced concepts today, but understanding signatures is a great way to build sustainable and user-friendly Dapps. After the initial learning curve of communicating between wallet, smart contracts, and users, we are empowered to make better, more sustainable apps.

Digital Identity and SIWE

Gui Bibeau — Wed, 25 Jan 2023 15:41:07 +0000

Introduction

Everywhere you go, you have a digital identity. This identity is the collection of data that represents your activity online. It is challenging to stay truly anonymous online in this era of social media.

If you are present on a social like Facebook or TikTok, you probably have seen disturbing advertisements after visiting a website seemingly unrelated to those platforms. These advertisements are possible because websites implement a variety of cross-site tracking technologies, identifying you across the Internet.

An Overview of Digital Identity In Present-Day Earth, 2023

"Digital Identity" refers to a person or entity's identity existing in the digital world. It encompasses the information, attributes, and characteristics associated with a person or entity. You can use identity for various purposes, such as authentication, authorization, and access control. In tech jargon, a digital identity is an online or networked identity adopted or claimed in cyberspace by an individual, organization, or electronic device.

Digital identities can be centralized or decentralized, depending on how they are created and managed. A single entity, such as a government or a corporation, controls centralized digital identities, while the individual or entity they represent controls decentralized digital identities.

A user's digital identity can have simple attributes like:

Name
Address
Username and password
Date of birth

Or complex attributes such as:

Online search activities, like electronic transactions
Social security number
Medical history
Purchasing history or behavior
Biometric data
Digital certificates

In multiple industries, we see use cases for digital identities, such as finance, healthcare, and e-commerce, and uses, such as online banking, secure messaging, and personal data management.

A widespread issue plaguing digital identity on the Internet is Identity theft, so the subject of digital identity authentication and validation measures are critical to ensuring Web and network infrastructure security in the public and private sectors. Admittedly, there has been a lot of talk about authentication. With the advent of blockchain technology, we are seeing the use of digital identities in decentralized applications and platforms built on the blockchain. Recently, the Web3 community has become fragmented around multiple wallets and authentication methods.

Web3 developers are digital self-sovereignty advocates, so let's look at what the concept of digital identity means in web3.

Identity in Web3 and Its Implementation

Identity in web3 refers to self-sovereign identity, allowing individuals to own and control their digital identity. Centralized entities such as governments and corporations control Identities in traditional web2 systems. In web3, individuals can create and manage their digital identities using blockchain technology.

There are several methods of implementing identity in web3, with popular ones such as Decentralized Identity Protocols(DID) and Smart Contract-based Identity Protocols, and others like Self-sovereign identity (SSI) systems, Public Key Infrastructure (PKI) based systems and Biometric-based Identity as well.

Decentralized Identity (DID): These protocols allow users to create and manage their own digital identities on the blockchain. DIDs are unique identifiers registered on a blockchain and can be used to authenticate and authorize individuals on the web3 network. Then be used to link different identities, such as social media and email, to a single blockchain-based identity.
Smart Contract-based Identity: These protocols use smart contracts to store and manage user identities on the blockchain. Users can create and manage their identities using smart contracts and authenticate and authorize users on web3 applications.
Self-sovereign identity (SSI): Systems based on the same principles of DIDs, allowing the user to hold and control their identity data without needing a centralized entity.
Public Key Infrastructure (PKI): PKI-based systems use digital certificates and public and private keys to authenticate and authorize users on web3 applications. Similar to traditional web2 systems.
Biometric-based Identity: With biometrics, we can create and authenticate digital identities in web3 using fingerprints and facial and voice recognition. With web3, individuals can exert control over their data and identity, allowing them to share it selectively and, at any time, revoke that access. We can also connect multiple identities to prove our identity as a user.

It's pertinent to remember that the implementation of some of these methods is in its early stages, and research and development are ongoing to improve user experience and adoption.

Blockchain developers have long talked about developing "decentralized" identity standards to save users from the dangers of "Big Login," and this birthed: Sign-in With Ethereum proposal, a digital identity standard that was built by the community with direct support from the Ethereum Foundation and ENS, with Spruce Systems tapped to lead the charge.

How the Sign-In With Ethereum Proposal Affects Digital Identity

The Sign In With Ethereum(SIWE) proposal was a proposed standard for using Ethereum to authenticate and authorize users on web3 applications. It aimed to provide a standard way for users to sign in to web3 applications using their Ethereum address and private key, similar to how users currently sign in to web2 applications using their email and password. It uses a private key to authenticate a user's identity on the Ethereum blockchain. A private key is a unique string of characters associated with an Ethereum address and is used to sign digital transactions. When a user signs in with Ethereum, they provide a digital signature using their private key to prove that they are the owner of the Ethereum address. This proposal allows them to access their account and perform actions such as sending and receiving Ether, interacting with smart contracts, and more.

With SIWE, users would create an Ethereum address and private key specifically for signing in to web3 applications. When they want to sign in to a web3 application, they will use their private key to sign a message proving they are the owner of the Ethereum address. The web3 application would then verify the signature and authenticate the user.

SIWE affects digital identity by:

Allowing individuals to use their Ethereum address as a way to authenticate on web3 applications
Eliminating the need for complex passwords and usernames
Allowing users to use their Ethereum address as a decentralized identity across different web3 applications
Enabling web3 applications to authenticate and authorize users without the need for centralized identity providers
- such as social media login or email and password, which could lead to more privacy and security for the user

The proposal aims to standardize how you authenticate with a digital identity. The following are the steps:

A server creates a Nonce (unique number) for each user that will sign-in
A user requests to connect a site with their wallet
The user is presented with a unique message containing the Nonce and information about the website
The user signs in with their wallet
The user is then authenticated or approved
Access to data for this user is given to the website

MetaMask is a popular tool and a browser extension that allows users to interact with the Ethereum blockchain and can be used to implement digital identity and SIWE. With it, we can create and manage Ethereum addresses and use them as digital identities on Web3 platforms and dApps.

For your users, the experience is simple, but multiple steps are happening behind the scenes.

How to Implement Sign-In With Ethereum

As mentioned above, we will need to generate a unique number called a Nonce; since this should be done on a server, we will be working with Next.js, the most popular React framework for building server-side rendered applications.

We will be starting from a basic Next.js application created with create-next-app, and we will use the following
libraries:

@metamask/providers - A library for interacting containing TypeScript types for the MetaMask provider API
ethers - A library containing different utilities for interacting with the Ethereum blockchain
siwe - A library containing utilities for implementing Sign In With Ethereum
iron-session - A library for implementing session management in Next.js applications

N.B. The complete code is available here.

A Dance Between the Client and the Server

With these libraries, we can lay down the architecture for implementing SIWE. To connect users, we will want to implement the following:

Generate a Nonce inside getServerSideProps
Pass the Nonce to the client
Connect to a user's wallet
Make the user sign a message containing the Nonce
Verify the signature
Store the signature in a session

Generate a Nonce Inside `getServerSideProps`

Our first step is to generate a Nonce inside getServerSideProps of our login page, located on the pages/login.tsx.

Generating the Nonce inside getServerSideProps is crucial because execution happens on the server, and we can pass it to the client, which is faster than fetching it from an API route like in other implementations.

export const getServerSideProps = () => {
  const nonce = generateNonce();

  return {
    props: {
      nonce,
    },
  };
};

With this, we can now pass the Nonce to the client.

Passing Our Nonce to the Client

Next, we will pass the Nonce to the client. We do this by defining a default export for the login page, a React component, that will receive the Nonce as a prop.

type Props = { nonce: string }

export default function Login({ nonce }: Props) {
    // ...rest of the component

Connect to a users wallet and sign a message

Now we go to the core of our implementation, connecting to a user's wallet. We do this inside a connect function which gets called when the user clicks the connect button.

See the full function

Our function will work as follows:

Request the user to connect to their wallet with window.ethereum.request({ method: 'eth_requestAccounts' })
Grab the current network with window.ethereum.request({ method: 'eth_chainId' })
Create a message to sign

const siweInstance = new SiweMessage({
  // this will let the user validate the domain they are logging in to
  domain: window.location.host,
  // this will let the user validate the origin they are logging in to
  uri: window.location.origin,
  address: address,
  statement: 'I am logging in to the SIWE demo',
  version: '1',
  chainId: Number(chainId),
  nonce,
})

Sign the message with

window.ethereum.request({
  method: 'personal_sign',
  params: [message, address],
})

Post the signature to the server

const res = await fetch('/api/login', {
  method: 'POST',
  body: JSON.stringify({ message, signature, address }),
})
const data = await res.json()

Verify the signature

Then we can move to the server and verify the signature. This verification happens inside the api/login route, which gets called when the user clicks the connect button.

See the full API route

In this API route, we'll focus on the following steps:

Verify the signature
Ensure the signature is sent from the correct address
Store the signature in a session

With this done, you now have full access to the user's signature and can use it to authenticate the user on your web3 platform or dApp. The interesting part is that you now also have a session containing the user's address.

This address is helpful for prefetching data about the user; for example, you can use the address to fetch data related to the user's address, all while keeping the user's privacy intact.

If done well, digital identity in Web3 can provide a more secure and private way to handle user identities while providing a great user experience.

Conclusion

In conclusion, digital identity in Web3 is a critical topic that is gaining more and more attention as the decentralized Web continues to grow. Implementing digital identity in Web3 can be done using various methods, including DIDs, smart contract-based identity protocols, and Metamask and Next.js. By using these tools and techniques, individuals can take control of their digital identity and use it to authenticate and authorize themselves on web3 platforms and dApps.

For digital identity in Web3 to be successful, individuals, developers, and businesses need to continue to educate themselves on the benefits and best practices for implementing digital identity in a secure and decentralized manner. With the right tools and knowledge, digital identity in Web3 can provide a more secure and private way to handle user identities.

Introduction to MetaMask API

Eric Bishard — Thu, 05 Jan 2023 03:19:10 +0000

If you are planning to integrate authentication and identity into your Web3 applications, getting acclimated with the MetaMask API is a great way to start learning the capabilities afforded to you working with the MetaMask Extension and learning your way around the Web3 stack in general.

What is the MetaMask API?

Whenever we use a browser like Chrome, Firefox, or Brave and a wallet extension like MetaMask is installed, we can use the Ethereum provider (as specified by EIP-1193) injected into the browser page at window.ethereum. Historically, Provider implementations exhibit conflicting interfaces and behaviors between wallets. This EIP formalizes an Ethereum Provider API to promote wallet interoperability.

We use this provider with our dapp to request users’ Ethereum accounts, read on-chain data and have the user sign messages and transactions.

MetaMask API calls are defined with the JSON-RPC specs that we will explain further.

We can tell in the developer tools when MetaMask is installed and enabled through the developer tools, using chrome you can look into the Sources/Page, and you will see an icon that represents MetaMask.

Page is used for viewing available resources on the current webpage.
Under the Top level, we see the representation of the main document and all of its resources.

If we see MetaMask represented by a cloud icon here, we know that the MetaMask is installed and not disabled.

The window.ethereum object is being injected into the page, allowing us to interact with MetaMask and Ethereum.

We can directly access and call the window.ethereum object in our developer tools console. Let’s say that we wanted to get the current chainId.

By running the code above in our console, and if we are currently connected to Polygon, we would see ‘0x89’ returned from this method call.

As you get started with using MetaMask API methods, you might want to check out some of our beginner-level videos from our Lead DX Engineer Gui Bibeau that can help get you started working with the MetaMask API.

What is JSON RPC?

JSON-RPC is a transport agnostic RPC that uses the JSON data format. When communicating with a JSON-RPC server you’re sending light-weight JSON despite how that server was built or with what language or platform is was built on. It's designed to be simple and is relatively simple to learn with the right tools.

This is convenient as it means no matter if we send over HTTP or Web Sockets, we are always sending JSON which is approachable to all developers.

JSON RPC IMHO, is a really important technology to learn about when first getting into Web3 and learning to build on the Dapp layer, a few other technologies I think you should be familiar with are:

JavaScript and TypeScript
having a good understanding of existing Web2 concepts
Smart Contracts (Solidity)

You can learn more about the JSON RPC specification at jsonrpc.org/specification

A JSON RPC Request and Response Example

Here we have a typical request and response in JSON format. The first example uses the eth_chainId RPC API method outlined in EIP-695 which returns a single STRING result for an integer value in hexadecimal format, describing the currently configured CHAIN_ID value used for signing replay-protected transactions, introduced by EIP-155.

Request

We call the eth_chainId method in MetaMask, which does not require any parameter input. A request is like a function call and takes either zero or many params that we can act on for the resulting response.

{
  "id": 0,
  "jsonrpc": "2.0",
  "method": "eth_chainId",
  "params": []
}

What is ID for: This is a unique ID so a client can relate responses back to their originating request
Like when using web sockets in the context of http this is less relevant, but for batching requests this is essential.
What is jsonrpc: This indicates the version of JSONRPC you are you using.

Response

{
  "jsonrpc": "2.0",
  "result": "0x1",
  "id": 0
}

And it returns the current chain the user is connected to in the result field. We can determine this is mainnet as the number 1 is really easy to read in hex value, but other chainIds returned as hex value are more difficult to read. In the JavaScript example below we will work on converting that hexadecimal value to a number.

JSON RPC is simple. above, we are calling MetaMask API methods, but you can also call custom RPC endpoints. In our next example, we are looking at a custom RPC endpoint that simply returns a list of chains.

Request

{
  "id": 0,
  "jsonrpc": "2.0",
  "method": "list_chains",
  "params": [1]
}

It takes a parameter that represents the number of chains we want returned. For simplicity we are just returning one.

Response

{
  "id": 0
  "jsonrpc": "2.0",
  "result": [{
    "chain": "Ethereum Mainnet",
    "chainId": "0x1"
  }]
}

Notice that the response is actually an array of chains.

When working in JavaScript it’s easy to call an RPC endpoint using the window.ethereum object in your Dapp, which is connected to an RPC provider in MetaMask.
As you see here, we just setup that request as an object and call the request method passing a MetaMask API method eth_chainId.

const chainIdHex = await window.ethereum.request({
  "method": "eth_chainId",
  "params": []
})

console.log(chainIdHex)
// 0x1

let chainIdNumber = parseInt(chainIdHex, 16)
console.log(chainIdNumber)
// 1

Again, we note that we get the chainId back as a hex value. In this example, the chainId variable contains the string representation of an Ethereum chain ID in hexadecimal format (prefixed with 0x). The parseInt function is used to convert this string to an integer by specifying the base as 16 (hexadecimal). This returns the numerical equivalent of the Ethereum chain ID, which is 1 in this case.

Note that this is just an example, and the exact implementation will depend on the specific context and use case. You may need to handle errors and exceptions, such as when the input string is not a valid hexadecimal number, or when the input is not a valid Ethereum chain ID.

What is Open RPC?

The OpenRPC Specification defines a standard, programming language-agnostic interface description for JSON-RPC 2.0 APIs. An ADL (API Description Language) for JSON-RPC APIs

The OpenRPC Specification

Language agnostic interface description
Discover capabilities of a service w/out source or docs
Ability to interact with a remote service w/ minimal implementation logic
Similar to interface descriptions for lower-level programming langs
Removes guesswork in calling JSON-RPC services

Think of OpenRPC like a Open API/Swagger but for JSON-RPC APIs (it’s a specification/tool)

It’s a human-readable format for the exchange of capabilities. In other words, it allows humans and computers to discover and understand the capabilities of a service without access to its source code, documentation, or inspection of network traffic.

OpenRPC provides a standardized way to describe the structure and parameters of an API, as well as the types and formats of the data that it accepts and returns. This allows developers to create APIs that can be easily understood and integrated by other developers, without having to spend time and effort on learning the details of each individual API.

For example, if a developer wants to create an API that allows users to interact with the Ethereum blockchain, they can use OpenRPC to define the API in a way that is consistent with other Ethereum-related APIs. This makes it easier for other developers to understand and use the API, and allows them to integrate it into their own applications without having to spend time on learning the details of the API's implementation.

That's a high level overview, but if you want to deep dive into OpenRPC I suggest checking out ZaneStarr's Introduction to OpenRPC session from the API Specification Conference 2022.

Essential Tools

This section highlight a few tools that can help you when dealing with:

Testing JSON RPC servers
Creating an Open RPC Spec
Working with MetaMask API
Interacting with MetaMask using Smart Contracts

Links to Tools

When building with MetaMask a great resource for the injected window.ethereum object is our corresponding Ethereum Provider API docs.
Want to know about all of the eth_ and wallet_ methods supported by MetaMask?

Ethereum Provider

The Ethereum Provider

Check the corresponding RPC API docs that have information on methods we call from our JS code like eth_requestAccounts, wallet_addEthereumChain, or wallet_switchEthereumChain. Maybe you need to add a network/chain to MetaMask adn switch your users to that chain, you can find documentation and code to show you how to do that here:

MetaMask RPC API

MetaMask RPC API

The next link will allow you to connect a wallet and try these RPC API calls in the browser, we plan on merging the playground with a future version of our docs.

MetaMask API Playground

MetaMask API Playground

Chainlink maintains a site called chainlist.org, and it’s a great resource for network/chain information. I often browse the site just looking for the various Ethereum networks and testnets, their chainIds, and the other information needed to connect to them. There are other sources for this information as well, but this is a good hack for quickly finding that information and RPC Server Addresses for each chain with information about their latency and privacy.

You can add and switch to any chain in the list when MetaMask confirmation pops up you can see what information is needed to add that chain to MetaMask.

Chainlist

Chainlist

Below is an example using Chainlist, I can see Fantom Opera (mainnet), it's chainId and I can add to MetaMask and in the confirmation see the information used to add the network to my wallet.

Eserialize

eserialize

Eserialize is a tool that can serialize and deserialize the hex to string or number to hex or the other way around, below is an example of how to use it for something simple like verifying the chainId's hex string to the number listed on chainlist.org.

Examples of Usage

The MetaMask Playground lists JSON-RPC methods we support in our API.

The majority of the methods are prefixed with wallet_ or eth_.

Some of the more popular and IMO most used methods are:

eth_accounts : get accounts and wallet addresses
eth_chainId : returns current chain id as hex
wallet_addEthereumChain : Adding an Ethereum chain
wallet_switchEthereumChain : Switch user to the correct chain
contract.mint : Call smart contract function that initiates transaction on the blockchain triggering MetaMask for the user

The following examples use the MetaMask API playground

When you expand each method you have information about params and results and each method example can be inspected and run in the browser.

Here we are testing the eth_accounts method to obtain the connected account:

Next is an example calling eth_chainId which will return the current chainId of the network we are connected to:

Another widely used method is wallet_addEthereumChain

This allows dapps to suggest chains to be added to the user’s wallet.

Just specify a chainId and some chain metadata. The wallet application may arbitrarily refuse or accept the request. The value null is returned if the chain was added, and errors otherwise.

This API endpoint was introduced by EIP 3085.

Here is what the user sees when adding a chain:

This next API method switches its active Ethereum chain. Introduced by EIP 3326.

The user will see a dialogue similar to the one below:

NOTE: This method will throw an error if you do not have the chain that you are trying to switch to already added to the users wallet.

For this reason, when we want to switch the user to another chain in the Dapp, we can combine the wallet_addEthereumChain and wallet_switchEthereumChain methods in a try / catch.

Let's take a look at how to add/switch the Ethereum chain to Polygon Mainnet in a React component:

import { useContext } from 'react'
import { MetaMaskContext } from '../../../context/MetaMaskProvider'
import MyButton from '../atoms/MyButton'

const ConnectNetwork = () => {
  const { provider } = useContext(MetaMaskContext)

  const addSwitchNetwork = async () => {
    if (provider) {
      try {
        await window.ethereum.request({
          method: 'wallet_switchEthereumChain',
          params: [{ chainId: '0x4' }],
        })
      } catch (error) {
        try {
          await window.ethereum.request({
            method: 'wallet_addEthereumChain',
            params: [
              {
                chainId: '0x313337',
                blockExplorerUrls: ['https://polygonscan.com/'],
                chainName: 'Polygon Mainnet',
                nativeCurrency: {
                  decimals: 18,
                  name: 'Polygon',
                  symbol: 'MATIC'
                },
                rpcUrls: ['https://polygon-rpc.com']
              },
            ],
          })
        } catch (error) {
          // user rejects the request to "add chain" or param values are wrong, maybe you didn't use hex above for `chainId`?
          console.log(`wallet_addEthereumChain Error: ${error.message}`)
        }
      }
    }
  }

  return (
    <MyButton handleClick={addSwitchNetwork}>
      <p>Connect Rinkeby</p>
    </MyButton>
  )
}

export default ConnectNetwork

The code above assumes that you are using some type of Context API component to track the wallet state and provide it to the components in your app, but if you are not using React you can focus on the try/catch portion of the code and modify it to fit your application.

Connecting to MetaMask Mobile with SDK

If you would like to give your users the option of easily connecting to the MetaMask Extension or MetaMask Mobile (from various platforms) you should look into using the MetaMask SDK where you can learn more and link to the docs. We have example applications in React and NextJS. The MetaMask SDK utilizes the MetaMask API behind the scenes and although is another topic, it's noteworthy to mention here.

For an example of how to integrate the MetaMask SDK within a NextJS application check out our "Getting Started" example.

Smart Contract Example

If we wanted to call a smart contract function that has a payable keyword to receive ether, below is an example of how you might trigger MetaMask from a Smart Contract:

contract MyNFT {
  uint256 public totalSupply;
  uint256 public maxSupply;
  mapping(uint256 => address) public tokenOwners;

  function mint(uint256 tokenId) public payable {
    require(totalSupply + 1 <= maxSupply, "Cannot mint more tokens: maximum supply reached");
    require(tokenOwners[tokenId] == address(0), "Token ID already in use");
    tokenOwners[tokenId] = msg.sender;
    totalSupply++;
  }
}

With the payable keyword added, this mint() function can be called with a transaction that includes a payment. The amount of Ether sent with the transaction will be available to the function as the msg.value parameter. Note that you may also need to add additional logic to the function to handle the received Ether, such as transferring it to a contract owner's account.

The function takes a uint256 parameter representing the unique token ID of the NFT to be minted. The function first checks if the totalSupply will be greater than the maxSupply after minting the new token. If this is the case, the function will revert with an error message. The function then checks if the specified token ID is already in use. If the token ID is already in use, the function will revert with an error message. Otherwise, the function will update the token ownership mapping to assign the token to the caller of the function (using the msg.sender variable) and increment the totalSupply.

We could then call this function in our smart contract through a React component that might look something like this:

const MintingPage = ({nft}) => {

  const [isMinting, setIsMinting] = useState(false)
  const [error, setError] = useState(false)
  const [errorMessage, setErrorMessage] = useState("")
  const { user, nftContract, chainId } = useContext(MetaMaskContext)
  const { address } = user

  const mintNFT = async () => {
    console.log("start minting")
    setIsMinting(true)

    nftContract.mint({
      from: address,
      value: nft.priceHexValue
    })
    .then(async(tx) => {
      await tx.await()
      console.lgo(`minting complete, mined: ${tx}`)
      setIsMinting(false)
    })
    .catch((error) => {
      console.log(error)
      setError(true)
      setErrorMessage(error?.message)
      setIsMinting(false)
    })
  }
}

We use the await keyword to wait for the transaction to be mined on the blockchain before continuing with the execution of the code.

the .then and .catch syntax is used to handle the result of the transaction. If the transaction is successful, the .then block will be executed. If the transaction fails, the .catch block will be executed, and the component's state will be updated with an error message.

the mint function calls the mint method on the contract and then waits for the transaction to be mined using the wait method. This will ensure that the mint function does not continue executing until the transaction has been successfully mined on the blockchain. This can be useful to ensure that the state of the contract is updated before the rest of the code continues executing.

Web3 Unleashed: The MetaMask API

Eric Bishard — Thu, 06 Oct 2022 03:37:32 +0000

Overview

In this edition of Web3 Unleashed, we're interviewing the MetaMask DevRel team Gui Bibeau and Eric Bishard about the MetaMask API and other tools and features on the horizon like their MetaMask SDK. We'll will be building a dapp live with them to custom integrate MetaMask into a NextJS application!

If you would like to follow along with the Web3 Unleashed Episode #7 demo during or after the stream, below are the steps we walked through to build our dapp integration with MetaMask API.

Prerequisites

MetaMask Extension
NodeJS
NPM
Git

Clone and Install Dependencies

Clone the MetaMask API Web3 Unleashed repo and once in the directory we want to ensure we are on the main branch and run:

npm i && npm run dev

This will give us a starting point in a NextJS application to build our demo.

Connecting the User

We will start by updating the hooks/useMetamask.tsx file. This is our global app context that utilizes "out of the box" Context API in React.

Update hooks/useMetamask.tsx file:

import React, { useEffect, type PropsWithChildren } from "react";

type ConnectAction = { type: "connect"; wallet: string };
type DisconnectAction = { type: "disconnect" };
type PageLoadedAction = { type: "pageLoaded"; isMetamaskInstalled: boolean };
type LoadingAction = { type: "loading" };

type Action =
  | ConnectAction
  | DisconnectAction
  | PageLoadedAction
  | LoadingAction;

type Dispatch = (action: Action) => void;

type Status = "loading" | "idle" | "pageNotLoaded";

type State = {
  wallet: string | null;
  isMetamaskInstalled: boolean;
  status: Status;
};

const MetamaskContext = React.createContext<
  { state: State; dispatch: Dispatch } | undefined
>(undefined);

const initialState: State = {
  wallet: null,
  isMetamaskInstalled: false,
  status: "loading",
} as const;

function metamaskReducer(state: State, action: Action): State {
  switch (action.type) {
    case "connect": {
      const { wallet } = action;
      return { ...state, wallet, status: "idle" };
    }
    case "disconnect": {
      return { ...state, wallet: null };
    }
    case "pageLoaded": {
      const { isMetamaskInstalled } = action;
      return { ...state, isMetamaskInstalled, status: "idle" };
    }
    case "loading": {
      return { ...state, status: "loading" };
    }
    default: {
      throw new Error("Unhandled action type");
    }
  }
}

function MetamaskProvider({ children }: PropsWithChildren) {
  const [state, dispatch] = React.useReducer(metamaskReducer, initialState);
  const value = { state, dispatch };

  useEffect(() => {
    if (typeof window !== undefined) {
      // start by checking if window.ethereum is present, indicating a wallet extension
      const ethereumProviderInjected = typeof window.ethereum !== "undefined";
      // this could be other wallets so we can verify if we are dealing with metamask
      // using the boolean constructor to be explicit and not let this be used as a falsy value (optional)
      const isMetamaskInstalled =
        ethereumProviderInjected && Boolean(window.ethereum.isMetaMask);

      dispatch({ type: "pageLoaded", isMetamaskInstalled });
    }
  }, []);

  return (
    <MetamaskContext.Provider value={value}>
      {children}
    </MetamaskContext.Provider>
  );
}

function useMetamask() {
  const context = React.useContext(MetamaskContext);
  if (context === undefined) {
    throw new Error("useMetamask must be used within a MetamaskProvider");
  }
  return context;
}

export { MetamaskProvider, useMetamask };

The above change is by far one of our largest changes that we will do at one time but this file is in charge of helping us keep our application state in sync with the wallet state and is crucial so that we can build the components and features that we want.

After this change you will might notice red squiggly lines under the window.ethereum object, this is only because if we want TypeScript to stop yelling at us in our code editor, we need to tell it what window.ethereum is type-wise.

Add the file types.d.ts to the app root:

type InjectedProviders = {
  isMetaMask?: true;
};

interface Window {
  ethereum: InjectedProviders & {
    on: (...args: any[]) => void;
    removeListener?: (...args: any[]) => void;
    request<T = any>(args: any): Promise<T>;
  };
}

You should no longer see those warnings in your hooks/useMetamask.tsx file.

Create a components/Loading.tsx file:

import { type FC } from "react";

const dot = `rounded-full h-2 w-2 mx-0.5 bg-current animate-[blink_1s_ease_0s_infinite_normal_both]"`;

export const Loading: FC = () => {
  return (
    <span className="inline-flex text-center items-center leading-7 h-6">
      <span className={dot} key="dot_1'" />
      <span className={dot} style={{ animationDelay: "0.2s" }} key="dot_2" />
      <span className={dot} style={{ animationDelay: "0.2s" }} key="dot_3" />
    </span>
  );
};

With our Type Definitions added, our Context Provider updated, and our Loading.tsx in place, we can now make changes to our components/Wallet.tsx file and add a loading state for our app.

Update the components/Wallet.tsx file to:

import Image from "next/future/image";
import Link from "next/link";
import { useMetamask } from "../hooks/useMetamask";
import { Loading } from "./Loading";

export default function Wallet() {
  const {
    dispatch,
    state: { status, isMetamaskInstalled },
  } = useMetamask();

  const showInstallMetamask = status !== "pageNotLoaded" && !isMetamaskInstalled;
  const showConnectButton = status !== "pageNotLoaded" && isMetamaskInstalled;

  const handleConnect = async () => {
    dispatch({ type: "loading" });
    const accounts = await window.ethereum.request({
      method: "eth_requestAccounts",
    });

    if (accounts.length > 0) {
      dispatch({ type: "connect", wallet: accounts[0] });
    }
  };

  return (
    <div className="bg-truffle">
      <div className="mx-auto max-w-2xl py-16 px-4 text-center sm:py-20 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
          <span className="block">Metamask API intro</span>
        </h2>
        <p className="mt-4 text-lg leading-6 text-white">
          Follow along with the{" "}
          <Link
            href="https://github.com/GuiBibeau/web3-unleashed-demo"
            target="_blank"
          >
            <span className="underline cursor-pointer">Repo</span>
          </Link>{" "}
          in order to learn how to use the Metamask API.
        </p>
        {showConnectButton && (
          <button
            onClick={handleConnect}
            className="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-ganache text-white px-5 py-3 text-base font-medium  sm:w-auto"
          >
            {status === "loading" ? <Loading /> : "Connect Wallet"}
          </button>
        )}

        {showInstallMetamask && (
          <Link href="https://metamask.io/" target="_blank">
            <a className="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-ganache text-white px-5 py-3 text-base font-medium  sm:w-auto">
              Connect Wallet
            </a>
          </Link>
        )}
      </div>
    </div>
  );
}

This imports the loading component, further destructures the return value of our useMetaMask() custom hook, sets up variables to track if MetaMask is installed or connected for conditional rendering and gives us a handleConnect() function for dispatching changes to our state reducer.

If we are tracking our changes we can see that we have touched 4 files by creating or updating/refactoring. At this point we should be able to connect a user to our dapp with MetaMask.

Run the project and attempt to connect to your MetaMask wallet.

npm run dev

Two things are happening now:

If a user does not have MetaMask installed they will get a "Connect Wallet" button that simply takes you to download MetaMask.
If MetaMask is installed they will see a "Connect Wallet" button that actually connects their wallet to the dapp.

We are not yet hiding the button once connected or displaying any wallet information. As well, you will notice in MetaMask that you are connected to the dapp. To test the Install link you can go into your extension manager and disable MetaMask temporarily.

Checkout the Diff to see what changed

Use the MetaMask API to get User Info

We want to display the a balance from our wallet, and the public address of the wallet account that is connected to our dapp. For this we need to make a few changes again to the hooks/useMetamask.tsx and add the logic and JSX/HTML in our components/Wallet.tsx.

Update hooks/useMetamask.tsx to:

import React, { useEffect, type PropsWithChildren } from "react";

type ConnectAction = { type: "connect"; wallet: string; balance: string };
type DisconnectAction = { type: "disconnect" };
type PageLoadedAction = { type: "pageLoaded"; isMetamaskInstalled: boolean };
type LoadingAction = { type: "loading" };

type Action =
  | ConnectAction
  | DisconnectAction
  | PageLoadedAction
  | LoadingAction;

type Dispatch = (action: Action) => void;

type Status = "loading" | "idle" | "pageNotLoaded";

type State = {
  wallet: string | null;
  isMetamaskInstalled: boolean;
  status: Status;
  balance: string | null;
};

const initialState: State = {
  wallet: null,
  isMetamaskInstalled: false,
  status: "loading",
  balance: null,
} as const;

function metamaskReducer(state: State, action: Action): State {
  switch (action.type) {
    case "connect": {
      const { wallet, balance } = action;
      return { ...state, wallet, balance, status: "idle" };
    }
    case "disconnect": {
      return { ...state, wallet: null };
    }
    case "pageLoaded": {
      const { isMetamaskInstalled } = action;
      return { ...state, isMetamaskInstalled, status: "idle" };
    }
    case "loading": {
      return { ...state, status: "loading" };
    }
    default: {
      throw new Error("Unhandled action type");
    }
  }
}

const MetamaskContext = React.createContext<
  { state: State; dispatch: Dispatch } | undefined
>(undefined);

function MetamaskProvider({ children }: PropsWithChildren) {
  const [state, dispatch] = React.useReducer(metamaskReducer, initialState);
  const value = { state, dispatch };

  useEffect(() => {
    if (typeof window !== undefined) {
      // start by checking if window.ethereum is present, indicating a wallet extension
      const ethereumProviderInjected = typeof window.ethereum !== "undefined";
      // this could be other wallets so we can verify if we are dealing with metamask
      // using the boolean constructor to be explecit and not let this be used as a falsy value (optional)
      const isMetamaskInstalled =
        ethereumProviderInjected && Boolean(window.ethereum.isMetaMask);

      dispatch({ type: "pageLoaded", isMetamaskInstalled });
    }
  }, []);

  return (
    <MetamaskContext.Provider value={value}>
      {children}
    </MetamaskContext.Provider>
  );
}

function useMetamask() {
  const context = React.useContext(MetamaskContext);
  if (context === undefined) {
    throw new Error("useMetamask must be used within a MetamaskProvider");
  }
  return context;
}

export { MetamaskProvider, useMetamask };

We have done some slight refactoring to account for the ability to track the state of the wallet balance, added balance to our initialState, and updated our connect action in our reducer

Update components/Wallet.tsx to:

import Image from "next/future/image";
import Link from "next/link";
import { useMetamask } from "../hooks/useMetamask";
import { Loading } from "./Loading";

export default function Wallet() {
  const {
    dispatch,
    state: { status, isMetamaskInstalled, wallet, balance },
  } = useMetamask();

  const showInstallMetamask = status !== "pageNotLoaded" && !isMetamaskInstalled;
  const showConnectButton = status !== "pageNotLoaded" && isMetamaskInstalled && !wallet;

  const handleConnect = async () => {
    dispatch({ type: "loading" });
    const accounts = await window.ethereum.request({
      method: "eth_requestAccounts",
    });

    if (accounts.length > 0) {
      const balance = await window.ethereum!.request({
        method: "eth_getBalance",
        params: [accounts[0], "latest"],
      });

      dispatch({ type: "connect", wallet: accounts[0], balance });
    }
  };

  return (
    <div className="bg-truffle">
      <div className="mx-auto max-w-2xl py-16 px-4 text-center sm:py-20 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
          <span className="block">Metamask API intro</span>
        </h2>
        <p className="mt-4 text-lg leading-6 text-white">
          Follow along with the{" "}
          <Link
            href="https://github.com/GuiBibeau/web3-unleashed-demo"
            target="_blank"
          >
            <span className="underline cursor-pointer">Repo</span>
          </Link>{" "}
          in order to learn how to use the Metamask API.
        </p>

        {wallet && (
          <div className=" px-4 py-5 sm:px-6">
            <div className="-ml-4 -mt-4 flex flex-wrap items-center justify-between sm:flex-nowrap">
              <div className="ml-4 mt-4">
                <div className="flex items-center">
                  <div className="ml-4">
                    <h3 className="text-lg font-medium leading-6 text-white">
                      Address: <span>{wallet}</span>
                    </h3>
                    <p className="text-sm text-white">
                      Balance: <span>{balance}</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {showConnectButton && (
          <button
            onClick={handleConnect}
            className="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-ganache text-white px-5 py-3 text-base font-medium  sm:w-auto"
          >
            {status === "loading" ? <Loading /> : "Connect Wallet"}
          </button>
        )}

        {showInstallMetamask && (
          <Link href="https://metamask.io/" target="_blank">
            <a className="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-ganache text-white px-5 py-3 text-base font-medium  sm:w-auto">
              Connect Wallet
            </a>
          </Link>
        )}
      </div>
    </div>
  );
}

As well we have added balance to our destructured object so that we have access to it in our component, updated the showConnectButton logic and requested the balance using the eth_getBalance MetaMask (RPC API) method.

We have also updated our JSX/HTML to include an address and balance.

This is a great start, but our UI is still lacking and there is more logic we need to properly track our wallet state and update the page because if we connect to our wallet we get a funny display for our balance and if we refresh our page, we don't see our address and balance. But we will now fix those issues.

Checkout the Diff to see what changed

Two Way Communication with MetaMask

Again we will be updating the hooks/useMetamask.tsx and components/Wallet.tsx files. The idea will be to add a few more reducer actions including Loading and Idle states for the page, we will fix our button to say "Install MetaMask" instead of "Connect MetaMask" and we will parse the balance to display a readable number.

Finally, we will add some code that uses the wallet_watchAsset MetaMask (RPC API) method to add $USDC token to our MetaMask wallet. This will enable our users to see those tokens in their wallet if they have them. If a dApp uses a particular token, we can programmatically do this for them rather than expecting to do it themselves manually through the MetMask UI.

Update hooks/useMetamask.tsx to:

import React, { useEffect, type PropsWithChildren } from "react";

type ConnectAction = { type: "connect"; wallet: string; balance: string };
type DisconnectAction = { type: "disconnect" };
type PageLoadedAction = { type: "pageLoaded"; isMetamaskInstalled: boolean };
type LoadingAction = { type: "loading" };
type IdleAction = { type: "idle" };

type Action =
  | ConnectAction
  | DisconnectAction
  | PageLoadedAction
  | LoadingAction
  | IdleAction;

type Dispatch = (action: Action) => void;

type Status = "loading" | "idle" | "pageNotLoaded";

type State = {
  wallet: string | null;
  isMetamaskInstalled: boolean;
  status: Status;
  balance: string | null;
};

const initialState: State = {
  wallet: null,
  isMetamaskInstalled: false,
  status: "loading",
  balance: null,
} as const;

function metamaskReducer(state: State, action: Action): State {
  switch (action.type) {
    case "connect": {
      const { wallet, balance } = action;
      return { ...state, wallet, balance, status: "idle" };
    }
    case "disconnect": {
      return { ...state, wallet: null, balance: null };
    }
    case "pageLoaded": {
      const { isMetamaskInstalled } = action;
      return { ...state, isMetamaskInstalled, status: "idle" };
    }
    case "loading": {
      return { ...state, status: "loading" };
    }
    case "idle": {
      return { ...state, status: "idle" };
    }
    default: {
      throw new Error("Unhandled action type");
    }
  }
}

const MetamaskContext = React.createContext<
  { state: State; dispatch: Dispatch } | undefined
>(undefined);

function MetamaskProvider({ children }: PropsWithChildren) {
  const [state, dispatch] = React.useReducer(metamaskReducer, initialState);
  const value = { state, dispatch };

  useEffect(() => {
    if (typeof window !== undefined) {
      // start by checking if window.ethereum is present, indicating a wallet extension
      const ethereumProviderInjected = typeof window.ethereum !== "undefined";
      // this could be other wallets so we can verify if we are dealing with metamask
      // using the boolean constructor to be explecit and not let this be used as a falsy value (optional)
      const isMetamaskInstalled =
        ethereumProviderInjected && Boolean(window.ethereum.isMetaMask);

      dispatch({ type: "pageLoaded", isMetamaskInstalled });
    }
  }, []);

  return (
    <MetamaskContext.Provider value={value}>
      {children}
    </MetamaskContext.Provider>
  );
}

function useMetamask() {
  const context = React.useContext(MetamaskContext);
  if (context === undefined) {
    throw new Error("useMetamask must be used within a MetamaskProvider");
  }
  return context;
}

export { MetamaskProvider, useMetamask };

Update components/Wallet.tsx to:

import Link from "next/link";
import { useMetamask } from "../hooks/useMetamask";
import { Loading } from "./Loading";

export default function Wallet() {
  const {
    dispatch,
    state: { status, isMetamaskInstalled, wallet, balance },
  } = useMetamask();

  const showInstallMetamask = status !== "pageNotLoaded" && !isMetamaskInstalled;
  const showConnectButton = status !== "pageNotLoaded" && isMetamaskInstalled && !wallet;

  const showAddToken = status !== "pageNotLoaded" && typeof wallet === "string";

  const handleConnect = async () => {
    dispatch({ type: "loading" });
    const accounts = await window.ethereum.request({
      method: "eth_requestAccounts",
    });

    if (accounts.length > 0) {
      const balance = await window.ethereum!.request({
        method: "eth_getBalance",
        params: [accounts[0], "latest"],
      });

      dispatch({ type: "connect", wallet: accounts[0], balance });

      // we can register an event listener for changes to the users wallet
      window.ethereum.on("accountsChanged", async (newAccounts: string[]) => {
        if (newAccounts.length > 0) {
          // uppon receiving a new wallet, we'll request again the balance to synchronize the UI.
          const newBalance = await window.ethereum!.request({
            method: "eth_getBalance",
            params: [newAccounts[0], "latest"],
          });

          dispatch({
            type: "connect",
            wallet: newAccounts[0],
            balance: newBalance,
          });
        } else {
          // if the length is 0, then the user has disconnected from the wallet UI
          dispatch({ type: "disconnect" });
        }
      });
    }
  };

  const handleAddUsdc = async () => {
    dispatch({ type: "loading" });

    await window.ethereum.request({
      method: "wallet_watchAsset",
      params: {
        type: "ERC20",
        options: {
          address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
          symbol: "USDC",
          decimals: 18,
          image: "https://cryptologos.cc/logos/usd-coin-usdc-logo.svg?v=023",
        },
      },
    });
    dispatch({ type: "idle" });
  };

  return (
    <div className="bg-truffle">
      <div className="mx-auto max-w-2xl py-16 px-4 text-center sm:py-20 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
          <span className="block">Metamask API intro</span>
        </h2>
        <p className="mt-4 text-lg leading-6 text-white">
          Follow along with the{" "}
          <Link
            href="https://github.com/GuiBibeau/web3-unleashed-demo"
            target="_blank"
          >
            <span className="underline cursor-pointer">Repo</span>
          </Link>{" "}
          in order to learn how to use the Metamask API.
        </p>

        {wallet && balance && (
          <div className=" px-4 py-5 sm:px-6">
            <div className="-ml-4 -mt-4 flex flex-wrap items-center justify-between sm:flex-nowrap">
              <div className="ml-4 mt-4">
                <div className="flex items-center">
                  <div className="ml-4">
                    <h3 className="text-lg font-medium leading-6 text-white">
                      Address: <span>{wallet}</span>
                    </h3>
                    <p className="text-sm text-white">
                      Balance:{" "}
                      <span>
                        {(parseInt(balance) / 1000000000000000000).toFixed(4)}{" "} ETH
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {showConnectButton && (
          <button
            onClick={handleConnect}
            className="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-ganache text-white px-5 py-3 text-base font-medium  sm:w-auto"
          >
            {status === "loading" ? <Loading /> : "Connect Wallet"}
          </button>
        )}

        {showInstallMetamask && (
          <Link href="https://metamask.io/" target="_blank">
            <a className="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-ganache text-white px-5 py-3 text-base font-medium  sm:w-auto">
              Install Metamask
            </a>
          </Link>
        )}

        {showAddToken && (
          <button
            onClick={handleAddUsdc}
            className="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-ganache text-white px-5 py-3 text-base font-medium  sm:w-auto"
          >
            {status === "loading" ? <Loading /> : "Add Token"}
          </button>
        )}
      </div>
    </div>
  );
}

With those changes in place we can now install, connect to and view information from our MetaMask wallet. We can also see a nicely formatted version of our ETH balance and we can see $USDC tokens in our wallet.

Checkout the Diff to see what changed

We have one more UX improvement to push our dapp.

More UX Goodies

We'd like to store some MetaMask state in the browser's local storage to help us create a Disconnect button, something that we feel makes the UX better in a dapp. We will register an event listener for changes to the users wallet, so that when connecting and disconnecting the UX is just a little bit better. We will add a custom React Hook called useListen to help us achieve this and to co-locate some code that would otherwise be added in two different components so that our final code is a bit cleaner. We do a small refactor to get rid of a useEffect and we will display our buttons side by side when we have more than one showing on the page (Disconnect & Add Tokens) and we will use Tailwind's flex-box options to make this easy.

Update hooks/useMetamask.tsx

import React, { useEffect, type PropsWithChildren } from "react";

type ConnectAction = { type: "connect"; wallet: string; balance: string };
type DisconnectAction = { type: "disconnect" };
type PageLoadedAction = {
  type: "pageLoaded";
  isMetamaskInstalled: boolean;
  wallet: string | null;
  balance: string | null;
};
type LoadingAction = { type: "loading" };
type IdleAction = { type: "idle" };

type Action =
  | ConnectAction
  | DisconnectAction
  | PageLoadedAction
  | LoadingAction
  | IdleAction;

type Dispatch = (action: Action) => void;

type Status = "loading" | "idle" | "pageNotLoaded";

type State = {
  wallet: string | null;
  isMetamaskInstalled: boolean;
  status: Status;
  balance: string | null;
};

const initialState: State = {
  wallet: null,
  isMetamaskInstalled: false,
  status: "loading",
  balance: null,
} as const;

function metamaskReducer(state: State, action: Action): State {
  switch (action.type) {
    case "connect": {
      const { wallet, balance } = action;
      const newState = { ...state, wallet, balance, status: "idle" } as State;
      const info = JSON.stringify(newState);
      window.localStorage.setItem("metamaskState", info);

      return newState;
    }
    case "disconnect": {
      window.localStorage.removeItem("metamaskState");
      return { ...state, wallet: null, balance: null };
    }
    case "pageLoaded": {
      const { isMetamaskInstalled, balance, wallet } = action;
      return { ...state, isMetamaskInstalled, status: "idle", wallet, balance };
    }
    case "loading": {
      return { ...state, status: "loading" };
    }
    case "idle": {
      return { ...state, status: "idle" };
    }
    default: {
      throw new Error("Unhandled action type");
    }
  }
}

const MetamaskContext = React.createContext<
  { state: State; dispatch: Dispatch } | undefined
>(undefined);

function MetamaskProvider({ children }: PropsWithChildren) {
  const [state, dispatch] = React.useReducer(metamaskReducer, initialState);
  const value = { state, dispatch };

  return (
    <MetamaskContext.Provider value={value}>
      {children}
    </MetamaskContext.Provider>
  );
}

function useMetamask() {
  const context = React.useContext(MetamaskContext);
  if (context === undefined) {
    throw new Error("useMetamask must be used within a MetamaskProvider");
  }
  return context;
}

export { MetamaskProvider, useMetamask };

Create hooks/useListen.tsx

import { useMetamask } from "./useMetamask";

export const useListen = () => {
  const { dispatch } = useMetamask();

  return () => {
    window.ethereum.on("accountsChanged", async (newAccounts: string[]) => {
      if (newAccounts.length > 0) {
        // uppon receiving a new wallet, we'll request again the balance to synchronize the UI.
        const newBalance = await window.ethereum!.request({
          method: "eth_getBalance",
          params: [newAccounts[0], "latest"],
        });

        dispatch({
          type: "connect",
          wallet: newAccounts[0],
          balance: newBalance,
        });
      } else {
        // if the length is 0, then the user has disconnected from the wallet UI
        dispatch({ type: "disconnect" });
      }
    });
  };
};

Update components/Wallet.tsx

import Link from "next/link";
import { useListen } from "../hooks/useListen";
import { useMetamask } from "../hooks/useMetamask";
import { Loading } from "./Loading";

export default function Wallet() {
  const {
    dispatch,
    state: { status, isMetamaskInstalled, wallet, balance },
  } = useMetamask();
  const listen = useListen();

  const showInstallMetamask = status !== "pageNotLoaded" && !isMetamaskInstalled;
  const showConnectButton = status !== "pageNotLoaded" && isMetamaskInstalled && !wallet;

  const isConnected = status !== "pageNotLoaded" && typeof wallet === "string";

  const handleConnect = async () => {
    dispatch({ type: "loading" });
    const accounts = await window.ethereum.request({
      method: "eth_requestAccounts",
    });

    if (accounts.length > 0) {
      const balance = await window.ethereum!.request({
        method: "eth_getBalance",
        params: [accounts[0], "latest"],
      });

      dispatch({ type: "connect", wallet: accounts[0], balance });

      // we can register an event listener for changes to the users wallet
      listen();
    }
  };

  const handleDisconnect = () => {
    dispatch({ type: "disconnect" });
  };

  const handleAddUsdc = async () => {
    dispatch({ type: "loading" });

    await window.ethereum.request({
      method: "wallet_watchAsset",
      params: {
        type: "ERC20",
        options: {
          address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
          symbol: "USDC",
          decimals: 18,
          image: "https://cryptologos.cc/logos/usd-coin-usdc-logo.svg?v=023",
        },
      },
    });
    dispatch({ type: "idle" });
  };


  return (
    <div className="bg-truffle">
      <div className="mx-auto max-w-2xl py-16 px-4 text-center sm:py-20 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
          <span className="block">Metamask API intro</span>
        </h2>
        <p className="mt-4 text-lg leading-6 text-white">
          Follow along with the{" "}
          <Link
            href="https://github.com/GuiBibeau/web3-unleashed-demo"
            target="_blank"
          >
            <span className="underline cursor-pointer">Repo</span>
          </Link>{" "}
          in order to learn how to use the Metamask API.
        </p>

        {wallet && balance && (
          <div className=" px-4 py-5 sm:px-6">
            <div className="-ml-4 -mt-4 flex flex-wrap items-center justify-between sm:flex-nowrap">
              <div className="ml-4 mt-4">
                <div className="flex items-center">
                  <div className="ml-4">
                    <h3 className="text-lg font-medium leading-6 text-white">
                      Address: <span>{wallet}</span>
                    </h3>
                    <p className="text-sm text-white">
                      Balance:{" "}
                      <span>
                        {(parseInt(balance) / 1000000000000000000).toFixed(4)}{" "} ETH
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {showConnectButton && (
          <button
            onClick={handleConnect}
            className="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-ganache text-white px-5 py-3 text-base font-medium  sm:w-auto"
          >
            {status === "loading" ? <Loading /> : "Connect Wallet"}
          </button>
        )}

        {showInstallMetamask && (
          <Link href="https://metamask.io/" target="_blank">
            <a className="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-ganache text-white px-5 py-3 text-base font-medium  sm:w-auto">
              Install Metamask
            </a>
          </Link>
        )}

        {isConnected && (
          <div className="flex  w-full justify-center space-x-2">
            <button
              onClick={handleAddUsdc}
              className="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-ganache text-white px-5 py-3 text-base font-medium  sm:w-auto"
            >
              {status === "loading" ? <Loading /> : "Add Token"}
            </button>
            <button
              onClick={handleDisconnect}
              className="mt-8 inline-flex w-full items-center justify-center rounded-md border border-transparent bg-ganache text-white px-5 py-3 text-base font-medium  sm:w-auto"
            >
              Disconnect
            </button>
          </div>
        )}

      </div>
    </div>
  );
}

Finally, we will update our pages/index.tsx file with a useEffect to wrap all of these final changes up.

Update pages/index/tsx

import type { NextPage } from "next";
import { useEffect } from "react";
import Wallet from "../components/Wallet";
import { useListen } from "../hooks/useListen";
import { useMetamask } from "../hooks/useMetamask";

const Home: NextPage = () => {
  const { dispatch } = useMetamask();
  const listen = useListen();

  useEffect(() => {
    if (typeof window !== undefined) {
      // start by checking if window.ethereum is present, indicating a wallet extension
      const ethereumProviderInjected = typeof window.ethereum !== "undefined";
      // this could be other wallets so we can verify if we are dealing with metamask
      // using the boolean constructor to be explecit and not let this be used as a falsy value (optional)
      const isMetamaskInstalled =
        ethereumProviderInjected && Boolean(window.ethereum.isMetaMask);

      const local = window.localStorage.getItem("metamaskState");

      // user was previously connected, start listening to MM
      if (local) {
        listen();
      }

      // local could be null if not present in LocalStorage
      const { wallet, balance } = local
        ? JSON.parse(local)
        : // backup if local storage is empty
          { wallet: null, balance: null };

      dispatch({ type: "pageLoaded", isMetamaskInstalled, wallet, balance });
    }
  }, []);

  return (
    <>
      <Wallet />
    </>
  );
};

export default Home;

In this last page update to pages/index.tsx we have relocated the useEffect from the hooks/useMetaMask.tsx page for separation of concerns since the hook is consuming dispatch as a proper next step would to be creating a layout page with NextJS, but since we only have one page we simply added this code here.

We have updated our hooks/useMetamask.tsx page's PageLoadAction to include wallet and balance as well as the code required to access our local storage and rehydrate our app.

With those changes in place we have also updated our components/Wallet.tsx page to use our useListen hook since we are using that code in multiple places now, updated the showAddToken variable to a more descriptive name of isConnected, and added a handleDisconnect() function to dispatch an action clearing local storage in our browser.

This also required a slight update to our JSX/HTML to display our buttons more neatly.

Checkout the Diff to see what changed

Remove Listeners after Disconnect

We have one final change we want to make to ensure that we stop listening to changes once the user has disconnected their wallet.

We will update the and files. This will make TypeScript definitions file aware of the removeAllListeners() method we will be using as well add necessary code to the disconnect case inside the metamaskReducer.

Update types.d.ts file:

type InjectedProviders = {
  isMetaMask?: true;
};

interface Window {
  ethereum: InjectedProviders & {
    on: (...args: any[]) => void;
    removeListener: (...args: any[]) => void;
    removeAllListeners: (...args: any[]) => void;
    request<T = any>(args: any): Promise<T>;
  };
}

Update the case statement in the useMetamask.tsx file to:

    case "disconnect": {
      window.localStorage.removeItem("metamaskState");
      if (typeof window.ethereum !== undefined) {
        window.ethereum.removeAllListeners(["accountsChanged"]);
      }
      return { ...state, wallet: null, balance: null };
    }

Again, here we have simply ensured that all listeners added after connecting the wallet stop listening once the user is disconnected.

This concludes the demo! But you're just getting started, for a challenge, try updating the UI, try to add functionality to switch chains and overall have fun, if you have any questions or need help with MetaMask, reach out to our DevRel team on Twitter. You can contact Gui Bibeau and Eric Bishard with any questions or feedback.

One final note, Gui has a great resource and blog called web3-fullstack where he waxes poetically about Web3, full stack development and UX which is a great resource for Web2 developers getting into Web3 as well as seasoned veterans of the space!

ETH Dubai 2022 Recap

Eric Bishard — Mon, 23 May 2022 06:19:36 +0000

MetaMask Booth LTR: Francesco Andreoli, Manbir Singh, Sona Khunti, Eric Bishard

This year the MetaMask DevRel and friends from ConsenSys and many members of our team traveled to the ETH Dubai conference held on March 29th and 30th at the Le Meridien Dubai Hotel & Conference Centre, Dubai in the United Arab Emirates.

Welcoming approximately one thousand attendees and speakers from all over the world, the organizers of ETH Dubai (known for also hosting React Europe) split the talks up into two tracks which did a great job of combining speakers of similar themes and topics into the same rooms. I don't see this done at many conferences. It helps to keep turnover to a minimum after every speaker and overall, creating a much more pleasant experience from an attendee's perspective.

GM Frens! Eric Bishard at the ETHDubai Entrance!

If you have not checked out the beautiful video put out by the Cartesi Team saying goodbye to ETH Dubai post event, it's got some amazing shots of the city and conference.

Now, let's get to some of the great talks that came out of this event. Here is a list of everyone involved and a link to each talk, and how to follow them on Twitter:

Track One

Hosted by Eric Bishard focused on more traditional themes: Ethereum core and updates on scaling and decentralization, web3, and DeFi + security with panels at several intervals.

Speaker/Host	Talk/Panel	Category
Protolambda	Scaling Research in Ethereum	Ethereum Core
Ansgar Dietrichs	Role of EVM in an L2 world	Ethereum Core
Kristof Gazso	Smart Contract Wallets are the Future	Ethereum Core
DappLion	Road Ahead: Ethereum Light Clients	Ethereum Core
Willy Ko	L2’s and Sidechains	Panel
Austin Griffith	Web3 for Frontend Devs	Web3
Gabe Rodriguez	Web3 Frontend Pitfalls	Web3
Salty Facu	Writing Yearn Strategies	DeFi
Boring Crypto	YIΞLDBOX	DeFi
Nikolay Angelov	Building in DeFi Sucks	Panel
Roman Semenov	Shielded Transactions Using ZKP	DeFi
Mudit Gupta	The Security Trilemma	Security
Mirko Garozo	Building Web3 with MetaMask Snaps	Web3

Track Two

Hosted by Alexander Telegin focused on more esoteric themes and new Ethereum blockchain innovations like NFTs, DAO's upcoming Layer 2, etc.

Speaker/Host	Talk/Panel	Category
Anette Rolikova	Why devs should care about NFTs	NFTs
Sasha Shilina	NFTs: A new Mediator Standard	NFTs
Luis Schliesske	Scalable DApps w/ Transaction Relay	DApps
Pranav Maheshwari	The Graph: Index Your Smart Contract	DApps
Talal Tabbaa	All roads lead to Defi	DeFi
Luis Bezzenberger	Prevent Front Running & Malicious MEV	Security
Elan Halpern	Building Scalable, Reliable, Data Consistent DApps	DApps
Alex Hansen	Smart Contract Development for FuelVM	Smart Contracts
Arnau Bennassar	Proof of Efficiency: D13n for zkEVM	ZK-Rollups
Juan	Challenges and Lessons Learned Scaling DAOs	DAOs
Lukas Schor	Wild West Web3	Web3
William George	Griefing Factors Deep Dive	Smart Contracts
Adrien Faguet	Connect Your Project with Ledger	Web3
Alexis Masseron	DeFi 2.0: Uncollateralized Loans	DeFi
Jyoti Puri	MetaMask: Enhanced Gas UI	Web3
Aqeel I Mohammad	Demystifying Ethereum Staking	DeFi

I had the opportunity to hear everyone speak in the track I was hosting, and since the conference, I have tried to watch as many videos on the ETH Dubai YouTube page as possible from track two. There is so much to learn and so many various topics to consider. We have put all of the videos from the conference and their YouTube links, Twitter links to speakers, and the category for each talk into one place, right here on this page.

Workshops

There were several workshops at ETH Dubai, one of which was hosted by our DevRel team with support from our Community Lead and engineers from MetaMask. So credit to Eric Bishard, Mirko Garozo, Francesco Andreoli, Manbir Singh, and those involved in preparing this workshop before the event.

MetaMask On-Chain SVG Tickets Workshop

This workshop was approximately 3 hours long and taught web developers how to create an On-chain SVG (NFT) Ticket and a Minting client in React.

Unfortunately, not all workshops could be recorded, but don't sweat it; we got you covered.

We have a GitHub repo complete with a README that you can walk through from the comfort of your own home.

The MetaMask Workshop described above walks you through building the NFT token and mint smart contract, React client with components that connect and switch chain and facilitate the mint of each SVG ticket.

We also have a link to the repo on GitPod so that you can build the project right in the browser and not have to install and complicated setup on your own computer. Beware, though, this project requires you to provide a MetaMask wallet passphrase, so if you decide to work with it on GitPod, please use a wallet-only set up to use a test account with test ETH and not your personal wallet with valuable assets and NFTs.

Recorded Workshop Videos

Host	Workshop	Category
Yearn Finance	Coding Yearn DeFi Strategies with HardHat	DeFi
GTON Capital	Initiation to DeFi with GTON Capital Team	DeFi

Hallway Track LTR: Francesco Andreoli, Manbir Singh, Nader Dabit, Alaa Hadad, Anthony Albertorio

Hallway Track

The hallway track was an incredibly great way to meet so many developers, researchers, and folks from some of the most well-known Ethereum ecosystems worldwide. Dubai gave me a chance to meet people in the industry that I know but rarely get to see, considering they live in places like India, Australia, Asia, Bali, and Indonesia. With that said, many attendees made the trip from Europe and the Americas too. As blockchain should be, it was a melting pot of fantastic talent and in-between talks. During lunch, we had great opportunities to get to know these people with that we usually only get to interact on Twitter.

Also, from the MetaMask DevRel and Engineering teams we had Eric Bishard, Jyoti Puri, and Mirko Garozo from DevRel, Community and Engineering. This conference was a great opportunity to connect with and learn from brilliant web3 professionals, meet developers, researchers, and scientists in the Ethereum blockchain community, and talk about their views and experience around Ethereum and MetaMask. We wanted to listen to any feedback and take that feedback back to our team to ensure we can improve our products and improve the developer and community experience.

ETDubai/MetaMask Stickers

Our community lead from India, Manbir Singh, and other MetaMask team members got a great chance to interact with the community at our booth. We touched base with hundreds of MetaMask enthusiasts during the 8+ hours on conference day and throughout the many external events and parties and are still following up with people we met and now even working with some of them. Without this event, those opportunities may have never presented themselves.

ETHDubai Yacht Party

One of the best opportunities to meet other developers and teams outside of the conference was the ETH Dubai Yacht Party. This was the most significant opportunity to meet people in a fun and inviting atmosphere as we sailed around the Dubai intercoastal on the Lotus (such a beautiful yacht). We exchanged ideas, talked about MetaMask roadmap features, and got excellent feedback on all of our ConsenSys products. We heard all about the exciting technology our friends in the Ethereum space were building.

We met people like Anish Mohammed from Panther Protocol, Lion an Eth2.0 Core Dev at ChainSafe and OG dev at DAppNode, Austin Griffith from Speed Run Ethereum, Scaffold ETH and Buidl Guidl who spends the majority of his time onboarding and helping new developers entering the Ethereum space. Please check out everything he does; he is a special member of the Ethereum community.

Conclusion

ETH Dubai was a massive success for MetaMask and the team to be able to interface with our developer and user community. We hope this event happens every year and we get to visit such a fantastic city again. Feel free to follow up and get in touch with the MetaMask team on Twitter and us individually. I (Eric Bishard) as well Manbir Singh always keep my DMs open and will do everything we can to answer developer and user-related questions respectively. I can't wait to see you all at the next major Ethereum event!

DApp Review – OpenSea: An Ethereum Based NFT Marketplace

Manbir Singh Marwah — Mon, 09 Aug 2021 11:55:02 +0000

Non-fungible Tokens, or NFTs have been creating a huge buzz in the blockchain space from the past few months, having played a major role in bringing Ethereum to the mainstream. As a result, people have been minting their own NFTs on blockchain and purchasing some appealing ones from various marketplaces. In this blog, we'll explore one of the world's leading NFT marketplaces, OpenSea.

For those who've been living under a rock, an NFT is a token for a real world asset that represents ownership on the blockchain, and doesn't have a fixed value. For example, if Leonardo da Vinci comes and clicks a picture of Mona Lisa's original painting and simply sells it at a marketplace, it could (probably would) sell for millions, since:

The original creator is selling it.
There's some story associated with the artpiece.
There's no copy of that art available for sale by the creator, making it...
An original digital artpiece that can not be shared, only transferred.
Who doesn't love rare art? 👀

Now back to the guide! This will require you to have an Ethereum based wallet of your choice, such as MetaMask set-up, before you can start buying and selling some NFTs. You can learn more on how to do it through this blog. Once you're done, just dive right in, 'cause...

It's showtime at the metaverse! 🌌

Getting Started

Once you visit OpenSea.io, you'll see an option to explore/create an NFT, a few exclusive OpenSea drops, trending NFTs, resources to get started and an option to browse by categories.

Connecting Your Wallet

You'll need to connect your wallet and set-up your OpenSea account to get started with minting and purchasing the NFTs. We'll go ahead with MetaMask for this blog. Just click on the wallet icon at the top-right corner; a list of supported wallets will show up. Then simply select MetaMask from the list.

Once you've connected, set up your profile by adding a username, profile image, cover etc. You'll need to 'sign' each update through your MetaMask account to apply the changes to your OpenSea account.

Exploring and Purchasing an NFT

You can start exploring the NFTs that are minted by creators from across the world through browsing by category or clicking on Marketplace > All NFTs.

To purchase an NFT, simply select an asset from the list.
You can also apply filters to sort by price, categories, chains and more.

Click on Buy Now, agree to the OpenSea terms, and click on Checkout.

You'll need to sign the transaction from your wallet... and that's pretty much it! The asset will show up in your wallet in a matter of seconds.

Minting an NFT

There's a simple 4-step process for minting your first NFT collection:

As we've already set up a wallet, simply head over to the Create section to add your assets. You'll need to add social links, an appealing description, profile & banner images, and set a secondary sales fee. You can choose between auctions, fixed-price listings, and declining-price listings.

Here's a quick rundown of how it's like to mint your own NFT:

1. Create a collection

You'll have to add some details such as images, name, URL, description, blockchain you're adding the NFT to, payment tokens etc.

2. Add a new item to your collection

Here you'll need to add description and other details related to the specific item such as supply limit.

3. Set prices and post your listing

You can set a fixed price, highest bid or bundle for the NFT listing.

4. Confirm from your wallet

Finally, sign the transaction from your wallet, which will require some gas fees.

Once you're done, your item will be listed for sale on the marketplace.

Congratulations on minting your first NFT! 🎉

Some resources to learn more about this space:

NFTs, explained, by The Verge
Why NFTs brought Ethereum to the Mainstream, by ConsenSys
OpenSea Docs

And finally, if you liked this blog, feel free to check out rest of my content and connect with me on Twitter. See you on the other side of the metaverse! ;) 🥂

Disclaimer: This blog is meant for educational purposes only and nothing from this blog should be taken as a financial advice. Please DYOR before investing.

Swapping Tokens on MetaMask

Manbir Singh Marwah — Tue, 27 Jul 2021 14:44:29 +0000

MetaMask, one of the most popular Ethereum based crypto wallets, offers the ability to swap one crypto token with another—seamlessly. We can do that either by using the built-in Swaps feature within the wallet app/extension, or manually by using any Decentralized Exchange (DEX), such as Uniswap.

If you don't have MetaMask installed on your device, you can do so by following this guide.

• Using the built-in Swaps feature

To swap a token using the Swaps feature on MetaMask, we'll need to follow these simple steps:

Open the MetaMask extension or Mobile app
Click or tap the ‘Swap’ button
Select the tokens you want to swap and click ‘Get quotes’
Let MetaMask do its magic ;)
Compare all available quotes and select the best one
Click on ‘Swap’ and wait until the transaction completes

With an availability of tons of DEX platforms in the market, this is the easiest and fastest way to swap tokens on MetaMask, as it
✅ Finds the best prices everytime
✅ Reduces number of token approvals
✅ Protects slippage
✅ Reduces gas costs and shortens the path to executing each swap

• Manually using a DEX

To manually swap tokens using MetaMask, we can use a DEX such as Uniswap, SushiSwap, 1inch, ParaSwap or any other leading platform. Let's walk down the steps on how to do it with Uniswap. These steps would be pretty much the same on other DEX platforms as well.

1. Fire up your browser and visit uniswap.org

Then click on the ‘Launch App’ button in the top left corner. The swapping interface will be launched and you’ll see an option to select the tokens you want to swap.

2. Click on 'Connect to a wallet' at the top right corner

Ensure that you're signed into your MetaMask wallet. Then select MetaMask from the list of supported wallets.

3. Select the account you want to connect and click 'Connect'

4. Select the tokens you want to swap in the 'From' and 'To' section, and click 'Swap'.

You might need to approve the selected token first to let Uniswap access your existing tokens.

5. Sign the transaction from your wallet

Your MetaMask wallet will show the estimated gas fees to be paid. To proceed, simply sign the transaction by clicking 'Confirm'. And voila! 🎉 Your transaction is submitted. You can view the status of your transaction on EtherScan.

Make sure that you've added the token's contract in your MetaMask wallet so that it shows up after the swap. Cheers! 🥂

You can learn more and join the MetaMask Community here. If you liked the blog and would like to connect, here's my Twitter.

Disclaimer: This blog is meant for educational purposes only and nothing from this blog should be taken as financial advice. Please DYOR before investing.

A Guide to Ethereum Ecosystem Using MetaMask

Manbir Singh Marwah — Mon, 19 Jul 2021 12:48:03 +0000

MetaMask is an open-source crypto wallet and a gateway to blockchain apps, by ConsenSys. It makes accessing and building on Ethereum's dApp Ecosystem easier, right from the browser without running a full Ethereum node. MetaMask can be installed as a browser extension (on Chrome, Firefox, Brave and Edge) or as an app on Android and iOS devices.

Being one of the most secure hot wallets, MetaMask works with JavaScript by injecting a Web3 object into the webpage you're on. It is important to note that this does not alter the website in any manner. Instead, it only adds a functionality that makes it possible to access the Ethereum platform.

Let's walk down the steps on how to install and use MetaMask right from your browser, real quick!

1. Visit https://metamask.io/ and click on 'Download Now'

2. Click on 'Install MetaMask for Chrome'

3. Click on the 'Add to Chrome' button

And confirm the addition of extension by selecting 'Add Extension'.

4. View MetaMask in the Chrome extensions menu

5. Click on 'Get Started' and 'Create Wallet'

6. Enter a password and click 'Create'

7. Reveal or download and store backup seed phrase

The seed phrase is a randomly-generated string of words cryptographically derived from the wallet’s private key and paired with 12 words from a list of 2,048 English words called the BIP39 Wordlist. This sequence can also be converted to a corresponding series of mapped numbers that provide the user access to his wallet and its public-private key pair.
A crypto wallet’s software is designed to generate these phrases, which users are then tasked to keep. This ensures that even if the hardware malfunctions or gets lost or stolen, they can always download the wallet software again and use the seed phrases to restore access to their assets back.

MetaMask uses BIP39 to generate a seed phrase for your wallet. Your seed phrase will cover every token, address, and transaction generated by your wallet. Think of it as your backup master key. Backing up your seed phrase ensures you will always have access to your funds.

8. View backup phrase

Note it down and store it at a safe place. Then click 'Next'.

9. Confirm backup seed phrase

You'll have to confirm the seed phrase by clicking the words in the order it was shown previously, and click 'Confirm'.

10. Agree to terms and conditions, and Voila!

Congratulations, you have successfully setup MetaMask and created your first wallet!

This is how the wallet should look in expanded view:

Adding a Custom Token

We can add multiple custom tokens to the MetaMask wallet, such as wBTC, USDT, UNI etc. To add one,

Open MetaMask and click on 'Assets' to see the tokens in your wallet.
Scroll down to the bottom and click on 'Add Token'.
Click on 'Custom Token'.
Paste the contract address for the token you want to add, into the Token Contract Address field. For example, if you're adding Tether USD (USDT), the token contract would be: 0x5dbcF33D8c2E976c6b560249878e6F1491Bca25c.

You can look-up for the contract of the token you want to add through Etherscan, the Ethereum Blockchain Explorer. You can also explore an address, transaction hash, block or ENS through the same.

Configuring a Custom Network for Binance Smart Chain

MetaMask supports addition of other networks apart from Ethereum, such as Binance Smart Chain (BSC)—a blockchain network built for running smart contract-based applications and holding BEP2 tokens. To add BSC MainNet to MetaMask, you'd need to visit the 'Settings' menu through the wallet. Under the 'Networks' section, manually add the following entries to add Binance Smart Chain to your wallet:

Network Name: Smart Chain
New RPC URL: https://bsc-dataseed.binance.org/
ChainID: 56
Symbol: BNB
Block Explorer URL: https://bscscan.com

You'll now be able to access BSC through the 'Networks' tab at the top of your wallet.

Swapping tokens on MetaMask

MetaMask allows us to swap tokens directly from the desktop or mobile wallet. The Swaps feature combines data from decentralized exchange aggregators, market makers, and DEXs, to ensure we get the best price with the lowest network fees.

Exploring dApps

MetaMask offers a broad ecosystem of Decentralized Applications (or dApps). The following are a few of the dApps that you can explore and use with MetaMask:

Uniswap: Uniswap is a DeFi protocol that is used to exchange cryptocurrencies. It offers Uniswap Interface (a DApp) using which you can connect your MetaMask wallet to swap one token to another.
Blockchain arcades: These are dApps created to allow gamers to use ETH and ERC-20 tokens for video game tournaments. For example, one of the requirements for the Etherplay site is to have MetaMask.
The Digital Art: This is another app that is becoming very popular in crypto communities. The app allows users to hold auctions where they sell collectibles. With MetaMask, for example, you can bid on a WWII collectible from Japan.

Also check out Best of MetaMask—State of the dApps for more.

Good luck exploring the future of web using MetaMask! ;)

Disclaimer: This blog is meant for educational purposes only and nothing from this blog should be taken as a financial advice. Please DYOR before investing.

DEV Community: MetaMask

Survival guide to DevConnect Istanbul MetaMask bounties

➡️ METAMASK SDK

LINEA

METAMASK SNAPS

ALL ETH GLOBAL CONSENSYS BOUNTIES

MetaMask SDK Dev Guide

Chat With Consensys DevRels 24/7

MetaMask SDK for Dapp Developers

Example Demos and Package Links

All JavaScript NPM Packages and Demos

Why MetaMask SDK?

Additional Resources

Hackathon Tips 🪄

MetaMask API Improvement Proposals

MetaMask API Tutorials

Helpful Tools When Working With MetaMask

Signing data with MetaMask

Signing a message

Signing a message with MetaMask

Signing a simple message

Signing typed data.

A New Generation of Dapps!

Conclusion

Digital Identity and SIWE

Introduction

An Overview of Digital Identity In Present-Day Earth, 2023

Identity in Web3 and Its Implementation

How the Sign-In With Ethereum Proposal Affects Digital Identity

How to Implement Sign-In With Ethereum

A Dance Between the Client and the Server

Generate a Nonce Inside getServerSideProps

Passing Our Nonce to the Client

Connect to a users wallet and sign a message

Verify the signature

Conclusion

Introduction to MetaMask API

TOC

What is the MetaMask API?

What is JSON RPC?

A JSON RPC Request and Response Example

Request

Response

Request

Response

What is Open RPC?

The OpenRPC Specification

Essential Tools

Links to Tools

Ethereum Provider

MetaMask RPC API

MetaMask API Playground

Chainlist

Eserialize

Examples of Usage

Connecting to MetaMask Mobile with SDK

Smart Contract Example

Web3 Unleashed: The MetaMask API

Overview

Prerequisites

Clone and Install Dependencies

Connecting the User

Use the MetaMask API to get User Info

Two Way Communication with MetaMask

More UX Goodies

Remove Listeners after Disconnect

ETH Dubai 2022 Recap

Track One

Track Two

Workshops

MetaMask On-Chain SVG Tickets Workshop

Recorded Workshop Videos

Hallway Track

Conclusion

DApp Review – OpenSea: An Ethereum Based NFT Marketplace

It's showtime at the metaverse! 🌌

Getting Started

Connecting Your Wallet

Exploring and Purchasing an NFT

Minting an NFT

Generate a Nonce Inside `getServerSideProps`