{"id":15756,"date":"2023-04-04T00:00:00","date_gmt":"2023-04-04T00:00:00","guid":{"rendered":"https:\/\/hederav2stg.wpenginepowered.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/"},"modified":"2026-02-03T18:36:50","modified_gmt":"2026-02-03T23:36:50","slug":"how-to-create-an-hbar-token-faucet-for-metamask","status":"publish","type":"post","link":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/","title":{"rendered":"How to Create an HBAR Token Faucet for MetaMask"},"content":{"rendered":"<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Enabling the opportunity to connect to a dApp with different wallets provides more control to the user. Recently, <a href=\"https:\/\/hips.hedera.com\/hip\/hip-583\" target=\"_blank\">HIP-583<\/a> added the necessary network infrastructure to support Ethereum Virtual Machine (EVM) wallets on the Hedera network. This added functionality, combined with the auto-create flow described in <a href=\"https:\/\/hips.hedera.com\/hip\/hip-32\" target=\"_blank\">HIP-32<\/a>, enables developers to transfer native Hedera Token Service tokens to EVM addresses that do not yet exist on the Hedera network. In this tutorial, we start out with a Hedera react app, connect our dApp to MetaMask, and finally transfer HBAR to the connected MetaMask account.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">What we will do:<\/h4>\n<ul>\n<li>Create a Hedera react-app Utilizing TypeScript and Material UI<\/li>\n<li>Install MetaMask Chrome Extension<\/li>\n<li>Add Hedera Testnet Network to MetaMask<\/li>\n<li>Connect Our dApp to MetaMask and Retrieve Wallet Address<\/li>\n<li>Install Hedera Hashgraph JS SDK and Create Your Client<\/li>\n<li>Send HBAR to MetaMask Wallet<\/li>\n<\/ul>\n<ul><\/ul>\n<p>The complete TypeScript project can be found on GitHub <a href=\"https:\/\/github.com\/a-ridley\/hbar-faucet-for-metamask\" target=\"_blank\">here<\/a>.<\/p>\n<p>The complete JavaScript project can be found on GitHub <a href=\"https:\/\/github.com\/a-ridley\/hbar-faucet-for-metamask-JS\" target=\"_blank\">here<\/a>.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">How Do I Build an HBAR Faucet for MetaMask?<\/h4>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">Step 1: Create a react-app<\/h4>\n<p>Open your terminal and run the following command to create a react-app that utilizes TypeScript and Material UI.<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">npx create-react-app hbar-faucet-testing --template git+ssh:\/\/git@github.com\/a-ridley\/cra-template-hedera-theme.git\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>This create react-app theme provides a navbar with a button, footer, react-router, and a global context for state management. We will use this template to kickstart our project.<\/p>\n<p>Open the project in Visual Studio code. Your project directory structure will look like this:<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">\u251c\u2500\u2500 node_modules\n\u251c\u2500\u2500 public\n\u251c\u2500\u2500 src\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 README.md\n\u2514\u2500\u2500 tsconfig.json\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">Step 2: Install MetaMask Chrome Extension<\/h4>\n<p>If you have not already installed the MetaMask extension, please install it <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/metamask\/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en\" target=\"_blank\">here<\/a>.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">Step 3:\u00a0Add Hedera Testnet Network to MetaMask<\/h4>\n<p>In this step, we will add the code necessary to add the Hedera Testnet Network to MetaMask so we can connect to it. Before we do that, let\u2019s check out our src folder structure, which looks like this:<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">src\n\u251c\u2500\u2500 assets\n\u251c\u2500\u2500 components\n\u251c\u2500\u2500 App.tsx\n\u251c\u2500\u2500 AppRouter.tsx\n\u251c\u2500\u2500 Home.tsx\n\u251c\u2500\u2500 index.tsx\n\u251c\u2500\u2500 react-app-env.ts\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Let\u2019s continue and add a new folder inside src and name it services. Inside the services folder, add a file named metamaskService.ts. Your src folder structure will look like this:<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">src\n\u251c\u2500\u2500 assets\n\u251c\u2500\u2500 components\n\u251c\u2500\u2500 services\n\t\u251c\u2500\u2500 metamaskServices.ts\n\u251c\u2500\u2500 App.tsx\n\u251c\u2500\u2500 AppRouter.tsx\n\u251c\u2500\u2500 Home.tsx\n\u251c\u2500\u2500 index.tsx\n\u251c\u2500\u2500 react-app-env.ts\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>We will store code in the services folder, which will be used to support certain services required to run our application. We added the metamaskService.ts file to hold the code necessary for our MetaMask integration with our application. This distinction helps keep our code organized and clean.<\/p>\n<p>It\u2019s important to note that to add the Hedera Testnet Network to MetaMask, we must determine if MetaMask exists in our browser. We can achieve this by using the window, aka the <a href=\"https:\/\/www.w3schools.com\/js\/js_window.asp\" target=\"_blank\">Browser Object Model<\/a> (BOM), which represents the browser&#8217;s window. This window object can access all global JavaScript objects, functions, and variables. If we are successful in accessing the Ethereum object off of the window object, then it is an indication that MetaMask is installed. If it is not successful, then we will handle that by throwing an error message to the console that reads, \u201cMetaMask is not installed! Go install the extension!\u201d<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Let&#8217;s begin!<\/p>\n<p>In our metamaskService.ts file, create a function named switchToHederaNetwork.<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">export const switchToHederaNetwork = async (ethereum: any) => {\n  try {\n    await ethereum.request({\n      method: 'wallet_switchEthereumChain',\n      params: [{ chainId: '0x128' }] \/\/ chainId must be in hexadecimal numbers\n    });\n  } catch (error: any) {\n    if (error.code === 4902) {\n      try {\n        await ethereum.request({\n          method: 'wallet_addEthereumChain',\n          params: [\n            {\n              chainName: 'Hedera Testnet',\n              chainId: '0x128',\n              nativeCurrency: {\n                name: 'HBAR',\n                symbol: 'HBAR',\n                decimals: 18\n              },\n              rpcUrls: ['https:\/\/testnet.hashio.io\/api']\n            },\n          ],\n        });\n      } catch (addError) {\n        console.error(addError);\n      }\n    }\n    console.error(error);\n  }\n}\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Let\u2019s digest this function a little further. This function starts by submitting a request to change to the Hedera Testnet Network. If it fails to connect due to the Hedera Testnet not being added to MetaMask, then we will submit a request to add a new chain.<\/p>\n<p>In the request to add a new chain, the decimal value is set to 18 even though HBAR has 8 decimals. The reason for this is because MetaMask only supports chains that have 18 decimals. The rpc url that we use is <strong><a href=\"https:\/\/testnet.hashio.io\/api\" target=\"_blank\">https:\/\/testnet.hashio.io\/api<\/a><\/strong>, which comes from <a href=\"https:\/\/swirldslabs.com\/hashio\/\" target=\"_blank\">Hashio<\/a>, the SwirldsLabs-hosted version of the JSON-RPC Relay.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">Step 4:  Connect Our dApp to MetaMask and Retrieve Wallet Address <\/h4>\n<p>We have added the code necessary to add the Hedera Testnet Network to MetaMask. Now, it&#8217;s time to focus on adding the code that will allow us to connect to MetaMask.<\/p>\n<p>In the metamaskService.ts file underneath switchToHederaNetwork(), add a new function named connectToMetamask()<em>.<\/em><em><\/em><\/p>\n<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">\/\/ returns a list of accounts\n\/\/ otherwise empty array\nexport const connectToMetamask = async () => {\n  const { ethereum } = window as any;\n  \/\/ keep track of accounts returned\n  let accounts: string[] = []\n  if (!ethereum) {\n    throw new Error(\"Metamask is not installed! Go install the extension!\");\n  }\n  \n  switchToHederaNetwork(ethereum);\n  \n  accounts = await ethereum.request({\n    method: 'eth_requestAccounts',\n  });\n  return accounts;\n}\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">If MetaMask is installed, connectToMetamask() will call switchToHederaNetwork() and submit a request to get accounts.<\/p>\n<p dir=\"ltr\">Before we do any kind of work or testing, it is important to ensure we are connected to the correct network.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">Step 5: Install Hedera Hashgraph JS SDK and Create Your Client<\/h4>\n<p>We\u2019ve written the code to connect our application to MetaMask. Now it\u2019s time to send HBAR to our MetaMask wallet.<\/p>\n<h4 class=\"color-ultraviolet\">Install Dependencies<\/h4>\n<p>Install hashgraph sdk and dotenv by running the following command in project root directory:<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">npm install --save @hashgraph\/sdk dotenv\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Create your .env file by adding a new file to the root directory of your react-app and naming it .env. Next, add the .env file to your .gitignore to prevent sharing your credentials in source control.<\/p>\n<p>Your .env file will look like this:<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">REACT_APP_MY_ACCOUNT_ID=\nREACT_APP_MY_PRIVATE_KEY=\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">In a react-app, your environment variables in your .env file must start with REACT_APP_. Set the values to a Testnet account you created through the Hedera developer portal.<\/p>\n<p dir=\"ltr\"><strong>Note<\/strong>: If you need to create a <a href=\"https:\/\/docs.hedera.com\/hedera\/getting-started\/create-and-fund-your-hedera-testnet-account\" target=\"_blank\">Hedera Testnet account<\/a>, visit <a href=\"https:\/\/portal.hedera.com\/\" target=\"_blank\">portal.hedera.com<\/a> and sign up to receive 10,000 test HBAR.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">Create Your Client<\/h4>\n<p>A client is used to communicate with the network. We create our client for the Hedera Testnet Network, which enables us to submit transactions and pay for them. Let\u2019s create our client in our Home.tsx file.<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">export default function Home() {\n  \/\/ If we weren't able to grab it, we should throw a new error\n  if (!process.env.REACT_APP_MY_ACCOUNT_ID || !process.env.REACT_APP_MY_PRIVATE_KEY) {\n    throw new Error(\"Environment variables REACT_APP_MY_ACCOUNT_ID and REACT_APP_MY_PRIVATE_KEY must be present\");\n  }\n\n  \/\/ create your client\n  const myAccountId = AccountId.fromString(process.env.REACT_APP_MY_ACCOUNT_ID);\n  const myPrivateKey = PrivateKey.fromString(process.env.REACT_APP_MY_PRIVATE_KEY);\n\n  const client = Client.forTestnet();\n  client.setOperator(myAccountId, myPrivateKey);\n\n  return (\n    <Stack \n      spacing={4}\n      sx={{alignItems: 'center'}}\n    >\n      <Typography\n        variant=\"h4\"\n        color=\"white\"\n      >\n        Let's buidl a dApp on Hedera\n      <\/Typography>\n    <\/Stack>\n  )\n}\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">Build Your TransferTransaction<\/h4>\n<p>In our services folder, add a new file and name it hederaService.ts. This file will hold the code to send HBAR to our MetaMask wallet. Inside the file, let\u2019s create a function and name it sendHbar.<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">import { AccountId, Client, PrivateKey, TransactionReceiptQuery, TransferTransaction } from \"@hashgraph\/sdk\"\n\nexport const sendHbar = async (client:Client, fromAddress: AccountId | string, toAddress: AccountId | string, amount: number, operatorPrivateKey: PrivateKey) => {\n  const transferHbarTransaction = new TransferTransaction()\n    .addHbarTransfer(fromAddress, -amount)\n    .addHbarTransfer(toAddress, amount)\n    .freezeWith(client);\n\n  const transferHbarTransactionSigned = await transferHbarTransaction.sign(operatorPrivateKey);\n  const transferHbarTransactionResponse = await transferHbarTransactionSigned.execute(client);\n\n  \/\/ Get the child receipt or child record to return the Hedera Account ID for the new account that was created\n  const transactionReceipt = await new TransactionReceiptQuery()\n    .setTransactionId(transferHbarTransactionResponse.transactionId)\n    .setIncludeChildren(true)\n    .execute(client);\n\n  const childReceipt = transactionReceipt.children[0];\n\n  if(!childReceipt || childReceipt.accountId === null) {\n    console.warn(`No account id was found in child receipt. Child Receipt: ${JSON.stringify(childReceipt, null, 4)}`);\n    return;\n  }\n\n   const newAccountId = childReceipt.accountId.toString();\n   console.log(`Account ID of the newly created account: ${newAccountId}`);\n}\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">This function builds a <a href=\"https:\/\/docs.hedera.com\/hedera\/sdks-and-apis\/sdks\/cryptocurrency\/transfer-cryptocurrency\" target=\"_blank\">TransferTransaction<\/a> that will send a specified amount of HBAR from one account to another account. In our case, our <strong>from<\/strong> account is our developer portal account and our <strong>to<\/strong> account is our MetaMask wallet address.<\/p>\n<p dir=\"ltr\">Once the transaction is built, we approve it by signing it with our private key by calling .sign(). We call .execute() on our signed transaction using the client to pay for the transaction fee.<\/p>\n<p dir=\"ltr\">When a transaction is executed, the result is of type <a href=\"https:\/\/docs.hedera.com\/hedera\/sdks-and-apis\/hedera-api\/miscellaneous\/transactionresponse\" target=\"_blank\">TransactionResponse<\/a>. Use the transaction id from the TransactionResponse in a <a href=\"https:\/\/docs.hedera.com\/hedera\/sdks-and-apis\/sdks\/transactions\/get-a-transaction-receipt\" target=\"_blank\">TransactionReceiptQuery<\/a> to get a <a href=\"https:\/\/docs.hedera.com\/hedera\/sdks-and-apis\/hedera-api\/miscellaneous\/transactionreceipt\" target=\"_blank\">TransactionReceipt<\/a>, including children transactions.<\/p>\n<p dir=\"ltr\">You can learn and read more about <a href=\"https:\/\/docs.hedera.com\/hedera\/core-concepts\/transactions-and-queries#nested-transactions\" target=\"_blank\">parent and child transactions <\/a>on our documentation site.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\"><em><strong><\/strong>Note: For security purposes, the account that is sending the tokens should be on a backend server, but for simplicity, it will be on the frontend. This is a reminder that private keys should never be exposed on the frontend, as that is the easiest way to lose control of your account.<\/em><\/h4>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">Step 6: Send HBAR to MetaMask Wallet<\/h4>\n<p>We\u2019ve written the code necessary to connect our application to MetaMask and added the Hedera Hashgaph JavaScript SDK. Now it\u2019s time to focus on connecting all the parts and sending HBAR to our MetaMask wallet.<\/p>\n<h4 class=\"color-ultraviolet\">6.1 Configure State Management<\/h4>\n<p>React has a feature called <a href=\"https:\/\/beta.reactjs.org\/learn\/passing-data-deeply-with-context\" target=\"_blank\">Context<\/a> that allows you to easily pass data between components without prop drilling. We will be leveraging this feature to save the MetaMask wallet address and enable us to access it from various components in our react-app.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Let&#8217;s edit our src\/contexts\/GlobalAppContext.tsx file, which came with our template, to look like this:<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">import { createContext, ReactNode, useState } from \"react\";\n\nconst defaultValue = {\n  metamaskAccountAddress: '',\n  setMetamaskAccountAddress: (newValue: string) => { },\n}\n\nexport const GlobalAppContext = createContext(defaultValue)\n\nexport const GlobalAppContextProvider = (props: { children: ReactNode | undefined }) => {\n  const [metamaskAccountAddress, setMetamaskAccountAddress] = useState('')\n\n  return (\n    <GlobalAppContext.Provider\n      value={{\n        metamaskAccountAddress,\n        setMetamaskAccountAddress\n      }}\n    >\n      {props.children}\n    <\/GlobalAppContext.Provider>\n  )\n}\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">6.2 Add Functionality to the NavBar Button<\/h4>\n<p>Once we\u2019ve set up our context, we use it to share application state throughout the app. We use the context by calling useContext() and passing in GlobalAppContext as an argument. This allows us to get and set the wallet address from anywhere in the app.<\/p>\n<p dir=\"ltr\">Add the following code to the top of the file src\/components\/Navbar.tsx:<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">export default function NavBar() {\n  \/\/ use the GlobalAppContext to keep track of the metamask account connection\n  const { metamaskAccountAddress, setMetamaskAccountAddress } = useContext(GlobalAppContext);\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Next, we will create a new function to connect to metamask and store the wallet address in the GlobalAppContext.<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">const retrieveWalletAddress = async () => {\n\tconst addresses = await connectToMetamask();\n\tif (addresses) {\n      \/\/ grab the first wallet address\n      setMetamaskAccountAddress(addresses[0]);\n      console.log(addresses[0]);\n    }\n  }\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Now we can add an onClick to our button and change the text to say \u2018Connect to MetaMask.\u2019 onClick will call retrieveWalletAddress.<\/p>\n<p>Your completed button code will look like this:<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\"><Button\n\tvariant='contained'\n\tcolor='secondary'\n\tsx={{\n\t\tml: 'auto'\n\t}}\n\tonClick={retrieveWalletAddress}\n>\n\t{metamaskAccountAddress === \"\" ?\n\t\t\"Connect to MetaMask\" :\n\t\t`Connected to: ${metamaskAccountAddress.substring(0, 8)}...`}\n<\/Button>\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">6.3 Add Send HBAR Button<\/h4>\n<p>In the Home.tsx file, we will call our global context to gain access to our metamaskAccountAddress state variable.<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">export default function Home() {\n  const { metamaskAccountAddress } = useContext(GlobalAppContext);\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Next, add a new button to send HBAR to our MetaMask wallet. After the closing tag &lt;\/Typography&gt;, create a material UI button and add onClick. The onClick will call sendHbar(), which is inside src\/services\/hederaService.ts.<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">onClick={() => {\n\tsendHbar(client, myAccountId, AccountId.fromEvmAddress(0, 0, metamaskAccountAddress), 7, myPrivateKey)\n}}\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>The <strong>to address<\/strong> will be the metamaskAccountAddress that we pulled out from our context using useContext(GlobalAppContext).<\/p>\n<\/p>\n<p dir=\"ltr\">Your completed button code will look like this:<\/p>\n<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\"><Stack \n  spacing={4}\n  sx={{alignItems: 'center'}}\n>\n\t<Typography\n  \t\tvariant=\"h4\"\n  \t\tcolor=\"white\"\n\t>\n  \t  Let's buidl a dApp on Hedera\n\t<\/Typography>\n\t<Button\n  \t  variant=\"contained\"\n  \t  color=\"secondary\"\n  \t  onClick={() => {\n    \tsendHbar(client, myAccountId, AccountId.fromEvmAddress(0, 0, metamaskAccountAddress), 7, myPrivateKey)\n  \t  }}\n\t>\n  \t  Transfer HBAR to MetaMask Account\n\t<\/Button>\n<\/Stack>\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>We\u2019re ready to run our application! Open a terminal In the root directory of the project and run:<\/p>\n<\/div>\n<div class=\"hedera-code-window\" style=\"background-image:url('https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg');padding:24px;border-radius:8px;margin:24px 0;\">\n<p>  <!-- Hidden image so WP All Import downloads this background image into Media Library --><br \/>\n  <img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/CodeSnippetBackground-scaled.jpg\" alt=\"code window background\" style=\"display:none;\" \/><\/p>\n<div class=\"code-window-header\">\n<div class=\"code-window-title\"><\/div>\n<div class=\"code-window-body\"><\/div>\n<\/p><\/div>\n<pre><code class=\"language-javascript\">npm run start\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Once up and running, click on the \u2018Connect to MetaMask\u2019 button in the upper right-hand corner.<\/p>\n<\/div>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/image1_2023-03-23-233319_nzot.png\" alt=\"\"\/><\/figure>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>After you click on it, the MetaMask pop-up window will open and you will be asked to switch from your previously connected network to the Hedera Testnet Network. <\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<figure><img decoding=\"async\" data-image=\"1537096\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2023\/04\/image14.png\"\/><\/figure>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Choose the account that you would like to connect to this application.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\"><em><strong>Debugging tip: If you have previously connected your account to this dApp and clicking connect is not opening the wallet, disconnect all the connected accounts and then try again<\/strong><\/em><\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<figure><img decoding=\"async\" data-image=\"1537110\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2023\/04\/image4_2023-03-24-024854_lcek.png\"\/><\/figure>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p>Once connected, send HBAR by clicking on the \u2018<em>SEND HBAR TO METAMASK<\/em>\u2019 button.\u00a0You can open your console and see that the transaction response is printed to the console.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<figure><img decoding=\"async\" data-image=\"1537153\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2023\/04\/image7.png\"\/><\/figure>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">Summary<\/h4>\n<p>Congratulations! You successfully followed the instructions to build an HBAR faucet for MetaMask. You created a Hedera react-app that integrates with MetaMask. You learned how to build a transfer transaction that sends an amount of HBAR through the Hedera Testnet Network over to a MetaMask account. This can also be applied to other applications, and I encourage all to keep on building. <\/p>\n<p>Happy Building\u00a0 \u200d\u2640\ufe0f \u200d\u2642\ufe0f<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\">Continue Learning<\/h4>\n<ul>\n<li>Create a <a href=\"https:\/\/portal.hedera.com\/register\" target=\"_blank\">Hedera Testnet account<\/a> and receive 10,000 test HBAR every 24 hours!!<\/li>\n<li>Try <a href=\"https:\/\/docs.hedera.com\/hedera\/tutorials\" target=\"_blank\">Tutorials<\/a><a href=\"https:\/\/docs.hedera.com\/guides\/resources\/tutorials\"><\/a><\/li>\n<li><a href=\"https:\/\/discord.com\/invite\/EC2GY8ueRk\"><\/a><a href=\"https:\/\/hedera.com\/discord\" target=\"_blank\">Join the Developer Discord<\/a><\/li>\n<li>Explore <a href=\"https:\/\/hedera.com\/learning\" target=\"_blank\">The Hedera Learning Center<\/a><a href=\"https:\/\/hedera.com\/learning\"><\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we&#8217;ll walk you through the process of connecting to MetaMask using create react app. We&#8217;ll also guide you through the steps to transfer HBAR to the MetaMask wallet. By the end of this tutorial, you&#8217;ll have a solid understanding of how to seamlessly integrate MetaMask into your Hedera decentralized application. So, let&#8217;s get started! &#x1f389;<\/p>\n","protected":false},"author":10,"featured_media":16859,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[1],"tags":[45],"ppma_author":[43],"class_list":["post-15756","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-technical"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create an HBAR Token Faucet for MetaMask | Hedera<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create an HBAR Token Faucet for MetaMask | Hedera\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we&#039;ll walk you through the process of connecting to MetaMask using create react app. We&#039;ll also guide you through the steps to transfer HBAR to the MetaMask wallet. By the end of this tutorial, you&#039;ll have a solid understanding of how to seamlessly integrate MetaMask into your Hedera decentralized application. So, let&#039;s get started! &#x1f389;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/\" \/>\n<meta property=\"og:site_name\" content=\"Hedera\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-04T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-03T23:36:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"670\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hedera Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/\"},\"author\":{\"name\":\"Hedera Team\",\"@id\":\"https:\/\/hedera.com\/#\/schema\/person\/2dc6146f9f20a44d3de58c834d52e9f4\"},\"headline\":\"How to Create an HBAR Token Faucet for MetaMask\",\"datePublished\":\"2023-04-04T00:00:00+00:00\",\"dateModified\":\"2026-02-03T23:36:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/\"},\"wordCount\":1619,\"publisher\":{\"@id\":\"https:\/\/hedera.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner.png\",\"keywords\":[\"technical\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/\",\"url\":\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/\",\"name\":\"How to Create an HBAR Token Faucet for MetaMask | Hedera\",\"isPartOf\":{\"@id\":\"https:\/\/hedera.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner.png\",\"datePublished\":\"2023-04-04T00:00:00+00:00\",\"dateModified\":\"2026-02-03T23:36:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#primaryimage\",\"url\":\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner.png\",\"contentUrl\":\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner.png\",\"width\":1200,\"height\":670},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hedera.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create an HBAR Token Faucet for MetaMask\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hedera.com\/#website\",\"url\":\"https:\/\/hedera.com\/\",\"name\":\"Hedera\",\"description\":\"Hello future\",\"publisher\":{\"@id\":\"https:\/\/hedera.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hedera.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hedera.com\/#organization\",\"name\":\"Hedera\",\"url\":\"https:\/\/hedera.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hedera.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/09\/hedera_logo.png\",\"contentUrl\":\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/09\/hedera_logo.png\",\"width\":500,\"height\":375,\"caption\":\"Hedera\"},\"image\":{\"@id\":\"https:\/\/hedera.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create an HBAR Token Faucet for MetaMask | Hedera","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/","og_locale":"en_US","og_type":"article","og_title":"How to Create an HBAR Token Faucet for MetaMask | Hedera","og_description":"In this tutorial, we'll walk you through the process of connecting to MetaMask using create react app. We'll also guide you through the steps to transfer HBAR to the MetaMask wallet. By the end of this tutorial, you'll have a solid understanding of how to seamlessly integrate MetaMask into your Hedera decentralized application. So, let's get started! &#x1f389;","og_url":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/","og_site_name":"Hedera","article_published_time":"2023-04-04T00:00:00+00:00","article_modified_time":"2026-02-03T23:36:50+00:00","og_image":[{"width":1200,"height":670,"url":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner.png","type":"image\/png"}],"author":"Hedera Team","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#article","isPartOf":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/"},"author":{"name":"Hedera Team","@id":"https:\/\/hedera.com\/#\/schema\/person\/2dc6146f9f20a44d3de58c834d52e9f4"},"headline":"How to Create an HBAR Token Faucet for MetaMask","datePublished":"2023-04-04T00:00:00+00:00","dateModified":"2026-02-03T23:36:50+00:00","mainEntityOfPage":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/"},"wordCount":1619,"publisher":{"@id":"https:\/\/hedera.com\/#organization"},"image":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#primaryimage"},"thumbnailUrl":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner.png","keywords":["technical"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/","url":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/","name":"How to Create an HBAR Token Faucet for MetaMask | Hedera","isPartOf":{"@id":"https:\/\/hedera.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#primaryimage"},"image":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#primaryimage"},"thumbnailUrl":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner.png","datePublished":"2023-04-04T00:00:00+00:00","dateModified":"2026-02-03T23:36:50+00:00","breadcrumb":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#primaryimage","url":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner.png","contentUrl":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner.png","width":1200,"height":670},{"@type":"BreadcrumbList","@id":"https:\/\/hedera.com\/blog\/how-to-create-an-hbar-token-faucet-for-metamask\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hedera.com\/"},{"@type":"ListItem","position":2,"name":"How to Create an HBAR Token Faucet for MetaMask"}]},{"@type":"WebSite","@id":"https:\/\/hedera.com\/#website","url":"https:\/\/hedera.com\/","name":"Hedera","description":"Hello future","publisher":{"@id":"https:\/\/hedera.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hedera.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hedera.com\/#organization","name":"Hedera","url":"https:\/\/hedera.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hedera.com\/#\/schema\/logo\/image\/","url":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/09\/hedera_logo.png","contentUrl":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/09\/hedera_logo.png","width":500,"height":375,"caption":"Hedera"},"image":{"@id":"https:\/\/hedera.com\/#\/schema\/logo\/image\/"}}]}},"featured_image_src":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner-600x400.png","featured_image_src_square":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-an-HBAR-Token-Faucet-for-MetaMask-Blog-Medium-Banner-600x600.png","author_info":{"display_name":"Hedera Team","author_link":"https:\/\/hedera.com\/blog\/author\/hedera-team\/"},"authors":[{"term_id":43,"user_id":10,"is_guest":0,"slug":"hedera-team","display_name":"Hedera Team","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/7ed01931dc9498365746508c4ca49ed0507ef65e04e0b82ffe88c50ef9242b1d?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":""}],"_links":{"self":[{"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/posts\/15756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/comments?post=15756"}],"version-history":[{"count":0,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/posts\/15756\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/media\/16859"}],"wp:attachment":[{"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/media?parent=15756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/categories?post=15756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/tags?post=15756"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/ppma_author?post=15756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}