Write Your First dApp

This guide will walk you through the process of building and deploying your first end-to-end decentralized application (dApp) on the Pharos blockchain. By the end of this guide, you will have a fully functional dApp that includes a smart contract, a backend, and a frontend.

Prerequisites

Before you begin, ensure you have the following:

• Git: Used for code management and obtain examples.

• Node.js: Install it from nodejs.org.

• Pharos Devnet/Testnet Access: Access to a Pharos node (local or remote) for interacting with the blockchain.

Setup 1: Install Hardhat

• Hardhat

Setup 2: Set Up the Project

Clone the example repo:

git clone https://github.com/PharosNetwork/examples
cd examples/dapp/hardhat
npm install

Setup 3: Deploy the Smart Contract

Set the private key:

npx hardhat vars set PRIVATE_KEY

Then

cd contract && npm install
npx hardhat ignition deploy ./ignition/modules/Counter.js --network pharos

Setup 4: Build the Frontend

Connect the Frontend to the Smart Contract:

• Open src/app.jsx and replace its content with the following code:

import React, { useState } from "react";
import { ethers } from "ethers";

const contractAddress = "YOUR_CONTRACT_ADDRESS"; // Replace with your contract address
const abi = [
    {
        "inputs": [],
        "name": "get",
        "outputs": [
            {
                "internalType": "uint256",
                "name": "",
                "type": "uint256"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "uint256",
                "name": "x",
                "type": "uint256"
            }
        ],
        "name": "set",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    }
];

function App() {
    const [value, setValue] = useState("");
    const [storedValue, setStoredValue] = useState("");

    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(contractAddress, abi, signer);

    const handleSet = async () => {
        await contract.set(value);
        alert("Value set!");
    };

    const handleGet = async () => {
        const result = await contract.get();
        setStoredValue(result.toString());
    };

    return (
        <div>
            <h1>Simple Storage dApp</h1>
            <input
                type="text"
                value={value}
                onChange={(e) => setValue(e.target.value)}
                placeholder="Enter a value"
            />
            <button onClick={handleSet}>Set Value</button>
            <button onClick={handleGet}>Get Value</button>
            <p>Stored Value: {storedValue}</p>
        </div>
    );
}

export default App;

Replace Placeholder Values

• Replace YOUR_CONTRACT_ADDRESS with the address of your deployed contract.

Step 5: Run the dApp

Start the React App

• Navigate to the frontend directory and start the app:

npm start

Interact with the dApp:

• Open your browser and navigate to http://localhost:3000.

• Use the input field and buttons to interact with your smart contract.

Troubleshooting

• Contract Deployment Fails: Ensure you have enough testnet tokens to cover the deployment cost.

• Frontend Connection Issues: Verify that the contract address and ABI are correct.

Conclusion

Now that you’ve built your first end-to-end dApp.

This guide provides a comprehensive introduction to building and deploying an end-to-end dApp on the Pharos blockchain. If you encounter any issues, refer to the Troubleshooting section or consult the Pharos documentation. Happy building! 🚀