@bayybays/stacksone-sdk 1.0.1

package/src/main.jsx

@@ -0,0 +1,160 @@
+import './polyfills'; // <--- WAJIB DI BARIS 1
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+import { BrowserRouter } from 'react-router-dom'; // Tambahkan ini
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+)
+// update 2 at Sel 31 Mar 2026 09:22:34 WIB
+// update 26 at Sel 31 Mar 2026 10:57:01 WIB
+// update 66 at Sel 31 Mar 2026 13:34:10 WIB
+// update 76 at Sel 31 Mar 2026 14:14:00 WIB
+// update 55 at Sel 31 Mar 2026 18:59:49 WIB
+// update 72 at Sel 31 Mar 2026 20:07:58 WIB
+// update 105 at Sel 31 Mar 2026 22:22:35 WIB
+// update 140 at Rab 01 Apr 2026 00:53:07 WIB
+// update 12 at Sab 04 Apr 2026 10:06:46 WIB
+// update 30 at Sab 04 Apr 2026 12:30:29 WIB
+// update 34 at Sab 04 Apr 2026 12:55:48 WIB
+// update 72 at Sab 04 Apr 2026 17:39:19 WIB
+// update 101 at Sab 04 Apr 2026 21:34:38 WIB
+// update 111 at Sab 04 Apr 2026 22:47:21 WIB
+// update 113 at Sab 04 Apr 2026 23:00:45 WIB
+// update 128 at Min 05 Apr 2026 00:56:00 WIB
+// update 149 at Min 05 Apr 2026 03:34:52 WIB
+// update 60 at Min 05 Apr 2026 20:34:01 WIB
+// update 133 at Sen 06 Apr 2026 05:26:40 WIB
+// update 150 at Sen 06 Apr 2026 07:47:23 WIB
+// update 33 at Sen 06 Apr 2026 22:07:31 WIB
+// update 45 at Sen 06 Apr 2026 23:47:12 WIB
+// update 64 at Sel 07 Apr 2026 02:03:49 WIB
+// update 89 at Sel 07 Apr 2026 05:11:38 WIB
+// update 96 at Sel 07 Apr 2026 05:55:31 WIB
+// update 14 at Rab 08 Apr 2026 12:28:13 WIB
+// update 34 at Rab 08 Apr 2026 14:56:19 WIB
+// update 70 at Rab 08 Apr 2026 19:21:57 WIB
+// update 15 at Kam 09 Apr 2026 10:31:30 WIB
+// update 26 at Jum 10 Apr 2026 14:28:55 WIB
+// update 8 at Sab 11 Apr 2026 15:06:06 WIB
+// update 60 at Sab 11 Apr 2026 21:35:27 WIB
+// update 105 at Min 12 Apr 2026 03:27:33 WIB
+// update 111 at Min 12 Apr 2026 04:12:44 WIB
+// update 135 at Min 12 Apr 2026 07:15:48 WIB
+// update 144 at Min 12 Apr 2026 08:24:09 WIB
+// update 150 at Min 12 Apr 2026 09:16:37 WIB
+// update 11 at Sen 13 Apr 2026 10:04:13 WIB
+// update 12 at Sen 13 Apr 2026 10:11:39 WIB
+// update 48 at Sen 13 Apr 2026 13:48:39 WIB
+// update 88 at Sen 13 Apr 2026 17:44:27 WIB
+// update 45 at Kam 16 Apr 2026 03:28:12 WIB
+// update 70 at Kam 16 Apr 2026 06:01:44 WIB
+// update 101 at Kam 16 Apr 2026 09:00:53 WIB
+// update 13 at Kam 16 Apr 2026 19:34:03 WIB
+// update 113 at Jum 17 Apr 2026 05:42:04 WIB
+// update 124 at Jum 17 Apr 2026 06:50:39 WIB
+// update 8 at Sab 18 Apr 2026 10:27:05 WIB
+// update 32 at Sab 18 Apr 2026 13:03:10 WIB
+// update 51 at Sab 18 Apr 2026 15:11:02 WIB
+// update 59 at Sab 18 Apr 2026 16:04:34 WIB
+// update 61 at Sab 18 Apr 2026 16:15:33 WIB
+// update 88 at Sab 18 Apr 2026 19:09:08 WIB
+// update 135 at Min 19 Apr 2026 00:16:20 WIB
+// update 207 at Min 19 Apr 2026 07:54:20 WIB
+// update 215 at Min 19 Apr 2026 08:46:20 WIB
+// update 225 at Min 19 Apr 2026 09:46:25 WIB
+// update 255 at Min 19 Apr 2026 12:51:41 WIB
+// update 25 at Min 19 Apr 2026 19:08:20 WIB
+// update 66 at Min 19 Apr 2026 23:48:15 WIB
+// update 74 at Sen 20 Apr 2026 00:37:16 WIB
+// update 121 at Sen 20 Apr 2026 05:38:54 WIB
+// update 122 at Sen 20 Apr 2026 05:44:46 WIB
+// update 153 at Sen 20 Apr 2026 09:00:38 WIB
+// update 157 at Sen 20 Apr 2026 09:25:01 WIB
+// update 192 at Sen 20 Apr 2026 13:02:08 WIB
+// update 2 at Sen 20 Apr 2026 14:40:52 WIB
+// update 8 at Sen 20 Apr 2026 15:22:54 WIB
+// update 34 at Sen 20 Apr 2026 18:13:59 WIB
+// update 46 at Sen 20 Apr 2026 19:39:16 WIB
+// update 70 at Sen 20 Apr 2026 22:25:35 WIB
+// update 170 at Sel 21 Apr 2026 08:49:28 WIB
+// update 177 at Sel 21 Apr 2026 09:38:41 WIB
+// update 12 at Sel 21 Apr 2026 14:48:38 WIB
+// update 17 at Sel 21 Apr 2026 15:20:30 WIB
+// update 32 at Sel 21 Apr 2026 16:55:32 WIB
+// update 75 at Sel 21 Apr 2026 21:21:15 WIB
+// update 107 at Rab 22 Apr 2026 00:56:49 WIB
+// update 135 at Rab 22 Apr 2026 04:06:04 WIB
+// update 140 at Rab 22 Apr 2026 04:42:56 WIB
+// update 161 at Rab 22 Apr 2026 06:59:16 WIB
+// update 173 at Rab 22 Apr 2026 08:14:10 WIB
+// update 175 at Rab 22 Apr 2026 08:27:52 WIB
+// update 63 at Rab 22 Apr 2026 21:26:27 WIB
+// update 26 at Kam 23 Apr 2026 01:51:44 WIB
+// update 35 at Kam 23 Apr 2026 02:46:39 WIB
+// update 60 at Kam 23 Apr 2026 05:28:56 WIB
+// update 24 at Kam 23 Apr 2026 10:33:34 WIB
+// update 45 at Kam 23 Apr 2026 12:13:00 WIB
+// update 2 at Kam 23 Apr 2026 13:11:10 WIB
+// update 25 at Kam 23 Apr 2026 15:17:28 WIB
+// update 32 at Kam 23 Apr 2026 15:52:33 WIB
+// update 35 at Kam 23 Apr 2026 16:09:16 WIB
+// update 66 at Kam 23 Apr 2026 18:47:24 WIB
+// update 156 at Jum 24 Apr 2026 02:10:17 WIB
+// update 206 at Jum 24 Apr 2026 06:29:41 WIB
+// update 72 at Jum 24 Apr 2026 21:50:31 WIB
+// update 76 at Jum 24 Apr 2026 22:07:03 WIB
+// update 97 at Jum 24 Apr 2026 23:52:38 WIB
+// update 143 at Sab 25 Apr 2026 03:40:53 WIB
+// update 148 at Sab 25 Apr 2026 04:05:43 WIB
+// update 155 at Sab 25 Apr 2026 04:46:46 WIB
+// update 169 at Sab 25 Apr 2026 05:55:10 WIB
+// update 193 at Sab 25 Apr 2026 08:00:30 WIB
+// update 50 at Sab 25 Apr 2026 14:48:01 WIB
+// update 182 at Min 26 Apr 2026 02:03:11 WIB
+// update 184 at Min 26 Apr 2026 02:11:38 WIB
+// update 12 at Sen 27 Apr 2026 13:32:12 WIB
+// update 55 at Sen 27 Apr 2026 17:04:43 WIB
+// update 70 at Sen 27 Apr 2026 18:21:18 WIB
+// update 92 at Sen 27 Apr 2026 20:17:08 WIB
+// update 137 at Sen 27 Apr 2026 23:58:17 WIB
+// update 34 at Sel 28 Apr 2026 03:01:32 WIB
+// update 60 at Sel 28 Apr 2026 05:13:27 WIB
+// update 82 at Sel 28 Apr 2026 07:01:33 WIB
+// update 144 at Sel 28 Apr 2026 12:19:11 WIB
+// update 213 at Sel 28 Apr 2026 18:16:59 WIB
+// update 278 at Sel 28 Apr 2026 23:45:05 WIB
+// update 285 at Rab 29 Apr 2026 00:23:26 WIB
+// update 291 at Rab 29 Apr 2026 00:51:38 WIB
+// update 11 at Rab 29 Apr 2026 10:45:07 WIB
+// update 8 at Rab 29 Apr 2026 13:47:45 WIB
+// update 13 at Rab 29 Apr 2026 14:14:47 WIB
+// update 27 at Rab 29 Apr 2026 15:27:35 WIB
+// update 6 at Rab 29 Apr 2026 23:56:11 WIB
+// update 91 at Kam 30 Apr 2026 09:10:31 WIB
+// update 163 at Kam 30 Apr 2026 15:12:11 WIB
+// update 193 at Kam 30 Apr 2026 17:39:05 WIB
+// update 59 at Jum 01 Mei 2026 07:22:19 WIB
+// update 83 at Jum 01 Mei 2026 09:27:47 WIB
+// update 102 at Jum 01 Mei 2026 11:07:28 WIB
+// update 13 at Jum 01 Mei 2026 15:02:04 WIB
+// update 73 at Jum 01 Mei 2026 20:17:16 WIB
+// update 182 at Sab 02 Mei 2026 05:21:30 WIB
+// update 188 at Sab 02 Mei 2026 05:51:08 WIB
+// update 227 at Sab 02 Mei 2026 09:20:34 WIB
+// update 240 at Sab 02 Mei 2026 10:25:50 WIB
+// update 286 at Sab 02 Mei 2026 14:11:38 WIB
+// update 6 at Min 03 Mei 2026 17:45:08 WIB
+// update 30 at Min 03 Mei 2026 19:44:08 WIB
+// update 32 at Min 03 Mei 2026 19:53:33 WIB
+// update 36 at Min 03 Mei 2026 20:15:11 WIB
+// update 67 at Min 03 Mei 2026 22:56:47 WIB
+// update 93 at Sen 04 Mei 2026 01:03:11 WIB
+// update 118 at Sen 04 Mei 2026 03:02:36 WIB
+// update 165 at Sen 04 Mei 2026 07:01:31 WIB

package/src/pages/Gaming.jsx

@@ -0,0 +1,177 @@
+import React, { useState, useEffect } from 'react';
+import { openContractCall } from '@stacks/connect';
+import { StacksMainnet } from '@stacks/network';
+import { 
+  callReadOnlyFunction, 
+  standardPrincipalCV, 
+  cvToValue 
+} from '@stacks/transactions';
+
+// Ganti dengan alamat deployer dari kontrak chaintap kamu
+const CONTRACT_ADDRESS = 'SP3GHKMV4GSYNA8WGBX83DACG80K1RRVQZAZMB9J3'; 
+const CONTRACT_NAME = 'chaintap';
+
+const network = new StacksMainnet();
+
+const Gaming = ({ userData }) => {
+  const [userTaps, setUserTaps] = useState(0);
+  const [totalTaps, setTotalTaps] = useState(0);
+  const [leaderboard, setLeaderboard] = useState([]);
+  const [isTapping, setIsTapping] = useState(false);
+
+  const wallet = userData?.profile?.stxAddress?.mainnet;
+
+  useEffect(() => {
+    if (wallet) {
+      fetchGamingStats();
+    }
+  }, [wallet]);
+
+  const fetchGamingStats = async () => {
+    try {
+      // 1. Ambil poin/taps dari user saat ini
+      const userRes = await callReadOnlyFunction({
+        contractAddress: CONTRACT_ADDRESS,
+        contractName: CONTRACT_NAME,
+        functionName: 'get-user-taps',
+        functionArgs: [standardPrincipalCV(wallet)],
+        network,
+        senderAddress: wallet
+      });
+      setUserTaps(Number(cvToValue(userRes)));
+
+      // 2. Ambil total keseluruhan taps di chain
+      const totalRes = await callReadOnlyFunction({
+        contractAddress: CONTRACT_ADDRESS,
+        contractName: CONTRACT_NAME,
+        functionName: 'get-total-taps',
+        functionArgs: [],
+        network,
+        senderAddress: wallet
+      });
+      setTotalTaps(Number(cvToValue(totalRes)));
+
+      // 3. Ambil leaderboard top 10
+      const leadRes = await callReadOnlyFunction({
+        contractAddress: CONTRACT_ADDRESS,
+        contractName: CONTRACT_NAME,
+        functionName: 'get-leaderboard',
+        functionArgs: [],
+        network,
+        senderAddress: wallet
+      });
+      
+      const rawLeaderboard = cvToValue(leadRes);
+      // Format array agar lebih mudah di-render (mengubah BigInt ke Number jika ada)
+      const formattedLeaderboard = rawLeaderboard.map((item) => ({
+        who: item.who.value || item.who,
+        taps: Number(item.taps.value !== undefined ? item.taps.value : item.taps)
+      }));
+      
+      setLeaderboard(formattedLeaderboard);
+    } catch (error) {
+      console.error("Gagal mengambil data dari contract chaintap:", error);
+    }
+  };
+
+  const handleTap = async () => {
+    if (!userData) {
+      alert("Silakan hubungkan wallet (Connect) terlebih dahulu!");
+      return;
+    }
+
+    setIsTapping(true);
+
+    await openContractCall({
+      network,
+      contractAddress: CONTRACT_ADDRESS,
+      contractName: CONTRACT_NAME,
+      functionName: 'tap',
+      functionArgs: [],
+      onFinish: (data) => {
+        console.log("Tap berhasil dikirim! Tx ID:", data.txId);
+        setIsTapping(false);
+        // Bisa tambahkan toast/notifikasi di sini
+      },
+      onCancel: () => {
+        setIsTapping(false);
+        console.log("Tap dibatalkan oleh user");
+      }
+    });
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-4 space-y-8 text-white">
+      {/* Header Info */}
+      <div className="bg-slate-800 p-6 rounded-xl text-center space-y-2 border border-slate-700 shadow-lg">
+        <h1 className="text-3xl font-bold text-indigo-400">ChainTap Gaming</h1>
+        <p className="text-slate-400">Unlimited on-chain tapping game!</p>
+        <div className="flex justify-center gap-8 pt-4">
+          <div className="bg-slate-900 px-6 py-3 rounded-lg">
+            <p className="text-sm text-slate-500 font-mono">Poin Kamu</p>
+            <p className="text-2xl font-bold text-green-400">{userTaps} Taps</p>
+          </div>
+          <div className="bg-slate-900 px-6 py-3 rounded-lg">
+            <p className="text-sm text-slate-500 font-mono">Total Global</p>
+            <p className="text-2xl font-bold text-blue-400">{totalTaps} Taps</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Action - Tap Button */}
+      <div className="flex justify-center py-10">
+        <button
+          onClick={handleTap}
+          disabled={isTapping || !userData}
+          className={`
+            w-48 h-48 rounded-full shadow-[0_0_40px_rgba(99,102,241,0.4)] 
+            flex flex-col items-center justify-center border-4 border-indigo-500
+            transition-transform duration-100 ease-in-out active:scale-95
+            ${!userData ? 'opacity-50 cursor-not-allowed border-slate-500 shadow-none bg-slate-800' : 'bg-indigo-600 hover:bg-indigo-500'}
+          `}
+        >
+          <span className="text-4xl font-bold">{isTapping ? "..." : "TAP!"}</span>
+          <span className="text-sm opacity-70 mt-2 font-mono">Tx Normal</span>
+        </button>
+      </div>
+
+      {/* Leaderboard Table */}
+      <div className="bg-slate-800 rounded-xl overflow-hidden border border-slate-700">
+        <div className="bg-slate-900 p-4 border-b border-slate-700">
+          <h2 className="text-xl font-bold text-center">🏆 Top 10 Leaderboard 🏆</h2>
+        </div>
+        <div className="p-4">
+          <table className="w-full text-left font-mono text-sm">
+            <thead>
+              <tr className="text-slate-400 border-b border-slate-700">
+                <th className="py-3 px-2">Rank</th>
+                <th className="py-3 px-2">Address</th>
+                <th className="py-3 px-2 text-right">Score/Taps</th>
+              </tr>
+            </thead>
+            <tbody>
+              {leaderboard.map((item, index) => {
+                // Hanya tampilkan jika poinnya > 0 agar bersih
+                if (item.taps === 0) return null;
+                return (
+                  <tr key={index} className="border-b border-slate-700/50 hover:bg-slate-700/30">
+                    <td className="py-3 px-2">#{index + 1}</td>
+                    <td className="py-3 px-2">
+                      {item.who === wallet ? <span className="text-green-400">{item.who} (Kamu)</span> : item.who}
+                    </td>
+                    <td className="py-3 px-2 text-right font-bold text-indigo-300">{item.taps}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+          {leaderboard.every(item => item.taps === 0) && (
+            <p className="text-center py-6 text-slate-500">Belum ada pemain. Jadilah yang pertama!</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Gaming;

package/src/pages/Home.jsx

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import { tupleCV, standardPrincipalCV, stringAsciiCV, cvToHex, hexToCV, cvToValue } from '@stacks/transactions';
+import { StacksMainnet } from '@stacks/network';
+import { userSession } from '../supabaseClient'; 
+
+const CONTRACT_ADDRESS = 'SP3GHKMV4GSYNA8WGBX83DACG80K1RRVQZAZMB9J3'; 
+const CONTRACT_NAME = 'genesis-core-v10';
+
+const BadgeCard = ({ id, title, subtitle, reqText, isLocked, isMinted, onMint, icon, isLoading }) => {
+  return (
+    <div className={`relative group flex flex-col justify-between p-6 rounded-xl border bg-app-card transition-all duration-300 animate-slide-up hover:-translate-y-1 ${
+      isLocked ? "border-app-border opacity-60" : isMinted ? "border-green-500/30" : "border-app-border hover:border-app-accent hover:shadow-lg hover:shadow-app-accent/5"
+    }`}>
+      
+      <div>
+        <div className="flex justify-between items-start mb-5">
+          <div className={`w-10 h-10 rounded-lg flex items-center justify-center text-lg border ${
+            isMinted ? "bg-green-500/10 border-green-500/20 text-green-400" : "bg-zinc-800 border-zinc-700 text-zinc-300"
+          }`}>
+            {isMinted ? "✓" : icon}
+          </div>
+          {isMinted && <span className="bg-green-500/10 text-green-400 border border-green-500/20 text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Owned</span>}
+          {isLocked && <span className="bg-zinc-800 text-zinc-500 border border-zinc-700 text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Locked</span>}
+        </div>
+        
+        <h3 className="text-lg font-semibold text-white mb-1">{title}</h3>
+        <p className="text-[11px] font-medium tracking-widest uppercase mb-4 text-app-accent">{subtitle}</p>
+        <p className="text-zinc-400 text-sm leading-relaxed mb-6">{reqText}</p>
+      </div>
+
+      <button
+        onClick={() => onMint(id)}
+        disabled={isLocked || isMinted || isLoading}
+        className={`w-full py-2.5 rounded-md text-sm font-medium transition-all ${
+          isMinted 
+            ? "bg-zinc-800/50 text-zinc-500 cursor-default" 
+            : isLocked 
+            ? "bg-zinc-800/50 text-zinc-600 cursor-not-allowed" 
+            : "bg-white text-black hover:bg-zinc-200 active:scale-95"
+        } ${isLoading && !isMinted ? "opacity-50 cursor-wait" : ""}`}
+      >
+        {isMinted ? "Badge Secured" : isLoading ? "Syncing..." : isLocked ? "Requirements Not Met" : "Mint Badge"}
+      </button>
+    </div>
+  );
+};
+
+const Home = ({ userData, userXP, userLevel, handleMint }) => {
+  const [loadingBadges, setLoadingBadges] = useState(false);
+  const network = new StacksMainnet();
+
+  const [badges, setBadges] = useState([
+    { id: 'genesis', title: "Genesis Pioneer", subtitle: "Phase 1 Access", reqText: "Awarded to early protocol adopters. Requires Level 1.", icon: "✧", minLevel: 1, minXP: 0, isMinted: false },
+    { id: 'node', title: "Node Operator", subtitle: "Consistency Tier", reqText: "Requires Level 2 and 500 XP. Validate your commitment via protocol synchronization.", icon: "⎈", minLevel: 2, minXP: 500, isMinted: false },
+    { id: 'guardian', title: "Protocol Guardian", subtitle: "Elite Status", reqText: "Requires Level 5 and 2000 XP. The highest honor for users who have secured the genesis protocol.", icon: "⛨", minLevel: 5, minXP: 2000, isMinted: false }
+  ]);
+
+  useEffect(() => {
+    if (userSession.isUserSignedIn() && userData) {
+      syncBadgeStatusFromBlockchain();
+    }
+  }, [userData]);
+
+  const syncBadgeStatusFromBlockchain = async () => {
+    setLoadingBadges(true);
+    const userAddress = userData.profile.stxAddress.mainnet;
+
+    try {
+      const updatedBadges = await Promise.all(
+        badges.map(async (badge) => {
+          try {
+            const keyCV = tupleCV({
+              'user': standardPrincipalCV(userAddress),
+              'badge-name': stringAsciiCV(badge.id)
+            });
+
+            const url = `${network.coreApiUrl}/v2/map_entry/${CONTRACT_ADDRESS}/${CONTRACT_NAME}/wallet-has-badge`;
+            const response = await fetch(url, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(cvToHex(keyCV)), 
+            });
+
+            if (!response.ok) return { ...badge, isMinted: false };
+
+            const data = await response.json();
+            const resultCV = hexToCV(data.data);
+            const val = cvToValue(resultCV); 
+
+            const isCompleted = val !== null && (val === true || val.value === true);
+            return { ...badge, isMinted: isCompleted };
+          } catch (err) {
+            return badge; 
+          }
+        })
+      );
+      setBadges(updatedBadges);
+    } catch (error) {
+      console.error("Error syncing badges:", error);
+    } finally {
+      setLoadingBadges(false);
+    }
+  };
+
+  const onMintClick = async (badgeId) => {
+    const txSucceeded = await handleMint(badgeId);
+    if (txSucceeded !== false) {
+      setBadges(prevBadges => prevBadges.map(b => b.id === badgeId ? { ...b, isMinted: true } : b));
+      setTimeout(() => syncBadgeStatusFromBlockchain(), 10000);
+    }
+  };
+
+  return (
+    <div className="space-y-8 animate-fade-in relative">
+      {loadingBadges && (
+        <div className="absolute -top-6 right-0 flex items-center text-xs text-app-muted animate-pulse-subtle">
+          Syncing records...
+        </div>
+      )}
+
+      {userData && (
+        <div className="flex flex-col md:flex-row gap-4 mb-8">
+          <div className="flex-1 bg-app-card border border-app-border p-5 rounded-xl">
+            <p className="text-zinc-500 text-[10px] font-bold uppercase tracking-wider mb-1">Accumulated XP</p>
+            <p className="text-3xl font-medium text-white tracking-tight">{userXP.toLocaleString()}</p>
+          </div>
+          <div className="flex-1 bg-app-card border border-app-border p-5 rounded-xl">
+            <p className="text-zinc-500 text-[10px] font-bold uppercase tracking-wider mb-1">Current Level</p>
+            <div className="flex items-baseline gap-2">
+              <p className="text-3xl font-medium text-white tracking-tight">{userLevel}</p>
+            </div>
+          </div>
+        </div>
+      )}
+      
+      <div>
+        <h2 className="text-xl font-semibold mb-4 text-white">Identity Badges</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+          {badges.map((badge, index) => {
+            const isLocked = !userData || userLevel < badge.minLevel || userXP < badge.minXP;
+            return (
+              <div key={badge.id} style={{ animationDelay: `${index * 100}ms` }}>
+                <BadgeCard {...badge} isLocked={isLocked} isLoading={loadingBadges} onMint={onMintClick} />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;

package/src/pages/LeaderboardCard.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+import {
+  callReadOnlyFunction,
+  makeContractCall,
+  AnchorMode,
+  PostConditionMode,
+  uintCV,
+  standardPrincipalCV
+} from "@stacks/transactions";
+import { StacksMainnet } from "@stacks/network";
+
+const CONTRACT_ADDRESS = "PASTE_YOUR_MAINNET_ADDRESS";
+const CONTRACT_NAME = "genesis-leaderboard-v1";
+
+const network = new StacksMainnet();
+
+export default function LeaderboardCard({ userAddress }: { userAddress: string }) {
+  const [score, setScore] = useState<number | null>(null);
+  const [tier, setTier] = useState<number | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function fetchScore() {
+    setLoading(true);
+
+    const result = await callReadOnlyFunction({
+      contractAddress: CONTRACT_ADDRESS,
+      contractName: CONTRACT_NAME,
+      functionName: "get-score",
+      functionArgs: [standardPrincipalCV(userAddress)],
+      network,
+      senderAddress: userAddress,
+    });
+
+    const tierResult = await callReadOnlyFunction({
+      contractAddress: CONTRACT_ADDRESS,
+      contractName: CONTRACT_NAME,
+      functionName: "get-rank-tier",
+      functionArgs: [standardPrincipalCV(userAddress)],
+      network,
+      senderAddress: userAddress,
+    });
+
+    // @ts-ignore
+    setScore(Number(result.value.data.score.value));
+    // @ts-ignore
+    setTier(Number(tierResult.value));
+
+    setLoading(false);
+  }
+
+  async function addScore() {
+    const txOptions = {
+      contractAddress: CONTRACT_ADDRESS,
+      contractName: CONTRACT_NAME,
+      functionName: "add-score",
+      functionArgs: [uintCV(10)],
+      anchorMode: AnchorMode.Any,
+      postConditionMode: PostConditionMode.Allow,
+      network,
+    };
+
+    await makeContractCall(txOptions);
+  }
+
+  return (
+    <div className="p-4 border rounded-xl shadow-lg">
+      <h2 className="text-xl font-bold mb-4">Genesis Leaderboard</h2>
+
+      <button
+        onClick={fetchScore}
+        className="px-4 py-2 bg-blue-500 text-white rounded-lg mb-2"
+      >
+        {loading ? "Loading..." : "Fetch My Score"}
+      </button>
+
+      <button
+        onClick={addScore}
+        className="px-4 py-2 bg-green-500 text-white rounded-lg mb-4"
+      >
+        Add +10 Score
+      </button>
+
+      {score !== null && (
+        <div>
+          <p><strong>Score:</strong> {score}</p>
+          <p><strong>Rank Tier:</strong> {tier}</p>
+        </div>
+      )}
+    </div>
+  );
+}