Pharos Docs
  • Introduction
    • About Pharos Network
    • Vision & Mision
    • Why Pharos Network
    • Concepts
      • Degree of Parallelism (DP)
  • Architecture
    • Pharos Modular Stack
    • Node Architecture
      • About Pharos Nodes
  • Core Technologies
    • Pharos Consensus
    • Pharos Execution
      • Why A New Blockchain Compute Model
      • Pharos VM
    • Pharos Pipelining
    • Pharos Store
      • Why We Need a Blockchain-Native Store
    • Pharos SPNs
  • Network Overview
    • Pharos Networks
      • Pharos Testnet Information
    • Pharos Gas Model
    • FAQ
  • Node & Validator Guide
    • Validator Requirements
    • Validator Node Deployment
      • Using Docker (Devnet)
      • Using Docker (Testnet)
    • Node Management
    • Rapid Node Initialization
      • Rapid Node Initialization(Testnet)
      • Rapid Node Initialization(Devnet)
    • Pharos Network Snapshots
    • Node Debugging & Configuration
  • Pharos Node Monitoring
  • Developer Guide
    • Foundry
      • Write Your First dApp
      • Write Your First Token
      • Write Your First NFT
      • Write Your First Uniswap Contract
    • Hardhat
      • Write Your First dApp
      • Write Your First Token
      • Write Your First NFT
      • Write Your First Uniswap Contract
    • Rust
    • Interoperability
      • Call EVM From WASM
  • API & SDK
    • JSON-RPC API Methods
  • Resources
    • EVM
    • Solidity
Powered by GitBook
On this page
  • Prerequisites
  • Setup 1: Install Foundry
  • Setup 2: Set Up the Project
  • Setup 3: Deploy the Smart Contract
  • Setup 4: Build the Frontend
  • Step 5: Run the dApp
  • Troubleshooting
  • Conclusion
Export as PDF
  1. Developer Guide
  2. Foundry

Write Your First dApp

PreviousFoundryNextWrite Your First Token

Last updated 21 days ago

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 .

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

Setup 1: Install Foundry

Setup 2: Set Up the Project

Clone the example repo:

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

Setup 3: Deploy the Smart Contract

Set the private key:

export PRIVATE_KEY=<your private key>

Then

cd contract
forge install OpenZeppelin/openzeppelin-contracts --no-git --no-commit
forge script script/Counter.s.sol:CounterScript --rpc-url <PHAROS_RPC_URL> --broadcast

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! 🚀

nodejs.org
Foundry