Aditya41205

Posted on May 18

🚀 Building and Interacting with a StarkNet Contract using React and StarkNet.js

#daaps #starknet #zkrollups #cairo

🧠 Introduction

As blockchain scalability becomes increasingly important, Layer 2 solutions are gaining momentum. Among them, StarkNet stands out due to its use of zero-knowledge proofs (ZK-STARKs) to enable scalable and secure computations. However, StarkNet development involves a unique stack — from Cairo smart contracts to frontend integration via StarkNet.js.

In this article, you'll learn how to:

Write a Cairo 1.0 smart contract with access control.
Deploy it on the StarkNet testnet.
Build a frontend using React.
Connect it to wallets like Argent X or Braavos.
Interact with the contract using StarkNet.js.

🧱 Writing the Cairo Smart Contract

Let’s start with a simple secure counter contract.

Only the contract owner can increment the counter, while anyone can view it.

🧾 Contract Code (Cairo 1.0)

#[starknet::interface]
trait ICounterContract<TContractState> {
    fn get_counter(self: @TContractState) -> u32;
    fn increase_counter(ref self: TContractState);
}

#[starknet::contract]
mod counter {
    use starknet::storage::{StoragePointerReadAccess, StoragePointerWriteAccess};
    use starknet::get_caller_address;
    use starknet::ContractAddress;

    #[storage]
    struct Storage {
        counter: u32,
        owner: ContractAddress,
    }

    #[constructor]
    fn constructor(ref self: ContractState, x: u32, owner: ContractAddress) {
        self.counter.write(x);
        self.owner.write(owner);
    }

    #[abi(embed_v0)]
    impl abc of super::ICounterContract<ContractState> {
        fn get_counter(self: @ContractState) -> u32 {
            self.counter.read()
        }

        fn increase_counter(ref self: ContractState) {
            let caller = get_caller_address();
            let owner = self.owner.read();
            assert(caller == owner, 'Owner can only call');
            let current = self.counter.read();
            self.counter.write(current + 1);
        }
    }
}

🔍 Key Features

Access Control: increase_counter is restricted to the owner.
View Function: get_counter is publicly accessible.
Constructor: Initializes counter value and sets the contract owner.

You can compile this with Scarb, and deploy using tools like starkli.

🌐 Building the React Frontend

Now, let’s build a minimal React frontend to interact with the smart contract.

🛠 Tools Used

React for UI
StarkNet.js for smart contract interactions
RpcProvider to read blockchain state
window.starknet to connect wallet extensions like Argent X or Braavos

📁 1. Setting Up the Project

npx create-react-app starknet-dapp
cd starknet-dapp
npm install starknet

🧩 2. Complete React Code

import React, { useEffect, useState } from "react";
import { RpcProvider, Contract } from "starknet";

const CONTRACT_ADDRESS = "0xYOUR_CONTRACT_ADDRESS"; // Replace with actual deployed address
const ABI = [/* ABI JSON here */];

const rpc = new RpcProvider({
  nodeUrl: "https://starknet-sepolia.g.alchemy.com/starknet/version/rpc/v0_8/YOUR_API_KEY",
});

function App() {
  const [walletConnected, setWalletConnected] = useState(false);
  const [counter, setCounter] = useState(null);
  const [contract, setContract] = useState(null);
  const [userAddress, setUserAddress] = useState("");

  const connectWallet = async () => {
    if (!window.starknet) {
      alert("Install Argent X or Braavos");
      return;
    }

    try {
      await window.starknet.enable();
      const account = window.starknet.account;
      const ctr = new Contract(ABI, CONTRACT_ADDRESS, account);
      setContract(ctr);
      setWalletConnected(true);
      setUserAddress(account.address.slice(0, 6) + "..." + account.address.slice(-4));
    } catch (err) {
      console.error("Wallet connection failed:", err);
    }
  };

  const fetchCounter = async () => {
    try {
      const readContract = new Contract(ABI, CONTRACT_ADDRESS, rpc);
      const res = await readContract.get_counter();
      setCounter(res.toString(10));
    } catch (err) {
      console.error("Failed to fetch counter:", err);
    }
  };

  const increaseCounter = async () => {
    try {
      const tx = await contract.increase_counter();
      await rpc.waitForTransaction(tx.transaction_hash);
      fetchCounter();
    } catch (err) {
      console.error("Transaction failed:", err);
    }
  };

  return (
    <div className="App">
      <h1>StarkNet Counter</h1>
      {!walletConnected ? (
        <button onClick={connectWallet}>Connect Wallet</button>
      ) : (
        <>
          <p>Connected: {userAddress}</p>
          <button onClick={fetchCounter}>Get Counter</button>
          <p>Counter: {counter !== null ? counter : "Not fetched"}</p>
          <button onClick={increaseCounter}>Increase Counter</button>
        </>
      )}
    </div>
  );
}

export default App;

🔄 Interaction Flow

1. Connect Wallet

Uses window.starknet.enable() to initiate connection.

2. Read Counter

Uses RpcProvider and a read-only Contract instance.

3. Write to Counter

Uses Contract with the connected wallet account to call increase_counter().

✅ Deployment & Testing

Once your contract is deployed:

Use Voyager to inspect it.
Interact using your React dApp.
Refer to StarkNet.js docs for more interaction patterns.
Use starkli for testing locally.

🧠 Learnings and Best Practices

Split Read/Write Logic: Use RpcProvider for reads, and wallet account for writes.
Use Clean ABIs: Flatten or manually simplify ABI if needed.
Wallet Support: Ensure compatibility with Argent X & Braavos.
Handle Errors: Wrap all async calls with try/catch.

Interactions:

                   Wallet connection

                        Interface

                   Invoking Read function

                  Invoking Write function

🧾 Conclusion

With the rise of ZK-powered Layer 2s, StarkNet offers a powerful and developer-friendly ecosystem for writing scalable dApps.

You just:

Wrote a secure Cairo contract ✅
Deployed it on StarkNet testnet ✅
Built a full React frontend ✅
Integrated wallet connectivity ✅
Interacted with it using StarkNet.js ✅

DEV Community