Integrasi MetaMask Dengan Next.js Dan Web3.js - CRUDPRO
Home  ›  nodejs

Integrasi MetaMask Dengan Next.js Dan Web3.js

Written By Monday, March 20, 2023
Integrasi MetaMask Dengan Next.js Dan Web3.js

Dalam tutorial ini, kami akan menjelaskan secara detail cara menggunakan MetaMask dengan Next.js dan web3.js untuk mengautentikasi pengguna dan melakukan tindakan di blockchain Ethereum.

Web3.js

Web3.js adalah pustaka JavaScript yang memungkinkan Anda berinteraksi dengan blockchain Ethereum. Ini sediakan API sederhana untuk berinteraksi dengan jaringan Ethereum, termasuk mengirim transaksi bisnis, menanyakan blockchain, dan berinteraksi dengan kontrak pintar.

Di proyek Next.js Anda, instal pustaka web3.js dengan menjalankan perintah npm install web3 di terminal.

Impor pustaka web3 di bagian atas halaman Next.js tempat Anda ingin berinteraksi dengan blockchain Ethereum menggunakan MetaMask. Itu dapat di halaman yang bertanggung jawab untuk mengautentikasi pengguna dan mendapatkan alamat Ethereum mereka atau di halaman yang memungkinkannya pengguna berinteraksi dengan kontrak pintar, seperti menyaksikan atau mengubah statusnya.

import Web3 from 'web3';

Anda sekarang dapat menginisialisasi instance web3 baru dengan menghubungkan ke penyedia MetaMask.

const web3 = new Web3(window.ethereum);

Dengan mengirim window.ethereum sebagai argumen ke konstruktor Web3, pustaka web3.js siap tersambung ke MetaMask dan menggunakan pengadaanya untuk berinteraksi dengan jaringan Ethereum. Ini memungkinkannya kami untuk melakukan tindakan pada blockchain Ethereum, seperti mengirimi transaksi bisnis, berinteraksi dengan smart contract, menanyakan blockchain, dan mengautentikasi pengguna.

Anda dapat mempertimbangkan untuk menggunakan window.ethereum di getInitialProps dari halaman Next.js atau di hook useEffect untuk pastikan jika itu cuma berjalan pada segi klien.

Menghubungkan ke MetaMask

Selanjutnya, kita akan menggunakan metode menunggu window.ethereum.enable() untuk meminta pengguna menghubungkan akun MetaMask mereka ke aplikasi web.

await window.ethereum.enable();

Saat program menggunakan objek window.ethereum yang disiapkan oleh MetaMask untuk berinteraksi dengan jaringan Ethereum, program itu perlu meminta ijin pengguna untuk mengakses akun Ethereum mereka. Ini dilaksanakan dengan panggil sistem enable() pada objek window.ethereum.

MetaMask akan merespons dengan pemberitahuan pop-up yang meminta pengguna untuk menyambungkan akun mereka ke program situs. Bila pengguna terima, sistem enable() akan dituntaskan, dan program akan terhubung account Ethereum pengguna lewat objek window.ethereum. Bila pengguna menolak, sistem enable() akan memunculkan kesalahan, dan program tidak mempunyai akses ke akun pengguna.

Berharap diingat jika sistem theenable() cuma bisa dipanggil 1x per pemuatan halaman. Bila pengguna mengganti akun atau keluar, halaman harus termuat ulang untuk memanggil enable() kembali.

Penanganan Error Jaringan

Saat memanggil sistem window.ethereum.enable(), beberapa kesalahan runtime bisa terjadi, seperti pengguna menolak keinginan jaringan atau MetaMask tidak ada. Anda bisa memakai blok try-catch untuk menangani error ini dan mengecek pesan error tertentu.

Blok kode berikut contoh bagaimana Anda bisa menangani kesalahan:

try {
  await window.ethereum.enable();
} catch (error) {
  if (error.message === 'User denied account authorization') {
    // handle the case where the user denied the connection request
  } else if (error.message === 'MetaMask is not enabled') {
    // handle the case where MetaMask is not available
  } else {
    // handle other errors
  }
}

Alternatifnya, Anda juga dapat memeriksa kode kesalahan jika ingin memeriksa dukungan bahasa yang berbeda:

try {
  await window.ethereum.enable();
} catch (error) {
  if (error.code === 4001) {
    // handle the case where the user denied the connection request
  } else if (error.code === 4002) {
    // handle the case where MetaMask is not available
  } else {
    // handle other errors
  }
}

Kami perlu ingat jika tidak seluruhnya pemakai akan memasangkan atau aktifkan MetaMask, jadi sebagai gagasan bagus untuk menyiapkan langkah alternative untuk mereka untuk berinteraksi dengan jaringan Ethereum, seperti fallback ke dompet yang lain.

Alamat Akun

Sesudah pengguna menyambungkan akun MetaMask mereka, Anda bisa terhubung alamat akun mereka dengan memanggil sistem eth.getAccounts() pada instance web3:

const accounts = await web3.eth.getAccounts();
const userAddress = accounts[0];

Sistem web3.eth.getAccounts() mengembalikan sebuah promise yang diselesaikan ke array alamat Ethereum yang sekarang ini tersambung ke program situs melalui MetaMask.

Penting untuk diingat jika MetaMask mendukung banyak akun, dan pengguna bisa beralih salah satunya, hingga larik yang dikembalikan bisa berisi lebih satu alamat. Alamat pertama kali dalam larik ialah akun default yang sekarang ini diputuskan di MetaMask. Anda bisa menggunakannya untuk bertindak pada blockchain Ethereum, seperti mengirimi transaksi bisnis atau berhubungan dengan smart contract.

Menghubungkan ke Kontrak Cerdas

Anda memerlukan ABI (Application Binary Interface) dan alamatnya untuk berinteraksi dengan smart contract.

ABI (Application Binary Interface) adalah representasi JSON dari fungsi smart contract serta input dan outputnya.

ABI dihasilkan oleh kompiler saat kontrak ditulis dalam Solidity, dan web3.js menggunakannya untuk menyandikan dan mendekode parameter masukan dan keluaran dari fungsi kontrak pintar.

CONTRACT_ADDRESS adalah alamat Ethereum dari smart contract yang diterapkan di blockchain.

Harap diingat, dan ABI serta Alamat Kontrak harus sesuai dengan kontrak cerdas yang digunakan pada blockchain Ethereum; jika tidak, itu akan menimbulkan kesalahan.

Anda bisa mendapatkan ABI dengan mengkompilasi kontrak menggunakan alat seperti Truffle dan alamat dengan menerapkan kontrak ke jaringan Ethereum. Setelah Anda memilikinya, Anda dapat membuat instance kontrak pintar di blockchain Ethereum:

const contract = new web3.eth.Contract(ABI, CONTRACT_ADDRESS);

Web3.js saat ini bisa berinteraksi dengan kontrak di blockchain Ethereum memakai sistem yang disiapkan oleh ABI kontrak. Ini memungkinkannya Anda untuk panggil fungsinya dan memodifikasi kontrak pandai dengan mengirim transaksi bisnis.

Misalkan, Anda bisa panggil fungsi read-only getData pada kontrak dengan menggunakan sistem call() :

const data = await contract.methods.getData().call();
console.log(data);

Anda perlu mengirim transaksi untuk memanggil fungsi yang mengubah status kontrak. Untuk melakukannya, pertama-tama Anda perlu memperkirakan gas yang diperlukan untuk menjalankan fungsi:

const gas = await contract.methods.setData(newValue).estimateGas();

Selanjutnya, Anda dapat membuat objek transaksi dengan data yang diperlukan, seperti alamat pengguna, harga gas, dan nonce:

const gasPrice = await web3.eth.getGasPrice();
const nonce = await web3.eth.getTransactionCount(userAddress);

const tx = {
    from: userAddress,
    to:CONTRACT_ADDRESS,
    gasPrice: gasPrice,
    gas: gas,
    nonce: nonce,
    data: contract.methods.setData(newValue).encodeABI(),
};

Terakhir, Anda bisa menandatangani transaksi bisnis dengan kunci individu pengguna dan mengirimkan ke jaringan Ethereum:

const signedTx = await web3.eth.accounts.signTransaction(tx, privateKey);
const receipt = await web3.eth.sendSignedTransaction(signedTx.rawTransaction);

Penting untuk diperhatikan bahwa, dalam lingkungan produksi, tidak disarankan untuk menggunakan kunci privat dalam kode sisi klien, karena dapat rentan terhadap serangan berbahaya. Pendekatan yang lebih baik adalah dengan menggunakan solusi sisi server untuk menandatangani dan mengirim transaksi agar kunci privat tetap aman.

Memvalidasi Muatan Transaksi bisnis

Hal yang lain harus diingat adalah menangani kesalahan dengan benar dan memberitahu pengguna bila terjadi kesalahan. Misalkan, Anda harus mengecek objek tanda terima untuk tiap kesalahan dan mengatasinya sesuai dengan itu.

Objek tanda terima dibalikkan oleh metode web3.eth.sendSignedTransaction() dan berisi info mengenai transaksi bisnis yang dikirimkan ke jaringan Ethereum.

Ini terhitung info seperti hash transaksi bisnis, nomor blok di mana transaksi bisnis ditempatkan, gas kumulatif yang digunakan oleh transaksi bisnis, dan status transaksi bisnis (sukses atau mungkin tidak).

Saat Anda mengirimi transaksi bisnis ke jaringan Ethereum, kemungkinan butuh waktu untuk ditambang dan dimasukkan ke blok; sejauh ini, transaksi bisnis masih tetap tertunda. Sesudah transaksi bisnis ditambang, objek pertanda terima akan dibalikkan, dan Anda bisa mengecek status transaksi bisnis itu.

Anda bisa memakai properti receipt.status untuk mengecek apa transaksi bisnis sukses, dia akan kembalikan 0x1 bila transaksi bisnis sukses atau 0x0 bila tidak berhasil.

const receipt = await web3.eth.sendSignedTransaction(signedTx.rawTransaction);if (receipt.status === '0x1') {
  // the transaction was successful
} else {
  // the transaction failed
}

Memvalidasi respons transaksi diperlukan karena objek tanda terima tidak menjamin keberhasilan eksekusi fungsi smart contract yang dipanggil oleh transaksi. Itu tidak menunjukkan nilai pengembalian dari fungsi kontrak pintar.

Last but not least, sama pentingnya untuk menangani kekuatan peralihan status MetaMask di program Anda, seperti pengguna mengganti akun atau keluar, dan memperbarui status program Anda sesuai itu. Anda bisa menggunakan sistem on dari objek ethereum untuk mendengarkan acara dan mengatasinya.

window.ethereum.on('accountsChanged', (accounts) => {
   // handle account change
});

window.ethereum.on('disconnect', () => {
   // handle metamask logout
});

Kesimpulan

Tutorial ini cukup membantu untuk membantu Anda memulai tentang cara kerja alur integrasi MetaMask dengan Next.js dan Web3. Jangan ragu untuk menjelajahi lebih jauh atau hubungi untuk pertanyaan atau bantuan apa pun.