إعداد واجهة React.js وتثبيت مكتبة Ethers.js للاتصال بالبلوكتشين

إعداد واجهة React.js وتثبيت مكتبة Ethers.js للاتصال بالبلوكتشين

بعد فهم الأساس النظري في مدخل إلى Web3: ما هو البلوكتشين ولماذا يغير شكل الإنترنت والأنظمة المالية؟، تأتي المرحلة العملية الأهم: بناء واجهة أمامية قادرة على التفاعل مع العقد الذكي. في تطبيقات DApps لا تكفي كتابة عقد بلغة Solidity، بل يجب توفير واجهة سلسة تمكّن المستخدم من قراءة البيانات وتوقيع المعاملات عبر محفظته.

هنا يظهر دور React.js كإطار لبناء واجهات تفاعلية، ودور Ethers.js كمكتبة خفيفة واحترافية للتواصل مع شبكات Ethereum والعقود الذكية. وإذا كنت قد قرأت سابقاً هندسة الويب اللامركزي (Web3.js & Ethers.js): كيف نربط الواجهات بالعقود الذكية؟ فهذه المقالة تنقلك من المقارنة النظرية إلى التطبيق العملي المباشر.

لماذا نستخدم React.js في واجهات Web3؟

تطبيقات البلوكشين تحتاج إلى تحديث مستمر للحالة المعروضة على الشاشة. رصيد المحفظة، عنوان المستخدم، حالة الاتصال، نتائج استدعاء الدوال، وتأكيدات المعاملات؛ جميعها بيانات ديناميكية تتغير لحظة بلحظة. لهذا يوفّر React بنية مناسبة جداً بفضل مفهوم state وإعادة التصيير التلقائي.

كما أن تقسيم المشروع إلى مكوّنات components يسهل فصل منطق الاتصال بالمحفظة عن منطق العرض، وهو أمر بالغ الأهمية عند التعامل مع شبكات اختبار ومعاملات حقيقية. وإذا كنت قد أنجزت إعداد المحفظة في إعداد بيئة التطوير: تثبيت محفظة MetaMask والاتصال بشبكات الاختبار (Testnets) فأنت جاهز الآن لربطها بالواجهة.

ما الذي تقدمه مكتبة Ethers.js؟

مكتبة Ethers.js لا تقتصر على إرسال المعاملات فقط، بل توفّر طبقات عمل واضحة تشمل إنشاء provider لقراءة البيانات من الشبكة، واستخدام signer لتوقيع المعاملات، وإنشاء كائن Contract للوصول إلى دوال العقد الذكي عبر ABI.

وهذا يجعلها مناسبة سواء كنت تتعامل مع دوال قراءة view كما شرحنا في أنواع الدوال : فهم view و pure لتوفير رسوم الـ Gas، أو مع دوال تغيّر الحالة وتستهلك Gas.

إنشاء مشروع الواجهة الأمامية

يمكنك إنشاء مشروع جديد باستخدام Vite أو Create React App. عملياً، يفضّل كثير من المطورين Vite لسرعته وخفة بيئة التطوير.

1. إنشاء المشروع.
2. الدخول إلى مجلد التطبيق.
3. تثبيت مكتبة ethers.
4. تشغيل الخادم المحلي لمعاينة الواجهة.

npm create vite@latest web3-frontend -- --template react
cd web3-frontend
npm install
npm install ethers
npm run dev

رغم أن هذا ليس كود Solidity، إلا أن وضعه بهذه البنية يضمن عرضاً مستقراً داخل ووردبريس ضمن القالب المطلوب. بعد ذلك تصبح جاهزاً لكتابة أول طبقة اتصال مع المحفظة.

فهم طبقة الاتصال: Provider و Signer

أهم خطأ يقع فيه المبتدئ هو عدم التمييز بين القارئ والموقّع. كائن provider يتيح قراءة البيانات من الشبكة، مثل استدعاء دالة تعرض قيمة مخزنة داخل العقد. أما signer فيمثّل الحساب المرتبط بالمحفظة، ويُستخدم عند تنفيذ معاملة تحتاج توقيعاً من المستخدم.

هذا الفصل ضروري لأن بعض الدوال لا تحتاج رسوماً، بينما دوال تعديل الحالة مرتبطة مباشرة بمفاهيم التكاليف (Gas Fees): كيف يحسب البلوكتشين تكلفة تنفيذ الأكواد؟ وقد تفشل إن لم يكن الحساب متصلاً بالشبكة الصحيحة أو لا يملك رصيداً كافياً من العملات التجريبية التي يمكن الحصول عليها من الحصول على عملات تجريبية مجانية (Faucet) للبدء في نشر واختبار العقود الذكية.

كتابة منطق الاتصال بالمحفظة داخل React

في هذا المثال نتحقق أولاً من وجود MetaMask داخل المتصفح، ثم نطلب من المستخدم منح الإذن بالاتصال بالحساب. بعد ذلك نحصل على العنوان ونخزنه داخل الحالة ليظهر فوراً في الواجهة.

import { useState } from "react";
import { ethers } from "ethers";

function App() {
  const [account, setAccount] = useState("");

  async function connectWallet() {
    if (!window.ethereum) {
      alert("MetaMask is not installed");
      return;
    }

    const provider = new ethers.BrowserProvider(window.ethereum);
    const accounts = await provider.send("eth_requestAccounts", []);
    setAccount(accounts[0]);
  }

  return (
    <div>
      <h1>Web3 Frontend</h1>
      <button onClick={connectWallet}>Connect Wallet</button>
      {account && <p>Connected Account: {account}</p>}
    </div>
  );
}

export default App;

هذا المثال يوضح أساسيات الربط فقط. لاحقاً يمكنك تطويره ليتعامل مع تبديل الشبكات، مراقبة تغيّر الحساب، وإظهار رسائل واجهة أوضح عند رفض المستخدم طلب الاتصال.

لا تعتمد على الاتصال بالمحفظة وحده كضمان أمني. الواجهة الأمامية يمكن تعديلها أو تجاوزها، لذلك يجب أن تكون صلاحيات الأمان مطبقة داخل العقد نفسه باستخدام أساليب مثل modifiers وrequire كما في المعدلات (Modifiers): حماية الدوال برمجياً والتعامل مع الأخطاء وإرجاع الأموال: استخدام require, assert, revert.

ربط الواجهة بعقد ذكي منشور

بعد نشر العقد عبر محرر Remix IDE: كتابة ونشر أول عقد ذكي (Smart Contract) على المتصفح مباشرة أو من خلال أتمتة نشر العقود (Deployment): كتابة سكربت لرفع العقد إلى شبكة Ethereum و Polygon، تحتاج إلى عنصرين أساسيين داخل الواجهة: عنوان العقد contract address وواجهة ABI.

بعدها يمكنك إنشاء كائن Contract واستدعاء الدوال مباشرة. إذا كان العقد يصدر events فيمكنك أيضاً الاستفادة من الأحداث (Events): كيف يخبر العقد الذكي واجهة الموقع (React) بأن شيئاً ما قد حدث؟ لتحديث الواجهة فور تنفيذ المعاملات.

import { ethers } from "ethers";

const contractAddress = "0xYourContractAddress";
const contractABI = [
  "function getMessage() view returns (string)"
];

async function readFromContract() {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const contract = new ethers.Contract(contractAddress, contractABI, provider);
  const message = await contract.getMessage();
  console.log(message);
}

هذا النمط مثالي لدوال القراءة. أما إذا كانت الدالة تعدّل البيانات، فعليك تمرير signer بدلاً من provider.

مثال على معاملة تغيّر الحالة

async function writeToContract() {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();

  const contract = new ethers.Contract(
    contractAddress,
    ["function setMessage(string memory _message) public"],
    signer
  );

  const tx = await contract.setMessage("Hello from React");
  await tx.wait();

  console.log("Transaction confirmed");
}

لاحظ هنا أن tx.wait() ينتظر تأكيد المعاملة على الشبكة. بدون هذه الخطوة قد تعرض الواجهة معلومات غير محدثة أو توهم المستخدم بأن العملية تمت قبل تثبيتها فعلياً داخل البلوكشين.

عند تصميم الواجهة، قلّل عدد الاستدعاءات غير الضرورية إلى العقد الذكي. كثرة الاستعلامات أو تنفيذ دوال تغيّر الحالة من دون حاجة يرفع الكلفة ويؤثر على تجربة الاستخدام. من الأفضل تجميع العمليات، والاعتماد على دوال view حيثما أمكن، ومراجعة منطق العقد من منظور Gas Optimization.

أفضل ممارسات تنظيم المشروع

في المشاريع الاحترافية لا يُنصح بوضع كل منطق Web3 داخل ملف واحد. الأفضل إنشاء مجلدات مخصصة مثل contracts وhooks وutils. هذا يسهل إعادة الاستخدام والاختبار والتوسّع لاحقاً.

• افصل بيانات ABI في ملف مستقل.
• أنشئ دوال مساعدة للاتصال بالمحفظة وقراءة الشبكة الحالية.
• استخدم custom hooks لإدارة الحالة المرتبطة بالحساب.
• أضف رسائل تحميل وانتظار لتفادي التفاعل المتكرر أثناء تنفيذ المعاملة.

الخلاصة

إعداد واجهة React.js مع تثبيت مكتبة Ethers.js هو الخطوة الفعلية التي تنقل مشروعك من عقد ذكي معزول إلى تطبيق Web3 قابل للاستخدام. فهم الفرق بين provider وsigner، وتنظيم منطق الاتصال، والتعامل الصحيح مع المعاملات والأخطاء، كلها عناصر تأسيسية لأي مطور يريد بناء واجهات لامركزية موثوقة.

ومع التقدّم في السلسلة التعليمية، ستكون الخطوة التالية الطبيعية هي دمج هذه الواجهة مع مشاريع أكثر تعقيداً، سواء لعقود ERC-20، أو NFT، أو تطبيقات تستمع إلى الأحداث وتعرض البيانات الحية من البلوكشين بواجهة حديثة وسريعة.