Fix keychain storybook (#1387)

Author: tarrencev

Dockerfile.storybook

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.49.1
+FROM mcr.microsoft.com/playwright:v1.50.1
 
 # Set environment variables
 ENV CI=true \

packages/keychain/.storybook/mock.ts

@@ -1,5 +1,4 @@
-import { constants } from "starknet";
-import { getChainName } from "@cartridge/utils";
+import { constants, RpcProvider } from "starknet";
 import Controller from "@cartridge/controller";
 import { SessionPolicies } from "@cartridge/presets";
 import { Parameters } from "@storybook/react";
@@ -20,35 +19,40 @@ export interface StoryParameters extends Parameters {
 }
 
 export function useMockedConnection({
-  chainId = constants.StarknetChainId.SN_SEPOLIA,
+  chainId = constants.StarknetChainId.SN_MAIN,
   context = {
     type: "connect",
     origin: "http://localhost:3002",
     policies: [],
     resolve: () => {},
     reject: () => {},
   } as ConnectCtx,
+  controller,
   ...rest
 }: StoryParameters["connection"] = {}): ConnectionContextValue {
-  const chainName = getChainName(chainId);
-
   return {
     context,
+    controller: {
+      address: () =>
+        "0x0000000000000000000000000000000000000000000000000000000000000000",
+      username: () => "user",
+      chainId: () => chainId,
+      provider: new RpcProvider({
+        nodeUrl: "https://api.cartridge.gg/x/starknet/sepolia",
+      }),
+      ...controller,
+    },
     origin: "http://localhost:3002",
-    rpcUrl: "http://api.cartridge.gg/x/sepolia",
-    chainId,
-    chainName,
+    rpcUrl: "http://api.cartridge.gg/x/starknet/mainnet",
     policies: {},
     theme: { defaultTheme, verified: true },
     hasPrefundRequest: false,
-    error: undefined,
     setContext: () => {},
     setController: () => {},
     closeModal: () => {},
     openModal: () => {},
     logout: () => {},
     openSettings: () => {},
-    controller: {},
     upgrade: {},
     ...rest,
   };

packages/keychain/.storybook/provider.tsx

@@ -12,6 +12,7 @@ import {
   ControllerThemeContext,
   VerifiableControllerTheme,
 } from "../src/context/theme";
+import { TokensProvider } from "../src/components/provider/tokens";
 
 export function Provider({
   children,
@@ -38,9 +39,11 @@ export function Provider({
     >
       <QueryClientProvider client={queryClient}>
         <ConnectionContext.Provider value={connection}>
-          <ControllerThemeProvider theme={connection.theme}>
-            <BrowserRouter>{children}</BrowserRouter>
-          </ControllerThemeProvider>
+          <TokensProvider>
+            <ControllerThemeProvider theme={connection.theme}>
+              <BrowserRouter>{children}</BrowserRouter>
+            </ControllerThemeProvider>
+          </TokensProvider>
         </ConnectionContext.Provider>
       </QueryClientProvider>
     </StarknetConfig>

packages/keychain/.storybook/test-runner.ts

@@ -1,4 +1,4 @@
-import { TestRunnerConfig } from "@storybook/test-runner";
+import { TestRunnerConfig, waitForPageReady } from "@storybook/test-runner";
 import { toMatchImageSnapshot } from "jest-image-snapshot";
 import path from "path";
 
@@ -22,10 +22,7 @@ const config: TestRunnerConfig = {
   },
   async postVisit(page, context) {
     // Wait for the page to be ready before taking a screenshot
-    await page.waitForSelector("#storybook-root", {
-      state: "visible",
-      timeout: 45000,
-    });
+    await waitForPageReady(page);
 
     // Wait for any animations to complete
     await page.waitForTimeout(1000);