Build APP

Build an App on SATUCHAIN

This section explains the standard setup to build an EVM dApp on SATUCHAIN Testnet: connect a wallet, read chain data, and send transactions using common tooling.

Prerequisites

• SATUCHAIN Testnet added to your wallet

  • RPC: https://rpc-testnet.satuchain.com

  • Chain ID: 17081945

  • Symbol: tSTU

  • Explorer: https://testnet.satuchain.com

• Testnet funds (tSTU): https://faucet.satuchain.com/

• Node.js 18+

Recommended Stack

• Frontend: React + Vite (or Next.js)

• Wallet: MetaMask (EIP-1193 provider)

• SDK: ethers.js

• Contract tooling: Hardhat / Foundry

---

1) Create a Frontend (Vite + React)

npm create vite@latest satuchain-app -- --template react
cd satuchain-app
npm install
npm install ethers
npm run dev

---

2) Connect Wallet (MetaMask)

Create src/satuchain.js:

import { ethers } from "ethers";

export const SATUCHAIN_TESTNET = {
  chainId: 17081945,
  chainIdHex: "0x104A4E9", // 17081945 in hex
  chainName: "SATUCHAIN Testnet",
  rpcUrls: ["https://rpc-testnet.satuchain.com"],
  nativeCurrency: { name: "tSTU", symbol: "tSTU", decimals: 18 },
  blockExplorerUrls: ["https://testnet.satuchain.com"],
};

export function getProvider() {
  if (!window.ethereum) throw new Error("MetaMask is not installed");
  return new ethers.BrowserProvider(window.ethereum);
}

export async function connectWallet() {
  const provider = getProvider();
  await provider.send("eth_requestAccounts", []);
  return provider;
}

export async function getChainId() {
  const provider = getProvider();
  const network = await provider.getNetwork();
  return Number(network.chainId);
}

export async function switchToSatuChain() {
  if (!window.ethereum) throw new Error("MetaMask is not installed");

  try {
    await window.ethereum.request({
      method: "wallet_switchEthereumChain",
      params: [{ chainId: SATUCHAIN_TESTNET.chainIdHex }],
    });
  } catch (err) {
    // 4902 = unknown chain, add it
    if (err?.code === 4902) {
      await window.ethereum.request({
        method: "wallet_addEthereumChain",
        params: [
          {
            chainId: SATUCHAIN_TESTNET.chainIdHex,
            chainName: SATUCHAIN_TESTNET.chainName,
            rpcUrls: SATUCHAIN_TESTNET.rpcUrls,
            nativeCurrency: SATUCHAIN_TESTNET.nativeCurrency,
            blockExplorerUrls: SATUCHAIN_TESTNET.blockExplorerUrls,
          },
        ],
      });
    } else {
      throw err;
    }
  }
}

Then update src/App.jsx:

import { useState } from "react";
import { connectWallet, getChainId, switchToSatuChain, getProvider } from "./satuchain";

export default function App() {
  const [address, setAddress] = useState("");
  const [chainId, setChainIdState] = useState(null);

  const onConnect = async () => {
    await switchToSatuChain();
    const provider = await connectWallet();
    const signer = await provider.getSigner();
    setAddress(await signer.getAddress());
    setChainIdState(await getChainId());
  };

  const onReadBalance = async () => {
    const provider = getProvider();
    const signer = await provider.getSigner();
    const addr = await signer.getAddress();
    const bal = await provider.getBalance(addr);
    alert(`Balance: ${Number(bal) / 1e18} tSTU`);
  };

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <h1>SATUCHAIN dApp</h1>
      <button onClick={onConnect}>Connect Wallet</button>
      <button onClick={onReadBalance} style={{ marginLeft: 12 }}>
        Read Balance
      </button>

      <div style={{ marginTop: 16 }}>
        <div>Address: {address || "-"}</div>
        <div>Chain ID: {chainId ?? "-"}</div>
      </div>
    </div>
  );
}

This gives you:

• Wallet connect

• Network switch/add flow

• Balance read (tSTU)

---

3) Send a Transaction (Native Transfer)

Add this function to src/satuchain.js:

export async function sendNative(to, amountEth) {
  const provider = await connectWallet();
  const signer = await provider.getSigner();

  const tx = await signer.sendTransaction({
    to,
    value: ethers.parseEther(amountEth),
  });

  return tx.hash;
}

Usage example:

const hash = await sendNative("0xRecipientAddressHere", "0.01");
console.log("Tx Hash:", hash);

Verify on explorer:

• https://testnet.satuchain.com (search tx hash)

---

4) Read & Write a Smart Contract

Once you deploy a contract (Hardhat/Foundry/Remix), you can interact from the frontend.

Example for the Storage contract:

import { ethers } from "ethers";
import { getProvider, connectWallet } from "./satuchain";

const STORAGE_ABI = [
  "function get() view returns (uint256)",
  "function set(uint256)",
];

export async function storageGet(contractAddress) {
  const provider = getProvider();
  const c = new ethers.Contract(contractAddress, STORAGE_ABI, provider);
  return await c.get();
}

export async function storageSet(contractAddress, value) {
  const provider = await connectWallet();
  const signer = await provider.getSigner();
  const c = new ethers.Contract(contractAddress, STORAGE_ABI, signer);
  const tx = await c.set(value);
  return tx.hash;
}

---

Production Notes

• Use a dedicated RPC (or your own node) for production apps.

• Add basic retry and timeout handling around RPC calls.

• Handle chain changes (ethereum.on("chainChanged", ...)) and account changes.

• Never expose private keys in frontend code; use wallets or backend signers.