Sync theme on scaffold client level

reown-com · Jan 2, 2024 · f682e19 · f682e19
1 parent af4ee7a
commit f682e19
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/packages/core/src/controllers/ThemeController.ts b/packages/core/src/controllers/ThemeController.ts
@@ -1,4 +1,4 @@
-import { proxy, subscribe as sub } from 'valtio/vanilla'
+import { proxy, subscribe as sub, snapshot } from 'valtio/vanilla'
 import type { ThemeMode, ThemeVariables } from '../utils/TypeUtil.js'
 
 // -- Types --------------------------------------------- //
@@ -27,5 +27,9 @@ export const ThemeController = {
 
   setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) {
     state.themeVariables = { ...state.themeVariables, ...themeVariables }
+  },
+
+  getSnapshot() {
+    return snapshot(state)
   }
 }
diff --git a/packages/scaffold/src/client.ts b/packages/scaffold/src/client.ts
@@ -94,11 +94,33 @@ export class Web3ModalScaffold {
   public setThemeMode(themeMode: ThemeControllerState['themeMode']) {
     ThemeController.setThemeMode(themeMode)
     setColorTheme(ThemeController.state.themeMode)
+    try {
+      const emailConnector = ConnectorController.getEmailConnector()
+      if (emailConnector) {
+        emailConnector.provider.syncTheme({
+          themeMode: ThemeController.getSnapshot().themeMode
+        })
+      }
+    } catch {
+      // eslint-disable-next-line no-console
+      console.info('Unable to sync theme to email connector')
+    }
   }
 
   public setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) {
     ThemeController.setThemeVariables(themeVariables)
     setThemeVariables(ThemeController.state.themeVariables)
+    try {
+      const emailConnector = ConnectorController.getEmailConnector()
+      if (emailConnector) {
+        emailConnector.provider.syncTheme({
+          themeVariables: ThemeController.getSnapshot().themeVariables
+        })
+      }
+    } catch {
+      // eslint-disable-next-line no-console
+      console.info('Unable to sync theme to email connector')
+    }
   }
 
   public subscribeTheme(callback: (newState: ThemeControllerState) => void) {

diff --git a/packages/wagmi/src/client.ts b/packages/wagmi/src/client.ts
@@ -365,10 +365,6 @@ export class Web3Modal extends Web3ModalScaffold {
     const emailConnector = wagmiConfig.connectors.find(({ id }) => id === 'w3mEmail')
     if (emailConnector) {
       const provider = await emailConnector.getProvider()
-      provider.syncTheme({
-        themeMode: this.options?.themeMode,
-        themeVariables: this.options?.themeVariables
-      })
       this.addConnector({
         id: ConstantsUtil.EMAIL_CONNECTOR_ID,
         type: 'EMAIL',