Remove duplicated theme context from keychain (#1424)

Author: JunichiSugiura

packages/keychain/.storybook/mock.ts

@@ -1,11 +1,12 @@
 import { constants, RpcProvider } from "starknet";
 import Controller from "@cartridge/controller";
-import { SessionPolicies } from "@cartridge/presets";
+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 { useThemeEffect } from "@cartridge/ui-next";
 
 export interface StoryParameters extends Parameters {
   connection?: {
@@ -18,18 +19,30 @@ export interface StoryParameters extends Parameters {
   policies?: SessionPolicies;
 }
 
-export function useMockedConnection({
-  chainId = constants.StarknetChainId.SN_MAIN,
-  context = {
-    type: "connect",
-    origin: "http://localhost:3002",
-    policies: [],
-    resolve: () => {},
-    reject: () => {},
-  } as ConnectCtx,
-  controller,
-  ...rest
-}: StoryParameters["connection"] = {}): ConnectionContextValue {
+export function useMockedConnection(
+  parameters: StoryParameters = {},
+): ConnectionContextValue {
+  const {
+    chainId = constants.StarknetChainId.SN_MAIN,
+    context = {
+      type: "connect",
+      origin: "http://localhost:3002",
+      policies: [],
+      resolve: () => {},
+      reject: () => {},
+    } as ConnectCtx,
+    controller,
+    ...rest
+  } = parameters.connection ?? {};
+  const theme = parameters.preset
+    ? (controllerConfigs[parameters.preset].theme ?? defaultTheme)
+    : defaultTheme;
+
+  useThemeEffect({
+    theme,
+    assetUrl: "",
+  });
+
   return {
     context,
     controller: {
@@ -45,7 +58,7 @@ export function useMockedConnection({
     origin: "http://localhost:3002",
     rpcUrl: "http://api.cartridge.gg/x/starknet/mainnet",
     policies: {},
-    theme: { defaultTheme, verified: true },
+    theme: { ...theme, verified: true },
     hasPrefundRequest: false,
     setContext: () => {},
     setController: () => {},

packages/keychain/.storybook/provider.tsx

@@ -1,35 +1,18 @@
 import React, { PropsWithChildren } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { controllerConfigs } from "@cartridge/presets";
 import { mainnet } from "@starknet-react/chains";
 import { StarknetConfig, publicProvider, voyager } from "@starknet-react/core";
-import { useThemeEffect } from "@cartridge/ui-next";
 import { BrowserRouter } from "react-router-dom";
 import { ConnectionContext } from "../src/components/provider/connection";
 import { UIProvider } from "../src/components/provider/ui";
 import { StoryParameters, useMockedConnection } from "./mock";
-import {
-  ControllerThemeContext,
-  VerifiableControllerTheme,
-} from "../src/context/theme";
 import { TokensProvider } from "../src/components/provider/tokens";
 
 export function Provider({
   children,
   parameters,
 }: { parameters: StoryParameters } & PropsWithChildren) {
-  const connection = useMockedConnection(parameters.connection);
-
-  if (parameters.preset) {
-    const config = controllerConfigs[parameters.preset];
-
-    if (parameters.preset === "cartridge" && config.theme) {
-      (config.theme as VerifiableControllerTheme).verified = true;
-    }
-
-    connection.theme = config.theme || connection.theme;
-    connection.policies = config.policies || connection.policies;
-  }
+  const connection = useMockedConnection(parameters);
 
   return (
     <StarknetConfig
@@ -41,9 +24,7 @@ export function Provider({
         <ConnectionContext.Provider value={connection}>
           <UIProvider>
             <TokensProvider>
-              <ControllerThemeProvider theme={connection.theme}>
-                <BrowserRouter>{children}</BrowserRouter>
-              </ControllerThemeProvider>
+              <BrowserRouter>{children}</BrowserRouter>
             </TokensProvider>
           </UIProvider>
         </ConnectionContext.Provider>
@@ -53,16 +34,3 @@ export function Provider({
 }
 
 const queryClient = new QueryClient();
-
-function ControllerThemeProvider({
-  children,
-  theme,
-}: PropsWithChildren<{ theme: VerifiableControllerTheme }>) {
-  useThemeEffect({ theme, assetUrl: "" });
-
-  return (
-    <ControllerThemeContext.Provider value={{ ...theme }}>
-      {children}
-    </ControllerThemeContext.Provider>
-  );
-}

packages/keychain/src/components/connect/create/CreateController.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { CreateControllerView } from "./CreateController";
-import { VerifiableControllerTheme } from "@/context/theme";
+import { VerifiableControllerTheme } from "@/components/provider/connection";
 
 const meta: Meta<typeof CreateControllerView> = {
   component: CreateControllerView,

packages/keychain/src/components/connect/create/CreateController.test.tsx

@@ -17,7 +17,7 @@ vi.mock("@/hooks/posthog", () => ({
   }),
 }));
 
-vi.mock("@/hooks/theme", () => ({
+vi.mock("@/hooks/connection", () => ({
   useControllerTheme: () => mockUseControllerTheme(),
 }));
 

packages/keychain/src/components/connect/create/CreateController.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useCallback } from "react";
 import {
   LayoutContainer,
   LayoutFooter,
@@ -7,16 +7,16 @@ import {
   LayoutHeader,
   CreateAccount,
 } from "@cartridge/ui-next";
-import { useControllerTheme } from "@/hooks/theme";
 import { useDebounce } from "@/hooks/debounce";
 import { useUsernameValidation } from "./useUsernameValidation";
 import { LoginMode } from "../types";
 import { Legal } from "./Legal";
 import { useCreateController } from "./useCreateController";
 import { ErrorAlert } from "@/components/ErrorAlert";
-import { VerifiableControllerTheme } from "@/context/theme";
 import InAppSpy from "inapp-spy";
 import { usePostHog } from "@cartridge/utils";
+import { useControllerTheme } from "@/hooks/connection";
+import { VerifiableControllerTheme } from "@/components/provider/connection";
 
 interface CreateControllerViewProps {
   theme: VerifiableControllerTheme;
@@ -174,7 +174,7 @@ export function CreateController({
     loginMode,
   });
 
-  const handleFormSubmit = () => {
+  const handleFormSubmit = useCallback(() => {
     if (!usernameField.value) {
       return;
     }
@@ -187,7 +187,7 @@ export function CreateController({
     if (validation.status === "valid") {
       handleSubmit(usernameField.value, !!validation.exists);
     }
-  };
+  }, [handleSubmit, usernameField.value, validation.exists, validation.status]);
 
   useEffect(() => {
     if (pendingSubmitRef.current && debouncedValidation.status === "valid") {

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

@@ -3,7 +3,7 @@ import Controller from "@/utils/controller";
 import { ConnectionCtx } from "@/utils/connection";
 import { UpgradeInterface } from "@/hooks/upgrade";
 import { ParsedSessionPolicies } from "@/hooks/session";
-import { VerifiableControllerTheme } from "@/context/theme";
+import { ControllerTheme } from "@cartridge/ui-next";
 
 export const ConnectionContext = createContext<
   ConnectionContextValue | undefined
@@ -25,3 +25,7 @@ export type ConnectionContextValue = {
   logout: () => void;
   openSettings: () => void;
 };
+
+export type VerifiableControllerTheme = ControllerTheme & {
+  verified: boolean;
+};

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

@@ -4,7 +4,6 @@ import { useConnectionValue } from "@/hooks/connection";
 import { CartridgeAPIProvider } from "@cartridge/utils/api/cartridge";
 import { ENDPOINT } from "@/utils/graphql";
 import { PostHogProvider } from "./posthog";
-import { ControllerThemeProvider } from "./theme";
 import { UIProvider } from "./ui";
 import { jsonRpcProvider, StarknetConfig, voyager } from "@starknet-react/core";
 import { sepolia, mainnet } from "@starknet-react/chains";
@@ -40,18 +39,16 @@ export function Provider({ children }: PropsWithChildren) {
         <ConnectionContext.Provider value={connection}>
           <UIProvider>
             <BrowserRouter>
-              <ControllerThemeProvider>
-                <StarknetConfig
-                  explorer={voyager}
-                  chains={[sepolia, mainnet]}
-                  defaultChainId={defaultChainId}
-                  provider={jsonRpcProvider({ rpc })}
-                >
-                  <TokensProvider>
-                    <PostHogProvider>{children}</PostHogProvider>
-                  </TokensProvider>
-                </StarknetConfig>
-              </ControllerThemeProvider>
+              <StarknetConfig
+                explorer={voyager}
+                chains={[sepolia, mainnet]}
+                defaultChainId={defaultChainId}
+                provider={jsonRpcProvider({ rpc })}
+              >
+                <TokensProvider>
+                  <PostHogProvider>{children}</PostHogProvider>
+                </TokensProvider>
+              </StarknetConfig>
             </BrowserRouter>
           </UIProvider>
         </ConnectionContext.Provider>

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { ConfirmTransaction } from "./ConfirmTransaction";
 import { ETH_CONTRACT_ADDRESS } from "@cartridge/utils";
-import { VerifiableControllerTheme } from "@/context/theme";
+import { VerifiableControllerTheme } from "@/components/provider/connection";
 
 const meta = {
   component: ConfirmTransaction,

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

@@ -14,12 +14,13 @@ import {
 import {
   ConnectionContext,
   ConnectionContextValue,
+  VerifiableControllerTheme,
 } from "@/components/provider/connection";
 import { UpgradeInterface, useUpgrade } from "./upgrade";
 import { Policies } from "@cartridge/presets";
 import { defaultTheme, controllerConfigs } from "@cartridge/presets";
 import { ParsedSessionPolicies, parseSessionPolicies } from "./session";
-import { VerifiableControllerTheme } from "@/context/theme";
+import { useThemeEffect } from "@cartridge/ui-next";
 
 type ParentMethods = AsyncMethodReturns<{ close: () => Promise<void> }>;
 
@@ -97,15 +98,15 @@ export function useConnectionValue() {
     if (presetParam && presetParam in controllerConfigs) {
       const allowedOrigins = toArray(controllerConfigs[presetParam].origin);
       const verified =
-        origin &&
+        !!origin &&
         allowedOrigins.some((allowedOrigin) => {
           const originUrl = new URL(origin);
           return originUrl.hostname === allowedOrigin;
         });
 
       if (controllerConfigs[presetParam].theme) {
         setTheme({
-          verified: !!verified,
+          verified,
           ...controllerConfigs[presetParam].theme,
         });
       }
@@ -114,7 +115,7 @@ export function useConnectionValue() {
       if (!policiesParam && controllerConfigs[presetParam].policies) {
         setPolicies(
           parseSessionPolicies({
-            verified: !!verified,
+            verified,
             policies: controllerConfigs[presetParam].policies,
           }),
         );
@@ -129,6 +130,8 @@ export function useConnectionValue() {
     setController,
   ]);
 
+  useThemeEffect({ theme, assetUrl: "" });
+
   useEffect(() => {
     const connection = connectToController<ParentMethods>({
       setRpcUrl,
@@ -225,3 +228,7 @@ export function useConnection() {
 
   return ctx;
 }
+
+export function useControllerTheme() {
+  return useConnection().theme;
+}

packages/keychain/src/context/theme.tsx

@@ -34,9 +34,9 @@ export const defaultMockConnection: ConnectionContextValue = {
   rpcUrl: "https://test.rpc.com",
   theme: {
     verified: true,
-    name: "name",
-    cover: "cover",
-    icon: "icon",
+    name: "test",
+    icon: "test-icon",
+    cover: "test-cover",
   },
   hasPrefundRequest: false,
   setController: vi.fn(),

packages/keychain/src/hooks/connection.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from "react";
 import { render, RenderResult } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
-import { withTheme } from "./theme";
-import { ConnectionContextValue } from "@/components/provider/connection";
-import type { VerifiableControllerTheme } from "@/context/theme";
+import {
+  ConnectionContextValue,
+  VerifiableControllerTheme,
+} from "@/components/provider/connection";
 import { withConnection } from "./connection";
 import { withPostHog } from "./posthog";
 import { withStarknet } from "./starknet";
@@ -23,7 +24,7 @@ export function renderWithProviders(
 ): RenderResult {
   const wrapped = withConnection(
     <BrowserRouter>
-      {withStarknet(withPostHog(withTheme(ui, config.theme)), config.starknet)}
+      {withStarknet(withPostHog(ui), config.starknet)}
     </BrowserRouter>,
     config.connection,
   );