DEV Community: Eric Bishard

Setup Mac M1 Silicon for ReactNative Development

Eric Bishard — Tue, 05 Nov 2024 21:10:11 +0000

Set NVM to 18:

nvm install 18 
nvm use 18

Install Watchman with Brew

brew install watchman

Ruby Setup

*Install rbenv for Ruby version management *

brew install rbenv

*Set up rbenv in your shell *

rbenv init

*Install Ruby 2.7.6 (recommended for React Native) *

rbenv install 2.7.6 rbenv global 2.7.6

*Verify Ruby version *

ruby -v

Install Xcode

From Apple Store

[✓] macOS 16.1 (built-in)
[✓] iOS 18.1

Manually Install Xcode iOS Simulator:

Open Xcode
Xcode → Preferences → Components
Download a simulator (iOS 16+ recommended)

Install Xcode command line should now be installed? If not:

xcode-select --install

You can run several commands to verify your Xcode setup:
First, check that Xcode command line tools are installed:

xcode-select --version

Verify Xcode's location:

xcode-select -p

Should typically show /Applications/Xcode.app/Contents/Developer

Check the full Xcode version:

xcodebuild -version

Verify iOS simulator is installed:

xcrun simctl list devices

This should show you a list of available iOS simulators.
If any of these commands fail, you might need to:

Accept Xcode license:

sudo xcodebuild -license accept

Or reinstall command line tools:

xcode-select --install

Install CocoaPods

sudo gem install cocoapods

If CocoaPods doesn't install because there's a Ruby version conflict. Maybe you're running Ruby 2.6.10, but you need at least Ruby 2.7.0.
Here's how to fix this:

Install a newer version of Ruby using Homebrew:

brew install ruby

Add the new Ruby to your PATH in your .zshrc file:

echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc 
source ~/.zshrc

Verify you have the new Ruby version:

ruby -v

(Should show a version >= 2.7.0)

Try installing Cocoapods again:

sudo gem install cocoapods

After installation, verify Cocoapods is installed:

pod --version

A lot can go wrong at this juncture, I suggest if you have any issues, using Claude or ChatGPT to troubleshoot and don't move on until you can see all versions installed from your terminal and all paths are correct in your .zshrc etc...

Install Android Studio:

brew install --cask android-studio

Android Studio Setup:

Open Android Studio
Complete initial setup wizard (Choose Custom)
Install Android SDK (via Tools → SDK Manager):
- Android SDK Platform 14 (API 34)
- Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
- Android SDK Build-Tools
- NDK (Side by side)
- CMake

Configure Environment Variables:

Add to your ~/.zshrc or ~/.bash_profile:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin

Create Android Virtual Device (AVD):

Open Android Studio
Tools → AVD Manager
Create Virtual Device
Select a device definition (e.g., Pixel 4)
Select a system image (API 35 recommended)

Install Java Runtime

For M1 Macs, you'll need to install the ARM64 version of the JDK (Java Development Kit). The simplest way to install it is:

brew tap homebrew/cask-versions
brew install --cask zulu17

This will install Azul Zulu JDK 17, which is compatible with Android Studio and React Native development on M1 Macs. To verify the installation:

java -version
javac --version

This will give you OpenJDK 17, which works well with Android development on M1 Macs.

Verification Steps

Install React Native CLI?

The react-native-cli global package is actually deprecated. Instead, you should use @react-native-community/cli which comes bundled with the npx command.

If already installed, you can safely uninstall the global CLI:

npm uninstall -g react-native-cli

And instead, when creating new projects, use:

npx react-native init ProjectName

This approach is preferred because:

It ensures you always use the latest version of the CLI
Avoids global package installations
Prevents version conflicts

Create a test project:

npx react-native init TestProject --template react-native-template-typescript
cd TestProject

Test iOS setup:

cd ios && pod install && cd ..
npx react-native run-ios

Test Android setup:

# Start Android emulator first
npx react-native run-android

Troubleshooting

If you encounter M1-specific issues:

For iOS: Try adding this to your Podfile:

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = "arm64"
    end
  end
end

For Android: Ensure you're using the ARM64 system image when creating AVD

Ethereum Chains

Eric Bishard — Thu, 23 Mar 2023 09:18:13 +0000

This document is reference for the networks I use regularly, and is usually up to date. If something doesn't work, you should use ChainList. You can convert chainIds to hex using tools like eserialize to do so.

Example: Convert Polygon Mumbai chainId

Mainnets

Network	RPC URL	Chain	Hex	Symb	Explorer URL
Mainnet	eth.llamarpc.com	1	0x1	ETH	etherscan.io
Polygon	polygon-rpc.com	137	0x89	MATIC	polygonscan.com
Optimism	mainnet.optimism.io	10	0xa	ETH	optimistic.etherscan.io

Testnets

Network	RPC URL	Chain	Hex	Symb	Explorer URL
Mumbai	rpc-mumbai.maticvigil.com	80001	0x13881	MATIC	mumbai.polygonscan.com
Goerli	goerli.blockpi.network	5	0x5	ETH	goerli.etherscan.io

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

👊😉👍

✨ETH Dubai 2023 MetaMask SDK Developer Guide✨

Eric Bishard — Sat, 11 Mar 2023 10:26:39 +0000

As your team works on ConsenSys and MetaMask bounties for the ETH Dubai Conf, we have prepared the following resources; you can also contact our ConsenSys and MetaMask SDK team members with the links below. 😁

🧙‍♂️ Guillaume Bibeau - MetaMask SDK DevRel
👾 Eric Bishard - MetaMask DevRel
🪩 Lauren Dutton - Infura DevRel

Hackathon Bounty

For the ETH Dubai Hackathon we have $5k max for up to 2 winners ($2.5k each or $5k for one team).

We are looking for submissions that cover one of the four following ideas which utilize at least the MetaMask SDK:

Use MetaMask SDK along with other products like our MetaMask API, Infura, Truffle, and/or Ganache to deploy a dApp for hackathon project submissions and smart tagging that is based on code or description. Issuing NFTs or POAPs to participants and winners is a feature that could take your idea to the next level.
Build a Web3 dApp to provide tooling for DAOs utilizing the MetaMask SDK and any other ConsenSys products.
Make a fun and interactive Unity game or platform MVP that utilizes MetaMask SDK to connect to MetaMask Mobile and have in-game web3 experiences.
Create a Web3 dApp platform (maybe DAO or DeFi related) that utilizes the MetaMask SDK and other ConsenSys products.

We judge our bounties based on the number of ConsenSys products used, utility, technical sophistication, fundability, and scalability. The project(s) that keep those attributes in mind and take their submission to the highest level will emerge victorious.

Hackathon Tips 🪄

We seek new and exciting use cases made possible only via the Snaps platform.

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

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

Start Here 🎯

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

Examples and Demos ⚙️

Want to see how to implement MetaMask SDK?

There are a few React repositories here with basic implementation:

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

Building with Infura, Truffle or Ganache

If you are building with ConsenSys products outside of MetaMask SDK we have provided the docs below:

👊😉👍

✨ETH Denver 2023 Snaps Developer Guide✨

Eric Bishard — Sat, 25 Feb 2023 05:40:41 +0000

As you work on our bounties, we have prepared the following resources; you can also contact our Snaps team with the links below. 😁

🧙‍♂️ Ziad Saab - Snaps DevRel
👾 Eric Bishard - MetaMask DevRel
🪩 Christian Montoya - Snaps Product
🕺 Francesco - MetaMask DevRel & Ambassador Director

*As well you can join our MetaMask Snaps Developer Discord

Before You Start ⚠️

Before you can build and test a Snap, you should have our experimental version of MetaMask installed. You will want to create a new browser profile or use a different browser than their regular MetaMask. Or disable "MetaMask proper" while MetaMask Flask is running.

This fork of MetaMask for developers (Flask) does everything a proper MetaMask wallet can do, with the addition of running Snaps.

From our webpage, you can link to the chrome extension for Flask.
*Flask only exists as a Chrome & Firefox extension. There is no fork or experimental version of MetaMask Mobile.

Start Here 🎯

To start building a Snap, follow this 5-minute tutorial teaching the basics tools, working with permissions, and adding an external API: Gas Fee Snap.

Full List of Snaps Resources
Documentation

Also, you can explore further Ziad Saab's Sozu Hacker House workshop

Bounties 🪙

You can watch the Bounties Video from the official ETH Denver 2023 Bounties Presentation.

Francesco Andreoli also presented on all ConsenSys Bounties on the first day of BUIDL week at ETH Denver.

Hackathon Tips 🪄

We seek new and exciting use cases made possible only via the Snaps platform.

Beyond innovation, practicality, functionality, and proper usage of MetaMask Snaps, which are all very important, communication of your idea and its features and explaining what your project does that you can't do without MetaMask Snaps is just as important.

Check out Ultimate Hackathon Survival Guide that you should check out!

Example Snaps ⚙️

Want to see what others have built?

These example Snaps are functional, open source, and created by our community.

❓ Mystery Snap: Demo • Repo
StarkNet: Demo • Repo • Video
FilSnap for Filecoin: Demo • Repo
Password Manager: Repo
Transaction Simulation with Ganache: Repo (With Truffle Suite!)

Truffle Suite Integration 🔗

If you are building with Truffle, this starter repo can help you start with TypeScript, a Template Snap, and a Truffle Box for developing and testing snaps that interact with smart contracts.

MetaMask Snap Truffle Box

L2s and Non EVM Compatibility 📑

👊😉👍

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 Dubai MetaMask Workshop

Eric Bishard — Thu, 17 Nov 2022 06:17:18 +0000

Web3 Dubai MetaMask Workshop (Follow Along)

Workshop GitHub Repo

Prerequisites:

NodeJS & NPM
Code Editor
Git & GitHub account
MetaMask Extension Installed
Knowledge of JavaScript, TypeScript and React (is a plus)
Eagerness to learn NextJS, Solidity smart contracts, Truffle and Ganache

npm i truffle ganache -g

Getting Started

Welcome to the Web3 Dubai Metamask Workshop, to get started, please clone the workshop repo on your machine and checkout the start branch:

git clone https://github.com/metamask/web3-dubai-mm-workshop && 
cd web3-dubai-mm-workshop && 
git checkout start && npm i

With our repo cloned and our dependencies installed we should take minute to discuss our choices for the decisions and architecture of this web3 project.

A mono repo using Turbo
- Incremental bundler/build system optimized for mono repos, JS & TS
Seperating our blockchain and web projects
React & NextJS
Truffle & Ganache

At this point, we have a pretty solid framework to build Web3 applications with, is it a bit opinionated, yes, is it different? I would say that if you are a web2 developer just getting started with Web3 these tools should feel familliar, we are using ReactJS, JS & TS and we have at the least dropped you off at the doorstep of a pretty solid way to build a fullstack web3 application all in one repo.

Run Our NextJS Project

Let's really quickly just ensure that our frontend NextJS project is running in dev mode. In a new terminal window:

cd apps/web && npm run dev

If everything is working you should see text that says "Let's get started". For now we can exit out of next dev and know that our NextJS frontend is ready when we need it.

If that is working fine we can back up out of that directory because the next time we run the NextJS app it will be from the root with our turbo scripts.

cd ../..

Reviewing our Blockchain App

Rather than spend hours creating our Smart contract for our NFT Tickets, we have provided that for you in this start branch and together we will go over it for the sake of time.

Review in workshop each file:

ETHTickets.sol
HexStrings.sol
1_initial_migration.js

Building and Running our Project

Let's first get our local blockchain environment up and running, we have several npm scripts setup to help us build and run our project locally.

let's build our contracts and generate types that we can use in our NextJS app.

From the root for the project run:

npm run build

For running a local instance of Truffle and Ganache to generate accounts, private keys for use in testing our Web3 app let's open a seperate terminal and run:

npm run local

This will give us some private keys and we can take one of those private keys and import into our MetaMask using the following network information:

Network Name: Localhost 9545
New RPC URL: http://localhost:9545
Chain ID: 1337
Currency Symbol: ETH
Block explorer URL: we can leave this blank

For our Frontent we can open one more terminal window and run:

npm run dev

Important
We need to pay attention to the output of this command and anytime we rerun this command we will need to get the contract address and copy it into the apps/web/lib/config file.

All of the work from here will be done in our apps/web directory, I should not that all of the dependencies we will be relying on have already been installed:

If needed we can go over those dependencies in the workshop if anyone has any questions, from here we will (together) build the frontend out piece by piece and build everything required to not only connect users via MetaMask to our app, but also do that in a way that is scalable so that if the app were to expand to multiple pages and routes, we would have a solid way to use the wallet state and connection ot the blockchain through that wallet on any page in our dApp.

Connecting Users to MetaMask

We will first need to create a directory in apps/web/components/styledComponents and this is where I will give you some basic styling for our navigation and some general styling we could use throughout our application.

Create: navigation.js with the following code:

import styled from 'styled-components';

export const NavigationView = styled.div`
  padding: 1em;
  border-bottom: 1px solid #FFF;
  background-color: #265C8E;
  color: #FFF;
`;

export const Logo = styled.div`
  display: block;
  display: inline-block;
  line-height: 36px;
  height: 36px;
`

export const Balance = styled.div`
  display: inline-block;
  margin-left: 1em;
`

export const RightNav = styled.div`
  margin-left: auto;
  line-height: 36px;
  height: 36px;
  width: ${props => (props.widthPixel += "px") || "100%"};
`

Create: general.js with the following code:

import styled from 'styled-components';

export const FlexContainer = styled.div`
  display: flex;
  align-self: flex-end;
  flex-direction: row;
  min-width: calc(100vw -2em);
  gap: ${props => props.gap || 0}em;
  row-gap: ${props => props.gap || 0}em;
`;

export const FlexItem = styled.div`
  width: ${props => props.widthPercent || 50}%;
`;

export const Button = styled.button`
  border-radius: 4px;
  border: none;
  background-color: #103164;
  color: #FFF;
  font-size: ${props => props.textSize || 16}px;
  text-transform: uppercase;
  padding: 1em 0.75em;
  display: inline-block;
  margin: 0 1em 0 0;
  cursor: pointer;
  cursor: hand;
  user-select: none;
  &:hover {
    background-color: #244982;
  }
  &:disabled {
    background-color: #244982;
    color: #7697C8;
    cursor: not-allowed;
  }
`

We first need to add a Navigation component and styles, in the apps/web/components directory create a page called Navigation.tsx and add the following code:

import Link from "next/link";

import { Button, FlexContainer, FlexItem, } from "./styledComponents/general";
import { NavigationView, Balance, RightNav, Logo } from "./styledComponents/navigation";
import { SiEthereum } from 'react-icons/si';

export default function Navigation() {

  return (
    <NavigationView>
      <FlexContainer>
        <FlexItem widthPercent={50}>
          <Logo>
            <SiEthereum /> ETH Atlantis
          </Logo>
        </FlexItem>
        <FlexItem widthPercent={50}>
          <RightNav widthPixel={300}>
            <span>MM CONNECT BUTTON</span>
          </RightNav>
        </FlexItem>
      </FlexContainer>
    </NavigationView>
  );
}

With the Styles and basic navigation skeleton in place we need to update our pages/index.tsx inside of our web app.

Update pages/index.tsx and replace the <div>Lets get started</div> with a link to the Navigation component:

import type { NextPage } from "next";
import Head from 'next/head';

import Navigation from '../components/Navigation'

const Mint: NextPage = () => {

  return (
    <div className="mint-tickets">
      <Head>
        <title>ETH Atlantis 2022</title>
        <meta property="og:title" content="The largest underwater Ethereum event in history" key="title" />
      </Head>

      <Navigation />
    </div>
  );
};

export default Mint;

We should see our navigation in the top right corner. We need to replace that text that says "MM CONNECT BUTTON". But first we need to set up two React hooks to listen and provide context for our connected user. Create a new directory in th web app under apps/web/hooks and add the two files and we will go over them:

Add a file named useListen.tsx with the follwoing code:

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" });
      }
    });
  };
};

Add a file named useMetaMask.tsx with the follwoing code:

import React, { 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");
      if (typeof window.ethereum !== undefined) {
        window.ethereum.removeAllListeners(["accountsChanged"]);
      }
      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 };

These files respectively listen for changes in the users connection to Metamask and set up a context provider for sharing the wallet state to the components in our app and we can go over each one in the workshop to give more explanation.

With those files in place we wire up our connect, disconnect and display some basic balance information from our connected user.

Let's go back to our Naviagtion component and update it to import these hooks and get everything working:

In the Navigation.tsx file update to the following code:

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

import { Button, FlexContainer, FlexItem, } from "./styledComponents/general";
import { NavigationView, Balance, RightNav, Logo } from "./styledComponents/navigation";
import { SiEthereum } from 'react-icons/si';

export default function Navigation() {
  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 formatAddress = (addr: string) => {
    return `${addr.substr(0, 6)}...${addr.substr(-4)}`
  }

  return (
    <NavigationView>
      <FlexContainer>
        <FlexItem widthPercent={50}>
          <Logo>
            <SiEthereum /> ETH Atlantis
          </Logo>
        </FlexItem>
        <FlexItem widthPercent={50}>
          <RightNav widthPixel={300}>
            {showConnectButton && (
              <Button textSize={10} onClick={handleConnect}>
                {status === "loading" ? "loading..." : "Connect Wallet"}
              </Button>
            )}
            {showInstallMetaMask && (
              <Link href="https://metamask.io/" target="_blank">
                Install MetaMask
              </Link>
            )}
            {wallet && balance && (
              <>
                {isConnected && <Button textSize={10} onClick={handleDisconnect}>Disconnect</Button>}
                <a
                  className="text_link tooltip-bottom"
                  href={`https://etherscan.io/address/${wallet}`} target="_blank"
                  data-tooltip="Open in Etherscan"
                >
                  {formatAddress(wallet)}
                </a>
                <Balance>
                  {(parseInt(balance) / 1000000000000000000).toFixed(2)}{" "}ETH
                </Balance>
              </>
            )}
          </RightNav>
        </FlexItem>
      </FlexContainer>
    </NavigationView>
  );
}

We will go over our changes in the workshop and cover what all of this achieves for us.

At this point we are getting an error because we ave not wrapped the app with a provider, let's go to the apps/web/pages/_app.tsx file and add our MetaMask provider.

In _app.tsx update the code to the following:

import 'normalize.css'
import '../styles/globals.scss'

import type { AppProps } from "next/app";
import { Layout } from "../components/Layout";
import { MetaMaskProvider } from "../hooks/useMetaMask";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MetaMaskProvider>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </MetaMaskProvider>
  );
}

export default MyApp;

We need to make two more changes, one to our apps/web/components/Layout.tsx as this code will determine isMetaMaskInstalled if the ethereum provider exists or is undefined and dispatch the proper actions to our context's reducers.

In the Layout.tsx file update the code to the following:

import { PropsWithChildren, useEffect } from "react";
import { useListen } from "../hooks/useListen";
import { useMetaMask } from "../hooks/useMetaMask";
import { instantiateSdk } from "../lib/MetaMaskSdk";

export const Layout: React.FC<PropsWithChildren> = ({ children }) => {
  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 };

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

  return (
    <div className="app-container">
      {children}
    </div>
  );
};

Finally, we need to add a new file to the apps/web/lib directory called MetaMaskSdk.ts.

Once you have created that file, please add the following code:

import MetaMaskSDK from "@metamask/sdk";

export const instantiateSdk = () => {
  if (typeof window === undefined) {
    return null;
  }

  new MetaMaskSDK();
};

With all of this in place our connect, display and disconnect functionality should work. Let's run our app and try it out. We should now get the option to install if we don't have the MetaMask extension, connect if we do, display balance if we are connected as well as disconnect if we wish.

Add Tickets and Minting

Since our app is based mainly around showing the type of tickets available and giving the user the ability to mint those tickets, we will be adding components directly to the apps/web/pages/index.ts page.

We will first add an array of objects that represent the types of tickets we want to allow users to mint along with their type (GA & VIP), Event Name, Price in ETH using both the actual and hex version of this price. Why both, we want to display the value as well we need the hex value to send to our contract.

On the index.tx page. lets import the ethers (a library for interacting with Ethereum) import just above the Navigation import:

import { ethers } from "ethers";

import Tickets from "../components/tickets/Tickets";
import Navigation from '../components/Navigation';

Next, just under the Mint component declaration add the following code (at line number 8):

  // Get ETH as small number ("0.01" => "10000000000000000")
  const bigNumberify = (amt: string) => ethers.utils.parseEther(amt);

  const ethGa = "0.01";
  const ethVip = "0.02";
  const ethGaHex = bigNumberify(ethGa)._hex;
  const ethVipHex = bigNumberify(ethVip)._hex;
  const tickets = [
    {
      type: "ga",
      event: "ETH Atlantis",
      description: "General Admission Ticket",
      price: ethGa,
      priceHexValue: ethGaHex, // '0x2386f26fc10000' *eserialize.com
    },
    {
      type: "vip",
      event: "ETH Atlantis",
      description: "VIP Ticket",
      price: ethVip,
      priceHexValue: ethVipHex, // '0x470de4df820000' *eserialize.com
    },
  ];

Finally, we will add the actual <TIcket/> component and pass this tickets array to it, just underneath the <Navigation/> component add the following code and until we get that page working we can just comment it out:

      <Tickets tickets={tickets} />

Now we will create a directory named tickets inside apps/web/components and add a file named Tickets.tsx with the following code:

import { useState } from "react";

import { SiEthereum } from 'react-icons/si';

import { Button, FlexContainer, FlexItem, } from "../styledComponents/general";
import { TicketsView, TicketType, TicketTypeText, StyledAlert } from "../styledComponents/tickets";

interface Ticket {
  type: string;
  event: string;
  description: string;
  price: string;
  priceHexValue: string;
}
interface TicketsProps {
  tickets: Ticket[];
}

const TicketTypes: React.FC<Ticket> = ({
  type, event, description, price, priceHexValue,
}) => {

  const [isMinting, setIsMinting] = useState(false);
  const [error, setError] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  return (
    <FlexItem>
      <TicketType>
        <TicketTypeText>{description}</TicketTypeText>
        <p>{event}</p>
        <Button disabled={isMinting}>
          <SiEthereum /> {isMinting ? 'Minting...' : 'Mint'} Ticket
        </Button>
        {
          error && (
            <StyledAlert onClick={() => setError(false)}>
              <span>
                <strong>Error:</strong> {errorMessage}
              </span>
            </StyledAlert>
          )
        }
      </TicketType>
    </FlexItem>
  );
};

const Tickets = ({ tickets }: TicketsProps) => {
  return (
    <TicketsView>
      <h1>Ticket Types</h1>
      <FlexContainer gap={1}>
        {tickets.map((ticket) => (
          <TicketTypes key={ticket.type} {...ticket} />
        ))}
      </FlexContainer>
    </TicketsView>
  );
};

export default Tickets;

With this in place we need to add the styled components for the Tickets page which I have already created and will help to render our page with some style.

In the apps/web/components/styledComponents directory create a page called tickets.js and add the following code:

import styled from 'styled-components';

export const TicketsView = styled.div`
  padding: 1em;
`;

export const TicketType = styled.div`
  border-radius: 10px;
  height: 220px;
  padding: 0.01em 1em;
  background-color: #4A7CB1;
  color: #BDCFE2;
  user-select: none;
  -webkit-box-shadow: 3px 7px 33px -14px rgba(17,63,112,1);
  -moz-box-shadow: 3px 7px 33px -14px rgba(17,63,112,1);
  box-shadow: 3px 7px 33px -14px rgba(17,63,112,1);
`;

export const TicketTypeText = styled.h2`
  background-color: #f3ec78;
  background-image: linear-gradient(45deg, #C5ECFF, #8BD8FF);
  background-size: 90%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
`

export const StyledAlert = styled.div`
  border-radius: 5px;
  padding: 0.5em;
  font-size: 10px;
  height: 40px;
  width: 100%;
  word-break: break-word;
  margin: 0.5em 0;
  background-color: #244982;
  strong {
    color: #E2761B;
  }
`

With all of this in place we should see our ticket types show up with minting buttons (that do not work yet) on the page if we navigate to our app on localhost:3000.

Adding Minting Functionality to TicketCategoryDetail Component

With our ticket types in place, we are ready to sell out our event to ETH Atlantis. We need to add some additional code to our Tickets.tsx page which will allow us to interact with our smart contract. If for any reasons you have killed your npm run local or npm run dev processes in the terminal now is a time to get those running and ensure your config.ts file has the right contract address added.

When we are done with this next section we should be able to call our contract's mintNFT function and get some initial feedback indicating our minting process is working in our dApp.

In the Tickets.tsx page, we need to add a few more imports directly above the existing imports we have already added:

import { useState } from "react";
import { useRouter } from "next/router";
import { useMetaMask } from "../../hooks/useMetaMask";
import { ETHTickets__factory } from "blockchain";
import { ethers } from "ethers";
import { config } from "../../lib/config";

import { SiEthereum } from 'react-icons/si';

import { Button, FlexContainer, FlexItem, } from "../styledComponents/general";
import { TicketsView, TicketType, TicketTypeText, StyledAlert } from "../styledComponents/tickets";

These imports will give us access to our connected wallet state, the NextJS router so the we can force a page refresh (only after a successful mint), access to our smart contract through the ETHTickets__factory created by our build which utilizes typechain, the ethers library to get provider and signer for interacting with the blockchain via our contracts methods and the config file that knows the contract address.

Starting on line 28 of the Tickets.tsx file inside our TicketsType component, we need to destructure our wallet state returned by a call to useMetaMask() hook as well define a router with a call to the NextJS useRouter() hook, update that code with the following:

  const { state: { wallet }, } = useMetaMask();
  const router = useRouter();
  const [isMinting, setIsMinting] = useState(false);
  const [error, setError] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

Directly below the code just added we need to add a function called mintTicket(), add the following code just above the return statement in the TicketsType component:

const mintTicket = async () => {
    setIsMinting(true);

    const provider = new ethers.providers.Web3Provider(window.ethereum);
    // In ethers.js, providers allow you to query data from the blockchain. 
    // They represent the way you connect to the blockchain. 
    // With them you can only call view methods on contracts and get data from those contract.
    // Signers are authenticated providers conected to the current address in MetaMask.
    const signer = provider.getSigner();

    const factory = new ETHTickets__factory(signer);
    const nftTickets = factory.attach(config.contractAddress);

    nftTickets
      .mintNFT({
        from: wallet!,
        value: priceHexValue,
      })
      .then(async (tx: any) => {
        console.log('minting accepted')
        await tx.wait(1);
        console.log(`Minting complete, mined: ${tx}`);
        setIsMinting(false);
        router.reload()
      })
      .catch((error: any) => {
        console.log(error);
        setError(true);
        setErrorMessage(error?.message);
        setIsMinting(false);
      })
  };

We will discuss the function we just added in the workshop.

Finally, we will update the button inside the TicketsType component's JSX and add a call to the mintTicket() function:

        <Button disabled={isMinting} onClick={mintTicket}>

Our mintTicket() function has a few strategically placed console.log() statements so that we can tell if our minting button is working. At this point, if we are connected to the dApp with a MetaMask wallet that has some ETH in it, we can test those buttons out. Ensure you have your developer tools in your browser open to the console so we can see those logs once we mint. (comment out the router.reload() statement to ensure we can see the console messages and uncomment once we are sure it is working).

We should see:

minting accepted
Tickets.tsx?cd6d:55 Minting complete, mined: 0x......

With the minting now working we are ready to make our last set of changes to display the connected wallet's minted NFTs.

Add TicketsOwned Component to Minting Page

First we need to add the styles we will need to display our minted NFTs in a grid at the bottom of the page. Create a new file in the apps/web/components/styledComponents directory named ticketsOwned.js and add the following code:

import styled from "styled-components";

export const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(${props => props.columns || 2}, ${props => props.columnWidth}px);
  grid-template-rows: repeat(${props => props.itemWidth || "300"}px);
`;

export const SvgItem = styled.div`
  width: 300px;
  padding: ${props => props.pad || 0}px;
`;

In the apps/web/pages/index.tsx file we need to add one final component named <TicketsOwned />.

Create a file named TicketsOwned.tsx inside the apps/web/components directory. Since we have already reviewed code that gets our signer, provider, wallet state, etc. and since we have to repeat some of that same code on this page, we are just going to add all the code needed to display our minted NFT ticket SVGs in one shot and then talk about everything we have added.

In TicketsOwned.tsx, add the following code:

import { useState, useEffect } from "react";
import { ethers } from "ethers";
import Image from "next/image";

import { ETHTickets__factory } from "blockchain";
import { config } from "../../lib/config";
import { useMetaMask } from "../../hooks/useMetaMask";

import { Grid, SvgItem } from "../styledComponents/ticketsOwned";

type NftData = {
  name: string,
  description: string,
  attributes: { trait_type: any, value: any }[],
  owner: string,
  image: string
};

type TicketFormated = {
  tokenId: string
  svgImage: string
  ticketType:
  { trait_type: any, value: any }
};

const TicketsOwned = () => {
  const [ticketCollection, setTicketCollection] = useState<TicketFormated[]>([]);
  const { state: { wallet: address }, } = useMetaMask();

  useEffect(() => {
    if (typeof window !== "undefined" && address !== null) {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();

      const factory = new ETHTickets__factory(signer);
      const nftTickets = factory.attach(config.contractAddress);

      const ticketsRetrieved: TicketFormated[] = [];

      nftTickets.walletOfOwner(address).then((ownedTickets) => {
        const promises = ownedTickets.map(async (t) => {
          const currentTokenId = t.toString();
          const currentTicket = await nftTickets.tokenURI(currentTokenId);

          const base64ToString = window.atob(
            currentTicket.replace("data:application/json;base64,", "")
          );
          const nftData: NftData = JSON.parse(base64ToString);

          ticketsRetrieved.push({
            tokenId: currentTokenId,
            svgImage: nftData.image,
            ticketType: nftData.attributes.find(
              (t) => t.trait_type === "Ticket Type"
            ),
          } as TicketFormated);
        });
        Promise.all(promises).then(() => setTicketCollection(ticketsRetrieved));
      });
    }
  }, [address]);

  let listOfTickets = ticketCollection.map((ticket) => (
    <SvgItem pad={4} key={`ticket${ticket.tokenId}`}>
      <Image
        width={300}
        height={300}
        src={ticket.svgImage}
        alt={`Ticket# ${ticket.tokenId}`}
      />
    </SvgItem>
  ));

  return (
    <>
      <hr />
      <Grid columns={3} itemWidth={300} columnWidth={308}>{listOfTickets}</Grid>
    </>
  );
};

export default TicketsOwned;

At this point, each time you mint a new ticket, you should see them displayed as SVG at the bottom of the screen in a grid format. These are the exact NFTs your users will be minting and we are getting the SVG images directly from the deployed smart contract using the generateNftSvgByTokenId() method in our contract which takes a tokenId and builds the SVG just like the version it saves onchain to the ethereum blockchain.

This concludes the instructional portion of the workshop, we would love you to continue working on this project and adding your own features, iterating on the UI, adding better error handling, create tests and even deploy to a testnet. The MetaMask DevRel team can be contaced on Twitter Eric Bishard at @httpJunkie and Guillaume Bibeau at @GuiBibeau if you have questions or comments regarding the code or workshop!

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!

React Hook for Add/Switch Chain to any Ethereum Network in MetaMask

Eric Bishard — Tue, 31 May 2022 15:29:16 +0000

When Switching or Adding and then Switching to another Network/Chain within a dapp like React using MetaMask API. You can build a React Hook with the concept in this GitHub Gist included below.

The code between lines 36 and 68 could be used outside of a React Hook in the case you just want to know how to create a single JavaScript/TypeScript function for adding/switching Ethereum chain.

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!

MetaMask Snaps Resources

Eric Bishard — Mon, 21 Mar 2022 11:28:46 +0000

Resources from the MetaMask Developer Relations team for MetaMask Snaps and Flask

Introduction to Snaps

Snaps Community

MetaMask Flask Resources

Snaps Demos

Related Resources

The Developers Guide To React Amsterdam

Eric Bishard — Mon, 21 Mar 2022 11:26:23 +0000

Before getting too far, I want to link to a great post on medium about React Amsterdam and what to expect, read this article before anything else if you are on planning on attending!

Are you ready for React Amsterdam 2019? 🤔

I want this article to be something that can live on past the 2019 React Amsterdam event.2019 is my first time attending. But I think a lot of the info and tips I bring up will be valid for next year as well.

My name is Eric Bishard, I go by @httpJunkie on Twitter. I'm a developer advocate for KendoReact and I work at Progress Software. I don't want to make this an advertisement by any means, but I do want to recognize the people I work for and say that it's been an amazing experience to work for a company that as a developer advocate for React, allows me to get out there and interact with the React community at the most amazing React conferences on the planet and do it in a way that is truly organic. I couldn't imagine a better company to get my avocado legs at.

Of all the conferences I have been preparing for this year, React Amsterdam was by far the most interesting to plan and think about. Amsterdam is truly an amazing place to visit this time of year. Some of the speakers and volunteers for the conference are getting into town a few days early to check out the city, to travel outside of the city to see the tulips blooming and although my suggestion is to stay away from most tourist attractions, things like this and visiting the Ann Frank house are amazing things you can do in your off time at the conference.

Getting Around the City

Amsterdam is an easy town to get around also. When I arrived, I didn't order a €30 to €40 Taxi, Lyft or Uber. Instead, I hopped on the train for $5 Euros and took it to the Central Station where I then paid for a 3 day Metro ticket for €20. This will get me most of the places within the Central and Amsterdam Noord. Taking ride sharing seems to not be as interesting as a way to get around. Pair that the fact you can rent a bike anywhere you can throw a rock, it just doesn't make much sense to take ride sharing or taxis unless you're desperate or trains are not running.

React 2020

If you are planning on attending the React Amsterdam 2020 event, mark your calendars now, it will be April 16th and 17th. I have found that it's best to get your hotel early and not worry about the distance so much as the proximity to a Metro station!

A few things to keep in mind when getting to Amsterdam and understanding the trains vs metro. In order to go everywhere in the city, you will need an OV-Chipkaart, which is a loadable card that you can keep topping off and is good for all of the transit options. You can purchase these at the airport or train stations. You can also just by a Metro card that is good for anywhere the Metro travels. Without getting too crazy in this article, understand that Amsterdam has 5 ways to travel using public transport, the best resource for figuring this out is a TripSavvy Article that does a great job at explaining it all, otherwise just take a day to travel around, you'll figure it out. Each station has information booths in case you need some help.

Interesting Places to Stay

Because it's so easy to get around, you don't really need to stay right next to the conference, in fact, I'm enjoying the commute to and from on the Metro, learning about the city and for this reason, I want to give you some ideas of places that are pretty rad to stay at. Amsterdam has a lot of Bed & Breakfasts, House Boats, and quirky hotels that you might not know about, I'm going to link to a bunch of these places in the resources section at the end of this article.

Do Your Homework

Amsterdam is a place where you can easily get lost but a little bit of homework before your trip, an hour or two studying the major city center, surrounding areas, streets, and canals will go a long way in helping you get a lay of the land before you hit the ground. Obviously, Google Maps is the best place to start, but you should also take in the major transit lines and understand what places are easy to bike to and what areas are best to take transportation to.

Workshop it Up

React Amsterdam aside from the main conference has two days of workshops, as an attendee, this should be something you consider doing if your company is helping you to make the trip, even if not, the value of these workshops more than pays for itself in the amount of hands-on experience you will get and one on one time with the workshop instructors teaching the latest bleeding edge React concepts in both React and React Native. Aside from attending there are also possibilities to sign up for volunteering to help with the workshops and conference. My company is a sponsor and I wanted to maximize my opportunities to meet people and help out with the conference, naturally, this is something I consider doing at most of the conferences I will be attending this year, especially if I'm not a speaker or presenter.

The Conference

I'm still working on this part of the article and will publish an update after April 12th, I hope this article can be a document that is useful not only for the 2019 React Amsterdam but also for future React Amsterdam events.

Resources

Below are some of the resources I wanted to make sure anyone coming to Amsterdam had access to, as well, I have added some interesting lodging ideas and transportation links.

DEV Community: Eric Bishard

Setup Mac M1 Silicon for ReactNative Development

Set NVM to 18:

Install Watchman with Brew

Ruby Setup

Install Xcode

From Apple Store

Manually Install Xcode iOS Simulator:

Install Xcode command line should now be installed? If not:

Install CocoaPods

Install Android Studio:

Android Studio Setup:

Configure Environment Variables:

Install Java Runtime

Verification Steps

Troubleshooting

Ethereum Chains

Mainnets

Testnets

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

✨ETH Dubai 2023 MetaMask SDK Developer Guide✨

TOC

Hackathon Bounty

Hackathon Tips 🪄

Start Here 🎯

Examples and Demos ⚙️

Building with Infura, Truffle or Ganache

✨ETH Denver 2023 Snaps Developer Guide✨

TOC

Before You Start ⚠️

Start Here 🎯

Bounties 🪙

Hackathon Tips 🪄

Example Snaps ⚙️

Truffle Suite Integration 🔗

L2s and Non EVM Compatibility 📑

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 Dubai MetaMask Workshop

Web3 Dubai MetaMask Workshop (Follow Along)

Prerequisites:

Getting Started

Run Our NextJS Project

Reviewing our Blockchain App

Building and Running our Project

Connecting Users to MetaMask

Add Tickets and Minting

Adding Minting Functionality to TicketCategoryDetail Component

Add TicketsOwned Component to Minting Page

Web3 Unleashed: The MetaMask API

Overview