Remove old ui package (cartridge-gg#1254)

* Remove unused deps * Update snapshots
realm-of-ra · Jan 15, 2025 · 4a39deb · 4a39deb
1 parent 29c8c6f
commit 4a39deb
Show file tree

Hide file tree

Showing 272 changed files with 72 additions and 12,141 deletions.
diff --git a/package.json b/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",

diff --git a/packages/keychain/.storybook/provider.tsx b/packages/keychain/.storybook/provider.tsx
@@ -4,7 +4,6 @@ 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 { ChakraProvider } from "@chakra-ui/react";
 import { BrowserRouter } from "react-router-dom";
 
 import { ConnectionContext } from "../src/components/provider/connection";
@@ -13,7 +12,6 @@ import {
   ControllerThemeContext,
   VerifiableControllerTheme,
 } from "../src/context/theme";
-import { useChakraTheme } from "../src/hooks/theme";
 
 export function Provider({
   children,
@@ -56,11 +54,10 @@ function ControllerThemeProvider({
   theme,
 }: PropsWithChildren<{ theme: VerifiableControllerTheme }>) {
   useThemeEffect({ theme, assetUrl: "" });
-  const chakraTheme = useChakraTheme({ ...theme });
 
   return (
     <ControllerThemeContext.Provider value={{ ...theme }}>
-      <ChakraProvider theme={chakraTheme}>{children}</ChakraProvider>
+      {children}
     </ControllerThemeContext.Provider>
   );
 }
diff --git a/...chain/__image_snapshots__/components-connect-authenticate--default-chromium.png b/...chain/__image_snapshots__/components-connect-authenticate--default-chromium.png
diff --git a/...ge_snapshots__/components-connect-create-createcontroller--default-chromium.png b/...ge_snapshots__/components-connect-create-createcontroller--default-chromium.png
diff --git a/...s__/components-connect-create-createcontroller--with-generic-error-chromium.png b/...s__/components-connect-create-createcontroller--with-generic-error-chromium.png
diff --git a/...hots__/components-connect-create-createcontroller--with-light-mode-chromium.png b/...hots__/components-connect-create-createcontroller--with-light-mode-chromium.png
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/.../components-connect-create-createcontroller--with-validation-error-chromium.png b/.../components-connect-create-createcontroller--with-validation-error-chromium.png
diff --git a/packages/keychain/__image_snapshots__/components-errorpage--default-chromium.png b/packages/keychain/__image_snapshots__/components-errorpage--default-chromium.png
diff --git a/...ages/keychain/__image_snapshots__/components-errorpage--long-error-chromium.png b/...ages/keychain/__image_snapshots__/components-errorpage--long-error-chromium.png
diff --git a/packages/keychain/__image_snapshots__/components-failure--default-chromium.png b/packages/keychain/__image_snapshots__/components-failure--default-chromium.png
diff --git a/...ge_snapshots__/components-layout-container-header-banner--expanded-chromium.png b/...ge_snapshots__/components-layout-container-header-banner--expanded-chromium.png
diff --git a/...keychain/__image_snapshots__/components-settings-delegate--default-chromium.png b/...keychain/__image_snapshots__/components-settings-delegate--default-chromium.png
diff --git a/...keychain/__image_snapshots__/components-settings-recovery--default-chromium.png b/...keychain/__image_snapshots__/components-settings-recovery--default-chromium.png
diff --git a/packages/keychain/__image_snapshots__/slot-consent--default-chromium.png b/packages/keychain/__image_snapshots__/slot-consent--default-chromium.png
diff --git a/packages/keychain/index.html b/packages/keychain/index.html
@@ -33,22 +33,6 @@
       content="{CartridgeTheme.semanticTokens.colors.brand}"
     />
     <script src="/noflash.js"></script>
-
-    <script>
-      // This script sets the initial color mode
-      (function () {
-        function setColorMode() {
-          const colorMode = localStorage.getItem("chakra-ui-color-mode");
-          if (colorMode) {
-            document.documentElement.style.setProperty(
-              "--chakra-ui-color-mode",
-              colorMode,
-            );
-          }
-        }
-        setColorMode();
-      })();
-    </script>
   </head>
   <body class="h-screen bg-background text-foreground overflow-y-auto">
     <div id="root"></div>

diff --git a/packages/keychain/package.json b/packages/keychain/package.json
@@ -16,14 +16,13 @@
     "storybook": "storybook dev -p 6001",
     "storybook:build": "storybook build",
     "storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6006 --silent",
-    "test-storybook": "test-storybook",
+    "test-storybook": "test-storybook --testTimeout=60000",
     "test:storybook": "start-server-and-test 'pnpm storybook:serve' 6006 'pnpm test-storybook'"
   },
   "dependencies": {
     "@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",
@@ -42,7 +41,6 @@
     "graphql": "^16.3.0",
     "graphql-request": "^5.0.0",
     "inapp-spy": "4.2.1",
-    "js-cookie": "^3.0.1",
     "p-throttle": "^6.2.0",
     "posthog-js": "^1.181.0",
     "react": "^18.3.1",
@@ -70,7 +68,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",
@@ -97,7 +94,6 @@
     "vitest": "^2.1.8"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^2.8.1",
     "@starknet-react/chains": "^3.0.0",
     "@starknet-react/core": "^3.0.2",
     "starknet": "^6.11.0"

diff --git a/packages/keychain/src/components/SignMessage.tsx b/packages/keychain/src/components/SignMessage.tsx
@@ -93,7 +93,7 @@ export function SignMessage({
                             <div className="capitalize text-muted-foreground">
                               {key}:
                             </div>
-                            <div className="overflow-x-auto">
+                            <div className="break-words break-all">
                               {value as string}
                             </div>
                           </CardListItem>

diff --git a/packages/keychain/src/components/layout/container/header/Banner.tsx b/packages/keychain/src/components/layout/container/header/Banner.tsx
@@ -20,7 +20,7 @@ export function Banner({
   switch (variant) {
     case "expanded":
       return (
-        <div className="flex flex-col w-full h-[136px] bg-[image:var(--theme-cover-url)] bg-cover bg-center relative mb-16 before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-b before:from-transparent before:to-[var(--chakra-colors-solid-bg)] before:pointer-events-none">
+        <div className="flex flex-col w-full h-[136px] bg-[image:var(--theme-cover-url)] bg-cover bg-center relative mb-16 before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-b before:from-transparent before:to-background before:pointer-events-none">
           <div className="p-4 flex items-center gap-4 absolute -bottom-10 left-1">
             <HeaderIcon variant={variant} Icon={Icon} icon={icon} />
             <Headline

diff --git a/packages/keychain/src/components/provider/theme.tsx b/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;
-}
diff --git a/packages/keychain/src/hooks/theme.tsx b/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,
-  };
-}
diff --git a/packages/ui-next/__image_snapshots__/icons--brand-chromium.png b/packages/ui-next/__image_snapshots__/icons--brand-chromium.png
diff --git a/packages/ui-next/src/components/icons/brand/briq.tsx b/packages/ui-next/src/components/icons/brand/briq.tsx
diff --git a/packages/ui-next/src/components/icons/brand/eykar.tsx b/packages/ui-next/src/components/icons/brand/eykar.tsx