chore(client): set up apollo client

MullerTheScientist · Sep 29, 2024 · 28522b3 · 28522b3
1 parent 1c2eccc
commit 28522b3
Show file tree

Hide file tree

Showing 8 changed files with 219 additions and 36 deletions.
diff --git a/client/package.json b/client/package.json
@@ -12,8 +12,7 @@
     "create-components": "npx /Users/os/Documents/code/dojo/dojo.js/packages/core/bin/generateComponents.cjs ../../dojo-starter/manifests/dev/deployment/manifest.json src/dojo/generated/contractComponents.ts http://localhost:5050 0x3fc79ccfd72c1450d2ccb73c5c521a7ec68b6c6af0caf96a0f1c39ce58876c8"
   },
   "dependencies": {
-    "@starknet-react/chains": "^0.1.7",
-    "@starknet-react/core": "^2.8.3",
+    "@apollo/client": "^3.11.8",
     "@dojoengine/core": "1.0.0-alpha.5",
     "@dojoengine/create-burner": "1.0.0-alpha.5",
     "@dojoengine/react": "1.0.0-alpha.5",
@@ -23,22 +22,25 @@
     "@dojoengine/utils": "1.0.0-alpha.5",
     "@latticexyz/react": "^2.0.12",
     "@latticexyz/utils": "^2.0.12",
+    "@starknet-react/chains": "^0.1.7",
+    "@starknet-react/core": "^2.8.3",
     "bignumber.js": "^9.1.2",
+    "ethers": "^5.7.2",
     "get-starknet-core": "^3.3.0",
+    "graphql": "^16.9.0",
+    "mobx": "^6.9.0",
+    "proxy-deep": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-icons": "^5.2.1",
     "react-simple-flex-grid": "^1.3.21",
     "react-toastify": "^10.0.5",
+    "rxjs": "^7.8.1",
     "sass": "^1.77.8",
+    "starknet": "6.11.0",
     "starknet-tokenbound-sdk": "^0.2.0",
     "tokenbound-connectkit": "^1.0.3",
-    "ethers": "^5.7.2",
-    "mobx": "^6.9.0",
-    "proxy-deep": "^3.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rxjs": "^7.8.1",
-    "starknet": "6.11.0",
     "vite-plugin-top-level-await": "^1.3.1",
     "vite-plugin-wasm": "^3.2.2"
   },

diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -29,33 +29,33 @@ import GameAccount from "./components/ControlWindows/GameAccount";
 const App = () => {
   const [activeWindow, setActiveWindow] = useState("");
   const [board, setBoard] = useState<BoardType>("classic");
+  const [gameState, setGameState] = useState({});
+  const [options, setOptions] = useState<OptionsProps>({
+    gameIsOngoing: false,
+    playersLength: 0,
+    diceFace: 0,
+    playerChance: 0,
+    hasThrownDice: false,
+    winners: [],
+    gameCondition: [],
+  });
 
-  function toggleActiveWindow(window: string) {
+  const toggleActiveWindow = (window: string) => {
     if (window === activeWindow) {
       setActiveWindow("");
       return;
     }
     setActiveWindow(window);
-  }
+  };
 
   const toggleBoard = (newBoard: BoardType) => {
     setBoard(newBoard);
   };
-  const [gameState, setGameState] = useState({});
+
   const setGameData = useCallback((game: any) => {
     setGameState(game);
   }, []);
 
-  const [options, setOptions] = useState<OptionsProps>({
-    gameIsOngoing: false,
-    playersLength: 0,
-    diceFace: 0,
-    playerChance: 0,
-    hasThrownDice: false,
-    winners: [],
-    gameCondition: [],
-  });
-
   const setGameOptions = useCallback((newOption: Partial<OptionsProps>) => {
     setOptions((option) => {
       return {

diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -5,6 +5,8 @@ import "./index.css";
 import { setup } from "./dojo/generated/setup.ts";
 import { DojoProvider } from "./dojo/DojoContext.tsx";
 import { dojoConfig } from "../dojoConfig.ts";
+import { ApolloProvider } from "@apollo/client";
+import apolloClient from "./utils/apollo-client";
 
 async function init() {
   const rootElement = document.getElementById("root");
@@ -17,9 +19,11 @@ async function init() {
 
   root.render(
     <React.StrictMode>
-      <DojoProvider value={setupResult}>
-        <App />
-      </DojoProvider>
+      <ApolloProvider client={apolloClient}>
+        <DojoProvider value={setupResult}>
+          <App />
+        </DojoProvider>
+      </ApolloProvider>
     </React.StrictMode>
   );
 }

diff --git a/client/src/utils/apollo-client.ts b/client/src/utils/apollo-client.ts
@@ -0,0 +1,6 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+
+export default new ApolloClient({
+  uri: "http://localhost:8080/graphql",
+  cache: new InMemoryCache(),
+});
diff --git a/client/src/utils/constants.ts → client/src/utils/constants/constants.ts b/client/src/utils/constants.ts → client/src/utils/constants/constants.ts
@@ -1,6 +1,6 @@
 import { AccountInterface, Contract, RpcProvider } from "starknet";
-import ERC721_ABI from "./abi/erc721.json";
-import NFT_NAME_RESOLVER_ABI from "./abi/nft_name_resolver.json";
+import ERC721_ABI from "../abi/erc721.json";
+import NFT_NAME_RESOLVER_ABI from "../abi/nft_name_resolver.json";
 
 export const RPC_PROVIDER = new RpcProvider({
   nodeUrl: "https://free-rpc.nethermind.io/sepolia-juno/",
@@ -30,7 +30,7 @@ export const getERC721Contract = (account?: AccountInterface): Contract => {
 };
 
 export const getNftNameResolverContract = (
-  account?: AccountInterface,
+  account?: AccountInterface
 ): Contract => {
   // const { abi: NFT_NAME_RESOLVER_ABI } = await RPC_PROVIDER.getClassAt(
   //   NFT_NAME_RESOLVER_ADDRESS
@@ -42,7 +42,7 @@ export const getNftNameResolverContract = (
   let contract = new Contract(
     NFT_NAME_RESOLVER_ABI,
     NFT_NAME_RESOLVER_ADDRESS,
-    RPC_PROVIDER,
+    RPC_PROVIDER
   );
 
   if (account) {