feat: introduce useWidgetMode hook and update theme handling

apps/cowswap-frontend/src/theme/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 
-import { isInjectedWidget } from '@cowprotocol/common-utils'
+import { useWidgetMode } from '@cowprotocol/common-hooks'
 import { baseTheme } from '@cowprotocol/ui'
 
 import { CowSwapDefaultTheme } from 'styled-components'
@@ -24,17 +24,20 @@ export function getCowswapTheme(darkmode: boolean, isInjectedWidgetMode: boolean
 export function ThemeProvider({ children }: { children?: React.ReactNode }) {
   const darkMode = useIsDarkMode()
   const injectedWidgetTheme = useInjectedWidgetPalette()
+  const widgetMode = useWidgetMode()
 
   const themeObject = useMemo(() => {
-    const widgetMode = isInjectedWidget()
-    const defaultTheme = getCowswapTheme(darkMode, widgetMode)
+    const defaultTheme = {
+      ...getCowswapTheme(darkMode, widgetMode.isInjectedWidgetMode),
+      ...widgetMode,
+    }
 
-    if (widgetMode) {
+    if (widgetMode.isWidget) {
       return mapWidgetTheme(injectedWidgetTheme, defaultTheme)
     }
 
     return defaultTheme
-  }, [darkMode, injectedWidgetTheme])
+  }, [darkMode, injectedWidgetTheme, widgetMode])
 
   return (
     <>

apps/cowswap-frontend/src/theme/types.ts

@@ -1,9 +1,7 @@
 import type { CowProtocolTheme } from '@cowprotocol/ui'
 
 declare module 'styled-components' {
-  export interface CowSwapDefaultTheme extends CowProtocolTheme {
-    isInjectedWidgetMode: boolean
-  }
+  export interface CowSwapDefaultTheme extends CowProtocolTheme {}
 
   export interface DefaultTheme extends CowSwapDefaultTheme {}
 }

apps/explorer/src/theme/ThemeProvider.tsx

@@ -1,9 +1,8 @@
 import React, { PropsWithChildren, useMemo } from 'react'
 
-import { isInjectedWidget } from '@cowprotocol/common-utils'
+import { useWidgetMode } from '@cowprotocol/common-hooks'
 import { baseTheme } from '@cowprotocol/ui'
 
-import { useLocation } from 'react-router-dom'
 // eslint-disable-next-line no-restricted-imports
 import { DefaultTheme } from 'styled-components'
 import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-components/macro'
@@ -14,42 +13,23 @@ import { useThemeMode } from '../hooks/useThemeManager'
 
 export const ThemeProvider = ({ children }: PropsWithChildren) => {
   const mode = useThemeMode()
-  const location = useLocation()
+  const widgetMode = useWidgetMode()
 
   const themeObject = useMemo(() => {
     const themePalette = getThemePalette(mode)
     const fontPalette = getFonts(mode)
 
-    // Determine order type from URL path
-    const isLimitOrder = location.pathname.includes('/limit')
-    const isSwapOrder = location.pathname.includes('/swap')
-    const isTwapOrder = location.pathname.includes('/twap')
-    const isAdvancedOrder = location.pathname.includes('/advanced')
-
-    // Determine widget mode
-    const isWidget = isInjectedWidget()
-    const isIframe = window.self !== window.top
-    const isStandalone = !isWidget && !isIframe
-    const isInjectedWidgetMode = isWidget
-
     const computedTheme: DefaultTheme = {
       ...baseTheme(mode),
       // Compute the app colour pallette using the passed in themeMode
       ...themePalette,
       ...fontPalette,
-      // Add explorer-specific theme flags
-      isInjectedWidgetMode,
-      isStandalone,
-      isWidget,
-      isIframe,
-      isLimitOrder,
-      isSwapOrder,
-      isTwapOrder,
-      isAdvancedOrder,
+      // Add widget mode flags
+      ...widgetMode,
     }
 
     return computedTheme
-  }, [mode, location])
+  }, [mode, widgetMode])
 
   // We want to pass the ThemeProvider theme to all children implicitly, no need to manually pass it
   return <StyledComponentsThemeProvider theme={themeObject}>{children}</StyledComponentsThemeProvider>

apps/explorer/src/theme/types.ts

@@ -11,14 +11,6 @@ declare module 'styled-components' {
   export interface ExplorerTheme extends Colors, Fonts {
     // theming
     mode: 'light' | 'dark'
-    isInjectedWidgetMode: boolean
-    isStandalone: boolean
-    isWidget: boolean
-    isIframe: boolean
-    isLimitOrder: boolean
-    isSwapOrder: boolean
-    isTwapOrder: boolean
-    isAdvancedOrder: boolean
   }
 
   export interface DefaultTheme extends CowProtocolTheme, ExplorerTheme {}

libs/common-hooks/src/index.ts

@@ -17,3 +17,4 @@ export * from './useWindowSize'
 export * from './useCopyClipboard'
 export * from './useFeatureFlags'
 export * from './useGasLimitHooks'
+export * from './useWidgetMode'

libs/common-hooks/src/useWidgetMode.ts

@@ -0,0 +1,16 @@
+import { isInjectedWidget } from '@cowprotocol/common-utils'
+import { WidgetThemeMode } from '@cowprotocol/types'
+
+export function useWidgetMode(): WidgetThemeMode {
+  const isWidget = isInjectedWidget()
+  const isIframe = window.self !== window.top
+  const isStandalone = !isWidget && !isIframe
+  const isInjectedWidgetMode = isWidget
+
+  return {
+    isInjectedWidgetMode,
+    isStandalone,
+    isWidget,
+    isIframe,
+  }
+}

libs/types/src/theme.ts

@@ -59,7 +59,14 @@ export interface ThemeUtils {
   flexRowNoWrap: FlattenSimpleInterpolation
 }
 
-export interface CowProtocolTheme extends Colors, ThemeUtils {
+export interface WidgetThemeMode {
+  isInjectedWidgetMode: boolean
+  isStandalone: boolean
+  isWidget: boolean
+  isIframe: boolean
+}
+
+export interface CowProtocolTheme extends Colors, ThemeUtils, WidgetThemeMode {
   mode: CowSwapTheme
 }