diff --git a/packages/keychain/.storybook/mock.ts b/packages/keychain/.storybook/mock.ts index be6c10d34..8ea3a4fd7 100644 --- 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 index 671ed5ffb..b5e65685e 100644 --- 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 index 06adf9c3b..a8716ee9b 100644 --- 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 ( - + {children} ); diff --git a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png index 3280b647e..b6182c9bf 100644 Binary files a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png differ diff --git a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-timeout-error-chromium.png b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-timeout-error-chromium.png index 5dbe3c16b..c719da4ee 100644 Binary files a/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-timeout-error-chromium.png and b/packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-timeout-error-chromium.png differ diff --git a/packages/keychain/__image_snapshots__/components-settings--default-chromium.png b/packages/keychain/__image_snapshots__/components-settings--default-chromium.png index 001cbdb49..1e09823a5 100644 Binary files a/packages/keychain/__image_snapshots__/components-settings--default-chromium.png and b/packages/keychain/__image_snapshots__/components-settings--default-chromium.png differ diff --git a/packages/keychain/src/components/ConfirmTransaction.stories.tsx b/packages/keychain/src/components/ConfirmTransaction.stories.tsx index de19a3f25..b1413f29f 100644 --- 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 index e0f0a8634..40e969c42 100644 --- 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 index 5f4e21eca..814a9d4b9 100644 --- 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 = { 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 index 8696fa11a..ef3652036 100644 --- 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({