Merge pull request #5250 from cowprotocol/fix/chrismas-theme-widget

fix(widget): do not display Christmas background

apps/cowswap-frontend/src/common/constants/common.ts

@@ -9,3 +9,5 @@ export const MAX_ORDER_DEADLINE = ms`1y` // https://github.com/cowprotocol/infra
 
 // Use a 150K gas as a fallback if there's issue calculating the gas estimation (fixes some issues with some nodes failing to calculate gas costs for SC wallets)
 export const GAS_LIMIT_DEFAULT = BigNumber.from('150000')
+
+export const APP_HEADER_ELEMENT_ID = 'cowswap-app-header'

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

@@ -27,6 +27,7 @@ import { Updaters } from 'modules/application/containers/App/Updaters'
 import { WithLDProvider } from 'modules/application/containers/WithLDProvider'
 import { useInjectedWidgetParams } from 'modules/injectedWidget'
 
+import { APP_HEADER_ELEMENT_ID } from '../common/constants/common'
 import { WalletUnsupportedNetworkBanner } from '../common/containers/WalletUnsupportedNetworkBanner'
 import { BlockNumberProvider } from '../common/hooks/useBlockNumber'
 
@@ -85,7 +86,7 @@ function Web3ProviderInstance({ children }: { children: ReactNode }) {
 function Toasts() {
   const { disableToastMessages = false } = useInjectedWidgetParams()
 
-  return <SnackbarsWidget hidden={disableToastMessages} />
+  return <SnackbarsWidget hidden={disableToastMessages} anchorElementId={APP_HEADER_ELEMENT_ID} />
 }
 
 const container = document.getElementById('root')

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

@@ -25,6 +25,7 @@ import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { parameterizeTradeRoute, useTradeRouteContext } from 'modules/trade'
 import { useInitializeUtm } from 'modules/utm'
 
+import { APP_HEADER_ELEMENT_ID } from 'common/constants/common'
 import { CoWAmmBanner } from 'common/containers/CoWAmmBanner'
 import { InvalidLocalTimeWarning } from 'common/containers/InvalidLocalTimeWarning'
 import { useCategorizeRecentActivity } from 'common/hooks/useCategorizeRecentActivity'
@@ -133,6 +134,7 @@ export function App() {
           {!isInjectedWidgetMode && (
             // TODO: Move hard-coded colors to theme
             <MenuBar
+              id={APP_HEADER_ELEMENT_ID}
               navItems={navItems}
               productVariant={PRODUCT_VARIANT}
               customTheme={customTheme}

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

@@ -84,6 +84,7 @@ export const BodyWrapper = styled.div<{ customTheme?: CowSwapTheme }>`
 
     ${({ customTheme, theme }) =>
       isChristmasTheme(customTheme) &&
+      !theme.isInjectedWidgetMode &&
       `
         background-image: url(${theme.darkMode ? IMAGE_BACKGROUND_DARK_CHRISTMAS_MEDIUM : IMAGE_BACKGROUND_LIGHT_CHRISTMAS_MEDIUM});
       `}
@@ -101,6 +102,7 @@ export const BodyWrapper = styled.div<{ customTheme?: CowSwapTheme }>`
 
     ${({ customTheme, theme }) =>
       isChristmasTheme(customTheme) &&
+      !theme.isInjectedWidgetMode &&
       `
         background-image: url(${theme.darkMode ? IMAGE_BACKGROUND_DARK_CHRISTMAS_SMALL : IMAGE_BACKGROUND_LIGHT_CHRISTMAS_SMALL});
       `}

libs/snackbars/src/containers/SnackbarsWidget/index.tsx

@@ -9,6 +9,7 @@ import ms from 'ms.macro'
 import { AlertCircle, CheckCircle } from 'react-feather'
 import styled from 'styled-components/macro'
 
+import { useAnchorPosition } from '../../hooks/useAnchorPosition'
 import { SnackbarPopup } from '../../pure/SnackbarPopup'
 import { IconType, removeSnackbarAtom, snackbarsAtom } from '../../state/snackbarsAtom'
 
@@ -31,9 +32,9 @@ const List = styled.div`
   gap: 10px;
 `
 
-const Host = styled.div<{ hidden$: boolean }>`
+const Host = styled.div<{ hidden$: boolean; top$: number }>`
   position: fixed;
-  top: 80px;
+  top: ${({ top$ }) => top$ + 'px'};
   right: ${({ hidden$ }) => (hidden$ ? '-9999px' : '20px')};
   z-index: 6;
   min-width: 300px;
@@ -67,6 +68,8 @@ const icons: Record<IconType, ReactElement | undefined> = {
   custom: undefined,
 }
 
+const WIDGET_DEFAULT_TOP_POSITION = 80
+
 interface SnackbarsWidgetProps {
   /**
    * This prop might seem a bit hacky and this is true
@@ -76,13 +79,21 @@ interface SnackbarsWidgetProps {
    * Having this, we use this flag to artificially hide the widget
    */
   hidden?: boolean
+  /**
+   * Id of a DOM element to which the snackbars should be anchored (displayed under)
+   * In CoW Swap the element is the header menu
+   */
+  anchorElementId?: string
 }
 
-export function SnackbarsWidget({ hidden }: SnackbarsWidgetProps) {
+export function SnackbarsWidget({ hidden, anchorElementId }: SnackbarsWidgetProps) {
   const snackbarsState = useAtomValue(snackbarsAtom)
   const resetSnackbarsState = useResetAtom(snackbarsAtom)
   const removeSnackbar = useSetAtom(removeSnackbarAtom)
 
+  const { top, height } = useAnchorPosition(anchorElementId)
+  const widgetTop = top + height || WIDGET_DEFAULT_TOP_POSITION
+
   const snackbars = useMemo(() => {
     return Object.values(snackbarsState)
   }, [snackbarsState])
@@ -91,7 +102,7 @@ export function SnackbarsWidget({ hidden }: SnackbarsWidgetProps) {
     (id: string) => {
       removeSnackbar(id)
     },
-    [removeSnackbar]
+    [removeSnackbar],
   )
 
   const isUpToSmall = useMediaQuery(Media.upToSmall(false))
@@ -102,7 +113,7 @@ export function SnackbarsWidget({ hidden }: SnackbarsWidgetProps) {
   }, [isOverlayDisplayed])
 
   return (
-    <Host hidden$={!!hidden}>
+    <Host hidden$={!!hidden} top$={widgetTop}>
       <List>
         {snackbars.map((snackbar) => {
           const icon = snackbar.icon

libs/snackbars/src/hooks/useAnchorPosition.ts

@@ -0,0 +1,36 @@
+import { useLayoutEffect, useState } from 'react'
+
+export function useAnchorPosition(elementId: string | undefined) {
+  const [top, setOffsetTop] = useState(0)
+  const [height, setOffsetHeight] = useState(0)
+
+  useLayoutEffect(() => {
+    if (!elementId) return
+
+    const updatePosition = () => {
+      const element = document.getElementById(elementId)
+
+      if (element) {
+        const { top, height } = element.getBoundingClientRect()
+        setOffsetTop(top)
+        setOffsetHeight(height)
+      } else {
+        setTimeout(updatePosition, 100)
+      }
+    }
+
+    updatePosition()
+
+    const resizeObserver = new ResizeObserver(updatePosition)
+    resizeObserver.observe(document.body)
+
+    window.addEventListener('scroll', updatePosition)
+
+    return () => {
+      window.removeEventListener('scroll', updatePosition)
+      resizeObserver.disconnect()
+    }
+  }, [elementId])
+
+  return { top, height }
+}

libs/ui/src/pure/MenuBar/index.tsx

@@ -666,6 +666,7 @@ function _onDropdownItemClickFactory(item: MenuItem, postClick?: () => void) {
 }
 
 interface MenuBarProps {
+  id?: string
   navItems: MenuItem[]
   productVariant: ProductVariant
   LinkComponent: LinkComponentType
@@ -695,6 +696,7 @@ interface MenuBarProps {
 
 export const MenuBar = (props: MenuBarProps) => {
   const {
+    id,
     navItems,
     productVariant,
     persistentAdditionalContent,
@@ -775,6 +777,7 @@ export const MenuBar = (props: MenuBarProps) => {
 
   return (
     <MenuBarWrapper
+      id={id}
       ref={menuRef}
       bgColorLight={bgColorLight}
       bgColorDark={bgColorDark}