Fix token mock for storybook

Author: JunichiSugiura

packages/profile/.storybook/main.ts

@@ -20,18 +20,28 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
-  viteFinal: (config) => 
+  viteFinal: (config) =>
     mergeConfig(config, {
       resolve: {
         alias: {
           "@/hooks/account": require.resolve("../src/hooks/account.mock.ts"),
-          "@/hooks/collection": require.resolve("../src/hooks/collection.mock.ts"),
-          "@/hooks/token": require.resolve("../src/hooks/token.mock.ts"),
-          "@cartridge/utils/api/cartridge": require.resolve("../node_modules/@cartridge/utils/dist/api/cartridge/index.js"),
-          "@cartridge/utils/api/indexer": require.resolve("../node_modules/@cartridge/utils/dist/api/indexer/index.js"),
-          "@cartridge/utils/mock/data": require.resolve("../node_modules/@cartridge/utils/dist/mock/data/index.js"),
+          "@/hooks/collection": require.resolve(
+            "../src/hooks/collection.mock.ts",
+          ),
+          "@cartridge/utils/api/cartridge": require.resolve(
+            "../node_modules/@cartridge/utils/dist/api/cartridge/index.js",
+          ),
+          "@cartridge/utils/api/indexer": require.resolve(
+            "../node_modules/@cartridge/utils/dist/api/indexer/index.js",
+          ),
+          "@cartridge/utils/mock/data": require.resolve(
+            "../node_modules/@cartridge/utils/dist/mock/data/index.js",
+          ),
+          "@cartridge/utils": require.resolve(
+            "../node_modules/@cartridge/utils/dist/index.mock.js",
+          ),
         },
       },
-    })
+    }),
 };
 export default config;

packages/profile/src/components/inventory/token/send/index.stories.tsx

@@ -1,9 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
-
+import { tokensBySymbol } from "@cartridge/utils/mock/data";
 import { SendToken } from "./index";
 
 const meta = {
   component: SendToken,
+  parameters: {
+    router: {
+      params: {
+        address: tokensBySymbol.ETH.address,
+      },
+    },
+  },
 } satisfies Meta<typeof SendToken>;
 
 export default meta;

packages/profile/src/components/inventory/token/token.stories.tsx

@@ -1,9 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
-
+import { tokensBySymbol } from "@cartridge/utils/mock/data";
 import { Token } from "./token";
 
 const meta = {
   component: Token,
+  parameters: {
+    router: {
+      params: {
+        address: tokensBySymbol.ETH.address,
+      },
+    },
+  },
 } satisfies Meta<typeof Token>;
 
 export default meta;

packages/profile/src/hooks/token.mock.ts

@@ -1,3 +1,4 @@
 export * from "./api";
 export * from "./balance";
 export * from "./posthog";
+export * from "./tokens.mock";

packages/utils/src/hooks/index.mock.ts

@@ -0,0 +1,31 @@
+import { TokensContextValue } from "src/context/tokens";
+import { getChecksumAddress } from "starknet";
+import { tokensByAddress } from "@cartridge/utils/mock/data";
+
+export function useTokens(): TokensContextValue {
+  return {
+    tokens: tokensByAddress,
+    isLoading: false,
+    register: () => {},
+  };
+}
+
+export function useToken(address: string) {
+  const { tokens, isLoading, error } = useTokens();
+  const token = tokens[getChecksumAddress(address)];
+
+  return {
+    token,
+    isLoading,
+    error,
+  };
+}
+
+export function useFeeToken() {
+  const { feeToken, isLoading, error } = useTokens();
+  return {
+    token: feeToken,
+    isLoading,
+    error,
+  };
+}

packages/utils/src/hooks/tokens.mock.ts

@@ -14,6 +14,7 @@ export function useTokens(): TokensContextValue {
 export function useToken(address: string) {
   const { tokens, isLoading, error } = useTokens();
   const token = tokens[getChecksumAddress(address)];
+
   return {
     token,
     isLoading,

packages/utils/src/hooks/tokens.ts

@@ -0,0 +1,9 @@
+export * from "./account";
+export * from "./color";
+export * from "./api";
+export * from "./hooks/index.mock";
+export * from "./iframe";
+export * from "./erc20";
+export * from "./explorer";
+export * from "./network";
+export * from "./context";

packages/utils/src/index.mock.ts

@@ -1,28 +1,41 @@
-export const tokens = {
+import { ERC20 } from "../../context/tokens";
+import { ERC20Contract } from "../../erc20";
+
+export const tokensBySymbol: Record<string, ERC20> = {
   ETH: {
-    balance: {
-      value: 1000000000000000000n,
-      formatted: "1.00",
-    },
-    meta: {
-      address:
-        "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
-      symbol: "ETH",
-      logoUrl:
-        "https://imagedelivery.net/0xPAQaDtnQhBs8IzYRIlNg/e07829b7-0382-4e03-7ecd-a478c5aa9f00/logo",
+    address:
+      "0x049D36570D4e46f48e99674bd3fcc84644DdD6b96F7C741B1562B82f9e004dC7",
+    name: "Ether",
+    symbol: "ETH",
+    decimals: 18,
+    icon: "https://imagedelivery.net/0xPAQaDtnQhBs8IzYRIlNg/e07829b7-0382-4e03-7ecd-a478c5aa9f00/logo",
+    balance: 1000000000000000000n,
+    price: {
+      amount: "1000000000000000000",
+      base: "USD",
+      decimals: 18,
+      quote: "USD",
     },
+    contract: {} as ERC20Contract,
   },
-  STARK: {
-    balance: {
-      value: 100000000000000000000n,
-      formatted: "100.00",
-    },
-    meta: {
-      address:
-        "0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
-      symbol: "STARK",
-      logoUrl:
-        "https://imagedelivery.net/0xPAQaDtnQhBs8IzYRIlNg/1b126320-367c-48ed-cf5a-ba7580e49600/logo",
+  STRK: {
+    address:
+      "0x04718f5a0Fc34cC1AF16A1cdee98fFB20C31f5cD61D6Ab07201858f4287c938D",
+    name: "Stark",
+    symbol: "STRK",
+    decimals: 18,
+    icon: "https://imagedelivery.net/0xPAQaDtnQhBs8IzYRIlNg/1b126320-367c-48ed-cf5a-ba7580e49600/logo",
+    balance: 1000000000000000000n,
+    price: {
+      amount: "1000000000000000000",
+      base: "USD",
+      decimals: 18,
+      quote: "USD",
     },
+    contract: {} as ERC20Contract,
   },
 };
+
+export const tokensByAddress: Record<string, ERC20> = Object.values(
+  tokensBySymbol,
+).reduce((acc, t) => ({ ...acc, [t.address]: t }), {});