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

[Lomanu4]

? 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: "

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

",
});

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

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.