{props.text}
element. Both elements have the className "sub-text" for consistent styling. Finally, we export the MyText component so it can be used in other parts of the application, allowing for easy creation of text elements with optional links. You can find the JSX files for the MyGroup, MyButton, and MyText functional components under the folder src -> components. 3. Connecting MetaMask to the dApp: Switch to Hedera Testnet and Pair Account Now that we are familiar with the structure and UI of our application, it’s time to connect MetaMask to our dApp, switch to the Hedera Testnet, and pair an account. In App.jsx, we use the connectWallet() function (code tab 1), which in turn calls the walletConnectFcn() function (code tab 2) that is imported from the file src -> components -> hedera -> walletConnect.js. connectWallet connectWallet walletConnectFcn async function connectWallet() { if (account !== undefined) { setConnectTextSt(`Account ${account} already connected `); } else { const wData = await walletConnectFcn(); let newAccount = wData[0]; let newNetwork = wData[2]; if (newAccount !== undefined) { setConnectTextSt(`Account ${newAccount} connected `); setConnectLinkSt(`https://hashscan.io/${newNetwork}/account/${newAccount}`); setWalletData(wData); setAccount(newAccount); setNetwork(newNetwork); setContractTextSt(); } } } import { ethers } from "ethers"; const network = "testnet"; async function walletConnectFcn() { console.log(`\n=======================================`); // ETHERS PROVIDER const provider = new ethers.providers.Web3Provider(window.ethereum, "any"); // SWITCH TO HEDERA TEST NETWORK console.log(`- Switching network to the Hedera ${network}...`); let chainId; if (network === "testnet") { chainId = "0x128"; } else if (network === "previewnet") { chainId = "0x129"; } else { chainId = "0x127"; } await window.ethereum.request({ method: "wallet_addEthereumChain", params: [ { chainName: `Hedera ${network}`, chainId: chainId, nativeCurrency: { name: "HBAR", symbol: "ℏℏ", decimals: 18 }, rpcUrls: [`https://${network}.hashio.io/api`], blockExplorerUrls: [`https://hashscan.io/${network}/`], }, ], }); console.log("- Switched "); // // CONNECT TO ACCOUNT console.log("- Connecting wallet..."); let selectedAccount; await provider .send("eth_requestAccounts", []) .then((accounts) => { selectedAccount = accounts[0]; console.log(`- Selected account: ${selectedAccount} `); }) .catch((connectError) => { console.log(`- ${connectError.message.toString()}`); return; }); return [selectedAccount, provider, network]; } export default walletConnectFcn; Connecting MetaMask When the “Connect Wallet” button is pressed in the dApp, the connectWallet() function is executed. This function checks if an account is already connected. If it is, a message displaying the connected account is shown. If no account is connected, the walletConnectFcn() is called to establish a connection. Switching to Hedera Testnet and Pairing Account The walletConnectFcn() function performs the following steps: Create an ethers provider: It initializes an ethers provider using the Web3Provider from the ethers library, which connects to MetaMask. An Ethers provider serves as a bridge between your application and the Hedera network. It allows you to send transactions, query data, and perform various interactions with smart contracts. Switch to Hedera Testnet: It determines the chainId based on the chosen Hedera network (testnet, previewnet, or mainnet) and sends a wallet_addEthereumChain request to MetaMask to add the corresponding Hedera network. A chain ID is a unique identifier that represents a blockchain network. This is an important step that includes setting the native currency (HBAR) and providing the JSON-RPC and network explorer URLs. For JSON-RPC provider, this example uses Hashio, which is a JSON-RPC relay community service provided by Swirlds Labs (note that anyone can host their own relay and/or use other commercial providers, like Arkhia). For network explorer, HashScan is used. (Keep in mind that HashScan supports EIP-3091, which makes it easy to explore historical information about things like blocks, transactions, accounts, contracts, and tokens from wallets like MetaMask.) Connect and Pair Account: The function sends an eth_requestAccounts request to MetaMask to access the user's Hedera account. Upon successful connection, the selected account is returned. Finally, the connectWallet() function 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. This is what you would see when clicking the “Connect Wallet” button for the first time. 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). 4. Deploying the Smart Contract – The Counter Now it’s time to deploy the Counter smart contract on the Hedera network using the contractDeploy() function (code tab 1) in App.jsx and the contractDeployFcn() function (code tab 2) in src -> components -> hedera -> contractDeploy.js. The Counter smart contract in Solidity (code tab 3) is simple, with a count variable and an increment() 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. contractDeploy contractDeploy contractDeployFcn Counter.sol async function contractDeploy() { if (account === undefined) { setContractTextSt(" Connect a wallet first! "); } else { const cAddress = await contractDeployFcn(walletData); if (cAddress === undefined) { } else { setContractAddress(cAddress); setContractTextSt(`Contract ${cAddress} deployed `); setExecuteTextSt(``); setContractLinkSt(`https://hashscan.io/${network}/address/${cAddress}`); } } } import abi from "../../contracts/abi.js"; import bytecode from "../../contracts/bytecode.js"; import { ContractFactory } from "ethers"; async function contractDeployFcn(walletData) { console.log(`\n=======================================`); console.log(`- Deploying smart contract on Hedera...`); // ETHERS PROVIDER AND SIGNER const provider = walletData[1]; const signer = provider.getSigner(); // DEPLOY SMART CONTRACT let contractAddress; try { const gasLimit = 4000000; const myContract = new ContractFactory(abi, bytecode, signer); const contractDeployTx = await myContract.deploy({ gasLimit: gasLimit }); const contractDeployRx = await contractDeployTx.deployTransaction.wait(); contractAddress = contractDeployRx.contractAddress; console.log(`- Contract deployed to address: \n${contractAddress} `); } catch (deployError) { console.log(`- ${deployError.message.toString()}`); } return contractAddress; } export default contractDeployFcn; // SPDX-License-Identifier: MIT pragma solidity >=0.4.22 <0.9.0; contract Counter { uint public count; event CountIncrement(address indexed _from, uint count); function increment() external { count += 1; emit CountIncrement(msg.sender, count); } } When the "Deploy Contract" button is pressed in the dApp, the contractDeploy() 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 contractDeployFcn() function is called with walletData as its argument. The contractDeployFcn() function performs the following steps: Get ethers provider and signer: It extracts the ethers provider and signer from the walletData. A signer is a crucial component in blockchain-based applications, responsible for signing transactions and messages using a private key. Deploy the smart contract: It initializes a ContractFactory with the contract's ABI and bytecode, and the signer. It then deploys the contract with a specified gas limit. In Ethers.js, a ContractFactory is an object that helps you deploy a new smart contract, whereas the Contract class is used to interact with already deployed contracts. Once the deployment transaction is confirmed, the contract address is extracted. Finally, the contractDeploy() function updates the React state with the contract address, allowing the dApp to display the contract's deployment status and interact with the contract. Below are a few images of what you would see when clicking the “Deploy Contract” button for the first time (remember to click on the hyperlinked text showing the contract address to view information on HashScan). 5. Interacting with the Smart Contract – Increase the Count Value Finally, let’s execute the contract function to increase the count by 1. For this part, we’ll focus on the contractExecute() function (code tab 1) in App.jsx and the contractExecuteFcn() function (code tab 2) in src -> components -> hedera -> contractExecute.js. contractExecute contractExecute contractExecuteFcn async function contractExecute() { if (contractAddress === undefined) { setExecuteTextSt("Deploy a contract first! "); } else { const [txHash, finalCount] = await contractExecuteFcn(walletData, contractAddress); if (txHash === undefined || finalCount === undefined) { } else { setExecuteTextSt(`Count is: ${finalCount} | Transaction hash: ${txHash} `); setExecuteLinkSt(`https://hashscan.io/${network}/tx/${txHash}`); } } } import abi from "../../contracts/abi.js"; import axios from "axios"; import { ethers } from "ethers"; const delay = (ms) => new Promise((res) => setTimeout(res, ms)); async function contractExecuteFcn(walletData, contractAddress) { console.log(`\n=======================================`); console.log(`- Executing the smart contract...`); // ETHERS PROVIDER AND SIGNER const provider = walletData[1]; const signer = provider.getSigner(); // EXECUTE THE SMART CONTRACT let txHash; let finalCount; try { // CHECK SMART CONTRACT STATE const initialCount = await getCountState(); console.log(`- Initial count: ${initialCount}`); // EXECUTE CONTRACT FUNCTION const myContract = new ethers.Contract(contractAddress, abi, signer); const incrementTx = await myContract.increment(); const incrementRx = await incrementTx.wait(); txHash = incrementRx.transactionHash; // CHECK SMART CONTRACT STATE AGAIN await delay(5000); // DELAY TO ALLOW MIRROR NODES TO UPDATE BEFORE QUERYING finalCount = await getCountState(); console.log(`- Final count: ${finalCount}`); console.log(`- Contract executed. Transaction hash: \n${txHash} `); } catch (executeError) { console.log(`- ${executeError.message.toString()}`); } return [txHash, finalCount]; async function getCountState() { let countDec; const countInfo = await axios.get(`https://${walletData[2]}.mirrornode.hedera.com/api/v1/contracts/${contractAddress}/state`); if (countInfo.data.state[0] !== undefined) { const countHex = countInfo.data.state[0].value; countDec = parseInt(countHex, 16); } else { countDec = 0; } return countDec; } } export default contractExecuteFcn; When the "Execute Contract (+1)" button is pressed in the dApp, the contractExecute() 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 contractExecuteFcn() function is called with walletData and contractAddress as its arguments. The contractExecuteFcn() function performs the following steps: Get ethers provider and signer: It extracts the ethers provider and signer from the walletData. Check the initial count: The function getCountState() 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. Execute the contract function to increase count: Ethers JS is used along with the contractAddress, abi, and signer to execute the increment() function of the contract. Check the final count: The function getCountState() is used again to check the value of count 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. Finally, the contractExecute() function updates the React UI with the new final count, the transaction hash, and the relevant HashScan hyperlink. Below are a few images of what you would see after clicking the “Execute Contract” button (remember to click on the hyperlinked text showing the final count and transaction hash to view information on HashScan). As a last note, you can also see the console messages from different functions and files in the browser inspector. Summary 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: Cloning the example repository: You started by cloning the example repository that contains the necessary code and files for building the counter dApp Understanding the dApp structure and UI: You delved into the custom React components used in the project, including MyGroup, MyButton, and MyText, and saw their roles and reusability Connecting MetaMask to the dApp: You connected MetaMask to the dApp, switched to the Hedera Testnet, and paired an account using the connectWallet() and walletConnectFcn() functions Deploying the smart contract: You deployed the Counter smart contract to the Hedera network using the contractDeploy() and contractDeployFcn() functions Interacting with the smart contract: You increased the count state variable by executing the increment() contract function By following this tutorial, you'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'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). Continue Learning Open a Testnet Account Try Examples and Tutorials Join the Developer Discord Read the Learning Center Read the Hedera Blog Share This Back to blog What is gRPC, gRPC-Web, and Proxies? Ed Marquez Pragmatic Blockchain Design Patterns – Integrating Blockchain into Business Processes Michiel Mulders Zero Cost EthereumTransaction on Success: Hedera's New Fee Model for Relay Operators Oliver Thorn Hedera Adopts Chainlink Standard for Cross-Chain Interoperability To Accelerate Ecosystem Adoption Hedera Team Hedera Developer Highlights March 2025 Michiel Mulders Hedera Release Cycle Overview Ed Marquez View All Posts Sign up for the newsletter CONNECT WITH US Transparency Open Source Audits & Standards Sustainability Commitment Carbon Offsets Governance Hedera Council Public Policy Treasury Management Meeting Minutes LLC Agreement Node Requirements Community Events Meetups HBAR Telegram Developer Discord Twitter Community Support FAQ Network Status Developer Discord StackOverflow Brand Brand Guidelines Built on Hedera Logo Hedera Store About Team Partners Journey Roadmap Careers Contact General Inquiry Public Relations © 2018-2025 Hedera Hashgraph, LLC. All trademarks and company names are the property of their respective owners. All rights in the Deutsche Telekom mark are protected by Deutsche Telekom AG. All rights reserved. Hedera uses the third party marks with permission. Terms of Use | Privacy Policy