Fix navbar user-specific balances

components/global-navbar.tsx

@@ -12,6 +12,7 @@ import { useSmartWallet } from "@/components/providers/smart-wallet-provider";
 import { WalletInfo } from "@/types/wallet";
 import { CreditBalance } from "@/components/reputation/credit-balance";
 import { Button } from "@/components/ui/button";
+import { authClient } from "@/lib/auth-client";
 import { ModeToggle } from "./mode-toggle";
 import { SecureAccountStep } from "./onboarding/secure-account-step";
 import {
@@ -27,6 +28,8 @@ import { Wallet, LogIn, Fingerprint } from "lucide-react";
 
 export function GlobalNavbar() {
   const pathname = usePathname();
+  const { data: session } = authClient.useSession();
+  const userId = session?.user?.id;
   const userRole = useUserRole();
   const { walletInfo, isConnected, isRegistered, connect, isLoading } =
     useSmartWallet();
@@ -140,9 +143,8 @@ export function GlobalNavbar() {
         </div>
 
         <div className="flex items-center gap-3">
-          <NavRankBadge userId="user-1" className="hidden sm:flex" />
-          <CreditBalance userId="user-1" className="hidden sm:flex" />
-          {/* TODO: Replace with actual auth user ID */}
+          <NavRankBadge userId={userId} className="hidden sm:flex" />
+          <CreditBalance userId={userId} className="hidden sm:flex" />
 
           <NotificationCenter />
 

components/reputation/credit-balance.tsx

@@ -12,13 +12,15 @@ import { cn } from "@/lib/utils";
 import { Zap } from "lucide-react";
 
 interface CreditBalanceProps {
-  userId: string;
+  userId?: string;
   className?: string;
 }
 
 export function CreditBalance({ userId, className }: CreditBalanceProps) {
   const { data, isLoading, isError } = useSparkCreditsBalance(userId);
 
+  if (!userId) return null;
+
   if (isLoading) {
     return <Skeleton className="h-6 w-14 rounded-full" />;
   }

components/ui/global-resizable-navbar.tsx

@@ -12,10 +12,14 @@ import {
   MobileNavMenu,
 } from "@/components/ui/resizable-navbar";
 import { NavRankBadge } from "@/components/leaderboard/nav-rank-badge";
+import { CreditBalance } from "@/components/reputation/credit-balance";
 import { SearchCommand } from "@/components/search-command";
 import { ModeToggle } from "@/components/mode-toggle";
+import { authClient } from "@/lib/auth-client";
 
 export default function GlobalResizableNavbar() {
+  const { data: session } = authClient.useSession();
+  const userId = session?.user?.id;
 
   const navItems = [
     { name: "Explore", link: "/bounty" },
@@ -37,7 +41,8 @@ export default function GlobalResizableNavbar() {
         <NavItems items={navItems} />
 
         <div className="flex items-center gap-2">
-          <NavRankBadge userId="user-1" className="hidden sm:flex" />
+          <NavRankBadge userId={userId} className="hidden sm:flex" />
+          <CreditBalance userId={userId} className="hidden sm:flex" />
           <SearchCommand />
           <ModeToggle />
         </div>

hooks/use-spark-credits.ts

@@ -9,10 +9,10 @@ export const SPARK_CREDITS_KEYS = {
     [...SPARK_CREDITS_KEYS.all, "history", userId, limit] as const,
 };
 
-export function useSparkCreditsBalance(userId: string) {
+export function useSparkCreditsBalance(userId?: string) {
   return useQuery({
-    queryKey: SPARK_CREDITS_KEYS.balance(userId),
-    queryFn: () => sparkCreditsApi.fetchBalance(userId),
+    queryKey: SPARK_CREDITS_KEYS.balance(userId ?? ""),
+    queryFn: () => sparkCreditsApi.fetchBalance(userId ?? ""),
     enabled: !!userId,
     staleTime: 1000 * 60 * 2, // 2 minutes
   });