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

2 min readJan 6, 2025

🛠️ Konfigurasi _app.js & Build Homepage di Next.js 🚀

Oke, sekarang kita masuk ke tahap selanjutnya! Udah setup project dan install dependensinya? Keren! Sekarang kita bakal konfigurasi file _app.js biar aplikasi kita siap buat Wallet Connect, terus langsung bikin homepage-nya. 🎨

3️⃣ Konfigurasi _app.js 📂

File _app.js ini fungsinya buat bungkus semua komponen di app kamu dengan global provider. Di sini, kita tambahin WalletProvider dari @suiet/wallet-kit. Ikuti langkah berikut:

Buka file: src/pages/_app.js.
Ganti isinya dengan kode ini:

import { WalletProvider } from "@suiet/wallet-kit";  
import "@suiet/wallet-kit/style.css";  
import "@/styles/globals.css";  

export default function App({ Component, pageProps }) {  
  return (  
    <WalletProvider>  
      <Component {...pageProps} />  
    </WalletProvider>  
  );  
}

🛡️ Penjelasan singkat:

WalletProvider: Bikin semua komponen bisa akses state wallet.
Style import: Jangan lupa load style bawaan dari @suiet/wallet-kit .

4️⃣ Build Homepage 🏠

Waktunya bikin tampilan homepage! Di sini, kita tambahin tombol Connect Wallet dan tampilin data wallet user kalau mereka udah connect. 🚀

Buka file: src/pages/index.js.
Ganti isinya dengan kode ini:

import { addressEllipsis, ConnectButton, useWallet } from "@suiet/wallet-kit";  
import Head from "next/head";  

export default function Home() {  
  const wallet = useWallet();  

  return (  
    <>  
      <div className="flex justify-center items-center w-full min-h-screen">  
        {wallet.connected ? (  
          <div className="text-center">  
            <div className="text-2xl">{addressEllipsis(wallet.address)}</div>  
            <div>  
              Status: <span className="text-green-500">{wallet.status}</span>  
            </div>  
            <button  
              className="mt-5 bg-red-600 text-white px-4 py-2 rounded-lg text-base"  
              onClick={() => wallet.disconnect()}  
            >  
              Disconnect  
            </button>  
          </div>  
        ) : (  
          <ConnectButton />  
        )}  
      </div>  
      <Head>  
        <title>Next.js - Sui Wallet Connect</title>  
      </Head>  
    </>  
  );  
}

🔍 Penjelasan Kodenya

useWallet Hook: Akses state wallet kayak connected, address, sama status.
ConnectButton: Komponen bawaan buat tombol connect wallet.
Conditional Rendering: Kalau wallet-nya connect, tampilkan:

Alamat wallet (dengan format pendek).
Status koneksi.
Tombol Disconnect.
Kalau belum connect? Tampil tombol Connect Wallet aja.

5️⃣ Test Aplikasi ⚡

Sekarang, jalanin server development:

npm run dev

Terus buka http://localhost:3000 di browser.

💻 Hasil Akhir

Sebelum Connect
Muncul tombol “Connect Wallet”.
Setelah Connect

Tampil alamat wallet (dengan ellipsis biar pendek).
Status: Connected atau sesuai state wallet kamu.
Tombol “Disconnect” buat putusin koneksi.

🎉 Woohoo, Udah Jadi!

Congrats, kamu berhasil bikin fitur Wallet Connect di Next.js pakai Sui dan Suiet Wallet Kit. Tinggal eksplorasi lebih jauh buat tambahin fitur lain kayak kirim token, cek saldo, atau transaksi. Semangat coding 🚀✨