Add theme origin mismatch warning (#1183)

cartridge-gg · Dec 18, 2024 · e418c13 · e418c13
1 parent f9bbcb6
commit e418c13
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 20 deletions.
diff --git a/packages/keychain/src/components/Provider/connection.tsx b/packages/keychain/src/components/Provider/connection.tsx
@@ -3,8 +3,8 @@ import Controller from "utils/controller";
 import { ConnectionCtx } from "utils/connection";
 import { Prefund } from "@cartridge/controller";
 import { UpgradeInterface } from "hooks/upgrade";
-import { ControllerTheme } from "@cartridge/presets";
 import { ParsedSessionPolicies } from "hooks/session";
+import { VerifiableControllerTheme } from "hooks/theme";
 
 export const ConnectionContext = createContext<
   ConnectionContextValue | undefined
@@ -18,7 +18,7 @@ export type ConnectionContextValue = {
   chainId?: string;
   chainName?: string;
   policies?: ParsedSessionPolicies;
-  theme: ControllerTheme;
+  theme: VerifiableControllerTheme;
   prefunds: Prefund[];
   hasPrefundRequest: boolean;
   error?: Error;

diff --git a/packages/keychain/src/components/layout/Footer/index.tsx b/packages/keychain/src/components/layout/Footer/index.tsx
@@ -3,6 +3,8 @@ import { CartridgeLogo } from "@cartridge/ui";
 import React, { useEffect, useRef } from "react";
 import { FOOTER_HEIGHT, useLayout } from "components/layout";
 import NextLink from "next/link";
+import { useControllerTheme } from "hooks/theme";
+import { ErrorAlert } from "../../ErrorAlert";
 
 export function Footer({
   children,
@@ -12,6 +14,7 @@ export function Footer({
 }) {
   const ref = useRef<HTMLDivElement | null>(null);
   const { footer } = useLayout();
+  const theme = useControllerTheme();
 
   useEffect(() => {
     if (!ref.current) return;
@@ -52,6 +55,16 @@ export function Footer({
         p={4}
         pb={showCatridgeLogo ? 1 : 4}
       >
+        {!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>
+        )}
         {children}
       </VStack>
 

diff --git a/packages/keychain/src/hooks/connection.ts b/packages/keychain/src/hooks/connection.ts
@@ -11,6 +11,7 @@ import { RpcProvider } from "starknet";
 import {
   Prefund,
   ResponseCodes,
+  toArray,
   toSessionPolicies,
 } from "@cartridge/controller";
 import { mergeDefaultETHPrefund } from "utils/token";
@@ -28,6 +29,7 @@ import {
   ControllerTheme,
 } from "@cartridge/presets";
 import { ParsedSessionPolicies, parseSessionPolicies } from "./session";
+import { VerifiableControllerTheme } from "./theme";
 
 type ParentMethods = AsyncMethodReturns<{ close: () => Promise<void> }>;
 
@@ -38,7 +40,10 @@ export function useConnectionValue() {
   const [rpcUrl, setRpcUrl] = useState<string>();
   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 [prefunds, setPrefunds] = useState<Prefund[]>([]);
   const [hasPrefundRequest, setHasPrefundRequest] = useState<boolean>(false);
@@ -131,9 +136,17 @@ export function useConnectionValue() {
       const decodedPreset = decodeURIComponent(themeParam);
       try {
         const parsedTheme = JSON.parse(decodedPreset) as ControllerTheme;
-        setTheme(parsedTheme);
+        setTheme({
+          ...parsedTheme,
+          verified: true,
+        });
       } catch (e) {
-        setTheme(controllerConfigs[decodedPreset].theme || defaultTheme);
+        if (controllerConfigs[decodedPreset].theme) {
+          setTheme({
+            ...controllerConfigs[decodedPreset].theme,
+            verified: true,
+          });
+        }
       }
     }
 
@@ -156,28 +169,39 @@ 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 verified =
+        origin &&
+        toArray(controllerConfigs[presetParam].origin).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, setPrefunds]);
+  }, [
+    origin,
+    setTheme,
+    setPolicies,
+    setHasPrefundRequest,
+    setOrigin,
+    setPrefunds,
+  ]);
 
   useEffect(() => {
     const connection = connectToController<ParentMethods>({

diff --git a/packages/keychain/src/hooks/theme.tsx b/packages/keychain/src/hooks/theme.tsx
@@ -2,20 +2,26 @@ import { ControllerColor, ControllerTheme } from "@cartridge/presets";
 import { CartridgeTheme } from "@cartridge/ui";
 import { useContext, createContext, useMemo } from "react";
 
+export type VerifiableControllerTheme = ControllerTheme & {
+  verified: boolean;
+};
+
 export const ControllerThemeContext = createContext<
-  ControllerTheme | undefined
+  VerifiableControllerTheme | undefined
 >(undefined);
 
 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,