کیف پول را وصل کن: وب۳ برای برنامه نویس فرانت اند

بیشتر آموزش های وب۳ فارسی از جای اشتباهی شروع می شوند: از قیمت و صرافی. برای یک برنامه نویس فرانت اند، وب۳ فقط یک چیز است: یک API عجیب که در مرورگر کاربر تزریق شده، امضای دیجیتال می خواهد، چند ثانیه تاخیر دارد و هر درخواستش می تواند پول خرج کند. همین. اگر این را بپذیری، بقیه ماجرا مهندسی معمولی است.

سه لایه ای که هر dApp روی آن سوار است

هر اپلیکیشن غیرمتمرکز، هر قدر هم پیچیده، از همین سه لایه ساخته می شود:

1. Provider: اتصال فقط خواندنی به شبکه. وضعیت را می خواند و هزینه ای ندارد.
2. Signer: نماینده کاربر. تنها چیزی که می تواند تراکنش امضا کند.
3. Contract: یک آبجکت جاوااسکریپتی که از آدرس و ABI ساخته می شود.

کلید خصوصی هرگز از کیف پول بیرون نمی آید. کد تو فقط درخواست امضا می دهد و منتظر بله یا نه کاربر می ماند.قاعده اول امنیت در فرانت اند وب۳

قدم اول: اتصال، بدون خراب کاری

هیچ وقت فرض نکن کیف پول نصب است. هیچ وقت هم بدون کلیک کاربر درخواست اتصال نفرست. کیف پول ها این رفتار را اسپم حساب می کنند.

import { BrowserProvider } from "ethers";

export async function connectWallet() {
  if (!window.ethereum) {
    throw new Error("کیف پولی پیدا نشد");
  }

  const provider = new BrowserProvider(window.ethereum);
  const [account] = await provider.send("eth_requestAccounts", []);
  const signer = await provider.getSigner();
  const { chainId, name } = await provider.getNetwork();

  return { provider, signer, account, chainId, network: name };
}

کاربر می تواند وسط کار حساب یا شبکه را عوض کند. اگر گوش ندهی، رابطت دیتای حساب دیگری را نشان می دهد.

window.ethereum?.on("accountsChanged", (accounts) => {
  accounts.length ? setAccount(accounts[0]) : signOut();
});

window.ethereum?.on("chainChanged", () => location.reload());

قدم دوم: خواندن از قرارداد

خواندن با provider انجام می شود، نه signer. یعنی حتی بدون اتصال کیف پول هم می توانی داده نشان بدهی. برای صفحه اول سایت این خیلی مهم است.

import { Contract, formatUnits } from "ethers";

const ABI = [
  "function balanceOf(address) view returns (uint256)",
  "function decimals() view returns (uint8)",
  "function symbol() view returns (string)",
];

export async function getBalance(provider, token, wallet) {
  const contract = new Contract(token, ABI, provider);
  const [raw, decimals, symbol] = await Promise.all([
    contract.balanceOf(wallet),
    contract.decimals(),
    contract.symbol(),
  ]);
  return `${formatUnits(raw, decimals)} ${symbol}`;
}

عددهای بلاک چین BigInt هستند، نه Number. اگر آن ها را داخل parseFloat بیندازی، روی مبالغ بزرگ دقت را از دست می دهی.

قدم سوم: ارسال تراکنش و خطاهایی که واقعا می افتند

تراکنش سه حالت دارد: رد شدن توسط کاربر، شکست در شبکه، و موفقیت با تاخیر. هر سه را باید در رابطت نشان بدهی.

import { parseEther } from "ethers";

async function mint(contract) {
  setState("waiting-signature");
  try {
    const tx = await contract.mint(1n, { value: parseEther("0.01") });
    setState("pending", tx.hash);
    const receipt = await tx.wait();
    setState("done", receipt.transactionHash);
  } catch (err) {
    if (err.code === 4001) return setState("idle");
    setState("error", err.shortMessage || "تراکنش شکست خورد");
  }
}

لینک explorer را همان لحظه که tx.hash را گرفتی نشان بده. کاربر دوست ندارد روی یک دکمه بی جان خیره شود و نداند چه خبر است.

چک لیست رابط کاربری

همین پنج مورد اگر درست اجرا شوند، محصولت از نود درصد نمونه کارهای دم دستی وب۳ بهتر است.