diff --git a/src/components/FirstVisitModal.tsx b/src/components/FirstVisitModal.tsx new file mode 100644 index 0000000..83c8bf8 --- /dev/null +++ b/src/components/FirstVisitModal.tsx @@ -0,0 +1,67 @@ +import { useEffect, useState } from "react"; + +interface FirstVisitModalProps { + isOpen: boolean; + onClose: () => void; +} + +export function FirstVisitModal({ isOpen, onClose }: FirstVisitModalProps) { + const [shouldRender, setShouldRender] = useState(isOpen); + const [animationClass, setAnimationClass] = useState(""); + + useEffect(() => { + if (isOpen) { + setShouldRender(true); + setAnimationClass("modal-enter"); + } else { + setAnimationClass("modal-exit"); + // Wait for animation to finish before unmounting + const timer = setTimeout(() => setShouldRender(false), 200); // match animation duration + return () => clearTimeout(timer); + } + }, [isOpen]); + + if (!shouldRender) return null; + + return ( +
+
e.stopPropagation()} + > +

Welcome to DuelFi.io!

+ +
+

+ Challenge your friends (or strangers) in a head-to-head skill games and earn from your victories! +
+
+ Create or join duels, set an entry fee, and the winner takes all. +

+ + {[ + { step: "New here? Check out our", desc: "Whitepaper to understand how everything works." }, + { step: "Got questions or just wanna vibe with the squad?", desc: "Join our Telegram." }, + ].map(({ step, desc }, index) => ( +
+

+ {step} +

+

{desc}

+
+ ))} +
+ + +
+
+ ); +} \ No newline at end of file diff --git a/src/components/GameHistory.tsx b/src/components/GameHistory.tsx index 3bcbe86..59db20f 100644 --- a/src/components/GameHistory.tsx +++ b/src/components/GameHistory.tsx @@ -51,7 +51,7 @@ export default function GameHistoryModal({ ); const gameData = res.data || []; setGamesHistory(gameData); - + console.log(`history data ${gameData}`); const opponentIds: string[] = gameData.map((game: GameHistory) => game.master_id === userId ? game.client_id : game.master_id ); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 0938810..3c6cf0e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -141,20 +141,24 @@ export default function Header() { {/* Mobile Navigation Links */}
- setIsDrawerOpen(false)} // Close drawer on link click + onClick={() => setIsDrawerOpen(false)} > Whitepaper - - setIsDrawerOpen(false)} // Close drawer on link click + + {/* Socials */} ([]); const [solWallet, setSolWallet] = useState(); const [myActiveBet, setMyActiveBet] = useState(); @@ -28,6 +30,17 @@ export default function HeroSection() { const { user } = usePrivy(); const iframeRef = useRef(null); + // Check if this is the user's first visit + useEffect(() => { + if (typeof window !== 'undefined') { + const hasVisited = localStorage.getItem('duelfi_has_visited'); + if (!hasVisited) { + setIsFirstVisitModalOpen(true); + localStorage.setItem('duelfi_has_visited', 'true'); + } + } + }, []); + const game_close_signal = (status: number) => { setRematch(status == 1); setMyActiveBet(undefined); @@ -315,6 +328,7 @@ export default function HeroSection() { setIsGameModalOpen(false)} /> setIsModalOpen(false)} /> + setIsFirstVisitModalOpen(false)} /> ); } diff --git a/src/components/PriceSelection.tsx b/src/components/PriceSelection.tsx index 804691a..336fc7c 100644 --- a/src/components/PriceSelection.tsx +++ b/src/components/PriceSelection.tsx @@ -6,9 +6,9 @@ interface PriceSelectionProps { } export function PriceSelection({ selectedPrice, onSelect }: PriceSelectionProps) { - const presets = [0.05, 0.1, 0.2, 0.5, 1.0]; + const presets = [0.01, 0.05, 0.1, 0.2, 0.5, 1.0]; const [inputValue, setInputValue] = useState(""); - const MIN_AMOUNT = 0.05; + const MIN_AMOUNT = 0.01; useEffect(() => { if (selectedPrice !== null) { diff --git a/src/components/PrivyButton.tsx b/src/components/PrivyButton.tsx index 25da2f2..847a8fd 100644 --- a/src/components/PrivyButton.tsx +++ b/src/components/PrivyButton.tsx @@ -14,6 +14,7 @@ import { WAGER_PRIZE_MULT } from "@/shared/constants"; import { EXPLORER_ADDRESS_TEMPLATE } from "@/data/shared"; interface GameHistory { + ended_time: string; address: string; master_score: string; client_score: string; @@ -249,8 +250,10 @@ export default function PrivyButton() { const fetchGames = async () => { setLoading(true); try { + const url= `${API_URL}get_game_history.php?uid=${user.id}`; + console.log(`history data ${url}`); const res = await axios.get( - `${API_URL}get_game_history.php?uid=${user.id}` + url ); const gameData = res.data || []; setGamesHistory(gameData); @@ -522,94 +525,99 @@ export default function PrivyButton() {

No games played yet.

) : (
- {gamesHistory.map((game, idx) => { - const isUserMaster = game.master_id === user.id; - const userScore = isUserMaster - ? game.master_score - : game.client_score; - const opponentScore = isUserMaster - ? game.client_score - : game.master_score; - const opponentId = isUserMaster - ? game.client_id - : game.master_id; - const didUserWin = - (isUserMaster && game.winner === "master") || - (!isUserMaster && game.winner === "client"); + {gamesHistory + .sort((a, b) => new Date(b.ended_time).getTime() - new Date(a.ended_time).getTime()) + .map((game, idx) => { + const isUserMaster = game.master_id === user.id; + const userScore = isUserMaster + ? game.master_score + : game.client_score; + const opponentScore = isUserMaster + ? game.client_score + : game.master_score; + const opponentId = isUserMaster + ? game.client_id + : game.master_id; + const didUserWin = + (isUserMaster && game.winner === "master") || + (!isUserMaster && game.winner === "client"); - const opponent = opponentInfo[opponentId]; - const profileUrl = - opponent?.x_profile_url || - (opponent?.username - ? `${API_URL}profile_picture/${opponent.username}.jpg` - : "/duelfiassets/default-avatar.png"); + const opponent = opponentInfo[opponentId]; + const profileUrl = + opponent?.x_profile_url || + (opponent?.username + ? `${API_URL}profile_picture/${opponent.username}.jpg` + : "/duelfiassets/default-avatar.png"); - const gameImageUrl = gameImages[game.game] || "/duelfiassets/default-game-thumbnail.png"; + const gameImageUrl = gameImages[game.game] || "/duelfiassets/default-game-thumbnail.png"; - const wagerAmount = parseFloat(game.wager); - const outcomeText = didUserWin - ? `+${(wagerAmount / 1e8) * 2 * WAGER_PRIZE_MULT} SOL` - : `-${(wagerAmount / 1e8)} SOL`; + const wagerAmount = parseFloat(game.wager); + const outcomeText = didUserWin + ? `+${(wagerAmount / 1e8) * 2 * WAGER_PRIZE_MULT} SOL` + : `-${(wagerAmount / 1e8)} SOL`; - return ( -
-
-

- {opponent?.username || "Unknown Opponent"} -

-

- Score: {userScore} - {opponentScore} -

-

- {didUserWin ? "You won" : "You lost"} -

-

- {outcomeText} -

+ return ( +
+
+

+ {opponent?.username || "Unknown Opponent"} +

+

+ Score: {userScore} - {opponentScore} +

+

+ {new Date(game.ended_time).toLocaleString()} +

+

+ {didUserWin ? "You won" : "You lost"} +

+

+ {outcomeText} +

+
+ Profile { + // @ts-expect-error - Type mismatch expected + e.target.src = defaultPFP; + setFailedImages(prev => new Set(prev).add(profileUrl)); + }} + /> + Game Thumbnail { + // @ts-expect-error - Type mismatch expected + e.target.src = "/duelfiassets/default-game-thumbnail.png"; + setFailedImages(prev => new Set(prev).add(gameImageUrl)); + }} + /> + +
+ +
- Profile { - // @ts-expect-error - Type mismatch expected - e.target.src = defaultPFP; - setFailedImages(prev => new Set(prev).add(profileUrl)); - }} - /> - Game Thumbnail { - // @ts-expect-error - Type mismatch expected - e.target.src = "/duelfiassets/default-game-thumbnail.png"; - setFailedImages(prev => new Set(prev).add(gameImageUrl)); - }} - /> - -
- -
-
- ); - })} + ); + })}
)}