feat(web): fetch game state react-query

web/.env.development

@@ -1,3 +1,3 @@
 NEXT_PUBLIC_DISABLE_MEDIAPLAYER_AUTOPLAY="true"
-NEXT_PUBLIC_WORLD_ADDRESS="0x7d17bb24b59cb371c9ca36b79efca27fe53318e26340df3d8623dba5a7b9e5f"
-NEXT_PUBLIC_KATANA_RPC="http://localhost:5050"
+NEXT_PUBLIC_KATANA_RPC="http://localhost:5050"
+NEXT_PUBLIC_TORII_API="http://localhost:8080"

web/.env.production

@@ -1,2 +1,2 @@
-NEXT_PUBLIC_WORLD_ADDRESS="0x7d17bb24b59cb371c9ca36b79efca27fe53318e26340df3d8623dba5a7b9e5f"
-NEXT_PUBLIC_KATANA_RPC="http://localhost:5050"
+NEXT_PUBLIC_KATANA_RPC="http://localhost:5050"
+NEXT_PUBLIC_TORII_API="http://localhost:8080"

web/codegen.yaml

@@ -1,14 +1,18 @@
 overwrite: true
-schema: ${NEXT_PUBLIC_API_URL:http://127.0.0.1:8080}
+schema: ${NEXT_PUBLIC_TORII_API:http://localhost:8080}
 documents: "src/**/*.graphql"
 generates:
   src/generated/graphql.ts:
     plugins:
       - "typescript"
       - "typescript-operations"
+      - "typescript-react-query"
     config:
       addInfiniteQuery: true
       exposeQueryKeys: true
+      fetcher:
+        func: "@/hooks/fetcher#useFetchData"
+        isReactHook: true
   src/generated/introspection.ts:
     plugins:
       - fragment-matcher

web/package.json

@@ -28,6 +28,7 @@
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-query": "^3.39.2",
     "starknet": "https://github.com/broody/starknet.js#2ca935e0062fc7b7a5fff2130c1255596179964e",
     "use-caret-position": "^0.0.2",
     "zustand": "^4.3.7"

web/src/components/Header.tsx

@@ -19,15 +19,23 @@ import MediaPlayer from "@/components/MediaPlayer";
 import MobileMenu from "@/components/MobileMenu";
 import { play } from "@/hooks/media";
 import { useGameStore, getInventoryInfos } from "@/hooks/state";
+import { usePlayerEntitiesQuery } from "@/generated/graphql";
+import { PLAYER_ADDRESS } from "@/constants";
 
 export interface HeaderProps {
   back?: boolean;
 }
 
 const Header = ({ back }: HeaderProps) => {
   const router = useRouter();
-  const { address } = useAccount();
-  const { connectors, connect, disconnect } = useConnectors();
+  const { gameId } = router.query as { gameId: string };
+
+  const { data } = usePlayerEntitiesQuery(
+    { gameId, address: PLAYER_ADDRESS },
+    {
+      enabled: !!gameId,
+    },
+  );
 
   const isMobile = IsMobile();
 
@@ -60,11 +68,6 @@ const Header = ({ back }: HeaderProps) => {
       zIndex="1"
     >
       <HStack flex="1" justify="left">
-        {!isBackButtonVisible && (
-          <HeaderButton onClick={() => router.push("/")}>
-            <Home />
-          </HeaderButton>
-        )}
         {isBackButtonVisible && (
           <HeaderButton onClick={() => router.back()}>
             <Arrow />
@@ -104,12 +107,12 @@ const Header = ({ back }: HeaderProps) => {
 
           <HStack flex="1" justify="right">
             {!isMobile && <MediaPlayer />}
-
-            {!isMobile && (
+            {/* Chat requires backend implementation */}
+            {/* {!isMobile && (
               <HeaderButton onClick={() => router.push("/chat")}>
                 <Chat color={hasNewMessages ? "yellow.400" : "currentColor"} />
               </HeaderButton>
-            )}
+            )} */}
             {isMobile && <MobileMenu />}
           </HStack>
         </>
@@ -122,7 +125,8 @@ const Header = ({ back }: HeaderProps) => {
               </HeaderButton>
             )}
           </HStack>
-          <HStack flex="1" justify="right">
+          {/* For alpha, we're using burner wallets */}
+          {/* <HStack flex="1" justify="right">
             {!isMobile && <MediaPlayer />}
 
             <Button
@@ -138,7 +142,7 @@ const Header = ({ back }: HeaderProps) => {
             >
               <Link /> <Text>CONNECT</Text>
             </Button>
-          </HStack>
+          </HStack> */}
         </>
       )}
     </Flex>

web/src/constants.ts

@@ -1,2 +1,6 @@
 export const RYO_WORLD_ADDRESS =
-  "0x357158d06624f4b5b25d92d49c95a1f07b0d520320b81e5c926fcdfc1decce4";
+  "0x7d17bb24b59cb371c9ca36b79efca27fe53318e26340df3d8623dba5a7b9e5f";
+export const PLAYER_ADDRESS =
+  "0x3ee9e18edc71a6df30ac3aca2e0b02a198fbce19b7480a63a0d71cbd76652e0";
+export const PLAYER_PRIVATE_KEY =
+  "0x300001800000000300000180000000000030000000000003006001800006600";