Merge branch 'dev' of https://github.com/z-korp/zkube into dev

client/package.json

@@ -17,7 +17,8 @@
     "preview": "vite preview",
     "codegen": "graphql-codegen",
     "gen:models": "npx create-models ../contracts/manifests/dev/manifest.json ./src/dojo/generated/contractModels.ts",
-    "test": "jest"
+    "test": "vitest",
+    "test:watch": "vitest watch"
   },
   "bin": {
     "create-models": "./bin/models.cjs"
@@ -97,7 +98,8 @@
     "@graphql-codegen/typescript": "^4.0.7",
     "@graphql-codegen/typescript-graphql-request": "^5.0.0",
     "@graphql-codegen/typescript-operations": "^4.2.1",
-    "@types/jest": "^29.5.12",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^20.16.6",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
@@ -108,12 +110,13 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.3.5",
-    "jest": "^29.7.0",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
     "ts-jest": "^29.2.5",
     "typescript": "^5.6.2",
     "vite": "^4.5.5",
-    "vite-plugin-mkcert": "^1.17.5"
+    "vite-plugin-mkcert": "^1.17.5",
+    "vitest": "^2.1.4"
   }
 }

client/src/dojo/systems.ts

@@ -3,100 +3,20 @@ import { toast } from "sonner";
 import * as SystemTypes from "./contractSystems";
 import { shortenHex } from "@dojoengine/utils";
 import { Account } from "starknet";
+import {
+  getToastPlacement,
+  getUrl,
+  getWalnutUrl,
+  shouldShowToast,
+  getToastAction,
+  notify,
+} from "@/utils/toast";
 
 export type SystemCalls = ReturnType<typeof systems>;
 
-const { VITE_PUBLIC_DEPLOY_TYPE } = import.meta.env;
-
 export function systems({ client }: { client: IWorld }) {
-  // Function to extract error messages from a given string
-  function extractErrorMessages(errorString: string) {
-    const regex = /Error message:(.*?)(?=\n|$)/gs;
-    const matches = errorString.match(regex);
-
-    if (matches) {
-      return matches.map((match) => match.replace("Error message:", "").trim());
-    } else {
-      return [errorString.trim()]; // Return the entire message if no specific pattern found
-    }
-  }
-
-  const extractedMessage = (message: string) => {
-    const errorMessages = extractErrorMessages(message);
-
-    return errorMessages.length > 0 ? errorMessages[0] : message;
-  };
-
-  const isMdOrLarger = (): boolean => {
-    return window.matchMedia("(min-width: 768px)").matches;
-  };
-
-  const shouldShowToast = (): boolean => {
-    return isMdOrLarger();
-  };
-
-  const isSmallHeight = (): boolean => {
-    return window.matchMedia("(max-height: 768px)").matches;
-  };
-
-  const getUrl = (transaction_hash: string) => {
-    if (
-      VITE_PUBLIC_DEPLOY_TYPE === "sepolia" ||
-      VITE_PUBLIC_DEPLOY_TYPE === "sepoliadev1" ||
-      VITE_PUBLIC_DEPLOY_TYPE === "sepoliadev2"
-    ) {
-      //return `https://sepolia.starkscan.co/tx/${transaction_hash}`;
-      return `https://sepolia.voyager.online/tx/${transaction_hash}`;
-    } else if (VITE_PUBLIC_DEPLOY_TYPE === "mainnet") {
-      return `https://starkscan.co/tx/${transaction_hash}`;
-    } else {
-      return `https://worlds.dev/networks/slot/worlds/zkube-${VITE_PUBLIC_DEPLOY_TYPE}/txs/${transaction_hash}`;
-    }
-  };
-
-  const getWalnutUrl = (transaction_hash: string) => {
-    return `https://app.walnut.dev/transactions?rpcUrl=https%3A%2F%2Fapi.cartridge.gg%2Fx%2Fstarknet%2Fsepolia&txHash=${transaction_hash}`;
-  };
-
-  const getToastAction = (transaction_hash: string) => {
-    return {
-      label: "View",
-      onClick: () => window.open(getUrl(transaction_hash), "_blank"),
-    };
-  };
-
-  const getToastPlacement = ():
-    | "top-center"
-    | "bottom-center"
-    | "bottom-right" => {
-    if (!isMdOrLarger()) {
-      // if mobile
-      return isSmallHeight() ? "top-center" : "bottom-right";
-    }
-    return "bottom-right";
-  };
-
   const toastPlacement = getToastPlacement();
 
-  const notify = (message: string, transaction: any) => {
-    const toastId = transaction.transaction_hash;
-
-    if (transaction.execution_status !== "REVERTED") {
-      if (!shouldShowToast()) return; // Exit if screen is smaller than medium
-      toast.success(message, {
-        id: toastId, // Use the transaction_hash as the unique toast ID
-        description: shortenHex(transaction.transaction_hash),
-        action: getToastAction(transaction.transaction_hash),
-        position: toastPlacement,
-      });
-    } else {
-      toast.error(extractedMessage(transaction.revert_reason), {
-        id: toastId, // Use the same transaction_hash ID for error
-        position: toastPlacement,
-      });
-    }
-  };
-
   const handleTransaction = async (
     account: Account,
     action: () => Promise<{ transaction_hash: string }>,

client/src/hooks/useGrid.tsx

@@ -1,8 +1,7 @@
-import { useEffect, useState, useMemo, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useGame } from "@/hooks/useGame";
 import { formatBigIntToBinaryArrayCustom } from "@/utils/gridUtils";
 import useDeepMemo from "./useDeepMemo";
-import { set } from "date-fns";
 
 interface DebugData {
   blocksRaw: bigint;

client/src/hooks/useSettings.tsx

@@ -25,7 +25,5 @@ export const useSettings = () => {
     return component ? new SettingsClass(component) : null;
   }, [component]);
 
-  //console.log("settings", settings);
-
   return { settings, settingsKey };
 };

client/src/stores/rewardsStore.ts

@@ -3,24 +3,24 @@ import { useEffect } from "react";
 import { Participation } from "@/dojo/game/models/participation";
 import { Tournament } from "@/dojo/game/models/tournament";
 import { Mode } from "@/dojo/game/types/mode";
-import { formatPrize } from "@/utils/wei";
 import { useAllChests } from "@/hooks/useAllChests";
 import { useParticipations } from "@/hooks/useParticipations";
 import { useWonTournaments } from "@/hooks/useWonTournaments";
 import useAccountCustom from "@/hooks/useAccountCustom";
+import { formatPrize, Prize } from "@/utils/price";
 
 const { VITE_PUBLIC_GAME_TOKEN_SYMBOL } = import.meta.env;
 
 interface ParticipationWithPrize extends Participation {
   raw_prize: bigint;
-  formatted_prize: string;
-  formatted_user_prize: string;
+  formatted_prize: Prize;
+  formatted_user_prize: Prize;
 }
 
 export type TournamentReward = {
   player_id: string;
   rank: 1 | 2 | 3;
-  prize: string;
+  prize: Prize;
   tournament_id: number;
   mode: Mode;
   tournament: Tournament;
@@ -75,8 +75,18 @@ export const useRewardsCalculator = () => {
             return {
               ...participation,
               raw_prize: 0n,
-              formatted_prize: "",
-              formatted_user_prize: "",
+              formatted_prize: {
+                full: "",
+                formatted_prize: "",
+                display: null,
+                withImage: null,
+              },
+              formatted_user_prize: {
+                full: "",
+                formatted_prize: "",
+                display: null,
+                withImage: null,
+              },
             };
 
           const rawPrize = BigInt(chest.prize);

client/src/test/setup.ts

@@ -0,0 +1,13 @@
+import { beforeEach, afterEach } from "node:test";
+
+import "@testing-library/jest-dom";
+import { vi } from "vitest";
+
+beforeEach(() => {
+  vi.spyOn(Math, "random").mockImplementation(() => 0.5);
+  vi.spyOn(Date, "now").mockImplementation(() => 1234567890);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});