Mock connection via subpath imports

Author: JunichiSugiura

packages/keychain/.storybook/preview.tsx

@@ -3,8 +3,11 @@ import type { Preview, ReactRenderer } from "@storybook/react";
 import { withThemeByClassName } from "@storybook/addon-themes";
 import { SonnerToaster } from "@cartridge/ui-next";
 
-import { StoryParameters } from "./mock";
-import { Provider } from "./provider";
+import {
+  StoryParameters,
+  ParametersProvider,
+} from "#components/provider/parameters";
+import { Provider } from "#components/provider";
 
 import "../src/index.css";
 
@@ -42,10 +45,12 @@ const preview: Preview = {
       defaultTheme: "dark",
     }),
     (Story, { parameters }) => (
-      <Provider parameters={parameters as StoryParameters}>
-        <Story />
-        <SonnerToaster />
-      </Provider>
+      <ParametersProvider parameters={parameters as StoryParameters}>
+        <Provider>
+          <Story />
+          <SonnerToaster />
+        </Provider>
+      </ParametersProvider>
     ),
   ],
 };

packages/keychain/.storybook/provider.tsx

@@ -21,6 +21,10 @@
     "test:storybook": "start-server-and-test 'pnpm storybook:serve' 6001 'pnpm test-storybook -u'"
   },
   "imports": {
+    "#hooks/connection": {
+      "storybook": "./src/hooks/connection.mock.ts",
+      "default": "./src/hooks/connection.ts"
+    },
     "#*": [
       "./src/*",
       "./src/*.ts",

packages/keychain/package.json

@@ -4,7 +4,7 @@ import { Upgrade } from "#components/connect/Upgrade";
 import { UnverifiedSessionSummary } from "#components/session/UnverifiedSessionSummary";
 import { VerifiedSessionSummary } from "#components/session/VerifiedSessionSummary";
 import { NOW } from "#const";
-import { CreateSessionProvider } from "#context/session";
+import { CreateSessionProvider } from "#components/provider/session";
 import { useConnection } from "#hooks/connection";
 import {
   type ContractType,

packages/keychain/src/components/connect/CreateSession.tsx

@@ -3,7 +3,7 @@ import { SessionConsent } from "#components/connect";
 import { UnverifiedSessionSummary } from "#components/session/UnverifiedSessionSummary";
 import { VerifiedSessionSummary } from "#components/session/VerifiedSessionSummary";
 import { NOW } from "#const";
-import { CreateSessionProvider } from "#context/session";
+import { CreateSessionProvider } from "#components/provider/session";
 import { useConnection } from "#hooks/connection";
 import {
   type ContractType,

packages/keychain/src/components/connect/RegisterSession.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from "react";
+import { ParametersContext, StoryParameters } from "#hooks/parameters";
+
+export function ParametersProvider({
+  parameters,
+  children,
+}: { parameters: StoryParameters } & PropsWithChildren) {
+  return (
+    <ParametersContext.Provider value={parameters}>
+      {children}
+    </ParametersContext.Provider>
+  );
+}

packages/keychain/src/components/provider/parameters.tsx

@@ -1,27 +1,18 @@
-import { constants, RpcProvider } from "starknet";
-import { controllerConfigs, SessionPolicies } from "@cartridge/presets";
-import { Parameters } from "@storybook/react";
-import { ConnectionContextValue } from "../src/components/provider/connection";
-import { UpgradeInterface } from "../src/hooks/upgrade";
-import { ConnectCtx, ConnectionCtx } from "../src/utils/connection/types";
-import { defaultTheme } from "@cartridge/presets";
+import { ConnectionContextValue } from "#components/provider/connection";
+import { ConnectCtx } from "#utils/connection/types";
+import { controllerConfigs, defaultTheme } from "@cartridge/controller";
 import { useThemeEffect } from "@cartridge/ui-next";
-import Controller from "../src/utils/controller";
+import { fn, Mock } from "@storybook/test";
+import { useParameters } from "./parameters";
+import { constants, RpcProvider } from "starknet";
+import { ParsedSessionPolicies } from "./session";
+import { UpgradeInterface } from "./upgrade";
+import Controller from "#utils/controller";
 
-export interface StoryParameters extends Parameters {
-  connection?: {
-    context?: ConnectionCtx;
-    controller?: Controller;
-    chainId?: string;
-    upgrade?: UpgradeInterface;
-  };
-  preset?: string;
-  policies?: SessionPolicies;
-}
+export * from "./connection";
 
-export function useMockedConnection(
-  parameters: StoryParameters = {},
-): ConnectionContextValue {
+export const useConnectionValue: Mock<() => ConnectionContextValue> = fn(() => {
+  const parameters = useParameters();
   const {
     chainId = constants.StarknetChainId.SN_MAIN,
     context = {
@@ -53,11 +44,13 @@ export function useMockedConnection(
       provider: new RpcProvider({
         nodeUrl: "https://api.cartridge.gg/x/starknet/sepolia",
       }),
+      classHash: () =>
+        "0x0000000000000000000000000000000000000000000000000000000000000000",
       ...controller,
-    },
+    } as Controller,
     origin: "http://localhost:3002",
     rpcUrl: "http://api.cartridge.gg/x/starknet/mainnet",
-    policies: {},
+    policies: {} as ParsedSessionPolicies,
     theme: { ...theme, verified: true },
     hasPrefundRequest: false,
     setContext: () => {},
@@ -66,7 +59,7 @@ export function useMockedConnection(
     openModal: () => {},
     logout: () => {},
     openSettings: () => {},
-    upgrade: {},
+    upgrade: {} as UpgradeInterface,
     ...rest,
   };
-}
+}).mockName("useConnectionValue");

packages/keychain/src/context/session.tsx …hain/src/components/provider/session.tsxpackages/keychain/src/context/session.tsx renamed to packages/keychain/src/components/provider/session.tsx packages/keychain/src/context/session.tsx renamed to packages/keychain/src/components/provider/session.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+import { ConnectionCtx } from "#utils/connection/types";
+import Controller from "#utils/controller";
+import { UpgradeInterface } from "#hooks/upgrade";
+import { SessionPolicies } from "@cartridge/presets";
+import { Parameters } from "@storybook/react";
+
+export interface StoryParameters extends Parameters {
+  connection?: {
+    context?: ConnectionCtx;
+    controller?: Controller;
+    chainId?: string;
+    upgrade?: UpgradeInterface;
+  };
+  preset?: string;
+  policies?: SessionPolicies;
+}
+
+export const ParametersContext = createContext<StoryParameters>({});
+
+export function useParameters() {
+  return useContext(ParametersContext);
+}