85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
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 } from "@/shared/solana_helpers";
|
|
import {Bet} from "../types/Bet";
|
|
export default function YourGames() {
|
|
const { wallets, ready } = useSolanaWallets();
|
|
const [openBets, setOpenBets] = useState<Bet[]>([]);
|
|
const [myBets, setMyBets] = useState<Bet[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Function to fetch open 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
|
|
}, [ready]);
|
|
|
|
return (
|
|
<section className="py-16 px-6">
|
|
<h2 className="text-3xl font-bold text-white mb-6">Your Games</h2>
|
|
|
|
{loading ? (
|
|
<p className="text-gray-400">Loading your games...</p>
|
|
) :
|
|
myBets.length === 0 ? <></> :(
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{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
|
|
|
|
return (
|
|
<div
|
|
key={bet.id}
|
|
className="relative group bg-[rgb(30,30,30)] rounded-2xl p-2 w-50 overflow-hidden cursor-pointer transition-all duration-300"
|
|
>
|
|
{/* Game Thumbnail */}
|
|
<div className="relative w-full h-40 overflow-hidden rounded-xl">
|
|
<Image
|
|
src={game.thumbnail}
|
|
alt={game.name}
|
|
layout="fill"
|
|
objectFit="cover"
|
|
className="transition-transform duration-300 group-hover:scale-110"
|
|
/>
|
|
</div>
|
|
|
|
{/* Game Info */}
|
|
<div className="mt-4 px-3 text-left">
|
|
<h3 className="text-lg font-semibold text-white py-2">{game.name}</h3>
|
|
<p className="text-xs text-gray-400 font-mono py-1">Wager</p>
|
|
<p className="text-xs text-white font-mono py-1">{bet.wager} SOL</p>
|
|
</div>
|
|
|
|
{/* Close Button (Trash Icon) */}
|
|
<button
|
|
className="absolute bottom-3 right-3 bg-red-600 text-white p-2 rounded-full transition duration-300 hover:bg-red-800"
|
|
onClick={() => console.log(`Removing bet ${bet.id}`)}
|
|
>
|
|
<FiTrash size={16} />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|