Web3 & DApp Development Fundamentals · درس

دمج المحافظ

طبّقوا منطق اتصال المحافظ، بما يتيح للمستخدمين ربط MetaMask أو المحافظ الأخرى بتطبيق DApp الخاص بكم لتوقيع المعاملات.

دمج المحافظ درس مجاني في Web3 & DApp Development Fundamentals على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web3 & DApp Development Fundamentals، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web3 & DApp Development Fundamentals 3 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

The Gateway to Web3

Decentralized Applications (DApps) need a way for users to interact with the blockchain. Wallets like MetaMask serve as this crucial bridge, securely managing cryptographic keys and signing transactions.

Connecting a wallet allows your DApp to:

Read the user's blockchain address.
Request transaction approvals from the user.
Interact with smart contracts on behalf of the user.

Your DApp's Blockchain Interface

When a Web3 wallet (like MetaMask) is installed in a user's browser, it injects a special object into the browser's JavaScript environment: window.ethereum.

This window.ethereum object is your DApp's primary interface to communicate with the blockchain and the user's wallet. It provides an API to send requests and listen for events.

Is a Wallet Present?

Before trying to connect, your DApp should always check if window.ethereum exists. If it's not present, the user likely doesn't have a Web3 wallet installed, or it's not enabled.

You can then prompt them to install one, usually MetaMask, which is the most common.

if (window.ethereum) {
  console.log("MetaMask detected!");
} else {
  console.log("Please install MetaMask to use this DApp.");
}

Asking for Connection Permission

To get the user's blockchain address and enable transaction signing, your DApp must explicitly request access. This is done using the eth_requestAccounts method via the window.ethereum object.

This action will trigger a pop-up in the user's wallet, asking them to approve the connection. If approved, it returns an array of account addresses, typically just one.

Building a Connect Function

Let's create a simple JavaScript function to connect a user's wallet. This code assumes it runs in a browser environment where window.ethereum might be available.

async function connectWallet() {
  if (window.ethereum) {
    try {
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log('Connected account:', accounts[0]);
      alert(`Wallet connected! Account: ${accounts[0]}`);
      return accounts[0];
    } catch (error) {
      if (error.code === 4001) {
        console.log('User rejected connection.');
        alert('Connection rejected by user.');
      } else {
        console.error('Connection error:', error);
      }
    }
  } else {
    console.log('MetaMask not detected. Please install it!');
    alert('MetaMask not detected. Please install it to use this DApp.');
  }
  return null;
}

// In a real DApp, you'd call this function, e.g., on a button click:
// connectWallet(); // Uncomment to try connecting immediately

Displaying the Connected Account

Once the user successfully connects their wallet, the eth_requestAccounts method returns an array of their connected accounts. The first account accounts[0] is typically the user's currently selected address.

It's good practice to display this address in your DApp's UI to confirm the connection to the user. You can also get the currently selected address using window.ethereum.selectedAddress after a connection is established.

Staying Up-to-Date: Account Changes

Users can change their connected account, switch networks, or even disconnect their wallet at any time. Your DApp needs to react to these changes to maintain a consistent state and provide a good user experience.

The window.ethereum object emits events for these situations. The accountsChanged event is crucial for detecting when the user switches accounts or disconnects.

Reacting to Account Events

Here's how to set up an event listener to update your DApp when the user changes their active account in MetaMask. This code would typically run after your DApp has initialized.

if (window.ethereum) {
  window.ethereum.on('accountsChanged', (accounts) => {
    if (accounts.length === 0) {
      console.log('User disconnected all accounts.');
      alert('Wallet disconnected!');
      // Update UI to 'Not Connected' or prompt to connect
    } else {
      console.log('Switched account to:', accounts[0]);
      alert(`Account changed to: ${accounts[0]}`);
      // Update UI with new account address
    }
  });
  console.log("Listening for 'accountsChanged' events.");
} else {
  console.log("MetaMask not detected, cannot listen for account changes.");
}

Adapting to Network Changes

DApps often operate on specific blockchain networks (e.g., Ethereum Mainnet, Sepolia Testnet). Users might switch networks using their wallet interface.

Your DApp should listen for the chainChanged event to react to these network switches. If the user switches to an unsupported network, you might prompt them to switch back or disable DApp functionality until they do.

Robust Wallet Integration Tips

To build a robust and user-friendly DApp, consider these best practices:

Prompt Installation: If window.ethereum is missing, provide a clear link for users to install MetaMask.
User Feedback: Always show loading states or connection status in your UI.
Error Handling: Catch errors from eth_requestAccounts, especially user rejections (error.code === 4001).
Reconnect on Load: Consider checking for ethereum.selectedAddress on page load to auto-reconnect if the user previously granted permission.

Quick Check: Wallet Connection

When building a DApp, interacting with a user's wallet is fundamental. Consider the initial steps a DApp needs to take to connect with a user's MetaMask wallet.

Recap: Integrating Wallets

In this lesson, you learned how to integrate a Web3 wallet like MetaMask into your DApp. We covered checking for the window.ethereum object, requesting account access with eth_requestAccounts, and handling important events like accountsChanged.

Mastering wallet integration is crucial for building interactive and functional decentralized applications, allowing users to connect their identity and sign transactions on the blockchain.

الأسئلة الشائعة

هل درس «دمج المحافظ» مجاني؟

نعم — نص درس «دمج المحافظ» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web3 & DApp Development Fundamentals، انتقل إلى CoddyKit PRO. تتضمن دورة Web3 & DApp Development Fundamentals 3 دروس في المجموع.

ماذا ستتعلم في «دمج المحافظ»؟

طبّقوا منطق اتصال المحافظ، بما يتيح للمستخدمين ربط MetaMask أو المحافظ الأخرى بتطبيق DApp الخاص بكم لتوقيع المعاملات. تتمرن على Web3 & DApp Development Fundamentals مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Web3 & DApp Development Fundamentals؟

لا تُشترط خبرة سابقة. Web3 & DApp Development Fundamentals على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «دمج المحافظ»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Web3 & DApp Development Fundamentals هذا؟

نعم. كل درس في Web3 & DApp Development Fundamentals يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Web3 & DApp Development Fundamentals