Improve Slot stories

Dockerfile.storybook

@@ -30,9 +30,7 @@ RUN Xvfb :99 -screen 0 1280x1024x24 2>/dev/null &
 WORKDIR /app
 
 # Copy package files for installation
-COPY package.json pnpm-lock.yaml ./
-COPY packages/keychain/package.json ./packages/keychain/
-COPY packages/ui-next/package.json ./packages/ui-next/
+COPY . .
 
 # Install dependencies
 RUN pnpm install --frozen-lockfile

packages/keychain/src/components/session.tsx

@@ -83,10 +83,7 @@ export function Session() {
 
           if (res.ok) {
             navigate(
-              `/success?${{
-                title: "Session Registered!",
-                description: "Return to your terminal to continue",
-              }.toString()}`,
+              `/success`,
               { replace: true },
             );
             return;

packages/keychain/src/components/slot/Consent.stories.tsx

@@ -1,40 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/react";
+
 import { Consent } from "./consent";
-import { MemoryRouter, Route, Routes } from "react-router-dom";
 
-const meta = {
+const meta: Meta<typeof Consent> = {
   component: Consent,
-  decorators: [
-    (Story) => (
-      <MemoryRouter
-        initialEntries={["/slot/consent?callback_uri=https://cartridge.gg"]}
-      >
-        <Routes>
-          <Route path="/slot/consent" element={<Story />} />
-        </Routes>
-      </MemoryRouter>
-    ),
-  ],
+  decorators: [(Story) => <Story />],
   parameters: {
     connection: {
       origin: "https://cartridge.gg",
     },
   },
-} satisfies Meta<typeof Consent>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
-
-export const WithoutCallback: Story = {
-  decorators: [
-    (Story) => (
-      <MemoryRouter initialEntries={["/slot/consent"]}>
-        <Routes>
-          <Route path="/slot/consent" element={<Story />} />
-        </Routes>
-      </MemoryRouter>
-    ),
-  ],
-};

packages/keychain/src/components/slot/consent.stories.tsx

@@ -1,40 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/react";
+
 import { Consent } from "./consent";
-import { MemoryRouter, Route, Routes } from "react-router-dom";
 
-const meta = {
+const meta: Meta<typeof Consent> = {
   component: Consent,
-  decorators: [
-    (Story) => (
-      <MemoryRouter
-        initialEntries={["/slot/consent?callback_uri=https://cartridge.gg"]}
-      >
-        <Routes>
-          <Route path="/slot/consent" element={<Story />} />
-        </Routes>
-      </MemoryRouter>
-    ),
-  ],
+  decorators: [(Story) => <Story />],
   parameters: {
     connection: {
       origin: "https://cartridge.gg",
     },
   },
-} satisfies Meta<typeof Consent>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
-
-export const WithoutCallback: Story = {
-  decorators: [
-    (Story) => (
-      <MemoryRouter initialEntries={["/slot/consent"]}>
-        <Routes>
-          <Route path="/slot/consent" element={<Story />} />
-        </Routes>
-      </MemoryRouter>
-    ),
-  ],
-};

packages/keychain/src/components/slot/fund.stories.tsx

@@ -1,22 +1,29 @@
 import type { Meta, StoryObj } from "@storybook/react";
+
 import { Fund } from "./fund";
-import { MemoryRouter } from "react-router-dom";
+import { constants, num, RpcProvider } from "starknet";
 
-const meta = {
+const meta: Meta<typeof Fund> = {
   component: Fund,
   decorators: [
     (Story) => (
-      <MemoryRouter>
         <Story />
-      </MemoryRouter>
     ),
   ],
   parameters: {
     connection: {
-      origin: "https://cartridge.gg",
+      controller: {
+        chainId: () => constants.StarknetChainId.SN_SEPOLIA as string,
+        callContract: () =>
+          Promise.resolve([num.toHex("2000000000000000000"), "0x0"]),
+        rpc: new RpcProvider({ nodeUrl: "https://api.cartridge/x/sepolia" }),
+        username: () => "test-account",
+        address:
+          "0x0000000000000000000000000000000000000000000000000000000000000000",
+      },
     },
   },
-} satisfies Meta<typeof Fund>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;

packages/keychain/src/components/success.tsx

@@ -1,19 +1,14 @@
 import { Container } from "@/components/layout";
 import { CheckIcon } from "@cartridge/ui-next";
-import { useSearchParams } from "react-router-dom";
 
 export function Success() {
-  const [searchParams] = useSearchParams();
-  const title = searchParams.get("title");
-  const description = searchParams.get("description");
-
   return (
     <Container
       variant="expanded"
       hideAccount
       Icon={CheckIcon}
-      title={title ? (title as string) : "Success!"}
-      description={description ? (description as string) : ""}
+      title="Success!"
+      description=""
     />
   );
 }

scripts/update-storybook-snapshot.sh

@@ -14,9 +14,9 @@ PORT=$2
 docker run \
   --rm \
   --network="host" \
-  -v "$(pwd)":/app \
-  -v /app/node_modules \
   --ipc=host \
   -ti \
+  -v "$(pwd)/packages/keychain/__image_snapshots__:/app/packages/keychain/__image_snapshots__" \
+  -v "$(pwd)/packages/ui-next/__image_snapshots__:/app/packages/ui-next/__image_snapshots__" \
   ghcr.io/cartridge-gg/controller/storybook-env:sha-91a2d36 \
-  bash -c "pnpm i && pnpm --filter $PACKAGE test-storybook -u --url http://host.docker.internal:$PORT"
+  bash -c "pnpm --filter $PACKAGE test-storybook -u --url http://host.docker.internal:$PORT"