Widget UI + configurator

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

@@ -24,6 +24,8 @@ export enum UI {
 
   // Icons
   ICON_SIZE_NORMAL = '--cow-icon-size-normal',
+  ICON_SIZE_SMALL = '--cow-icon-size-small',
+  ICON_SIZE_XSMALL = '--cow-icon-size-xsmall',
   ICON_SIZE_LARGE = '--cow-icon-size-large',
   ICON_COLOR_NORMAL = '--cow-icon-color-normal',
 

apps/cowswap-frontend/src/common/hooks/useOrdersPanel.ts

@@ -0,0 +1,25 @@
+import { useState, useCallback } from 'react';
+
+interface UseOrdersPanel {
+  isOrdersPanelOpen: boolean;
+  handleOpenOrdersPanel: () => void;
+  handleCloseOrdersPanel: () => void;
+}
+
+export const useOrdersPanel = (): UseOrdersPanel => {
+  const [isOrdersPanelOpen, setIsOrdersPanelOpen] = useState<boolean>(false);
+
+  const handleOpenOrdersPanel = useCallback(() => {
+    setIsOrdersPanelOpen(true);
+  }, []);
+
+  const handleCloseOrdersPanel = useCallback(() => {
+    setIsOrdersPanelOpen(false);
+  }, []);
+
+  return {
+    isOrdersPanelOpen,
+    handleOpenOrdersPanel,
+    handleCloseOrdersPanel,
+  };
+};

apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx

@@ -302,11 +302,19 @@ export const StepsWrapper = styled.div`
     margin: auto;
     position: absolute;
     width: 100%;
-    max-width: 162px;
+    max-width: 35%;
     left: 0;
     right: 0;
     top: 32px;
     z-index: 1;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      max-width: 25%;
+    `}
+
+    ${({ theme }) => theme.mediaWidth.upToVerySmall`
+      max-width: 20%;
+    `}
   }
 
   > hr::before {

apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx

@@ -3,6 +3,8 @@ import { ReactComponent as DropDown } from '@cowprotocol/assets/images/dropdown.
 import { lighten, transparentize } from 'polished'
 import styled from 'styled-components/macro'
 
+import { UI } from 'common/constants/theme'
+
 export const CurrencySelectWrapper = styled.button<{ isLoading: boolean; $stubbed: boolean; readonlyMode: boolean }>`
   display: flex;
   justify-content: space-between;
@@ -19,7 +21,7 @@ export const CurrencySelectWrapper = styled.button<{ isLoading: boolean; $stubbe
       : `0px 4px 8px ${transparentize(0.96, theme.text1)}`};
   opacity: ${({ isLoading }) => (isLoading ? 0.6 : 1)};
   pointer-events: ${({ readonlyMode }) => (readonlyMode ? 'none' : '')};
-  border-radius: 16px;
+  border-radius: var(${UI.BORDER_RADIUS_NORMAL});
   padding: 6px;
   transition: background-color 0.15s ease-in-out;
   max-width: 190px;

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

@@ -7,6 +7,7 @@ import { Provider as AtomProvider } from 'jotai'
 import { StrictMode } from 'react'
 
 import { BlockNumberProvider } from '@cowprotocol/common-hooks'
+import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { nodeRemoveChildFix } from '@cowprotocol/common-utils'
 import { jotaiStore } from '@cowprotocol/core'
 import { SnackbarsWidget } from '@cowprotocol/snackbars'
@@ -41,6 +42,7 @@ if (window.ethereum) {
 }
 
 const root = createRoot(document.getElementById('root')!)
+const isInjectedWidgetMode = isInjectedWidget()
 
 root.render(
   <StrictMode>
@@ -56,12 +58,18 @@ root.render(
                 <BlockNumberProvider>
                   <WithLDProvider>
                     <Updaters />
-                    <FeatureGuard featureFlag="cowFortuneEnabled">
-                      <FortuneWidget />
-                    </FeatureGuard>
+
+                    {!isInjectedWidgetMode && (
+                      <>
+                        <FeatureGuard featureFlag="cowFortuneEnabled">
+                          <FortuneWidget />
+                        </FeatureGuard>
+                        <AppziButton />
+                      </>
+                    )}
+
                     <Popups />
                     <SnackbarsWidget />
-                    <AppziButton />
                     <App />
                   </WithLDProvider>
                 </BlockNumberProvider>

apps/cowswap-frontend/src/legacy/components/Copy/CopyMod.tsx

@@ -13,6 +13,7 @@ import { UI } from 'common/constants/theme'
 
 // MOD imports
 export const CopyIcon = styled(LinkStyledButton)`
+  --iconSize: var(${UI.ICON_SIZE_NORMAL});
   color: ${({ theme }) => theme.text3};
   flex-shrink: 0;
   display: flex;
@@ -22,8 +23,8 @@ export const CopyIcon = styled(LinkStyledButton)`
   font-size: 0.825rem;
   border-radius: 50%;
   background-color: transparent;
-  min-width: 20px;
-  min-height: 20px;
+  min-width: var(--iconSize);
+  min-height: var(--iconSize);
   align-self: flex-end;
   :hover,
   :active,

apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx

@@ -1,10 +1,12 @@
 import React, { ErrorInfo, PropsWithChildren } from 'react'
 
 import { sendError } from '@cowprotocol/analytics'
+import { isInjectedWidget } from '@cowprotocol/common-utils'
 
 import * as Sentry from '@sentry/react'
 import styled from 'styled-components/macro'
 
+
 import { ChunkLoadError } from 'legacy/components/ErrorBoundary/ChunkLoadError'
 import { ErrorWithStackTrace } from 'legacy/components/ErrorBoundary/ErrorWithStackTrace'
 import Footer from 'legacy/components/Footer'
@@ -128,6 +130,8 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren, Er
 
           return (
             <AppWrapper>
+
+            {!isInjectedWidget() &&
               <HeaderWrapper>
                 <HeaderRow marginRight="0">
                   <a href={Routes.HOME}>
@@ -137,6 +141,8 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren, Er
                   </a>
                 </HeaderRow>
               </HeaderWrapper>
+            }
+
               <Wrapper>{isChunkLoadError ? <ChunkLoadError /> : <ErrorWithStackTrace error={error} />}</Wrapper>
               <FooterWrapper>
                 <Footer />

apps/cowswap-frontend/src/legacy/components/Header/index.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { toggleDarkModeAnalytics } from '@cowprotocol/analytics'
-import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { addBodyClass, removeBodyClass } from '@cowprotocol/common-utils'
 import { SupportedChainId as ChainId, SupportedChainId } from '@cowprotocol/cow-sdk'
 import { TokenAmount } from '@cowprotocol/ui'
@@ -29,6 +28,8 @@ import { Web3Status } from 'modules/wallet/containers/Web3Status'
 import { Routes } from 'common/constants/routes'
 import { useCategorizeRecentActivity } from 'common/hooks/useCategorizeRecentActivity'
 import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetworkUnsupported'
+import { useOrdersPanel } from 'common/hooks/useOrdersPanel'
+
 
 import MobileMenuIcon from './MobileMenuIcon'
 import {
@@ -49,16 +50,31 @@ const CHAIN_CURRENCY_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.GNOSIS_CHAIN]: 'xDAI',
 }
 
+// Todo: fix 'any' types
+export const AccountElementComponent = ({ isWidgetMode, pendingActivity, handleOpenOrdersPanel }: any) => {
+  const { account, chainId } = useWalletInfo()
+  const isChainIdUnsupported = useIsProviderNetworkUnsupported()
+  const nativeToken = CHAIN_CURRENCY_LABELS[chainId] || 'ETH'
+  const userEthBalance = useNativeCurrencyBalances(account ? [account] : [])?.[account ?? '']
+
+  return (
+    <AccountElement active={!!account} onClick={handleOpenOrdersPanel}>
+      {!isWidgetMode && account && !isChainIdUnsupported && userEthBalance && chainId && (
+        <BalanceText>
+          <TokenAmount amount={userEthBalance} tokenSymbol={{ symbol: nativeToken }} />
+        </BalanceText>
+      )}
+
+      <Web3Status pendingActivities={pendingActivity} />
+    </AccountElement>
+  )
+}
+
 export default function Header() {
   const { account, chainId } = useWalletInfo()
-  const isInjectedWidgetMode = isInjectedWidget()
   const injectedWidgetParams = useInjectedWidgetParams()
-
   const isChainIdUnsupported = useIsProviderNetworkUnsupported()
-
   const { pendingActivity } = useCategorizeRecentActivity()
-  const userEthBalance = useNativeCurrencyBalances(account ? [account] : [])?.[account ?? '']
-  const nativeToken = CHAIN_CURRENCY_LABELS[chainId] || 'ETH'
   const [darkMode, toggleDarkModeAux] = useDarkModeManager()
   const toggleDarkMode = useCallback(() => {
     toggleDarkModeAnalytics(!darkMode)
@@ -67,14 +83,7 @@ export default function Header() {
   const swapRawState = useSwapRawState()
   const { state: tradeState } = useTradeState()
 
-  const [isOrdersPanelOpen, setIsOrdersPanelOpen] = useState<boolean>(false)
-  const handleOpenOrdersPanel = () => {
-    account && setIsOrdersPanelOpen(true)
-  }
-  const handleCloseOrdersPanel = () => {
-    setIsOrdersPanelOpen(false)
-    !isOrdersPanelOpen && removeBodyClass('noScroll')
-  }
+  const { isOrdersPanelOpen, handleOpenOrdersPanel, handleCloseOrdersPanel } = useOrdersPanel();
 
   const navigate = useNavigate()
 
@@ -128,7 +137,7 @@ export default function Header() {
       <HeaderModWrapper>
         <HeaderRow>
           {!injectedWidgetParams.hideLogo && (
-            <Title href={isInjectedWidgetMode ? undefined : Routes.HOME} isMobileMenuOpen={isMobileMenuOpen}>
+            <Title href={Routes.HOME} isMobileMenuOpen={isMobileMenuOpen}>
               <UniIcon>
                 <LogoImage isMobileMenuOpen={isMobileMenuOpen}>
                   {injectedWidgetParams.logoUrl ? (
@@ -140,14 +149,14 @@ export default function Header() {
               </UniIcon>
             </Title>
           )}
-          {!isInjectedWidgetMode && <MenuTree isMobileMenuOpen={isMobileMenuOpen} context={menuContext} />}
+          {<MenuTree isMobileMenuOpen={isMobileMenuOpen} context={menuContext} />}
         </HeaderRow>
 
         <HeaderControls>
           {!injectedWidgetParams.hideNetworkSelector && <NetworkSelector />}
 
           <HeaderElement>
-            {!isInjectedWidgetMode && !isChainIdUnsupported && (
+            {!isChainIdUnsupported && (
               <CowBalanceButton
                 onClick={() => navigate('/account')}
                 account={account}
@@ -156,20 +165,11 @@ export default function Header() {
               />
             )}
 
-            <AccountElement active={!!account} onClick={handleOpenOrdersPanel}>
-              {account && !isChainIdUnsupported && userEthBalance && chainId && (
-                <BalanceText>
-                  <TokenAmount amount={userEthBalance} tokenSymbol={{ symbol: nativeToken }} />
-                </BalanceText>
-              )}
-              <Web3Status pendingActivities={pendingActivity} />
-            </AccountElement>
+            <AccountElementComponent pendingActivity={pendingActivity} handleOpenOrdersPanel={handleOpenOrdersPanel} />
           </HeaderElement>
         </HeaderControls>
 
-        {isUpToLarge && !isInjectedWidgetMode && (
-          <MobileMenuIcon isMobileMenuOpen={isMobileMenuOpen} onClick={handleMobileMenuOnClick} />
-        )}
+        {isUpToLarge && <MobileMenuIcon isMobileMenuOpen={isMobileMenuOpen} onClick={handleMobileMenuOnClick} />}
         {isOrdersPanelOpen && <OrdersPanel handleCloseOrdersPanel={handleCloseOrdersPanel} />}
       </HeaderModWrapper>
     </Wrapper>