From 7084812988d10589adf6beeb272fd292797aae34 Mon Sep 17 00:00:00 2001 From: fairlighteth <31534717+fairlighteth@users.noreply.github.com> Date: Mon, 3 Feb 2025 15:28:25 +0000 Subject: [PATCH] refactor: deprecate useWidgetMode and simplify widget mode detection --- apps/cowswap-frontend/src/test-utils.tsx | 6 +++--- .../src/theme/ThemeProvider.tsx | 21 +++++++++++++------ apps/explorer/src/theme/ThemeProvider.tsx | 15 ++++++++++--- libs/common-hooks/src/index.ts | 1 - libs/common-hooks/src/useWidgetMode.ts | 16 -------------- libs/common-utils/src/index.ts | 1 + libs/common-utils/src/isIframe.ts | 7 +++++++ libs/common-utils/src/isInjectedWidget.ts | 4 ++++ libs/types/src/theme.ts | 4 ++-- 9 files changed, 44 insertions(+), 31 deletions(-) delete mode 100644 libs/common-hooks/src/useWidgetMode.ts create mode 100644 libs/common-utils/src/isIframe.ts diff --git a/apps/cowswap-frontend/src/test-utils.tsx b/apps/cowswap-frontend/src/test-utils.tsx index c88711b988..2c805cc411 100644 --- a/apps/cowswap-frontend/src/test-utils.tsx +++ b/apps/cowswap-frontend/src/test-utils.tsx @@ -28,9 +28,9 @@ const MockedI18nProvider = ({ children }: any) => {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 {children} } @@ -65,7 +65,7 @@ class MockedConnector extends Connector { } export const [mockedConnector, mockedConnectorHooks] = initializeConnector( - (actions) => new MockedConnector(actions) + (actions) => new MockedConnector(actions), ) export function WithMockedWeb3({ children, location }: { children?: ReactNode; location?: LocationDescriptorObject }) { diff --git a/apps/cowswap-frontend/src/theme/ThemeProvider.tsx b/apps/cowswap-frontend/src/theme/ThemeProvider.tsx index 34a3128797..52b5e2e784 100644 --- a/apps/cowswap-frontend/src/theme/ThemeProvider.tsx +++ b/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 ( <> diff --git a/apps/explorer/src/theme/ThemeProvider.tsx b/apps/explorer/src/theme/ThemeProvider.tsx index 3f897f4f0e..37a9cf628a 100644 --- a/apps/explorer/src/theme/ThemeProvider.tsx +++ b/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 {children} diff --git a/libs/common-hooks/src/index.ts b/libs/common-hooks/src/index.ts index a85bd5cc92..66c0f5e9f3 100644 --- a/libs/common-hooks/src/index.ts +++ b/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' diff --git a/libs/common-hooks/src/useWidgetMode.ts b/libs/common-hooks/src/useWidgetMode.ts deleted file mode 100644 index 9bad549b5e..0000000000 --- a/libs/common-hooks/src/useWidgetMode.ts +++ /dev/null @@ -1,16 +0,0 @@ -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, - } -} diff --git a/libs/common-utils/src/index.ts b/libs/common-utils/src/index.ts index 73771b7497..b7831a1aee 100644 --- a/libs/common-utils/src/index.ts +++ b/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' diff --git a/libs/common-utils/src/isIframe.ts b/libs/common-utils/src/isIframe.ts new file mode 100644 index 0000000000..2bc526f2a5 --- /dev/null +++ b/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 +} diff --git a/libs/common-utils/src/isInjectedWidget.ts b/libs/common-utils/src/isInjectedWidget.ts index 8f17ad96a8..f3647e7bdd 100644 --- a/libs/common-utils/src/isInjectedWidget.ts +++ b/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') } diff --git a/libs/types/src/theme.ts b/libs/types/src/theme.ts index 66e32d1e8d..99a80935c2 100644 --- a/libs/types/src/theme.ts +++ b/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 {