duelfi_web/src/components/GameModal.tsx
2025-04-03 04:45:57 +05:30

76 lines
2.2 KiB
TypeScript

"use client";
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 { 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;
}
export default function GameModal({ isOpen, onClose }: GameModalProps) {
const { wallets } = useSolanaWallets();
const { authenticated } = usePrivy();
const [selectedGame, setSelectedGame] = useState<Game | null>(null);
const [selectedPrice, setSelectedPrice] = useState<number | null>(null);
const handleCreateGame = async () => {
if (!authenticated) {
toast.error("Please log in with Privy.");
return;
}
const wallet = wallets[0]; // Get connected Privy wallet
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();
};
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black/70 flex justify-center items-start pt-10 z-50" onClick={onClose}>
<div
className="bg-[rgb(30,30,30)] text-white w-full max-w-lg p-6 rounded-2xl shadow-lg"
onClick={(e) => e.stopPropagation()}
>
<h2 className="text-xl font-bold mb-4">Create Game</h2>
{/* Game Selection */}
<GameSelection games={games} selectedGame={selectedGame} onSelect={setSelectedGame} />
{/* Price Selection */}
<PriceSelection selectedPrice={selectedPrice} onSelect={setSelectedPrice} />
<button
className="mt-6 w-full py-2 rounded-xl font-semibold bg-[rgb(248,144,22)] text-black hover:bg-white hover:scale-105"
onClick={handleCreateGame}
>
Confirm & Create Bet
</button>
</div>
</div>
);
}