Add theme origin mismatch warning (#1192)

* Add theme origin mismatch warning * Remove wrong controller theme context --------- Co-authored-by: JunichiSugiura <[email protected]>
cartridge-gg · Jan 6, 2025 · b6d1f66 · b6d1f66
1 parent ca079a6
commit b6d1f66
Show file tree

Hide file tree

Showing 15 changed files with 106 additions and 51 deletions.
diff --git a/packages/keychain/.storybook/mock.ts b/packages/keychain/.storybook/mock.ts
@@ -39,7 +39,7 @@ export function useMockedConnection({
     chainId,
     chainName,
     policies: {},
-    theme: defaultTheme,
+    theme: { defaultTheme, verified: true },
     hasPrefundRequest: false,
     error: undefined,
     setContext: () => {},

diff --git a/packages/keychain/.storybook/preview.tsx b/packages/keychain/.storybook/preview.tsx
@@ -1,11 +1,12 @@
 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 "../src/index.css";
-import { SonnerToaster } from "@cartridge/ui-next";
 
 const preview: Preview = {
   parameters: {

diff --git a/packages/keychain/.storybook/provider.tsx b/packages/keychain/.storybook/provider.tsx
@@ -1,20 +1,20 @@
 import React, { PropsWithChildren } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { ConnectionContext } from "../src/components/Provider/connection";
-import {
-  defaultTheme,
-  controllerConfigs,
-  ControllerTheme,
-} from "@cartridge/presets";
+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 { StoryParameters, useMockedConnection } from "./mock";
-import { ControllerThemeContext } from "../src/context/theme";
 import { ChakraProvider } from "@chakra-ui/react";
-import { useChakraTheme } from "../src/hooks/theme";
 import { BrowserRouter } from "react-router-dom";
 
+import { ConnectionContext } from "../src/components/Provider/connection";
+import { StoryParameters, useMockedConnection } from "./mock";
+import {
+  ControllerThemeContext,
+  VerifiableControllerTheme,
+} from "../src/context/theme";
+import { useChakraTheme } from "../src/hooks/theme";
+
 export function Provider({
   children,
   parameters,
@@ -23,6 +23,11 @@ export function Provider({
 
   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;
   }
@@ -48,13 +53,13 @@ const queryClient = new QueryClient();
 
 function ControllerThemeProvider({
   children,
-  theme = defaultTheme,
-}: PropsWithChildren<{ theme?: ControllerTheme }>) {
+  theme,
+}: PropsWithChildren<{ theme: VerifiableControllerTheme }>) {
   useThemeEffect({ theme, assetUrl: "" });
-  const chakraTheme = useChakraTheme(theme);
+  const chakraTheme = useChakraTheme({ ...theme });
 
   return (
-    <ControllerThemeContext.Provider value={theme}>
+    <ControllerThemeContext.Provider value={{ ...theme }}>
       <ChakraProvider theme={chakraTheme}>{children}</ChakraProvider>
     </ControllerThemeContext.Provider>
   );

diff --git a/...snapshots__/components-connect-create-createcontroller--with-theme-chromium.png b/...snapshots__/components-connect-create-createcontroller--with-theme-chromium.png
diff --git a/...s__/components-connect-create-createcontroller--with-timeout-error-chromium.png b/...s__/components-connect-create-createcontroller--with-timeout-error-chromium.png
diff --git a/packages/keychain/__image_snapshots__/components-settings--default-chromium.png b/packages/keychain/__image_snapshots__/components-settings--default-chromium.png
diff --git a/packages/keychain/src/components/ConfirmTransaction.stories.tsx b/packages/keychain/src/components/ConfirmTransaction.stories.tsx
@@ -15,7 +15,7 @@ const meta = {
         session: () => true,
       },
       context: {
-        origin: "http://localhost:3002",
+        origin: "http://localhost:6001",
         type: "execute",
         transactions: [
           {

diff --git a/packages/keychain/src/components/Provider/connection.tsx b/packages/keychain/src/components/Provider/connection.tsx
@@ -2,8 +2,8 @@ import { createContext } from "react";
 import Controller from "@/utils/controller";
 import { ConnectionCtx } from "@/utils/connection";
 import { UpgradeInterface } from "@/hooks/upgrade";
-import { ControllerTheme } from "@cartridge/presets";
 import { ParsedSessionPolicies } from "@/hooks/session";
+import { VerifiableControllerTheme } from "@/context/theme";
 
 export const ConnectionContext = createContext<
   ConnectionContextValue | undefined
@@ -17,7 +17,7 @@ export type ConnectionContextValue = {
   chainId?: string;
   chainName?: string;
   policies?: ParsedSessionPolicies;
-  theme: ControllerTheme;
+  theme: VerifiableControllerTheme;
   hasPrefundRequest: boolean;
   error?: Error;
   upgrade: UpgradeInterface;

diff --git a/packages/keychain/src/components/connect/create/CreateController.stories.tsx b/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 { ControllerTheme } from "@cartridge/presets";
+import { VerifiableControllerTheme } from "@/context/theme";
 
 const meta: Meta<typeof CreateControllerView> = {
   component: CreateControllerView,
@@ -17,7 +17,8 @@ export const Default: Story = {
   args: {
     theme: {
       name: "Cartridge",
-    } as ControllerTheme,
+      verified: true,
+    } as VerifiableControllerTheme,
     usernameField: {
       value: "",
       error: undefined,
@@ -41,7 +42,8 @@ export const WithLightMode: Story = {
   args: {
     theme: {
       name: "Cartridge",
-    } as ControllerTheme,
+      verified: true,
+    } as VerifiableControllerTheme,
     usernameField: {
       value: "",
       error: undefined,
@@ -65,7 +67,7 @@ export const WithTheme: Story = {
   args: {
     theme: {
       name: "Eternum",
-    } as ControllerTheme,
+    } as VerifiableControllerTheme,
     usernameField: {
       value: "",
       error: undefined,
@@ -86,7 +88,8 @@ export const WithTimeoutError: Story = {
   args: {
     theme: {
       name: "Cartridge",
-    } as ControllerTheme,
+      verified: true,
+    } as VerifiableControllerTheme,
     usernameField: {
       value: "username",
       error: undefined,
@@ -108,7 +111,8 @@ export const WithValidationError: Story = {
   args: {
     theme: {
       name: "Cartridge",
-    } as ControllerTheme,
+      verified: true,
+    } as VerifiableControllerTheme,
     usernameField: {
       value: "@#$!",
     },
@@ -129,7 +133,8 @@ export const WithGenericError: Story = {
   args: {
     theme: {
       name: "Cartridge",
-    } as ControllerTheme,
+      verified: true,
+    } as VerifiableControllerTheme,
     usernameField: {
       value: "username",
       error: undefined,

diff --git a/packages/keychain/src/components/connect/create/CreateController.tsx b/packages/keychain/src/components/connect/create/CreateController.tsx
@@ -9,11 +9,12 @@ import { useUsernameValidation } from "./useUsernameValidation";
 import { LoginMode } from "../types";
 import { Legal, StatusTray } from ".";
 import { useCreateController } from "./useCreateController";
-import { ControllerTheme } from "@cartridge/presets";
 import { Input } from "@cartridge/ui-next";
+import { ErrorAlert } from "@/components/ErrorAlert";
+import { VerifiableControllerTheme } from "@/context/theme";
 
 interface CreateControllerViewProps {
-  theme: ControllerTheme;
+  theme: VerifiableControllerTheme;
   usernameField: {
     value: string;
     error?: string;
@@ -87,6 +88,17 @@ export function CreateControllerView({
         </Content>
 
         <Footer showCatridgeLogo>
+          {!theme.verified && (
+            <div className="mb-5">
+              <ErrorAlert
+                title="Please proceed with caution"
+                description="Application domain does not match the configured domain."
+                variant="warning"
+                isExpanded
+              />
+            </div>
+          )}
+
           <Legal />
 
           <Button

diff --git a/packages/keychain/src/components/connect/create/StatusTray.tsx b/packages/keychain/src/components/connect/create/StatusTray.tsx
@@ -69,7 +69,7 @@ export function StatusTray({
         )}
       </Text>
       {isTimeoutError && (
-        <div className="w-full flex items-center justify-between text-xs font-semibold px-4">
+        <div className="w-full flex items-center justify-between text-xs font-semibold px-4 text-secondary">
           <div>Having trouble signing up?</div>
           <Link
             className="flex items-center gap-1.5 hover:underline"

diff --git a/packages/keychain/src/context/theme.tsx b/packages/keychain/src/context/theme.tsx
@@ -1,6 +1,10 @@
 import { ControllerTheme } from "@cartridge/presets";
 import { createContext } from "react";
 
+export type VerifiableControllerTheme = ControllerTheme & {
+  verified: boolean;
+};
+
 export const ControllerThemeContext = createContext<
-  ControllerTheme | undefined
+  VerifiableControllerTheme | undefined
 >(undefined);
diff --git a/packages/keychain/src/hooks/connection.ts b/packages/keychain/src/hooks/connection.ts
@@ -8,7 +8,11 @@ import {
 } from "@/utils/connection";
 import { getChainName, isIframe } from "@cartridge/utils";
 import { RpcProvider } from "starknet";
-import { ResponseCodes, toSessionPolicies } from "@cartridge/controller";
+import {
+  ResponseCodes,
+  toArray,
+  toSessionPolicies,
+} from "@cartridge/controller";
 import { setIsSignedUp } from "@/utils/cookie";
 import {
   ConnectionContext,
@@ -23,6 +27,7 @@ import {
   ControllerTheme,
 } from "@cartridge/presets";
 import { ParsedSessionPolicies, parseSessionPolicies } from "./session";
+import { VerifiableControllerTheme } from "@/context/theme";
 
 type ParentMethods = AsyncMethodReturns<{ close: () => Promise<void> }>;
 
@@ -35,7 +40,10 @@ export function useConnectionValue() {
   );
   const [chainId, setChainId] = useState<string>();
   const [policies, setPolicies] = useState<ParsedSessionPolicies>();
-  const [theme, setTheme] = useState<ControllerTheme>(defaultTheme);
+  const [theme, setTheme] = useState<VerifiableControllerTheme>({
+    verified: true,
+    ...defaultTheme,
+  });
   const [controller, setControllerRaw] = useState<Controller | undefined>();
   const [hasPrefundRequest, setHasPrefundRequest] = useState<boolean>(false);
   const upgrade: UpgradeInterface = useUpgrade(controller);
@@ -120,9 +128,19 @@ export function useConnectionValue() {
       const decodedPreset = decodeURIComponent(themeParam);
       try {
         const parsedTheme = JSON.parse(decodedPreset) as ControllerTheme;
-        setTheme(parsedTheme);
-      } catch {
-        setTheme(controllerConfigs[decodedPreset].theme || defaultTheme);
+        setTheme({
+          ...parsedTheme,
+          verified: true,
+        });
+      } catch (e) {
+        if (controllerConfigs[decodedPreset].theme) {
+          setTheme({
+            ...controllerConfigs[decodedPreset].theme,
+            verified: true,
+          });
+        } else {
+          console.error(e);
+        }
       }
     }
 
@@ -145,28 +163,33 @@ export function useConnectionValue() {
     }
 
     // Application provided policies take precedence over preset policies.
-    if (
-      presetParam &&
-      presetParam in controllerConfigs
-      // TODO: Reenable
-      //  &&
-      // origin &&
-      // (origin.startsWith("http://localhost") ||
-      //   toArray(controllerConfigs[presetParam].origin).includes(origin))
-    ) {
-      setTheme(controllerConfigs[presetParam].theme || defaultTheme);
+    if (presetParam && presetParam in controllerConfigs) {
+      const allowedOrigins = toArray(controllerConfigs[presetParam].origin);
+      const verified =
+        origin &&
+        allowedOrigins.some((allowedOrigin) => {
+          const originUrl = new URL(origin);
+          return originUrl.hostname === allowedOrigin;
+        });
+
+      if (controllerConfigs[presetParam].theme) {
+        setTheme({
+          verified: !!verified,
+          ...controllerConfigs[presetParam].theme,
+        });
+      }
 
       // Set policies from preset if no URL policies
       if (!policiesParam && controllerConfigs[presetParam].policies) {
         setPolicies(
           parseSessionPolicies({
-            verified: true,
+            verified: !!verified,
             policies: controllerConfigs[presetParam].policies,
           }),
         );
       }
     }
-  }, [setTheme, setPolicies, setHasPrefundRequest, setOrigin]);
+  }, [origin, setTheme, setPolicies, setHasPrefundRequest, setOrigin]);
 
   useEffect(() => {
     const connection = connectToController<ParentMethods>({

diff --git a/packages/keychain/src/hooks/theme.tsx b/packages/keychain/src/hooks/theme.tsx
@@ -1,18 +1,23 @@
-import { ControllerThemeContext } from "@/context/theme";
-import { ControllerColor, ControllerTheme } from "@cartridge/presets";
+import {
+  ControllerThemeContext,
+  VerifiableControllerTheme,
+} from "@/context/theme";
+import { ControllerColor } from "@cartridge/presets";
 import { CartridgeTheme } from "@cartridge/ui";
 import { useContext, useMemo } from "react";
 
 export function useControllerTheme() {
-  const ctx = useContext<ControllerTheme | undefined>(ControllerThemeContext);
+  const ctx = useContext<VerifiableControllerTheme | undefined>(
+    ControllerThemeContext,
+  );
   if (!ctx) {
     throw new Error("ControllerThemeProvider must be placed");
   }
 
   return ctx;
 }
 
-export function useChakraTheme(preset: ControllerTheme) {
+export function useChakraTheme(preset: VerifiableControllerTheme) {
   return useMemo(
     () => ({
       ...CartridgeTheme,

diff --git a/scripts/update-storybook-snapshot.sh b/scripts/update-storybook-snapshot.sh
@@ -4,7 +4,7 @@
 docker run \
   --rm \
   -v "$(pwd)":/app \
-  -v "$(pwd)"/node_modules:/app/node_modules \
+  -v /app/node_modules \
   --ipc=host \
   ghcr.io/cartridge-gg/controller/storybook-env:sha-91a2d36 \
   bash -c "