Cara Keren Connect Wallet di Next.js Pakai Sui dan Suiet Wallet Kit [PART 1] 🚀

Hey there! Lagi ngulik project dan pengen tambahin fitur wallet connect biar makin kekinian? Kita bakal belajar cara bikin tombol Wallet Connect di Next.js pakai Sui dan Suiet Wallet Kit. Step-by-step, gampang banget kok. Langsung aja kita gaskeun! 💨

📋 Apa yang Dibutuhin?

Sebelum nyemplung, pastiin kamu udah punya tools berikut:

Software Wajib:

1. Node.js — Download di sini
2. Visual Studio Code — Download di sini
3. Suiet Wallet Kit — Cek di sini

1️⃣ Setup Project ⚙️

Pertama, kita buat project Next.js baru. Ketik ini di terminal kamu:

npx create-next-app next-sui-wallet-connect

Jawab aja pertanyaan berikut pas setup muncul:

• TypeScript? ✖ No
• ESLint? ✔ Yes
• Tailwind CSS? 🤷‍♀️ Yes (Kalau suka, ini opsional ya)
• src/ directory? ✔ Yes
• App Router (recommended)? ✖ No
• Customize default import alias (@/*)? ✔ Yes

Done? Lanjut ke folder project kamu:

cd next-sui-wallet-connect

2️⃣ Install Dependencies 🛠️

Biar wallet connect bisa jalan, install 2 library penting ini:

npm install @mysten/sui @suiet/wallet-kit

Penjelasan singkat:

• @mysten/sui: Tools buat ngulik Sui blockchain.
• @suiet/wallet-kit: Kit keren buat handle wallet connect dengan simpel.

🎉 Next Step

Nantinya kita bakal:

• Integrasi Wallet Connect ke project.
• Tambahin tombol kece buat user connect wallet mereka.

Langsung aja mulai setup-nya di project kamu! Kalau ada pertanyaan, jangan lupa tanyain ya~ ✨