refactor: deprecate useWidgetMode and simplify widget mode detection

apps/cowswap-frontend/src/test-utils.tsx

@@ -28,9 +28,9 @@ const MockedI18nProvider = ({ children }: any) => <I18nProvider i18n={i18n}>{chi
 
 const MockThemeProvider = ({ children }: { children: React.ReactNode }) => {
   const darkMode = useIsDarkMode()
-  const isInjectedWidgetMode = isInjectedWidget()
+  const isWidget = isInjectedWidget()
 
-  const themeObject = useMemo(() => getCowswapTheme(darkMode, isInjectedWidgetMode), [darkMode, isInjectedWidgetMode])
+  const themeObject = useMemo(() => getCowswapTheme(darkMode, isWidget), [darkMode, isWidget])
 
   return <StyledComponentsThemeProvider theme={themeObject}>{children}</StyledComponentsThemeProvider>
 }
@@ -65,7 +65,7 @@ class MockedConnector extends Connector {
 }
 
 export const [mockedConnector, mockedConnectorHooks] = initializeConnector<MockedConnector>(
-  (actions) => new MockedConnector(actions)
+  (actions) => new MockedConnector(actions),
 )
 
 export function WithMockedWeb3({ children, location }: { children?: ReactNode; location?: LocationDescriptorObject }) {

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 
-import { useWidgetMode } from '@cowprotocol/common-hooks'
+import { isIframe, isInjectedWidget } from '@cowprotocol/common-utils'
 import { baseTheme } from '@cowprotocol/ui'
 
 import { CowSwapDefaultTheme } from 'styled-components'
@@ -14,21 +14,30 @@ import { ThemeFromUrlUpdater } from 'common/updaters/ThemeFromUrlUpdater'
 
 import { mapWidgetTheme } from './mapWidgetTheme'
 
-export function getCowswapTheme(darkmode: boolean, isInjectedWidgetMode: boolean): CowSwapDefaultTheme {
+// These values are static and don't change during runtime
+const isWidget = isInjectedWidget()
+const widgetMode = {
+  isWidget,
+  isIframe: isIframe(),
+  // TODO: isInjectedWidgetMode is deprecated, use isWidget instead
+  // This alias is kept for backward compatibility with styled components
+  isInjectedWidgetMode: isWidget,
+}
+
+export function getCowswapTheme(darkmode: boolean, isWidget: boolean): CowSwapDefaultTheme {
   return {
     ...baseTheme(darkmode ? 'dark' : 'light'),
-    isInjectedWidgetMode,
+    isWidget,
   }
 }
 
 export function ThemeProvider({ children }: { children?: React.ReactNode }) {
   const darkMode = useIsDarkMode()
   const injectedWidgetTheme = useInjectedWidgetPalette()
-  const widgetMode = useWidgetMode()
 
   const themeObject = useMemo(() => {
     const defaultTheme = {
-      ...getCowswapTheme(darkMode, widgetMode.isInjectedWidgetMode),
+      ...getCowswapTheme(darkMode, widgetMode.isWidget),
       ...widgetMode,
     }
 
@@ -37,7 +46,7 @@ export function ThemeProvider({ children }: { children?: React.ReactNode }) {
     }
 
     return defaultTheme
-  }, [darkMode, injectedWidgetTheme, widgetMode])
+  }, [darkMode, injectedWidgetTheme])
 
   return (
     <>

apps/explorer/src/theme/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useMemo } from 'react'
 
-import { useWidgetMode } from '@cowprotocol/common-hooks'
+import { isIframe, isInjectedWidget } from '@cowprotocol/common-utils'
 import { baseTheme } from '@cowprotocol/ui'
 
 // eslint-disable-next-line no-restricted-imports
@@ -11,9 +11,18 @@ import { getFonts, getThemePalette } from './styles'
 
 import { useThemeMode } from '../hooks/useThemeManager'
 
+// These values are static and don't change during runtime
+const isWidget = isInjectedWidget()
+const widgetMode = {
+  isWidget,
+  isIframe: isIframe(),
+  // TODO: isInjectedWidgetMode is deprecated, use isWidget instead
+  // This alias is kept for backward compatibility with styled components
+  isInjectedWidgetMode: isWidget,
+}
+
 export const ThemeProvider = ({ children }: PropsWithChildren) => {
   const mode = useThemeMode()
-  const widgetMode = useWidgetMode()
 
   const themeObject = useMemo(() => {
     const themePalette = getThemePalette(mode)
@@ -29,7 +38,7 @@ export const ThemeProvider = ({ children }: PropsWithChildren) => {
     }
 
     return computedTheme
-  }, [mode, widgetMode])
+  }, [mode])
 
   // We want to pass the ThemeProvider theme to all children implicitly, no need to manually pass it
   return <StyledComponentsThemeProvider theme={themeObject}>{children}</StyledComponentsThemeProvider>

libs/common-hooks/src/index.ts

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

libs/common-utils/src/index.ts

@@ -31,6 +31,7 @@ export * from './getWrappedToken'
 export * from './isEnoughAmount'
 export * from './isFractionFalsy'
 export * from './isInjectedWidget'
+export * from './isIframe'
 export * from './isSellOrder'
 export * from './isZero'
 export * from './jotai/atomWithPartialUpdate'

libs/common-utils/src/isIframe.ts

@@ -0,0 +1,7 @@
+/**
+ * Detects if the current window is running inside an iframe
+ * by comparing window.self with window.top
+ */
+export function isIframe(): boolean {
+  return window.self !== window.top
+}

libs/common-utils/src/isInjectedWidget.ts

@@ -1,3 +1,7 @@
+/**
+ * Detects if the current page is running in widget mode
+ * by checking for '/widget' in the URL hash
+ */
 export function isInjectedWidget(): boolean {
   return window.location.hash.includes('/widget')
 }

libs/types/src/theme.ts

@@ -60,10 +60,10 @@ export interface ThemeUtils {
 }
 
 export interface WidgetThemeMode {
-  isInjectedWidgetMode: boolean
-  isStandalone: boolean
   isWidget: boolean
   isIframe: boolean
+  /** @deprecated Use isWidget instead */
+  isInjectedWidgetMode: boolean
 }
 
 export interface CowProtocolTheme extends Colors, ThemeUtils, WidgetThemeMode {