feat(tx-builder-mode): share dark mode information with safe apps

src/components/safe-apps/AppFrame/useAppCommunicator.ts

@@ -33,6 +33,7 @@ import { SAFE_APPS_EVENTS, trackSafeAppEvent } from '@/services/analytics'
 import { useAppSelector } from '@/store'
 import { selectRpc } from '@/store/settingsSlice'
 import { createSafeAppsWeb3Provider } from '@/hooks/wallets/web3'
+import { useDarkMode } from '@/hooks/useDarkMode'
 
 export enum CommunicatorMessages {
   REJECT_TRANSACTION_MESSAGE = 'Transaction was rejected',
@@ -73,6 +74,7 @@ const useAppCommunicator = (
 ): AppCommunicator | undefined => {
   const [communicator, setCommunicator] = useState<AppCommunicator | undefined>(undefined)
   const customRpc = useAppSelector(selectRpc)
+  const isDarkMode = useDarkMode()
 
   const safeAppWeb3Provider = useMemo(() => {
     if (!chain) {
@@ -119,6 +121,15 @@ const useAppCommunicator = (
     }
   }, [app, iframeRef])
 
+  useEffect(() => {
+    communicator?.send(
+      {
+        darkMode: isDarkMode,
+      },
+      'tx-builder',
+    )
+  }, [communicator, isDarkMode])
+
   // Adding communicator logic for the required SDK Methods
   // We don't need to unsubscribe from the events because there can be just one subscription
   // per event type and the next effect run will simply replace the handlers
@@ -205,7 +216,17 @@ const useAppCommunicator = (
     communicator?.on(Methods.requestAddressBook, (msg) => {
       return handlers.onRequestAddressBook(msg.origin)
     })
-  }, [safeAppWeb3Provider, handlers, chain, communicator])
+
+    // TODO: it will be moved to safe-apps-sdk soon
+    communicator?.on('getCurrentTheme' as Methods, (msg) => {
+      communicator.send(
+        {
+          darkMode: isDarkMode,
+        },
+        msg.data.id,
+      )
+    })
+  }, [safeAppWeb3Provider, handlers, chain, communicator, isDarkMode])
 
   return communicator
 }

src/services/safe-apps/AppCommunicator.ts

@@ -37,11 +37,15 @@ class AppCommunicator {
     const sentFromIframe = this.iframeRef.current?.contentWindow === msg.source
     const knownMethod = Object.values(Methods).includes(msg.data.method)
 
-    return sentFromIframe && knownMethod
+    // TODO: move it to safe-app Methods types
+    const isThemeInfoMethod = (msg.data.method as string) === 'getCurrentTheme'
+
+    return sentFromIframe && (knownMethod || isThemeInfoMethod)
   }
 
   private canHandleMessage = (msg: SDKMessageEvent): boolean => {
     if (!msg.data) return false
+
     return Boolean(this.handlers.get(msg.data.method))
   }