Iframe & configurator updates (widget-ui-9)

apps/cowswap-frontend/src/common/pure/CurrencyLogo/index.tsx

@@ -13,15 +13,7 @@ export const StyledLogo = styled(Logo)<{ size: string; $native: boolean }>`
   height: ${({ size }) => size};
   min-width: ${({ size }) => size}; // MOD
   min-height: ${({ size }) => size}; // MOD
-  /* background: radial-gradient(white 50%, #ffffff00 calc(75% + 1px), #ffffff00 100%);
-  border-radius: 50%;
-  -mox-box-shadow: 0 0 1px ${({ $native }) => ($native ? 'white' : 'black')};
-  -webkit-box-shadow: 0 0 1px ${({ $native }) => ($native ? 'white' : 'black')};
-  box-shadow: 0 0 1px ${({ $native }) => ($native ? 'white' : 'black')};
-  border: 0px solid rgba(255, 255, 255, 0); */
   border-radius: ${({ size }) => size};
-  /* box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075); */
-  /* background-color: ${({ theme }) => theme.white}; */
   background-color: ${({ theme }) => theme.white}; // MOD
   color: ${({ theme }) => theme.black}!important; // MOD
 `

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

@@ -9,6 +9,7 @@ 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'
 
@@ -30,11 +31,9 @@ import { WithLDProvider } from 'modules/application/containers/WithLDProvider'
 import { FortuneWidget } from 'modules/fortune/containers/FortuneWidget'
 
 import { FeatureGuard } from 'common/containers/FeatureGuard'
-import { IframeResizer } from 'utils/iframeResizer'
 
 import { WalletUnsupportedNetworkBanner } from '../common/containers/WalletUnsupportedNetworkBanner'
 
-
 // Node removeChild hackaround
 // based on: https://github.com/facebook/react/issues/11538#issuecomment-417504600
 nodeRemoveChildFix()

apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/CommonBasesMod.tsx

@@ -13,13 +13,12 @@ import { CurrencyLogo } from 'common/pure/CurrencyLogo'
 
 import { BaseWrapper, CommonBasesRow, MobileWrapper } from './index'
 
-export const StyledScrollarea = styled.div`
-  overflow-y: auto; // fallback for 'overlay'
-  overflow-y: overlay;
-  padding: 0 20px 0;
-  overflow-y: hidden;
-  overflow-x: auto;
-  ${({ theme }) => theme.colorScrollbar};
+export const StyledTokenList = styled.div`
+  padding: 0 10px 16px;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    overflow-x: scroll;
+  `}
 `
 
 const MAX_LENGTH_OVERFLOW = 12
@@ -43,7 +42,7 @@ export default function CommonBases({
         </Text>
         <QuestionHelper text={<Trans>Your favourite saved tokens. Edit this list in your account page.</Trans>} />
       </AutoRow>
-      <StyledScrollarea>
+      <StyledTokenList>
         <CommonBasesRow gap="4px">
           {tokens.map((currency: Currency) => {
             const isSelected = selectedCurrency?.equals(currency)
@@ -58,15 +57,15 @@ export default function CommonBases({
                   key={currencyId(currency)}
                 >
                   <CurrencyLogoFromList currency={currency} />
-                  <Text fontWeight={500} fontSize={16}>
+                  <Text fontWeight={500} fontSize={13}>
                     <TokenSymbol token={currency} length={6} />
                   </Text>
                 </BaseWrapper>
               </>
             )
           })}
         </CommonBasesRow>
-      </StyledScrollarea>
+      </StyledTokenList>
     </MobileWrapper>
   ) : null
 }

apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/index.ts

@@ -29,13 +29,25 @@ export const AutoColumn = styled(AutoColumnUni)`
   `}
 `
 
-export const CommonBasesRow = styled(AutoRow)`
+export const CommonBasesRow = styled(AutoRow)<{ gap?: string }>`
   margin: 0;
-  flex-flow: row nowrap;
-  overflow-x: scroll;
-  padding: 0 100px 5px 0;
+  flex-flow: row wrap;
+  padding: 0;
   position: relative;
-  ${({ theme }) => theme.colorScrollbar};
+
+  ${({ theme }) =>
+    theme.isInjectedWidgetMode &&
+    `
+    padding: 0 100px 0 10px;
+    flex-flow: row nowrap;
+    overflow-x: scroll;
+  `}
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 0 100px 0 10px;
+    flex-flow: row nowrap;
+    overflow-x: scroll;
+  `}
 `
 
 export const MobileWrapper = styled(AutoColumn)<{ showOverflow?: boolean }>`
@@ -59,23 +71,18 @@ export const MobileWrapper = styled(AutoColumn)<{ showOverflow?: boolean }>`
       margin: auto;
     }
 `}
-
-  overflow-y: auto; // fallback for 'overlay'
-  overflow-y: overlay;
-  max-height: 135px;
-  padding: 0;
 `
 
 export const BaseWrapperMod = styled.div<{ disable?: boolean }>`
   border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.bg3)};
   border-radius: 10px;
   display: flex;
-  padding: 6px;
+  padding: 6px 8px;
   align-items: center;
   color: ${({ theme, disable }) => disable && theme.text3};
   background-color: ${({ theme, disable }) => disable && theme.bg3};
   filter: ${({ disable }) => disable && 'grayscale(1)'};
-  flex: 0 0 calc(33% - 8px);
+  flex: 0 1 auto;
   justify-content: center;
 
   &:hover {

apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx

@@ -476,7 +476,7 @@ export const UniThemedGlobalStyle = css`
     color: var(${UI.COLOR_TEXT1});
   }
   body {
-    min-height: 100vh;
+    min-height: ${({ theme }) => (theme.isInjectedWidgetMode ? 'auto' : '100vh')};
     scrollbar-color: ${({ theme }) => theme.colorScrollbar};
   }
 `

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

@@ -5,8 +5,8 @@ export const AppWrapper = styled.div<Partial<CSS.Properties>>`
   display: flex;
   flex-flow: column;
   align-items: flex-start;
-  min-height: 100vh;
-  height: 100vh;
+  min-height: ${({ theme }) => (theme.isInjectedWidgetMode ? '400px' : '100vh')};
+  height: ${({ theme }) => (theme.isInjectedWidgetMode ? 'initial' : '100vh')};
 `
 
 export const HeaderWrapper = styled.div`

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx

@@ -175,6 +175,7 @@ export function OrdersTableContainer({
   pendingActivities,
   ordersPermitStatus,
 }: OrdersProps) {
+
   const content = () => {
     if (!isWalletConnected) {
       return (

apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx

@@ -45,7 +45,7 @@ export function Web3StatusInner(props: Web3StatusInnerProps) {
     return (
       <Web3StatusConnected id="web3-status-connected" pending={hasPendingTransactions}>
         {hasPendingTransactions ? (
-          <RowBetween>
+          <RowBetween gap={'6px'}>
             <FollowPendingTxPopup>
               <Text>
                 <Trans>{pendingCount} Pending</Trans>

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

@@ -1,13 +1,12 @@
 import Box from '@mui/material/Box'
 import { Configurator } from './configurator'
-import { Theme } from '@mui/material/styles';
+import { Theme } from '@mui/material/styles'
 
 const WrapperStyled = (theme: Theme) => ({
   display: 'flex',
   flexDirection: 'column',
   height: '100%',
   width: '100%',
-  background: theme.palette.cow.background,
 })
 
 export function App() {

apps/widget-configurator/src/app/configurator/attachIframeResizer.ts

@@ -0,0 +1,48 @@
+// TODO: Move this to libs/common-utils/src/iframeResizer.ts as a helper function
+// Adding the file here to avoid TS errors around environment variables
+
+import { useEffect } from 'react'
+
+interface IframeResizerProps {
+  iframeId: string
+  originCheck?: string
+}
+
+//  A utility function to adjust iframe height based on postMessage from iframe content.
+export function AttachIframeResizer({ iframeId, originCheck }: IframeResizerProps) {
+  useEffect(() => {
+    const iframeElement = document.getElementById(iframeId)
+
+    if (!iframeElement) {
+      console.error(`No iframe found with ID: ${iframeId}`)
+      return
+    }
+
+    const handleMessage = (event: MessageEvent) => {
+      // If an originCheck is provided, validate against it
+      if (originCheck && event.origin !== originCheck) return
+
+      const data = event.data
+
+      // Validate the data format and type before processing it
+      if (
+        typeof data === 'object' &&
+        data.type === 'iframeHeight' &&
+        Object.prototype.hasOwnProperty.call(data, 'height')
+      ) {
+        console.log('got iframeHeight ====>', data.height)
+        iframeElement.style.height = 'auto' // Reset the iframe's height
+        iframeElement.style.height = `${data.height}px` // Adjust the height based on the content
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    // Cleanup: Remove the event listener when the component is unmounted
+    return () => {
+      window.removeEventListener('message', handleMessage)
+    }
+  }, [iframeId, originCheck])
+
+  return null
+}

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

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { AttachIframeResizer } from './attachIframeResizer'
 import { ColorModeContext } from '../../main'
 // import { useTheme } from '@mui/material/styles'
 import Box from '@mui/material/Box'
@@ -41,7 +42,12 @@ const TradeModeOptions = [
   { label: 'TWAP', value: TradeMode.TWAP },
 ]
 
-const NetworkOptions = [
+type NetworkOption = {
+  chainID: number
+  label: string
+}
+
+const NetworkOptions: NetworkOption[] = [
   { chainID: 1, label: 'Ethereum' },
   { chainID: 100, label: 'Gnosis Chain' },
 ]
@@ -169,7 +175,7 @@ export function Configurator({ title }: { title: string }) {
           onChange={(event: SyntheticEvent, newValue: { chainID: number; label: string } | null) => {
             setNetwork(newValue || NetworkOptions[0])
           }}
-          getOptionLabel={(option) => option.label}
+          getOptionLabel={(option: { chainID: number; label: string }) => option.label}
           id="controllable-states-network"
           options={NetworkOptions}
           size="small"
@@ -184,7 +190,7 @@ export function Configurator({ title }: { title: string }) {
             setSellToken(newValue)
           }}
           inputValue={sellToken || ''}
-          onInputChange={(event, newInputValue) => {
+          onInputChange={(event: React.ChangeEvent<unknown>, newInputValue: string) => {
             setSellToken(newInputValue)
           }}
           id="controllable-states-selling-token"
@@ -197,7 +203,7 @@ export function Configurator({ title }: { title: string }) {
           id="input-sellTokenAmount"
           label="Sell amount"
           value={sellTokenAmount}
-          onChange={(e) => setSellTokenAmount(Number(e.target.value))}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSellTokenAmount(Number(e.target.value))}
           size="small"
         />
 
@@ -235,7 +241,7 @@ export function Configurator({ title }: { title: string }) {
       </Drawer>
 
       <Box sx={ContentStyled}>
-        <iframe src={iframeURL} width="400px" height="640px" title="widget" />
+        <iframe id="cow-widget" src={iframeURL} width="400px" height="640px" title="widget" />
 
         <Box
           sx={{
@@ -245,12 +251,15 @@ export function Configurator({ title }: { title: string }) {
             alignItems: 'center',
             margin: '1.6rem 0 0',
             gap: '2.4rem',
+            width: '100%',
           }}
         >
           <Typography variant="body2">URL: {iframeURL}</Typography>
           <EmbedDialog />
         </Box>
       </Box>
+
+      <AttachIframeResizer iframeId={'cow-widget'} />
     </Box>
   )
 }

apps/widget-configurator/src/app/configurator/styled.ts

@@ -1,4 +1,6 @@
-import { Theme } from '@mui/material/styles';
+import { Theme } from '@mui/material/styles'
+
+export const WrapperStyled = { display: 'flex', flexFlow: 'column wrap', width: '100%' }
 
 export const DrawerStyled = (theme: Theme) => ({
   width: '29rem',
@@ -15,23 +17,20 @@ export const DrawerStyled = (theme: Theme) => ({
     boxShadow: 'rgba(5, 43, 101, 0.06) 0 1.2rem 1.2rem',
     padding: '1.6rem',
   },
-});
+})
 
 export const ContentStyled = {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  flexFlow: 'column wrap',
-  height: '100%',
-  width: 'auto',
+  flexFlow: 'column',
   flex: '1 1 auto',
+  margin: '4.2rem auto',
 
-  '& > iframe': {
+  '> iframe': {
     border: 0,
     margin: '0 auto',
     borderRadius: '1.6rem',
-    overflow: 'hidden',
+    overflow: 'auto',
   },
 }
-
-export const WrapperStyled = { display: 'flex', flexFlow: 'row wrap', height: '100vh', width: '100%' }