From 5b86cb853f942e25813cb66d0d926b1ccd23d8d9 Mon Sep 17 00:00:00 2001
From: Alfredo Bonilla <info@alfredobonilla.com>
Date: Thu, 20 Feb 2025 19:20:31 -0600
Subject: [PATCH] feat: fix wallet connection

---
 .../features/WalletConnectionCheck.tsx        | 55 +++++++++++++++++++
 apps/web/src/app/layout.tsx                   |  5 +-
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/app/_components/features/WalletConnectionCheck.tsx

diff --git a/apps/web/src/app/_components/features/WalletConnectionCheck.tsx b/apps/web/src/app/_components/features/WalletConnectionCheck.tsx
new file mode 100644
index 0000000..d2a51f3
--- /dev/null
+++ b/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;
+}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index f6bfda8..e6ebd03 100644
--- a/apps/web/src/app/layout.tsx
+++ b/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>