feat: Widget Configurator Revamp

apps/cow-fi/app/(main)/widget/page.tsx

@@ -51,7 +51,7 @@ const widgetParams: CowSwapWidgetParams = {
   appCode: 'CoW Protocol: Widget Demo',
   theme: 'light',
   standaloneMode: true,
-  width: '100%',
+  iframeStyle: { width: '100%' },
 }
 
 export default function Page(): ReactNode {

apps/cowswap-frontend/src/modules/application/containers/App/styled.test.tsx

@@ -0,0 +1,85 @@
+import { render } from '@testing-library/react'
+import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-components/macro'
+
+import { AppWrapper, BodyWrapper, Marginer } from './styled'
+
+describe('AppWrapper', () => {
+  it('does not enforce a minimum viewport height in widget mode', () => {
+    const { getByTestId } = render(
+      <StyledComponentsThemeProvider theme={{ isWidget: true } as never}>
+        <AppWrapper data-testid="app-wrapper" />
+      </StyledComponentsThemeProvider>,
+    )
+
+    expect(window.getComputedStyle(getByTestId('app-wrapper')).minHeight).toBe('auto')
+  })
+
+  it('keeps the full-page minimum height outside widget mode', () => {
+    const { getByTestId } = render(
+      <StyledComponentsThemeProvider theme={{ isWidget: false } as never}>
+        <AppWrapper data-testid="app-wrapper" />
+      </StyledComponentsThemeProvider>,
+    )
+
+    expect(window.getComputedStyle(getByTestId('app-wrapper')).minHeight).toBe('100vh')
+  })
+})
+
+describe('BodyWrapper', () => {
+  it('does not flex-grow in widget mode', () => {
+    const { getByTestId } = render(
+      <StyledComponentsThemeProvider theme={{ isWidget: true } as never}>
+        <BodyWrapper data-testid="body-wrapper" />
+      </StyledComponentsThemeProvider>,
+    )
+
+    expect(window.getComputedStyle(getByTestId('body-wrapper')).flex).toBe('0 0 auto')
+  })
+
+  it('uses the legacy widget shell padding by default', () => {
+    const { getByTestId } = render(
+      <StyledComponentsThemeProvider theme={{ isWidget: true } as never}>
+        <BodyWrapper data-testid="body-wrapper" />
+      </StyledComponentsThemeProvider>,
+    )
+
+    const computedStyle = window.getComputedStyle(getByTestId('body-wrapper'))
+
+    expect(computedStyle.paddingTop).toBe('16px')
+    expect(computedStyle.paddingRight).toBe('16px')
+    expect(computedStyle.paddingBottom).toBe('0px')
+    expect(computedStyle.paddingLeft).toBe('16px')
+  })
+
+  it('keeps the legacy flex behavior outside widget mode', () => {
+    const { getByTestId } = render(
+      <StyledComponentsThemeProvider theme={{ isWidget: false } as never}>
+        <BodyWrapper data-testid="body-wrapper" />
+      </StyledComponentsThemeProvider>,
+    )
+
+    expect(window.getComputedStyle(getByTestId('body-wrapper')).flex).toBe('1 1 auto')
+  })
+})
+
+describe('Marginer', () => {
+  it('does not add vertical spacing in widget mode', () => {
+    const { getByTestId } = render(
+      <StyledComponentsThemeProvider theme={{ isWidget: true } as never}>
+        <Marginer data-testid="marginer" />
+      </StyledComponentsThemeProvider>,
+    )
+
+    expect(window.getComputedStyle(getByTestId('marginer')).marginTop).toBe('0px')
+  })
+
+  it('keeps the legacy spacing outside widget mode', () => {
+    const { getByTestId } = render(
+      <StyledComponentsThemeProvider theme={{ isWidget: false } as never}>
+        <Marginer data-testid="marginer" />
+      </StyledComponentsThemeProvider>,
+    )
+
+    expect(window.getComputedStyle(getByTestId('marginer')).marginTop).toBe('5rem')
+  })
+})

apps/cowswap-frontend/src/modules/application/containers/App/styled.ts

@@ -29,13 +29,13 @@ export const AppWrapper = styled.div<Partial<CSS.Properties>>`
   display: flex;
   flex-flow: column;
   align-items: flex-start;
-  min-height: ${({ theme }) => (theme.isWidget ? '400px' : '100vh')};
+  min-height: ${({ theme }) => (theme.isWidget ? 'auto' : '100vh')};
   height: ${({ theme }) => (theme.isWidget ? 'initial' : '100%')};
   position: relative;
 `
 
 export const Marginer = styled.div`
-  margin-top: 5rem;
+  margin-top: ${({ theme }) => (theme.isWidget ? '0' : '5rem')};
 `
 
 export const SceneContainer = styled.div`
@@ -72,7 +72,7 @@ export const BodyWrapper = styled.div<{
   width: 100%;
   align-items: flex-start;
   justify-content: center;
-  flex: 1 1 auto;
+  flex: ${({ theme }) => (theme.isWidget ? '0 0 auto' : '1 1 auto')};
   z-index: 2;
   color: inherit;
   padding: ${({ theme, $hasActiveSpeechBubbleNotification }) =>

apps/cowswap-frontend/src/modules/application/containers/AppContainer/AppContainer.container.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useMemo, useState } from 'react'
+import { type CSSProperties, type ReactNode, useMemo, useState } from 'react'
 
 import { useAnalyticsReporter } from '@cowprotocol/analytics'
 import { useFeatureFlags, useMediaQuery } from '@cowprotocol/common-hooks'
@@ -7,6 +7,8 @@ import type { NotificationModel } from '@cowprotocol/core'
 import { Footer, Media } from '@cowprotocol/ui'
 import { useWalletDetails, useWalletInfo } from '@cowprotocol/wallet'
 
+import { useInjectedWidgetParams } from 'entities/injectedWidget'
+
 import { URLWarning } from 'legacy/components/Header/URLWarning'
 import { useDarkModeManager } from 'legacy/state/user/hooks'
 
@@ -70,6 +72,7 @@ export function AppContainer({ children }: AppContainerProps): ReactNode {
 
   useInitializeUtm()
   const isInjectedWidgetMode = isInjectedWidget()
+  const { bodyWrapperStyle } = useInjectedWidgetParams()
   const [darkMode] = useDarkModeManager()
   const [pageBackgroundVariant, setPageBackgroundVariant] = useState<PageBackgroundVariant>('default')
   const [pageScene, setPageScene] = useState<ReactNode | null>(null)
@@ -114,6 +117,8 @@ export function AppContainer({ children }: AppContainerProps): ReactNode {
         {isYieldEnabled && <CoWAmmBanner />}
 
         <styledEl.BodyWrapper
+          id="bodyWrapper"
+          style={isInjectedWidgetMode ? (bodyWrapperStyle as CSSProperties) : undefined}
           customTheme={customTheme}
           backgroundVariant={pageBackgroundVariant}
           $hasActiveSpeechBubbleNotification={hasActiveSpeechBubbleNotification}

apps/cowswap-frontend/src/modules/balancesAndAllowances/updaters/BalancesDevtools.test.tsx

@@ -0,0 +1,44 @@
+import { isInjectedWidget } from '@cowprotocol/common-utils'
+
+import { render, screen } from '@testing-library/react'
+
+import { BalancesDevtools } from './BalancesDevtools'
+
+jest.mock('@cowprotocol/common-utils', () => ({
+  isInjectedWidget: jest.fn(),
+}))
+
+jest.mock('jotai-devtools', () => ({
+  DevTools: () => <div data-testid="balances-devtools" />,
+}))
+
+const isInjectedWidgetMock = isInjectedWidget as jest.MockedFunction<typeof isInjectedWidget>
+
+describe('BalancesDevtools', () => {
+  const originalNodeEnv = process.env.NODE_ENV
+
+  beforeEach(() => {
+    isInjectedWidgetMock.mockReturnValue(false)
+  })
+
+  afterEach(() => {
+    process.env.NODE_ENV = originalNodeEnv
+  })
+
+  it('renders in development outside widget mode', () => {
+    process.env.NODE_ENV = 'development'
+
+    render(<BalancesDevtools />)
+
+    expect(screen.getByTestId('balances-devtools')).toBeTruthy()
+  })
+
+  it('does not render inside widget mode', () => {
+    process.env.NODE_ENV = 'development'
+    isInjectedWidgetMock.mockReturnValue(true)
+
+    render(<BalancesDevtools />)
+
+    expect(screen.queryByTestId('balances-devtools')).toBeNull()
+  })
+})

apps/cowswap-frontend/src/modules/balancesAndAllowances/updaters/BalancesDevtools.tsx

@@ -1,9 +1,11 @@
 import { JSX } from 'react'
 
+import { isInjectedWidget } from '@cowprotocol/common-utils'
+
 import { DevTools } from 'jotai-devtools'
 
 export function BalancesDevtools(): JSX.Element | null {
-  if (process.env.NODE_ENV !== 'development') return null
+  if (process.env.NODE_ENV !== 'development' || isInjectedWidget()) return null
 
   return <DevTools position="bottom-left" />
 }

apps/cowswap-frontend/src/modules/injectedWidget/hooks/useInjectedWidgetPalette.test.tsx

@@ -0,0 +1,45 @@
+import { createElement, type ReactNode } from 'react'
+
+import { renderHook, type RenderHookResult } from '@testing-library/react'
+import { MemoryRouter } from 'react-router'
+
+import { useInjectedWidgetPalette } from './useInjectedWidgetPalette'
+
+function renderPaletteHook(search: string): RenderHookResult<ReturnType<typeof useInjectedWidgetPalette>, unknown> {
+  return renderHook(() => useInjectedWidgetPalette(), {
+    wrapper: ({ children }: { children: ReactNode }) =>
+      createElement(MemoryRouter, { initialEntries: [`/widget${search}`] }, children),
+  })
+}
+
+describe('useInjectedWidgetPalette', () => {
+  it('returns undefined when the palette param is absent', () => {
+    const { result } = renderPaletteHook('')
+
+    expect(result.current).toBeUndefined()
+  })
+
+  it('returns null when palette=null', () => {
+    const { result } = renderPaletteHook('?palette=null')
+
+    expect(result.current).toBeNull()
+  })
+
+  it('returns parsed palette JSON from the URL', () => {
+    const palette = { paper: '#ff0', primary: '#052b65' }
+    const { result } = renderPaletteHook(`?palette=${encodeURIComponent(JSON.stringify(palette))}`)
+
+    expect(result.current).toEqual(palette)
+  })
+
+  it('returns null when the palette param cannot be parsed', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => undefined)
+
+    const { result } = renderPaletteHook('?palette=not-valid-json')
+
+    expect(result.current).toBeNull()
+    expect(consoleError).toHaveBeenCalled()
+
+    consoleError.mockRestore()
+  })
+})

apps/cowswap-frontend/src/modules/injectedWidget/hooks/useInjectedWidgetPalette.ts

@@ -4,28 +4,36 @@ import { CowSwapWidgetPalette } from '@cowprotocol/widget-lib'
 
 import { useLocation } from 'react-router'
 
-// The theme palette provided by a consumer
-export function useInjectedWidgetPalette(): Partial<CowSwapWidgetPalette> | undefined {
+/**
+ * Palette from the widget URL query string.
+ *
+ * - No param (`palette === null`): Keep the last applied custom palette.
+ * - Explicitly set to null (`palette === "null"`): Reset to the default theme.
+ * - Unparseable `palette` value: Reset to the default theme.
+ * - object: custom palette JSON from the host.
+ */
+export function useInjectedWidgetPalette(): Partial<CowSwapWidgetPalette> | null | undefined {
   const { search } = useLocation()
 
   return useMemo(() => {
     const searchParams = new URLSearchParams(search)
     const palette = searchParams.get('palette')
 
-    // When the palette is not provided, then do nothing
-    if (!palette) return undefined
+    // When the palette param is absent, do not change the current palette state.
+    if (palette === null) {
+      return undefined
+    }
 
-    // Reset palette state when the value is null
+    // Explicit reset to defaults (see widget-lib `addThemePaletteToQuery`).
     if (palette === 'null') {
-      return undefined
+      return null
     }
 
     try {
-      return JSON.parse(decodeURIComponent(palette))
+      return JSON.parse(decodeURIComponent(palette)) as Partial<CowSwapWidgetPalette>
     } catch (e) {
       console.error('Failed to parse palette from URL', e)
+      return null
     }
-
-    return undefined
   }, [search])
 }