Widget UI 7 (#3251)

* feat: widget init mods * feat: widget menu links * feat: select menu * feat: select menu * feat: select menu * Update apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx Co-authored-by: Alexandr Kazachenko <[email protected]> * feat: fix semicolons * feat: menu styling * feat: general styling * feat: connect wallet internal * feat: connect wallet internal * feat: connect wallet internal * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * refactor: extract AccountElement and AccountModalState * feat: update theme * feat: update modalheader * feat: update modalheader * feat: update modalheader * feat: refactor code * feat: iframe resizer * feat: update * feat: powered by footer (#3254) --------- Co-authored-by: Michel <[email protected]> Co-authored-by: Alexandr Kazachenko <[email protected]>
cowprotocol · Oct 20, 2023 · 6a36d1a · 6a36d1a
1 parent 1a2c1de
commit 6a36d1a
Show file tree

Hide file tree

Showing 24 changed files with 206 additions and 104 deletions.
diff --git a/apps/cowswap-frontend/src/assets/logo/cow-icon.svg b/apps/cowswap-frontend/src/assets/logo/cow-icon.svg
diff --git 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
@@ -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 (
+    <Wrapper>
+      <StyledExternalLink href={COW_PROTOCOL_LINK}>
+        <SVG src={cowIcon} title="CoW Protocol" />
+        <Trans>Powered by CoW Protocol</Trans>
+      </StyledExternalLink>
+    </Wrapper>
+  )
+}
diff --git 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(
         </HashRouter>
       </AtomProvider>
     </Provider>
+
+    {isInjectedWidgetMode && <IframeResizer />}
   </StrictMode>
 )
 

diff --git 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 (
     <Wrapper isMobileMenuOpen={isMobileMenuOpen}>
       <HeaderModWrapper>

diff --git 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<ThemeProps<DefaultTheme>> }>`
   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
@@ -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
@@ -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,35 +59,30 @@ 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 }>`
   border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.bg3)};
   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
@@ -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
@@ -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
@@ -6,6 +6,7 @@ export const AppWrapper = styled.div<Partial<CSS.Properties>>`
   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
@@ -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,23 +82,32 @@ export function TradeWidgetLinks({
     )
   })
 
-  const singleMenuItem = menuItems.length === 1;
+  const singleMenuItem = menuItems.length === 1
 
   return isDropdown ? (
     <>
-      <styledEl.MenuItem onClick={() => !singleMenuItem && setDropdownVisible(!isDropdownVisible)} isDropdownVisible={isDropdownVisible}>
+      <styledEl.MenuItem
+        onClick={() => !singleMenuItem && setDropdownVisible(!isDropdownVisible)}
+        isDropdownVisible={isDropdownVisible}
+      >
         <styledEl.Link to={menuItems.find((item) => item.props.isActive)?.props.routePath || '#'}>
           <Trans>
             {menuItems.find((item) => item.props.isActive)?.props.item.label}
             {!singleMenuItem ? <SVG src={IMAGE_CARRET} title="select" /> : null}
           </Trans>
         </styledEl.Link>
       </styledEl.MenuItem>
-      {isDropdownVisible && <styledEl.SelectMenu>{menuItems}</styledEl.SelectMenu>}
+
+      {isDropdownVisible && (
+        <styledEl.SelectMenu>
+          <ModalHeader onBack={handleMenuItemClick}>Trading mode</ModalHeader>
+          {menuItems}
+        </styledEl.SelectMenu>
+      )}
     </>
   ) : (
     <styledEl.Wrapper>{menuItems}</styledEl.Wrapper>
-  );
+  )
 }
 
 const MenuItem = ({