Mock connection via subpath imports

Author: JunichiSugiura

packages/keychain/.storybook/mock.ts

@@ -2,9 +2,8 @@ import React from "react";
 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 { Provider } from "#components/provider";
+import { ParametersProvider } from "#components/provider/parameters";
 
 import "../src/index.css";
 
@@ -42,10 +41,12 @@ const preview: Preview = {
       defaultTheme: "dark",
     }),
     (Story, { parameters }) => (
-      <Provider parameters={parameters as StoryParameters}>
-        <Story />
-        <SonnerToaster />
-      </Provider>
+      <ParametersProvider parameters={parameters}>
+        <Provider>
+          <Story />
+          <SonnerToaster />
+        </Provider>
+      </ParametersProvider>
     ),
   ],
 };

packages/keychain/.storybook/preview.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/.storybook/provider.tsx

@@ -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/package.json

@@ -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/CreateSession.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/connect/RegisterSession.tsx

@@ -0,0 +1,69 @@
+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 { 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 * from "./connection";
+
+export const useConnectionValue: Mock<() => ConnectionContextValue> = fn(() => {
+  const parameters = useParameters();
+  const {
+    chainId = constants.StarknetChainId.SN_MAIN,
+    context = {
+      type: "connect",
+      origin: "http://localhost:3002",
+      policies: [],
+      resolve: fn(),
+      reject: fn(),
+    } as ConnectCtx,
+    controller,
+    ...rest
+  } = parameters.connection ?? {};
+  const theme = parameters.preset
+    ? (controllerConfigs[parameters.preset].theme ?? defaultTheme)
+    : defaultTheme;
+
+  useThemeEffect({
+    theme,
+    assetUrl: "",
+  });
+
+  return {
+    context,
+    controller: {
+      address: fn(
+        () =>
+          "0x0000000000000000000000000000000000000000000000000000000000000000",
+      ),
+      username: fn(() => "user"),
+      chainId: fn(() => chainId),
+      provider: new RpcProvider({
+        nodeUrl: "https://api.cartridge.gg/x/starknet/sepolia",
+      }),
+      classHash: fn(
+        () =>
+          "0x0000000000000000000000000000000000000000000000000000000000000000",
+      ),
+      ...controller,
+    } as unknown as Controller,
+    origin: "http://localhost:3002",
+    rpcUrl: "http://api.cartridge.gg/x/starknet/mainnet",
+    policies: {} as ParsedSessionPolicies,
+    theme: { ...theme, verified: true },
+    hasPrefundRequest: false,
+    setContext: fn(),
+    setController: fn(),
+    closeModal: fn(),
+    openModal: fn(),
+    logout: fn(),
+    openSettings: fn(),
+    upgrade: {} as UpgradeInterface,
+    ...rest,
+  };
+}).mockName("useConnectionValue");

packages/keychain/src/components/provider/parameters.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);
+}