From 28522b3d12cec41a996729d28517c71a983f4224 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CIbrahim?= Date: Sun, 29 Sep 2024 22:13:53 +0100 Subject: [PATCH] chore(client): set up apollo client --- client/package.json | 20 ++- client/pnpm-lock.yaml | 160 ++++++++++++++++++ client/src/App.tsx | 26 +-- client/src/main.tsx | 10 +- client/src/utils/apollo-client.ts | 6 + client/src/utils/{ => constants}/constants.ts | 8 +- client/src/utils/constants/gql_queries.ts | 13 ++ client/src/utils/helpers.tsx | 12 +- 8 files changed, 219 insertions(+), 36 deletions(-) create mode 100644 client/src/utils/apollo-client.ts rename client/src/utils/{ => constants}/constants.ts (89%) create mode 100644 client/src/utils/constants/gql_queries.ts diff --git a/client/package.json b/client/package.json index 406b29a..c116d8b 100644 --- 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 index 9edd6d6..64600b4 100644 --- a/client/pnpm-lock.yaml +++ b/client/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@apollo/client': + specifier: ^3.11.8 + version: 3.11.8(@types/react@18.3.8)(graphql@16.9.0)(react-dom@18.3.1)(react@18.3.1) '@dojoengine/core': specifier: 1.0.0-alpha.5 version: 1.0.0-alpha.5(starknet@6.11.0)(typescript@5.6.2) @@ -47,6 +50,9 @@ dependencies: get-starknet-core: specifier: ^3.3.0 version: 3.3.3(starknet@6.11.0) + graphql: + specifier: ^16.9.0 + version: 16.9.0 mobx: specifier: ^6.9.0 version: 6.13.2 @@ -162,6 +168,45 @@ packages: leven: 3.1.0 dev: false + /@apollo/client@3.11.8(@types/react@18.3.8)(graphql@16.9.0)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-CgG1wbtMjsV2pRGe/eYITmV5B8lXUCYljB2gB/6jWTFQcrvirUVvKg7qtFdjYkQSFbIffU1IDyxgeaN81eTjbA==} + peerDependencies: + graphql: ^15.0.0 || ^16.0.0 + graphql-ws: ^5.5.5 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 + subscriptions-transport-ws: ^0.9.0 || ^0.11.0 + peerDependenciesMeta: + graphql-ws: + optional: true + react: + optional: true + react-dom: + optional: true + subscriptions-transport-ws: + optional: true + dependencies: + '@graphql-typed-document-node/core': 3.2.0(graphql@16.9.0) + '@wry/caches': 1.0.1 + '@wry/equality': 0.5.7 + '@wry/trie': 0.5.0 + graphql: 16.9.0 + graphql-tag: 2.12.6(graphql@16.9.0) + hoist-non-react-statics: 3.3.2 + optimism: 0.18.0 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + rehackt: 0.1.0(@types/react@18.3.8)(react@18.3.1) + response-iterator: 0.2.6 + symbol-observable: 4.0.0 + ts-invariant: 0.10.3 + tslib: 2.7.0 + zen-observable-ts: 1.2.5 + transitivePeerDependencies: + - '@types/react' + dev: false + /@ark/schema@0.3.3: resolution: {integrity: sha512-SA4QggzaKHxkNB+faWmhSJbCPMHmGBCpb6dNG3VIt5VOMZhZJJSD76/tOUzQvvJNzztHkTakrTZea+iKsEDcRQ==} dependencies: @@ -2945,6 +2990,14 @@ packages: '@ethersproject/strings': 5.7.0 dev: false + /@graphql-typed-document-node/core@3.2.0(graphql@16.9.0): + resolution: {integrity: sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==} + peerDependencies: + graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 + dependencies: + graphql: 16.9.0 + dev: false + /@humanwhocodes/config-array@0.13.0: resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==} engines: {node: '>=10.10.0'} @@ -5361,6 +5414,41 @@ packages: '@xtuc/long': 4.2.2 dev: false + /@wry/caches@1.0.1: + resolution: {integrity: sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==} + engines: {node: '>=8'} + dependencies: + tslib: 2.7.0 + dev: false + + /@wry/context@0.7.4: + resolution: {integrity: sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==} + engines: {node: '>=8'} + dependencies: + tslib: 2.7.0 + dev: false + + /@wry/equality@0.5.7: + resolution: {integrity: sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==} + engines: {node: '>=8'} + dependencies: + tslib: 2.7.0 + dev: false + + /@wry/trie@0.4.3: + resolution: {integrity: sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==} + engines: {node: '>=8'} + dependencies: + tslib: 2.7.0 + dev: false + + /@wry/trie@0.5.0: + resolution: {integrity: sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==} + engines: {node: '>=8'} + dependencies: + tslib: 2.7.0 + dev: false + /@xtuc/ieee754@1.2.0: resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} dev: false @@ -8552,6 +8640,21 @@ packages: /graphemer@1.4.0: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} + /graphql-tag@2.12.6(graphql@16.9.0): + resolution: {integrity: sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==} + engines: {node: '>=10'} + peerDependencies: + graphql: ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 + dependencies: + graphql: 16.9.0 + tslib: 2.7.0 + dev: false + + /graphql@16.9.0: + resolution: {integrity: sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==} + engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0} + dev: false + /gzip-size@6.0.0: resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==} engines: {node: '>=10'} @@ -8646,6 +8749,12 @@ packages: minimalistic-crypto-utils: 1.0.1 dev: false + /hoist-non-react-statics@3.3.2: + resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} + dependencies: + react-is: 16.13.1 + dev: false + /hoopy@0.1.4: resolution: {integrity: sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==} engines: {node: '>= 6.0.0'} @@ -10795,6 +10904,15 @@ packages: is-wsl: 2.2.0 dev: false + /optimism@0.18.0: + resolution: {integrity: sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==} + dependencies: + '@wry/caches': 1.0.1 + '@wry/context': 0.7.4 + '@wry/trie': 0.4.3 + tslib: 2.7.0 + dev: false + /optionator@0.8.3: resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==} engines: {node: '>= 0.8.0'} @@ -12417,6 +12535,21 @@ packages: jsesc: 0.5.0 dev: false + /rehackt@0.1.0(@types/react@18.3.8)(react@18.3.1): + resolution: {integrity: sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==} + peerDependencies: + '@types/react': '*' + react: '*' + peerDependenciesMeta: + '@types/react': + optional: true + react: + optional: true + dependencies: + '@types/react': 18.3.8 + react: 18.3.1 + dev: false + /relateurl@0.2.7: resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==} engines: {node: '>= 0.10'} @@ -12504,6 +12637,11 @@ packages: supports-preserve-symlinks-flag: 1.0.0 dev: false + /response-iterator@0.2.6: + resolution: {integrity: sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==} + engines: {node: '>=0.8'} + dev: false + /retry@0.13.1: resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==} engines: {node: '>= 4'} @@ -13407,6 +13545,11 @@ packages: stable: 0.1.8 dev: false + /symbol-observable@4.0.0: + resolution: {integrity: sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==} + engines: {node: '>=0.10'} + dev: false + /symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} dev: false @@ -13674,6 +13817,13 @@ packages: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} dev: false + /ts-invariant@0.10.3: + resolution: {integrity: sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==} + engines: {node: '>=8'} + dependencies: + tslib: 2.7.0 + dev: false + /ts-mixer@6.0.4: resolution: {integrity: sha512-ufKpbmrugz5Aou4wcr5Wc1UUFWOLhq+Fm6qa6P0w0K5Qw2yhaUoiWszhCVuNQyNwrlGiscHOmqYoAox1PtvgjA==} dev: false @@ -14941,6 +15091,16 @@ packages: engines: {node: '>=12.20'} dev: false + /zen-observable-ts@1.2.5: + resolution: {integrity: sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==} + dependencies: + zen-observable: 0.8.15 + dev: false + + /zen-observable@0.8.15: + resolution: {integrity: sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==} + dev: false + /zod@3.23.8: resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==} dev: false diff --git a/client/src/App.tsx b/client/src/App.tsx index 82f3c05..866624e 100644 --- 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("classic"); + const [gameState, setGameState] = useState({}); + const [options, setOptions] = useState({ + 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({ - gameIsOngoing: false, - playersLength: 0, - diceFace: 0, - playerChance: 0, - hasThrownDice: false, - winners: [], - gameCondition: [], - }); - const setGameOptions = useCallback((newOption: Partial) => { setOptions((option) => { return { diff --git a/client/src/main.tsx b/client/src/main.tsx index 86a339f..027295f 100644 --- 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( - - - + + + + + ); } diff --git a/client/src/utils/apollo-client.ts b/client/src/utils/apollo-client.ts new file mode 100644 index 0000000..b06bfd5 --- /dev/null +++ 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 b/client/src/utils/constants/constants.ts similarity index 89% rename from client/src/utils/constants.ts rename to client/src/utils/constants/constants.ts index 05020e6..fc2626a 100644 --- a/client/src/utils/constants.ts +++ b/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) { diff --git a/client/src/utils/constants/gql_queries.ts b/client/src/utils/constants/gql_queries.ts new file mode 100644 index 0000000..e985ee3 --- /dev/null +++ b/client/src/utils/constants/gql_queries.ts @@ -0,0 +1,13 @@ +import { gql } from "@apollo/client"; + +export const ALL_GAME_IDS_QUERY = gql` + query { + starkludoGameModels { + edges { + node { + id + } + } + } + } +`; diff --git a/client/src/utils/helpers.tsx b/client/src/utils/helpers.tsx index 0af4d19..73d5383 100644 --- a/client/src/utils/helpers.tsx +++ b/client/src/utils/helpers.tsx @@ -4,7 +4,7 @@ import { getERC721Contract, getNftNameResolverContract, RPC_PROVIDER, -} from "./constants"; +} from "./constants/constants"; export const convertHexToText = (hexValue: string) => { let stripHex = hexValue[0].slice(2); @@ -26,9 +26,8 @@ export const getGameProfilesFromAddress = async ( ) => { try { // Get all NFT Ids belonging to address - let ids: any[] = await getERC721Contract().get_token_ids_of_address( - address - ); + let ids: any[] = + await getERC721Contract().get_token_ids_of_address(address); // Convert Ids to string ids = ids.map((id) => new BigNumber(id).toString()); @@ -56,9 +55,8 @@ export const createGameProfile = async ( account: AccountInterface ) => { try { - let addProfileTxn = await getNftNameResolverContract( - account - ).create_nft_name(profileName); + let addProfileTxn = + await getNftNameResolverContract(account).create_nft_name(profileName); await RPC_PROVIDER.waitForTransaction(addProfileTxn.transaction_hash); } catch (error) {