diff --git a/packages/keychain/.storybook/preview.tsx b/packages/keychain/.storybook/preview.tsx index 95085f706..2f8c020db 100644 --- a/packages/keychain/.storybook/preview.tsx +++ b/packages/keychain/.storybook/preview.tsx @@ -162,7 +162,7 @@ export function ControllerThemeProvider({ children, theme = defaultTheme, }: PropsWithChildren<{ theme?: ControllerTheme }>) { - useThemeEffect({ theme }); + useThemeEffect({ theme, assetUrl: "" }); const chakraTheme = useChakraTheme(theme); return ( diff --git a/packages/keychain/src/components/Provider/theme.tsx b/packages/keychain/src/components/Provider/theme.tsx index d821f00d8..bb1272ffe 100644 --- a/packages/keychain/src/components/Provider/theme.tsx +++ b/packages/keychain/src/components/Provider/theme.tsx @@ -9,7 +9,7 @@ import { PropsWithChildren, useEffect, useMemo } from "react"; export function ControllerThemeProvider({ children }: PropsWithChildren) { const { theme } = useConnection(); - useThemeEffect({ theme }); + useThemeEffect({ theme, assetUrl: "" }); const chakraTheme = useChakraTheme(theme); return ( diff --git a/packages/profile/.env.development b/packages/profile/.env.development index c28d3c8d0..6465bd4b8 100644 --- a/packages/profile/.env.development +++ b/packages/profile/.env.development @@ -1,4 +1,5 @@ VITE_CARTRIDGE_API_URL="https://api.cartridge.gg" +VITE_KEYCHAIN_URL="http://localhost:3001" VITE_RPC_SEPOLIA="https://api.cartridge.gg/x/starknet/sepolia" VITE_POSTHOG_KEY=phc_UWaJajNQ00PjHhveZ81SJ2zVtBicKrzewdZHGiyavQQ VITE_POSTHOG_HOST=https://profile.cartridge.gg/ingest diff --git a/packages/profile/.env.production b/packages/profile/.env.production index c28d3c8d0..292a30d28 100644 --- a/packages/profile/.env.production +++ b/packages/profile/.env.production @@ -1,4 +1,5 @@ VITE_CARTRIDGE_API_URL="https://api.cartridge.gg" +VITE_KEYCHAIN_URL="https://x.cartridge.gg" VITE_RPC_SEPOLIA="https://api.cartridge.gg/x/starknet/sepolia" VITE_POSTHOG_KEY=phc_UWaJajNQ00PjHhveZ81SJ2zVtBicKrzewdZHGiyavQQ VITE_POSTHOG_HOST=https://profile.cartridge.gg/ingest diff --git a/packages/profile/src/components/context/theme.tsx b/packages/profile/src/components/context/theme.tsx index 01eb6e9d3..a8a750ef8 100644 --- a/packages/profile/src/components/context/theme.tsx +++ b/packages/profile/src/components/context/theme.tsx @@ -83,7 +83,7 @@ export function ThemeProvider({ setTheme(JSON.parse(val)); }, [themeParam, origin]); - useThemeEffect({ theme }); + useThemeEffect({ theme, assetUrl: import.meta.env.VITE_KEYCHAIN_URL }); const value = { colorScheme, diff --git a/packages/ui-next/src/hooks.ts b/packages/ui-next/src/hooks.ts index a65243c07..f0e2b5415 100644 --- a/packages/ui-next/src/hooks.ts +++ b/packages/ui-next/src/hooks.ts @@ -1,7 +1,13 @@ import { useEffect } from "react"; import { hexToHsl } from "@cartridge/utils"; -export function useThemeEffect({ theme }: { theme: ControllerTheme }) { +export function useThemeEffect({ + theme, + assetUrl, +}: { + theme: ControllerTheme; + assetUrl: string; +}) { useEffect(() => { if (!theme) return; @@ -11,12 +17,12 @@ export function useThemeEffect({ theme }: { theme: ControllerTheme }) { document.documentElement.style.setProperty( "--theme-icon-url", - `url("${theme.icon}")`, + `url("${assetUrl}${theme.icon}")`, ); const coverUrl = typeof theme.cover === "string" - ? `url("${theme.cover}")` - : `url("${theme.cover[appliedColorMode]}")`; + ? `url("${assetUrl}${theme.cover}")` + : `url("${assetUrl}${theme.cover[appliedColorMode]}")`; document.documentElement.style.setProperty("--theme-cover-url", coverUrl); if (!theme.colors) return; @@ -39,7 +45,7 @@ export function useThemeEffect({ theme }: { theme: ControllerTheme }) { hexToHsl(val), ); } - }, [theme]); + }, [theme, assetUrl]); } // dup of @cartridge/controller/types