feat: fix wallet connection

apps/web/src/app/_components/features/WalletConnectionCheck.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useAccount } from "@starknet-react/core";
+import { useSession } from "next-auth/react";
+import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import WalletConnectFlow from "./WalletConnectFlow";
+
+interface WalletConnectionCheckProps {
+	children: React.ReactNode;
+}
+
+export default function WalletConnectionCheck({
+	children,
+}: WalletConnectionCheckProps) {
+	const { data: session, status } = useSession();
+	const { address } = useAccount();
+	const [showConnectPrompt, setShowConnectPrompt] = useState(false);
+	const { t } = useTranslation();
+
+	useEffect(() => {
+		// Only show the connect prompt if there's a session but no wallet
+		// and we're not in a loading state
+		if (status === "authenticated" && session && !address) {
+			setShowConnectPrompt(true);
+			toast.error(t("please_connect_wallet"));
+		} else {
+			setShowConnectPrompt(false);
+		}
+	}, [session, address, status, t]);
+
+	// Don't show prompt during loading/transitioning states
+	if (status === "loading") {
+		return children;
+	}
+
+	if (showConnectPrompt) {
+		return (
+			<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+				<div className="bg-white p-6 rounded-lg shadow-xl max-w-md w-full mx-4">
+					<h2 className="text-xl font-bold text-center mb-4">
+						{t("connect_wallet")}
+					</h2>
+					<p className="text-gray-600 text-center mb-6">
+						{t("connect_wallet_description")}
+					</p>
+					<WalletConnectFlow />
+				</div>
+			</div>
+		);
+	}
+
+	return children;
+}

apps/web/src/app/layout.tsx

@@ -9,6 +9,7 @@ import { SessionProvider } from "next-auth/react";
 import i18n from "~/i18n";
 import StarknetProvider from "~/providers/starknet";
 import { TRPCReactProvider } from "~/trpc/react";
+import WalletConnectionCheck from "./_components/features/WalletConnectionCheck";
 
 export default function RootLayout({
 	children,
@@ -33,7 +34,9 @@ export default function RootLayout({
 				<SessionProvider>
 					<StarknetProvider>
 						<TRPCReactProvider>
-							<div className="pb-20">{children}</div>
+							<WalletConnectionCheck>
+								<div className="pb-20">{children}</div>
+							</WalletConnectionCheck>
 						</TRPCReactProvider>
 					</StarknetProvider>
 				</SessionProvider>