Web3 निश्चित रूप से यहाँ रहने के लिए है। बिटकॉइन, एथेरियम, सोलाना और कई अन्य जैसे नेटवर्क तेजी से बढ़ रहे हैं, साथ ही उनके ऊपर सभी ऐप्स भी बनाए जा रहे हैं।

यदि आप एक जावास्क्रिप्ट डेवलपर हैं और अपने पैर वेब3 में डुबाना चाहते हैं, तो पहला कदम मेटामास्क स्थापित करना है। वहां से, आप window.etheरियम ऑब्जेक्ट पर उपलब्ध एपीआई विधियों में से एक का उपयोग कर सकते हैं जिसे मेटामास्क ब्राउज़र में इंजेक्ट करता है।

कोई भी Web3 प्रोजेक्ट आम तौर पर वॉलेट को जोड़ने से शुरू होता है। वेब3 में, वॉलेट एक उपयोगकर्ता खाते की तरह होता है, लेकिन जीमेल, इंस्टाग्राम या टिकटॉक जैसी केंद्रीकृत सेवाओं के खातों के विपरीत, वॉलेट विकेंद्रीकृत नेटवर्क का एक मुख्य हिस्सा होता है। मेटामास्क एक प्रॉक्सी के रूप में कार्य करता है, जिससे नेटवर्क के साथ बातचीत करना और वॉलेट बनाने जैसे काम करना आसान हो जाता है। जबकि वॉलेट बनाने के अन्य तरीके हैं, मेटामास्क अब तक सबसे आम है।

इसे ध्यान में रखते हुए, आइए एक वेब एप्लिकेशन बनाएं जो उपयोगकर्ताओं को अपने वॉलेट से कनेक्ट करने की अनुमति देता है।

आवश्यक शर्तें

आपको अपने ब्राउज़र में मेटामास्क एक्सटेंशन इंस्टॉल करना होगा, या आप अपने मोबाइल डिवाइस पर उनका ऐप डाउनलोड कर सकते हैं—दोनों विकल्प काम करते हैं।

आरेख

आइए निम्नलिखित आरेख पर एक नज़र डालें, जो वेब एप्लिकेशन के प्रवाह को रेखांकित करता है:

तर्क

तर्क सीधा है और निम्नलिखित चरणों में विभाजित है:

• यदि मेटामास्क स्थापित नहीं है: मेटामास्क डाउनलोड करने के लिए एक लिंक दिखाएं।

यह सरल है—जब मेटामास्क स्थापित होता है, तो यह window.ethereum ऑब्जेक्ट को इंजेक्ट करता है। यदि यह ऑब्जेक्ट मौजूद नहीं है, तो हम मान सकते हैं कि मेटामास्क स्थापित या सक्षम नहीं किया गया है।

• यदि वॉलेट कनेक्ट नहीं है: वॉलेट को कनेक्ट करने के लिए एक बटन दिखाएं।

यदि window.etheरियम उपलब्ध है, तो हम उपयोगकर्ता को अपने वॉलेट को लिंक करने के लिए एक "कनेक्ट" बटन प्रदर्शित कर सकते हैं।

• यदि वॉलेट कनेक्ट है: वॉलेट पता प्रदर्शित करें।

विंडो.एथेरियम द्वारा प्रदान की गई प्रमुख विधियों में से एक अनुरोध है, जिसका उपयोग इस तरह खातों से अनुरोध करने के लिए किया जा सकता है:

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

   setAddress(accounts[0]);

यह उपयोगकर्ता को वॉलेट एक्सेस के लिए संकेत देता है। यदि वे अनुमति देते हैं, तो विधि खातों की एक श्रृंखला लौटाती है। चीजों को सरल रखने के लिए, हम पहला खाता लेंगे और उसका पता प्रदर्शित करेंगे।

डेमो

यदि आप मेटामास्क स्थापित किए बिना डेमो खोलते हैं, तो आपको कुछ इस तरह देखना चाहिए:

एक बार जब आप मेटामास्क स्थापित कर लेते हैं, तो आपको एक "कनेक्ट" बटन देखना चाहिए। क्लिक करने पर, मेटामास्क आपको यह चुनने के लिए कहेगा कि किस खाते से कनेक्ट होना है। दृश्य उदाहरण के लिए निम्नलिखित GIF देखें:

ध्यान दें कि अंतिम स्थिति वॉलेट पते को कैसे प्रदर्शित करती है। हालाँकि यह डेमो काफी सरल है, प्रत्येक Web3 एप्लिकेशन को एक कनेक्टेड वॉलेट की आवश्यकता होती है। रेनबोकिट और WAGMI जैसी कुछ बेहतरीन लाइब्रेरी हैं जो Web3 एकीकरण को सरल बनाती हैं। हालाँकि, इस डेमो में, मैं समान परिणाम प्राप्त करने के लिए सादे मेटामास्क एपीआई विधियों का उपयोग कर रहा हूं। बेशक, ऐसे कई किनारे वाले मामले हैं जिन्हें मैं अभी तक संभाल नहीं पाया हूं, जैसे कि यदि उपयोगकर्ता पहुंच से इनकार करता है या उसके पास एकाधिक खाते हैं तो क्या होता है - विभिन्न परिदृश्यों के कुछ उदाहरण जो उत्पन्न हो सकते हैं।

कोड

आप 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 (
    

      
    
  );
}

निष्कर्ष

यह एक बहुत ही बुनियादी डेमो था, और अधिकांश कोड सिर्फ मानक रिएक्ट है। वास्तव में, वेब3 से विशेष रूप से संबंधित एकमात्र पंक्ति है:

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

मेटामास्क के विकल्प मौजूद हैं, और ये वॉलेट अपने एपीआई के साथ इंटरैक्ट करने के लिए window.ethereum के समान एक ऑब्जेक्ट भी इंजेक्ट करते हैं।

आप हमेशा एक लाइब्रेरी चुन सकते हैं, जैसा कि पहले बताया गया है, जो वेब3 एकीकरण के लिए आवश्यक अधिकांश बॉयलरप्लेट को संभालती है और आपको अपने व्यवसाय और यूआई तर्क पर ध्यान केंद्रित करने देती है।

वेब3 कहीं नहीं जा रहा है, और संभावना है, अंततः आपको इसे अपने किसी प्रोजेक्ट में शामिल करना होगा। कौन जानता है, आप क्रिप्टो उत्साही भी बन सकते हैं! यदि ऐसा कभी होता है, तो आप इस तरह से अपनी यात्रा शुरू करेंगे।

लिंक

• डेमो
• कोडबेस