From f3e8492d4454f1a98b9312fba09ffc1f75da8750 Mon Sep 17 00:00:00 2001
From: Starknet Dev <starknetdev@gmail.com>
Date: Mon, 10 Feb 2025 19:55:16 +0000
Subject: [PATCH] add prizes to season table

---
 .../app/components/leaderboard/SeasonRow.tsx  | 20 ++++++++++++-
 .../components/leaderboard/SeasonTable.tsx    | 28 +++++++++++++++++++
 .../app/components/start/CreateAdventurer.tsx | 22 ++-------------
 ui/src/app/containers/AdventurerScreen.tsx    |  3 ++
 ui/src/app/containers/LeaderboardScreen.tsx   |  9 +++++-
 ui/src/app/page.tsx                           | 24 ++++++++++++++--
 6 files changed, 83 insertions(+), 23 deletions(-)

diff --git a/ui/src/app/components/leaderboard/SeasonRow.tsx b/ui/src/app/components/leaderboard/SeasonRow.tsx
index 54692e2a3..4a627fd87 100644
--- a/ui/src/app/components/leaderboard/SeasonRow.tsx
+++ b/ui/src/app/components/leaderboard/SeasonRow.tsx
@@ -8,9 +8,15 @@ interface SeasonRowProps {
   rank: number;
   adventurer: Adventurer;
   handleRowSelected: (id: number) => void;
+  prize: any;
 }
 
-const SeasonRow = ({ rank, adventurer, handleRowSelected }: SeasonRowProps) => {
+const SeasonRow = ({
+  rank,
+  adventurer,
+  handleRowSelected,
+  prize,
+}: SeasonRowProps) => {
   const { play: clickPlay } = useUiSounds(soundSelector.click);
   const adventurersByOwner = useQueriesStore(
     (state) => state.data.adventurersByOwnerQuery?.adventurers ?? []
@@ -25,6 +31,17 @@ const SeasonRow = ({ rank, adventurer, handleRowSelected }: SeasonRowProps) => {
   );
   const topScoreAdventurer = topScores[0]?.id === adventurer.id;
 
+  const variant = prize?.[0]?.token_data_type?.option as "erc20" | "erc721";
+
+  const isERC20 = variant === "erc20";
+  const tokenValue = prize
+    ? Number(
+        isERC20
+          ? prize?.[0]?.token_data_type?.erc20?.token_amount
+          : prize?.[0]?.token_data_type?.erc721?.token_id
+      )
+    : 0;
+
   return (
     <tr
       className={`text-center border-b border-terminal-green hover:bg-terminal-green/75 hover:text-terminal-black cursor-pointer xl:h-2 xl:text-lg 2xl:text-xl 2xl:h-10 ${
@@ -64,6 +81,7 @@ const SeasonRow = ({ rank, adventurer, handleRowSelected }: SeasonRowProps) => {
       <td>
         <span className="flex justify-center">{adventurer.health}</span>
       </td>
+      <td>{tokenValue !== 0 ? `$${tokenValue / 10 ** 18} CASH` : "-"}</td>
     </tr>
   );
 };
diff --git a/ui/src/app/components/leaderboard/SeasonTable.tsx b/ui/src/app/components/leaderboard/SeasonTable.tsx
index a8269c5d2..a35a0833d 100644
--- a/ui/src/app/components/leaderboard/SeasonTable.tsx
+++ b/ui/src/app/components/leaderboard/SeasonTable.tsx
@@ -16,11 +16,13 @@ import { useMemo, useState } from "react";
 export interface SeasonTableProps {
   itemsPerPage: number;
   handleFetchProfileData: (adventurerId: number) => void;
+  prizes: any;
 }
 
 const SeasonTable = ({
   itemsPerPage,
   handleFetchProfileData,
+  prizes,
 }: SeasonTableProps) => {
   const [currentPage, setCurrentPage] = useState<number>(1);
   const setScreen = useUIStore((state) => state.setScreen);
@@ -94,6 +96,22 @@ const SeasonTable = ({
       setCurrentPage(newPage);
     }
   };
+
+  const formattedPrizes =
+    prizes?.lsTournamentsV0TournamentPrizeModels?.edges ?? [];
+
+  const groupedPrizes = formattedPrizes.reduce((acc: any, prize: any) => {
+    const key = prize.node.payout_position;
+    const isERC20 = prize.node.token_data_type.option === "erc20";
+    if (isERC20) {
+      if (!acc[key]) acc[key] = [];
+      acc[key].push(prize.node);
+    } else {
+      acc[key] = [prize.node];
+    }
+    return acc;
+  }, {} as Record<string, typeof prizes>);
+
   return (
     <>
       {!adventurers ? (
@@ -120,6 +138,7 @@ const SeasonTable = ({
                       <th className="p-1">Level</th>
                       <th className="p-1">XP</th>
                       <th className="p-1">Health</th>
+                      <th className="p-1">Prize</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -130,6 +149,15 @@ const SeasonTable = ({
                           rank={index + 1 + (currentPage - 1) * itemsPerPage}
                           adventurer={adventurer}
                           handleRowSelected={handleRowSelected}
+                          prize={
+                            groupedPrizes[
+                              (
+                                index +
+                                1 +
+                                (currentPage - 1) * itemsPerPage
+                              ).toString()
+                            ]
+                          }
                         />
                       )
                     )}
diff --git a/ui/src/app/components/start/CreateAdventurer.tsx b/ui/src/app/components/start/CreateAdventurer.tsx
index b7ea1f0b9..1b212026b 100644
--- a/ui/src/app/components/start/CreateAdventurer.tsx
+++ b/ui/src/app/components/start/CreateAdventurer.tsx
@@ -3,14 +3,11 @@ import { AdventurerName } from "@/app/components/start/AdventurerName";
 import Prizes from "@/app/components/start/Prizes";
 import { Spawn } from "@/app/components/start/Spawn";
 import { WeaponSelect } from "@/app/components/start/WeaponSelect";
-import { getTournamentPrizes } from "@/app/hooks/graphql/queries";
 import useLoadingStore from "@/app/hooks/useLoadingStore";
 import useUIStore from "@/app/hooks/useUIStore";
-import { tournamentClient } from "@/app/lib/clients";
 import { networkConfig } from "@/app/lib/networkConfig";
 import { FormData } from "@/app/types";
-import { useQuery } from "@apollo/client";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Contract } from "starknet";
 
 export interface CreateAdventurerProps {
@@ -24,6 +21,7 @@ export interface CreateAdventurerProps {
   getBalances: () => Promise<void>;
   costToPlay: bigint;
   lordsDollarValue: () => Promise<bigint>;
+  tournamentPrizes: any;
 }
 
 export const CreateAdventurer = ({
@@ -37,6 +35,7 @@ export const CreateAdventurer = ({
   getBalances,
   costToPlay,
   lordsDollarValue,
+  tournamentPrizes,
 }: CreateAdventurerProps) => {
   const [formData, setFormData] = useState<FormData>({
     startingWeapon: "",
@@ -53,21 +52,6 @@ export const CreateAdventurer = ({
 
   const seasonActive = process.env.NEXT_PUBLIC_SEASON_ACTIVE === "true";
 
-  // Memoize both the variables AND the client
-  const { variables: tournamentVariables, client } = useMemo(() => {
-    return {
-      variables: {
-        tournamentId: networkConfig[network!].tournamentId,
-      },
-      client: tournamentClient(networkConfig[network!].tournamentGQLURL),
-    };
-  }, [network]); // Only recreate when network changes
-
-  const { data: tournamentPrizes } = useQuery(getTournamentPrizes, {
-    client,
-    variables: tournamentVariables,
-  });
-
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement> | KeyboardEvent) => {
       if (!event.currentTarget) return;
diff --git a/ui/src/app/containers/AdventurerScreen.tsx b/ui/src/app/containers/AdventurerScreen.tsx
index 2d7377533..e552ac5db 100644
--- a/ui/src/app/containers/AdventurerScreen.tsx
+++ b/ui/src/app/containers/AdventurerScreen.tsx
@@ -46,6 +46,7 @@ interface AdventurerScreenProps {
     name: string,
     index: number
   ) => Promise<void>;
+  tournamentPrizes: any;
 }
 
 /**
@@ -64,6 +65,7 @@ export default function AdventurerScreen({
   transferAdventurer,
   lordsDollarValue,
   changeAdventurerName,
+  tournamentPrizes,
 }: AdventurerScreenProps) {
   const [activeMenu, setActiveMenu] = useState(0);
   const setAdventurer = useAdventurerStore((state) => state.setAdventurer);
@@ -122,6 +124,7 @@ export default function AdventurerScreen({
             getBalances={getBalances}
             costToPlay={costToPlay}
             lordsDollarValue={lordsDollarValue}
+            tournamentPrizes={tournamentPrizes}
           />
         </div>
       )}
diff --git a/ui/src/app/containers/LeaderboardScreen.tsx b/ui/src/app/containers/LeaderboardScreen.tsx
index 09d227e22..3ee960ff6 100644
--- a/ui/src/app/containers/LeaderboardScreen.tsx
+++ b/ui/src/app/containers/LeaderboardScreen.tsx
@@ -14,11 +14,17 @@ import useUIStore from "@/app/hooks/useUIStore";
 import { Adventurer } from "@/app/types";
 import { useEffect, useState } from "react";
 
+interface LeaderboardScreenProps {
+  tournamentPrizes: any;
+}
+
 /**
  * @container
  * @description Provides the leaderboard screen for the adventurer.
  */
-export default function LeaderboardScreen() {
+export default function LeaderboardScreen({
+  tournamentPrizes,
+}: LeaderboardScreenProps) {
   const itemsPerPage = 10;
   const [showScores, setShowScores] = useState(false);
   const [showKilledBeasts, setShowKilledBeasts] = useState(false);
@@ -101,6 +107,7 @@ export default function LeaderboardScreen() {
             <SeasonTable
               itemsPerPage={itemsPerPage}
               handleFetchProfileData={handlefetchProfileData}
+              prizes={tournamentPrizes}
             />
           </div>
           <div
diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
index adc477a96..ceb845eb4 100644
--- a/ui/src/app/page.tsx
+++ b/ui/src/app/page.tsx
@@ -44,6 +44,7 @@ import {
   getLatestDiscoveries,
   getLatestMarketItems,
   getOwnerTokens,
+  getTournamentPrizes,
 } from "@/app/hooks/graphql/queries";
 import useAdventurerStore from "@/app/hooks/useAdventurerStore";
 import useControls from "@/app/hooks/useControls";
@@ -56,7 +57,7 @@ import useTransactionCartStore from "@/app/hooks/useTransactionCartStore";
 import useTransactionManager from "@/app/hooks/useTransactionManager";
 import useUIStore, { ScreenPage } from "@/app/hooks/useUIStore";
 import { fetchBalances, fetchEthBalance } from "@/app/lib/balances";
-import { gameClient } from "@/app/lib/clients";
+import { gameClient, tournamentClient } from "@/app/lib/clients";
 import { VRF_WAIT_TIME } from "@/app/lib/constants";
 import { networkConfig } from "@/app/lib/networkConfig";
 import {
@@ -780,6 +781,22 @@ function Home() {
     }
   }, [vitBoostRemoved, chaBoostRemoved]);
 
+  // Memoize both the variables AND the client
+  const { variables: tournamentVariables, client: tournamentClientReturn } =
+    useMemo(() => {
+      return {
+        variables: {
+          tournamentId: networkConfig[network!].tournamentId,
+        },
+        client: tournamentClient(networkConfig[network!].tournamentGQLURL),
+      };
+    }, [network]); // Only recreate when network changes
+
+  const { data: tournamentPrizes } = useQuery(getTournamentPrizes, {
+    client: tournamentClientReturn,
+    variables: tournamentVariables,
+  });
+
   return (
     <>
       {/* <Toaster /> */}
@@ -878,6 +895,7 @@ function Home() {
                 transferAdventurer={transferAdventurer}
                 lordsDollarValue={lordsDollarValue}
                 changeAdventurerName={changeAdventurerName}
+                tournamentPrizes={tournamentPrizes}
               />
             )}
             {screen === "play" && (
@@ -892,7 +910,9 @@ function Home() {
             {screen === "inventory" && (
               <InventoryScreen gameContract={gameContract!} />
             )}
-            {screen === "leaderboard" && <LeaderboardScreen />}
+            {screen === "leaderboard" && (
+              <LeaderboardScreen tournamentPrizes={tournamentPrizes} />
+            )}
             {screen === "upgrade" && (
               <UpgradeScreen upgrade={upgrade} gameContract={gameContract!} />
             )}