Add connection mock creator

Author: JunichiSugiura

packages/keychain/.storybook/preview.tsx

@@ -6,7 +6,7 @@ import { BrowserRouter } from "react-router-dom";
 import { voyager, jsonRpcProvider, StarknetConfig } from "@starknet-react/core";
 import { sepolia, mainnet } from "@starknet-react/chains";
 import { num } from "starknet";
-import { mockedConnection } from "#hooks/connection.mock";
+import { createMockConnection } from "#hooks/connection.mock";
 import { controllerConfigs, defaultTheme } from "@cartridge/presets";
 import { UIProvider } from "#components/provider/ui";
 
@@ -55,18 +55,17 @@ const preview: Preview = {
           : defaultTheme,
         assetUrl: "",
       });
+      const connection = createMockConnection();
 
       return (
         // Render only third party providers which consumer hook is directly used across the source code and hard to mock otherwise
         <BrowserRouter>
           <StarknetConfig
             explorer={voyager}
             chains={[sepolia, mainnet]}
-            defaultChainId={num.toBigInt(
-              mockedConnection.controller!.chainId(),
-            )}
+            defaultChainId={num.toBigInt(connection.controller!.chainId())}
             provider={jsonRpcProvider({
-              rpc: () => ({ nodeUrl: mockedConnection.rpcUrl }),
+              rpc: () => ({ nodeUrl: connection.rpcUrl }),
             })}
           >
             {/* TODO: Remove once #1436 is merged */}

packages/keychain/src/components/transaction/ConfirmTransaction.stories.tsx

@@ -3,44 +3,47 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ConfirmTransaction } from "./ConfirmTransaction";
 import { ETH_CONTRACT_ADDRESS } from "@cartridge/utils";
 import { VerifiableControllerTheme } from "#components/provider/connection";
+import { useConnection, createMockConnection } from "#hooks/connection.mock";
 
 const meta = {
   component: ConfirmTransaction,
-  parameters: {
-    connection: {
-      controller: {
-        estimateInvokeFee: () => ({
-          suggestedMaxFee: "100",
-        }),
-        hasSession: () => true,
-        session: () => true,
-      },
-      context: {
-        origin: "http://localhost:6001",
-        type: "execute",
-        transactions: [
-          {
-            contractAddress: ETH_CONTRACT_ADDRESS,
-            entrypoint: "approve",
-            calldata: [
-              "0x0000000000000000000000000000000000000000000000000000000000000000",
-              "0x0",
-              "0x0",
-            ],
-          },
-          {
-            contractAddress: ETH_CONTRACT_ADDRESS,
-            entrypoint: "transfer",
-            calldata: [
-              "0x0000000000000000000000000000000000000000000000000000000000000000",
-              "0x0",
-              "0x0",
-            ],
-          },
-        ],
-        onCancel: () => {},
-      },
-    },
+  beforeEach: () => {
+    useConnection.mockReturnValue(
+      createMockConnection({
+        controller: {
+          estimateInvokeFee: () => ({
+            suggestedMaxFee: "100",
+          }),
+          hasSession: () => true,
+          session: () => true,
+        },
+        context: {
+          origin: "http://localhost:6001",
+          type: "execute",
+          transactions: [
+            {
+              contractAddress: ETH_CONTRACT_ADDRESS,
+              entrypoint: "approve",
+              calldata: [
+                "0x0000000000000000000000000000000000000000000000000000000000000000",
+                "0x0",
+                "0x0",
+              ],
+            },
+            {
+              contractAddress: ETH_CONTRACT_ADDRESS,
+              entrypoint: "transfer",
+              calldata: [
+                "0x0000000000000000000000000000000000000000000000000000000000000000",
+                "0x0",
+                "0x0",
+              ],
+            },
+          ],
+          onCancel: () => {},
+        },
+      }),
+    );
   },
 } satisfies Meta<typeof ConfirmTransaction>;
 

packages/keychain/src/hooks/connection.mock.ts

@@ -12,28 +12,27 @@ import Controller from "#utils/controller";
 
 export * from "./connection";
 
-export const mockedController = {
-  address: fn(
-    () => "0x0000000000000000000000000000000000000000000000000000000000000000",
-  ),
-  username: fn(() => "user"),
-  chainId: fn(() => constants.StarknetChainId.SN_MAIN),
-  provider: new RpcProvider({
-    nodeUrl: "https://api.cartridge.gg/x/starknet/mainnet",
-  }),
-  cartridge: {} as CartridgeAccount,
-  cartridgeMeta: {} as CartridgeAccountMeta,
-} as unknown as Controller;
-
-export const mockedConnection: ConnectionContextValue = {
+const defaultMockConnection: ConnectionContextValue = {
   context: {
     type: "connect",
     origin: "http://localhost:3002",
     policies: [],
     resolve: fn(),
     reject: fn(),
   } as ConnectCtx,
-  controller: mockedController,
+  controller: {
+    address: fn(
+      () =>
+        "0x0000000000000000000000000000000000000000000000000000000000000000",
+    ),
+    username: fn(() => "user"),
+    chainId: fn(() => constants.StarknetChainId.SN_MAIN),
+    provider: new RpcProvider({
+      nodeUrl: "https://api.cartridge.gg/x/starknet/mainnet",
+    }),
+    cartridge: {} as CartridgeAccount,
+    cartridgeMeta: {} as CartridgeAccountMeta,
+  } as unknown as Controller,
   origin: "http://localhost:3002",
   rpcUrl: "http://api.cartridge.gg/x/starknet/mainnet",
   policies: {} as ParsedSessionPolicies,
@@ -47,10 +46,29 @@ export const mockedConnection: ConnectionContextValue = {
   openSettings: fn(),
 };
 
-export const useConnectionValue: Mock<() => ConnectionContextValue> = fn(() => {
-  return mockedConnection;
-});
+export function createMockConnection(
+  // Better way to type this? Failed to implement `DeepPartial<UpgradeInterface>` type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  overrides?: any,
+) {
+  return {
+    ...defaultMockConnection,
+    ...overrides,
+    controller: {
+      ...defaultMockConnection.controller,
+      ...overrides?.controller,
+    },
+    context: {
+      ...defaultMockConnection.context,
+      ...overrides?.context,
+    },
+  };
+}
+
+export const useConnectionValue: Mock<() => ConnectionContextValue> = fn(
+  () => defaultMockConnection,
+);
 
 export const useConnection: Mock<() => ConnectionContextValue> = fn(
-  () => mockedConnection,
+  () => defaultMockConnection,
 );