privy global

src/app/page.tsx

@@ -1,15 +1,41 @@
+"use client";
+
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import HeroSection from "@/components/Home";
+import { PrivyProvider } from "@privy-io/react-auth";
+import { toSolanaWalletConnectors } from "@privy-io/react-auth/solana";
 
 export default function Home() {
   return (
     
     <div className="bg-[rgb(22,22,22)]">
+      <PrivyProvider
+    appId="cm8spd7l600lfe4am1phq9qq8"
+    clientId="client-WY5i4HS6T7JP44iKMQUyZXwftzwKLFvEsGvMtFY1znXSj"
+    config={{
+      // Customize Privy's appearance in your app
+      appearance: {
+        theme: 'dark',
+        accentColor: '#f89016',
+        logo: 'https://your-logo-url'
+      },
+      // Create embedded wallets for users who don't have a wallet
+      embeddedWallets: {
+        createOnLogin: 'users-without-wallets'
+      },
+      externalWallets:{
+        solana:{connectors:toSolanaWalletConnectors()}
+      }
+    
+    }}
+  >
       <Header/>
       <HeroSection/>
       <Footer/>
+      </PrivyProvider>
     </div>
+    
   );
 
 }

src/components/Header.tsx

@@ -4,9 +4,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { FaTelegram, FaXTwitter } from "react-icons/fa6";
 import { useState } from "react";
-import { PrivyProvider } from "@privy-io/react-auth";
 import PrivyButton from "./PrivyButton";
-import { toSolanaWalletConnectors } from "@privy-io/react-auth/solana";
 
 export default function Header() {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -16,26 +14,7 @@ export default function Header() {
   };
 
   return (
-    <><PrivyProvider
-    appId="cm8spd7l600lfe4am1phq9qq8"
-    clientId="client-WY5i4HS6T7JP44iKMQUyZXwftzwKLFvEsGvMtFY1znXSj"
-    config={{
-      // Customize Privy's appearance in your app
-      appearance: {
-        theme: 'dark',
-        accentColor: '#f89016',
-        logo: 'https://your-logo-url'
-      },
-      // Create embedded wallets for users who don't have a wallet
-      embeddedWallets: {
-        createOnLogin: 'users-without-wallets'
-      },
-      externalWallets:{
-        solana:{connectors:toSolanaWalletConnectors()}
-      }
-    
-    }}
-  >
+    <>
     <header className="w-full bg-[rgb(22,22,22)] shadow-md">
       <div className="container mx-auto flex items-center justify-between p-12 max-w-screen-xl w-full">
         {/* Logo */}
@@ -193,6 +172,6 @@ export default function Header() {
         </div>
       )}
     </header>
-    </PrivyProvider></>
+    </>
   );
 }

src/components/Home.tsx

@@ -4,14 +4,15 @@ import { useState } from "react";
 import Image from "next/image";
 import OpenGames from "./OpenGames";
 import { Game, games } from "../data/games";
+import { usePrivy } from "@privy-io/react-auth";
+import { toast } from "react-toastify";
 
 export default function HeroSection() {
+  const { ready, authenticated } = usePrivy();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isGameModalOpen, setIsGameModalOpen] = useState(false);
   const [selectedGame, setSelectedGame] = useState<Game | null>(null);
   const [selectedPrice, setSelectedPrice] = useState<number | null>(null);
-  const [isSignedIn, setIsSignedIn] = useState(false); // Replace with actual authentication logic
-  const [authMessage, setAuthMessage] = useState(""); // Message for sign-in prompt
 
   const prices = [0.2, 0.5, 0.8];
 
@@ -19,22 +20,19 @@ export default function HeroSection() {
   const handlePriceSelect = (price: number) => setSelectedPrice(price);
 
   const handleCreateGame = () => {
-    if (!isSignedIn) {
-      setAuthMessage("Please sign in first.");
-      return;
-    }
+    if (!authenticated) return; // Don't proceed if not signed in
+
     if (selectedGame && selectedPrice !== null) {
       console.log(`Creating game: ${selectedGame.name} with price ${selectedPrice} SOL`);
       setIsGameModalOpen(false);
     } else {
-      console.log("Please select a game and a price.");
+      toast.warn("Please select a game and a price.");
     }
   };
 
   const closeModals = () => {
     setIsModalOpen(false);
     setIsGameModalOpen(false);
-    setAuthMessage(""); // Clear message when modal is closed
   };
 
   return (
@@ -55,13 +53,7 @@ export default function HeroSection() {
 
         <button
           className="mt-12 px-12 py-4 bg-[rgb(248,144,22)] hover:bg-white text-black text-sm font-semibold rounded-xl flex items-center gap-2 transition duration-300 hover:scale-110"
-          onClick={() => {
-            if (!isSignedIn) {
-              setAuthMessage("Please sign in first.");
-            } else {
-              setIsGameModalOpen(true);
-            }
-          }}
+          onClick={() => setIsGameModalOpen(true)}
         >
           Create a Game
           <svg
@@ -89,24 +81,6 @@ export default function HeroSection() {
         <OpenGames />
       </section>
 
-      {/* Authentication Prompt */}
-      {authMessage && (
-        <div className="fixed inset-0 bg-black/70 flex justify-center items-center z-50" onClick={closeModals}>
-          <div
-            className="bg-[rgb(30,30,30)] text-white w-full max-w-sm p-6 rounded-2xl shadow-lg"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <p className="text-center text-lg">{authMessage}</p>
-            <button
-              className="mt-4 w-full bg-[rgb(248,144,22)] text-black font-semibold py-2 rounded-xl transition hover:bg-white hover:scale-105"
-              onClick={closeModals}
-            >
-              Okay
-            </button>
-          </div>
-        </div>
-      )}
-
       {/* Game Modal */}
       {isGameModalOpen && (
         <div className="fixed inset-0 bg-black/70 flex justify-center items-start pt-10 z-50" onClick={closeModals}>
@@ -159,12 +133,21 @@ export default function HeroSection() {
               ))}
             </div>
 
+            {/* Create Game Button */}
             <button
-              className="mt-6 w-full bg-[rgb(248,144,22)] text-black font-semibold py-2 rounded-xl transition hover:bg-white hover:scale-105"
+              className={`mt-6 w-full py-2 rounded-xl font-semibold transition
+                ${authenticated ? "bg-[rgb(248,144,22)] text-black hover:bg-white hover:scale-105" : "bg-gray-600 text-gray-400 cursor-not-allowed"}
+              `}
               onClick={handleCreateGame}
+              disabled={!authenticated}
             >
               Create Game
             </button>
+
+            {/* Warning if Not Signed In */}
+            {!authenticated && (
+              <p className="text-red-500 text-sm text-center mt-2">Please sign in first</p>
+            )}
           </div>
         </div>
       )}