From 609fdcad20a1de5593ba34fe2408188bf2fc803e Mon Sep 17 00:00:00 2001 From: warlock Date: Thu, 3 Apr 2025 05:37:29 +0530 Subject: [PATCH] bet creation and close complete --- src/components/GameModal.tsx | 70 ++++++++++++++++++------------- src/components/YourGames.tsx | 80 +++++++++++++++++++++++------------- 2 files changed, 93 insertions(+), 57 deletions(-) diff --git a/src/components/GameModal.tsx b/src/components/GameModal.tsx index fda9399..d7c3ed1 100644 --- a/src/components/GameModal.tsx +++ b/src/components/GameModal.tsx @@ -3,14 +3,12 @@ import { useState } from "react"; import { usePrivy, useSolanaWallets } from "@privy-io/react-auth"; import { toast } from "sonner"; -import { games } from "../data/games"; // Assuming you have a games data file +import { games } from "../data/games"; import { PriceSelection } from "./PriceSelection"; import { GameSelection } from "./GameSelection"; import { createBet } from "@/shared/solana_helpers"; import { Game } from "@/types/Game"; - // Change to Mainnet when deploying - interface GameModalProps { isOpen: boolean; onClose: () => void; @@ -22,53 +20,67 @@ export default function GameModal({ isOpen, onClose }: GameModalProps) { const [selectedGame, setSelectedGame] = useState(null); const [selectedPrice, setSelectedPrice] = useState(null); - - + const [isProcessing, setIsProcessing] = useState(false); const handleCreateGame = async () => { - if (!authenticated) { toast.error("Please log in with Privy."); return; } - - const wallet = wallets[0]; // Get connected Privy wallet + + const wallet = wallets[0]; if (!wallet) { toast.error("Please connect your wallet."); return; } - + if (!selectedGame || selectedPrice === null) { toast.error("Please select a game and a price."); return; } - - await createBet(wallets[0],selectedPrice,selectedGame); - onClose(); + + setIsProcessing(true); + try { + await createBet(wallet, selectedPrice, selectedGame); + onClose(); + } catch (error) { + console.error("Error creating bet:", error); + toast.error("Failed to create bet. Please try again."); + } finally { + setIsProcessing(false); + } + + }; if (!isOpen) return null; return (
-
e.stopPropagation()} - > -

Create Game

+
e.stopPropagation()}> + {isProcessing ? ( +
+ + + + +

Processing...

+

Creating your bet, please wait...

+
+ ) : ( + <> +

Create Game

+ + - {/* Game Selection */} - - - {/* Price Selection */} - - - + + + )}
); diff --git a/src/components/YourGames.tsx b/src/components/YourGames.tsx index 296437f..1462454 100644 --- a/src/components/YourGames.tsx +++ b/src/components/YourGames.tsx @@ -4,7 +4,7 @@ import Image from "next/image"; import { games } from "../data/games"; import { FiTrash } from "react-icons/fi"; import { useSolanaWallets } from "@privy-io/react-auth"; -import { fetchOpenBets, closeBet } from "@/shared/solana_helpers"; // Import close function +import { fetchOpenBets, closeBet } from "@/shared/solana_helpers"; import { Bet } from "../types/Bet"; export default function YourGames() { @@ -12,40 +12,37 @@ export default function YourGames() { const [openBets, setOpenBets] = useState([]); const [myBets, setMyBets] = useState([]); const [loading, setLoading] = useState(true); + const [selectedBet, setSelectedBet] = useState(null); + const [isProcessing, setIsProcessing] = useState(false); - // Function to fetch open bets + // Fetch bets const updateBets = async () => { const bets: Bet[] = await fetchOpenBets(wallets[0]); setMyBets(bets.filter((bet) => bet.owner === wallets[0].address)); setOpenBets(bets); setLoading(false); - console.log(`Got ${bets.length} bets`); }; - // Auto-refresh every 10 seconds useEffect(() => { if (!ready) return; updateBets(); - const interval = setInterval(updateBets, 10000); // Refresh every 10s - - return () => clearInterval(interval); // Cleanup on unmount + const interval = setInterval(updateBets, 10000); + return () => clearInterval(interval); }, [ready]); - // Function to handle bet closing - const handleCloseBet = async (bet: Bet) => { - const confirmed = window.confirm( - `Are you sure you want to close this bet? You will receive your refund back to your wallet.` - ); - if (!confirmed) return; - + // Handle bet closing + const handleCloseBet = async () => { + if (!selectedBet) return; + setIsProcessing(true); try { - console.log(`Closing bet ${bet.id}`); - await closeBet(wallets[0], bet.id); - alert("Bet closed successfully!"); - updateBets(); // Refresh bets after closing + await closeBet(wallets[0], selectedBet.id); + updateBets(); } catch (error) { console.error("Error closing bet:", error); alert("Failed to close the bet. Please try again."); + } finally { + setIsProcessing(false); + setSelectedBet(null); } }; @@ -60,16 +57,11 @@ export default function YourGames() { ) : (
{myBets.map((bet) => { - console.log(`Finding game for the id ${bet.id}`); - const game = games.find((g) => g.id === bet.id); // Match game - - if (!game) return null; // Skip unmatched bets + const game = games.find((g) => g.id === bet.id); + if (!game) return null; return ( -
+
{/* Game Thumbnail */}
{bet.wager} SOL

- {/* Close Button (Trash Icon) */} + {/* Close Button */} @@ -100,6 +92,38 @@ export default function YourGames() { })}
)} + + {/* Confirmation Modal */} + {selectedBet && !isProcessing && ( +
+
+

Close Bet

+

Are you sure you want to close this bet? You will receive your refund back to your wallet.

+
+ + +
+
+
+ )} + + {/* Processing Modal */} + {isProcessing && ( +
+
+ + + + +

Processing...

+

Please wait while we close your bet.

+
+
+ )} ); }