diff --git a/apps/cowswap-frontend/src/assets/logo/cow-icon.svg b/apps/cowswap-frontend/src/assets/logo/cow-icon.svg new file mode 100644 index 0000000000..7cebd117b8 --- /dev/null +++ b/apps/cowswap-frontend/src/assets/logo/cow-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx b/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx index 9f4bcfca3a..3d907d42df 100644 --- a/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx +++ b/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx @@ -15,7 +15,7 @@ const ModalContentWrapper = styled.div` padding: 24px; color: var(${UI.COLOR_TEXT2}); background-color: var(${UI.COLOR_CONTAINER_BG_01}); - border-radius: 24px; + border-radius: var(${UI.BORDER_RADIUS_NORMAL}); > p { line-height: 1.4; diff --git a/apps/cowswap-frontend/src/common/pure/PoweredFooter/index.tsx b/apps/cowswap-frontend/src/common/pure/PoweredFooter/index.tsx new file mode 100644 index 0000000000..7f01d64adf --- /dev/null +++ b/apps/cowswap-frontend/src/common/pure/PoweredFooter/index.tsx @@ -0,0 +1,47 @@ +import { COW_PROTOCOL_LINK } from '@cowprotocol/common-const' +import { ExternalLink } from '@cowprotocol/ui' + +import { Trans } from '@lingui/macro' +import cowIcon from 'assets/logo/cow-icon.svg' +import SVG from 'react-inlinesvg' +import styled from 'styled-components/macro' + +import { UI } from 'common/constants/theme' + +const Wrapper = styled.div` + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; + font-size: var(${UI.FONT_SIZE_SMALLER}); + padding: 4px 0; +` + +const StyledExternalLink = styled(ExternalLink)` + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + color: var(${UI.COLOR_TEXT2}); + + > svg { + --size: 14px; + width: var(--size); + height: var(--size); + } + + > svg > g > path { + fill: var(${UI.COLOR_TEXT2}); + } +` + +export function PoweredFooter() { + return ( + + + + Powered by CoW Protocol + + + ) +} diff --git a/apps/cowswap-frontend/src/cow-react/index.tsx b/apps/cowswap-frontend/src/cow-react/index.tsx index eb78e960c7..721fafd93f 100644 --- a/apps/cowswap-frontend/src/cow-react/index.tsx +++ b/apps/cowswap-frontend/src/cow-react/index.tsx @@ -30,9 +30,11 @@ 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() @@ -79,6 +81,8 @@ root.render( + + {isInjectedWidgetMode && } ) diff --git a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx index 7d2469c82f..96443e678b 100644 --- a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx +++ b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx @@ -1,7 +1,6 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react' +import React, { useCallback, useMemo, useState } from 'react' import { toggleDarkModeAnalytics } from '@cowprotocol/analytics' -import { addBodyClass, removeBodyClass } from '@cowprotocol/common-utils' import { SupportedChainId } from '@cowprotocol/cow-sdk' import { useWalletInfo } from '@cowprotocol/wallet' @@ -10,11 +9,10 @@ import { useNavigate } from 'react-router-dom' import CowBalanceButton from 'legacy/components/CowBalanceButton' import { NetworkSelector } from 'legacy/components/Header/NetworkSelector' -import { LargeAndUp, upToLarge, upToMedium, upToSmall, useMediaQuery } from 'legacy/hooks/useMediaQuery' +import { upToLarge, upToSmall, useMediaQuery } from 'legacy/hooks/useMediaQuery' import { useDarkModeManager } from 'legacy/state/user/hooks' import { cowSwapLogo } from 'legacy/theme/cowSwapAssets' -import { useAccountModalState } from 'modules/account' import { useInjectedWidgetParams } from 'modules/injectedWidget' import { MainMenuContext } from 'modules/mainMenu' import { MenuTree } from 'modules/mainMenu/pure/MenuTree' @@ -52,14 +50,11 @@ export default function Header() { }, [toggleDarkModeAux, darkMode]) const swapRawState = useSwapRawState() const { state: tradeState } = useTradeState() - const { isOpen: isAccountModalOpen } = useAccountModalState() const navigate = useNavigate() const isUpToLarge = useMediaQuery(upToLarge) - const isUpToMedium = useMediaQuery(upToMedium) const isUpToSmall = useMediaQuery(upToSmall) - const isLargeAndUp = useMediaQuery(LargeAndUp) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const handleMobileMenuOnClick = useCallback(() => { @@ -95,12 +90,6 @@ export default function Header() { tradeContext: tradeMenuContext, } - // Toggle the 'noScroll' class on body, whenever the mobile menu or orders panel is open. - // This removes the inner scrollbar on the page body, to prevent showing double scrollbars. - useEffect(() => { - isMobileMenuOpen || isAccountModalOpen ? addBodyClass('noScroll') : removeBodyClass('noScroll') - }, [isAccountModalOpen, isMobileMenuOpen, isUpToLarge, isUpToMedium, isUpToSmall, isLargeAndUp]) - return ( diff --git a/apps/cowswap-frontend/src/legacy/components/Popups/styled.ts b/apps/cowswap-frontend/src/legacy/components/Popups/styled.ts index c730ac9988..e110cc3aa6 100644 --- a/apps/cowswap-frontend/src/legacy/components/Popups/styled.ts +++ b/apps/cowswap-frontend/src/legacy/components/Popups/styled.ts @@ -16,7 +16,6 @@ const Fader = styled.div` export const PopupWrapper = styled.div<{ css?: FlattenInterpolation> }>` display: inline-block; width: 100%; - //padding: 1em; background-color: var(${UI.COLOR_CONTAINER_BG_01}); position: relative; border-radius: 10px; 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 5843ee98a6..5c69e97a3c 100644 --- a/apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/CommonBasesMod.tsx +++ b/apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/CommonBasesMod.tsx @@ -16,13 +16,10 @@ import { BaseWrapper, CommonBasesRow, MobileWrapper } from './index' export const StyledScrollarea = styled.div` overflow-y: auto; // fallback for 'overlay' overflow-y: overlay; - padding: 0 20px; + padding: 0 20px 0; + overflow-y: hidden; + overflow-x: auto; ${({ theme }) => theme.colorScrollbar}; - - ${({ theme }) => theme.mediaWidth.upToSmall` - overflow-y: hidden; - overflow-x: auto; - `} ` const MAX_LENGTH_OVERFLOW = 12 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 269b7f262b..6cbdccc552 100644 --- a/apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/index.ts +++ b/apps/cowswap-frontend/src/legacy/components/SearchModal/CommonBases/index.ts @@ -30,13 +30,12 @@ export const AutoColumn = styled(AutoColumnUni)` ` export const CommonBasesRow = styled(AutoRow)` - ${({ theme }) => theme.mediaWidth.upToSmall` - flex-flow: row nowrap; - overflow-x: scroll; - padding: 0 100px 0 0; - position: relative; - ${({ theme }) => theme.colorScrollbar}; - `} + margin: 0; + flex-flow: row nowrap; + overflow-x: scroll; + padding: 0 100px 5px 0; + position: relative; + ${({ theme }) => theme.colorScrollbar}; ` export const MobileWrapper = styled(AutoColumn)<{ showOverflow?: boolean }>` @@ -50,7 +49,6 @@ export const MobileWrapper = styled(AutoColumn)<{ showOverflow?: boolean }>` &::after { content: ''; display: block; - // background: linear-gradient(to top, #163861 0%, rgba(22, 56, 97, 0) 100%); pointer-events: none; height: 40px; width: 100%; @@ -61,14 +59,11 @@ export const MobileWrapper = styled(AutoColumn)<{ showOverflow?: boolean }>` margin: auto; } `} - ${({ theme }) => theme.mediaWidth.upToSmall` - /* display: none; */ - `}; overflow-y: auto; // fallback for 'overlay' overflow-y: overlay; max-height: 135px; - padding-bottom: 20px; + padding: 0; ` export const BaseWrapperMod = styled.div<{ disable?: boolean }>` @@ -76,20 +71,18 @@ export const BaseWrapperMod = styled.div<{ disable?: boolean }>` border-radius: 10px; display: flex; padding: 6px; - align-items: center; - :hover { - cursor: ${({ disable }) => !disable && 'pointer'}; - background-color: ${({ theme, disable }) => !disable && theme.bg4}; - } - color: ${({ theme, disable }) => disable && theme.text3}; background-color: ${({ theme, disable }) => disable && theme.bg3}; filter: ${({ disable }) => disable && 'grayscale(1)'}; - flex: 0 0 calc(33% - 8px); justify-content: center; + &:hover { + cursor: ${({ disable }) => !disable && 'pointer'}; + background-color: ${({ theme, disable }) => !disable && theme.bg4}; + } + ${({ theme }) => theme.mediaWidth.upToSmall` flex: auto; `} diff --git a/apps/cowswap-frontend/src/legacy/pages/AppBody.tsx b/apps/cowswap-frontend/src/legacy/pages/AppBody.tsx index 7f815810e0..269d35815f 100644 --- a/apps/cowswap-frontend/src/legacy/pages/AppBody.tsx +++ b/apps/cowswap-frontend/src/legacy/pages/AppBody.tsx @@ -4,6 +4,8 @@ import styled from 'styled-components/macro' import { Z_INDEX } from 'legacy/theme' +import { UI } from 'common/constants/theme' + export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>` position: relative; margin-top: ${({ margin }) => margin ?? '0px'}; @@ -12,7 +14,7 @@ export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>` background: ${({ theme }) => theme.bg0}; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 24px 32px rgba(0, 0, 0, 0.01); - border-radius: 24px; + border-radius: var(${UI.BORDER_RADIUS_NORMAL}); margin-top: 1rem; margin-left: auto; margin-right: auto; diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx index 9c12d9bbf7..56de92726a 100644 --- a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx +++ b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx @@ -491,8 +491,9 @@ export const ThemedGlobalStyle = createGlobalStyle` ${UniThemedGlobalStyle} html { - background-color: ${({ theme }) => theme.isInjectedWidgetMode ? 'transparent' : `var(${UI.COLOR_CONTAINER_BG_02})`}; - ${({ theme }) => theme.body.background}; + background-color: ${({ theme }) => + theme.isInjectedWidgetMode ? 'transparent' : `var(${UI.COLOR_CONTAINER_BG_02})`}; + ${({ theme }) => (theme.isInjectedWidgetMode ? 'transparent' : theme.body.background)}; } *, *:after, *:before { box-sizing:border-box; } @@ -533,8 +534,7 @@ export const ThemedGlobalStyle = createGlobalStyle` body #wcm-modal.wcm-overlay { ${({ theme }) => theme.mediaWidth.upToSmall` align-items: flex-start; - ` - } + `} a { text-decoration: none; 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 189cee6911..37dbe86e6b 100644 --- a/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts +++ b/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts @@ -6,6 +6,7 @@ export const AppWrapper = styled.div>` flex-flow: column; align-items: flex-start; min-height: 100vh; + height: 100vh; ` export const HeaderWrapper = styled.div` @@ -36,10 +37,10 @@ export const BodyWrapper = styled.div` justify-content: center; flex: 1 1 auto; z-index: 2; - padding: ${({ theme }) => theme.isInjectedWidgetMode ? '0' : '5vh 16px 0'}; + padding: ${({ theme }) => (theme.isInjectedWidgetMode ? '16px 16px 0' : '5vh 16px 0')}; ${({ theme }) => theme.mediaWidth.upToMedium` - padding: ${({ theme }) => theme.isInjectedWidgetMode ? '0' : '0 10px 16px'}; + padding: ${({ theme }) => (theme.isInjectedWidgetMode ? '0 0 16px' : '0 10px 16px')}; flex: none; `} ` diff --git a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx index 902c190b8c..c8f00bf22a 100644 --- a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx +++ b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx @@ -5,6 +5,7 @@ import IMAGE_CARRET from 'assets/icon/carret.svg' import SVG from 'react-inlinesvg' import { matchPath, useLocation } from 'react-router-dom' +import { ModalHeader } from 'modules/tokensList/pure/ModalHeader' import { useTradeRouteContext } from 'modules/trade/hooks/useTradeRouteContext' import { parameterizeTradeRoute } from 'modules/trade/utils/parameterizeTradeRoute' @@ -50,7 +51,7 @@ export function TradeWidgetLinks({ const location = useLocation() const [isDropdownVisible, setDropdownVisible] = useState(false) - const handleMenuItemClick = (_item: MenuItemConfig) => { + const handleMenuItemClick = (_item?: MenuItemConfig) => { if (menuItems.length === 1) return setDropdownVisible(false) } @@ -81,11 +82,14 @@ export function TradeWidgetLinks({ ) }) - const singleMenuItem = menuItems.length === 1; + const singleMenuItem = menuItems.length === 1 return isDropdown ? ( <> - !singleMenuItem && setDropdownVisible(!isDropdownVisible)} isDropdownVisible={isDropdownVisible}> + !singleMenuItem && setDropdownVisible(!isDropdownVisible)} + isDropdownVisible={isDropdownVisible} + > item.props.isActive)?.props.routePath || '#'}> {menuItems.find((item) => item.props.isActive)?.props.item.label} @@ -93,11 +97,17 @@ export function TradeWidgetLinks({ - {isDropdownVisible && {menuItems}} + + {isDropdownVisible && ( + + Trading mode + {menuItems} + + )} ) : ( {menuItems} - ); + ) } const MenuItem = ({ diff --git a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts index 1d91b92f9f..f085c0644f 100644 --- a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts +++ b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts @@ -11,7 +11,7 @@ const badgeBackgrounds: Record = { alert2: `var(${UI.COLOR_ALERT2_BG})`, success: `var(${UI.COLOR_SUCCESS_BG})`, default: 'transparent', // text only -}; +} const badgeColors: Record = { information: `var(${UI.COLOR_INFORMATION_TEXT})`, @@ -19,7 +19,7 @@ const badgeColors: Record = { alert2: `var(${UI.COLOR_ALERT2_TEXT})`, success: `var(${UI.COLOR_SUCCESS_TEXT})`, default: `var(${UI.COLOR_TEXT1_INACTIVE})`, // text only -}; +} export const Badge = styled.div<{ type?: BadgeType }>` background: ${({ type }) => badgeBackgrounds[type || 'default']}; @@ -42,8 +42,8 @@ export const Badge = styled.div<{ type?: BadgeType }>` ` Badge.defaultProps = { - type: 'default' -}; + type: 'default', +} export const Link = styled(NavLink)` display: flex; @@ -86,36 +86,44 @@ export const Wrapper = styled.div` export const MenuItem = styled.div<{ isActive?: boolean; isDropdownVisible: boolean }>` display: flex; align-items: center; - font-size: ${({ theme }) => theme.isInjectedWidgetMode ? '16px' : '14px'}; - font-weight: ${({ theme }) => theme.isInjectedWidgetMode ? '600' : '500'}; - border-radius: var(${UI.BORDER_RADIUS_NORMAL}); - padding: ${({ theme }) => theme.isInjectedWidgetMode ? '7px 0' : '5px 10px'}; - background: transparent; - transition: background 0.2s ease-in-out; - - &:hover { - background: var(${UI.COLOR_GREY}); - } - ${({ isActive }) => - isActive && - css` + > a { + display: flex; + align-items: center; + justify-content: flex-start; + text-align: left; + font-size: ${({ theme }) => (theme.isInjectedWidgetMode ? '16px' : '14px')}; + font-weight: ${({ theme }) => (theme.isInjectedWidgetMode ? '600' : '500')}; + border-radius: var(${UI.BORDER_RADIUS_NORMAL}); + padding: ${({ theme }) => (theme.isInjectedWidgetMode ? '7px' : '5px 10px')}; + background: transparent; + transition: background 0.2s ease-in-out; + + &:hover { background: var(${UI.COLOR_GREY}); + } - ${Link} { - color: var(${UI.COLOR_TEXT1}); - } - - ${Link} > ${Badge} { - display: none; - } - `} - - ${({ isDropdownVisible }) => - isDropdownVisible && - css` - padding: 7px 10px; - `} + ${({ isActive }) => + isActive && + css` + background: var(${UI.COLOR_GREY}); + + ${Link} { + color: var(${UI.COLOR_TEXT1}); + } + + ${Link} > ${Badge} { + display: none; + } + `} + + ${({ isDropdownVisible }) => + isDropdownVisible && + css` + padding: 16px; + width: 100%; + `} + } ` export const SelectMenu = styled.div` @@ -128,7 +136,7 @@ export const SelectMenu = styled.div` left: 0; top: 0; padding: 16px; - gap: ${({ theme }) => theme.isInjectedWidgetMode ? '16px' : '24px'}; + gap: ${({ theme }) => (theme.isInjectedWidgetMode ? '16px' : '24px')}; background: var(${UI.COLOR_CONTAINER_BG_01}); border-radius: var(${UI.BORDER_RADIUS_NORMAL}); ` diff --git a/apps/cowswap-frontend/src/modules/fortune/containers/FortuneWidget/index.tsx b/apps/cowswap-frontend/src/modules/fortune/containers/FortuneWidget/index.tsx index 2ec8e3ab9f..0210d10a47 100644 --- a/apps/cowswap-frontend/src/modules/fortune/containers/FortuneWidget/index.tsx +++ b/apps/cowswap-frontend/src/modules/fortune/containers/FortuneWidget/index.tsx @@ -249,7 +249,7 @@ const FortuneContent = styled.div` const StyledExternalLink = styled(ExternalLink)` background: var(${UI.COLOR_GREY}); - border-radius: 24px; + border-radius: var(${UI.BORDER_RADIUS_NORMAL}); ` const HeaderElement = 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 6b0ff20bc3..3c041f54d7 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx @@ -12,15 +12,20 @@ import styled from 'styled-components/macro' import { Web3Status } from 'modules/wallet/containers/Web3Status' +import { UI } from 'common/constants/theme' import { CowSwapSafeAppLink } from 'common/pure/CowSwapSafeAppLink' import { OrdersTable, OrdersTableProps } from './OrdersTable' import { OrdersTabs, OrdersTabsProps } from './OrdersTabs' const OrdersBox = styled.div` - background: transparent; - border-radius: 16px; - padding: 0; + background: ${({ theme }) => (theme.isInjectedWidgetMode ? `var(${UI.COLOR_CONTAINER_BG_01})` : 'transparent')}; + border: none; + border-radius: var(${UI.BORDER_RADIUS_NORMAL}); + box-shadow: none; + position: relative; + padding: ${({ theme }) => (theme.isInjectedWidgetMode ? '16px' : '0')}; + padding: ${({ theme }) => (theme.isInjectedWidgetMode ? '16px' : '0')}; min-height: 200px; width: 100%; ` @@ -180,7 +185,7 @@ export function OrdersTableContainer({

Connect a wallet

- {!isInjectedWidget() && ( + {!isInjectedWidget && ( <>

diff --git a/apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenModal/styled.ts b/apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenModal/styled.ts index dc00bb5fb7..7fcd7c78a4 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenModal/styled.ts +++ b/apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenModal/styled.ts @@ -36,7 +36,7 @@ export const SearchInput = styled.input` color: var(${UI.COLOR_TEXT1}); padding: 16px; border: 1px solid var(${UI.COLOR_GREY}); - -webkit-appearance: none; + appearance: none; transition: border 100ms; background: transparent; diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/ModalHeader/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/ModalHeader/index.tsx index 10ef4f5d85..11aa65725a 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/ModalHeader/index.tsx +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/ModalHeader/index.tsx @@ -11,31 +11,45 @@ const Header = styled.div` justify-content: space-between; font-weight: 500; font-size: 20px; - padding: 20px; - border-bottom: 1px solid var(${UI.COLOR_BORDER}); + padding: 10px 0; +` + +const StyledIconButton = styled(IconButton)` + display: flex; + align-items: center; + justify-content: center; +` + +const Title = styled.div` + display: flex; + align-items: center; + justify-content: center; + flex-grow: 1; + font-size: 18px; + font-weight: 600; + font-weight: var(${UI.FONT_WEIGHT_BOLD}); ` export interface ModalHeaderProps { children: string onBack(): void - onClose(): void + onClose?(): void className?: string } export function ModalHeader({ children, className, onBack, onClose }: ModalHeaderProps) { return (

-
-
-
{children}
-
- + {children} + { onClose &&
+ - +
+ }
) } diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/commonElements.ts b/apps/cowswap-frontend/src/modules/tokensList/pure/commonElements.ts index b8edf20eec..84c3712c44 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/commonElements.ts +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/commonElements.ts @@ -63,7 +63,7 @@ export const ImportButton = styled.button` font-size: 16px; font-weight: 600; padding: 6px 15px; - border-radius: 24px; + border-radius: var(${UI.BORDER_RADIUS_NORMAL}); cursor: pointer; transition: background-color 0.2s ease-in-out; diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx index 59bc94d6ae..f32e5f0b3f 100644 --- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx +++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx @@ -22,6 +22,7 @@ import { useThrottleFn } from 'common/hooks/useThrottleFn' import { CurrencyArrowSeparator } from 'common/pure/CurrencyArrowSeparator' import { CurrencyInputPanel, CurrencyInputPanelProps } from 'common/pure/CurrencyInputPanel' import { CurrencyInfo } from 'common/pure/CurrencyInputPanel/types' +import { PoweredFooter } from 'common/pure/PoweredFooter' import * as styledEl from './styled' import { TradeWidgetModals } from './TradeWidgetModals' @@ -201,6 +202,8 @@ export function TradeWidget(props: TradeWidgetProps) { {isWrapOrUnwrap ? : bottomContent} )} + + {isInjectedWidgetMode && } diff --git a/apps/cowswap-frontend/src/pages/Claim/styled.ts b/apps/cowswap-frontend/src/pages/Claim/styled.ts index 78e2615587..917aaebdcb 100644 --- a/apps/cowswap-frontend/src/pages/Claim/styled.ts +++ b/apps/cowswap-frontend/src/pages/Claim/styled.ts @@ -1650,7 +1650,7 @@ export const SuccessBanner = styled.div<{ type: string }>` width: 100%; height: 86px; padding: 0 24px; - border-radius: 24px; + border-radius: var(${UI.BORDER_RADIUS_NORMAL}); margin: 0 0 12px; font-weight: bold; font-size: 21px; diff --git a/apps/cowswap-frontend/src/utils/iframeResizer.ts b/apps/cowswap-frontend/src/utils/iframeResizer.ts new file mode 100644 index 0000000000..94e2820b3e --- /dev/null +++ b/apps/cowswap-frontend/src/utils/iframeResizer.ts @@ -0,0 +1,27 @@ +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/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx index 76c5083a83..8506ec13bc 100644 --- a/apps/widget-configurator/src/app/configurator/index.tsx +++ b/apps/widget-configurator/src/app/configurator/index.tsx @@ -81,7 +81,7 @@ export function Configurator({ title }: { title: string }) { const constructIframeURL = React.useCallback(() => { if (network) { - return `https://swap-dev-git-widget-ui-6-cowswap.vercel.app/#/${network.chainID}/widget/swap/${sellToken}/${buyToken}?sellAmount=${sellTokenAmount}&buyAmount=${buyTokenAmount}&theme=${mode}` + return `http://localhost:3000/#/${network.chainID}/widget/swap/${sellToken}/${buyToken}?sellAmount=${sellTokenAmount}&buyAmount=${buyTokenAmount}&theme=${mode}` } return '' }, [sellToken, buyToken, sellTokenAmount, buyTokenAmount, mode, network]) diff --git a/libs/common-const/src/chainInfo.ts b/libs/common-const/src/chainInfo.ts index f43a04c165..bcebee3aa2 100644 --- a/libs/common-const/src/chainInfo.ts +++ b/libs/common-const/src/chainInfo.ts @@ -1,4 +1,5 @@ import { SupportedChainId } from '@cowprotocol/cow-sdk' +import { COW_PROTOCOL_LINK } from './common' import GnosisChainLogo from '@cowprotocol/assets/cow-swap/network-gnosis-chain-logo.svg' import GoerliLogo from '@cowprotocol/assets/cow-swap/network-goerli-logo.svg' @@ -40,7 +41,7 @@ export const CHAIN_INFO: ChainInfoMap = { networkType: NetworkType.L1, docs: 'https://docs.cow.fi/', explorer: 'https://etherscan.io/', - infoLink: 'https://cow.fi/', + infoLink: COW_PROTOCOL_LINK, label: 'Ethereum', name: 'mainnet', explorerTitle: 'Etherscan', @@ -51,7 +52,7 @@ export const CHAIN_INFO: ChainInfoMap = { networkType: NetworkType.L1, docs: 'https://docs.cow.fi/', explorer: 'https://goerli.etherscan.io/', - infoLink: 'https://cow.fi/', + infoLink: COW_PROTOCOL_LINK, label: 'Görli', name: 'goerli', explorerTitle: 'Etherscan', diff --git a/libs/common-const/src/common.ts b/libs/common-const/src/common.ts index 75d5e2e78f..f071b03016 100644 --- a/libs/common-const/src/common.ts +++ b/libs/common-const/src/common.ts @@ -117,6 +117,7 @@ const GITHUB_REPOSITORY = 'cowprotocol/cowswap' export const CODE_LINK = 'https://github.com/' + GITHUB_REPOSITORY export const RAW_CODE_LINK = 'https://raw.githubusercontent.com/' + GITHUB_REPOSITORY +export const COW_PROTOCOL_LINK = 'https://cow.fi/' export const DOCS_LINK = 'https://docs.cow.fi' export const CONTRACTS_CODE_LINK = 'https://github.com/cowprotocol/contracts' export const DISCORD_LINK = 'https://discord.com/invite/cowprotocol'