feat(widget): dynamic widget height (#3261)

apps/cowswap-frontend/src/cow-react/index.tsx

@@ -9,7 +9,6 @@ import { StrictMode } from 'react'
 import { BlockNumberProvider } from '@cowprotocol/common-hooks'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { nodeRemoveChildFix } from '@cowprotocol/common-utils'
-import { IframeResizer } from '@cowprotocol/common-utils'
 import { jotaiStore } from '@cowprotocol/core'
 import { SnackbarsWidget } from '@cowprotocol/snackbars'
 
@@ -80,8 +79,6 @@ root.render(
         </HashRouter>
       </AtomProvider>
     </Provider>
-
-    {isInjectedWidgetMode && <IframeResizer />}
   </StrictMode>
 )
 

apps/cowswap-frontend/src/modules/injectedWidget/consts.ts

@@ -0,0 +1 @@
+export const COW_SWAP_WIDGET_EVENT_KEY = 'cowSwapWidget'

libs/common-utils/src/iframeResizer.ts → apps/cowswap-frontend/src/modules/injectedWidget/updaters/IframeResizer.ts

@@ -1,20 +1,25 @@
 import { useEffect, useRef } from 'react'
 
-const MessageType = {
-  IFRAME_HEIGHT: 'iframeHeight',
-}
+import { COW_SWAP_WIDGET_EVENT_KEY } from '../consts'
+import { useInjectedWidgetParams } from '../hooks/useInjectedWidgetParams'
 
 const TARGET_ORIGIN = '*' // Change to CoW specific origin in production
 
 export function IframeResizer() {
+  const { dynamicHeightEnabled } = useInjectedWidgetParams()
   const previousHeightRef = useRef(0)
 
   useEffect(() => {
+    if (!dynamicHeightEnabled) return
+
     // Initial height calculation and message
     const sendHeightUpdate = () => {
       const contentHeight = document.body.scrollHeight
       if (contentHeight !== previousHeightRef.current) {
-        window.parent.postMessage({ type: MessageType.IFRAME_HEIGHT, height: contentHeight }, TARGET_ORIGIN)
+        window.parent.postMessage(
+          { key: COW_SWAP_WIDGET_EVENT_KEY, method: 'iframeHeight', height: contentHeight },
+          TARGET_ORIGIN
+        )
         previousHeightRef.current = contentHeight
       }
     }
@@ -32,7 +37,7 @@ export function IframeResizer() {
     return () => {
       observer.disconnect()
     }
-  }, [])
+  }, [dynamicHeightEnabled])
 
   return null
 }

apps/cowswap-frontend/src/modules/injectedWidget/updaters/InjectedWidgetUpdater.ts → apps/cowswap-frontend/src/modules/injectedWidget/updaters/InjectedWidgetUpdater.tsx

@@ -5,11 +5,12 @@ import { deepEqual } from '@cowprotocol/common-utils'
 
 import { useNavigate } from 'react-router-dom'
 
+import { IframeResizer } from './IframeResizer'
+
+import { COW_SWAP_WIDGET_EVENT_KEY } from '../consts'
 import { injectedWidgetMetaDataAtom } from '../state/injectedWidgetMetaDataAtom'
 import { injectedWidgetParamsAtom } from '../state/injectedWidgetParamsAtom'
 
-const COW_SWAP_WIDGET_EVENT_KEY = 'cowSwapWidget'
-
 const messagesCache: { [method: string]: unknown } = {}
 
 const getEventMethod = (event: MessageEvent) =>
@@ -88,5 +89,5 @@ export function InjectedWidgetUpdater() {
     })
   }, [processEvent])
 
-  return null
+  return <IframeResizer />
 }

apps/widget-configurator/src/app/configurator/index.tsx

@@ -11,8 +11,10 @@ import {
 import WalletIcon from '@mui/icons-material/Wallet'
 import LoadingButton from '@mui/lab/LoadingButton'
 import Box from '@mui/material/Box'
+import Checkbox from '@mui/material/Checkbox'
 import Divider from '@mui/material/Divider'
 import Drawer from '@mui/material/Drawer'
+import FormControlLabel from '@mui/material/FormControlLabel'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
 
@@ -60,6 +62,8 @@ export function Configurator({ title }: { title: string }) {
   const iframeContainerRef = useRef<HTMLDivElement>(null)
   const updateWidgetRef = useRef<UpdateWidgetCallback | null>(null)
 
+  const [isDynamicHeightEnabled, setDynamicHeightEnabled] = useState(false)
+
   useEffect(() => {
     const widgetContainer = iframeContainerRef.current
 
@@ -84,6 +88,7 @@ export function Configurator({ title }: { title: string }) {
         },
       },
       appParams: {
+        dynamicHeightEnabled: isDynamicHeightEnabled,
         enabledTradeTypes,
       },
     }
@@ -93,7 +98,17 @@ export function Configurator({ title }: { title: string }) {
     } else {
       updateWidgetRef.current = cowSwapWidget(params, settings)
     }
-  }, [chainId, enabledTradeTypes, sellToken, sellTokenAmount, buyToken, buyTokenAmount, mode, currentTradeType])
+  }, [
+    chainId,
+    enabledTradeTypes,
+    sellToken,
+    sellTokenAmount,
+    buyToken,
+    buyTokenAmount,
+    mode,
+    currentTradeType,
+    isDynamicHeightEnabled,
+  ])
 
   const handleWidgetRefreshClick = () => {
     setMode('light')
@@ -143,6 +158,15 @@ export function Configurator({ title }: { title: string }) {
 
         <CurrencyInputControl label="Buy token" tokenIdState={buyTokenState} tokenAmountState={buyTokenAmountState} />
 
+        <Divider variant="middle">Advanced</Divider>
+
+        <FormControlLabel
+          control={
+            <Checkbox checked={isDynamicHeightEnabled} onChange={(e) => setDynamicHeightEnabled(e.target.checked)} />
+          }
+          label="Dynamic widget height"
+        />
+
         <Divider variant="middle" />
 
         {/* <LoadingButton loading={false} loadingPosition="start" startIcon={<SaveIcon />} variant="contained" onClick={handleWidgetRefreshClick}>

libs/common-utils/src/index.ts

@@ -52,4 +52,3 @@ export * from './tryParseFractionalAmount'
 export * from './maxAmountSpend'
 export * from './capitalizeFirstLetter'
 export * from './jotai/atomWithPartialUpdate'
-export * from './iframeResizer'

libs/widget-lib/src/cowSwapWidget.ts

@@ -19,13 +19,15 @@ export function cowSwapWidget(params: CowSwapWidgetParams, settings: CowSwapWidg
 
   sendMetaData(contentWindow, params.metaData)
 
+  applyDynamicHeight(iframe, params.height)
+
   if (provider) {
     const jsonRpcManager = new JsonRpcManager(contentWindow)
 
     jsonRpcManager.onConnect(provider)
   }
 
-  return (params: CowSwapWidgetSettings) => updateWidget(params, contentWindow)
+  return (newSettings: CowSwapWidgetSettings) => updateWidget(newSettings, contentWindow, iframe)
 }
 
 function createIframe(params: CowSwapWidgetParams, settings: CowSwapWidgetSettings): HTMLIFrameElement {
@@ -41,9 +43,14 @@ function createIframe(params: CowSwapWidgetParams, settings: CowSwapWidgetSettin
   return iframe
 }
 
-function updateWidget(params: CowSwapWidgetSettings, contentWindow: Window) {
-  const pathname = buildWidgetPath(params.urlParams)
-  const search = buildTradeAmountsQuery(params.urlParams).toString()
+function updateWidget(settings: CowSwapWidgetSettings, contentWindow: Window, iframe: HTMLIFrameElement) {
+  const pathname = buildWidgetPath(settings.urlParams)
+  const search = buildTradeAmountsQuery(settings.urlParams).toString()
+
+  // Reset iframe height to default
+  if (!settings.appParams.dynamicHeightEnabled) {
+    iframe.style.height = ''
+  }
 
   contentWindow.postMessage(
     {
@@ -53,7 +60,7 @@ function updateWidget(params: CowSwapWidgetSettings, contentWindow: Window) {
         pathname,
         search,
       },
-      appParams: params.appParams,
+      appParams: settings.appParams,
     },
     '*'
   )
@@ -75,3 +82,15 @@ function sendMetaData(contentWindow: Window, metaData: CowSwapWidgetMetaData) {
     )
   })
 }
+
+function applyDynamicHeight(iframe: HTMLIFrameElement, defaultHeight: number) {
+  window.addEventListener('message', (event) => {
+    if (event.data.key !== COW_SWAP_WIDGET_EVENT_KEY || event.data.method !== 'iframeHeight') {
+      return
+    }
+
+    const height = event.data.height || defaultHeight
+
+    iframe.style.height = `${height}px`
+  })
+}

libs/widget-lib/src/types.ts

@@ -43,6 +43,7 @@ export interface CowSwapWidgetAppParams {
   logoUrl?: string
   hideLogo?: boolean
   hideNetworkSelector?: boolean
+  dynamicHeightEnabled?: boolean
   enabledTradeTypes?: TradeType[]
 }