diff --git a/components/global-navbar.tsx b/components/global-navbar.tsx
index 5d819ee9..60868f8b 100644
--- a/components/global-navbar.tsx
+++ b/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() {
-
-
- {/* TODO: Replace with actual auth user ID */}
+
+
diff --git a/components/reputation/credit-balance.tsx b/components/reputation/credit-balance.tsx
index f3727373..8f1d7f91 100644
--- a/components/reputation/credit-balance.tsx
+++ b/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
;
}
diff --git a/components/ui/global-resizable-navbar.tsx b/components/ui/global-resizable-navbar.tsx
index f0d92bea..62795b7f 100644
--- a/components/ui/global-resizable-navbar.tsx
+++ b/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() {
-
+
+
diff --git a/hooks/use-spark-credits.ts b/hooks/use-spark-credits.ts
index d5259c6e..29cfff1b 100644
--- a/hooks/use-spark-credits.ts
+++ b/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
});