Hedera-Angular Counter DApp

This project is a demonstration of deploying a Solidity smart contract to the Hedera network and interacting with it using an Angular front-end. It leverages ethers.js for blockchain interaction and MetaMask for wallet connectivity. The project uses a simple Counter.sol smart contract that allows users to increment, decrement, and set a counter value.

Getting Started

Prerequisites

• Bun: Make sure you have bun installed on your machine.

• MetaMask: Have the MetaMask browser extension installed.

• .env file: Create a .env file in the root of the project based on env.sample with your Hedera testnet RPC URL and private key.

Setup MetaMask

You can configure your MetaMask wallet to connect to the Hedera network using the following steps:

1. Open MetaMask and click on the network dropdown at the top.

2. Select Add Network and then Add a network manually.

3. Enter the following details:

   • Network Name: Hedera Testnet
   • New RPC URL: https://testnet.hashio.io/api
   • Chain ID: 296
   • Currency Symbol: HBAR
   • Block Explorer URL: https://hashscan.io/testnet/

4. Click Save to add the Hedera Testnet to MetaMask.

For more detailed instructions, you can refer to the official Hedera documentation on connecting MetaMask.

Installation

1. Clone the repository:

   git clone https://github.com/manishdait/hedera-angular-counter-dapp.git
   cd hedera-angular-counter-dapp

2. Install dependencies using bun:

   bun install

Contract Deployment

Before running the front-end, you must deploy the smart contract. The deploy.ts script handles the compilation and deployment process.

1. Create a .env file in the root directory and add your RPC_URL and PRIVATE_KEY as specified in env.sample.

   RPC_URL=https://testnet.hashio.io/api #testnet
   PRIVATE_KEY=your_private_key

   Note: The RPC URL should point to a Hedera Testnet/Mainnet EVM-compatible endpoint.

2. Run the deployment script:

   bun deploy-contract

   This script will:

   • Compile the Counter.sol contract.
   • Deploy the contract to the specified network.
   • Save the new contract address to src/app/env.ts.

Running the Application

1. Start the Angular development server:

   bun start

2. Open your browser and navigate to http://localhost:4200/.

3. Click "Connect Wallet" to connect MetaMask to the application and start interacting with the smart contract.