From dafcdd4a901bfac11da626ffcb2b8c6da3240f13 Mon Sep 17 00:00:00 2001 From: Neeraj Choubisa Date: Thu, 12 Jun 2025 21:11:42 +0530 Subject: [PATCH] Twitter Button Added --- package-lock.json | 6 ++ packages/app/src/app/page.tsx | 141 +++++++++++++++++++++------------- 2 files changed, 94 insertions(+), 53 deletions(-) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..282d99e --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "chain-derby", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/packages/app/src/app/page.tsx b/packages/app/src/app/page.tsx index 7296e37..8c8108c 100644 --- a/packages/app/src/app/page.tsx +++ b/packages/app/src/app/page.tsx @@ -12,30 +12,38 @@ import { ChainRaceStatus } from "@/hooks/useChainRace"; import dynamic from "next/dynamic"; // Dynamic import for LeaderboardPanel (only loaded when racing/finished) -const LeaderboardPanel = dynamic(() => import("@/components/LeaderboardPanel").then(mod => ({ default: mod.LeaderboardPanel })), { - loading: () => ( - -
-
-
- - ), - ssr: false // Since this only shows during racing, no need for SSR -}); +const LeaderboardPanel = dynamic( + () => + import("@/components/LeaderboardPanel").then((mod) => ({ + default: mod.LeaderboardPanel, + })), + { + loading: () => ( + +
+
+
+ + ), + ssr: false, // Since this only shows during racing, no need for SSR + } +); export default function Home() { const { status } = useChainRaceContext(); // Create a stabilized status to prevent flickering const [stableStatus, setStableStatus] = useState(status); - + useEffect(() => { - const isRacingOrFinished = (s: ChainRaceStatus) => s === "racing" || s === "finished"; - const isInitialState = (s: ChainRaceStatus) => s === "idle" || s === "funding" || s === "ready"; - + const isRacingOrFinished = (s: ChainRaceStatus) => + s === "racing" || s === "finished"; + const isInitialState = (s: ChainRaceStatus) => + s === "idle" || s === "funding" || s === "ready"; + // For transitions to racing or finished, update immediately if (isRacingOrFinished(status)) { setStableStatus(status); - } + } // For transitions from racing/finished to other states, add a delay else if (isRacingOrFinished(stableStatus) && !isRacingOrFinished(status)) { // Only allow transition away from racing/finished if it's a deliberate action (like reset) @@ -47,59 +55,86 @@ export default function Home() { } // Otherwise ignore the status change - keep showing race UI // This prevents balance checks from affecting the UI - } + } // For initial states (idle, funding, ready) else if (isInitialState(status)) { setStableStatus(status); } }, [status, stableStatus]); - + return (
- +
-
- {/* Chain Derby Visualization (shown when racing or finished) */} - {(stableStatus === "racing" || stableStatus === "finished") && ( - - )} - -
- {/* Wallet Information */} - - {/* Race Controller */} - -
- - -
-
); -} \ No newline at end of file +}