feat(widget): add maxHeight parameter for the widget (#5127)

* feat(widget): add maxHeight parameter for the widget * chore: bump version * chore: handle maxHeight in UPDATE_HEIGHT * feat(widget-cfg): update widget with raw params * chore: fix lint
cowprotocol · Nov 26, 2024 · db8b509 · db8b509
1 parent 449fb27
commit db8b509
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 11 deletions.
diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -13,13 +13,15 @@ import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrow
 import LanguageIcon from '@mui/icons-material/Language'
 import { FormControl, FormControlLabel, FormLabel, IconButton, Radio, RadioGroup, Snackbar } from '@mui/material'
 import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
 import Divider from '@mui/material/Divider'
 import Drawer from '@mui/material/Drawer'
 import Fab from '@mui/material/Fab'
 import List from '@mui/material/List'
 import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
+import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 import { useWeb3ModalAccount, useWeb3ModalTheme } from '@web3modal/ethers5/react'
 
@@ -129,6 +131,9 @@ export function Configurator({ title }: { title: string }) {
   const [customImages] = customImagesState
   const [customSounds] = customSoundsState
 
+  const [rawParams, setRawParams] = useState<string | undefined>()
+  const [isWidgetDisplayed, setIsWidgetDisplayed] = useState(true)
+
   const paletteManager = useColorPaletteManager(mode)
   const { colorPalette, defaultPalette } = paletteManager
 
@@ -183,18 +188,34 @@ export function Configurator({ title }: { title: string }) {
     hideOrdersTable,
   }
 
+  const rawParamsObject = useMemo(() => {
+    if (!rawParams) return undefined
+    try {
+      return JSON.parse(rawParams)
+    } catch {
+      return undefined
+    }
+  }, [rawParams])
+
   const computedParams = useWidgetParams(state)
   const params = useMemo(
     () => ({
       ...computedParams,
       images: customImages,
       sounds: customSounds,
       customTokens,
+      ...rawParamsObject,
       ...window.cowSwapWidgetParams,
     }),
-    [computedParams, customImages, customSounds, customTokens],
+    [computedParams, customImages, customSounds, customTokens, rawParamsObject],
   )
 
+  const updateWidget = useCallback(() => {
+    setIsWidgetDisplayed(false)
+
+    setTimeout(() => setIsWidgetDisplayed(true), 100)
+  }, [])
+
   useEffect(() => {
     setThemeMode(mode)
   }, [setThemeMode, mode])
@@ -338,6 +359,20 @@ export function Configurator({ title }: { title: string }) {
           </RadioGroup>
         </FormControl>
 
+        <TextField
+          fullWidth
+          margin="dense"
+          id="rawParams"
+          label="Raw JSON params"
+          value={rawParams}
+          onChange={(e) => setRawParams(e.target.value)}
+          size="medium"
+        />
+
+        <Button sx={{ width: '100%' }} variant="contained" onClick={updateWidget}>
+          Update widget
+        </Button>
+
         {isDrawerOpen && (
           <Fab
             size="small"
@@ -381,11 +416,13 @@ export function Configurator({ title }: { title: string }) {
               open={dialogOpen}
               handleClose={handleDialogClose}
             />
-            <CowSwapWidget
-              params={params}
-              provider={!IS_IFRAME && !standaloneMode ? provider : undefined}
-              listeners={listeners}
-            />
+            {isWidgetDisplayed && (
+              <CowSwapWidget
+                params={params}
+                provider={!IS_IFRAME && !standaloneMode ? provider : undefined}
+                listeners={listeners}
+              />
+            )}
           </>
         )}
       </Box>

diff --git a/libs/widget-lib/package.json b/libs/widget-lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/widget-lib",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "commonjs",
   "description": "CoW Swap Widget Library. Allows you to easily embed a CoW Swap widget on your website.",
   "main": "index.js",

diff --git a/libs/widget-lib/src/cowSwapWidget.ts b/libs/widget-lib/src/cowSwapWidget.ts
@@ -64,7 +64,7 @@ export function createCowSwapWidget(container: HTMLElement, props: CowSwapWidget
   windowListeners.push(sendAppCodeOnActivation(iframeWindow, params.appCode))
 
   // 4. Handle widget height changes
-  windowListeners.push(...listenToHeightChanges(iframe, params.height))
+  windowListeners.push(...listenToHeightChanges(iframe, params.height, params.maxHeight))
 
   // 5. Intercept deeplinks navigation in the iframe
   windowListeners.push(interceptDeepLinks())
@@ -223,14 +223,21 @@ function interceptDeepLinks() {
  *
  * @param iframe - The HTMLIFrameElement of the widget.
  * @param defaultHeight - Default height for the widget.
+ * @param maxHeight - Maximum height for the widget.
  */
-function listenToHeightChanges(iframe: HTMLIFrameElement, defaultHeight = DEFAULT_HEIGHT): WindowListener[] {
+function listenToHeightChanges(
+  iframe: HTMLIFrameElement,
+  defaultHeight = DEFAULT_HEIGHT,
+  maxHeight?: number,
+): WindowListener[] {
   return [
     widgetIframeTransport.listenToMessageFromWindow(window, WidgetMethodsEmit.UPDATE_HEIGHT, (data) => {
-      iframe.style.height = data.height ? `${data.height + HEIGHT_THRESHOLD}px` : defaultHeight
+      const newHeight = data.height ? data.height + HEIGHT_THRESHOLD : undefined
+
+      iframe.style.height = newHeight ? `${maxHeight ? Math.min(newHeight, maxHeight) : newHeight}px` : defaultHeight
     }),
     widgetIframeTransport.listenToMessageFromWindow(window, WidgetMethodsEmit.SET_FULL_HEIGHT, ({ isUpToSmall }) => {
-      iframe.style.height = isUpToSmall ? defaultHeight : `${document.body.offsetHeight}px`
+      iframe.style.height = isUpToSmall ? defaultHeight : `${maxHeight || document.body.offsetHeight}px`
     }),
   ]
 }
diff --git a/libs/widget-lib/src/types.ts b/libs/widget-lib/src/types.ts
@@ -204,6 +204,11 @@ export interface CowSwapWidgetParams {
    */
   height?: string
 
+  /**
+   * The maximum height of the widget in pixels. Default: body.offsetHeight
+   */
+  maxHeight?: number
+
   /**
    * Network ID.
    */