Tutorial Web3.js: Membuat Dashboard Wallet & Airdrop Tracker

Persiapan

Apa yang dibutuhkan:

1. Node.js terinstal di komputer
  • Bisa cek dengan:

Bash
node -v 
npm -v

2. Text editor: VS Code atau yang lain
3. Akun Infura (untuk koneksi ke Ethereum mainnet/testnet)
  • Daftar di https://infura.io�
  • Buat project → dapatkan PROJECT_ID

Buat Folder Project

Bash
mkdir web3-dashboard cd web3-dashboard npm init -y npm install web3
Ini membuat folder baru & menginstal Web3.js.

Buat File JavaScript

Buat file bernama index.js:
Javascript id="web3step3"
const Web3 = require('web3'); // Koneksi ke Ethereum node via Infura const web3 = new Web3('https://mainnet.infura.io/v3/YOUR_PROJECT_ID'); // Masukkan alamat wallet yang ingin di-track const walletAddress = 'ALAMAT_WALLET_KAMU'; // Fungsi untuk ambil saldo ETH async function getEthBalance() { try { const balance = await web3.eth.getBalance(walletAddress); console.log("Saldo ETH:", web3.utils.fromWei(balance, 'ether')); } catch (err) { console.error(err); } } // Panggil fungsi getEthBalance();

  • Ganti YOUR_PROJECT_ID dengan Project ID dari Infura
  • Ganti ALAMAT_WALLET_KAMU dengan wallet Ethereum yang ingin dicek


Menambahkan Token Tracker (ERC-20)

Banyak airdrop token berupa ERC-20. Kita bisa cek saldo token tertentu.

Javascript id="web3step4"
const tokenAddress = 'ALAMAT_TOKEN_ERC20'; const minABI = [ // balanceOf { "constant":true, "inputs":[{"name":"_owner","type":"address"}], "name":"balanceOf", "outputs":[{"name":"balance","type":"uint256"}], "type":"function" }, // decimals { "constant":true, "inputs":[], "name":"decimals", "outputs":[{"name":"","type":"uint8"}], "type":"function" } ]; const contract = new web3.eth.Contract(minABI, tokenAddress); async function getTokenBalance() { const balance = await contract.methods.balanceOf(walletAddress).call(); const decimals = await contract.methods.decimals().call(); console.log(`Saldo Token: ${balance / (10 ** decimals)}`); } getTokenBalance();

Dengan ini, kamu bisa monitor saldo token airdrop otomatis.

Menambahkan Scheduler (Optional)

Kalau ingin dashboard update otomatis setiap X menit, bisa pakai setInterval:

Javascript id="web3step5"
setInterval(async () => { await getEthBalance(); await getTokenBalance(); console.log('Update selesai\n'); }, 60000); // setiap 60 detik

Next Step: Integrasi ke Frontend

Kalau sudah mahir, kamu bisa:
  • Buat web page pakai React
  • Tampilkan saldo ETH + token
  • Tambahkan notifikasi realtime jika ada airdrop masuk
Ini akan jadi Dashboard Wallet & Airdrop Tracker yang profesional.

🔹 Tips Aman

  • Jangan simpan private key di file.
  • Gunakan read-only wallet address untuk tracking.
  • Hanya gunakan network mainnet/testnet resmi.


Previous Post
No Comment
Add Comment
comment url