Current Message:
{message}
New Message:
setNewMessage(e.target.value)}
value={newMessage}
/>
{status}
{" "} 🦊 You must install MetaMask, a virtual Ethereum wallet, in your browser.
), } } } ``` إذن ماذا تفعل هذه الكتلة العملاقة من التعليمات البرمجية بالضبط؟ حسنًا، أولاً، تتحقق مما إذا كان `window.ethereum` ممكّنًا في متصفحك. `window.ethereum` هو API عالمي يتم حقنه بواسطة ميتاماسك وموفري المحافظ الآخرين والذي يسمح لمواقع الويب بطلب حسابات إيثيريوم الخاصة بالمستخدمين. إذا تمت الموافقة عليه، يمكنه قراءة البيانات من سلاسل الكتل التي يتصل بها المستخدم، واقتراح أن يقوم المستخدم بتوقيع الرسائل والمعاملات. تحقق من [مستندات ميتاماسك](https://docs.metamask.io/guide/ethereum-provider.html#table-of-contents) لمزيد من المعلومات! إذا كان `window.ethereum` _غير_ موجود، فهذا يعني أن ميتاماسك غير مثبت. ينتج عن هذا إرجاع كائن JSON، حيث يكون `address` المُعاد عبارة عن سلسلة نصية فارغة، وينقل كائن JSX `status` أنه يجب على المستخدم تثبيت ميتاماسك. الآن إذا كان `window.ethereum` _موجودًا_، فهذا هو الوقت الذي تصبح فيه الأمور مثيرة للاهتمام. باستخدام حلقة try/catch، سنحاول الاتصال بميتاماسك عن طريق استدعاء [`window.ethereum.request({ method: "eth_requestAccounts" });`](https://docs.metamask.io/guide/rpc-api.html#eth-requestaccounts). سيؤدي استدعاء هذه الدالة إلى فتح ميتاماسك في المتصفح، حيث سيُطلب من المستخدم ربط محفظته بتطبيقك اللامركزي (dapp). - إذا اختار المستخدم الاتصال، سيعيد `method: "eth_requestAccounts"` مصفوفة تحتوي على جميع عناوين حساب المستخدم التي اتصلت بالتطبيق اللامركزي (dapp). إجمالاً، ستعيد دالة `connectWallet` الخاصة بنا كائن JSON يحتوي على _أول_ `address` في هذه المصفوفة (انظر السطر 9) ورسالة `status` تطالب المستخدم بكتابة رسالة إلى العقد الذكي. - إذا رفض المستخدم الاتصال، فسيحتوي كائن JSON على سلسلة نصية فارغة لـ `address` المُعاد ورسالة `status` تعكس أن المستخدم رفض الاتصال. الآن بعد أن كتبنا دالة `connectWallet` هذه، الخطوة التالية هي استدعاؤها في مكون `HelloWorld.js` الخاص بنا. #### إضافة دالة `connectWallet` إلى مكون واجهة المستخدم `HelloWorld.js` الخاص بك {#add-the-connectwallet-function-to-your-helloworld-js-ui-component} انتقل إلى دالة `connectWalletPressed` في `HelloWorld.js`، وقم بتحديثها إلى ما يلي: ```javascript // HelloWorld.js const connectWalletPressed = async () => { const walletResponse = await connectWallet() setStatus(walletResponse.status) setWallet(walletResponse.address) } ``` هل تلاحظ كيف يتم تجريد معظم وظائفنا بعيدًا عن مكون `HelloWorld.js` الخاص بنا من ملف `interact.js`؟ هذا لكي نمتثل لنموذج M-V-C! في `connectWalletPressed`، نقوم ببساطة بإجراء استدعاء await لدالة `connectWallet` المستوردة الخاصة بنا، وباستخدام استجابتها، نقوم بتحديث متغيري `status` و `walletAddress` عبر خطافات الحالة الخاصة بهما. الآن، دعنا نحفظ كلا الملفين (`HelloWorld.js` و `interact.js`) ونختبر واجهة المستخدم الخاصة بنا حتى الآن. افتح متصفحك على صفحة [http://localhost:3000/](http://localhost:3000/)، واضغط على زر "Connect Wallet" (ربط المحفظة) في أعلى يمين الصفحة. إذا كان لديك ميتاماسك مثبتًا، فسيُطلب منك ربط محفظتك بتطبيقك اللامركزي (dapp). اقبل الدعوة للاتصال. يجب أن ترى أن زر المحفظة يعكس الآن أن عنوانك متصل! نعم 🔥 بعد ذلك، حاول تحديث الصفحة... هذا غريب. يطالبنا زر المحفظة الخاص بنا بربط ميتاماسك، على الرغم من أنه متصل بالفعل... ومع ذلك، لا تخف! يمكننا بسهولة معالجة ذلك من خلال تنفيذ `getCurrentWalletConnected`، والذي سيتحقق مما إذا كان العنوان متصلاً بالفعل بتطبيقنا اللامركزي (dapp) وتحديث واجهة المستخدم الخاصة بنا وفقًا لذلك! #### دالة `getCurrentWalletConnected` {#the-getcurrentwalletconnected-function} قم بتحديث دالة `getCurrentWalletConnected` الخاصة بك في ملف `interact.js` إلى ما يلي: ```javascript // interact.js export const getCurrentWalletConnected = async () => { if (window.ethereum) { try { const addressArray = await window.ethereum.request({ method: "eth_accounts", }) if (addressArray.length > 0) { return { address: addressArray[0], status: "👆🏽 Write a message in the text-field above.", } } else { return { address: "", status: "🦊 Connect to MetaMask using the top right button.", } } } catch (err) { return { address: "", status: "😥 " + err.message, } } } else { return { address: "", status: ({" "} 🦊 You must install MetaMask, a virtual Ethereum wallet, in your browser.
), } } } ``` هذه التعليمات البرمجية مشابهة _جدًا_ لدالة `connectWallet` التي كتبناها للتو في الخطوة السابقة. الفرق الرئيسي هو أنه بدلاً من استدعاء طريقة `eth_requestAccounts`، والتي تفتح ميتاماسك للمستخدم لربط محفظته، هنا نستدعي طريقة `eth_accounts`، والتي تعيد ببساطة مصفوفة تحتوي على عناوين ميتاماسك المتصلة حاليًا بتطبيقنا اللامركزي (dapp). لرؤية هذه الدالة قيد العمل، دعنا نستدعيها في دالة `useEffect` الخاصة بمكون `HelloWorld.js` الخاص بنا: ```javascript // HelloWorld.js useEffect(async () => { const message = await loadCurrentMessage() setMessage(message) addSmartContractListener() const { address, status } = await getCurrentWalletConnected() setWallet(address) setStatus(status) }, []) ``` لاحظ، نستخدم استجابة استدعائنا لـ `getCurrentWalletConnected` لتحديث متغيري الحالة `walletAddress` و `status` الخاصين بنا. الآن بعد أن أضفت هذه التعليمات البرمجية، دعنا نحاول تحديث نافذة المتصفح الخاصة بنا. رائع! يجب أن يقول الزر أنك متصل، ويعرض معاينة لعنوان محفظتك المتصلة - حتى بعد التحديث! #### تنفيذ `addWalletListener` {#implement-addwalletlistener} الخطوة الأخيرة في إعداد محفظة التطبيق اللامركزي (dapp) الخاص بنا هي تنفيذ مستمع المحفظة بحيث يتم تحديث واجهة المستخدم الخاصة بنا عندما تتغير حالة محفظتنا، مثل عندما يقوم المستخدم بقطع الاتصال أو تبديل الحسابات. في ملف `HelloWorld.js` الخاص بك، قم بتعديل دالة `addWalletListener` الخاصة بك على النحو التالي: ```javascript // HelloWorld.js function addWalletListener() { if (window.ethereum) { window.ethereum.on("accountsChanged", (accounts) => { if (accounts.length > 0) { setWallet(accounts[0]) setStatus("👆🏽 Write a message in the text-field above.") } else { setWallet("") setStatus("🦊 Connect to MetaMask using the top right button.") } }) } else { setStatus({" "} 🦊 You must install MetaMask, a virtual Ethereum wallet, in your browser.
) } } ``` أراهن أنك لا تحتاج حتى إلى مساعدتنا لفهم ما يجري هنا في هذه المرحلة، ولكن لأغراض الشمولية، دعنا نفصله بسرعة: - أولاً، تتحقق دالتنا مما إذا كان `window.ethereum` ممكّنًا (أي أن ميتاماسك مثبت). - إذا لم يكن كذلك، فإننا ببساطة نعيّن متغير الحالة `status` الخاص بنا إلى سلسلة JSX تطالب المستخدم بتثبيت ميتاماسك. - إذا كان ممكّنًا، فإننا نعد المستمع `window.ethereum.on("accountsChanged")` في السطر 3 والذي يستمع لتغييرات الحالة في محفظة ميتاماسك، والتي تشمل عندما يقوم المستخدم بربط حساب إضافي بالتطبيق اللامركزي (dapp)، أو تبديل الحسابات، أو قطع اتصال حساب. إذا كان هناك حساب واحد على الأقل متصلاً، يتم تحديث متغير الحالة `walletAddress` كأول حساب في مصفوفة `accounts` المعادة بواسطة المستمع. بخلاف ذلك، يتم تعيين `walletAddress` كسلسلة نصية فارغة. أخيرًا وليس آخرًا، يجب أن نستدعيها في دالة `useEffect` الخاصة بنا: ```javascript // HelloWorld.js useEffect(async () => { const message = await loadCurrentMessage() setMessage(message) addSmartContractListener() const { address, status } = await getCurrentWalletConnected() setWallet(address) setStatus(status) addWalletListener() }, []) ``` وهذا كل شيء! لقد أكملنا بنجاح برمجة جميع وظائف محفظتنا! الآن إلى مهمتنا الأخيرة: تحديث الرسالة المخزنة في عقدنا الذكي! ### الخطوة 6: تنفيذ دالة `updateMessage` {#step-6-implement-the-updatemessage-function} حسنًا يا رفاق، لقد وصلنا إلى المرحلة الأخيرة! في `updateMessage` من ملف `interact.js` الخاص بك، سنقوم بما يلي: 1. التأكد من أن الرسالة التي نرغب في نشرها في عقدنا الذكي صالحة 2. توقيع معاملتنا باستخدام ميتاماسك 3. استدعاء هذه الدالة من مكون الواجهة الأمامية `HelloWorld.js` الخاص بنا لن يستغرق هذا وقتًا طويلاً؛ دعنا ننهي هذا التطبيق اللامركزي (dapp)! #### معالجة أخطاء الإدخال {#input-error-handling} بطبيعة الحال، من المنطقي أن يكون هناك نوع من معالجة أخطاء الإدخال في بداية الدالة. سنريد أن تعود دالتنا مبكرًا إذا لم يكن هناك امتداد ميتاماسك مثبتًا، أو لم تكن هناك محفظة متصلة (أي أن `address` الممرر عبارة عن سلسلة نصية فارغة)، أو أن `message` عبارة عن سلسلة نصية فارغة. دعنا نضيف معالجة الأخطاء التالية إلى `updateMessage`: ```javascript // interact.js export const updateMessage = async (address, message) => { if (!window.ethereum || address === null) { return { status: "💡 Connect your MetaMask wallet to update the message on the blockchain.", } } if (message.trim() === "") { return { status: "❌ Your message cannot be an empty string.", } } } ``` الآن بعد أن أصبح لديها معالجة مناسبة لأخطاء الإدخال، حان الوقت لتوقيع المعاملة عبر ميتاماسك! #### توقيع معاملتنا {#signing-our-transaction} إذا كنت مرتاحًا بالفعل مع معاملات إيثيريوم Web3 التقليدية، فستكون التعليمات البرمجية التي سنكتبها بعد ذلك مألوفة جدًا. أسفل التعليمات البرمجية لمعالجة أخطاء الإدخال، أضف ما يلي إلى `updateMessage`: ```javascript // interact.js //إعداد معلمات المعاملة const transactionParameters = { to: contractAddress, // مطلوب باستثناء أثناء عمليات نشر العقد. from: address, // يجب أن يتطابق مع عنوان المستخدم النشط. data: helloWorldContract.methods.update(message).encodeABI(), } //توقيع المعاملة try { const txHash = await window.ethereum.request({ method: "eth_sendTransaction", params: [transactionParameters], }) return { status: ( ✅{" "} View the status of your transaction on Etherscan!ℹ️ Once the transaction is verified by the network, the message will be updated automatically. ), } } catch (error) { return { status: "😥 " + error.message, } } ``` دعنا نفصل ما يحدث. أولاً، نقوم بإعداد معلمات معاملاتنا، حيث: - يحدد `to` عنوان المستلم (عقدنا الذكي) - يحدد `from` موقع المعاملة، وهو متغير `address` الذي مررناه إلى دالتنا - يحتوي `data` على استدعاء لطريقة `update` الخاصة بعقد Hello World الذكي، ويتلقى متغير السلسلة النصية `message` الخاص بنا كإدخال بعد ذلك، نقوم بإجراء استدعاء await، `window.ethereum.request`، حيث نطلب من ميتاماسك توقيع المعاملة. لاحظ، في الأسطر 11 و 12، أننا نحدد طريقة eth الخاصة بنا، `eth_sendTransaction` ونمرر `transactionParameters` الخاص بنا. في هذه المرحلة، سيتم فتح ميتاماسك في المتصفح، ويطالب المستخدم بتوقيع المعاملة أو رفضها. - إذا نجحت المعاملة، ستعيد الدالة كائن JSON حيث تطالب سلسلة JSX `status` المستخدم بالتحقق من Etherscan لمزيد من المعلومات حول معاملته. - إذا فشلت المعاملة، ستعيد الدالة كائن JSON حيث تنقل السلسلة النصية `status` رسالة الخطأ. إجمالاً، يجب أن تبدو دالة `updateMessage` الخاصة بنا هكذا: ```javascript // interact.js export const updateMessage = async (address, message) => { //معالجة أخطاء الإدخال if (!window.ethereum || address === null) { return { status: "💡 Connect your MetaMask wallet to update the message on the blockchain.", } } if (message.trim() === "") { return { status: "❌ Your message cannot be an empty string.", } } //إعداد معلمات المعاملة const transactionParameters = { to: contractAddress, // مطلوب باستثناء أثناء عمليات نشر العقد. from: address, // يجب أن يتطابق مع عنوان المستخدم النشط. data: helloWorldContract.methods.update(message).encodeABI(), } //توقيع المعاملة try { const txHash = await window.ethereum.request({ method: "eth_sendTransaction", params: [transactionParameters], }) return { status: ( ✅{" "} View the status of your transaction on Etherscan!
ℹ️ Once the transaction is verified by the network, the message will be updated automatically. ), } } catch (error) { return { status: "😥 " + error.message, } } } ``` أخيرًا وليس آخرًا، نحتاج إلى ربط دالة `updateMessage` الخاصة بنا بمكون `HelloWorld.js` الخاص بنا. #### ربط `updateMessage` بالواجهة الأمامية `HelloWorld.js` {#connect-updatemessage-to-the-helloworld-js-frontend} يجب أن تقوم دالة `onUpdatePressed` الخاصة بنا بإجراء استدعاء await لدالة `updateMessage` المستوردة وتعديل متغير الحالة `status` ليعكس ما إذا كانت معاملتنا قد نجحت أم فشلت: ```javascript // HelloWorld.js const onUpdatePressed = async () => { const { status } = await updateMessage(walletAddress, newMessage) setStatus(status) } ``` إنها نظيفة وبسيطة للغاية. وخمن ماذا... تطبيقك اللامركزي (dapp) مكتمل!!! انطلق واختبر زر **Update** (تحديث)! ### اصنع تطبيقك اللامركزي (dapp) المخصص {#make-your-own-custom-dapp} رائع، لقد وصلت إلى نهاية البرنامج التعليمي! للتلخيص، لقد تعلمت كيفية: - ربط محفظة ميتاماسك بمشروع تطبيقك اللامركزي (dapp) - قراءة البيانات من عقدك الذكي باستخدام [API الخاص بـ Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3) - توقيع معاملات إيثيريوم باستخدام ميتاماسك الآن أنت مجهز بالكامل لتطبيق المهارات من هذا البرنامج التعليمي لبناء مشروع تطبيقك اللامركزي (dapp) المخصص! كما هو الحال دائمًا، إذا كان لديك أي أسئلة، فلا تتردد في التواصل معنا للحصول على المساعدة في [ديسكورد Alchemy](https://discord.gg/gWuC7zB). 🧙♂️ بمجرد إكمال هذا البرنامج التعليمي، أخبرنا كيف كانت تجربتك أو إذا كان لديك أي ملاحظات عن طريق الإشارة إلينا على تويتر [@alchemyplatform](https://twitter.com/AlchemyPlatform)!