Web3 موجود بالتأكيد لتبقى. تنمو شبكات مثل Bitcoin وEthereum وSolana والعديد من الشبكات الأخرى بسرعة، إلى جانب جميع التطبيقات التي يتم إنشاؤها فوقها.

إذا كنت مطور JavaScript وترغب في تجربة Web3، فإن الخطوة الأولى هي تثبيت Metamask. ومن هناك، يمكنك استخدام إحدى طرق واجهة برمجة التطبيقات المتاحة على كائن window.ethereum الذي يقوم Metamask بإدخاله في المتصفح.

يبدأ أي مشروع Web3 عادةً بتوصيل المحفظة. في Web3، تشبه المحفظة حساب المستخدم، ولكن على عكس الحسابات من الخدمات المركزية مثل Gmail أو Instagram أو TikTok، تعد المحفظة جزءًا أساسيًا من الشبكة اللامركزية نفسها. يعمل Metamask بمثابة وكيل، مما يسهل التفاعل مع الشبكة والقيام بأشياء مثل إنشاء محفظة. في حين أن هناك طرقًا أخرى لإنشاء المحفظة، فإن Metamask هو الأكثر شيوعًا.

مع أخذ ذلك في الاعتبار، دعونا نبني تطبيق ويب يسمح للمستخدمين بربط محفظتهم.

المتطلبات الأساسية

ستحتاج إلى تثبيت ملحق Metamask في متصفحك، أو يمكنك تنزيل تطبيقه على جهازك المحمول — كلا الخيارين يعملان.

رسم بياني

دعونا نلقي نظرة على الرسم البياني التالي، الذي يوضح تدفق تطبيق الويب:

منطق

المنطق واضح ومباشر وينقسم إلى الخطوات التالية:

• إذا لم يتم تثبيت Metamask: أظهر رابطًا لتنزيل Metamask.

هذا أمر بسيط - عندما يتم تثبيت Metamask، فإنه يقوم بإدخال كائن window.ethereum. إذا لم يكن هذا الكائن موجودًا، فيمكننا افتراض أنه لم يتم تثبيت Metamask أو تمكينه.

• إذا كانت المحفظة غير متصلة: أظهر زرًا لتوصيل المحفظة.

إذا كان window.ethereum متاحًا، فيمكننا عرض زر "اتصال" للمستخدم لربط محفظته.

• إذا كانت المحفظة متصلة: اعرض عنوان المحفظة.

إحدى الطرق الرئيسية التي توفرها window.ethereum هي الطلب، والتي يمكن استخدامها لطلب حسابات مثل هذا:

   const accounts = await window.ethereum?.request({
     method: "eth_requestAccounts",
     params: [],
   });

   setAddress(accounts[0]);

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

تجريبي

إذا قمت بفتح الإصدار التجريبي دون تثبيت Metamask، فيجب أن ترى شيئًا مثل هذا:

بمجرد تثبيت Metamask، يجب أن ترى زر "اتصال". عند النقر عليه، سيطالبك Metamask بتحديد الحساب الذي تريد الاتصال به. تحقق من ملف GIF التالي للحصول على مثال مرئي:

لاحظ كيف تعرض الحالة النهائية عنوان المحفظة. على الرغم من أن هذا العرض التوضيحي بسيط للغاية، إلا أن كل تطبيق Web3 يتطلب محفظة متصلة. هناك بعض المكتبات الرائعة مثل RainbowKit وWAGMI التي تعمل على تبسيط عملية تكامل Web3. ومع ذلك، في هذا العرض التوضيحي، أستخدم أساليب Metamask API البسيطة لتحقيق نفس النتيجة. بالطبع، هناك العديد من حالات Edge التي لم أتعامل معها بعد، مثل ما يحدث إذا رفض المستخدم الوصول أو كان لديه حسابات متعددة — مجرد بضعة أمثلة للسيناريوهات المختلفة التي يمكن أن تنشأ.

شفرة

يمكنك العثور على الكود الكامل على GitHub.

"use client";

import { MetaMaskInpageProvider } from "@metamask/providers";

import { useState, useEffect } from "react";

declare global {
  interface Window {
    ethereum?: MetaMaskInpageProvider;
  }
}

function Button(props: { connectWalletHandler: () => void; address: string }) {
  const styles = {
    display: "inline-block",
    padding: "20px 40px",
    border: "5px solid black",
    fontSize: 24,
    cursor: "pointer",
  };

  if (props.address) {
    const shortAddress = `${props.address.slice(0, 7)}...${props.address.slice(
      -5
    )}`;
    return 
Wallet: {shortAddress}
;
  }

  if (window.ethereum) {
    return (
      

        Connect wallet
      
    );
  }

  return (
    
      Install Metamask
    
  );
}

export default function Page() {
  const [clientSide, setClientSide] = useState(false);
  const [address, setAddress] = useState("");

  const connectWalletHandler = async () => {
    const accounts = await window.ethereum?.request({
      method: "eth_requestAccounts",
      params: [],
    });

    if (!Array.isArray(accounts) || !accounts.length) {
      return;
    }

    setAddress(accounts[0]);
  };

  useEffect(() => {
    setClientSide(true);
  }, []);

  if (!clientSide) {
    return >;
  }

  return (
    

      
    
  );
}

خاتمة

كان هذا عرضًا تجريبيًا أساسيًا للغاية، ومعظم التعليمات البرمجية هي مجرد React قياسي. في الواقع، السطر الوحيد المتعلق بـ Web3 على وجه التحديد هو:

await window.ethereum?.request({
  method: "eth_requestAccounts",
  params: [],
});

هناك بدائل لـ Metamask، وتقوم هذه المحافظ أيضًا بحقن كائن مشابه لـ window.ethereum للتفاعل مع واجهات برمجة التطبيقات الخاصة بها.

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

لن يذهب Web3 إلى أي مكان، ومن المحتمل أنك ستحتاج إلى تضمينه في أحد مشاريعك في النهاية. من يدري، قد تصبح من عشاق العملات المشفرة! إذا كان الأمر كذلك، فهذه هي الطريقة التي ستبدأ بها رحلتك.

روابط

• العرض التوضيحي
• قاعدة التعليمات البرمجية