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 ( +
+ {t("connect_wallet_description")} +
+