DS Tournament Updates (#291)

* add tournament as tab
* add ds tournament leaderboard tracking

Author: starknetdev

ui/src/app/components/leaderboard/SeasonTable.tsx

@@ -28,12 +28,17 @@ const SeasonTable = ({
   const network = useUIStore((state) => state.network);
 
   const seasonActive = process.env.NEXT_PUBLIC_SEASON_ACTIVE === "true";
+  const isDSTournamentActive =
+    process.env.NEXT_PUBLIC_DS_TOURNAMENT_ACTIVE === "true";
+  const dsTournamentId = process.env.NEXT_PUBLIC_DS_TOURNAMENT_ID ?? 0;
 
   // Memoize both the variables AND the client
   const { variables, client } = useMemo(() => {
     return {
       variables: {
-        tournamentId: networkConfig[network!].tournamentId,
+        tournamentId: isDSTournamentActive
+          ? dsTournamentId
+          : networkConfig[network!].tournamentId,
       },
       client: tournamentClient(networkConfig[network!].tournamentGQLURL),
     };
@@ -99,9 +104,13 @@ const SeasonTable = ({
         <div className="flex flex-col gap-5 sm:gap-0 sm:flex-row justify-between w-full">
           <div className="flex flex-col w-full sm:mr-4 flex-grow-2 p-2 gap-2">
             <h4 className="text-center text-2xl m-0 uppercase">
-              {seasonActive ? "Current Season" : "Season Ended"}
+              {isDSTournamentActive
+                ? "Dark Shuffle Tournament"
+                : seasonActive
+                ? "Current Season"
+                : "Season Ended"}
             </h4>
-            {seasonActive && (
+            {(isDSTournamentActive || seasonActive) && (
               <>
                 <table className="w-full xl:text-lg 2xl:text-xl border border-terminal-green">
                   <thead className="border border-terminal-green">

ui/src/app/containers/AdventurerScreen.tsx

@@ -2,7 +2,6 @@ import { Button } from "@/app/components/buttons/Button";
 import ButtonMenu from "@/app/components/menu/ButtonMenu";
 import { AdventurersList } from "@/app/components/start/AdventurersList";
 import { CreateAdventurer } from "@/app/components/start/CreateAdventurer";
-import DSTournamentOverview from "@/app/components/start/DSTournamentOverview";
 import useAdventurerStore from "@/app/hooks/useAdventurerStore";
 import useNetworkAccount from "@/app/hooks/useNetworkAccount";
 import { useQueriesStore } from "@/app/hooks/useQueryStore";
@@ -75,9 +74,6 @@ export default function AdventurerScreen({
   const { account } = useNetworkAccount();
   const owner = account?.address ? padAddress(account.address) : "";
 
-  const isDSTournamentActive =
-    process.env.NEXT_PUBLIC_DS_TOURNAMENT_ACTIVE === "true";
-
   const menu = [
     {
       id: 1,
@@ -101,56 +97,18 @@ export default function AdventurerScreen({
     },
   ];
 
-  const dsTournamentMenu = [
-    {
-      id: 1,
-      label: "Dark Shuffle Tournament",
-      value: "ds tournament",
-      action: () => {
-        setStartOption("ds tournament");
-      },
-      disabled: false,
-    },
-    {
-      id: 2,
-      label: "Create Adventurer",
-      value: "create adventurer",
-      action: () => {
-        setStartOption("create adventurer");
-        setAdventurer(NullAdventurer);
-        resetData("adventurerByIdQuery");
-      },
-      disabled: false,
-    },
-    {
-      id: 3,
-      label: "Choose Adventurer",
-      value: "choose adventurer",
-      action: () => {
-        setStartOption("choose adventurer");
-      },
-      disabled: false,
-    },
-  ];
-
   return (
     <div className="flex flex-col sm:flex-row w-full h-full">
       <div className="w-full sm:w-1/6 h-10">
         <ButtonMenu
-          buttonsData={isDSTournamentActive ? dsTournamentMenu : menu}
+          buttonsData={menu}
           onSelected={(value) => setStartOption(value)}
           isActive={activeMenu == 0}
           setActiveMenu={setActiveMenu}
           className="sm:flex-col h-full"
         />
       </div>
 
-      {startOption === "ds tournament" && (
-        <div className="w-5/6 h-full">
-          <DSTournamentOverview lordsCost={costToPlay} />
-        </div>
-      )}
-
       {startOption === "create adventurer" && (
         <div className="flex flex-col w-5/6 h-full mx-auto sm:justify-center sm:flex-row gap-2">
           <CreateAdventurer

ui/src/app/hooks/useUIStore.ts

@@ -24,7 +24,8 @@ export type ScreenPage =
   | "onboarding"
   | "create adventurer"
   | "future"
-  | "collections leaderboard";
+  | "collections leaderboard"
+  | "tournament";
 
 export type Network =
   | "mainnet"

ui/src/app/lib/networkConfig.ts

@@ -40,8 +40,7 @@ export const networkConfig = {
   mainnet: {
     rpcUrl: "https://api.cartridge.gg/x/starknet/mainnet",
     lsGQLURL: "https://ls-indexer-sepolia.provable.games/graphql",
-    tournamentGQLURL:
-      "https://api.cartridge.gg/x/realms-world-04/torii/graphql",
+    tournamentGQLURL: "https://api.cartridge.gg/x/ls-tournaments/torii/graphql",
     blastUrl:
       "https://starknet-mainnet.blastapi.io/5ef61753-e7c1-4593-bc62-97fdf96f8de5",
     ethAddress:

ui/src/app/page.tsx

@@ -22,6 +22,7 @@ import { NotificationDisplay } from "@/app/components/notifications/Notification
 import { SpecialBeast } from "@/app/components/notifications/SpecialBeast";
 import LoginDialog from "@/app/components/onboarding/LoginDialog";
 import { ProfileDialog } from "@/app/components/profile/ProfileDialog";
+import DSTournamentOverview from "@/app/components/start/DSTournamentOverview";
 import ActionsScreen from "@/app/containers/ActionsScreen";
 import AdventurerScreen from "@/app/containers/AdventurerScreen";
 import CollectionsLeaderboardScreen from "@/app/containers/CollectionsLeaderboardScreen";
@@ -164,6 +165,42 @@ function Home() {
     [onKatana]
   );
 
+  const isDSTournamentActive =
+    process.env.NEXT_PUBLIC_DS_TOURNAMENT_ACTIVE === "true";
+
+  const dsMenuItems: Menu[] = useMemo(
+    () => [
+      { id: 1, label: "Start", screen: "start" as ScreenPage, disabled: false },
+      { id: 2, label: "Play", screen: "play" as ScreenPage, disabled: false },
+      {
+        id: 3,
+        label: "Inventory",
+        screen: "inventory" as ScreenPage,
+        disabled: false,
+      },
+      {
+        id: 4,
+        label: "Upgrade",
+        screen: "upgrade" as ScreenPage,
+        disabled: false,
+      },
+      {
+        id: 5,
+        label: "Leaderboard",
+        screen: "leaderboard" as ScreenPage,
+        disabled: false,
+      },
+      { id: 6, label: "Guide", screen: "guide" as ScreenPage, disabled: false },
+      {
+        id: 7,
+        label: "Tournament",
+        screen: "tournament" as ScreenPage,
+        disabled: false,
+      },
+    ],
+    [onKatana]
+  );
+
   const mobileMenuItems: Menu[] = useMemo(
     () => [
       { id: 1, label: "Start", screen: "start" as ScreenPage, disabled: false },
@@ -602,7 +639,7 @@ function Home() {
     if (!onboarded) {
       setScreen("onboarding");
     } else if (onboarded) {
-      setScreen("start");
+      setScreen("tournament");
     }
   }, [onboarded]);
 
@@ -816,7 +853,7 @@ function Home() {
           </div>
           <div className="hidden sm:block flex justify-center sm:justify-normal sm:pb-2">
             <ScreenMenu
-              buttonsData={allMenuItems}
+              buttonsData={isDSTournamentActive ? dsMenuItems : allMenuItems}
               onButtonClick={(value) => {
                 setScreen(value);
               }}
@@ -865,6 +902,9 @@ function Home() {
             {screen === "collections leaderboard" && (
               <CollectionsLeaderboardScreen />
             )}
+            {screen === "tournament" && (
+              <DSTournamentOverview lordsCost={costToPlay} />
+            )}
             {screen === "settings" && <Settings />}
             {screen === "player" && <Player gameContract={gameContract!} />}
             {screen === "wallet" && <WalletSelect />}