เขียนโค้ดจาวาสคริปเพื่อเช็คว่าใช้งาน MetaMask อยู่หรือไม่

Web3 (ที่ไม่ใช่ Web 3.0 ตามที่คุณ Tim Berners-Lee กล่าวไว้) เป็นเว็บไซต์รูปแบบหนึ่งที่อยู่บนบล็อคเชนที่นำหลักการ Decentralization และหลักการ Token-based economics ตัวอย่างเช่นคริปโต โดย Web3 ที่พบได้ และบางคนก็ใช้ก็ตัวอย่างเช่น DeFi แบบ Pancakeswap หรืออื่น ๆ

อย่างไรก็ดี เวลาที่เปิดใช้งานเว็บแนวนี้เราก็ต้องเช็คก่อนครับว่ามีกระเป๋าตังคริปโต (ที่ได้ยินบ่อยก็เป็น MetaMask) หรือไม่ ถ้ามี เราก็เปิดให้เชื่อมกับกระเป๋าตังสำหรับใช้ทำธุรกรรม Smart Contract หรืออื่น ๆ ต่อได้เลย แต่ถ้าไม่มีก็ให้เว็บแจ้งว่าไม่มี

เขียนโค้ด

หลังจากที่เกริ่นมาสักพักแล้ว เรามาเขียนโค้ดกันดีกว่า ในขั้นตอนแรก เราก็ต้องเช็คว่ามีตัวแปรที่เกี่ยวข้องกับ MetaMask หรือไม่ โดยเขียนโค้ดตามด้านล่างนี้

โค้ดบางส่วนนำมาจาก StackOverflow และเอกสารจากทางเว็บ MetaMask

  if(typeof window.ethereum != "undefined" || typeof window.web3 != "undefined") {

  }

เมื่อเช็คแล้วว่ามีตัวแปรที่เกี่ยวข้องแล้ว เราก็เรียกใช้งานตัวแปรที่เกี่ยวข้องแล้วอ่านค่าตัวแปรนี้ว่ามี MetaMask หรือไม่ โดยเขียนโค้ดตามด้านล่างนี้ในปีกกาครับ

  const web3provider = window.ethereum ||   const web3provider = window.ethereum || window.web3.currentProvider;
  const metamask = web3provider.isMetaMask;

  if(metamask) {
    console.log("We found MetaMask.");
  }

เมื่อเขียนโค้ดตามข้างบนนี้เสร็จแล้ว โค้ดที่ได้จะตามด้านล่างนี้

  if(typeof window.ethereum != "undefined" || typeof window.web3 != "undefined") {
    const web3provider = window.ethereum || window.web3.currentProvider;
    const metamask = web3provider.isMetaMask;

    if(metamask) {
      console.log("We found MetaMask.");
    }
  }

เราทดสอบบนเว็บเบราวเซอร์ที่ติดตั้ง MetaMask อยู่ เราเปิดหน้า JavaScript Console จะปรากฏผลลัพธ์ว่า

  We found MetaMask.

ส่วนกรณีที่ไม่มี MetaMask ติดตั้งอยู่ เวลาเรียกใช้ฟังก์ชันตามข้างบนนี้จะพบ Error ขึ้นมากล่าวประมาณว่าไม่พบตัวแปร window.ethereum และ window.web3.currentProvider ครับ

เมื่อเราเขียนโค้ดตามข้างบนนี้แล้ว เราสามารถรประยุกต์ใช้งานเพื่อทำธุรกรรมอื่นต่อ หรือทำแบนเนอร์บอกว่าเราใช้งาน Web3 อยู่นะ อะไรประมาณนี้ครับ ตัวอย่างก็พบได้ในหน้าโฮมของเว็บนี้ หรือตามวิดีโอด้านล่างนี้ได้ครับ

เว็บเบราวเซอร์ของท่านไม่รองรับการใช้งานวิดีโอ อย่างไรก็ดีเราอธิบายวิดีโอนี้ได้ว่ามันเกี่ยวกับการเปิดใช้งานบนเว็บเบราวเซอร์ที่ติดมากับ MetaMask ครับ

สำหรับผู้อ่านแล้ว ผู้อ่านสามารถประยุกต์เอาไปใช้งานกับเว็บตัวเองได้เลยครับผม

↑ Go to top