Tutorial: MetaMask Snaps – What Are They and How to Use Them

​

Introduction

• Pair dApp with MetaMask
• Install the Hedera Wallet Snap
• Get the Snap Ethereum Virtual Machine (EVM) address
• Create the Snap account and check its balance
• Call other methods in the Hedera Wallet Snap, like: transferCrypto

• React JS (Documentation)
• MetaMask (Documentation)
• Hedera Wallet Snap for MetaMask (Documentation)
• Hedera JSON-RPC Relay (Hashio)
• Ethers JS (Documentation)
• Mirror Node REST API (Learn More)
• Mirror Node Explorer (HashScan)

​

Prerequisites

• NodeJS >= 18.13 (Download)
• TypeScript >= 4.7 (Download)
• Git Command Line (Download)
• Hedera Testnet Account (Create)
• MetaMask Wallet Extension (Download)

​

Get Familiar with the dApp Structure and UI

Run in Browser Using GitPod

This option does not require installing anything on your machine. All you need is a compatible web browser. Click here to set up the GitPod environment. You will see the following:

git clone https://github.com/hedera-dev/hedera-example-metamask-snap.git

cd hedera-example-metamask-snaps

npm install

npm start

​

Overall dApp Structure

• The first button connects the application to MetaMask.
• The second button installs the Hedera Wallet Snap.
• The third button obtains information about the Snap account.
• The fourth button (and respective input boxes) uses the Hedera Wallet Snap to transfer HBAR.

1. The state management is the part that uses the useState() React Hook.
2. The functions that are executed with each button press; we’ll look at these in the next few sections.
3. The return statement groups the elements we see on the page.

​

Understanding the React Components

import React from "react";
import MyButton from "./MyButton.jsx";
import MyText from "./MyText.jsx";
function MyGroup(props) {
    return (
        <div>
            <MyText text={props.text} link={props.link} />
            <MyButton fcn={props.fcn} buttonLabel={props.buttonLabel} />
        </div>
    );
}
export default MyGroup;

import React from "react";
function MyButton(props) {
    return (
        <div>
            <button onClick={props.fcn} className="cta-button">
                {props.buttonLabel}
            </button>
        </div>
    );
}
export default MyButton;

import React from "react";
function MyText(props) {
    if (props.link !== "") {
        return (
            <div>
                <a href={props.link} target={"_blank"} rel="noreferrer">
                    <p className="sub-text">{props.text}</p>
                </a>
            </div>
        );
    } else {
        return (
            <div>
                <p className="sub-text">{props.text}</p>
            </div>
        );
    }
}
export default MyText;

import React from "react";
import MyInputBox from "./MyInputBox";
import MyButton from "./MyButton";
import MyText from "./MyText";
function MySendGroup(props) {
    return (
        <div>
            <MyText text={props.text_app} link={props.link_app} />
            <div className="multi-col-group">
                <MyInputBox fcn={props.fcnI1_app} placeholderTxt={props.placeholderTxt1_app} />
                <MyInputBox fcn={props.fcnI2_app} placeholderTxt={props.placeholderTxt2_app} />
                <MyButton fcn={props.fcnB1_app} buttonLabel={props.buttonLabel_app} />
            </div>
        </div>
    );
}
export default MySendGroup;

import React from "react";
function MyInputBox(props) {
    return (
        <div>
            <input type="text" onChange={props.fcn} placeholder={props.placeholderTxt} className="text-input" />
        </div>
    );
}
export default MyInputBox;

​

Step 1: Pair MetaMask Wallet (select network and account)

async function connectWallet() {
        if (account !== undefined) {
                setConnectText(`🔌 Account ${account} already connected ⚡ ✅`);
        } else {
                const wData = await walletConnectFcn(network);

                let newAccount = wData[0];
             if (newAccount !== undefined) {
                        setConnectText(`🔌 Account ${newAccount} connected ⚡ ✅`);
                        setConnectLink(`https://hashscan.io/${network}/account/${newAccount}`);
                        setWalletData(wData);
                        setAccount(newAccount);
                        setSnapInstallText();
                        setSnapInfoText();
                        setSnapTransferText();
                }
        }

}

1. Creates an ethers provider: It initializes an ethers provider using the Web3Provider from the ethers library, which connects to MetaMask. An Ethers provider serves as a bridge between your application and the Hedera network. It allows you to perform actions like sending transactions and querying data.
2. Switches to Hedera Testnet: It determines the chainId based on the chosen Hedera network (testnet, previewnet, or mainnet) and sends a wallet_addEthereumChain request to MetaMask to add the corresponding Hedera network. A chain ID is a unique identifier that represents a blockchain network. This is an important step that includes setting the native currency (HBAR) and providing the JSON-RPC and network explorer URLs. For the JSON-RPC provider, this example uses Hashio, a community-hosted JSON-RPC relay provided by Hashgraph (note that anyone can host their own relay and/or use other commercial providers, like Arkhia). For network explorer, HashScan is used. (Keep in mind that HashScan supports EIP-3091, which makes it easy to explore historical data like blocks, transactions, accounts, contracts, and tokens from wallets like MetaMask).
3. Connects and Pairs Account: The function sends an eth_requestAccounts request to MetaMask to access the user’s Hedera account. Upon successful connection, the selected account is returned.

​

Step 2: Install the Hedera Wallet Snap

async function snapInstall() {
        if (account === undefined) {
            setSnapInstallText("🛑Connect a wallet first!🛑");
        } else {
            const newSnapInstallText = await snapInstallFcn(snapId);
            setSnapInstallText(newSnapInstallText);
            setSnapInfoText();

1. Gets Installed Snaps: The function requests a list of installed Snaps in the user’s MetaMask wallet using the wallet_getSnaps method. It logs the currently installed Snaps.
2. Installs Snaps: The function checks if the Hedera Wallet Snap (identified by snapId) is already installed. If it’s not installed, the function attempts to install it by calling wallet_requestSnaps and passing the snapId. It then logs the result of this installation attempt. After attempting installation, it checks again for installed Snaps.
3. Handles Installation Outcome: If the Snap is successfully installed (i.e., snapId is found in the list of installed snaps), it logs and alerts the user that the Snap installation was successful. If the installation fails (i.e., snapId is not found in the list), it logs and alerts the user that the connection could not be established successfully.
4. Returns Result: Lastly, the function returns a text message indicating whether the Snap was installed successfully.

​

Step 3: Get the Snap EVM Address

async function snapGetAccountInfo() {
  if (account === undefined || snapInstallText === undefined) {
    setSnapInfoText("🛑Connect a wallet and install the snap first!🛑");
  } else {
    const [snapAccountAddress, infoText] = await snapGetAccountInfoFcn(
      network,
      walletData,
      snapId
    );
    setSnapInfoText(infoText);
    setInfoLink(`https://hashscan.io/${network}/address/${snapAccountAddress}`);
    setSnapTransferText();
  }
}

1. Requests Account Information: The function makes a request to MetaMask using the wallet_invokeSnap method. It sends the snapId and a request for the getAccountInfo method, along with the network details and the URL of the Hedera mirror node. For more details on this method, read this section of the Hedera Wallet Snap documentation.
2. Processes the Response: If the request is successful, the function extracts the EVM address of the Snap account and its balance in HBAR from the response. It then constructs a message stating the account’s EVM address and balance.
3. Handles Errors: If there’s an error (like the account not being created yet), the function extracts the EVM address from the error message. It then creates a message instructing the user to transfer HBAR to this address to create the Snap account.
4. Returns Results: The function logs the outcome message (either the account details or the activation instruction). It then returns the EVM address of the Snap account and the outcome message.

​

Step 4: Create Snap Account and Check Its Balance

​

Step 5: Call Other Methods in the Hedera Wallet Snap

 async function snapTransferHbar() {
        if (account === undefined || snapInstallText === undefined || snapInfoText === undefined) {
            setSnapTransferText("🛑Complete all the steps above first!🛑");
        } else {
            setSnapTransferText(`Transferring...`);
            const transferText = await snapTransferHbarFcn(network, walletData, snapId, [receiverAddress, hbarAmount]);
            setSnapTransferText(`${transferText}`);
        }
    }

• Sets Transfer Details: It extracts the recipient’s address and the amount of HBAR to be transferred from the arguments (args) provided. Note that these inputs are specified in the dApp UI – remember that the receiver address is that of the MetaMask account and the transfer amount is 0.2 HBAR. The function sets a maximum fee for the transaction, which is predefined as 0.05 HBAR in the code. It also prepares the transfer details, including the asset type (HBAR), the receiver’s address, and the amount.
• Executes Transfer Request: The function sends a wallet_invokeSnap request. This request includes the snapId, the transferCrypto method, and parameters such as the network, the transfer details, a memo (may be needed for transferring to exchange accounts), and the maximum fee.
• Handles Transfer Outcome: If the transfer is successful, the function sets a message indicating success and suggests re-checking the Snap account info for an updated balance. In case of an error or failure, it sets a different message indicating that the transaction failed and prompts trying again.
• Returns Output: Finally, the function returns the outcome message, informing whether the transfer was successful or not.

​

Summary

• It starts by covering the dApp’s structure and user interface, highlighting the functions of various buttons like connecting to MetaMask, installing the Hedera Wallet Snap, obtaining Snap account information, and transferring HBAR using the Snap.
• The tutorial also dives into the technical aspects, detailing the App.jsx file, which includes state management, functions for button actions, and the layout of the UI components. It explains the use of React components like MyGroup, MyButton, and MyInputBox to create an interactive and user-friendly interface.
• It then elaborates on MetaMask Snaps, its purpose, and how to use them, specifically focusing on the Hedera Wallet Snap for tasks like pairing the dApp with MetaMask, installing the Snap, managing the Snap account, and executing crypto transfers.

​

Additional Resources