update wallet kit theme related logic (#1091)

stellar · Oct 10, 2024 · 5b9a8fb · 5b9a8fb
1 parent 6015fa2
commit 5b9a8fb
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 35 deletions.
diff --git a/src/components/WalletKitContextProvider.tsx b/src/components/WalletKitContextProvider.tsx
@@ -31,35 +31,66 @@ export const WalletKitContextProvider = ({
   useEffect(() => {
     const savedTheme = localStorageSavedTheme.get();
 
-    setTheme(savedTheme);
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
   }, []);
 
   const walletKitInstance = useMemo(() => {
     const isDarkTheme = theme === "sds-theme-dark";
 
+    const commonDarkTheme = {
+      bgColor: "#161616",
+      textColor: "#fcfcfc",
+      solidTextColor: "#fcfcfc",
+      dividerColor: "#fcfcfc",
+    };
+
+    const commonLightTheme = {
+      bgColor: "#fcfcfc",
+      textColor: "#161616",
+      solidTextColor: "#161616",
+      dividerColor: "#161616",
+    };
+
+    const modalDarkTheme = {
+      ...commonDarkTheme,
+      dividerColor: "#161616",
+      headerButtonColor: "#161616",
+      helpBgColor: "#161616",
+      notAvailableTextColor: "#fcfcfc",
+      notAvailableBgColor: "#161616",
+      notAvailableBorderColor: "#fcfcfc",
+    };
+
+    const modalLightTheme = {
+      ...commonLightTheme,
+      dividerColor: "#fcfcfc",
+      headerButtonColor: "#fcfcfc",
+      helpBgColor: "#fcfcfc",
+      notAvailableTextColor: "#161616",
+      notAvailableBgColor: "#fcfcfc",
+      notAvailableBorderColor: "#161616",
+    };
+
     return new StellarWalletsKit({
       network: networkType,
       selectedWalletId: XBULL_ID,
       modules: allowAllModules(),
-      buttonTheme: {
-        bgColor: isDarkTheme ? "#161616" : "#fcfcfc",
-        textColor: isDarkTheme ? "#fcfcfc" : "#161616",
-        solidTextColor: isDarkTheme ? "#fcfcfc" : "#161616",
-        dividerColor: isDarkTheme ? "#fcfcfc" : "#161616",
-        buttonPadding: "0.5rem 1.25rem",
-        buttonBorderRadius: "0.5rem",
-      },
-      modalTheme: {
-        bgColor: isDarkTheme ? "#161616" : "#fcfcfc",
-        textColor: isDarkTheme ? "#fcfcfc" : "#161616",
-        solidTextColor: isDarkTheme ? "#fcfcfc" : "#161616",
-        dividerColor: isDarkTheme ? "#161616" : "#fcfcfc",
-        headerButtonColor: isDarkTheme ? "#161616" : "#fcfcfc",
-        helpBgColor: isDarkTheme ? "#161616" : "#fcfcfc",
-        notAvailableTextColor: isDarkTheme ? "#fcfcfc" : "#161616",
-        notAvailableBgColor: isDarkTheme ? "#161616" : "#fcfcfc",
-        notAvailableBorderColor: isDarkTheme ? "#fcfcfc" : "#161616",
-      },
+      ...(theme && {
+        buttonTheme: isDarkTheme
+          ? {
+              ...commonDarkTheme,
+              buttonPadding: "0.5rem 1.25rem",
+              buttonBorderRadius: "0.5rem",
+            }
+          : {
+              ...commonLightTheme,
+              buttonPadding: "0.5rem 1.25rem",
+              buttonBorderRadius: "0.5rem",
+            },
+        modalTheme: isDarkTheme ? modalDarkTheme : modalLightTheme,
+      }),
     });
   }, [networkType, theme]);
 

diff --git a/src/components/layout/LayoutHeader.tsx b/src/components/layout/LayoutHeader.tsx
@@ -156,6 +156,11 @@ export const LayoutHeader = () => {
     );
   };
 
+  const renderTheme = (isDarkMode: boolean) => {
+    const theme = isDarkMode ? "sds-theme-dark" : "sds-theme-light";
+    setTheme(theme);
+  };
+
   if (layoutMode === "desktop") {
     return (
       <div className="LabLayout__header">
@@ -167,21 +172,16 @@ export const LayoutHeader = () => {
           />
 
           <MainNav />
-          <ConnectWallet />
 
           <div className="LabLayout__header__settings">
             <Hydration>
               <ThemeSwitch
                 storageKeyId={LOCAL_STORAGE_SAVED_THEME}
-                onActionEnd={(isDarkMode) => {
-                  const theme = isDarkMode
-                    ? "sds-theme-dark"
-                    : "sds-theme-light";
-                  setTheme(theme);
-                }}
+                onActionEnd={renderTheme}
               />
             </Hydration>
             <NetworkSelector />
+            <ConnectWallet />
           </div>
         </header>
       </div>
@@ -219,12 +219,7 @@ export const LayoutHeader = () => {
                   <Hydration>
                     <ThemeSwitch
                       storageKeyId={LOCAL_STORAGE_SAVED_THEME}
-                      onActionEnd={(isDarkMode) => {
-                        const theme = isDarkMode
-                          ? "sds-theme-dark"
-                          : "sds-theme-light";
-                        setTheme(theme);
-                      }}
+                      onActionEnd={renderTheme}
                     />
                   </Hydration>
                 </DropdownItem>

diff --git a/src/store/createStore.ts b/src/store/createStore.ts
@@ -59,7 +59,7 @@ export interface Store {
   // Shared
   network: Network | EmptyObj;
   // Theme Color
-  theme: ThemeColorType | undefined;
+  theme: ThemeColorType | null;
   // isDynamicNetworkSelect flag to indicate network update outside of the dropdown
   isDynamicNetworkSelect: boolean;
   selectNetwork: (network: Network) => void;
@@ -267,7 +267,7 @@ export const createStore = (options: CreateStoreOptions) =>
       immer((set) => ({
         // Shared
         network: {},
-        theme: undefined,
+        theme: null,
         isDynamicNetworkSelect: false,
         selectNetwork: (network: Network) =>
           set((state) => {