{"id":15752,"date":"2023-05-03T05:00:00","date_gmt":"2023-05-03T05:00:00","guid":{"rendered":"https:\/\/hederav2stg.wpenginepowered.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/"},"modified":"2025-12-08T18:26:41","modified_gmt":"2025-12-08T18:26:41","slug":"how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter","status":"publish","type":"post","link":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/","title":{"rendered":"How to Create a Smart Contract App on Hedera Using Solidity, React JS, MetaMask, and Ethers JS \u2013 A Simple Counter"},"content":{"rendered":"<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">In this step-by-step tutorial, you will create a simple counter dApp on the Hedera network using Solidity, React JS, MetaMask, and Ethers JS. The goal with this example is to help you understand the fundamentals of dApp development, making it easier for you to create more complex dApps in the future. <\/p>\n<p dir=\"ltr\">Let&#8217;s dive in and start building our counter dApp on Hedera!<\/p>\n<figure><iframe allowfullscreen=\"\" frameborder=\"0\" height=\"281\" src=\"\/\/www.youtube.com\/embed\/mhqQToUEMBs\" width=\"500\"><\/iframe><\/figure>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>Try It Yourself<\/strong><\/h4>\n<ul>\n<li dir=\"ltr\">Get a <a href=\"https:\/\/portal.hedera.com\/register\" target=\"_blank\">Hedera Testnet account<\/a>:\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\">This portal acts like a faucet, giving you 10,000 test HBAR every 24 hours.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">If you\u2019re new to Hedera, check out <a href=\"https:\/\/docs.hedera.com\/guides\/getting-started\/environment-set-up\" target=\"_blank\">these steps to set up your development environment<\/a>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li dir=\"ltr\">Try the example quickly using <a href=\"https:\/\/gitpod.io\/#https:\/\/github.com\/ed-marquez\/hedera-example-metamask-counter-dapp\" target=\"_blank\">this Gitpod<\/a>:\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Continue with your GitHub account.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">In the lower right corner, click the prompt \u201cOpen Browser.\u201d<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Get the <a href=\"https:\/\/github.com\/hedera-dev\/hedera-example-metamask-counter-dapp\" target=\"_blank\">example code from GitHub<\/a>.<\/p>\n<\/li>\n<\/ul>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>Tools You Will Use<\/strong><\/h4>\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\">React JS (<a href=\"https:\/\/react.dev\/\">Documentation<\/a>)<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">MetaMask (<a href=\"https:\/\/docs.metamask.io\/wallet\/\">Documentation<\/a>)<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Ethers JS (<a href=\"https:\/\/docs.ethers.org\/v6\/\">Documentation<\/a>)<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Solidity (<a href=\"https:\/\/docs.soliditylang.org\/en\/v0.8.19\/\">Documentation<\/a>)<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Hedera JSON-RPC Relay (<a href=\"https:\/\/swirldslabs.com\/hashio\/\">Hashio<\/a>)<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Mirror node REST API (<a href=\"https:\/\/hedera.com\/blog\/how-to-look-up-transaction-history-on-hedera-using-mirror-nodes-back-to-the-basics\">Learn More<\/a>)<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Mirror node explorer (<a href=\"https:\/\/hashscan.io\">HashScan<\/a>)<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Axios (<a href=\"https:\/\/www.npmjs.com\/package\/axios\">npm package<\/a>)<\/p>\n<\/li>\n<\/ul>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>Goals<\/strong><\/h4>\n<ol>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Understand the fundamentals of integrating an ethers provider for communication between a React JS application, MetaMask, and a smart contract on Hedera.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Learn how to deploy and interact with a Solidity smart contract on Hedera using Ethers JS.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Use the Hedera mirror nodes to obtain on-chain information and query transaction data.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">Explore the Hedera network and smart contract transactions using HashScan, a Hedera Network Explorer.<\/p>\n<\/li>\n<\/ol>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>Application Architecture at a High Level<\/strong><\/h4>\n<p dir=\"ltr\">The counter dApp uses a simple yet robust architecture that ensures seamless interactions between various components.<\/p>\n<\/div>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/1-diagram-v2.png\" alt=\"\"\/><\/figure>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">Here&#8217;s a brief explanation of each part and its role in the overall architecture:<\/p>\n<ol>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Browser<\/strong>: The user&#8217;s web browser serves as the environment in which the dApp runs. It provides the interface for users to interact with the dApp and MetaMask.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Signer (MetaMask wallet)<\/strong>: MetaMask is a browser extension that acts as a wallet and a signer for transactions created by the dApp. It securely stores the user&#8217;s private keys, manages accounts, and signs transactions when required.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>React JS Frontend<\/strong>: The dApp\u2019s user interface (UI) is built with React components, which handle user interactions and display relevant information. It communicates with MetaMask and the JSON-RPC Provider to facilitate transactions and fetch data.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>JSON-RPC Provider (Hashio)<\/strong>: The JSON-RPC Provider, Hashio in this case, connects the dApp to the Hedera network. It provides an API for sending transactions and querying data from the network.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Hedera Network (Consensus and Mirror Nodes)<\/strong>: The Hedera network consists of consensus nodes that process and process transactions, and mirror nodes that store transaction data. Note that the Hedera network has the Consensus Service, the Token Service, and the Smart Contract Service \u2013 the JSON-RPC interface only exposes the Token and Smart Contract Services.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Mirror Node Queries<\/strong>: The dApp communicates with mirror nodes to obtain on-chain information and query transaction data. This allows the dApp to display the latest state of the smart contract and other relevant information to the user.<\/p>\n<\/li>\n<\/ol>\n<p dir=\"ltr\">By understanding the architecture and connections between these components, you can appreciate the flow of data and interactions that make the counter dApp function smoothly on the Hedera network.<\/p>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>1. Cloning the Example Repository<\/strong><\/h4>\n<p dir=\"ltr\">To get started with the project, the first thing you will do is clone an example repository. The repository is specifically tailored for our counter dApp. <\/p>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\">Clone the Repo<\/h4>\n<p dir=\"ltr\">To clone the repository, open your terminal and navigate to the directory where you want to place the project. Then, run the following command:<\/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\">\ufeff\ufeff\ufeffgit clone \ufeffhttps:\/\/github.com\/ed-marquez\/hedera-example-metamask-counter-dapp.git\ufeff\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\" dir=\"ltr\">Navigate to Directory<\/h4>\n<p>This command clones the <strong>hedera-example-metamask-counter-dapp<\/strong> repository into your desired directory. Once the cloning process is complete, navigate to the project folder using:<\/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\">cd hedera-example-metamask-counter-dapp\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">The folder structure should look something like the following.<\/p>\n<\/div>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/2-folder-structure.png\" alt=\"\"\/><\/figure>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\" dir=\"ltr\">Install Project Dependencies and Start the Application<\/h4>\n<p>After cloning the repo and navigating to the right folder, be sure to install all project dependencies. Dependencies are listed in the <strong>package.json<\/strong> file, so you can just use:<\/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\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">To start the application, use:<\/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 start\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>2. Getting Familiar with the dApp Structure and UI<\/strong><\/h4>\n<p dir=\"ltr\">Now that you have cloned the example repository, let&#8217;s explore the project files and functions, and get a feel for how the counter dApp looks and functions! Familiarizing yourself with the project&#8217;s organization and UI elements will make it easier to follow along as you dive into the technical aspects of building the dApp. <\/p>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>Overall dApp Structure<\/strong><\/h4>\n<p dir=\"ltr\">The example application has three buttons, which complete a different task when pressed.<\/p>\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\">The first button connects the application to MetaMask.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">The second button deploys the <strong>Counter<\/strong> smart contract.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">The third button executes a contract function to increase the count.<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/3-dapp.png\" alt=\"\"\/><\/figure>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">Now let\u2019s look at the <strong>App.jsx<\/strong> file (inside the <strong>src<\/strong> folder) behind this UI. You can think of the code as three main sections (in addition to the imports): <\/p>\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\">The state management is the part that uses the <a href=\"https:\/\/react.dev\/reference\/react\/useState\" target=\"_blank\"><strong>useState() <\/strong>React Hook<\/a>.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">The functions that are executed with each button press; we\u2019ll look at these in the next few sections.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\">The <strong>return<\/strong> statement groups the elements we see on the page.<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/4-dapp-code.png\" alt=\"\"\/><\/figure>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">The <strong>useState()<\/strong> hook helps store information about the state of the application. In this case, we store information like the wallet data, the account that is connected, the network, and the contract that we\u2019re interacting with, along with text and links that are presented in the UI. Remember that the first output of <strong>useState()<\/strong> is the variable of interest (e.g., <strong><em>walletData<\/em><\/strong>) and the second output is a function to set a new value for that variable (e.g., <strong><em>setWalletData<\/em><\/strong>).<\/p>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>Understanding the React Components<\/strong><\/h4>\n<p dir=\"ltr\">The buttons and text in the UI are part of a group of React components (<strong>MyGroup<\/strong> in the <strong>return<\/strong> statement). By grouping components, we take advantage of React&#8217;s composability for better organization and readability. Notice that <strong>MyGroup<\/strong> is reused three times and properties are customized for each instance (see <a href=\"https:\/\/react.dev\/learn\/passing-props-to-a-component\">React props<\/a>) \u2013 like the function that each button executes, the label of the button, the text above the button, and the link for that text.<\/p>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\">MyGroup<\/h4>\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 React from \"react\";\nimport MyButton from \".\/MyButton.jsx\";\nimport MyText from \".\/MyText.jsx\";\n\n\nfunction MyGroup(props) {\n    return (\n        <div>\n            <MyText text={props.text} link={props.link} \/>\n            <MyButton fcn={props.fcn} buttonLabel={props.buttonLabel} \/>\n        <\/div>\n    );\n}\n\nexport default MyGroup;\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\"><strong>MyGroup<\/strong> is a functional component that combines a text element with a button and receives props as an argument. These properties include:<\/p>\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>text<\/strong>: The text to be displayed by the <strong>MyText<\/strong> component.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>link<\/strong>: An optional link to be associated with the <strong>MyText<\/strong> component. If provided, the text will become clickable and redirect to the specified link.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>fcn<\/strong>: A function to be executed when the button within the <strong>MyButton<\/strong> component is clicked.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>buttonLabel<\/strong>: The label for the button in the <strong>MyButton<\/strong> component.<\/p>\n<\/li>\n<\/ul>\n<p>Inside the component, we return a div element that contains both the <strong>MyText<\/strong> and <strong>MyButton<\/strong> components. We pass the corresponding props down to these child components, allowing them to render the text, link, button label, and assign the click event handler. Finally, by exporting the <strong>MyGroup<\/strong>, 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.<\/p>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\">MyButton<\/h4>\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 React from \"react\";\n\nfunction MyButton(props) {\n    return (\n        <div>\n            <button onClick={props.fcn} className=\"cta-button\">\n                {props.buttonLabel}\n            <\/button>\n        <\/div>\n    );\n}\nexport default MyButton;\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\"><strong>MyButton<\/strong> accepts the following props:<\/p>\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>fcn<\/strong>: A function to be executed when the button is clicked.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>buttonLabel<\/strong>: The label for the button, which will be displayed as the button&#8217;s text.<\/p>\n<\/li>\n<\/ul>\n<p dir=\"ltr\">Inside the component, we return a div element that wraps a button element. The button element is assigned the <strong>onClick<\/strong> event handler with the function <strong>props.fcn<\/strong>. This allows us to execute a specified function when the button is clicked. The <strong>className<\/strong> attribute is set to <strong>&#8220;cta-button,&#8221;<\/strong> which is used for styling the button with CSS. Finally, we display the <strong>props.buttonLabel<\/strong> as the button&#8217;s text.<\/p>\n<p dir=\"ltr\">Lastly, by exporting <strong>MyButton<\/strong>, 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.<\/p>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\">MyText<\/h4>\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 React from \"react\";\n\nfunction MyText(props) {\n    if (props.link !== \"\") {\n        return (\n            <div>\n                <a href={props.link} target={\"_blank\"} rel=\"noreferrer\">\n                    <p className=\"sub-text\">{props.text}<\/p>\n                <\/a>\n            <\/div>\n        );\n    } else {\n        return (\n            <div>\n                <p className=\"sub-text\">{props.text}<\/p>\n            <\/div>\n        );\n    }\n}\n\nexport default MyText;\n<\/code><\/pre>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\"><strong>MyText<\/strong> displays text and optionally wraps it in a link. It takes props as an argument, including:<\/p>\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>text<\/strong>: The text to be displayed.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>link<\/strong>: An optional link to be associated with the text.<\/p>\n<\/li>\n<\/ul>\n<p dir=\"ltr\">Inside the component, we use a conditional statement to check if <strong>props.link<\/strong> is provided. If it is, we wrap the text within an <strong>&lt;a&gt;<\/strong> element, making it clickable and redirecting to the specified link. If no link is provided, we simply display the text within a <strong>&lt;p&gt;<\/strong> element. Both elements have the <strong>className<\/strong> <strong>&#8220;sub-text&#8221;<\/strong> for consistent styling. Finally, we export the <strong>MyText<\/strong> component so it can be used in other parts of the application, allowing for easy creation of text elements with optional links.<\/p>\n<p>You can find the JSX files for the <strong>MyGroup<\/strong>, <strong>MyButton<\/strong>, and <strong>MyText<\/strong> functional components under the folder <strong>src <strong>-&gt;<\/strong>\u00a0components.<\/strong><\/p>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>3. Connecting MetaMask to the dApp: Switch to Hedera Testnet and Pair Account<\/strong><\/h4>\n<p dir=\"ltr\">Now that we are familiar with the structure and UI of our application, it\u2019s time to connect MetaMask to our dApp, switch to the Hedera Testnet, and pair an account. <\/p>\n<p>In <strong>App.jsx<\/strong>, we use the <strong>connectWallet()<\/strong> function (code tab 1), which in turn calls the <strong>walletConnectFcn()<\/strong> function (code tab 2) that is imported from the file <strong>src -&gt; components <strong>-&gt;<\/strong> hedera <strong>-&gt;<\/strong> walletConnect.js<\/strong>.<strong><br \/><\/strong><\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>Connecting MetaMask<\/strong><\/h4>\n<p dir=\"ltr\">When the \u201cConnect Wallet\u201d button is pressed in the dApp, the <strong>connectWallet()<\/strong> 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 <strong>walletConnectFcn()<\/strong> is called to establish a connection.<\/p>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>Switching to Hedera Testnet and Pairing Account<\/strong><\/h4>\n<p dir=\"ltr\">The <strong>walletConnectFcn()<\/strong> function performs the following steps:<\/p>\n<ol>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Create an ethers provider<\/strong>: It initializes an ethers provider using the <strong>Web3Provider<\/strong> from the <a href=\"https:\/\/docs.ethers.org\/v6\/\" target=\"_blank\"><strong>ethers<\/strong><\/a> library, which connects to MetaMask. An Ethers provider serves as a bridge between your application and the Hedera network.  It allows you to send transactions, query data, and perform various interactions with smart contracts. <\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Switch to Hedera Testnet<\/strong>: It determines the <strong>chainId<\/strong> based on the chosen Hedera network (testnet, previewnet, or mainnet) and sends a <strong>wallet_addEthereumChain<\/strong> 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 JSON-RPC provider, this example uses <a href=\"https:\/\/swirldslabs.com\/hashio\/\" target=\"_blank\">Hashio<\/a>, which is a <a href=\"https:\/\/github.com\/hashgraph\/hedera-json-rpc-relay\" target=\"_blank\">JSON-RPC relay<\/a> community service provided by Swirlds Labs (note that anyone can host their own relay and\/or use other commercial providers, like <a href=\"https:\/\/www.arkhia.io\/features\/#api-services\" target=\"_blank\">Arkhia<\/a>). For network explorer, <a href=\"https:\/\/hashscan.io\/\" target=\"_blank\">HashScan<\/a> is used. (Keep in mind that HashScan supports <a href=\"https:\/\/eips.ethereum.org\/EIPS\/eip-3091\" target=\"_blank\">EIP-3091<\/a>, which makes it easy to explore historical information about things like blocks, transactions, accounts, contracts, and tokens from wallets like MetaMask.) <\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Connect and Pair Account<\/strong>: The function sends an <strong>eth_requestAccounts<\/strong> request to MetaMask to access the user&#8217;s Hedera account. Upon successful connection, the selected account is returned.<\/p>\n<\/li>\n<\/ol>\n<p dir=\"ltr\">Finally, the <strong>connectWallet()<\/strong> function updates the React state with the connected testnet account, network, and other wallet data, allowing the dApp to display the connected testnet account information and interact with the smart contract.<\/p>\n<p dir=\"ltr\">This is what you would see when clicking the \u201cConnect Wallet\u201d button for the first time.<\/p>\n<\/div>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/5p1-metamask-confirmations-scaled.png\" alt=\"\"\/><\/figure>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">Once the network switching and the account pairing are complete, you should see something like the following in the dApp UI and in HashScan (if you click on the hyperlinked text showing the account address).<\/p>\n<\/div>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/5p2-ui-updates.png\" alt=\"\"\/><\/figure>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/5p3-hashscan.png\" alt=\"\"\/><\/figure>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>4. Deploying the Smart Contract \u2013 The Counter<\/strong><\/h4>\n<p dir=\"ltr\">Now it\u2019s time to deploy the <strong>Counter<\/strong> smart contract on the Hedera network using the <strong>contractDeploy()<\/strong> function (code tab 1) in <strong>App.jsx<\/strong> and the <strong>contractDeployFcn()<\/strong> function (code tab 2) in <strong>src -&gt; components -&gt; hedera -&gt; contractDeploy.js<\/strong>.<\/p>\n<p>The <strong>Counter<\/strong> smart contract in Solidity (code tab 3) is simple, with a <strong>count<\/strong> variable and an <strong>increment()<\/strong> function that increases the count and emits an event. Events in Solidity provide a way to log things and actions that take place in your smart contracts. When an event is emitted, it stores the arguments in a special on-chain data structure called the transaction log.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">When the &#8220;Deploy Contract&#8221; button is pressed in the dApp, the <strong>contractDeploy()<\/strong> function is executed. This function first checks if a wallet is connected. If not, it prompts the user to connect one. If a wallet is connected, the <strong>contractDeployFcn()<\/strong> function is called with <strong>walletData<\/strong> as its argument.<\/p>\n<p dir=\"ltr\">The <strong>contractDeployFcn()<\/strong> function performs the following steps:<\/p>\n<ol>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Get ethers provider and signer<\/strong>: It extracts the ethers <strong>provider<\/strong> and <strong>signer<\/strong> from the <strong>walletData<\/strong>. A signer is a crucial component in blockchain-based applications, responsible for signing transactions and messages using a private key. <\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Deploy the smart contract<\/strong>: It initializes a <strong>ContractFactory<\/strong> with the contract&#8217;s ABI and bytecode, and the signer. It then deploys the contract with a specified gas limit. In Ethers.js, a <strong>ContractFactory<\/strong> is an object that helps you deploy a new smart contract, whereas the <strong>Contract<\/strong> class is used to interact with already deployed contracts. Once the deployment transaction is confirmed, the contract address is extracted.<\/p>\n<\/li>\n<\/ol>\n<p dir=\"ltr\">Finally, the <strong>contractDeploy()<\/strong> function updates the React state with the contract address, allowing the dApp to display the contract&#8217;s deployment status and interact with the contract.<\/p>\n<p dir=\"ltr\">Below are a few images of what you would see when clicking the \u201cDeploy Contract\u201d button for the first time (remember to click on the hyperlinked text showing the contract address to view information on HashScan).<\/p>\n<\/div>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/6p1-metamask-confirmation.png\" alt=\"\"\/><\/figure>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/6p2-ui-updates.png\" alt=\"\"\/><\/figure>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/6p3-hashscan-v2-scaled.png\" alt=\"\"\/><\/figure>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>5. Interacting with the Smart Contract \u2013 Increase the Count Value<\/strong><\/h4>\n<p>Finally, let\u2019s execute the contract function to increase the <strong>count<\/strong> by 1. For this part, we\u2019ll focus on the <strong>contractExecute()<\/strong> function (code tab 1) in <strong>App.jsx<\/strong> and the <strong>contractExecuteFcn()<\/strong> function (code tab 2) in <strong>src -&gt; components\u00a0<strong>-&gt;<\/strong> hedera\u00a0<strong>-&gt;<\/strong> contractExecute.js<\/strong>.<\/p>\n<\/div>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">When the &#8220;Execute Contract (+1)&#8221; button is pressed in the dApp, the <strong>contractExecute()<\/strong> function is executed. This function first checks if a contract is deployed. If not, it prompts the user to deploy one. If a Counter contract is deployed, the <strong>contractExecuteFcn()<\/strong> function is called with <strong>walletData<\/strong> and <strong>contractAddress<\/strong> as its arguments.<\/p>\n<p dir=\"ltr\">The <strong>contractExecuteFcn()<\/strong> function performs the following steps:<\/p>\n<ol>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Get ethers provider and signer<\/strong>: It extracts the ethers <strong>provider<\/strong> and <strong>signer<\/strong> from the <strong>walletData.<\/strong><\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Check the initial count: <\/strong>The function <strong>getCountState()<\/strong> uses the Hedera Mirror Node REST API and Axios to check the state of the count variable. The first time the contract is executed, that initial count should be zero.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Execute the contract function to increase count:<\/strong> Ethers JS is used along with the <strong>contractAddress<\/strong>, <strong>abi<\/strong>, and <strong>signer<\/strong> to execute the <strong>increment()<\/strong> function of the contract. <\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Check the final count:<\/strong> The function <strong>getCountState()<\/strong> is used again to check the value of <strong>count<\/strong> after executing the contract. Note that there is a 5-second delay to allow for the propagation of information from the consensus nodes to the mirror nodes. The transaction hash and the final value of count are returned.<\/p>\n<\/li>\n<\/ol>\n<p dir=\"ltr\">Finally, the <strong>contractExecute()<\/strong> function updates the React UI with the new final count, the transaction hash, and the relevant HashScan hyperlink.<\/p>\n<p dir=\"ltr\">Below are a few images of what you would see after clicking the \u201cExecute Contract\u201d button (remember to click on the hyperlinked text showing the final count and transaction hash to view information on HashScan).<\/p>\n<\/div>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/7p1-metamask-confirmation.png\" alt=\"\"\/><\/figure>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/7p2-ui-updates.png\" alt=\"\"\/><\/figure>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/7p3-ui-inspector.png\" alt=\"\"\/><\/figure>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<p dir=\"ltr\">As a last note, you can also see the console messages from different functions and files in the browser inspector.<\/p>\n<\/div>\n<figure class=\"blog-image mb-40\"><img decoding=\"async\" src=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/7p4-hashscan.png\" alt=\"\"\/><\/figure>\n<div class=\"body-text BodyCopy mb-40 style-1\">\n<h4 class=\"color-ultraviolet\" dir=\"ltr\"><strong>Summary<\/strong><\/h4>\n<p dir=\"ltr\">In this article, you went through the process of creating a counter dApp on the Hedera network using Solidity, React JS, MetaMask, and Ethers JS. The article covered these key concepts:<\/p>\n<ol>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Cloning the example repository<\/strong>: You started by cloning the example repository that contains the necessary code and files for building the counter dApp<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Understanding the dApp structure and UI<\/strong>: You delved into the custom React components used in the project, including MyGroup, MyButton, and MyText, and saw their roles and reusability<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Connecting MetaMask to the dApp<\/strong>: You connected MetaMask to the dApp, switched to the Hedera Testnet, and paired an account using the <strong>connectWallet()<\/strong> and <strong>walletConnectFcn()<\/strong> functions<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Deploying the smart contract<\/strong>: You deployed the Counter smart contract to the Hedera network using the <strong>contractDeploy()<\/strong> and <strong>contractDeployFcn()<\/strong> functions<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Interacting with the smart contract: <\/strong>You increased the count state variable by executing the <strong>increment()<\/strong> contract function <\/p>\n<\/li>\n<\/ol>\n<p dir=\"ltr\">By following this tutorial, you&#8217;ve learned how to integrate a React JS application with MetaMask, deploy and interact with a Solidity smart contract on the Hedera network, and gain insights into the structure and components of a dApp. Additionally, you&#8217;ve explored using Ethers JS for smart contract interaction, obtained on-chain information from Hedera mirror nodes, and viewed transaction details on HashScan (a Hedera Network Explorer).<\/p>\n<h4 class=\"color-ultraviolet\" dir=\"ltr\">Continue Learning<\/h4>\n<ul>\n<li>\n<p dir=\"ltr\"><a href=\"https:\/\/portal.hedera.com\/register\" target=\"_blank\">Open a Testnet Account<\/a><\/p>\n<\/li>\n<li>\n<p dir=\"ltr\"><a href=\"https:\/\/docs.hedera.com\/hedera\/tutorials\" target=\"_blank\">Try Examples<\/a> and <a href=\"https:\/\/docs.hedera.com\/hedera\/tutorials\/more-tutorials\" target=\"_blank\">Tutorials<\/a><\/p>\n<\/li>\n<li>\n<p dir=\"ltr\"><a href=\"http:\/\/hedera.com\/discord\" target=\"_blank\">Join the Developer Discord<\/a><\/p>\n<\/li>\n<li>\n<p dir=\"ltr\"><a href=\"https:\/\/hedera.com\/learning\" target=\"_blank\">Read the Learning Center<\/a><\/p>\n<\/li>\n<li>\n<p dir=\"ltr\"><a href=\"https:\/\/hedera.com\/blog\" target=\"_blank\">Read the Hedera Blog<\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this step-by-step tutorial, you will create a simple counter dApp on the Hedera network using Solidity, React JS, MetaMask, and Ethers JS. The goal with this example is to help you understand the fundamentals of dApp development, making it easier for you to create more complex dApps in the future. <\/p>\n","protected":false},"author":10,"featured_media":16857,"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-15752","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 a Smart Contract App on Hedera Using Solidity, React JS, MetaMask, and Ethers JS \u2013 A Simple Counter | 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-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Smart Contract App on Hedera Using Solidity, React JS, MetaMask, and Ethers JS \u2013 A Simple Counter | Hedera\" \/>\n<meta property=\"og:description\" content=\"In this step-by-step tutorial, you will create a simple counter dApp on the Hedera network using Solidity, React JS, MetaMask, and Ethers JS. The goal with this example is to help you understand the fundamentals of dApp development, making it easier for you to create more complex dApps in the future.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/\" \/>\n<meta property=\"og:site_name\" content=\"Hedera\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-03T05:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-08T18:26:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-a-Smart-Contract-App-on-Hedera-Blog-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-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/\"},\"author\":{\"name\":\"Hedera Team\",\"@id\":\"https:\/\/hedera.com\/#\/schema\/person\/2dc6146f9f20a44d3de58c834d52e9f4\"},\"headline\":\"How to Create a Smart Contract App on Hedera Using Solidity, React JS, MetaMask, and Ethers JS \u2013 A Simple Counter\",\"datePublished\":\"2023-05-03T05:00:00+00:00\",\"dateModified\":\"2025-12-08T18:26:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/\"},\"wordCount\":2758,\"publisher\":{\"@id\":\"https:\/\/hedera.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-a-Smart-Contract-App-on-Hedera-Blog-Banner.png\",\"keywords\":[\"technical\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/\",\"url\":\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/\",\"name\":\"How to Create a Smart Contract App on Hedera Using Solidity, React JS, MetaMask, and Ethers JS \u2013 A Simple Counter | Hedera\",\"isPartOf\":{\"@id\":\"https:\/\/hedera.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-a-Smart-Contract-App-on-Hedera-Blog-Banner.png\",\"datePublished\":\"2023-05-03T05:00:00+00:00\",\"dateModified\":\"2025-12-08T18:26:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#primaryimage\",\"url\":\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-a-Smart-Contract-App-on-Hedera-Blog-Banner.png\",\"contentUrl\":\"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-a-Smart-Contract-App-on-Hedera-Blog-Banner.png\",\"width\":1200,\"height\":670},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hedera.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Smart Contract App on Hedera Using Solidity, React JS, MetaMask, and Ethers JS \u2013 A Simple Counter\"}]},{\"@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 a Smart Contract App on Hedera Using Solidity, React JS, MetaMask, and Ethers JS \u2013 A Simple Counter | 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-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Smart Contract App on Hedera Using Solidity, React JS, MetaMask, and Ethers JS \u2013 A Simple Counter | Hedera","og_description":"In this step-by-step tutorial, you will create a simple counter dApp on the Hedera network using Solidity, React JS, MetaMask, and Ethers JS. The goal with this example is to help you understand the fundamentals of dApp development, making it easier for you to create more complex dApps in the future.","og_url":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/","og_site_name":"Hedera","article_published_time":"2023-05-03T05:00:00+00:00","article_modified_time":"2025-12-08T18:26:41+00:00","og_image":[{"width":1200,"height":670,"url":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-a-Smart-Contract-App-on-Hedera-Blog-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-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#article","isPartOf":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/"},"author":{"name":"Hedera Team","@id":"https:\/\/hedera.com\/#\/schema\/person\/2dc6146f9f20a44d3de58c834d52e9f4"},"headline":"How to Create a Smart Contract App on Hedera Using Solidity, React JS, MetaMask, and Ethers JS \u2013 A Simple Counter","datePublished":"2023-05-03T05:00:00+00:00","dateModified":"2025-12-08T18:26:41+00:00","mainEntityOfPage":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/"},"wordCount":2758,"publisher":{"@id":"https:\/\/hedera.com\/#organization"},"image":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#primaryimage"},"thumbnailUrl":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-a-Smart-Contract-App-on-Hedera-Blog-Banner.png","keywords":["technical"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/","url":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/","name":"How to Create a Smart Contract App on Hedera Using Solidity, React JS, MetaMask, and Ethers JS \u2013 A Simple Counter | Hedera","isPartOf":{"@id":"https:\/\/hedera.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#primaryimage"},"image":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#primaryimage"},"thumbnailUrl":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-a-Smart-Contract-App-on-Hedera-Blog-Banner.png","datePublished":"2023-05-03T05:00:00+00:00","dateModified":"2025-12-08T18:26:41+00:00","breadcrumb":{"@id":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#primaryimage","url":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-a-Smart-Contract-App-on-Hedera-Blog-Banner.png","contentUrl":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-a-Smart-Contract-App-on-Hedera-Blog-Banner.png","width":1200,"height":670},{"@type":"BreadcrumbList","@id":"https:\/\/hedera.com\/blog\/how-to-create-a-smart-contract-app-on-hedera-using-solidity-react-js-metamask-and-ethers-js-a-simple-counter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hedera.com\/"},{"@type":"ListItem","position":2,"name":"How to Create a Smart Contract App on Hedera Using Solidity, React JS, MetaMask, and Ethers JS \u2013 A Simple Counter"}]},{"@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-a-Smart-Contract-App-on-Hedera-Blog-Banner-600x400.png","featured_image_src_square":"https:\/\/hedera.com\/wp-content\/uploads\/2025\/12\/How-to-Create-a-Smart-Contract-App-on-Hedera-Blog-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\/15752","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=15752"}],"version-history":[{"count":0,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/posts\/15752\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/media\/16857"}],"wp:attachment":[{"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/media?parent=15752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/categories?post=15752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/tags?post=15752"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/hedera.com\/wp-json\/wp\/v2\/ppma_author?post=15752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}