From a62f2b64fd6b098c091f5b0bec55e9c8c8b511f7 Mon Sep 17 00:00:00 2001
From: Tarrence van As <tarrence@vanas.family>
Date: Mon, 9 Dec 2024 22:13:58 -0500
Subject: [PATCH] Revert "Remove assetUrl prefix (#1133)"

This reverts commit 7cf582a44c72308a5cf2461d67576ee50d9fffab.
---
 packages/keychain/.storybook/preview.tsx         |  2 +-
 .../keychain/src/components/Provider/theme.tsx   |  2 +-
 packages/profile/.env.development                |  1 +
 packages/profile/.env.production                 |  1 +
 .../profile/src/components/context/theme.tsx     |  2 +-
 packages/ui-next/src/hooks.ts                    | 16 +++++++++++-----
 6 files changed, 16 insertions(+), 8 deletions(-)

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