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` ایک خالی سٹرنگ ہے، اور `status` JSX آبجیکٹ یہ بتاتا ہے کہ صارف کو میٹاماسک انسٹال کرنا چاہیے۔ اب اگر `window.ethereum` موجود _ہے_، تو تب چیزیں دلچسپ ہو جاتی ہیں۔ ایک try/catch لوپ کا استعمال کرتے ہوئے، ہم [`window.ethereum.request({ method: "eth_requestAccounts" });`](https://docs.metamask.io/guide/rpc-api.html#eth-requestaccounts) کو کال کر کے میٹاماسک سے منسلک ہونے کی کوشش کریں گے۔ اس فنکشن کو کال کرنے سے براؤزر میں میٹاماسک کھل جائے گا، جس کے ذریعے صارف کو اپنا والیٹ آپ کے dapp سے منسلک کرنے کا کہا جائے گا۔ - اگر صارف منسلک ہونے کا انتخاب کرتا ہے، تو `method: "eth_requestAccounts"` ایک سرنی (array) واپس کرے گا جس میں صارف کے ان تمام اکاؤنٹس کے پتے شامل ہوں گے جو dapp سے منسلک ہوئے ہیں۔ مجموعی طور پر، ہمارا `connectWallet` فنکشن ایک JSON آبجیکٹ واپس کرے گا جس میں اس سرنی کا _پہلا_ `address` (لائن 9 دیکھیں) اور ایک `status` پیغام شامل ہوگا جو صارف کو سمارٹ کنٹریکٹ میں پیغام لکھنے کی ترغیب دیتا ہے۔ - اگر صارف کنکشن کو مسترد کر دیتا ہے، تو JSON آبجیکٹ میں واپس کیے گئے `address` کے لیے ایک خالی سٹرنگ اور ایک `status` پیغام شامل ہوگا جو یہ ظاہر کرتا ہے کہ صارف نے کنکشن کو مسترد کر دیا ہے۔ اب جب کہ ہم نے یہ `connectWallet` فنکشن لکھ لیا ہے، اگلا مرحلہ اسے اپنے `HelloWorld.js` جزو میں کال کرنا ہے۔ #### اپنے `HelloWorld.js` UI جزو میں `connectWallet` فنکشن شامل کریں {#add-the-connectwallet-function-to-your-helloworld-js-ui-component} `HelloWorld.js` میں `connectWalletPressed` فنکشن پر جائیں، اور اسے درج ذیل میں اپ ڈیٹ کریں: ```javascript // HelloWorld.js const connectWalletPressed = async () => { const walletResponse = await connectWallet() setStatus(walletResponse.status) setWallet(walletResponse.address) } ``` غور کریں کہ ہماری زیادہ تر فعالیت کو `interact.js` فائل سے ہمارے `HelloWorld.js` جزو سے کیسے الگ (abstract) کیا گیا ہے؟ یہ اس لیے ہے تاکہ ہم M-V-C پیراڈائم کی تعمیل کر سکیں! `connectWalletPressed` میں، ہم بس اپنے امپورٹ کردہ `connectWallet` فنکشن کو ایک await کال کرتے ہیں، اور اس کے جواب کا استعمال کرتے ہوئے، ہم اپنے `status` اور `walletAddress` متغیرات کو ان کے اسٹیٹ ہکس کے ذریعے اپ ڈیٹ کرتے ہیں۔ اب، آئیے دونوں فائلوں (`HelloWorld.js` اور `interact.js`) کو محفوظ کریں اور اب تک کے اپنے UI کی جانچ کریں۔ اپنے براؤزر کو [http://localhost:3000/](http://localhost:3000/) صفحہ پر کھولیں، اور صفحے کے اوپری دائیں جانب "Connect Wallet" بٹن دبائیں۔ اگر آپ کے پاس میٹاماسک انسٹال ہے، تو آپ کو اپنا والیٹ اپنے dapp سے منسلک کرنے کا کہا جائے گا۔ منسلک ہونے کی دعوت قبول کریں۔ آپ کو دیکھنا چاہیے کہ والیٹ کا بٹن اب ظاہر کرتا ہے کہ آپ کا پتہ منسلک ہے! زبردست 🔥 اس کے بعد، صفحہ کو ریفریش کرنے کی کوشش کریں... یہ عجیب ہے۔ ہمارا والیٹ بٹن ہمیں میٹاماسک کو منسلک کرنے کا کہہ رہا ہے، حالانکہ یہ پہلے سے ہی منسلک ہے... تاہم، ڈرنے کی کوئی بات نہیں! ہم `getCurrentWalletConnected` کو نافذ کر کے آسانی سے اس مسئلے کو حل کر سکتے ہیں، جو یہ چیک کرے گا کہ آیا کوئی پتہ پہلے سے ہی ہمارے dapp سے منسلک ہے اور اس کے مطابق ہمارے UI کو اپ ڈیٹ کرے گا! #### `getCurrentWalletConnected` فنکشن {#the-getcurrentwalletconnected-function} `interact.js` فائل میں اپنے `getCurrentWalletConnected` فنکشن کو درج ذیل میں اپ ڈیٹ کریں: ```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 سے منسلک میٹاماسک پتے شامل ہوتے ہیں۔ اس فنکشن کو کام کرتے ہوئے دیکھنے کے لیے، آئیے اسے اپنے `HelloWorld.js` جزو کے `useEffect` فنکشن میں کال کریں: ```javascript // HelloWorld.js useEffect(async () => { const message = await loadCurrentMessage() setMessage(message) addSmartContractListener() const { address, status } = await getCurrentWalletConnected() setWallet(address) setStatus(status) }, []) ``` غور کریں، ہم اپنے `walletAddress` اور `status` حالت کے متغیرات کو اپ ڈیٹ کرنے کے لیے `getCurrentWalletConnected` کو کی گئی اپنی کال کے جواب کا استعمال کرتے ہیں۔ اب جب کہ آپ نے یہ کوڈ شامل کر لیا ہے، آئیے اپنے براؤزر کی ونڈو کو ریفریش کرنے کی کوشش کریں۔ بہت خوب! بٹن کو یہ بتانا چاہیے کہ آپ منسلک ہیں، اور آپ کے منسلک والیٹ کے پتے کا پیش نظارہ دکھانا چاہیے - یہاں تک کہ آپ کے ریفریش کرنے کے بعد بھی! #### `addWalletListener` کو نافذ کریں {#implement-addwalletlistener} ہمارے dapp والیٹ سیٹ اپ کا آخری مرحلہ والیٹ سامع (listener) کو نافذ کرنا ہے تاکہ جب ہمارے والیٹ کی حالت تبدیل ہو، جیسے کہ جب صارف منقطع ہوتا ہے یا اکاؤنٹس تبدیل کرتا ہے، تو ہمارا UI اپ ڈیٹ ہو جائے۔ اپنی `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 سٹرنگ پر سیٹ کرتے ہیں جو صارف کو میٹاماسک انسٹال کرنے کی ترغیب دیتی ہے۔ - اگر یہ فعال ہے، تو ہم لائن 3 پر سامع `window.ethereum.on("accountsChanged")` ترتیب دیتے ہیں جو میٹاماسک والیٹ میں حالت کی تبدیلیوں کو سنتا ہے، جس میں وہ وقت شامل ہے جب صارف 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} ٹھیک ہے دوستو، ہم آخری مرحلے پر پہنچ گئے ہیں! آپ کی `interact.js` فائل کے `updateMessage` میں، ہم درج ذیل کام کرنے جا رہے ہیں: 1. اس بات کو یقینی بنائیں کہ جو پیغام ہم اپنے سمارٹ کنٹریکٹ میں شائع کرنا چاہتے ہیں وہ درست ہے 2. میٹاماسک کا استعمال کرتے ہوئے اپنی ٹرانزیکشن پر دستخط کریں 3. اس فنکشن کو اپنے `HelloWorld.js` فرنٹ اینڈ جزو سے کال کریں اس میں زیادہ وقت نہیں لگے گا؛ آئیے اس dapp کو ختم کریں! #### ان پٹ کی خرابیوں کو سنبھالنا {#input-error-handling} فطری طور پر، فنکشن کے آغاز میں کسی قسم کی ان پٹ کی خرابیوں کو سنبھالنے (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` میں ہمارے Hello World سمارٹ کنٹریکٹ کے `update` طریقہ کار کی کال شامل ہے، جو ہمارے `message` سٹرنگ متغیر کو ان پٹ کے طور پر وصول کرتی ہے پھر، ہم ایک await کال کرتے ہیں، `window.ethereum.request`، جہاں ہم میٹاماسک سے ٹرانزیکشن پر دستخط کرنے کو کہتے ہیں۔ غور کریں، لائنز 11 اور 12 پر، ہم اپنا eth طریقہ کار، `eth_sendTransaction` بتا رہے ہیں اور اپنا `transactionParameters` پاس کر رہے ہیں۔ اس مقام پر، میٹاماسک براؤزر میں کھل جائے گا، اور صارف کو ٹرانزیکشن پر دستخط کرنے یا اسے مسترد کرنے کا کہے گا۔ - اگر ٹرانزیکشن کامیاب ہو جاتی ہے، تو فنکشن ایک JSON آبجیکٹ واپس کرے گا جہاں `status` JSX سٹرنگ صارف کو اپنی ٹرانزیکشن کے بارے میں مزید معلومات کے لیے 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` فنکشن کو امپورٹ کردہ `updateMessage` فنکشن کو ایک await کال کرنی چاہیے اور `status` حالت کے متغیر کو تبدیل کرنا چاہیے تاکہ یہ ظاہر ہو سکے کہ ہماری ٹرانزیکشن کامیاب ہوئی یا ناکام: ```javascript // HelloWorld.js const onUpdatePressed = async () => { const { status } = await updateMessage(walletAddress, newMessage) setStatus(status) } ``` یہ بہت صاف اور سادہ ہے۔ اور اندازہ لگائیں کیا... آپ کا DAPP مکمل ہو گیا ہے!!! آگے بڑھیں اور **Update** بٹن کی جانچ کریں! ### اپنا خود کا کسٹم dapp بنائیں {#make-your-own-custom-dapp} واہ، آپ ٹیوٹوریل کے اختتام تک پہنچ گئے! خلاصہ کرنے کے لیے، آپ نے سیکھا کہ کیسے: - ایک میٹاماسک والیٹ کو اپنے dapp پروجیکٹ سے منسلک کریں - [Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3) API کا استعمال کرتے ہوئے اپنے سمارٹ کنٹریکٹ سے ڈیٹا پڑھیں - میٹاماسک کا استعمال کرتے ہوئے ایتھیریم ٹرانزیکشنز پر دستخط کریں اب آپ اس ٹیوٹوریل سے حاصل کردہ مہارتوں کو لاگو کر کے اپنا خود کا کسٹم dapp پروجیکٹ بنانے کے لیے پوری طرح لیس ہیں! ہمیشہ کی طرح، اگر آپ کے کوئی سوالات ہیں، تو [Alchemy ڈسکارڈ](https://discord.gg/gWuC7zB) میں مدد کے لیے ہم سے رابطہ کرنے میں ہچکچاہٹ محسوس نہ کریں۔ 🧙♂️ ایک بار جب آپ یہ ٹیوٹوریل مکمل کر لیں، تو ہمیں بتائیں کہ آپ کا تجربہ کیسا رہا یا اگر آپ کی کوئی رائے ہے تو ہمیں ٹوئٹر پر [@alchemyplatform](https://twitter.com/AlchemyPlatform) ٹیگ کر کے بتائیں!