web3.js का सबसे नया वर्ज़न, 4.x, हाल ही में जारी किया गया है। इस गाइड में, हम ब्लॉकचेन पर Transfer, NFT Mint करने और साथ ही Query करने के लिए HTML में web3.js को इंटीग्रेट करने के बारे में विस्तार से जानेंगे। web3.js v 1.10.0 डॉक्यूमेंटेशन के कई फीचर्स deprecated (अप्रचलित) होने वाले हैं, इसलिए हमने इस web3.js ट्यूटोरियल के लिए सबसे अप-टू-डेट तरीके संकलित किए हैं। हम React js जैसे फ्रेमवर्क का उपयोग करने से बचेंगे। बिना किसी फ्रेमवर्क का उपयोग किए, हमें Dapp डेवलपमेंट में शामिल बुनियादी कॉन्सेप्ट्स की गहरी समझ हासिल करने में मदद मिलती है। यह व्यावहारिक (hands-on) दृष्टिकोण आपको अपने ब्लॉकचेन डेवलपमेंट स्किल्स के लिए एक मज़बूत आधार बनाने में मदद करता है। बस चरण-दर-चरण निर्देशों का पालन करें, कोड्स को कॉपी-पेस्ट करें और दिए गए कोड स्निपेट्स को पढ़ें। इस ट्यूटोरियल में हम इन विषयों को कवर करेंगे:
- Web3.js 4.x Migration Highlights
- Getting Started: Web3.js
- Part 1: MetaMask से कनेक्ट करना
- Part 2: Account Information डिस्प्ले करना
- Part 2: Transaction भेजना
- Part 3: Smart Contract के साथ इंटरैक्ट करना
चर्चा किए जा रहे कॉन्सेप्ट्स को स्पष्ट करने के लिए हम इस पूरे ट्यूटोरियल में उदाहरण और विज़ुअल्स प्रदान करते हैं।
Web3.js 4.x Migration Highlights
इस गाइड में हम आपको Web3.js 4.x माइग्रेशन के लिए कुछ महत्वपूर्ण कोड बदलावों के बारे में बता रहे हैं।
Breaking Changes
1. Module Import
// Web3.js 1.x import
const Web3 = require('web3');
// Web3.js 4.x import
const { Web3 } = require('web3');
Web3.js 4.x में, हमने Web3 ऑब्जेक्ट को इम्पोर्ट करने के लिए destructuring सिंटैक्स का उपयोग करना शुरू कर दिया है।
2. Default Providers
Web3.js 4.x में, web3.givenProvider और web3.currentProvider के डिफ़ॉल्ट मान undefined हैं। पहले, जब web3 को बिना किसी प्रोवाइडर के इंस्टेंशिएट किया जाता था तो वे null होते थे।
// Defaults to undefined in Web3.js 4.x, previously null
console.log(web3.givenProvider);
console.log(web3.currentProvider);
यदि आप MetaMask का उपयोग कर रहे हैं, तो Web3.givenProvider का उपयोग करने के बजाय window.ethereum को सीधे Web3 कंस्ट्रक्टर में पास करने की सलाह दी जाती है।
// Instantiate Web3 with MetaMask providerconst web3 = new Web3(window.ethereum);
3. Callbacks in Functions
Event listeners को छोड़कर, फंक्शन्स में अब callbacks सपोर्टेड नहीं हैं। यहाँ Web3.js 4.x में callbacks के अमान्य (invalid) उपयोग का एक उदाहरण दिया गया है, जो वर्ज़न 1 में मान्य (valid) था:
// INVALID in Web3.js 4.x
web3.eth.getBalance("0x407d73d8a49eeb85d32cf465507dd71d507100c1", function(err, result) {
if (err) {
console.log(err);
} else {
console.log(result);
}
});
Minor Changes
1. Instantiating a Contract
Web3.js 4.x में, web3.eth.Contract() ऑब्जेक्ट को इंस्टेंशिएट करने के लिए आपको new कीवर्ड का उपयोग करना होगा।
// Web3.js 1.x
const contract = web3.eth.Contract(jsonInterface, address);
// Web3.js 4.x
const contract = new web3.eth.Contract(jsonInterface, address);
2. getBalance
Web3.js 4.x में, getBalance String के बजाय BigInt रिटर्न करता है। पूरी माइग्रेशन गाइड के लिए web3.js docs पर जाएँ: https://web3js.org/#/
Getting Started: Web3.js
निम्नलिखित डायरेक्टरी के साथ एक फोल्डर बनाएँ:
├── directory/
│ ├── index.html
│ ├── main.js
│ ├── styles.css
web3.js कहाँ से डाउनलोड करें:
- CDN लिंक: web3.js
इस प्रोजेक्ट को यहाँ खोजें:
- Github प्रोजेक्ट लिंक: https://github.com/AymericRT/web3.js.git
Part 1: Connect to MetaMask
अब हम एक बटन बनाएंगे जो MetaMask के साथ कनेक्शन स्थापित करता है। फ्रंटएंड कोड्स को index.html में और web3.js जावास्क्रिप्ट कोड्स को main.js में रखा जाएगा।
Index.html
नीचे दिए गए कोड्स में निम्नलिखित शामिल हैं:
- HTML boilerplate
- MetaMask बटन
- web3.js CDN पैकेज Script टैग
- main.js Script टैग
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web3.js Example</title>
<link rel="stylesheet" href="./styles.css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/web3/4.0.1-alpha.5/web3.min.js"
integrity="sha512-NfffVWpEqu1nq+658gzlJQilRBOvjs+PhEKSjT9gkQXRy9OfxI2TOXr33zS7MgGyTpBa5qtC6mKJkQGd9dN/rw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
</head>
<body>
<main>
<p id="status1" class="status" style="color: red">disconnected</p>
<p id="status2" style="color: white"></p>
<div class="maincontainer">
<!-- Connect Wallet -->
<div class="container">
<div class="buttonswrapper">
<div class="buttonswrapperGrid">
<button id="metamask" class="button28">MetaMask</button>
</div>
</div>
</div>
<!-- Account Info Button -->
<!-- Send Transaction -->
<!-- Mint -->
</div>
</main>
<script src="./main.js"></script>
</body>
</html>
HTML Code snippet elaborations
<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/4.0.1-alpha.5/web3.min.js"
integrity="sha512-NfffVWpEqu1nq+658gzlJQilRBOvjs+PhEKSjT9gkQXRy9OfxI2TOXr33zS7MgGyTpBa5qtC6mKJkQGd9dN/rw=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<head> सेक्शन में मौजूद इस script टैग का उपयोग web3.js CDN लाइब्रेरी को लोड करने के लिए किया जाता है।
यह const { Web3 } = require(‘web3’); के समतुल्य (equivalent) है।
<script src="./main.js"></script>
यह हमारे “main.js” फंक्शन्स को HTML में लोड करता है। रेंडरिंग से पहले DOM एलिमेंट्स को एक्सेस करने से बचने के लिए इसे body के निचले भाग में रखना सबसे अच्छा अभ्यास (best practice) है।
Styles.css
Github से css कोड्स को कॉपी-पेस्ट करें: फ़ाइल का Github लिंक: https://github.com/AymericRT/web3.js/blob/master/styles.css
Main.js File
main.js फ़ाइल में, हम MetaMask बटन को सक्रिय करने के लिए आवश्यक जावास्क्रिप्ट फंक्शन्स को शामिल करेंगे। नीचे तीन प्राथमिक फंक्शन्स दिए गए हैं:
- “metamask” बटन के लिए Event Listener
- Click इवेंट होने पर, यह चेक करता है कि MetaMask उपलब्ध और कनेक्टेड है या नहीं।
- यदि हाँ, तो यह ConnectWallet फंक्शन को कॉल करता है।
- अन्यथा, यह कंसोल में एक एरर मैसेज लॉग करता है और वेब पेज पर स्टेटस को अपडेट करके बताता है कि MetaMask मौजूद नहीं है।
- checkMetaMaskAvailability()
- इस फंक्शन का उपयोग यह निर्धारित करने के लिए किया जाता है कि MetaMask ब्राउज़र एक्सटेंशन मौजूद है और कनेक्टेड है या नहीं।
- यह window.ethereum के अस्तित्व की जाँच करता है और ConnectMetaMask() के माध्यम से MetaMask अकाउंट्स तक एक्सेस का अनुरोध करने का प्रयास करता है।
- यदि अकाउंट एक्सेस मिल जाता है, तो फंक्शन true रिटर्न करता है, जो सफल कनेक्शन को दर्शाता है। अन्यथा, यह एक एरर मैसेज लॉग करता है और false रिटर्न करता है।
- ConnectMetaMask();
- यह फंक्शन MetaMask से कनेक्ट करने के लिए ज़िम्मेदार है।
- यह eth_requestAccounts का उपयोग करके MetaMask अकाउंट्स तक एक्सेस का अनुरोध करने का प्रयास करता है।
नीचे दिए गए कोड्स के साथ ऊपर दिए गए स्पष्टीकरणों का मिलान (Cross-reference) करें।
const web3 = new Web3(window.ethereum);
// Function to check if MetaMask is available
async function checkMetaMaskAvailability() {
if (window.ethereum) {
try {
// Request access to MetaMask accounts
await window.ethereum.request({ method: "eth_requestAccounts" });
return true;
} catch (err) {
console.error("Failed to connect to MetaMask:", err);
return false;
}
} else {
console.error("MetaMask not found");
return false;
}
}
// Event listener for MetaMask button
document.getElementById("metamask").addEventListener("click", async () => {
const metaMaskAvailable = await checkMetaMaskAvailability();
if (metaMaskAvailable) {
await ConnectWallet();
} else {
// MetaMask not available
console.error("MetaMask not found");
// Update status
document.getElementById("status1").innerText = "MetaMask not found";
document.getElementById("status1").style.color = "red";
}
});
//Function to connect to MetaMask
async function ConnectWallet() {
try {
// Request access to MetaMask accounts
await window.ethereum.request({ method: "eth_requestAccounts" });
// Update status
document.getElementById("status1").innerText = "Connected to MetaMask";
document.getElementById("status1").style.color = "green";
} catch (err) {
// Handle error
console.error("Failed to connect to MetaMask:", err);
// Update status
document.getElementById("status1").innerText = "Failed to connect to MetaMask";
document.getElementById("status1").style.color = "red";
}
}
Important Code Snippets: Connect to MetaMask
web3.js window.ethereum
const web3 = new Web3(window.ethereum);
web3, Web3.js लाइब्रेरी का एक नया इंस्टेंस (instance) है।
Web3 कंस्ट्रक्टर को window.ethereum असाइन करके, web3 वेरिएबल एथेरियम नेटवर्क के साथ इंटरैक्ट करने के लिए प्रदान किए गए एथेरियम प्रोवाइडर का उपयोग करता है।
web3.js request Accounts
await window.ethereum.request({ method: "eth_requestAccounts" });
यह कोड eth_requestAccounts मेथड का उपयोग करके वेब ऐप में यूज़र के एथेरियम अकाउंट्स तक एक्सेस का अनुरोध करता है।
Run your server
अपने टर्मिनल में, अपनी डायरेक्टरी में नेविगेट करें और इस Python कमांड को रन करें, यह आपके सर्वर को पोर्ट 8000 में आटोमेटिक रूप से डिप्लॉय कर देगा।
python -m SimpleHTTPServer 8000
आपकी वेबसाइट localhost:8000 पर कुछ इस तरह दिखनी चाहिए:
Part 2: Display Account Information
अब जब हमारा MetaMask कनेक्ट हो गया है, तो हम आवश्यक अकाउंट डिटेल्स जैसे कनेक्टेड अकाउंट एड्रेस, बैलेंस और वर्तमान नेटवर्क फ़ीस के लिए ब्लॉकचेन को क्वेरी करने में सक्षम हैं। हम इस कार्यक्षमता के लिए एक बटन बनाएंगे और इसे “Account_Information” नाम देंगे।
Index.html
कमेंट के नीचे “account_Information” बटन इन्सर्ट करें।
<!-- Account Information Button -->
<div class="secondcontainer">
<button id="accountbutton" class="button49">
Account Information
</button>
</div>
Main.js
हम एक फंक्शन लिखेंगे जो MetaMask से डेटा प्राप्त (fetch) करता है। डेटा निम्नलिखित प्रदर्शित करेगा:
- अकाउंट एड्रेस
- अकाउंट बैलेंस
- वर्तमान नेटवर्क फ़ीस
दो आवश्यक प्राथमिक फंक्शन्स हैं:
- Account Information बटन के लिए Event Listener
- Click इवेंट होने पर, यह चेक करता है कि MetaMask उपलब्ध और कनेक्टेड है या नहीं।
- यदि हाँ, तो यह AccountInfo() फंक्शन को कॉल करता है।
- अन्यथा, यह एक एरर लॉग करता है और वेब पेज स्टेटस को अपडेट करता है।
- AccountInformarion();
- यह फंक्शन एथेरियम वॉलेट से डेटा प्राप्त करने के लिए ज़िम्मेदार है।
- यह web3.eth.getAccounts() मेथड का उपयोग करके अकाउंट एड्रेस प्राप्त करता है।
- अकाउंट बैलेंस web3.eth.getBalance(from) मेथड के माध्यम से प्राप्त किया जाता है।
- इसके अतिरिक्त, यह web3.eth.getGasPrice() मेथड को कॉल करके वर्तमान गैस प्राइस (gas price) प्राप्त करता है।
// Event Listener for Account Information
document.getElementById("accountbutton").addEventListener("click", async () => {
const metaMaskAvailable = await checkMetaMaskAvailability();
if (metaMaskAvailable) {
await AccountInformation();
}
});
//Function to call the Account Information
async function AccountInformation() {
const account = await web3.eth.getAccounts();
const from = account[0];
const balanceInWei = await web3.eth.getBalance(from);
const balanceInEth = web3.utils.fromWei(balanceInWei, "ether");
const gasPrice = await web3.eth.getGasPrice();
const gasPriceInEth = web3.utils.fromWei(gasPrice, "ether");
// Display the account information
document.getElementById("status2").innerText ="Account Address: " + from + "\nBalance: " + balanceInEth + " ETH" +"\nGas Price: " + gasPriceInEth;
document.getElementById("status2").style.color = "white";
}
Important Code Snippets: Display Account Information
web3.js get Accounts
const account = await web3.eth.getAccounts() //returns list of account
const from = account[0]; // gets the first account in the list
getAccounts() मेथड उन अकाउंट्स की सूची (list) रिटर्न करता है जिन्हें नोड कण्ट्रोल करता है। मूल रूप से, यह कनेक्टेड MetaMask अकाउंट्स को रिटर्न करता है।
सूची में पहला एलिमेंट प्राइमरी कनेक्टेड अकाउंट को रिप्रजेंट करेगा।
web3.js get Balance
web3.eth.getBalance(from)
getBalance() पैरामीटर में पास किए गए अकाउंट एड्रेस का बैलेंस Wei में प्राप्त करता है। ध्यान दें कि 1 Ether, 10^18 Wei के बराबर होता है।
web3.js get Gas Price
web3.eth.getGasPrice()
getGasPrice() मेथड एथेरियम नेटवर्क पर ट्रांज़ैक्शन के लिए वर्तमान गैस प्राइस को Wei में प्राप्त करता है।
web3.utils.fromWei(balanceInWei, "ether")
यह मेथड आपके बैलेंस को Wei यूनिट्स से Ether में बदल देता है। यदि आप इसे GWEI में बदलना चाहते हैं, तो बस “ether” को “gwei” में बदल दें।
Part 3: Send Ether Transaction
ट्रांज़ैक्शन भेजने के लिए निम्नलिखित आर्ग्यूमेंट्स की आवश्यकता होती है:
- सेंडर का एड्रेस (Sender Address)
- रेसिपिएंट का एड्रेस (Recipient Address)
- निर्दिष्ट राशि (Specified Amount)
हमारा सेंडर एड्रेस डिफ़ॉल्ट कनेक्टेड अकाउंट होगा। रेसिपिएंट के एड्रेस और निर्दिष्ट राशि के लिए, हम दो इनपुट फ़ील्ड्स और एक “send” बटन के साथ एक फॉर्म जनरेट करेंगे जो ट्रान्सफर शुरू करेगा।
Index.html
<!— Send Transaction —> कमेंट के नीचे फॉर्म को इन्सर्ट करें।
<!-- Send Transaction -->
<form>
<div class="inputcontainer">
<input
id="addressinput"
class="myinput"
placeholder="Address 0x0..."
/>
<input
id="amountinput"
class="myinput"
placeholder="Amount ether..."
/>
</div>
<div class="buttoncontainer">
<button type="button" id="sendButton" class="button64">Send</button>
</div>
</form>
Main.js
Send Transaction कार्यक्षमता (Functionality) को सक्रिय करने के लिए, हमें दो प्राथमिक फंक्शन्स बनाने होंगे।
- SendTransaction बटन के लिए Event Listener
- Click इवेंट होने पर, यह चेक करता है कि MetaMask उपलब्ध और कनेक्टेड है या नहीं।
- यदि हाँ, तो यह SendFunction() फंक्शन को कॉल करता है।
- अन्यथा, यह एक एरर लॉग करता है और वेब पेज स्टेटस को अपडेट करता है।
- SendFunction()
- यह फंक्शन ट्रांज़ैक्शन भेजने के लिए ज़िम्मेदार है।
- यह DOM मैनिपुलेशन के माध्यम से रेसिपिएंट एड्रेस और निर्दिष्ट राशि प्राप्त करता है।
- इसके अतिरिक्त transaction के भीतर ट्रांज़ैक्शन विवरण; from, to, amount; का एक जावास्क्रिप्ट ऑब्जेक्ट बनाता है।
- web3.eth.sendTransaction(transaction) के माध्यम से प्रदान किए गए ट्रांज़ैक्शन विवरण, transaction, के साथ एथेरियम नेटवर्क पर एक ट्रांज़ैक्शन भेजता है।
// Event Listener for Send Transaction
document.getElementById("sendButton").addEventListener("click", async () => {
const metaMaskAvailable = await checkMetaMaskAvailability();
if (metaMaskAvailable) {
await SendFunction();
}
});
//Function to call the Send Function
async function SendFunction() {
// Get input values
const to = document.getElementById("addressinput").value;
const amount = document.getElementById("amountinput").value;
// Check if both to and amount are provided
if (!to || !amount) {
console.error("To and amount are required");
return;
}
// Convert amount to wei (1 ether = 10^18 wei)
const amountWei = web3.utils.toWei(amount, "ether");
// Get the selected account from MetaMask
const accounts = await web3.eth.getAccounts();
const from = accounts[0];
// Create the transaction object
const transaction = {
from: from,
to: to,
value: amountWei,
};
// Send the transaction
try {
const result = await web3.eth.sendTransaction(transaction);
console.log("Transaction result:", result);
// Update status
document.getElementById("status2").innerText ="Transaction sent successfully";
document.getElementById("status2").style.color = "green";
} catch (err) {
// Handle error
console.error("Failed to send transaction:", err);// Update status
document.getElementById("status2").innerText = "Failed to send transaction";
document.getElementById("status2").style.color = "red";
}
}
Important Code Snippets: Send Transaction
web3.js Send Transaction
await web3.eth.sendTransaction(transaction)
sendTransaction एक सिंगल पैरामीटर, transaction लेता है। यदि ट्रांज़ैक्शन असफल होता है तो यह एक एरर थ्रो करता है।
transaction एक ऑब्जेक्ट है जिसमें भेजे जाने वाले ट्रांज़ैक्शन का विवरण होता है। यह फॉर्मेट है:
{
from: "Sender Address",
to: "Recepient Address",
value: "Amount to be sent in WEI",
};
आपकी वेबसाइट इस तरह दिखनी चाहिए:
Part 4: Interact with Smart Contract
इस अंतिम खंड में, आप सीखेंगे कि web3.eth.Contract ऑब्जेक्ट का उपयोग करके स्मार्ट कॉन्ट्रैक्ट के साथ कैसे इंटरैक्ट किया जाए। इसमें डेटा पढ़ना, डेटा लिखना और इवेंट्स को हैंडल करना शामिल है।
- Reading Data: कॉन्ट्रैक्ट के स्टेट को मॉडिफाई किए बिना कॉन्ट्रैक्ट से डेटा प्राप्त करने के लिए कॉन्ट्रैक्ट के read मेथड्स का उपयोग करता है और आमतौर पर एक्ज़ीक्यूट करने के लिए फ्री होता है।
- Writing Data: ऐसे मेथड्स जो कॉन्ट्रैक्ट की स्टेट को मॉडिफाई करते हैं या ब्लॉकचेन पर ट्रांज़ैक्शन भेजकर ऐसे एक्शन्स परफॉर्म करते हैं जिनमें गैस फ़ीस की आवश्यकता हो सकती है।
- Handling Events: स्मार्ट कॉन्ट्रैक्ट्स अपने एक्ज़ीक्यूशन के दौरान इवेंट्स एमिट (emit) कर सकते हैं। कॉन्ट्रैक्ट में विशिष्ट (specific) एक्शन्स होने पर नोटिफाई होने के लिए हम इन इवेंट्स को लिसन (listen) कर सकते हैं।
यहाँ हमारे पास एक कॉन्ट्रैक्ट है जिसके साथ आप इंटरैक्ट करेंगे:
// Rareskills contractpragma solidity ^0.8.0;contract RareSkills {
mapping(address => uint256) public balances;
uint256 public totalSupply;
event Mint(address indexed to, uint256 amount);
function mint(uint256 amount) public {
balances[msg.sender] += amount;
totalSupply += amount;
emit Mint(msg.sender, amount);
}
}
यह कॉन्ट्रैक्ट Mumbai Polygon नेटवर्क पर डिप्लॉय किया गया है। आप इसे निम्नलिखित लिंक पर देख सकते हैं: https://mumbai.polygonscan.com/
Index.html
सबसे पहले कमेंट के नीचे “mint” बटन इन्सर्ट करें।
<!-- Minting NFT -->
<div class="mintcontainer">
<button id="mintactual" class="button49">Mint</button>
<p id="demo3"></p>
</div>
Main.js
web3.js में कॉन्ट्रैक्ट के साथ इंटरैक्ट करने के लिए हमें सबसे पहले उसे इंस्टेंशिएट (instantiate) करना होगा। कॉन्ट्रैक्ट को इंस्टेंशिएट करने के लिए दो मुख्य एलिमेंट्स हैं:
- contract address: 0x88d099496C1A493A36E678062f259FE9919B9150
- contract ABI: इसे यहाँ खोजें
हमारी जावास्क्रिप्ट में दो मुख्य फंक्शन्स होंगे:
- हमारे Mint बटन के लिए Event Listener
- Click इवेंट होने पर, यह चेक करता है कि MetaMask उपलब्ध और कनेक्टेड है या नहीं।
- यदि हाँ, तो यह mintNFT() फंक्शन को कॉल करता है।
- अन्यथा, यह एक एरर लॉग करता है और वेब पेज स्टेटस को अपडेट करता है।
- mintNFT()
- यह फंक्शन RareSkills contract के साथ इंटरैक्ट करने के लिए ज़िम्मेदार है।
- contractABI और contractAddress को इसके आर्ग्यूमेंट्स के रूप में पास करते हुए, web3.eth.Contract ऑब्जेक्ट का उपयोग करके कॉन्ट्रैक्ट का एक इंस्टेंस बनाता है।
- totalSupply फंक्शन को पढ़कर कॉन्ट्रैक्ट की कुल सप्लाई (total supply) प्राप्त करता है।
- mint(uint256 amount) फंक्शन को एक्ज़ीक्यूट करके कॉन्ट्रैक्ट डेटा को मिंट (Mint) करता है।
- “Mint event” के घटित होने का इंतज़ार करता है (Listens) और उसे हैंडल करता है।
हम कोड स्निपेट्स में हर विवरण की गहराई में जाएँगे।
// Event Listener for Mint Button
document.getElementById("mintbutton").addEventListener("click", async () => {
const metaMaskAvailable = await checkMetaMaskAvailability();
if (metaMaskAvailable) {
await mintNFT();
}
});
// Contract Details
const contractAddress = "0x88d099496C1A493A36E678062f259FE9919B9150"; // Hardcoded contract address
const contractABI = [
// Hard coded ABI
{
anonymous: false,
inputs: [
{
indexed: true,
internalType: "address",
name: "to",
type: "address",
},
{
indexed: false,
internalType: "uint256",
name: "amount",
type: "uint256",
},
],
name: "Mint",
type: "event",
},
{
inputs: [
{
internalType: "address",
name: "",
type: "address",
},
],
name: "balances",
outputs: [
{
internalType: "uint256",
name: "",
type: "uint256",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [
{
internalType: "uint256",
name: "amount",
type: "uint256",
},],name: "mint",outputs: [],stateMutability: "nonpayable",type: "function",},{inputs: [],name: "totalSupply",outputs: [{internalType: "uint256",name: "",type: "uint256",},],stateMutability: "view",type: "function",},];
// Funciton to mint
async function mintNFT() {
// Get connected account
const accounts = await web3.eth.getAccounts();
const from = accounts[0];
// Instantiate a new Contract
const contract = new web3.eth.Contract(contractABI, contractAddress);
try {
// Invoke contract methods
const result = await contract.methods.mint(1).send({ from: from , value: 0});
const _totalSupply = await contract.methods.totalSupply().call();
document.getElementById("status2").innerText = "TotalSupply: " + _totalSupply;
document.getElementById("status2").style.color = "green";
document.getElementById("status3").innerText = "Minting successful";
document.getElementById("status3").style.color = "green";
// Event Listener
contract
.getPastEvents("Mint", {
fromBlock: "latest", // Start from the latest block
})
.then((results) => console.log(results));
} catch (err) {
console.error("Failed to mint:", err);
document.getElementById("status3").innerText = "Failed to mint";
document.getElementById("status3").style.color = "red";
}
}
Important Code Snippets
web3.js Contract
const contract = new web3.eth.Contract(contractABI, contractAddress);
हमने contractABI और contractAddress को इसके आर्ग्यूमेंट्स के रूप में पास करते हुए, web3.eth.Contract कंस्ट्रक्टर का उपयोग करके RareSkills कॉन्ट्रैक्ट का एक नया इंस्टेंस बनाया है। यह इंस्टेंस हमें contractABI में परिभाषित इंटरफ़ेस का उपयोग करके contractAddress पर स्थित स्मार्ट कॉन्ट्रैक्ट के साथ सीधे इंटरैक्ट करने की अनुमति देता है। स्मार्ट कॉन्ट्रैक्ट के साथ इंटरैक्ट करने के लिए हमें .send() या .call() फंक्शन को इन्वोक (invoke) करने की आवश्यकता होती है, यह इस बात पर निर्भर करता है कि यह एक स्टेट-व्यूइंग (state-viewing) या स्टेट-चेंजिंग (state-changing) फंक्शन है।
web3.js .send()
contract.methods.mint(1).send({ from: from , value: 0});
send() मेथड का उपयोग तब किया जाता है जब ऐसे फंक्शन्स को एक्ज़ीक्यूट किया जाता है जो कॉन्ट्रैक्ट की स्टेट (state) को बदलते हैं। चूंकि हमारा mint फंक्शन हमारे कॉन्ट्रैक्ट की totalSupply में जुड़ता है, इसलिए यह एक स्टेट-चेंजिंग फंक्शन है। send() मेथड को पास किया गया ऑब्जेक्ट { from: from, value: 0 } ट्रांज़ैक्शन का विवरण निर्दिष्ट करता है।
- from: उस एड्रेस को इंडिकेट करता है जहाँ से ट्रांज़ैक्शन भेजा जा रहा है।
- value: उस Ether की मात्रा को इंडिकेट करता है जो ट्रांज़ैक्शन के साथ भेजा जा रहा है। इस मामले में, कोई Ether नहीं भेजा जा रहा है।
web3.js .call()
contract.methods.totalSupply().call(); call() कॉन्ट्रैक्ट मेथड का उपयोग तब किया जाता है जब उन फंक्शन्स को एक्ज़ीक्यूट किया जाता है जो कॉन्ट्रैक्ट की स्टेट को नहीं बदलते हैं। चूंकि totalSupplyl() फंक्शन एक “view” फंक्शन है, इसलिए यह call() मेथड का उपयोग करता है।
web.3.js event Listeners()
contract
.getPastEvents("Mint", {fromBlock: "latest",}).then((results) => console.log(results));
getPastEvents एक इवेंट हैंडलर मेथड है जिसे एमिट (emit) किए गए लेटेस्ट इवेंट को प्राप्त (fetch) करने के लिए contract ऑब्जेक्ट पर कॉल किया जाता है।
-
पहला आर्ग्यूमेंट इवेंट का नाम है, हमारे मामले में यह “Mint” इवेंट है।
-
दूसरा आर्ग्यूमेंट एक ऑप्शंस (options) ऑब्जेक्ट है। इस मामले में, उपलब्ध लेटेस्ट ब्लॉक से इवेंट्स प्राप्त करने के लिए fromBlock को “latest” पर सेट किया गया है। इस पर अधिक जानकारी यहाँ है।
results ऐरे कंसोल में लॉग होता है, यह कुछ इस तरह दिखना चाहिए:
अंतिम वेबसाइट परिणाम (Final Website Result):
इस web3.js ट्यूटोरियल को पूरा करने पर बधाई!
मूल रूप से 26 मई, 2023 को प्रकाशित