Remove unused deps

package.json

@@ -20,7 +20,6 @@
     "connector": "pnpm --filter @cartridge/connector",
     "account-wasm": "pnpm --filter @cartridge/account-wasm",
     "book": "pnpm --filter @cartridge/documentation",
-    "ui": "pnpm --filter @cartridge/ui",
     "ui:next": "pnpm --filter @cartridge/ui-next",
     "profile": "pnpm --filter @cartridge/profile",
     "utils": "pnpm --filter @cartridge/utils",

packages/keychain/package.json

@@ -23,7 +23,6 @@
     "@cartridge/account-wasm": "workspace:*",
     "@cartridge/controller": "workspace:*",
     "@cartridge/penpal": "^6.2.3",
-    "@cartridge/ui": "workspace:*",
     "@cartridge/ui-next": "workspace:*",
     "@cartridge/utils": "workspace:*",
     "@emotion/react": "^11.11.1",
@@ -41,7 +40,6 @@
     "framer-motion": "^6",
     "graphql": "^16.3.0",
     "graphql-request": "^5.0.0",
-    "js-cookie": "^3.0.1",
     "p-throttle": "^6.2.0",
     "posthog-js": "^1.181.0",
     "react": "^18.3.1",
@@ -69,7 +67,6 @@
     "@storybook/test-runner": "^0.21.0",
     "@testing-library/react": "^13.4.0",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/js-cookie": "^3.0.2",
     "@types/node": "^20.6.0",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
@@ -100,4 +97,4 @@
     "@starknet-react/core": "^3.0.2",
     "starknet": "^6.11.0"
   }
-}
+}

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

@@ -1,38 +1,16 @@
-import { ColorMode } from "@cartridge/presets";
 import { useThemeEffect } from "@cartridge/ui-next";
-import { ChakraProvider, useColorMode } from "@chakra-ui/react";
 import { useConnection } from "@/hooks/connection";
-import { useChakraTheme } from "@/hooks/theme";
-import { PropsWithChildren, useEffect, useMemo } from "react";
+import { PropsWithChildren } from "react";
 import { ControllerThemeContext } from "@/context/theme";
-import { useSearchParams } from "react-router-dom";
 
 export function ControllerThemeProvider({ children }: PropsWithChildren) {
   const { theme } = useConnection();
 
   useThemeEffect({ theme, assetUrl: "" });
-  const chakraTheme = useChakraTheme(theme);
 
   return (
     <ControllerThemeContext.Provider value={theme}>
-      <ChakraProvider theme={chakraTheme}>
-        <ChakraTheme>{children}</ChakraTheme>
-      </ChakraProvider>
+      {children}
     </ControllerThemeContext.Provider>
   );
 }
-
-function ChakraTheme({ children }: PropsWithChildren) {
-  const [searchParams] = useSearchParams();
-  const colorMode = useMemo(
-    () => (searchParams.get("colorMode") as ColorMode) ?? "dark",
-    [searchParams],
-  );
-  const { setColorMode } = useColorMode();
-
-  useEffect(() => {
-    setColorMode(colorMode);
-  }, [setColorMode, colorMode]);
-
-  return children;
-}

packages/keychain/src/hooks/theme.tsx

@@ -2,9 +2,7 @@ import {
   ControllerThemeContext,
   VerifiableControllerTheme,
 } from "@/context/theme";
-import { ControllerColor } from "@cartridge/presets";
-import { CartridgeTheme } from "@cartridge/ui";
-import { useContext, useMemo } from "react";
+import { useContext } from "react";
 
 export function useControllerTheme() {
   const ctx = useContext<VerifiableControllerTheme | undefined>(
@@ -16,42 +14,3 @@ export function useControllerTheme() {
 
   return ctx;
 }
-
-export function useChakraTheme(preset: VerifiableControllerTheme) {
-  return useMemo(
-    () => ({
-      ...CartridgeTheme,
-      semanticTokens: {
-        ...CartridgeTheme.semanticTokens,
-        colors: {
-          ...CartridgeTheme.semanticTokens.colors,
-          brand: {
-            ...CartridgeTheme.semanticTokens.colors.brand,
-            primary:
-              toThemeColor(preset?.colors?.primary) ??
-              CartridgeTheme.semanticTokens.colors.brand.primary,
-            primaryForeground:
-              toThemeColor(preset?.colors?.primaryForeground) ??
-              CartridgeTheme.semanticTokens.colors.solid.bg,
-          },
-        },
-      },
-    }),
-    [preset],
-  );
-}
-
-function toThemeColor(val: string | ControllerColor | undefined) {
-  if (typeof val === "undefined") {
-    return;
-  }
-
-  if (typeof val === "string") {
-    return val;
-  }
-
-  return {
-    default: val.dark,
-    _light: val.light,
-  };
-}