> ## Documentation Index > Fetch the complete documentation index at: https://hedera-0c6e0218-docs-evm-account-model.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Tutorial: MetaMask Snaps – What Are They and How to Use Them > Step-by-step tutorial on installing the Hedera Wallet Snap, connecting MetaMask to a Hedera network, and sending HBAR transactions from your dApp. ## Introduction MetaMask is a widely used EVM wallet and browser extension – MetaMask Snaps is an open-source solution designed to enhance the capabilities of this wallet. Snaps are created by developers using JavaScript and enable users to interact with various blockchains, protocols, and [decentralized applications (dApps)](/support/glossary#decentralized-application-dapp) that MetaMask does not natively support. To learn more about Snaps, visit the [MetaMask Snap Guide](https://docs.metamask.io/snaps/). The [Hedera Wallet Snap](https://snaps.metamask.io/snap/npm/hashgraph/hedera-wallet-snap/), developed by [Tuum Tech](https://www.tuum.tech/) and managed by [Hashgraph](https://www.hashgraph.com/), enables users to interact directly with the Hedera network. It offers functionalities like sending HBAR to different accounts and retrieving account information. **What You Will Learn** This tutorial will demonstrate how dApp builders and developers can seamlessly integrate and utilize the Hedera Wallet Snap in their applications. You will learn how to: * 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` **Tools You Will Use** * React JS ([Documentation](https://react.dev/)) * MetaMask ([Documentation](https://docs.metamask.io/wallet/)) * Hedera Wallet Snap for MetaMask ([Documentation](https://docs.tuum.tech/hedera-wallet-snap/basics/introduction)) * Hedera JSON-RPC Relay ([Hashio](https://www.hashgraph.com/hashio/)) * Ethers JS ([Documentation](https://docs.ethers.org/v6/)) * Mirror Node REST API ([Learn More](https://hedera.com/blog/how-to-look-up-transaction-history-on-hedera-using-mirror-nodes-back-to-the-basics)) * Mirror Node Explorer ([HashScan](https://hashscan.io/)) *** ## Prerequisites * NodeJS >= 18.13 ([Download](https://nodejs.org/en)) * TypeScript >= 4.7 ([Download](https://www.npmjs.com/package/typescript)) * Git Command Line ([Download](https://git-scm.com/downloads)) * Hedera Testnet Account ([Create](https://portal.hedera.com/)) * MetaMask Wallet Extension ([Download](https://metamask.io/download/)) *** ## **Get Familiar with the dApp Structure and UI** Explore the project files and functions and get a feel for how the sample dApp looks and functions. This will make it easier to follow along as you dive into the technical aspects of the dApp. For convenience, two options are provided to run the code used in this example: 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](https://gitpod.io/#https://github.com/ed-marquez/hedera-example-metamask-snap). You will see the following:

If you prefer to have a copy of the code files on your machine and run the application locally, follow these steps. #### Clone the Repo To clone the repository, open your terminal and navigate to the directory where you want to place the project. Then, run the following command: ```bash theme={null} git clone https://github.com/hedera-dev/hedera-example-metamask-snap.git ``` #### Navigate to Directory Once the cloning process is complete, navigate to the project folder using: ```bash theme={null} cd hedera-example-metamask-snaps ``` **Install Project Dependencies and Start the Application** After cloning the repo and navigating to the right folder, install all project dependencies. Dependencies are listed in the [`package.json`](https://github.com/ed-marquez/hedera-example-metamask-snap/blob/main/package.json) file, so you can just run the following command: ```bash theme={null} npm install ``` To start the application, run: ```bash theme={null} npm start ``` **Project Structure** The project folder structure should look something like the following.

### Overall dApp Structure The example application has four buttons, which complete different tasks when pressed. * 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.

Now let’s look at the **App.jsx** file (inside the src folder) behind this UI. You can think of the code as three main sections (in addition to the imports): 1. The state management is the part that uses the [**useState()** React Hook](https://react.dev/reference/react/useState). 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.

The **useState()** hook helps store information about the state of the application. In this case, we store information like the [snapId](https://docs.tuum.tech/hedera-wallet-snap/getting-started/hello-world#javascript-function-to-interact-with-hedera-wallet-snap-api), wallet data, the account that is connected, the network, and the receiver address and HBAR amount, along with text and links presented in the UI. Remember that the first output of **useState()** is the variable of interest (e.g., **walletData**), and the second output is a function to set a new value for that variable (e.g., **setWalletData**). #### Understanding the React Components The buttons, text, and input boxes in the UI are a combination of React components in the **return** statement of **App.jsx**. Working with components, we take advantage of React's composability for better organization and readability. The properties for each component instance – like the function that each button executes, the label of the button, the text above the button, and the link for that text – are customized using [React props](https://react.dev/learn/passing-props-to-a-component). ```jsx theme={null} import React from "react"; import MyButton from "./MyButton.jsx"; import MyText from "./MyText.jsx"; function MyGroup(props) { return (

); } export default MyGroup; ``` **MyGroup** is a functional component that combines a text element with a button and receives props as an argument. These properties include: * **`text`**: The text to be displayed by the **MyText** component. * **`link`**: An optional link to be associated with the **MyText** component. If provided, the text will become clickable and redirect to the specified link. * **`fcn`**: A function to be executed when the button within the **MyButton** component is clicked. * **`buttonLabel`**: The label for the button in the **MyButton** component. Inside the component, we return a **div** element that contains both the **MyText** and **MyButton** components. We pass the corresponding props down to these child components, allowing them to render the text, link, and button label and assign the click event handler. Finally, by exporting **MyGroup**, we make it available for use in other parts of the application, enabling us to quickly create reusable groups of text and button elements throughout the dApp. You can find the JSX files for the functional components mentioned under the folder **src/components**. ```jsx theme={null} import React from "react"; function MyButton(props) { return (

); } export default MyButton; ``` **MyButton** accepts the following props: * **`fcn`**: A function to be executed when the button is clicked. * **`buttonLabel`**: The label for the button, which will be displayed as the button's text. Inside the component, we return a div element that wraps a button element. The button element is assigned the **onClick** event handler with the function **props.fcn**. This allows us to execute a specified function when the button is clicked. The **className** attribute is set to "**cta-button**," which is used for styling the button with CSS. Finally, we display the **props.buttonLabel** as the button's text. By exporting **MyButton**, we make it available for use in other groups or parts of the application, allowing us to easily create consistent and reusable buttons throughout the dApp with customized functionality and labels. ```jsx theme={null} import React from "react"; function MyText(props) { if (props.link !== "") { return (

{props.text}

); } else { return (

{props.text}

); } } export default MyText; ``` **MyText** displays text and optionally wraps it in a link. It takes props as an argument, including: * **`text`**: The text to be displayed. * **`link`**: An optional link to be associated with the text. Inside the component, we use a conditional statement to check if **props.link** is provided. If it is, we wrap the text within an **\** element, making it clickable and redirecting to the specified link. If no link is provided, we display the text within a **\

** element. Both elements have the **className "sub-text"** for consistent styling. Finally, we export the **MyText** component so it can be used in other parts of the application, allowing for easy creation of text elements with optional links. ```typescript theme={null} import React from "react"; import MyInputBox from "./MyInputBox"; import MyButton from "./MyButton"; import MyText from "./MyText"; function MySendGroup(props) { return (

); } export default MySendGroup; ``` **MySendGroup** uses a text display, two input boxes, and a button to facilitate data entry and user interaction. The component takes props as an argument, including: * **`fcnI1`** and **`fcnI2`**: Functions to store the text provided via input fields in the application state. * **`placeholderTxt1_app`** and **`placeholderTxt2_app`**: Placeholder texts for the input fields. * The same arguments are mentioned for **MyText** and **MyButton**. Inside the component, we return a div element that contains the **MyText**, **MyInputBox**, and **MyButton** components. We pass the corresponding props down to these child components. Finally, exporting **MySendGroup** makes it available for use in other parts of the application. ```jsx theme={null} import React from "react"; function MyInputBox(props) { return (

); } export default MyInputBox; ``` **MyInputBox** accepts the following props: * **`fcn`**: A function to store the text provided via input fields in the application state. * **`placeholderTxt`**: Placeholder texts for the input fields. Inside the component, we return a **div** that wraps an input element. The input element is assigned the **onChange** event handler with the function **props.fcn**. This triggers the function that stores the inputs (receiver address and HBAR amount) to the state of the application. We display the **props.placeholderTxt** as the box text. The **className** attribute is set to **"text-input,"** which is used for styling the boxes with CSS. Finally, by exporting **MyInputBox**, we make it available for use in other parts of the application. *** ## Step 1: Pair MetaMask Wallet (select network and account) In **App.jsx**, we use the **connectWallet()** function (code tab 1), which in turn calls the **walletConnectFcn()** function (code tab 2) that is imported from the file **src/components/hedera/walletConnect.js**. ```jsx connectWallet() theme={null} 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(); } } } ``` ```jsx walletConnectFcn() theme={null} import { ethers } from "ethers"; async function walletConnectFcn(network) { console.log(`\n=======================================`); // ETHERS PROVIDER const provider = new ethers.providers.Web3Provider(window.ethereum, "any"); // SWITCH TO HEDERA TEST NETWORK console.log(`- Switching network to the Hedera ${network}...🟠`); let chainId; if (network === "testnet") { chainId = "0x128"; } else if (network === "previewnet") { chainId = "0x129"; } else { chainId = "0x127"; } await window.ethereum.request({ method: "wallet_addEthereumChain", params: [ { chainName: `Hedera ${network}`, chainId: chainId, nativeCurrency: { name: "HBAR", symbol: "HBAR", decimals: 18 }, rpcUrls: [`https://${network}.hashio.io/api`], blockExplorerUrls: [`https://hashscan.io/${network}/`], }, ], }); console.log("- Switched ✅"); // // CONNECT TO ACCOUNT console.log("- Connecting wallet...🟠"); let selectedAccount; await provider .send("eth_requestAccounts", []) .then((accounts) => { selectedAccount = accounts[0]; console.log(`- Selected account: ${selectedAccount} ✅`); }) .catch((connectError) => { console.log(`- ${connectError.message.toString()}`); return; }); return [selectedAccount, provider]; } export default walletConnectFcn; ``` When the **Connect Wallet** button is pressed in the dApp, the **connectWallet()** function is executed. This function checks if an account is already connected. If it is, a message displaying the connected account is shown. If no account is connected, the **walletConnectFcn()** is called to establish a connection. The **walletConnectFcn()** function performs the following steps: 1. **Creates an ethers provider**: It initializes an ethers provider using the **Web3Provider** from the [**ethers**](https://docs.ethers.org/v6/) 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](https://www.hashgraph.com/hashio/), a community-hosted [JSON-RPC relay](https://github.com/hashgraph/hedera-json-rpc-relay) provided by [Hashgraph](https://www.hashgraph.com/) (note that anyone can host their own relay and/or use other commercial providers, like [Arkhia](https://www.arkhia.io/features/#api-services)). For network explorer, [HashScan](https://hashscan.io/) is used. (Keep in mind that HashScan supports [EIP-3091](https://eips.ethereum.org/EIPS/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. Finally, the **connectWallet()** function in **App.jsx** updates the React state with the connected testnet account and provider information, allowing the dApp to display the connected testnet account information. This is what you see when clicking the **Connect Wallet** button for the first time. **Note**: The Hedera account selected in MetaMask for this example has ECDSA keys and is created using the [Hedera Portal](https://portal.hedera.com/).