diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyLogo/index.tsx b/apps/cowswap-frontend/src/common/pure/CurrencyLogo/index.tsx index e4d58c4152..282324fbcb 100644 --- a/apps/cowswap-frontend/src/common/pure/CurrencyLogo/index.tsx +++ b/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 ` diff --git a/apps/cowswap-frontend/src/cow-react/index.tsx b/apps/cowswap-frontend/src/cow-react/index.tsx index 721fafd93f..89d4a1da26 100644 --- a/apps/cowswap-frontend/src/cow-react/index.tsx +++ b/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() diff --git a/apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/CommonBasesMod.tsx b/apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/CommonBasesMod.tsx index 5c69e97a3c..73be865e0b 100644 --- a/apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/CommonBasesMod.tsx +++ b/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({ Your favourite saved tokens. Edit this list in your account page.} /> - + {tokens.map((currency: Currency) => { const isSelected = selectedCurrency?.equals(currency) @@ -58,7 +57,7 @@ export default function CommonBases({ key={currencyId(currency)} > - + @@ -66,7 +65,7 @@ export default function CommonBases({ ) })} - + ) : null } diff --git a/apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/index.ts b/apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/index.ts index 6cbdccc552..0473252914 100644 --- a/apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/index.ts +++ b/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 { diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx index 56de92726a..d65e3b7ea4 100644 --- a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx +++ b/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}; } ` diff --git a/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts b/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts index 37dbe86e6b..e7034fae78 100644 --- a/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts +++ b/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts @@ -5,8 +5,8 @@ export const AppWrapper = styled.div>` 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` diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx index 3c041f54d7..82c4d56894 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx +++ b/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 ( diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenLogo/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenLogo/index.tsx index 4ffc0aed23..ea96c822d5 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenLogo/index.tsx +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenLogo/index.tsx @@ -31,7 +31,7 @@ export function TokenLogo({ logoURI, className, size = 36 }: TokenLogoProps) { {hasError || !logoURI ? ( ) : ( - + Token logo )} ) diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenSourceTitle/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenSourceTitle/index.tsx index 36d55445ba..a123f71332 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenSourceTitle/index.tsx +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenSourceTitle/index.tsx @@ -34,7 +34,7 @@ export function TokenSourceTitle(props: TokenSourceTitleProps) { return ( - <img src={TokenListLogo} /> + <img src={TokenListLogo} alt="Token logo" /> {children}
diff --git a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx index 2e352d7608..c7142c2498 100644 --- a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx +++ b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx @@ -45,7 +45,7 @@ export function Web3StatusInner(props: Web3StatusInnerProps) { return ( {hasPendingTransactions ? ( - + {pendingCount} Pending diff --git a/apps/cowswap-frontend/src/utils/iframeResizer.ts b/apps/cowswap-frontend/src/utils/iframeResizer.ts deleted file mode 100644 index 94e2820b3e..0000000000 --- a/apps/cowswap-frontend/src/utils/iframeResizer.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { useEffect } from 'react' - -export function IframeResizer() { - useEffect(() => { - // Initial height calculation and message - const sendHeightUpdate = () => { - const contentHeight = document.body.scrollHeight - window.parent.postMessage({ type: 'iframeHeight', height: contentHeight }, '*') - } - sendHeightUpdate() - - // Set up a MutationObserver to watch for changes in the DOM - const observer = new MutationObserver(() => { - sendHeightUpdate() - }) - - // Start observing the entire body and its descendants for changes to the structure of the DOM - observer.observe(document.body, { attributes: true, childList: true, subtree: true }) - - // Cleanup: Disconnect the observer when the component is unmounted - return () => { - observer.disconnect() - } - }, []) - - return null -} diff --git a/apps/widget-configurator/src/app/app.tsx b/apps/widget-configurator/src/app/app.tsx index d914123f7d..183b9a5d27 100644 --- a/apps/widget-configurator/src/app/app.tsx +++ b/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() { diff --git a/apps/widget-configurator/src/app/configurator/attachIframeResizer.ts b/apps/widget-configurator/src/app/configurator/attachIframeResizer.ts new file mode 100644 index 0000000000..a0b1ce9d14 --- /dev/null +++ b/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 +} diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx index f393dc237a..921ccdd8f6 100644 --- a/apps/widget-configurator/src/app/configurator/index.tsx +++ b/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, 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) => setSellTokenAmount(Number(e.target.value))} size="small" /> @@ -235,7 +241,7 @@ export function Configurator({ title }: { title: string }) { -