From 2a1111db95491bd80649bc726df934e20c4a0651 Mon Sep 17 00:00:00 2001
From: Michel <michel@Michels-MacBook-Pro.local>
Date: Thu, 28 Sep 2023 18:01:33 +0100
Subject: [PATCH 01/26] feat: widget init mods

---
 apps/cowswap-frontend/src/cow-react/index.tsx    | 16 ++++++++++++----
 .../legacy/components/ErrorBoundary/index.tsx    |  7 +++++++
 .../src/legacy/theme/baseTheme.tsx               |  5 ++---
 apps/cowswap-frontend/src/legacy/theme/index.tsx | 13 +++++++++----
 .../src/legacy/theme/styled.d.ts                 |  1 +
 .../modules/application/containers/App/index.tsx | 13 ++++++++++---
 .../modules/application/containers/App/styled.ts |  8 ++++----
 7 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/apps/cowswap-frontend/src/cow-react/index.tsx b/apps/cowswap-frontend/src/cow-react/index.tsx
index 550ac9907f..eb78e960c7 100644
--- a/apps/cowswap-frontend/src/cow-react/index.tsx
+++ b/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>
diff --git a/apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx b/apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx
index 74d286ca67..ef462a670d 100644
--- a/apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx
+++ b/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,7 +130,10 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren, Er
 
           return (
             <AppWrapper>
+
+            {!isInjectedWidget() &&
               <HeaderWrapper>
+                <h1>Test!!!!!!!!!!!!!</h1>
                 <HeaderRow marginRight="0">
                   <a href={Routes.HOME}>
                     <UniIcon>
@@ -137,6 +142,8 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren, Er
                   </a>
                 </HeaderRow>
               </HeaderWrapper>
+            }
+
               <Wrapper>{isChunkLoadError ? <ChunkLoadError /> : <ErrorWithStackTrace error={error} />}</Wrapper>
               <FooterWrapper>
                 <Footer />
diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
index 82fe28e0a3..686b57ae62 100644
--- a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
+++ b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
@@ -471,7 +471,6 @@ export const UniThemedGlobalStyle = css`
 
   html {
     color: var(${UI.COLOR_TEXT1});
-    background-color: var(${UI.COLOR_CONTAINER_BG_02});
   }
   body {
     min-height: 100vh;
@@ -489,8 +488,8 @@ export const ThemedGlobalStyle = createGlobalStyle`
   ${UniThemedGlobalStyle}
 
   html {
-    color: var(${UI.COLOR_TEXT1});
-    ${({ theme }) => theme.body.background}
+    background-color: ${({ theme }) => theme.isInjectedWidgetMode ? 'transparent' : `var(${UI.COLOR_CONTAINER_BG_02})`};
+    ${({ theme }) => !theme.isInjectedWidgetMode && theme.body.background};
   }
 
   *, *:after, *:before { box-sizing:border-box; }
diff --git a/apps/cowswap-frontend/src/legacy/theme/index.tsx b/apps/cowswap-frontend/src/legacy/theme/index.tsx
index 7a9b064c08..23f7ac3719 100644
--- a/apps/cowswap-frontend/src/legacy/theme/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/theme/index.tsx
@@ -1,5 +1,7 @@
 import React, { useMemo } from 'react'
 
+import { isInjectedWidget } from '@cowprotocol/common-utils'
+
 import { Text, TextProps as TextPropsOriginal } from 'rebass'
 import styled, {
   css,
@@ -155,13 +157,14 @@ export const ThemedText = {
   },
 }
 
-export function theme(darkmode: boolean): DefaultTheme {
+export function theme(darkmode: boolean, isInjectedWidgetMode: boolean): DefaultTheme {
   const colorsTheme = colors(darkmode)
   return {
     ...getTheme(darkmode),
     ...colorsTheme,
+    isInjectedWidgetMode,
 
-    // Overide Theme
+    // Override Theme
     ...baseThemeVariables(darkmode, colorsTheme),
     mediaWidth: mediaWidthTemplates,
   }
@@ -169,9 +172,11 @@ export function theme(darkmode: boolean): DefaultTheme {
 
 export default function ThemeProvider({ children }: { children?: React.ReactNode }) {
   const darkMode = useIsDarkMode()
+  const isInjectedWidgetMode = isInjectedWidget()
+
   const themeObject = useMemo(() => {
-    return theme(darkMode)
-  }, [darkMode])
+    return theme(darkMode, isInjectedWidgetMode);
+  }, [darkMode, isInjectedWidgetMode]);
 
   return <StyledComponentsThemeProvider theme={themeObject}>{children}</StyledComponentsThemeProvider>
 }
diff --git a/apps/cowswap-frontend/src/legacy/theme/styled.d.ts b/apps/cowswap-frontend/src/legacy/theme/styled.d.ts
index cc2c5d35a2..26f0eb3779 100644
--- a/apps/cowswap-frontend/src/legacy/theme/styled.d.ts
+++ b/apps/cowswap-frontend/src/legacy/theme/styled.d.ts
@@ -129,6 +129,7 @@ declare module 'styled-components' {
 
   // Override theme
   export interface DefaultTheme extends DefaultThemeUniswap, Colors {
+    isInjectedWidgetMode: boolean
     shimmer: FlattenSimpleInterpolation
     colorScrollbar: FlattenSimpleInterpolation
     textShadow1: string
diff --git a/apps/cowswap-frontend/src/modules/application/containers/App/index.tsx b/apps/cowswap-frontend/src/modules/application/containers/App/index.tsx
index 9af824dfc5..0137ad47cf 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/App/index.tsx
+++ b/apps/cowswap-frontend/src/modules/application/containers/App/index.tsx
@@ -29,14 +29,20 @@ export function App() {
 
       <styledEl.AppWrapper>
         <URLWarning />
-        <styledEl.HeaderWrapper>
-          <Header />
-        </styledEl.HeaderWrapper>
+
+        {/* Hide header for injected widget mode */}
+        {!isInjectedWidgetMode && (
+          <styledEl.HeaderWrapper>
+            <Header />
+          </styledEl.HeaderWrapper>
+        )}
+        
         <styledEl.BodyWrapper>
           <TopLevelModals />
           <RoutesApp />
           <styledEl.Marginer />
         </styledEl.BodyWrapper>
+
         {isInjectedWidgetMode ? (
           <styledEl.MarginerBottom></styledEl.MarginerBottom>
         ) : (
@@ -44,6 +50,7 @@ export function App() {
             <Footer />
           </styledEl.FooterWrapper>
         )}
+        
       </styledEl.AppWrapper>
     </ErrorBoundary>
   )
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 77980bf044..189cee6911 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts
+++ b/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts
@@ -36,10 +36,10 @@ export const BodyWrapper = styled.div`
   justify-content: center;
   flex: 1 1 auto;
   z-index: 2;
-  padding: 5vh 16px 0;
+  padding: ${({ theme }) => theme.isInjectedWidgetMode ? '0' : '5vh 16px 0'};
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
-  padding: 0 10px 16px;
-  flex: none;
-`}
+    padding: ${({ theme }) => theme.isInjectedWidgetMode ? '0' : '0 10px 16px'};
+    flex: none;
+  `}
 `

From d6e6a766464bf78fb060a645d6d8f259121b20c6 Mon Sep 17 00:00:00 2001
From: Michel <michel@Michels-MacBook-Pro.local>
Date: Fri, 29 Sep 2023 12:32:11 +0100
Subject: [PATCH 02/26] feat: widget menu links

---
 .../containers/TradeWidgetLinks/index.tsx     | 95 ++++++++++++-------
 .../containers/TradeWidgetLinks/styled.ts     | 14 +++
 .../trade/containers/TradeWidget/index.tsx    |  5 +-
 3 files changed, 77 insertions(+), 37 deletions(-)

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 71eba2d6cc..2fa0556ae1 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx
+++ b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useState } from 'react'
 
 import { Trans } from '@lingui/macro'
 import { matchPath, useLocation } from 'react-router-dom'
@@ -36,41 +36,61 @@ const MENU_ITEMS: MenuItemConfig[] = [
 interface TradeWidgetLinksProps {
   highlightedBadgeText?: string
   highlightedBadgeType?: BadgeType
+  isDropdown?: boolean;
 }
 
-export function TradeWidgetLinks({ highlightedBadgeText, highlightedBadgeType }: TradeWidgetLinksProps) {
-  const tradeContext = useTradeRouteContext()
-  const location = useLocation()
-
-  const buildMenuItem = useCallback(
-    (item: MenuItemConfig) => {
-      const routePath = parameterizeTradeRoute(tradeContext, item.route)
-
-      const isActive = !!matchPath(location.pathname, routePath)
-
-      const menuItem = (
-        <MenuItem
-          key={item.label}
-          routePath={routePath}
-          item={item}
-          isActive={isActive}
-          badgeText={item.badgeText || highlightedBadgeText}
-          badgeType={item.badgeType || highlightedBadgeType}
-        />
-      )
-
-      return item.featureGuard ? (
-        <FeatureGuard key={item.label} featureFlag={item.featureGuard}>
-          {menuItem}
-        </FeatureGuard>
-      ) : (
-        menuItem
-      )
-    },
-    [location.pathname, tradeContext, highlightedBadgeText, highlightedBadgeType]
-  )
-
-  return <styledEl.Wrapper>{MENU_ITEMS.map(buildMenuItem)}</styledEl.Wrapper>
+export function TradeWidgetLinks({
+  highlightedBadgeText,
+  highlightedBadgeType,
+  isDropdown = false
+}: TradeWidgetLinksProps) {
+  const tradeContext = useTradeRouteContext();
+  const location = useLocation();
+  const [isDropdownVisible, setDropdownVisible] = useState(false);
+
+  const handleMenuItemClick = (_item: MenuItemConfig) => {
+    setDropdownVisible(false);
+  };
+
+  const menuItems = MENU_ITEMS.map((item) => {
+    const routePath = parameterizeTradeRoute(tradeContext, item.route);
+    const isActive = !!matchPath(location.pathname, routePath);
+
+    const menuItem = (
+      <MenuItem
+        key={item.label}
+        routePath={routePath}
+        item={item}
+        isActive={isActive}
+        badgeText={item.badgeText || highlightedBadgeText}
+        badgeType={item.badgeType || highlightedBadgeType}
+        onClick={() => handleMenuItemClick(item)}
+      />
+    );
+
+    return item.featureGuard ? (
+      <FeatureGuard key={item.label} featureFlag={item.featureGuard}>
+        {menuItem}
+      </FeatureGuard>
+    ) : (
+      menuItem
+    );
+  });
+
+  return isDropdown ? (
+    <>
+      <styledEl.MenuItem onClick={() => setDropdownVisible(!isDropdownVisible)}>
+        <styledEl.Link to={menuItems.find(item => item.props.isActive)?.props.routePath || '#'}>
+          <Trans>
+            {menuItems.find(item => item.props.isActive)?.props.item.label + ' ⌄' || 'Select'}
+          </Trans>
+        </styledEl.Link>
+      </styledEl.MenuItem>
+      {isDropdownVisible && <styledEl.SelectMenu>{menuItems}</styledEl.SelectMenu>}
+    </>
+  ) : (
+    <styledEl.Wrapper>{menuItems}</styledEl.Wrapper>
+  );
 }
 
 const MenuItem = ({
@@ -79,14 +99,16 @@ const MenuItem = ({
   isActive,
   badgeText,
   badgeType,
+  onClick
 }: {
   routePath: string
   item: MenuItemConfig
   isActive: boolean
   badgeText?: string
   badgeType?: BadgeType
+  onClick: () => void
 }) => (
-  <styledEl.MenuItem isActive={isActive}>
+  <styledEl.MenuItem isActive={isActive} onClick={onClick}>
     <styledEl.Link to={routePath}>
       <Trans>{item.label}</Trans>
       {item.featureGuard && badgeText && (
@@ -96,4 +118,5 @@ const MenuItem = ({
       )}
     </styledEl.Link>
   </styledEl.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 660e51fe25..da46ac6e07 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
+++ b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
@@ -98,3 +98,17 @@ export const MenuItem = styled.div<{ isActive?: boolean }>`
       }
     `}
 `
+
+export const SelectMenu = styled.div`
+  display: flex;
+  flex-flow: column wrap;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  padding: 24px;
+  gap: 24px;
+  background: var(${UI.COLOR_CONTAINER_BG_01});
+`
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 bb5f1d3dcc..a545cde6ca 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
@@ -1,6 +1,7 @@
 import { ReactNode, useEffect } from 'react'
 
 import { maxAmountSpend } from '@cowprotocol/common-utils'
+import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { useIsSafeWallet, useWalletDetails, useWalletInfo } from '@cowprotocol/wallet'
 
 import { t } from '@lingui/macro'
@@ -122,6 +123,8 @@ export function TradeWidget(props: TradeWidgetProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const isMenuDropdown = !!isInjectedWidget();
+
   return (
     <styledEl.Container id={id}>
       <RecipientAddressUpdater />
@@ -138,7 +141,7 @@ export function TradeWidget(props: TradeWidgetProps) {
       <styledEl.Container id={id}>
         <styledEl.ContainerBox>
           <styledEl.Header>
-            <TradeWidgetLinks />
+            <TradeWidgetLinks isDropdown={isMenuDropdown} />
             {!lockScreen && settingsWidget}
           </styledEl.Header>
 

From fc0113f7e1bf8a0564a9b37f63a7f7be704cc81c Mon Sep 17 00:00:00 2001
From: Michel <michel@Michels-MacBook-Pro.local>
Date: Tue, 3 Oct 2023 12:34:03 +0100
Subject: [PATCH 03/26] feat: select menu

---
 .../src/assets/icon/carret.svg                |  1 +
 .../src/assets/icon/gas-free.svg              |  2 +-
 .../pure/CurrencySelectButton/styled.tsx      |  4 ++-
 .../containers/TradeWidgetLinks/index.tsx     |  4 ++-
 .../containers/TradeWidgetLinks/styled.ts     | 28 +++++++++++++------
 .../trade/containers/TradeWidget/styled.tsx   |  3 +-
 6 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 apps/cowswap-frontend/src/assets/icon/carret.svg

diff --git a/apps/cowswap-frontend/src/assets/icon/carret.svg b/apps/cowswap-frontend/src/assets/icon/carret.svg
new file mode 100644
index 0000000000..4cfbaec171
--- /dev/null
+++ b/apps/cowswap-frontend/src/assets/icon/carret.svg
@@ -0,0 +1 @@
+<svg fill="none" height="6" viewBox="0 0 10 6" width="10" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m.46967.46967c.292893-.292893.76777-.292893 1.06066 0l3.46967 3.46967 3.46967-3.46967c.29289-.292893.76777-.292893 1.06066 0s.29289.76777 0 1.06066l-4 4c-.29289.29289-.76777.29289-1.06066 0l-4-4c-.292893-.29289-.292893-.767767 0-1.06066z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/apps/cowswap-frontend/src/assets/icon/gas-free.svg b/apps/cowswap-frontend/src/assets/icon/gas-free.svg
index 96b8d2d0c0..afd180e2ac 100644
--- a/apps/cowswap-frontend/src/assets/icon/gas-free.svg
+++ b/apps/cowswap-frontend/src/assets/icon/gas-free.svg
@@ -1 +1 @@
-<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 .889.896 0 14 13.104l-.889.896-1.414-1.4a1.797 1.797 0 0 1-1.547-1.554L9.1 9.989V12.6h-7V2.989L0 .889ZM11.9 4.9c.385 0 .7-.315.7-.7 0-.385-.315-.7-.7-.7-.385 0-.7.315-.7.7 0 .385.315.7.7.7Zm-4.2 0V1.4H4.074L2.842.161C3.038.056 3.262 0 3.5 0h4.2c.77 0 1.4.623 1.4 1.4v4.9h.7c.77 0 1.4.623 1.4 1.4v.826L7.574 4.9H7.7Zm-4.2 0h.511L3.5 4.389V4.9Zm9.639-1.939c.315.315.511.756.511 1.239v6.769L12.6 9.926V5.803A1.75 1.75 0 0 1 10.15 4.2c0-.749.469-1.379 1.127-1.631L9.8 1.092l.742-.742 2.604 2.604-.007.007Z" fill="#007B28"/></svg>
+<svg fill="none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m0 .889.896-.889 13.104 13.104-.889.896-1.414-1.4a1.797 1.797 0 0 1 -1.547-1.554l-1.05-1.057v2.611h-7v-9.611zm11.9 4.011c.385 0 .7-.315.7-.7s-.315-.7-.7-.7-.7.315-.7.7.315.7.7.7zm-4.2 0v-3.5h-3.626l-1.232-1.239c.196-.105.42-.161.658-.161h4.2c.77 0 1.4.623 1.4 1.4v4.9h.7c.77 0 1.4.623 1.4 1.4v.826l-3.626-3.626zm-4.2 0h.511l-.511-.511zm9.639-1.939c.315.315.511.756.511 1.239v6.769l-1.05-1.043v-4.123a1.75 1.75 0 0 1 -2.45-1.603c0-.749.469-1.379 1.127-1.631l-1.477-1.477.742-.742 2.604 2.604z" fill="#007b28"/></svg>
\ No newline at end of file
diff --git a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx
index f03be68b0a..3b77df839d 100644
--- a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx
+++ b/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;
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 2fa0556ae1..c7f821359f 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx
+++ b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx
@@ -1,6 +1,8 @@
 import { useState } from 'react'
 
 import { Trans } from '@lingui/macro'
+import IMAGE_CARRET from 'assets/icon/carret.svg'
+import SVG from 'react-inlinesvg'
 import { matchPath, useLocation } from 'react-router-dom'
 
 import { useTradeRouteContext } from 'modules/trade/hooks/useTradeRouteContext'
@@ -82,7 +84,7 @@ export function TradeWidgetLinks({
       <styledEl.MenuItem onClick={() => setDropdownVisible(!isDropdownVisible)}>
         <styledEl.Link to={menuItems.find(item => item.props.isActive)?.props.routePath || '#'}>
           <Trans>
-            {menuItems.find(item => item.props.isActive)?.props.item.label + ' ⌄' || 'Select'}
+            {menuItems.find(item => item.props.isActive)?.props.item.label || 'Select'}  <SVG src={IMAGE_CARRET} title="select" />
           </Trans>
         </styledEl.Link>
       </styledEl.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 da46ac6e07..8371bf5ba9 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
+++ b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
@@ -1,4 +1,3 @@
-import { transparentize } from 'polished'
 import { NavLink } from 'react-router-dom'
 import styled, { css } from 'styled-components/macro'
 
@@ -49,21 +48,31 @@ Badge.defaultProps = {
 export const Link = styled(NavLink)`
   display: flex;
   align-items: center;
+  justify-content: center;
   text-decoration: none;
-  color: ${({ theme }) => transparentize(0.4, theme.text1)};
-  gap: 3px;
+  color: var(${UI.COLOR_TEXT1_INACTIVE});
+  gap: 4px;
   font-weight: inherit;
   line-height: 1;
-  transition: color 0.15s ease-in-out;
+  transition: color 0.15s ease-in-out, fill 0.15s ease-in-out;
 
   &:hover {
     color: inherit;
+    text-decoration: none;
+
+    > svg > path {
+      fill: var(${UI.COLOR_TEXT1});
+    }
+  }
+
+  > svg > path {
+    fill: var(${UI.COLOR_TEXT1_INACTIVE});
   }
 `
 
 export const Wrapper = styled.div`
   background: transparent;
-  border-radius: 16px;
+  border-radius: var(${UI.BORDER_RADIUS_NORMAL});
   padding: 0;
   display: flex;
   flex-flow: row wrap;
@@ -79,8 +88,8 @@ export const MenuItem = styled.div<{ isActive?: boolean }>`
   align-items: center;
   font-size: 14px;
   font-weight: 500;
-  border-radius: 16px;
-  padding: 5px 10px;
+  border-radius: var(${UI.BORDER_RADIUS_NORMAL});
+  padding: ${({ theme }) => theme.isInjectedWidgetMode ? '16px' : '5px 10px'};
   background: transparent;
   transition: background 0.2 ease-in-out;
 
@@ -104,11 +113,12 @@ export const SelectMenu = styled.div`
   flex-flow: column wrap;
   width: 100%;
   height: 100%;
-  position: fixed;
+  position: absolute;
   z-index: 100;
   left: 0;
   top: 0;
   padding: 24px;
-  gap: 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/trade/containers/TradeWidget/styled.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
index e8643f3388..5f34e7c452 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
@@ -16,9 +16,10 @@ export const ContainerBox = styled.div`
   gap: 10px;
   background: var(${UI.COLOR_CONTAINER_BG_01});
   border: none;
-  border-radius: 16px;
+  border-radius: var(${UI.BORDER_RADIUS_NORMAL});
   box-shadow: ${({ theme }) => theme.boxShadow1};
   padding: 10px;
+  position: relative;
 `
 
 export const Header = styled.div`

From 6962653d00cf8f7e2ac20941bf95db5924b65178 Mon Sep 17 00:00:00 2001
From: Michel <michel@Michels-MacBook-Pro.local>
Date: Tue, 3 Oct 2023 13:37:16 +0100
Subject: [PATCH 04/26] feat: select menu

---
 apps/cowswap-frontend/src/test-utils.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/cowswap-frontend/src/test-utils.tsx b/apps/cowswap-frontend/src/test-utils.tsx
index 5ae90fdf46..96071afead 100644
--- a/apps/cowswap-frontend/src/test-utils.tsx
+++ b/apps/cowswap-frontend/src/test-utils.tsx
@@ -3,6 +3,7 @@ import { useHydrateAtoms } from 'jotai/utils'
 import { createStore } from 'jotai/vanilla'
 import { ReactElement, ReactNode, useMemo } from 'react'
 
+import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { initializeConnector, Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
 import { Connector } from '@web3-react/types'
 
@@ -27,8 +28,11 @@ const MockedI18nProvider = ({ children }: any) => <I18nProvider i18n={i18n}>{chi
 
 const MockThemeProvider = ({ children }: { children: React.ReactNode }) => {
   const darkMode = useIsDarkMode()
+  const isInjectedWidgetMode = isInjectedWidget()
 
-  const themeObject = useMemo(() => theme(darkMode), [darkMode])
+  const themeObject = useMemo(() => {
+    return theme(darkMode, isInjectedWidgetMode);
+  }, [darkMode, isInjectedWidgetMode]);
 
   return <StyledComponentsThemeProvider theme={themeObject}>{children}</StyledComponentsThemeProvider>
 }

From cd004768f8585e3e890a4cd4153fb6f4682d6090 Mon Sep 17 00:00:00 2001
From: Michel <michel@Michels-MacBook-Pro.local>
Date: Tue, 3 Oct 2023 13:50:38 +0100
Subject: [PATCH 05/26] feat: select menu

---
 .../modules/application/containers/TradeWidgetLinks/styled.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 8371bf5ba9..b4287bdc97 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
+++ b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
@@ -89,7 +89,7 @@ export const MenuItem = styled.div<{ isActive?: boolean }>`
   font-size: 14px;
   font-weight: 500;
   border-radius: var(${UI.BORDER_RADIUS_NORMAL});
-  padding: ${({ theme }) => theme.isInjectedWidgetMode ? '16px' : '5px 10px'};
+  padding: ${({ theme }) => theme.isInjectedWidgetMode ? '7px' : '5px 10px'};
   background: transparent;
   transition: background 0.2 ease-in-out;
 

From 26de84cdc48f39d4974afb3e785dd51e028d2977 Mon Sep 17 00:00:00 2001
From: fairlight <31534717+fairlighteth@users.noreply.github.com>
Date: Tue, 3 Oct 2023 14:11:28 +0100
Subject: [PATCH 06/26] Update
 apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx

Co-authored-by: Alexandr Kazachenko <shoom3301@gmail.com>
---
 .../src/modules/trade/containers/TradeWidget/index.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 a545cde6ca..6cd2190a5c 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
@@ -123,7 +123,7 @@ export function TradeWidget(props: TradeWidgetProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const isMenuDropdown = !!isInjectedWidget();
+  const isMenuDropdown = isInjectedWidget()
 
   return (
     <styledEl.Container id={id}>

From bac8ade1deab095a6ec47365c5271805b5d778ec Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Tue, 3 Oct 2023 14:13:02 +0100
Subject: [PATCH 07/26] feat: fix semicolons

---
 .../containers/TradeWidgetLinks/index.tsx     | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

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 c7f821359f..40d3e9066f 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx
+++ b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx
@@ -38,25 +38,25 @@ const MENU_ITEMS: MenuItemConfig[] = [
 interface TradeWidgetLinksProps {
   highlightedBadgeText?: string
   highlightedBadgeType?: BadgeType
-  isDropdown?: boolean;
+  isDropdown?: boolean
 }
 
 export function TradeWidgetLinks({
   highlightedBadgeText,
   highlightedBadgeType,
-  isDropdown = false
+  isDropdown = false,
 }: TradeWidgetLinksProps) {
-  const tradeContext = useTradeRouteContext();
-  const location = useLocation();
-  const [isDropdownVisible, setDropdownVisible] = useState(false);
+  const tradeContext = useTradeRouteContext()
+  const location = useLocation()
+  const [isDropdownVisible, setDropdownVisible] = useState(false)
 
   const handleMenuItemClick = (_item: MenuItemConfig) => {
-    setDropdownVisible(false);
-  };
+    setDropdownVisible(false)
+  }
 
   const menuItems = MENU_ITEMS.map((item) => {
-    const routePath = parameterizeTradeRoute(tradeContext, item.route);
-    const isActive = !!matchPath(location.pathname, routePath);
+    const routePath = parameterizeTradeRoute(tradeContext, item.route)
+    const isActive = !!matchPath(location.pathname, routePath)
 
     const menuItem = (
       <MenuItem
@@ -68,7 +68,7 @@ export function TradeWidgetLinks({
         badgeType={item.badgeType || highlightedBadgeType}
         onClick={() => handleMenuItemClick(item)}
       />
-    );
+    )
 
     return item.featureGuard ? (
       <FeatureGuard key={item.label} featureFlag={item.featureGuard}>
@@ -76,15 +76,16 @@ export function TradeWidgetLinks({
       </FeatureGuard>
     ) : (
       menuItem
-    );
-  });
+    )
+  })
 
   return isDropdown ? (
     <>
       <styledEl.MenuItem onClick={() => setDropdownVisible(!isDropdownVisible)}>
-        <styledEl.Link to={menuItems.find(item => item.props.isActive)?.props.routePath || '#'}>
+        <styledEl.Link to={menuItems.find((item) => item.props.isActive)?.props.routePath || '#'}>
           <Trans>
-            {menuItems.find(item => item.props.isActive)?.props.item.label || 'Select'}  <SVG src={IMAGE_CARRET} title="select" />
+            {menuItems.find((item) => item.props.isActive)?.props.item.label || 'Select'}{' '}
+            <SVG src={IMAGE_CARRET} title="select" />
           </Trans>
         </styledEl.Link>
       </styledEl.MenuItem>
@@ -92,7 +93,7 @@ export function TradeWidgetLinks({
     </>
   ) : (
     <styledEl.Wrapper>{menuItems}</styledEl.Wrapper>
-  );
+  )
 }
 
 const MenuItem = ({
@@ -101,7 +102,7 @@ const MenuItem = ({
   isActive,
   badgeText,
   badgeType,
-  onClick
+  onClick,
 }: {
   routePath: string
   item: MenuItemConfig
@@ -120,5 +121,4 @@ const MenuItem = ({
       )}
     </styledEl.Link>
   </styledEl.MenuItem>
-);
-
+)

From 07ea891e87e99c61957b3dbeedd35d93f743c034 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Tue, 3 Oct 2023 17:48:12 +0100
Subject: [PATCH 08/26] feat: menu styling

---
 .../src/assets/icon/carret.svg                |  2 +-
 .../CurrencySearch/CurrencySearchMod.tsx      | 21 ++++++++++-----
 .../components/Settings/SettingsMod.tsx       |  2 +-
 .../src/legacy/theme/baseTheme.tsx            |  2 +-
 .../containers/TradeWidgetLinks/index.tsx     | 16 ++++++++----
 .../containers/TradeWidgetLinks/styled.ts     | 26 +++++++++++++------
 .../trade/containers/TradeWidget/styled.tsx   |  2 +-
 7 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/apps/cowswap-frontend/src/assets/icon/carret.svg b/apps/cowswap-frontend/src/assets/icon/carret.svg
index 4cfbaec171..c7374a1dad 100644
--- a/apps/cowswap-frontend/src/assets/icon/carret.svg
+++ b/apps/cowswap-frontend/src/assets/icon/carret.svg
@@ -1 +1 @@
-<svg fill="none" height="6" viewBox="0 0 10 6" width="10" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m.46967.46967c.292893-.292893.76777-.292893 1.06066 0l3.46967 3.46967 3.46967-3.46967c.29289-.292893.76777-.292893 1.06066 0s.29289.76777 0 1.06066l-4 4c-.29289.29289-.76777.29289-1.06066 0l-4-4c-.292893-.29289-.292893-.767767 0-1.06066z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg fill="none" height="8" viewBox="0 0 12 8" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m10.59.589966-4.59 4.580004-4.59-4.580004-1.41 1.410004 6 6 6-6z" fill="#0f2c61"/></svg>
\ No newline at end of file
diff --git a/apps/cowswap-frontend/src/legacy/components/SearchModal/CurrencySearch/CurrencySearchMod.tsx b/apps/cowswap-frontend/src/legacy/components/SearchModal/CurrencySearch/CurrencySearchMod.tsx
index 693e2efdfa..49a4891bd4 100644
--- a/apps/cowswap-frontend/src/legacy/components/SearchModal/CurrencySearch/CurrencySearchMod.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/SearchModal/CurrencySearch/CurrencySearchMod.tsx
@@ -3,6 +3,7 @@ import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo,
 import { searchByAddressAnalytics } from '@cowprotocol/analytics'
 import { useTheme, useDebounce, useNetworkName, useOnClickOutside, useToggle } from '@cowprotocol/common-hooks'
 import { isAddress } from '@cowprotocol/common-utils'
+import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { Row } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 import { Currency, Token } from '@uniswap/sdk-core'
@@ -205,6 +206,8 @@ export function CurrencySearch({
     inputRef.current?.focus()
   }, [])
 
+  const isInjectedWidgetMode = isInjectedWidget()
+
   return (
     <>
       <ContentWrapper>
@@ -278,13 +281,17 @@ export function CurrencySearch({
             </ThemedText.Main>
           </Column>
         )}
-        <Footer>
-          <Row justify="center">
-            <ButtonText onClick={showManageView} color={theme.primary1} className="list-token-manage-button">
-              <FooterButtonTextComponent theme={theme} />
-            </ButtonText>
-          </Row>
-        </Footer>
+
+        {!isInjectedWidgetMode && (
+          <Footer>
+            <Row justify="center">
+              <ButtonText onClick={showManageView} color={theme.primary1} className="list-token-manage-button">
+                <FooterButtonTextComponent theme={theme} />
+              </ButtonText>
+            </Row>
+          </Footer>
+        )}
+
       </ContentWrapper>
     </>
   )
diff --git a/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx b/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx
index 7d20b49b10..02b4968860 100644
--- a/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx
@@ -64,7 +64,7 @@ export const EmojiWrapper = styled.div`
 `
 
 const StyledMenu = styled.div`
-  margin-left: 0.5rem;
+  margin: 0 0 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
index 686b57ae62..3fea0ba9db 100644
--- a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
+++ b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
@@ -489,7 +489,7 @@ export const ThemedGlobalStyle = createGlobalStyle`
 
   html {
     background-color: ${({ theme }) => theme.isInjectedWidgetMode ? 'transparent' : `var(${UI.COLOR_CONTAINER_BG_02})`};
-    ${({ theme }) => !theme.isInjectedWidgetMode && theme.body.background};
+    ${({ theme }) => theme.body.background};
   }
 
   *, *:after, *:before { box-sizing:border-box; }
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 40d3e9066f..10bee4ec3d 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx
+++ b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx
@@ -51,6 +51,7 @@ export function TradeWidgetLinks({
   const [isDropdownVisible, setDropdownVisible] = useState(false)
 
   const handleMenuItemClick = (_item: MenuItemConfig) => {
+    if (menuItems.length === 1) return
     setDropdownVisible(false)
   }
 
@@ -67,6 +68,7 @@ export function TradeWidgetLinks({
         badgeText={item.badgeText || highlightedBadgeText}
         badgeType={item.badgeType || highlightedBadgeType}
         onClick={() => handleMenuItemClick(item)}
+        isDropdownVisible={isDropdownVisible}
       />
     )
 
@@ -79,13 +81,15 @@ export function TradeWidgetLinks({
     )
   })
 
+  const singleMenuItem = menuItems.length === 1;
+
   return isDropdown ? (
     <>
-      <styledEl.MenuItem onClick={() => setDropdownVisible(!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 || 'Select'}{' '}
-            <SVG src={IMAGE_CARRET} title="select" />
+            {menuItems.find((item) => item.props.isActive)?.props.item.label}
+            {!singleMenuItem ? <SVG src={IMAGE_CARRET} title="select" /> : null}
           </Trans>
         </styledEl.Link>
       </styledEl.MenuItem>
@@ -93,7 +97,7 @@ export function TradeWidgetLinks({
     </>
   ) : (
     <styledEl.Wrapper>{menuItems}</styledEl.Wrapper>
-  )
+  );
 }
 
 const MenuItem = ({
@@ -103,6 +107,7 @@ const MenuItem = ({
   badgeText,
   badgeType,
   onClick,
+  isDropdownVisible,
 }: {
   routePath: string
   item: MenuItemConfig
@@ -110,8 +115,9 @@ const MenuItem = ({
   badgeText?: string
   badgeType?: BadgeType
   onClick: () => void
+  isDropdownVisible: boolean
 }) => (
-  <styledEl.MenuItem isActive={isActive} onClick={onClick}>
+  <styledEl.MenuItem isActive={isActive} onClick={onClick} isDropdownVisible={isDropdownVisible}>
     <styledEl.Link to={routePath}>
       <Trans>{item.label}</Trans>
       {item.featureGuard && badgeText && (
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 b4287bdc97..1d91b92f9f 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
+++ b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
@@ -50,7 +50,7 @@ export const Link = styled(NavLink)`
   align-items: center;
   justify-content: center;
   text-decoration: none;
-  color: var(${UI.COLOR_TEXT1_INACTIVE});
+  color: var(${UI.COLOR_TEXT1});
   gap: 4px;
   font-weight: inherit;
   line-height: 1;
@@ -66,7 +66,7 @@ export const Link = styled(NavLink)`
   }
 
   > svg > path {
-    fill: var(${UI.COLOR_TEXT1_INACTIVE});
+    fill: var(${UI.COLOR_TEXT1});
   }
 `
 
@@ -83,15 +83,19 @@ export const Wrapper = styled.div`
   }
 `
 
-export const MenuItem = styled.div<{ isActive?: boolean }>`
+export const MenuItem = styled.div<{ isActive?: boolean; isDropdownVisible: boolean }>`
   display: flex;
   align-items: center;
-  font-size: 14px;
-  font-weight: 500;
+  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'};
+  padding: ${({ theme }) => theme.isInjectedWidgetMode ? '7px 0' : '5px 10px'};
   background: transparent;
-  transition: background 0.2 ease-in-out;
+  transition: background 0.2s ease-in-out;
+
+  &:hover {
+    background: var(${UI.COLOR_GREY});
+  }
 
   ${({ isActive }) =>
     isActive &&
@@ -105,6 +109,12 @@ export const MenuItem = styled.div<{ isActive?: boolean }>`
       ${Link} > ${Badge} {
         display: none;
       }
+  `}
+
+  ${({ isDropdownVisible }) =>
+    isDropdownVisible &&
+    css`
+      padding: 7px 10px;
     `}
 `
 
@@ -117,7 +127,7 @@ export const SelectMenu = styled.div`
   z-index: 100;
   left: 0;
   top: 0;
-  padding: 24px;
+  padding: 16px;
   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/trade/containers/TradeWidget/styled.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
index 5f34e7c452..3ebb88ae0a 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
@@ -26,7 +26,7 @@ export const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0;
+  padding: ${({ theme }) => theme.isInjectedWidgetMode ? '0 7px' : '0 5px 0 0'};
   margin: 0;
 `
 

From 3b7643324eefc0e67448a9a985a8ece58754bb73 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Mon, 9 Oct 2023 17:16:05 +0100
Subject: [PATCH 09/26] feat: general styling

---
 .../ConfirmationPendingContent/styled.tsx     | 10 +++++++++-
 .../SearchModal/CurrencyList/styled.ts        | 15 ++++++++++++---
 .../legacy/components/SearchModal/styleds.tsx | 19 ++++++++++---------
 .../src/legacy/components/Tokens/styled.ts    |  8 ++++----
 .../TransactionConfirmationModal/styled.ts    | 10 +++++++++-
 5 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx b/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx
index c9640e8c95..eabdfe0f55 100644
--- a/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx
+++ b/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 {
diff --git a/apps/cowswap-frontend/src/legacy/components/SearchModal/CurrencyList/styled.ts b/apps/cowswap-frontend/src/legacy/components/SearchModal/CurrencyList/styled.ts
index 610ead735d..3229d8b66b 100644
--- a/apps/cowswap-frontend/src/legacy/components/SearchModal/CurrencyList/styled.ts
+++ b/apps/cowswap-frontend/src/legacy/components/SearchModal/CurrencyList/styled.ts
@@ -75,17 +75,26 @@ export const Wrapper = styled.div`
       `};
     }
   }
+
   ${StyledLogo} {
-    height: 36px;
-    width: 36px;
-    border-radius: 36px;
+    --size: 36px;
+    height: var(--size);
+    width: var(--size);
+    border-radius: var(--size);
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      --size: 32px;
+    `};
   }
+
   ${TagLink} {
     color: var(${UI.COLOR_TEXT1});
   }
+
   ${LightGreyCard} {
     background: var(${UI.COLOR_CONTAINER_BG_01});
   }
+
   ${LightGreyCard} ${RowFixed} > div {
     color: var(${UI.COLOR_TEXT1});
   }
diff --git a/apps/cowswap-frontend/src/legacy/components/SearchModal/styleds.tsx b/apps/cowswap-frontend/src/legacy/components/SearchModal/styleds.tsx
index 652b80ed9c..7432e5c17e 100644
--- a/apps/cowswap-frontend/src/legacy/components/SearchModal/styleds.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/SearchModal/styleds.tsx
@@ -49,23 +49,24 @@ export const SearchInput = styled.input`
   align-items: center;
   width: 100%;
   white-space: nowrap;
-  background: none;
   border: none;
   outline: none;
-  border-radius: 20px;
-  color: var(${UI.COLOR_TEXT1});
   border-style: solid;
-  border: 1px solid ${({ theme }) => theme.bg3};
-  -webkit-appearance: none;
-
-  font-size: 18px;
+  background: var(${UI.COLOR_GREY});
+  color: var(${UI.COLOR_TEXT1});
+  border: 1px solid var(${UI.COLOR_BORDER});
+  appearance: none;
+  font-size: 16px;
+  border-radius: 12px;
 
   ::placeholder {
-    color: ${({ theme }) => theme.text3};
+    color: var(${UI.COLOR_TEXT1});
+    opacity: 0.7;
   }
+
   transition: border 100ms;
   :focus {
-    border: 1px solid ${({ theme }) => theme.primary1};
+    border: 1px solid var(${UI.COLOR_LINK});
     outline: none;
   }
 `
diff --git a/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts b/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts
index f0eb8101d0..76d5f28a16 100644
--- a/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts
+++ b/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts
@@ -16,7 +16,8 @@ export const TokenSearchInput = styled.input`
   align-self: flex-end;
   box-shadow: none;
   background: var(${UI.COLOR_GREY});
-  border: 1px solid ${({ theme }) => theme.bg1};
+  color: var(${UI.COLOR_TEXT1});
+  border: 1px solid var(${UI.COLOR_BORDER});
   border-radius: 21px;
   transition: background 0.2s ease-in-out, max-width 0.2s ease-in-out;
   appearance: none;
@@ -26,7 +27,6 @@ export const TokenSearchInput = styled.input`
 
   &:focus {
     max-width: 500px;
-    background: var(${UI.COLOR_CONTAINER_BG_01});
     outline: 0;
 
     ${({ theme }) => theme.mediaWidth.upToMedium`
@@ -35,7 +35,7 @@ export const TokenSearchInput = styled.input`
   }
 
   &::placeholder {
-    font-size: 14px !important;
+    font-size: inherit;
     color: ${({ theme }) => transparentize(0.5, theme.darkMode ? theme.white : theme.text1)};
   }
 
@@ -88,7 +88,7 @@ export const ResponsiveLogo = styled(CurrencyLogo)`
     width: 21px;
     height: 21px;
     border-radius: 21px;
-  `};
+  `}
 `
 
 export const Label = styled.div<{ end?: number }>`
diff --git a/apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/styled.ts b/apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/styled.ts
index 13a5b0eacb..7a9b192d36 100644
--- a/apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/styled.ts
+++ b/apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/styled.ts
@@ -312,11 +312,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 {

From a343871ecd2d9e6f886360b46ff002c4ddcb77d2 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Tue, 10 Oct 2023 11:17:20 +0100
Subject: [PATCH 10/26] feat: connect wallet internal

---
 .../src/common/hooks/useOrdersPanel.ts        | 25 ++++++++++
 .../legacy/components/ErrorBoundary/index.tsx |  1 -
 .../src/legacy/components/Header/index.tsx    | 49 ++++++++++---------
 .../src/legacy/components/Header/styled.tsx   |  8 ++-
 .../trade/containers/TradeWidget/index.tsx    | 15 +++++-
 5 files changed, 67 insertions(+), 31 deletions(-)
 create mode 100644 apps/cowswap-frontend/src/common/hooks/useOrdersPanel.ts

diff --git a/apps/cowswap-frontend/src/common/hooks/useOrdersPanel.ts b/apps/cowswap-frontend/src/common/hooks/useOrdersPanel.ts
new file mode 100644
index 0000000000..28ddcafe61
--- /dev/null
+++ b/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,
+  };
+};
diff --git a/apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx b/apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx
index ef462a670d..6cca9b4af0 100644
--- a/apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx
@@ -133,7 +133,6 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren, Er
 
             {!isInjectedWidget() &&
               <HeaderWrapper>
-                <h1>Test!!!!!!!!!!!!!</h1>
                 <HeaderRow marginRight="0">
                   <a href={Routes.HOME}>
                     <UniIcon>
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
index ced341809e..d0e6a9d800 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
@@ -29,6 +29,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,6 +51,25 @@ const CHAIN_CURRENCY_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.GNOSIS_CHAIN]: 'xDAI',
 }
 
+// Todo: fix types
+export const AccountElementComponent = ({ 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}>
+      {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()
@@ -57,8 +78,6 @@ export default function Header() {
   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 +86,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()
 
@@ -140,14 +152,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 +168,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>
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx b/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
index 0bdfd8fef0..f4c7624137 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
@@ -329,7 +329,7 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
       padding: 28px 10px;
       color: var(${UI.COLOR_TEXT1});
       border-bottom: 1px solid ${({ theme }) => transparentize(0.9, theme.text1)};
-    `};
+    `}
 
     > svg > path {
       fill: var(${UI.COLOR_TEXT2});
@@ -356,7 +356,7 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
     &.expanded + ${MenuContent} {
       ${({ theme }) => theme.mediaWidth.upToLarge`
         border: 0;
-      `};
+      `}
     }
 
     &.ACTIVE {
@@ -418,9 +418,7 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
     -webkit-overflow-scrolling: touch; // iOS scroll fix
     transform: translate3d(0,0,0); // iOS scroll fix
 
-    ${
-      isMobileMenuOpen &&
-      css`
+    ${isMobileMenuOpen && css`
         display: flex;
       `
     }
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 6cd2190a5c..5cdb66206e 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
@@ -6,8 +6,10 @@ import { useIsSafeWallet, useWalletDetails, useWalletInfo } from '@cowprotocol/w
 
 import { t } from '@lingui/macro'
 
+import { AccountElementComponent } from 'legacy/components/Header'
 import { PriceImpact } from 'legacy/hooks/usePriceImpact'
 
+import { OrdersPanel } from 'modules/account/containers/OrdersPanel'
 import { TradeWidgetLinks } from 'modules/application/containers/TradeWidgetLinks'
 import { SetRecipientProps } from 'modules/swap/containers/SetRecipient'
 import { useIsWrapOrUnwrap } from 'modules/trade/hooks/useIsWrapOrUnwrap'
@@ -15,7 +17,9 @@ import { RecipientAddressUpdater } from 'modules/trade/updaters/RecipientAddress
 import { TradeFormValidationUpdater } from 'modules/tradeFormValidation'
 import { TradeQuoteUpdater } from 'modules/tradeQuote'
 
+import { useCategorizeRecentActivity } from 'common/hooks/useCategorizeRecentActivity'
 import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetworkUnsupported'
+import { useOrdersPanel } from 'common/hooks/useOrdersPanel'
 import { useThrottleFn } from 'common/hooks/useThrottleFn'
 import { CurrencyArrowSeparator } from 'common/pure/CurrencyArrowSeparator'
 import { CurrencyInputPanel, CurrencyInputPanelProps } from 'common/pure/CurrencyInputPanel'
@@ -30,6 +34,7 @@ import { PriceImpactUpdater } from '../../updaters/PriceImpactUpdater'
 import { WrapFlowActionButton } from '../WrapFlowActionButton'
 import { WrapNativeModal } from '../WrapNativeModal'
 
+
 export interface TradeWidgetActions {
   onCurrencySelection: CurrencyInputPanelProps['onCurrencySelection']
   onUserInput: CurrencyInputPanelProps['onUserInput']
@@ -123,7 +128,10 @@ export function TradeWidget(props: TradeWidgetProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const isMenuDropdown = isInjectedWidget()
+  const isInjectedWidgetMode = isInjectedWidget()
+
+  const { pendingActivity } = useCategorizeRecentActivity()
+  const { isOrdersPanelOpen, handleOpenOrdersPanel, handleCloseOrdersPanel } = useOrdersPanel()
 
   return (
     <styledEl.Container id={id}>
@@ -141,7 +149,8 @@ export function TradeWidget(props: TradeWidgetProps) {
       <styledEl.Container id={id}>
         <styledEl.ContainerBox>
           <styledEl.Header>
-            <TradeWidgetLinks isDropdown={isMenuDropdown} />
+            <TradeWidgetLinks isDropdown={isInjectedWidgetMode} />
+            {isInjectedWidgetMode && <AccountElementComponent pendingActivity={pendingActivity} handleOpenOrdersPanel={handleOpenOrdersPanel} />}
             {!lockScreen && settingsWidget}
           </styledEl.Header>
 
@@ -196,6 +205,8 @@ export function TradeWidget(props: TradeWidgetProps) {
           )}
         </styledEl.ContainerBox>
       </styledEl.Container>
+
+      {isOrdersPanelOpen && <OrdersPanel handleCloseOrdersPanel={handleCloseOrdersPanel} />}
     </styledEl.Container>
   )
 }

From fe896959db16fd1887c17a7d5e910e6f48c1198c Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Tue, 10 Oct 2023 13:47:29 +0100
Subject: [PATCH 11/26] feat: connect wallet internal

---
 .../src/assets/icon/wallet.svg                |  1 +
 .../src/common/constants/theme.ts             |  2 +
 .../src/legacy/components/Copy/CopyMod.tsx    |  5 +-
 .../src/legacy/components/Header/index.tsx    |  2 +-
 .../src/legacy/components/Header/styled.tsx   | 91 +++++++++----------
 .../components/Settings/SettingsMod.tsx       |  7 +-
 .../src/legacy/components/Settings/index.tsx  |  7 +-
 .../src/legacy/theme/baseTheme.tsx            |  2 +
 .../trade/containers/TradeWidget/styled.tsx   | 47 ++++++++++
 .../wallet/pure/Web3StatusInner/index.tsx     |  5 +
 10 files changed, 111 insertions(+), 58 deletions(-)
 create mode 100644 apps/cowswap-frontend/src/assets/icon/wallet.svg

diff --git a/apps/cowswap-frontend/src/assets/icon/wallet.svg b/apps/cowswap-frontend/src/assets/icon/wallet.svg
new file mode 100644
index 0000000000..2833ba1b63
--- /dev/null
+++ b/apps/cowswap-frontend/src/assets/icon/wallet.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.722 9.722c.646 0 1.167-.52 1.167-1.166 0-.646-.521-1.167-1.167-1.167-.645 0-1.166.521-1.166 1.167 0 .645.52 1.166 1.166 1.166ZM3.112 0h7.777c.863 0 1.555.7 1.555 1.556V3.11c.864 0 1.556.7 1.556 1.556v7.777A1.55 1.55 0 0 1 12.444 14H3.111A3.11 3.11 0 0 1 0 10.889V3.11A3.11 3.11 0 0 1 3.111 0Zm7.777 3.111V1.556H3.11c-.855 0-1.555.7-1.555 1.555v.42c.458-.264.987-.42 1.555-.42h7.778ZM1.556 10.89c0 .863.7 1.555 1.555 1.555h9.333V4.667H3.111c-.855 0-1.555.7-1.555 1.555v4.667Z" fill="#0F2C61" fill-opacity=".6"/></svg>
\ No newline at end of file
diff --git a/apps/cowswap-frontend/src/common/constants/theme.ts b/apps/cowswap-frontend/src/common/constants/theme.ts
index 3fb31faf81..086d14bf8e 100644
--- a/apps/cowswap-frontend/src/common/constants/theme.ts
+++ b/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_COLOR_NORMAL = '--cow-icon-color-normal',
 
   // States
diff --git a/apps/cowswap-frontend/src/legacy/components/Copy/CopyMod.tsx b/apps/cowswap-frontend/src/legacy/components/Copy/CopyMod.tsx
index 25d9bea369..22834dc072 100644
--- a/apps/cowswap-frontend/src/legacy/components/Copy/CopyMod.tsx
+++ b/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,
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
index d0e6a9d800..d205d3287d 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
@@ -51,7 +51,7 @@ const CHAIN_CURRENCY_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.GNOSIS_CHAIN]: 'xDAI',
 }
 
-// Todo: fix types
+// Todo: fix 'any' types
 export const AccountElementComponent = ({ pendingActivity, handleOpenOrdersPanel }: any) => {
   const { account, chainId } = useWalletInfo()
   const isChainIdUnsupported = useIsProviderNetworkUnsupported()
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx b/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
index f4c7624137..24d5e59293 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
@@ -58,6 +58,22 @@ export const BalanceTextUni = styled(Text)`
   `};
 `
 
+export const BalanceText = styled(BalanceTextUni)`
+  font-weight: 500;
+  font-size: 13px;
+  padding: 0 6px 0 12px;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    overflow: hidden;
+    max-width: 100px;
+    text-overflow: ellipsis;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
+`
+
 export const AccountElementUni = styled.div<{ active: boolean }>`
   display: flex;
   flex-direction: row;
@@ -97,6 +113,27 @@ export const StyledNavLinkUni = styled(NavLink)`
   }
 `
 
+export const AccountElement = styled(AccountElementUni)<{ active: boolean }>`
+  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg1)};
+  border-radius: 21px;
+  border: 2px solid transparent;
+  transition: border 0.2s ease-in-out;
+  pointer-events: auto;
+  width: auto;
+
+  &:hover {
+    border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)};
+  }
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    height: 100%;
+  `}
+
+  ${BalanceText} {
+    min-width: initial;
+  }
+`
+
 export const StyledMenuButton = styled.button`
   position: relative;
   width: 100%;
@@ -184,22 +221,6 @@ export const StyledNavLink = styled(StyledNavLinkUni)`
   }
 `
 
-export const BalanceText = styled(BalanceTextUni)`
-  font-weight: 500;
-  font-size: 13px;
-  padding: 0 6px 0 12px;
-
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    overflow: hidden;
-    max-width: 100px;
-    text-overflow: ellipsis;
-  `};
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    display: none;
-  `};
-`
-
 export const HeaderControls = styled(HeaderControlsUni)`
   justify-content: flex-end;
   gap: 12px;
@@ -313,7 +334,6 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
     outline: 0;
     margin: 0 4px;
     padding: 8px 12px;
-    background: 0;
     border: 0;
     cursor: pointer;
     background: transparent;
@@ -396,16 +416,13 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
     ${({ theme }) => theme.mediaWidth.upToLarge`
       display: none;
     `};
-  }}
+  }
 
   ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge`
-    display: none;
+    display: ${isMobileMenuOpen ? 'flex' : 'none'};
     width: 100%;
     height: 100%;
     position: fixed;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-    align-items: flex-start;
     top: 0;
     left: 0;
     bottom: 0;
@@ -413,15 +430,12 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
     background: var(${UI.COLOR_CONTAINER_BG_01});
     outline: 0;
     padding: 60px 8px;
-    overflow-x: hidden;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch; // iOS scroll fix
     transform: translate3d(0,0,0); // iOS scroll fix
-
-    ${isMobileMenuOpen && css`
-        display: flex;
-      `
-    }
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
   `};
 `
 
@@ -498,27 +512,6 @@ export const CustomLogoImg = styled.img`
   height: 100%;
 `
 
-export const AccountElement = styled(AccountElementUni)<{ active: boolean }>`
-  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg1)};
-  border-radius: 21px;
-  border: 2px solid transparent;
-  transition: border 0.2s ease-in-out;
-  pointer-events: auto;
-  width: auto;
-
-  &:hover {
-    border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)};
-  }
-
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    height: 100%;
-  `}
-
-  ${BalanceText} {
-    min-width: initial;
-  }
-`
-
 export const HeaderRow = styled(RowFixed)`
   ${({ theme }) => theme.mediaWidth.upToMedium`
    width: 100%;
diff --git a/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx b/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx
index 02b4968860..7de384b883 100644
--- a/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx
@@ -28,8 +28,9 @@ import { ExpertModeModal } from 'common/pure/ExpertModeModal'
 import { SettingsTabProp } from './index'
 
 export const StyledMenuIcon = styled(Settings)`
-  height: 20px;
-  width: 20px;
+  --size: var(${UI.ICON_SIZE_NORMAL});
+  height: var(--size);
+  width: var(--size);
 
   > * {
     stroke: var(${UI.COLOR_TEXT2});
@@ -48,7 +49,7 @@ export const StyledMenuButton = styled.button`
   margin: 0;
   padding: 0;
   border-radius: 0.5rem;
-  height: 20px;
+  height: var(${UI.ICON_SIZE_NORMAL});
 
   :hover,
   :focus {
diff --git a/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx b/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx
index c166d8cf30..f2e7faa645 100644
--- a/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx
@@ -63,8 +63,9 @@ const Settings = styled(SettingsMod)`
   }
 
   ${StyledMenuIcon} {
-    height: 20px;
-    width: 20px;
+    --size: var(${UI.ICON_SIZE_NORMAL});
+    height: var(--size);
+    width: var(--size);
 
     > path,
     > circle {
@@ -79,7 +80,7 @@ const Settings = styled(SettingsMod)`
     animation: expertModeOn 3s normal forwards ease-in-out;
 
     span {
-      font-size: 20px;
+      font-size: var(${UI.ICON_SIZE_NORMAL});
 
       &::after {
         content: '🐮';
diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
index 3fea0ba9db..ef57e93e46 100644
--- a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
+++ b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
@@ -413,6 +413,8 @@ export const UniThemedGlobalStyle = css`
 
     // Icons
     ${UI.ICON_SIZE_NORMAL}: 24px;
+    ${UI.ICON_SIZE_SMALL}: 16px;
+    ${UI.ICON_SIZE_XSMALL}: 14px;
     ${UI.ICON_COLOR_NORMAL}: var(${UI.COLOR_TEXT1});
 
     // [STATE] Information (light blue)
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
index 3ebb88ae0a..dc01d4bbcc 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
@@ -1,6 +1,10 @@
 import styled from 'styled-components/macro'
 
+import { AccountElement } from 'legacy/components/Header/styled'
+
 import { SetRecipient } from 'modules/swap/containers/SetRecipient'
+import { Wrapper as AccountWrapper } from 'modules/wallet/pure/Web3StatusInner/styled'
+import { Web3StatusConnect } from 'modules/wallet/pure/Web3StatusInner/styled'
 
 import { UI } from 'common/constants/theme'
 
@@ -28,6 +32,49 @@ export const Header = styled.div`
   align-items: center;
   padding: ${({ theme }) => theme.isInjectedWidgetMode ? '0 7px' : '0 5px 0 0'};
   margin: 0;
+
+  ${AccountElement} {
+    margin: 0 20px 0 auto;
+
+    &:hover {
+      border-color: transparent;
+      background: var(${UI.COLOR_GREY});
+    }
+  }
+
+  ${AccountElement} > ${AccountWrapper} {
+    height: initial;
+  }
+
+  ${AccountElement} ${Web3StatusConnect} {
+    margin: 0;
+    padding: 0;
+    background: 0;
+    border: 0;
+    font-size: 13px;
+    font-weight: var(${UI.FONT_WEIGHT_MEDIUM});
+    color: var(${UI.COLOR_TEXT2});
+    transition: color 0.2s ease-in-out;
+    gap: 6px;
+
+    > svg {
+      --size: var(${UI.ICON_SIZE_SMALL});
+      height: var(--size);
+      width: var(--size);
+      margin: 0;
+    }
+
+    &:hover {
+      color: var(${UI.COLOR_TEXT1});
+    }
+  }
+
+  ${AccountElement} ${Web3StatusConnect} > p {
+    color: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    margin: 0;
+  }
 `
 
 export const CurrencySeparatorBox = styled.div<{ withRecipient: boolean; compactView: boolean }>`
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 0a8a9affdc..9c17e88b09 100644
--- a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx
+++ b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx
@@ -1,8 +1,11 @@
 import { shortenAddress } from '@cowprotocol/common-utils'
+import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { Loader, RowBetween } from '@cowprotocol/ui'
 import { ConnectionType } from '@cowprotocol/wallet'
 
 import { Trans } from '@lingui/macro'
+import ICON_WALLET from 'assets/icon/wallet.svg'
+import SVG from 'react-inlinesvg'
 
 import { NetworkIcon, Text, Web3StatusConnect, Web3StatusConnected, Web3StatusError } from './styled'
 
@@ -23,6 +26,7 @@ export function Web3StatusInner(props: Web3StatusInnerProps) {
   const { account, pendingCount, chainId, error, ensName, connectionType, connectWallet } = props
 
   const hasPendingTransactions = !!pendingCount
+  const isInjectedWidgetMode = isInjectedWidget()
 
   if (!chainId) {
     return null
@@ -64,6 +68,7 @@ export function Web3StatusInner(props: Web3StatusInnerProps) {
       <Text>
         <Trans>Connect wallet</Trans>
       </Text>
+      {isInjectedWidgetMode && <SVG src={ICON_WALLET} title="Wallet" /> }
     </Web3StatusConnect>
   )
 }

From f931b09ec49e64b3da92f8d98c3dcb21bbb03654 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Tue, 10 Oct 2023 16:47:39 +0100
Subject: [PATCH 12/26] feat: connect wallet internal

---
 .../cowswap-frontend/src/legacy/components/Header/index.tsx | 3 ++-
 .../src/modules/trade/containers/TradeWidget/styled.tsx     | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
index d205d3287d..581b097f3f 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
@@ -57,10 +57,11 @@ export const AccountElementComponent = ({ pendingActivity, handleOpenOrdersPanel
   const isChainIdUnsupported = useIsProviderNetworkUnsupported()
   const nativeToken = CHAIN_CURRENCY_LABELS[chainId] || 'ETH'
   const userEthBalance = useNativeCurrencyBalances(account ? [account] : [])?.[account ?? '']
+  const isInjectedWidgetMode = isInjectedWidget()
 
   return (
     <AccountElement active={!!account} onClick={handleOpenOrdersPanel}>
-      {account && !isChainIdUnsupported && userEthBalance && chainId && (
+      {!isInjectedWidgetMode && account && !isChainIdUnsupported && userEthBalance && chainId && (
         <BalanceText>
           <TokenAmount amount={userEthBalance} tokenSymbol={{ symbol: nativeToken }} />
         </BalanceText>
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
index dc01d4bbcc..a528a2562a 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
@@ -4,7 +4,7 @@ import { AccountElement } from 'legacy/components/Header/styled'
 
 import { SetRecipient } from 'modules/swap/containers/SetRecipient'
 import { Wrapper as AccountWrapper } from 'modules/wallet/pure/Web3StatusInner/styled'
-import { Web3StatusConnect } from 'modules/wallet/pure/Web3StatusInner/styled'
+import { Web3StatusConnect, Web3StatusConnected } from 'modules/wallet/pure/Web3StatusInner/styled'
 
 import { UI } from 'common/constants/theme'
 
@@ -75,6 +75,10 @@ export const Header = styled.div`
     font-size: inherit;
     margin: 0;
   }
+
+  ${AccountElement} ${Web3StatusConnected} {
+    padding: 6px;
+  }
 `
 
 export const CurrencySeparatorBox = styled.div<{ withRecipient: boolean; compactView: boolean }>`

From 9180d5eb2c10cc4e1e13ce20f97dd6a7f40e4ecb Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Tue, 10 Oct 2023 18:07:09 +0100
Subject: [PATCH 13/26] feat: widget configurator app

---
 apps/widget-configurator-e2e/.eslintrc.json   |  10 +++
 .../widget-configurator-e2e/cypress.config.ts |   8 ++
 apps/widget-configurator-e2e/project.json     |  33 ++++++++
 .../widget-configurator-e2e/src/e2e/app.cy.ts |  13 +++
 .../src/fixtures/example.json                 |   4 +
 .../src/support/app.po.ts                     |   1 +
 .../src/support/commands.ts                   |  33 ++++++++
 .../src/support/e2e.ts                        |  17 ++++
 apps/widget-configurator-e2e/tsconfig.json    |  10 +++
 apps/widget-configurator/.eslintrc.json       |  18 ++++
 apps/widget-configurator/index.html           |  15 ++++
 apps/widget-configurator/project.json         |  78 ++++++++++++++++++
 apps/widget-configurator/public/favicon.ico   | Bin 0 -> 15086 bytes
 apps/widget-configurator/src/app/app.spec.tsx |  15 ++++
 apps/widget-configurator/src/app/app.tsx      |  19 +++++
 .../src/app/configurator/index.tsx            |  16 ++++
 .../src/app/configurator/styled.ts            |  33 ++++++++
 apps/widget-configurator/src/assets/.gitkeep  |   0
 apps/widget-configurator/src/main.tsx         |  68 +++++++++++++++
 apps/widget-configurator/tsconfig.app.json    |  19 +++++
 apps/widget-configurator/tsconfig.json        |  21 +++++
 apps/widget-configurator/tsconfig.spec.json   |  20 +++++
 apps/widget-configurator/vite.config.ts       |  43 ++++++++++
 package.json                                  |   1 +
 24 files changed, 495 insertions(+)
 create mode 100644 apps/widget-configurator-e2e/.eslintrc.json
 create mode 100644 apps/widget-configurator-e2e/cypress.config.ts
 create mode 100644 apps/widget-configurator-e2e/project.json
 create mode 100644 apps/widget-configurator-e2e/src/e2e/app.cy.ts
 create mode 100644 apps/widget-configurator-e2e/src/fixtures/example.json
 create mode 100644 apps/widget-configurator-e2e/src/support/app.po.ts
 create mode 100644 apps/widget-configurator-e2e/src/support/commands.ts
 create mode 100644 apps/widget-configurator-e2e/src/support/e2e.ts
 create mode 100644 apps/widget-configurator-e2e/tsconfig.json
 create mode 100644 apps/widget-configurator/.eslintrc.json
 create mode 100644 apps/widget-configurator/index.html
 create mode 100644 apps/widget-configurator/project.json
 create mode 100644 apps/widget-configurator/public/favicon.ico
 create mode 100644 apps/widget-configurator/src/app/app.spec.tsx
 create mode 100644 apps/widget-configurator/src/app/app.tsx
 create mode 100644 apps/widget-configurator/src/app/configurator/index.tsx
 create mode 100644 apps/widget-configurator/src/app/configurator/styled.ts
 create mode 100644 apps/widget-configurator/src/assets/.gitkeep
 create mode 100644 apps/widget-configurator/src/main.tsx
 create mode 100644 apps/widget-configurator/tsconfig.app.json
 create mode 100644 apps/widget-configurator/tsconfig.json
 create mode 100644 apps/widget-configurator/tsconfig.spec.json
 create mode 100644 apps/widget-configurator/vite.config.ts

diff --git a/apps/widget-configurator-e2e/.eslintrc.json b/apps/widget-configurator-e2e/.eslintrc.json
new file mode 100644
index 0000000000..696cb8b121
--- /dev/null
+++ b/apps/widget-configurator-e2e/.eslintrc.json
@@ -0,0 +1,10 @@
+{
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/widget-configurator-e2e/cypress.config.ts b/apps/widget-configurator-e2e/cypress.config.ts
new file mode 100644
index 0000000000..3e9f34e3f9
--- /dev/null
+++ b/apps/widget-configurator-e2e/cypress.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress'
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset'
+
+export default defineConfig({
+  e2e: nxE2EPreset(__dirname, {
+    bundler: 'vite',
+  }),
+})
diff --git a/apps/widget-configurator-e2e/project.json b/apps/widget-configurator-e2e/project.json
new file mode 100644
index 0000000000..104cd3108e
--- /dev/null
+++ b/apps/widget-configurator-e2e/project.json
@@ -0,0 +1,33 @@
+{
+  "name": "widget-configurator-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/widget-configurator-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/widget-configurator-e2e/cypress.config.ts",
+        "devServerTarget": "widget-configurator:serve:development",
+        "testingType": "e2e"
+      },
+      "configurations": {
+        "production": {
+          "devServerTarget": "widget-configurator:serve:production"
+        },
+        "ci": {
+          "devServerTarget": "widget-configurator:serve-static"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/widget-configurator-e2e/**/*.{js,ts}"]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["widget-configurator"]
+}
diff --git a/apps/widget-configurator-e2e/src/e2e/app.cy.ts b/apps/widget-configurator-e2e/src/e2e/app.cy.ts
new file mode 100644
index 0000000000..9ec65606d8
--- /dev/null
+++ b/apps/widget-configurator-e2e/src/e2e/app.cy.ts
@@ -0,0 +1,13 @@
+import { getGreeting } from '../support/app.po'
+
+describe('widget-configurator', () => {
+  beforeEach(() => cy.visit('/'))
+
+  it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    cy.login('my-email@something.com', 'myPassword')
+
+    // Function helper example, see `../support/app.po.ts` file
+    getGreeting().contains('Welcome widget-configurator')
+  })
+})
diff --git a/apps/widget-configurator-e2e/src/fixtures/example.json b/apps/widget-configurator-e2e/src/fixtures/example.json
new file mode 100644
index 0000000000..294cbed6ce
--- /dev/null
+++ b/apps/widget-configurator-e2e/src/fixtures/example.json
@@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io"
+}
diff --git a/apps/widget-configurator-e2e/src/support/app.po.ts b/apps/widget-configurator-e2e/src/support/app.po.ts
new file mode 100644
index 0000000000..00f556e103
--- /dev/null
+++ b/apps/widget-configurator-e2e/src/support/app.po.ts
@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1')
diff --git a/apps/widget-configurator-e2e/src/support/commands.ts b/apps/widget-configurator-e2e/src/support/commands.ts
new file mode 100644
index 0000000000..270f023ff5
--- /dev/null
+++ b/apps/widget-configurator-e2e/src/support/commands.ts
@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password)
+})
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/apps/widget-configurator-e2e/src/support/e2e.ts b/apps/widget-configurator-e2e/src/support/e2e.ts
new file mode 100644
index 0000000000..185d654ec6
--- /dev/null
+++ b/apps/widget-configurator-e2e/src/support/e2e.ts
@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
diff --git a/apps/widget-configurator-e2e/tsconfig.json b/apps/widget-configurator-e2e/tsconfig.json
new file mode 100644
index 0000000000..cc509a730e
--- /dev/null
+++ b/apps/widget-configurator-e2e/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
+}
diff --git a/apps/widget-configurator/.eslintrc.json b/apps/widget-configurator/.eslintrc.json
new file mode 100644
index 0000000000..a39ac5d057
--- /dev/null
+++ b/apps/widget-configurator/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/widget-configurator/index.html b/apps/widget-configurator/index.html
new file mode 100644
index 0000000000..4a1b431dfb
--- /dev/null
+++ b/apps/widget-configurator/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>CoW Swap: Widget configurator</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- <base href="/" /> -->
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/widget-configurator/project.json b/apps/widget-configurator/project.json
new file mode 100644
index 0000000000..33288c96b7
--- /dev/null
+++ b/apps/widget-configurator/project.json
@@ -0,0 +1,78 @@
+{
+  "name": "widget-configurator",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/widget-configurator/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/apps/widget-configurator"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "widget-configurator:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "widget-configurator:build:development",
+          "hmr": true
+        },
+        "production": {
+          "buildTarget": "widget-configurator:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "preview": {
+      "executor": "@nx/vite:preview-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "widget-configurator:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "widget-configurator:build:development"
+        },
+        "production": {
+          "buildTarget": "widget-configurator:build:production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["coverage/apps/widget-configurator"],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../coverage/apps/widget-configurator"
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/widget-configurator/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "serve-static": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "widget-configurator:build"
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/apps/widget-configurator/public/favicon.ico b/apps/widget-configurator/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..317ebcb2336e0833a22dddf0ab287849f26fda57
GIT binary patch
literal 15086
zcmeI332;<p632UzfWZqabw#Bx7P_!_0dhki0VLs6ku&5D2}uYcfO5%@G2s;D7LY@f
zc(GokAnWR)DHUDuUROCpjmsH4pjZ`wkZ*te^4>U^%p|z7g|#(P)qFEA@4f!_@qOK2
z_lJl}!lhL!VT_U|uN7%8B2iKH??xhDa;*`g{yjTFWHvXn;2s{4R7kH|pKGdy(7z!K
zgftM+Ku7~24TLlh(!g)gz|foI94G^t2^IO$uvX$3(OR0<_5L2sB)lMAMy|+`xodJ{
z_Uh_1m)~h?a;2W{dmhM;u!YGo=)OdmId_B<%^V^{o<UMHeV`Og=_iGE^^rgN-XH8c
zcrSonhm1cBZ!ITAw2}V7o^`H|ik40(UF5*b;bPY1iFs&D4f>vI@y`7^g1_V9G}*f#
zNzA<oVrCB$Q*?(I_ibXP4UktS^^r?_?+^Ap7=Cnb(EW*on`_5Eu9uvb8!Jzxb`g^j
zEoNy(P#NAphQ^8mTQpjkC7Y1JEKU`3KQhc4A!g=KG1%Z+_pQ=17+(MDwc$@_BPT}I
zjelf*FFBSID`t2HG2{A(S({r!|7w#;sOaIb;$obLPn|>tvou}I!W1#{M^@ROc(BZ!
z+F!!_aR&Px3_reO(EW+TwlW~tv*2zr?iP7(d~a~yA|@*a89IUke+c472NXM0wiX{-
zl`UrZC^1XYyf%1u)-Y)jj9;MZ!SLfd2Hl?o|80Su%Z?To_=^g_Jt0oa#CT*tjx>BI
z16wec&AOWNK<#i0Qd=1O$fymLRoUR*%;h@*@v7}wApDl^w*h}!sYq%kw+DKDY)@&A
z@9$ULEB3qkR#85`lb8#WZw=@})#kQig9oqy^I$dj&k4jU&^2(M3q{n1AKeGUKPFbr
z1^<)aH;VsG@J|B&l>UtU#Ejv3GIqERzYgL@UOAWtW<{p#zy`WyJgpCy8$c_e%wYJL
zyGHRRx38)HyjU3y{-4z6)pzb>&Q1pR)B&u01F-|&Gx4EZWK$nkUkOI|(D4UHOXg_-
zw{OBf!oWQUn)Pe(=f=nt=zkmdjpO^o8ZZ9o_|4tW1ni+Un9iCW47*-ut$KQOww!;u
z`0q)$s6IZO!~9$e_P9X!hqLxu`fpcL|2f^I5d4*a@Dq28;@2271v_N+5HqYZ>x;&O
z05*7JT)mUe&%S0@UD)@&8SmQrMtsDfZT;fkdA!r(S=}Oz>iP)w=W508=Rc#nNn7ym
z1;42c|8($ALY8#a({%1#IXbWn9-Y|0eDY$_L&j{63?{?AH{);Ezcqf<!MFQ9x99b^
z@1DK4rAh7R(%7o_Ukrp_*B^iXAJs(~WJSwk+1;6+e)#eKWB7lW`oH?lRCGTU-%svF
zZa{1eHiz~4`%lFm`)1d&`Q<xTH!a_>ydD$@-B`Y3<%IIj7S7rK_N}je^=dEk%JQ4c
z!tBdTPE3Tse;oYF>cnrapWq*o)m47X1`~6@(!Y29#>-#8zm&LXrXa(3=7Z)ElaQqj
z-#0JJy3Fi(C#Rx(`=VXtJ63E2_bZGCz+QRa{W0e2(m3<b<R<WQnM~H@G~%P;$A5kX
zdr~m`<Zaga!@akqca}>sI?LOcUBx)~^YCqZ{XEPX)C>G>U4tfqeH8L(3|pQR*zbL1
zT9e~4Tb5p9_G}$y4t`i*4t_Mr9QYvL9C&Ah*}t`q*}S+VYh0M6GxTTSXI)hMpMpIq
zD1ImYqJLzbj0}~EpE-aH#VCH_udYEW#`P2zYmi&xSPs_{n6tBj=MY|-XrA;SGA_>y
zGtU$?HXm$gYj*!N)_nQ59%lQdXtQZS3*#PC-{iB_sm+ytD*7j`D*k(P&IH2GHT}Eh
z5697eQECVIGQAUe#eU2I!yI<zz;0~NQr|N^PTU%|61cC99Bv=_KdCmbW0yDoS&$NL
zmX1EpEE#=)nKLrdOzGz`6PQPeUwJD36mmpxeE`0zYQ<kQhbyqvzLfS-seXqK8MUG9
zLlxLyyuL#}xjn?4!rv0%QA-Z}Ik<a5n=IY4E@=+ED3w^9C}z%Zdk>&%0CP#>%6MWV
z@zS!p@+Y1i1b^QuuEF*1<Us0cJY(4nAF}4q=qekOvJQFo807!%A>3CuB<Ol`0^E7Z
zm%Qg1;_@p_?ztejY7aAu{Qn-^!+@VXn3b3498=%1e7}?I2TQ^o*He<VKf(OR$A_%>
zu69dve5k7&Wgb+^s|UB08Dr3u`h@yM0NTj4h7MnHo-4@xmyr7(*4$rpPwsCDZ@2be
zRz9V^GnV;;?^Lk%ynzq&K(Aix`mWmW`^152Hoy<pVuSh)79DeX%8W&6LDw72`#byI
zuiwcz>$CTYVehpD-S1-W^#k#{0^L`V6CN+<CFS_e7W_3E{FnMaufOZUZ|?(su|Y>E
z!w+xte;2vu4AmVNEFUOBmrBL>6MK@!O2*N|2=d|Y;oN&A&qv=qKn73lD<dYxNnd>D
zI(+oJAdgv>Yr}8(&@ZuAZE%XUXmX(U!N+Z_sjL<1vjy1R+1IeHt`79fnYdOL{$ci7
z%3f0A*;Zt@ED&Gjm|OFTYBDe%bbo*xXAQsFz+Q`fVBH!N2)kaxN8P$c>sp~QXnv>b
zwq=W3&Mtmih7xkR$YA)1Yi?avHNR6C99!u6fh=cL|KQ&PwF!n@ud^n(HNI<nwsH(x
z4qKM9iN6x;Git-Ge<QzeYkbrg?<<GKYW(VK;@<}TE9%0}y5!azL-V9+a#Y#me~G_7
z_y$7-P`)3H<9Cg?6G#?vr1r=#4jJ;1As-p?v4v7WW|z~i2L^g~=vqhvAq|8y5YoVz
z*MPA;B4>ImHD!h87!i*t?G|p0o+eelJ?B@A64_9%SBhNaJ64EvKgD&%LjLCYnNfc;
znj?%*p@*?dq#NqcQFmmX($wms@CSAr9#>hUR^=I+=<d%GUe;81{*2u{g^cHvbvMet
zq2G9w{o5J4+rJB|kH1xKEr1^d#X#P3T8;P-`h+wP(!lRV1LVP1Lc^g%o06y@-V_L6
z|LdjRj60+cXBkqdN2S;_lHZp*_b*D3i|<dAq12rcshK6-Jy4RVdtC4Q-G78<Kj;TY
z`wo@Xp1QRZ`QN9%Igij|bgX>0B)vvGX%T&#h$kmX*s=^M2E!@N9#m?LhMvz}YB+kd
zG~mbP|D(;{s_#;hsKK9lbVK&Lo734x7SIFJ9<NU=?g-!eQa_AcHCny_gVFO3=-?Ff
zpQ!;E+ZX-$+jXg8|7WNdWKr`tkx%U-6%4aR)Tn2E2!?mH{;IuaYG~T~e~tQ?w-)OE
zPW|o6Uu!aUe`l8Oy~y1R{-0{yNNcxwV92JHv^=wh9W0$_ZxbDS$2peXzVGq<4qx4$
zomY*&*0iVxQCs)&XP+Am{{`BU)INarGA2_)&ZdSk^|op@@Y(}^)ZXuX$RD&e2j7;^
zG=Kioa;ovC-VsBs;~V9#{ao!u<I@&~EHDJ>V_}2$@q?zm^7?*XH94w5Qae{7zOMUF
z^?%F%)c1Y)Q?Iy?I>kn<wOIXdo4@ulwHK&57|S*7*E_zrF3)A2E52%lFF*bMb!l%G
zy}qa;9}evE=KA)}jOrS348HHx%0F5%s4*N@{+9gIUXlNZB|rTz?W4}2#$2t3ivPX3
z;^uwd?pi$L&=(snEZ?=}lJcEvdLR7wt}*oM{;}o3)<4b5xYVk<BCnoLswTf}|6=yn
zO{sT$qO~)vo7wi?jQuw`_Me0u)ZZQ1b=2P*rZqIXUrRoE=(D-o%D3PDQTacMe%kl<
zgvuv8S5vbJvwBt9>w*8gYW#ok|2gdS=YYZLiD=CW|Nj;n^x!<jBV+M}EHEt_<tMvs
z2W)RP+<me6;Lp)!_m%->=S#iJ#`~Ld79+xXpVmUK^B(xO_vO!btA9y7w3L3-0j-y4
z?M-V{%z;JI`bk7yFDcP}OcCd*{Q9S5$iGA7*E1@tfkyjAi!;wP^O71cZ^Ep)qrQ)N
z#wqw0_HS;T7x3y|`P==i3hEwK%|>fZ)c&@kgKO1~5<5xBSk?iZV?KI6&i72H6S9A*
z=U(*e)EqEs?Oc04)V-~K5AUmh|62H4*`UAtItO$O(q5?6jj+K<YInKHn~#h06D6E4
zGY{ug$#47Kv+%ag8gORiMr412_5ZN7{xetf3<>^oD!04r=6#dsxp?~}{`?&sXn#q2
zGuY~7>O2=!u@@Kfu7q=W*4egu@qPMRM>(eyYyaIE<|j%d=iWNdGsx%c!902v#ngNg
z@#U-O_4xN$s_9?(`{>{>7~-6FgWpBpqXb`Ydc3OFL#&I}Irse9F_8R@4zSS*Y*o*B
zXL?6*Aw!AfkNCgcr#*yj&p3ZDe2y>v$>FUdKIy_2N~}6AbHc7gA3`6$g@1o|dE>vz
z4pl(j9;kyMsjaw}lO?(?Xg%4k!5%^<zlDDcygq_<+VnZ&Gf<7VJ+h6sSQqBwlV5;i
zCw{q${^Q$V`LF*641DyQ>t#@5n=WVc&JRa+XT$~#@rldv<HlfUj4u8F@xOCIpO6NA
zy#}i448i{`KGLeNxU7{aE~DpK>N3S1rEpU$;XgxVny7mki3<w%v}zUZDd^bHQ&8C5
zbEMEH-2)Zd6o`w~DKrp8LEbvW|DiWCr<+4vh%GJ2v8))B+*#`1mn3b-AEVjNSn-{>
z-Hh|jUCHrUXuLr!)`w>wgO0N%KTB-1di>cj(x3Ba<?I9X?CUltmc0Kh`u0bO`)SUz
zI`Zt(kjD0x$i3<j4=*8~D%HKjoCGVDSMdD5bnn34<pnTY=seGJdM@*6jf=!2>v`7v
z3G7EIbU$z>`Nad7Rk_&OT-W{;qg)-GXV-aJT#(o<Y^cxkn^`Yg6Fa`(`BTK_6MC*|
zK4(2Nm)J1vqV0R$o7U>zdmnA~Rq3GQ_3mby(>q6Ocb-RgTUhTN)))x>m&eD;$J5Bg
zo&DhY36Yg=J=$Z>t}RJ>o|@hAcwWzN#r(WJ52^g$lh^!63@hh+dR$&_dEGu&^CR*<
z!oFqSqO@>xZ*nC2oiOd0eS*F^IL~W-rsrO`J`ej{=ou_q^_(<$&-3f^<pOjU!=7&~
zXC+=DZ(jt~8+`R|WB7!1Jc_^TdE2d4ZXGA{9G&SoadMXW<Ql&A*O;WS@i_a$QF<>J
z&L^MSYWIe{&pYq&9eGaArA~*kA<MSpHuZ@k$zXI7$6|f&|Gj<JTB<KKxmBbwQL-^L
X*GBfq^a!*Sks)$E_17kl@BRM)`^nwN

literal 0
HcmV?d00001

diff --git a/apps/widget-configurator/src/app/app.spec.tsx b/apps/widget-configurator/src/app/app.spec.tsx
new file mode 100644
index 0000000000..1ea8da5bb1
--- /dev/null
+++ b/apps/widget-configurator/src/app/app.spec.tsx
@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react'
+
+import App from './app'
+
+describe('App', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<App />)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should have a greeting as the title', () => {
+    const { getByText } = render(<App />)
+    expect(getByText(/Welcome widget-configurator/gi)).toBeTruthy()
+  })
+})
diff --git a/apps/widget-configurator/src/app/app.tsx b/apps/widget-configurator/src/app/app.tsx
new file mode 100644
index 0000000000..fa73761096
--- /dev/null
+++ b/apps/widget-configurator/src/app/app.tsx
@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+import { Configurator } from './configurator'
+
+const StyledApp = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+`
+
+export function App() {
+  return (
+    <StyledApp>
+      <Configurator title="widget-configurator" />
+    </StyledApp>
+  )
+}
+
+export default App
diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
new file mode 100644
index 0000000000..001926ce2b
--- /dev/null
+++ b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -0,0 +1,16 @@
+import { Wrapper, Sidebar, Content } from './styled'
+
+export function Configurator({ title }: { title: string }) {
+  return (
+    <Wrapper>
+      <Sidebar>
+        <h1>{title}</h1>
+      </Sidebar>
+
+      <Content>
+        <p>Widget iFrame below:</p>
+        <iframe src="https://swap-dev-git-feat-cow-widget-cowswap.vercel.app/#/1/widget/swap/COW/WETH?sellAmount=1200&amp;theme=light" width="400px" height="640px" title="widget" />
+      </Content>
+    </Wrapper>
+  )
+}
diff --git a/apps/widget-configurator/src/app/configurator/styled.ts b/apps/widget-configurator/src/app/configurator/styled.ts
new file mode 100644
index 0000000000..bf3f9471e8
--- /dev/null
+++ b/apps/widget-configurator/src/app/configurator/styled.ts
@@ -0,0 +1,33 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  height: 100vh;
+  width: 100%;
+`
+
+export const Sidebar = styled.div`
+  display: flex;
+  flex-flow: column wrap;
+  height: 100%;
+  width: 29rem;
+  background: white;
+`
+
+export const Content = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: column wrap;
+  height: 100%;
+  width: auto;
+  flex: 1 1 auto;
+
+  > iframe {
+    border: 0;
+    margin: 0 auto;
+    border-radius: 1.6rem;
+    overflow: hidden;
+  }
+`
diff --git a/apps/widget-configurator/src/assets/.gitkeep b/apps/widget-configurator/src/assets/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/widget-configurator/src/main.tsx b/apps/widget-configurator/src/main.tsx
new file mode 100644
index 0000000000..073c3923a4
--- /dev/null
+++ b/apps/widget-configurator/src/main.tsx
@@ -0,0 +1,68 @@
+import { StrictMode } from 'react'
+import { createGlobalStyle } from 'styled-components';
+
+import * as ReactDOM from 'react-dom/client'
+
+import App from './app/app'
+
+const GlobalStyle = createGlobalStyle`
+  html, input, textarea, button {
+    font-family: 'Inter', sans-serif;
+    font-display: fallback;
+  }
+
+  @supports (font-variation-settings: normal) {
+    html, input, textarea, button {
+      font-family: 'Inter var', sans-serif;
+    }
+  }
+
+  html, body, a, button {
+    margin: 0;
+    padding: 0;
+  }
+
+  html, body, #root {
+    height: 100%;
+    width: 100%;
+  }
+
+  a {
+    color: blue;
+  }
+
+  button {
+    user-select: none;
+  }
+
+  html {  
+    width: 100%;
+    margin: 0;
+    font-size: 62.5%;
+    text-rendering: geometricPrecision;
+    line-height: 10px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    box-sizing: border-box;
+    overscroll-behavior-y: none;
+    scroll-behavior: smooth;
+    font-variant: none;
+    font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    background: linear-gradient(45deg,#EAE9FF 14.64%,#CAE9FF 85.36%);
+    background-attachment: fixed;
+  }
+
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+`;
+
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+root.render(
+  <StrictMode>
+    <GlobalStyle />
+    <App />
+  </StrictMode>
+)
diff --git a/apps/widget-configurator/tsconfig.app.json b/apps/widget-configurator/tsconfig.app.json
new file mode 100644
index 0000000000..d00ef52c40
--- /dev/null
+++ b/apps/widget-configurator/tsconfig.app.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node", "vite/client"]
+  },
+  "files": ["../../node_modules/@nx/react/typings/cssmodule.d.ts", "../../node_modules/@nx/react/typings/image.d.ts"],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/apps/widget-configurator/tsconfig.json b/apps/widget-configurator/tsconfig.json
new file mode 100644
index 0000000000..fdfab6c30f
--- /dev/null
+++ b/apps/widget-configurator/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client", "vitest"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}
diff --git a/apps/widget-configurator/tsconfig.spec.json b/apps/widget-configurator/tsconfig.spec.json
new file mode 100644
index 0000000000..1a35a5d745
--- /dev/null
+++ b/apps/widget-configurator/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "files": ["../../node_modules/@nx/react/typings/cssmodule.d.ts", "../../node_modules/@nx/react/typings/image.d.ts"]
+}
diff --git a/apps/widget-configurator/vite.config.ts b/apps/widget-configurator/vite.config.ts
new file mode 100644
index 0000000000..87d032afe9
--- /dev/null
+++ b/apps/widget-configurator/vite.config.ts
@@ -0,0 +1,43 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  cacheDir: '../../node_modules/.vite/widget-configurator',
+
+  server: {
+    port: 4200,
+    host: 'localhost',
+  },
+
+  preview: {
+    port: 4300,
+    host: 'localhost',
+  },
+
+  plugins: [
+    react(),
+    viteTsConfigPaths({
+      root: '../../',
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [
+  //    viteTsConfigPaths({
+  //      root: '../../',
+  //    }),
+  //  ],
+  // },
+
+  test: {
+    globals: true,
+    cache: {
+      dir: '../../node_modules/.vitest',
+    },
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+  },
+})
diff --git a/package.json b/package.json
index 87f4ad382b..7c3b0ae6e9 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "scripts": {
     "start": "nx run cowswap-frontend:serve",
+    "start-widget": "nx run widget-configurator:serve",
     "preview": "cross-env NODE_OPTIONS=--max-old-space-size=32768 nx run cowswap-frontend:preview",
     "cosmos:export": "cross-env NODE_OPTIONS=--max-old-space-size=32768 nx run cowswap-frontend:cosmos:export",
     "test": "nx run-many -t test --output-style=stream",

From d96c8c77d602cc29197c71cac4c85906de7d13f0 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Wed, 11 Oct 2023 16:17:15 +0100
Subject: [PATCH 14/26] feat: widget configurator app

---
 .../src/app/configurator/index.tsx                  | 13 +++++++++++--
 .../src/app/configurator/styled.ts                  |  1 +
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
index 001926ce2b..7725289775 100644
--- a/apps/widget-configurator/src/app/configurator/index.tsx
+++ b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -5,11 +5,20 @@ export function Configurator({ title }: { title: string }) {
     <Wrapper>
       <Sidebar>
         <h1>{title}</h1>
+        <select>
+          <option value="auto">Auto</option>
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
       </Sidebar>
 
       <Content>
-        <p>Widget iFrame below:</p>
-        <iframe src="https://swap-dev-git-feat-cow-widget-cowswap.vercel.app/#/1/widget/swap/COW/WETH?sellAmount=1200&amp;theme=light" width="400px" height="640px" title="widget" />
+        <iframe
+          src="https://swap-dev-git-widget-ui-5b-cowswap.vercel.app/#/1/widget/swap/COW/WETH?sellAmount=1200&theme=light"
+          width="400px"
+          height="640px"
+          title="widget"
+        />
       </Content>
     </Wrapper>
   )
diff --git a/apps/widget-configurator/src/app/configurator/styled.ts b/apps/widget-configurator/src/app/configurator/styled.ts
index bf3f9471e8..5aed565e98 100644
--- a/apps/widget-configurator/src/app/configurator/styled.ts
+++ b/apps/widget-configurator/src/app/configurator/styled.ts
@@ -13,6 +13,7 @@ export const Sidebar = styled.div`
   height: 100%;
   width: 29rem;
   background: white;
+  box-shadow: rgba(5, 43, 101, 0.06) 0 1.2rem 1.2rem;
 `
 
 export const Content = styled.div`

From c23d531ca90412f6dfe9a0e4343fc3d968c45b1b Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Thu, 12 Oct 2023 12:59:22 +0100
Subject: [PATCH 15/26] feat: widget configurator app

---
 apps/widget-configurator/index.html           |   3 +-
 apps/widget-configurator/src/app/app.tsx      |  22 +-
 .../src/app/configurator/embedDialog.tsx      |  65 ++++
 .../src/app/configurator/index.tsx            | 148 +++++++-
 .../src/app/configurator/styled.ts            |  63 ++--
 apps/widget-configurator/src/main.tsx         | 170 +++++++---
 package.json                                  |   5 +-
 yarn.lock                                     | 321 +++++++++++++++++-
 8 files changed, 673 insertions(+), 124 deletions(-)
 create mode 100644 apps/widget-configurator/src/app/configurator/embedDialog.tsx

diff --git a/apps/widget-configurator/index.html b/apps/widget-configurator/index.html
index 4a1b431dfb..f4a56a3f48 100644
--- a/apps/widget-configurator/index.html
+++ b/apps/widget-configurator/index.html
@@ -4,8 +4,7 @@
     <meta charset="utf-8" />
     <title>CoW Swap: Widget configurator</title>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- <base href="/" /> -->
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   </head>
   <body>
diff --git a/apps/widget-configurator/src/app/app.tsx b/apps/widget-configurator/src/app/app.tsx
index fa73761096..d554b00955 100644
--- a/apps/widget-configurator/src/app/app.tsx
+++ b/apps/widget-configurator/src/app/app.tsx
@@ -1,18 +1,20 @@
-import styled from 'styled-components'
-
+import Box from '@mui/material/Box'
 import { Configurator } from './configurator'
+import { Theme } from '@mui/material/styles';
 
-const StyledApp = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100%;
-`
+const WrapperStyled = (theme: Theme) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  width: '100%',
+  background: theme.palette.background.paper,
+})
 
 export function App() {
   return (
-    <StyledApp>
-      <Configurator title="widget-configurator" />
-    </StyledApp>
+    <Box sx={WrapperStyled}>
+      <Configurator title="CoW Widget" />
+    </Box>
   )
 }
 
diff --git a/apps/widget-configurator/src/app/configurator/embedDialog.tsx b/apps/widget-configurator/src/app/configurator/embedDialog.tsx
new file mode 100644
index 0000000000..87bfdd1ac8
--- /dev/null
+++ b/apps/widget-configurator/src/app/configurator/embedDialog.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Dialog, { DialogProps } from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+export default function EmbedDialog() {
+  const [open, setOpen] = React.useState(false);
+  const [scroll, setScroll] = React.useState<DialogProps['scroll']>('paper');
+
+  const handleClickOpen = (scrollType: DialogProps['scroll']) => () => {
+    setOpen(true);
+    setScroll(scrollType);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const descriptionElementRef = React.useRef<HTMLElement>(null);
+  React.useEffect(() => {
+    if (open) {
+      const { current: descriptionElement } = descriptionElementRef;
+      if (descriptionElement !== null) {
+        descriptionElement.focus();
+      }
+    }
+  }, [open]);
+
+  return (
+    <div>
+      <Button onClick={handleClickOpen('paper')}>{`View Embed Code </>`}</Button>
+      {/* <Button onClick={handleClickOpen('body')}>scroll=body</Button> */}
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        scroll={scroll}
+        aria-labelledby="scroll-dialog-title"
+        aria-describedby="scroll-dialog-description"
+      >
+        <DialogTitle id="scroll-dialog-title">CoW Widget Embed</DialogTitle>
+        <DialogContent dividers={scroll === 'paper'}>
+          <DialogContentText
+            id="scroll-dialog-description"
+            ref={descriptionElementRef}
+            tabIndex={-1}
+          >
+            {[...new Array(50)]
+              .map(
+                () => `<embed type="text/html" src="snippet.html" width="500" height="200">
+                `,
+              )
+              .join('\n')}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={handleClose}>Copy</Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
index 7725289775..6c34594ef5 100644
--- a/apps/widget-configurator/src/app/configurator/index.tsx
+++ b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -1,25 +1,145 @@
-import { Wrapper, Sidebar, Content } from './styled'
+import * as React from 'react'
+import Box from '@mui/material/Box'
+import { ContentStyled, DrawerStyled, WrapperStyled } from './styled'
+import Button from '@mui/material/Button'
+import InputLabel from '@mui/material/InputLabel'
+import MenuItem from '@mui/material/MenuItem'
+import FormControl from '@mui/material/FormControl'
+import Select, { SelectChangeEvent } from '@mui/material/Select'
+import Typography from '@mui/material/Typography'
+import Drawer from '@mui/material/Drawer'
+import Link from '@mui/material/Link'
+import TextField from '@mui/material/TextField'
+import Autocomplete from '@mui/material/Autocomplete'
+import Divider from '@mui/material/Divider'
+import EmbedDialog from './embedDialog'
+import { ColorModeContext } from '../../main';
+import { useTheme } from '@mui/material/styles';
 
 export function Configurator({ title }: { title: string }) {
+  const [activeTheme, setActiveTheme] = React.useState('1')
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(true)
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setActiveTheme(event.target.value)
+  }
+
+  enum Theme {
+    Auto = 1,
+    Light = 2,
+    Dark = 3,
+  }
+
+  const NetworkOptions = ['Ethereum', 'Gnosis Chain']
+
+  const [network, setNetwork] = React.useState<string | null>(NetworkOptions[0])
+  const [networkInput, setNetworkInput] = React.useState(NetworkOptions[0])
+
+  const TokenOptions = ['COW', 'USDC']
+  const [sellToken, setSellToken] = React.useState<string | null>(TokenOptions[0])
+  const [sellTokenInput, setSellTokenInput] = React.useState(TokenOptions[0])
+  const [buyToken, setBuyToken] = React.useState<string | null>(TokenOptions[0])
+  const [buyTokenInput, setBuyTokenInput] = React.useState(TokenOptions[1])
+
+  const theme = useTheme();  
+  const colorMode = React.useContext(ColorModeContext);
+
   return (
-    <Wrapper>
-      <Sidebar>
-        <h1>{title}</h1>
-        <select>
-          <option value="auto">Auto</option>
-          <option value="light">Light</option>
-          <option value="dark">Dark</option>
-        </select>
-      </Sidebar>
-
-      <Content>
+    <Box sx={WrapperStyled}>
+      <Drawer sx={DrawerStyled} variant="persistent" anchor="left" open={isDrawerOpen}>
+        <Typography variant="h6" sx={{ width: '100%', textAlign: 'center', margin: '0 0 1.6rem', fontWeight: 'bold' }}>
+          {title}
+        </Typography>
+
+        <FormControl sx={{ width: '100%' }}>
+          <InputLabel id="select-theme">Theme</InputLabel>
+          <Select
+            labelId="select-theme-label"
+            id="select-theme"
+            value={activeTheme}
+            onChange={handleChange}
+            autoWidth
+            label="Theme"
+            size="small"
+          >
+            <MenuItem value={Theme.Auto}>Auto</MenuItem>
+            <MenuItem value={Theme.Light}>Light</MenuItem>
+            <MenuItem value={Theme.Dark}>Dark</MenuItem>
+          </Select>
+        </FormControl>
+
+        <Divider light />
+
+        <Autocomplete
+          value={network}
+          onChange={(event: any, newValue: string | null) => {
+            setNetwork(newValue)
+          }}
+          inputValue={networkInput}
+          onInputChange={(event, newInputValue) => {
+            setNetworkInput(newInputValue)
+          }}
+          id="controllable-states-demo"
+          options={NetworkOptions}
+          size="small"
+          renderInput={(params) => <TextField {...params} label="Network" />}
+        />
+
+        <Autocomplete
+          value={sellToken}
+          onChange={(event: any, newValue: string | null) => {
+            setSellToken(newValue)
+          }}
+          inputValue={sellTokenInput}
+          onInputChange={(event, newInputValue) => {
+            setSellTokenInput(newInputValue)
+          }}
+          id="controllable-states-demo"
+          options={TokenOptions}
+          size="small"
+          renderInput={(params) => <TextField {...params} label="Sell Token" />}
+        />
+
+        <TextField id="input-sellAmount" label="Sell amount" defaultValue="100000" size="small" />
+
+        <Autocomplete
+          value={buyToken}
+          onChange={(event: any, newValue: string | null) => {
+            setBuyToken(newValue)
+          }}
+          inputValue={buyTokenInput}
+          onInputChange={(event, newInputValue) => {
+            setBuyTokenInput(newInputValue)
+          }}
+          id="buy-token-autocomplete"
+          options={TokenOptions}
+          renderInput={(params) => <TextField {...params} label="Buy Token" size="small" />}
+        />
+
+        <TextField id="input-buyAmount" label="Buy amount" defaultValue="100000" size="small" />
+
+        <Button variant="contained">Update</Button>
+
+        <EmbedDialog />
+
+        <Link href="#hide" onClick={() => setIsDrawerOpen(false)}>
+          Hide configurator
+        </Link>
+
+        <Button variant="contained" onClick={colorMode.toggleColorMode}>
+  Toggle to {theme.palette.mode === 'dark' ? 'Light' : 'Dark'} Mode
+</Button>
+
+      </Drawer>
+
+      <Box sx={ContentStyled}>
         <iframe
           src="https://swap-dev-git-widget-ui-5b-cowswap.vercel.app/#/1/widget/swap/COW/WETH?sellAmount=1200&theme=light"
           width="400px"
           height="640px"
           title="widget"
         />
-      </Content>
-    </Wrapper>
+      </Box>
+    </Box>
   )
 }
diff --git a/apps/widget-configurator/src/app/configurator/styled.ts b/apps/widget-configurator/src/app/configurator/styled.ts
index 5aed565e98..1af1cb5079 100644
--- a/apps/widget-configurator/src/app/configurator/styled.ts
+++ b/apps/widget-configurator/src/app/configurator/styled.ts
@@ -1,34 +1,37 @@
-import styled from 'styled-components'
+import { Theme } from '@mui/material/styles';
 
-export const Wrapper = styled.div`
-  display: flex;
-  flex-flow: row wrap;
-  height: 100vh;
-  width: 100%;
-`
+export const DrawerStyled = (theme: Theme) => ({
+  width: '29rem',
+  flexShrink: 0,
+  '& .MuiDrawer-paper': {
+    width: '29rem',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexFlow: 'column wrap',
+    gap: '1.6rem',
+    height: '100%',
+    border: 0,
+    background: theme.palette.secondary.main,
+    boxShadow: 'rgba(5, 43, 101, 0.06) 0 1.2rem 1.2rem',
+    padding: '1.6rem',
+  },
+});
 
-export const Sidebar = styled.div`
-  display: flex;
-  flex-flow: column wrap;
-  height: 100%;
-  width: 29rem;
-  background: white;
-  box-shadow: rgba(5, 43, 101, 0.06) 0 1.2rem 1.2rem;
-`
+export const ContentStyled = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexFlow: 'column wrap',
+  height: '100%',
+  width: 'auto',
+  flex: '1 1 auto',
 
-export const Content = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-flow: column wrap;
-  height: 100%;
-  width: auto;
-  flex: 1 1 auto;
+  '& > iframe': {
+    border: 0,
+    margin: '0 auto',
+    borderRadius: '1.6rem',
+    overflow: 'hidden',
+  },
+}
 
-  > iframe {
-    border: 0;
-    margin: 0 auto;
-    border-radius: 1.6rem;
-    overflow: hidden;
-  }
-`
+export const WrapperStyled = { display: 'flex', flexFlow: 'row wrap', height: '100vh', width: '100%' }
diff --git a/apps/widget-configurator/src/main.tsx b/apps/widget-configurator/src/main.tsx
index 073c3923a4..08ea5de8b3 100644
--- a/apps/widget-configurator/src/main.tsx
+++ b/apps/widget-configurator/src/main.tsx
@@ -1,68 +1,130 @@
-import { StrictMode } from 'react'
-import { createGlobalStyle } from 'styled-components';
+import * as React from 'react';
+import { StrictMode } from 'react';
+import { ThemeProvider, createTheme, PaletteOptions } from '@mui/material/styles';
+import { CssBaseline, GlobalStyles, PaletteMode } from '@mui/material';
+import * as ReactDOM from 'react-dom/client';
+import App from './app/app';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
-import * as ReactDOM from 'react-dom/client'
 
-import App from './app/app'
+export const ColorModeContext = React.createContext({ toggleColorMode: () => {} });
 
-const GlobalStyle = createGlobalStyle`
-  html, input, textarea, button {
-    font-family: 'Inter', sans-serif;
-    font-display: fallback;
-  }
+const globalStyles = {
+  'html, input, textarea, button': {
+    fontFamily: "'Inter', sans-serif",
+    fontDisplay: 'fallback',
+  },
+  '@supports (font-variation-settings: normal)': {
+    'html, input, textarea, button': {
+      fontFamily: "'Inter var', sans-serif",
+    },
+  },
+  'html, body, a, button': {
+    margin: 0,
+    padding: 0,
+  },
+  'html, body, #root': {
+    height: '100%',
+    width: '100%',
+  },
+  html: {
+    width: '100%',
+    margin: 0,
+    fontSize: '62.5%',
+    textRendering: 'geometricPrecision',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    boxSizing: 'border-box',
+    overscrollBehaviorY: 'none',
+    scrollBehavior: 'smooth',
+    fontVariant: 'none',
+    fontFeatureSettings: "'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on",
+    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+    background: 'linear-gradient(45deg,#EAE9FF 14.64%,#CAE9FF 85.36%)',
+    backgroundAttachment: 'fixed',
+  },
+};
 
-  @supports (font-variation-settings: normal) {
-    html, input, textarea, button {
-      font-family: 'Inter var', sans-serif;
-    }
-  }
+function MainApp() {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [mode, setMode] = React.useState<'light' | 'dark'>(prefersDarkMode ? 'dark' : 'light');
 
-  html, body, a, button {
-    margin: 0;
-    padding: 0;
-  }
+  const colorMode = React.useMemo(
+    () => ({
+      toggleColorMode: () => {
+        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+      },
+    }),
+    [],
+  );
 
-  html, body, #root {
-    height: 100%;
-    width: 100%;
-  }
+  const theme = React.useMemo(() => {
+    const commonTypography = {
+      htmlFontSize: 10,
+      button: {
+        textTransform: "none" as const,
+      },
+    };
 
-  a {
-    color: blue;
-  }
+    const palette: PaletteOptions = mode === 'dark'
+    ? {
+        mode: 'dark' as PaletteMode,
+        primary: {
+          main: 'rgb(202, 233, 255)',
+        },
+        secondary: {
+          main: 'rgb(39, 120, 242)',
+        },
+        text: {
+          primary: '#CAE9FF',
+          secondary: '#809ab1',
+          disabled: 'rgba(202,233,255,0.6)',
+        },
+        background: {
+          paper: 'rgb(12, 38, 75)',
+          default: 'rgb(12, 38, 75)',
+        },
+      }
+    : {
+        mode: 'light' as PaletteMode,
+        primary: {
+          main: '#052B65',
+        },
+        secondary: {
+          main: '#0d5ed9',
+        },
+        text: {
+          primary: 'rgb(5, 43, 101)',
+          secondary: 'rgb(5, 43, 101)',
+          disabled: 'rgb(5, 43, 101)',
+        },
+        background: {
+          paper: 'rgb(255, 255, 255)',
+          default: 'rgb(255, 255, 255)',
+        },
+      };
 
-  button {
-    user-select: none;
-  }
+    return createTheme({
+      palette,
+      typography: commonTypography,
+    });
+  }, [mode]);
 
-  html {  
-    width: 100%;
-    margin: 0;
-    font-size: 62.5%;
-    text-rendering: geometricPrecision;
-    line-height: 10px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    box-sizing: border-box;
-    overscroll-behavior-y: none;
-    scroll-behavior: smooth;
-    font-variant: none;
-    font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    background: linear-gradient(45deg,#EAE9FF 14.64%,#CAE9FF 85.36%);
-    background-attachment: fixed;
-  }
+  return (
+    <ColorModeContext.Provider value={colorMode}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <GlobalStyles styles={globalStyles} />
+        <App />
+      </ThemeProvider>
+    </ColorModeContext.Provider>
+  );
+}
 
-  *, *:before, *:after {
-    box-sizing: inherit;
-  }
-`;
 
-
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <StrictMode>
-    <GlobalStyle />
-    <App />
+    <MainApp />
   </StrictMode>
-)
+);
\ No newline at end of file
diff --git a/package.json b/package.json
index 7c3b0ae6e9..c39dbf909e 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,8 @@
     "@cowprotocol/cow-sdk": "^3.0.0-rc.0",
     "@cowprotocol/ethflowcontract": "cowprotocol/ethflowcontract.git#v1.0.0-artifacts",
     "@davatar/react": "1.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@ethersproject/bignumber": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethvault/iframe-provider": "^0.1.10",
@@ -65,6 +67,7 @@
     "@lingui/react": "^4.3.0",
     "@metamask/eth-sig-util": "^5.0.2",
     "@metamask/jazzicon": "^2.0.0",
+    "@mui/material": "^5.14.13",
     "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.18.0",
     "@reach/menu-button": "^0.18.0",
@@ -247,7 +250,7 @@
     "ts-mockito": "^2.6.1",
     "ts-node": "^10.9.1",
     "typescript": "~5.1.3",
-    "vite": "~4.3.9",
+    "vite": "^4.4.11",
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-plugin-dts": "~2.3.0",
     "vite-plugin-node-polyfills": "^0.12.0",
diff --git a/yarn.lock b/yarn.lock
index e7e2220bf9..441e71175c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -264,6 +264,13 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
+  dependencies:
+    "@babel/types" "^7.22.15"
+
 "@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.22.9":
   version "7.22.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz#92dfcb1fbbb2bc62529024f72d942a8c97142129"
@@ -331,6 +338,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
   integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
 
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
 "@babel/helper-validator-identifier@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193"
@@ -1220,6 +1232,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.18.3", "@babel/runtime@^7.23.1", "@babel/runtime@^7.8.7":
+  version "7.23.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
+  integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.5", "@babel/template@^7.3.3", "@babel/template@^7.4.4":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -1254,6 +1273,15 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.22.15":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
+  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1649,6 +1677,23 @@
     mersenne-twister "^1.1.0"
     react-blockies "^1.4.1"
 
+"@emotion/babel-plugin@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
+  integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/serialize" "^1.1.2"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
 "@emotion/cache@^10.0.27":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -1659,6 +1704,17 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
+"@emotion/cache@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
+  integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/sheet" "^1.2.2"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    stylis "4.2.0"
+
 "@emotion/core@^10.0.0":
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.3.1.tgz#4021b6d8b33b3304d48b0bb478485e7d7421c69d"
@@ -1685,6 +1741,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+"@emotion/hash@^0.9.1":
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
+  integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+
 "@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.1":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
@@ -1692,7 +1753,7 @@
   dependencies:
     "@emotion/memoize" "0.7.4"
 
-"@emotion/is-prop-valid@^1.1.0":
+"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
   integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
@@ -1714,6 +1775,20 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
+"@emotion/react@^11.11.1":
+  version "11.11.1"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
+  integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/cache" "^11.11.0"
+    "@emotion/serialize" "^1.1.2"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    hoist-non-react-statics "^3.3.1"
+
 "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
   version "0.11.16"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
@@ -1725,11 +1800,27 @@
     "@emotion/utils" "0.11.3"
     csstype "^2.5.7"
 
+"@emotion/serialize@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51"
+  integrity sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==
+  dependencies:
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/unitless" "^0.8.1"
+    "@emotion/utils" "^1.2.1"
+    csstype "^3.0.2"
+
 "@emotion/sheet@0.9.4":
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
   integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
+"@emotion/sheet@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
+  integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
+
 "@emotion/styled-base@^10.3.0":
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.3.0.tgz#9aa2c946100f78b47316e4bc6048321afa6d4e36"
@@ -1748,6 +1839,18 @@
     "@emotion/styled-base" "^10.3.0"
     babel-plugin-emotion "^10.0.27"
 
+"@emotion/styled@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
+  integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/is-prop-valid" "^1.2.1"
+    "@emotion/serialize" "^1.1.2"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
+
 "@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
@@ -1758,16 +1861,36 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/unitless@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
+  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
+
 "@emotion/utils@0.11.3":
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
   integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
 
+"@emotion/utils@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
+  integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
+
 "@emotion/weak-memoize@0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@emotion/weak-memoize@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
+  integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
+
 "@esbuild/android-arm64@0.17.19":
   version "0.17.19"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz#bafb75234a5d3d1b690e7c2956a599345e84a2fd"
@@ -2431,6 +2554,33 @@
   dependencies:
     eventemitter3 "^4.0.0"
 
+"@floating-ui/core@^1.4.2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
+  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
+  dependencies:
+    "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/dom@^1.5.1":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
+  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
+  dependencies:
+    "@floating-ui/core" "^1.4.2"
+    "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/react-dom@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
+  integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
+  dependencies:
+    "@floating-ui/dom" "^1.5.1"
+
+"@floating-ui/utils@^0.1.3":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
+  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
+
 "@fontsource/ibm-plex-mono@^4.5.1":
   version "4.5.13"
   resolved "https://registry.yarnpkg.com/@fontsource/ibm-plex-mono/-/ibm-plex-mono-4.5.13.tgz#f91559ab3b5074a8e2db75c0370b9640e80c99b2"
@@ -3416,6 +3566,90 @@
     "@motionone/dom" "^10.16.2"
     tslib "^2.3.1"
 
+"@mui/base@5.0.0-beta.19":
+  version "5.0.0-beta.19"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.19.tgz#c1776e91b6a377c1a6a0079b5d6fec6e07a3bf9c"
+  integrity sha512-maNBgAscddyPNzFZQUJDF/puxM27Li+NqSBsr/lAP8TLns2VvWS2SoL3OKFOIoRnAMKGY/Ic6Aot6gCYeQnssA==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+    "@floating-ui/react-dom" "^2.0.2"
+    "@mui/types" "^7.2.6"
+    "@mui/utils" "^5.14.13"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+
+"@mui/core-downloads-tracker@^5.14.13":
+  version "5.14.13"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.13.tgz#4b87e28aec6e568613683517ce4b7a7f75fa681a"
+  integrity sha512-3ZUbzcH4yloLKlV6Y+S0Edn2wef9t+EGHSfEkwVCn8E0ULdshifEFgfEroKRegQifDIwcKS/ofccxuZ8njTAYg==
+
+"@mui/material@^5.14.13":
+  version "5.14.13"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.13.tgz#d2df8270cafaa0cae595e843a01e8a9047a05e8e"
+  integrity sha512-iPEFwhoVG789UVsXX4gqd1eJUlcLW1oceqwJYQN8Z4MpcAKfL9Lv3fda65AwG7pQ5lf+d7IbHzm4m48SWZxI2g==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+    "@mui/base" "5.0.0-beta.19"
+    "@mui/core-downloads-tracker" "^5.14.13"
+    "@mui/system" "^5.14.13"
+    "@mui/types" "^7.2.6"
+    "@mui/utils" "^5.14.13"
+    "@types/react-transition-group" "^4.4.7"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^5.14.13":
+  version "5.14.13"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.13.tgz#10cb55a6e2caaf568dfaae894969a933c037da80"
+  integrity sha512-5EFqk4tqiSwPguj4NW/6bUf4u1qoUWXy9lrKfNh9H6oAohM+Ijv/7qSxFjnxPGBctj469/Sc5aKAR35ILBKZLQ==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+    "@mui/utils" "^5.14.13"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.14.13":
+  version "5.14.13"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.13.tgz#4ab4ef7d86ffe8709bdce4b8b2e3dba9090da199"
+  integrity sha512-1ff/egFQl26hiwcUtCMKAkp4Sgqpm3qIewmXq+GN27fb44lDIACquehMFBuadOjceOFmbIXbayzbA46ZyqFYzA==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.14.13":
+  version "5.14.13"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.13.tgz#6c7a3cb28e45e3b66eb162ee5b292a6cf80efb8e"
+  integrity sha512-+5+Dx50lG4csbx2sGjrKLozXQJeCpJ4dIBZolyFLkZ+XphD1keQWouLUvJkPQ3MSglLLKuD37pp52YjMncZMEQ==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+    "@mui/private-theming" "^5.14.13"
+    "@mui/styled-engine" "^5.14.13"
+    "@mui/types" "^7.2.6"
+    "@mui/utils" "^5.14.13"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.6":
+  version "7.2.6"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.6.tgz#d72b9e9eb0032e107e76033932d65c3f731d2608"
+  integrity sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng==
+
+"@mui/utils@^5.14.13":
+  version "5.14.13"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.13.tgz#42c352b342da90b44a29a83d3dbda6ee1e56a0f8"
+  integrity sha512-2AFpyXWw7uDCIqRu7eU2i/EplZtks5LAMzQvIhC79sPV9IhOZU2qwOWVnPtdctRXiQJOAaXulg+A37pfhEueQw==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+    "@types/prop-types" "^15.7.7"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
 "@multiformats/base-x@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@multiformats/base-x/-/base-x-4.0.1.tgz#95ff0fa58711789d53aefb2590a8b7a4e715d121"
@@ -3989,7 +4223,7 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.4.4":
+"@popperjs/core@^2.11.8", "@popperjs/core@^2.4.4":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@@ -6169,6 +6403,11 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/prop-types@^15.7.7":
+  version "15.7.8"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3"
+  integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==
+
 "@types/q@^1.5.1":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
@@ -6245,6 +6484,13 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.7":
+  version "4.4.7"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.7.tgz#bf69f269d74aa78b99097673ca6dd6824a68ef1c"
+  integrity sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-virtualized-auto-sizer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
@@ -9452,6 +9698,11 @@ clsx@^1.1.0:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -10214,7 +10465,7 @@ csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
   integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@@ -10955,6 +11206,14 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -11433,7 +11692,7 @@ es6-symbol@^3.1.1, es6-symbol@^3.1.3:
     d "^1.0.1"
     ext "^1.1.2"
 
-esbuild@^0.17.10, esbuild@^0.17.5:
+esbuild@^0.17.10:
   version "0.17.19"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.19.tgz#087a727e98299f0462a3d0bcdd9cd7ff100bd955"
   integrity sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==
@@ -13400,7 +13659,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -19096,6 +19355,15 @@ postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.26, postcss@^8.4.
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.27:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 preact@10.4.1:
   version "10.4.1"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.1.tgz#9b3ba020547673a231c6cf16f0fbaef0e8863431"
@@ -19941,6 +20209,16 @@ react-style-singleton@^2.1.0, react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react-virtualized-auto-sizer@^1.0.2:
   version "1.0.20"
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.20.tgz#d9a907253a7c221c52fa57dc775a6ef40c182645"
@@ -20141,6 +20419,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.3, regenerator-runtime@^
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.15.1:
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
@@ -20546,13 +20829,20 @@ rollup@^2.43.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
-rollup@^3.21.0, rollup@^3.25.2:
+rollup@^3.25.2:
   version "3.27.0"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.27.0.tgz#15bd07e2e1cbfa9255bf6a3f04a432621c2f3550"
   integrity sha512-aOltLCrYZ0FhJDm7fCqwTjIUEVjWjcydKBV/Zeid6Mn8BWgDCUBBWT5beM5ieForYNo/1ZHuGJdka26kvQ3Gzg==
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@^3.27.1:
+  version "3.29.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
+  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 rpc-websockets@^7.5.1:
   version "7.5.1"
   resolved "https://registry.yarnpkg.com/rpc-websockets/-/rpc-websockets-7.5.1.tgz#e0a05d525a97e7efc31a0617f093a13a2e10c401"
@@ -21661,6 +21951,11 @@ stylehacks@^5.1.1:
     browserslist "^4.21.4"
     postcss-selector-parser "^6.0.4"
 
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
 sucrase@^3.32.0:
   version "3.34.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
@@ -23078,14 +23373,14 @@ vite-tsconfig-paths@~4.2.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-vite@~4.3.9:
-  version "4.3.9"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.9.tgz#db896200c0b1aa13b37cdc35c9e99ee2fdd5f96d"
-  integrity sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==
+vite@^4.4.11:
+  version "4.4.11"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.4.11.tgz#babdb055b08c69cfc4c468072a2e6c9ca62102b0"
+  integrity sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==
   dependencies:
-    esbuild "^0.17.5"
-    postcss "^8.4.23"
-    rollup "^3.21.0"
+    esbuild "^0.18.10"
+    postcss "^8.4.27"
+    rollup "^3.27.1"
   optionalDependencies:
     fsevents "~2.3.2"
 

From 30565ebf2f53bf8a3722c255a2368e1f79eaf9db Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Thu, 12 Oct 2023 14:28:01 +0100
Subject: [PATCH 16/26] feat: widget configurator app

---
 .../src/app/configurator/index.tsx            | 105 +++++++++++----
 .../src/app/configurator/styled.ts            |   2 +-
 apps/widget-configurator/src/main.tsx         | 127 ++++++++++--------
 3 files changed, 150 insertions(+), 84 deletions(-)

diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
index 6c34594ef5..f137c03c6f 100644
--- a/apps/widget-configurator/src/app/configurator/index.tsx
+++ b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react'
+import { ColorModeContext } from '../../main'
+import { useTheme } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import { ContentStyled, DrawerStyled, WrapperStyled } from './styled'
 import Button from '@mui/material/Button'
 import InputLabel from '@mui/material/InputLabel'
+import OutlinedInput from '@mui/material/OutlinedInput'
 import MenuItem from '@mui/material/MenuItem'
 import FormControl from '@mui/material/FormControl'
 import Select, { SelectChangeEvent } from '@mui/material/Select'
@@ -13,37 +16,58 @@ import TextField from '@mui/material/TextField'
 import Autocomplete from '@mui/material/Autocomplete'
 import Divider from '@mui/material/Divider'
 import EmbedDialog from './embedDialog'
-import { ColorModeContext } from '../../main';
-import { useTheme } from '@mui/material/styles';
+import Checkbox from '@mui/material/Checkbox'
+import ListItemText from '@mui/material/ListItemText'
+
+enum TradeMode {
+  Swap = 1,
+  Limit = 2,
+  TWAP = 3,
+}
+
+const ThemeOptions = [
+  { label: 'Auto', value: 'auto' },
+  { label: 'Light', value: 'light' },
+  { label: 'Dark', value: 'dark' },
+]
+
+const TradeModeOptions = [
+  { label: 'Swap', value: TradeMode.Swap },
+  { label: 'Limit', value: TradeMode.Limit },
+  { label: 'TWAP', value: TradeMode.TWAP },
+]
+
+const NetworkOptions = ['Ethereum', 'Gnosis Chain']
+const TokenOptions = ['COW', 'USDC']
 
 export function Configurator({ title }: { title: string }) {
-  const [activeTheme, setActiveTheme] = React.useState('1')
+  const theme = useTheme()
+  const { mode, toggleColorMode, setAutoMode } = React.useContext(ColorModeContext)
+
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(true)
 
-  const handleChange = (event: SelectChangeEvent) => {
-    setActiveTheme(event.target.value)
+  const handleThemeChange = (event: SelectChangeEvent) => {
+    const selectedTheme = event.target.value
+    if (selectedTheme === 'auto') {
+      setAutoMode()
+    } else {
+      toggleColorMode()
+    }
   }
 
-  enum Theme {
-    Auto = 1,
-    Light = 2,
-    Dark = 3,
+  const [tradeModes, setTradeModes] = React.useState<TradeMode[]>([TradeMode.Swap, TradeMode.Limit, TradeMode.TWAP])
+  const handleTradeModeChange = (event: SelectChangeEvent<TradeMode[]>) => {
+    setTradeModes(event.target.value as TradeMode[])
   }
 
-  const NetworkOptions = ['Ethereum', 'Gnosis Chain']
-
   const [network, setNetwork] = React.useState<string | null>(NetworkOptions[0])
   const [networkInput, setNetworkInput] = React.useState(NetworkOptions[0])
 
-  const TokenOptions = ['COW', 'USDC']
   const [sellToken, setSellToken] = React.useState<string | null>(TokenOptions[0])
   const [sellTokenInput, setSellTokenInput] = React.useState(TokenOptions[0])
   const [buyToken, setBuyToken] = React.useState<string | null>(TokenOptions[0])
   const [buyTokenInput, setBuyTokenInput] = React.useState(TokenOptions[1])
 
-  const theme = useTheme();  
-  const colorMode = React.useContext(ColorModeContext);
-
   return (
     <Box sx={WrapperStyled}>
       <Drawer sx={DrawerStyled} variant="persistent" anchor="left" open={isDrawerOpen}>
@@ -56,19 +80,49 @@ export function Configurator({ title }: { title: string }) {
           <Select
             labelId="select-theme-label"
             id="select-theme"
-            value={activeTheme}
-            onChange={handleChange}
+            value={mode}
+            onChange={handleThemeChange}
             autoWidth
             label="Theme"
             size="small"
           >
-            <MenuItem value={Theme.Auto}>Auto</MenuItem>
-            <MenuItem value={Theme.Light}>Light</MenuItem>
-            <MenuItem value={Theme.Dark}>Dark</MenuItem>
+            {ThemeOptions.map((option) => (
+              <MenuItem key={option.value} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
           </Select>
         </FormControl>
 
-        <Divider light />
+        <Divider />
+
+        <FormControl sx={{ width: '100%' }}>
+          <InputLabel id="trade-mode-label">Trade Modes</InputLabel>
+          <Select
+            labelId="trade-mode-label"
+            id="trade-mode-select"
+            multiple
+            size="small"
+            value={tradeModes}
+            onChange={handleTradeModeChange}
+            input={<OutlinedInput id="trade-mode-select-outlined" label="Available trade modes" />}
+            renderValue={(selected) =>
+              (selected as number[])
+                .map((value) => {
+                  const option = TradeModeOptions.find((option) => option.value === value)
+                  return option ? option.label : ''
+                })
+                .join(', ')
+            }
+          >
+            {TradeModeOptions.map((option) => (
+              <MenuItem key={option.value} value={option.value}>
+                <Checkbox checked={tradeModes.indexOf(option.value) > -1} />
+                <ListItemText primary={option.label} />
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
 
         <Autocomplete
           value={network}
@@ -85,6 +139,8 @@ export function Configurator({ title }: { title: string }) {
           renderInput={(params) => <TextField {...params} label="Network" />}
         />
 
+        <Divider />
+
         <Autocomplete
           value={sellToken}
           onChange={(event: any, newValue: string | null) => {
@@ -126,10 +182,9 @@ export function Configurator({ title }: { title: string }) {
           Hide configurator
         </Link>
 
-        <Button variant="contained" onClick={colorMode.toggleColorMode}>
-  Toggle to {theme.palette.mode === 'dark' ? 'Light' : 'Dark'} Mode
-</Button>
-
+        <Button variant="contained" onClick={toggleColorMode}>
+          Toggle to {theme.palette.mode === 'dark' ? 'Light' : 'Dark'} Mode
+        </Button>
       </Drawer>
 
       <Box sx={ContentStyled}>
diff --git a/apps/widget-configurator/src/app/configurator/styled.ts b/apps/widget-configurator/src/app/configurator/styled.ts
index 1af1cb5079..87b7d9a9a4 100644
--- a/apps/widget-configurator/src/app/configurator/styled.ts
+++ b/apps/widget-configurator/src/app/configurator/styled.ts
@@ -11,7 +11,7 @@ export const DrawerStyled = (theme: Theme) => ({
     gap: '1.6rem',
     height: '100%',
     border: 0,
-    background: theme.palette.secondary.main,
+    background: theme.palette.background.paper,
     boxShadow: 'rgba(5, 43, 101, 0.06) 0 1.2rem 1.2rem',
     padding: '1.6rem',
   },
diff --git a/apps/widget-configurator/src/main.tsx b/apps/widget-configurator/src/main.tsx
index 08ea5de8b3..d0f1cd4ac0 100644
--- a/apps/widget-configurator/src/main.tsx
+++ b/apps/widget-configurator/src/main.tsx
@@ -1,13 +1,16 @@
-import * as React from 'react';
-import { StrictMode } from 'react';
-import { ThemeProvider, createTheme, PaletteOptions } from '@mui/material/styles';
-import { CssBaseline, GlobalStyles, PaletteMode } from '@mui/material';
-import * as ReactDOM from 'react-dom/client';
-import App from './app/app';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import * as React from 'react'
+import { StrictMode } from 'react'
+import { ThemeProvider, createTheme, PaletteOptions } from '@mui/material/styles'
+import { CssBaseline, GlobalStyles, PaletteMode } from '@mui/material'
+import * as ReactDOM from 'react-dom/client'
+import App from './app/app'
+import useMediaQuery from '@mui/material/useMediaQuery'
 
-
-export const ColorModeContext = React.createContext({ toggleColorMode: () => {} });
+export const ColorModeContext = React.createContext({
+  mode: 'light' as PaletteMode,
+  toggleColorMode: () => {},
+  setAutoMode: () => {}
+});
 
 const globalStyles = {
   'html, input, textarea, button': {
@@ -43,72 +46,81 @@ const globalStyles = {
     background: 'linear-gradient(45deg,#EAE9FF 14.64%,#CAE9FF 85.36%)',
     backgroundAttachment: 'fixed',
   },
-};
+}
+
+export enum ThemeMode {
+  Auto = 1,
+  Light = 2,
+  Dark = 3,
+}
 
 function MainApp() {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const [mode, setMode] = React.useState<'light' | 'dark'>(prefersDarkMode ? 'dark' : 'light');
+  const [mode, setMode] = React.useState<PaletteMode>(prefersDarkMode ? 'dark' : 'light');
 
   const colorMode = React.useMemo(
     () => ({
+      mode,
       toggleColorMode: () => {
-        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+        setMode(prevMode => prevMode === 'light' ? 'dark' : 'light');
+      },
+      setAutoMode: () => {
+        setMode(prefersDarkMode ? 'dark' : 'light');
       },
     }),
-    [],
+    [mode, prefersDarkMode]
   );
 
   const theme = React.useMemo(() => {
     const commonTypography = {
       htmlFontSize: 10,
       button: {
-        textTransform: "none" as const,
+        textTransform: 'none' as const,
       },
-    };
+    }
 
-    const palette: PaletteOptions = mode === 'dark'
-    ? {
-        mode: 'dark' as PaletteMode,
-        primary: {
-          main: 'rgb(202, 233, 255)',
-        },
-        secondary: {
-          main: 'rgb(39, 120, 242)',
-        },
-        text: {
-          primary: '#CAE9FF',
-          secondary: '#809ab1',
-          disabled: 'rgba(202,233,255,0.6)',
-        },
-        background: {
-          paper: 'rgb(12, 38, 75)',
-          default: 'rgb(12, 38, 75)',
-        },
-      }
-    : {
-        mode: 'light' as PaletteMode,
-        primary: {
-          main: '#052B65',
-        },
-        secondary: {
-          main: '#0d5ed9',
-        },
-        text: {
-          primary: 'rgb(5, 43, 101)',
-          secondary: 'rgb(5, 43, 101)',
-          disabled: 'rgb(5, 43, 101)',
-        },
-        background: {
-          paper: 'rgb(255, 255, 255)',
-          default: 'rgb(255, 255, 255)',
-        },
-      };
+    const palette: PaletteOptions =
+      mode === 'dark'
+        ? {
+            mode: 'dark' as PaletteMode,
+            primary: {
+              main: 'rgb(202, 233, 255)',
+            },
+            secondary: {
+              main: 'rgb(39, 120, 242)',
+            },
+            text: {
+              primary: '#CAE9FF',
+              secondary: '#809ab1',
+              disabled: 'rgba(202,233,255,0.6)',
+            },
+            background: {
+              paper: 'rgb(12, 38, 75)',
+              default: 'rgb(12, 38, 75)',
+            },
+          }
+        : {
+            mode: 'light' as PaletteMode,
+            primary: {
+              main: 'rgb(5, 43, 101)',
+            },
+            secondary: {
+              main: 'rgb(39, 120, 242)',
+            },
+            text: {
+              primary: 'rgb(12, 38, 75)',
+            },
+            background: {
+              default: '#CAE9FF',
+              paper: '#ffffff',
+            },
+          }
 
     return createTheme({
       palette,
       typography: commonTypography,
-    });
-  }, [mode]);
+    })
+  }, [mode])
 
   return (
     <ColorModeContext.Provider value={colorMode}>
@@ -118,13 +130,12 @@ function MainApp() {
         <App />
       </ThemeProvider>
     </ColorModeContext.Provider>
-  );
+  )
 }
 
-
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   <StrictMode>
     <MainApp />
   </StrictMode>
-);
\ No newline at end of file
+)

From 64c8533e350594b29f10ca51f5cd9362efc417f2 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Thu, 12 Oct 2023 18:27:19 +0100
Subject: [PATCH 17/26] feat: widget configurator app

---
 apps/widget-configurator/src/app/app.tsx      |   2 +-
 .../src/app/configurator/index.tsx            | 106 ++++++++++--------
 apps/widget-configurator/src/main.tsx         |   8 ++
 .../src/mui-theme-custom.d.ts                 |  15 +++
 package.json                                  |   2 +
 yarn.lock                                     |  37 +++++-
 6 files changed, 123 insertions(+), 47 deletions(-)
 create mode 100644 apps/widget-configurator/src/mui-theme-custom.d.ts

diff --git a/apps/widget-configurator/src/app/app.tsx b/apps/widget-configurator/src/app/app.tsx
index d554b00955..d914123f7d 100644
--- a/apps/widget-configurator/src/app/app.tsx
+++ b/apps/widget-configurator/src/app/app.tsx
@@ -7,7 +7,7 @@ const WrapperStyled = (theme: Theme) => ({
   flexDirection: 'column',
   height: '100%',
   width: '100%',
-  background: theme.palette.background.paper,
+  background: theme.palette.cow.background,
 })
 
 export function App() {
diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
index f137c03c6f..236789ce6e 100644
--- a/apps/widget-configurator/src/app/configurator/index.tsx
+++ b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { ColorModeContext } from '../../main'
-import { useTheme } from '@mui/material/styles'
+// import { useTheme } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import { ContentStyled, DrawerStyled, WrapperStyled } from './styled'
-import Button from '@mui/material/Button'
+// import Button from '@mui/material/Button'
 import InputLabel from '@mui/material/InputLabel'
 import OutlinedInput from '@mui/material/OutlinedInput'
 import MenuItem from '@mui/material/MenuItem'
@@ -18,6 +18,8 @@ import Divider from '@mui/material/Divider'
 import EmbedDialog from './embedDialog'
 import Checkbox from '@mui/material/Checkbox'
 import ListItemText from '@mui/material/ListItemText'
+import SaveIcon from '@mui/icons-material/Save'
+import LoadingButton from '@mui/lab/LoadingButton'
 
 enum TradeMode {
   Swap = 1,
@@ -37,11 +39,15 @@ const TradeModeOptions = [
   { label: 'TWAP', value: TradeMode.TWAP },
 ]
 
-const NetworkOptions = ['Ethereum', 'Gnosis Chain']
+const NetworkOptions = [
+  { chainID: 1, label: 'Ethereum' },
+  { chainID: 100, label: 'Gnosis Chain' }
+];
+
 const TokenOptions = ['COW', 'USDC']
 
 export function Configurator({ title }: { title: string }) {
-  const theme = useTheme()
+  // const theme = useTheme()
   const { mode, toggleColorMode, setAutoMode } = React.useContext(ColorModeContext)
 
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(true)
@@ -53,6 +59,10 @@ export function Configurator({ title }: { title: string }) {
     } else {
       toggleColorMode()
     }
+
+    const url = new URL(iframeURL);
+    url.searchParams.set('theme', selectedTheme);
+    setIframeURL(url.toString());
   }
 
   const [tradeModes, setTradeModes] = React.useState<TradeMode[]>([TradeMode.Swap, TradeMode.Limit, TradeMode.TWAP])
@@ -60,13 +70,29 @@ export function Configurator({ title }: { title: string }) {
     setTradeModes(event.target.value as TradeMode[])
   }
 
-  const [network, setNetwork] = React.useState<string | null>(NetworkOptions[0])
-  const [networkInput, setNetworkInput] = React.useState(NetworkOptions[0])
-
+  const [network, setNetwork] = React.useState<{ chainID: number; label: string } | null>(NetworkOptions[0]);
   const [sellToken, setSellToken] = React.useState<string | null>(TokenOptions[0])
-  const [sellTokenInput, setSellTokenInput] = React.useState(TokenOptions[0])
+  const [sellTokenAmount, setSellTokenAmount] = React.useState<number>(100000);
   const [buyToken, setBuyToken] = React.useState<string | null>(TokenOptions[0])
-  const [buyTokenInput, setBuyTokenInput] = React.useState(TokenOptions[1])
+  const [buyTokenAmount, setBuyTokenAmount] = React.useState<number>(100000);
+
+  const [iframeURL, setIframeURL] = React.useState<string>('');
+
+  const constructIframeURL = React.useCallback(() => {
+    if (network) {
+      return `https://swap-dev-git-widget-ui-5b-cowswap.vercel.app/#/${network.chainID}/widget/swap/${sellToken}/${buyToken}?sellAmount=${sellTokenAmount}&buyAmount=${buyTokenAmount}&theme=${mode}`;
+    }
+    return '';
+  }, [sellToken, buyToken, sellTokenAmount, buyTokenAmount, mode, network]);
+
+  React.useEffect(() => {
+    setIframeURL(constructIframeURL());
+  }, [constructIframeURL, network]);
+  
+  const handleWidgetRefreshClick = () => {
+    const newIframeURL = constructIframeURL();
+    setIframeURL(newIframeURL);
+  };
 
   return (
     <Box sx={WrapperStyled}>
@@ -75,6 +101,8 @@ export function Configurator({ title }: { title: string }) {
           {title}
         </Typography>
 
+        <Divider variant="middle">General</Divider>
+
         <FormControl sx={{ width: '100%' }}>
           <InputLabel id="select-theme">Theme</InputLabel>
           <Select
@@ -94,8 +122,6 @@ export function Configurator({ title }: { title: string }) {
           </Select>
         </FormControl>
 
-        <Divider />
-
         <FormControl sx={{ width: '100%' }}>
           <InputLabel id="trade-mode-label">Trade Modes</InputLabel>
           <Select
@@ -125,75 +151,67 @@ export function Configurator({ title }: { title: string }) {
         </FormControl>
 
         <Autocomplete
-          value={network}
-          onChange={(event: any, newValue: string | null) => {
-            setNetwork(newValue)
-          }}
-          inputValue={networkInput}
-          onInputChange={(event, newInputValue) => {
-            setNetworkInput(newInputValue)
-          }}
-          id="controllable-states-demo"
-          options={NetworkOptions}
-          size="small"
-          renderInput={(params) => <TextField {...params} label="Network" />}
-        />
-
-        <Divider />
+      value={network}
+      onChange={(event: any, newValue: { chainID: number; label: string } | null) => {
+        setNetwork(newValue);
+      }}
+      getOptionLabel={(option) => option.label}
+      id="controllable-states-network"
+      options={NetworkOptions}
+      size="small"
+      renderInput={(params) => <TextField {...params} label="Network" />}
+    />
+
+        <Divider variant="middle">Default selection</Divider>
 
         <Autocomplete
           value={sellToken}
           onChange={(event: any, newValue: string | null) => {
             setSellToken(newValue)
           }}
-          inputValue={sellTokenInput}
+          inputValue={sellToken || ''}
           onInputChange={(event, newInputValue) => {
-            setSellTokenInput(newInputValue)
+            setSellToken(newInputValue)
           }}
-          id="controllable-states-demo"
+          id="controllable-states-selling-token"
           options={TokenOptions}
           size="small"
           renderInput={(params) => <TextField {...params} label="Sell Token" />}
         />
 
-        <TextField id="input-sellAmount" label="Sell amount" defaultValue="100000" size="small" />
+        <TextField id="input-sellTokenAmount" label="Sell amount" value={sellTokenAmount} onChange={(e) => setSellTokenAmount(Number(e.target.value))} size="small" />
 
         <Autocomplete
           value={buyToken}
           onChange={(event: any, newValue: string | null) => {
             setBuyToken(newValue)
           }}
-          inputValue={buyTokenInput}
+          inputValue={buyToken || ''}
           onInputChange={(event, newInputValue) => {
-            setBuyTokenInput(newInputValue)
+            setBuyTokenAmount(Number(newInputValue))
           }}
           id="buy-token-autocomplete"
           options={TokenOptions}
           renderInput={(params) => <TextField {...params} label="Buy Token" size="small" />}
         />
 
-        <TextField id="input-buyAmount" label="Buy amount" defaultValue="100000" size="small" />
+        <TextField id="input-buyTokenAmount" label="Buy amount" value={buyTokenAmount} onChange={(e) => setBuyTokenAmount(Number(e.target.value))} size="small" />
+
+        <Divider variant="middle" />
 
-        <Button variant="contained">Update</Button>
+        <LoadingButton loading={false} loadingPosition="start" startIcon={<SaveIcon />} variant="contained" onClick={handleWidgetRefreshClick}>
+          Refresh Widget
+        </LoadingButton>
 
         <EmbedDialog />
 
         <Link href="#hide" onClick={() => setIsDrawerOpen(false)}>
           Hide configurator
         </Link>
-
-        <Button variant="contained" onClick={toggleColorMode}>
-          Toggle to {theme.palette.mode === 'dark' ? 'Light' : 'Dark'} Mode
-        </Button>
       </Drawer>
 
       <Box sx={ContentStyled}>
-        <iframe
-          src="https://swap-dev-git-widget-ui-5b-cowswap.vercel.app/#/1/widget/swap/COW/WETH?sellAmount=1200&theme=light"
-          width="400px"
-          height="640px"
-          title="widget"
-        />
+        <iframe src={iframeURL} width="400px" height="640px" title="widget" />
       </Box>
     </Box>
   )
diff --git a/apps/widget-configurator/src/main.tsx b/apps/widget-configurator/src/main.tsx
index d0f1cd4ac0..178d0abb35 100644
--- a/apps/widget-configurator/src/main.tsx
+++ b/apps/widget-configurator/src/main.tsx
@@ -83,6 +83,7 @@ function MainApp() {
       mode === 'dark'
         ? {
             mode: 'dark' as PaletteMode,
+            tonalOffset: 0.2,
             primary: {
               main: 'rgb(202, 233, 255)',
             },
@@ -98,9 +99,13 @@ function MainApp() {
               paper: 'rgb(12, 38, 75)',
               default: 'rgb(12, 38, 75)',
             },
+            cow: {
+              background: 'radial-gradient(50% 500px at 50% -6%, rgba(0, 41, 102, 0.7) 0%, rgb(7, 24, 50) 50%, rgb(6, 22, 45) 100%), radial-gradient(circle at -70% 50%, rgba(0, 43, 102, 0.7) 0px, transparent 50%) fixed'
+            }
           }
         : {
             mode: 'light' as PaletteMode,
+            tonalOffset: 0.5,
             primary: {
               main: 'rgb(5, 43, 101)',
             },
@@ -114,6 +119,9 @@ function MainApp() {
               default: '#CAE9FF',
               paper: '#ffffff',
             },
+            cow: {
+              background: 'linear-gradient(45deg, rgb(234, 233, 255) 14.64%, rgb(202, 233, 255) 85.36%) fixed'
+            }
           }
 
     return createTheme({
diff --git a/apps/widget-configurator/src/mui-theme-custom.d.ts b/apps/widget-configurator/src/mui-theme-custom.d.ts
new file mode 100644
index 0000000000..068c2c20a7
--- /dev/null
+++ b/apps/widget-configurator/src/mui-theme-custom.d.ts
@@ -0,0 +1,15 @@
+import '@mui/material/styles';
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    cow: {
+      background: string; // You can use Palette['primary'] if it shares the same shape
+    };
+  }
+
+  interface PaletteOptions {
+    cow?: {
+      background: string; // You can use PaletteOptions['primary'] if it shares the same shape
+    };
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index c39dbf909e..914a021771 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,8 @@
     "@lingui/react": "^4.3.0",
     "@metamask/eth-sig-util": "^5.0.2",
     "@metamask/jazzicon": "^2.0.0",
+    "@mui/icons-material": "^5.14.13",
+    "@mui/lab": "^5.0.0-alpha.148",
     "@mui/material": "^5.14.13",
     "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.18.0",
diff --git a/yarn.lock b/yarn.lock
index 441e71175c..da9249d238 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3584,6 +3584,27 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.13.tgz#4b87e28aec6e568613683517ce4b7a7f75fa681a"
   integrity sha512-3ZUbzcH4yloLKlV6Y+S0Edn2wef9t+EGHSfEkwVCn8E0ULdshifEFgfEroKRegQifDIwcKS/ofccxuZ8njTAYg==
 
+"@mui/icons-material@^5.14.13":
+  version "5.14.13"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.13.tgz#d5169f804cc97c86282e85b5b7fdb523fb04689d"
+  integrity sha512-fxKE1UrjI4xVxHe9IAGuVQZrc18dSBJg0P+Sqi2SZmcDUCShmgRq6Jq7l7GduvuMIkOSqAJdNgLtXmtmZkjtLg==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+
+"@mui/lab@^5.0.0-alpha.148":
+  version "5.0.0-alpha.148"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.148.tgz#3cd05cabedc11e96022f77e365e1847c4e669dfb"
+  integrity sha512-FfgHSYO59tznwMkn6FAjuowU1KteTV2AQRD7NsZq82TpiRBpBFkDtcsap02uf+rRVdwgF/yokdYLtVJ96snDGA==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+    "@mui/base" "5.0.0-beta.19"
+    "@mui/system" "^5.14.13"
+    "@mui/types" "^7.2.6"
+    "@mui/utils" "^5.14.13"
+    "@mui/x-tree-view" "6.0.0-alpha.1"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+
 "@mui/material@^5.14.13":
   version "5.14.13"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.13.tgz#d2df8270cafaa0cae595e843a01e8a9047a05e8e"
@@ -3640,7 +3661,7 @@
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.6.tgz#d72b9e9eb0032e107e76033932d65c3f731d2608"
   integrity sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng==
 
-"@mui/utils@^5.14.13":
+"@mui/utils@^5.14.13", "@mui/utils@^5.14.3":
   version "5.14.13"
   resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.13.tgz#42c352b342da90b44a29a83d3dbda6ee1e56a0f8"
   integrity sha512-2AFpyXWw7uDCIqRu7eU2i/EplZtks5LAMzQvIhC79sPV9IhOZU2qwOWVnPtdctRXiQJOAaXulg+A37pfhEueQw==
@@ -3650,6 +3671,18 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
+"@mui/x-tree-view@6.0.0-alpha.1":
+  version "6.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/@mui/x-tree-view/-/x-tree-view-6.0.0-alpha.1.tgz#fe499f8c43c01d28aca95cfb17491746ffcc3080"
+  integrity sha512-JUG3HmBrmGEALbCFg1b+i7h726e1dWYZs4db3syO1j+Q++E3nbvE4Lehp5yGTFm+8esH0Tny50tuJaa4WX6VSA==
+  dependencies:
+    "@babel/runtime" "^7.22.6"
+    "@mui/utils" "^5.14.3"
+    "@types/react-transition-group" "^4.4.6"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+    react-transition-group "^4.4.5"
+
 "@multiformats/base-x@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@multiformats/base-x/-/base-x-4.0.1.tgz#95ff0fa58711789d53aefb2590a8b7a4e715d121"
@@ -6484,7 +6517,7 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.7":
+"@types/react-transition-group@^4.4.6", "@types/react-transition-group@^4.4.7":
   version "4.4.7"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.7.tgz#bf69f269d74aa78b99097673ca6dd6824a68ef1c"
   integrity sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==

From d0b064e856c597a4f21cb8fec35d2db6b2d9937e Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Thu, 12 Oct 2023 18:29:05 +0100
Subject: [PATCH 18/26] feat: widget configurator app

---
 apps/widget-configurator/src/app/configurator/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
index 236789ce6e..8d16e55fad 100644
--- a/apps/widget-configurator/src/app/configurator/index.tsx
+++ b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -162,7 +162,7 @@ export function Configurator({ title }: { title: string }) {
       renderInput={(params) => <TextField {...params} label="Network" />}
     />
 
-        <Divider variant="middle">Default selection</Divider>
+        <Divider variant="middle">Token selection</Divider>
 
         <Autocomplete
           value={sellToken}

From 6c39e14e130dc804c046ba692ac68c5aab841d36 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Thu, 12 Oct 2023 18:35:10 +0100
Subject: [PATCH 19/26] feat: widget configurator app

---
 .../src/app/configurator/index.tsx                  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
index 8d16e55fad..b4aa6edf7c 100644
--- a/apps/widget-configurator/src/app/configurator/index.tsx
+++ b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -18,7 +18,8 @@ import Divider from '@mui/material/Divider'
 import EmbedDialog from './embedDialog'
 import Checkbox from '@mui/material/Checkbox'
 import ListItemText from '@mui/material/ListItemText'
-import SaveIcon from '@mui/icons-material/Save'
+// import SaveIcon from '@mui/icons-material/Save'
+import WalletIcon from '@mui/icons-material/Wallet'
 import LoadingButton from '@mui/lab/LoadingButton'
 
 enum TradeMode {
@@ -101,6 +102,12 @@ export function Configurator({ title }: { title: string }) {
           {title}
         </Typography>
 
+        <Divider variant="middle">Wallet</Divider>
+
+        <LoadingButton loading={false} loadingPosition="start" startIcon={<WalletIcon />} variant="contained" onClick={handleWidgetRefreshClick}>
+          Connect
+        </LoadingButton>
+
         <Divider variant="middle">General</Divider>
 
         <FormControl sx={{ width: '100%' }}>
@@ -199,9 +206,9 @@ export function Configurator({ title }: { title: string }) {
 
         <Divider variant="middle" />
 
-        <LoadingButton loading={false} loadingPosition="start" startIcon={<SaveIcon />} variant="contained" onClick={handleWidgetRefreshClick}>
+        {/* <LoadingButton loading={false} loadingPosition="start" startIcon={<SaveIcon />} variant="contained" onClick={handleWidgetRefreshClick}>
           Refresh Widget
-        </LoadingButton>
+        </LoadingButton> */}
 
         <EmbedDialog />
 

From 8638950e1a3db524dd20403c065743e361dc604b Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Thu, 12 Oct 2023 20:03:13 +0100
Subject: [PATCH 20/26] feat: widget configurator app

---
 .../src/app/configurator/embedDialog.tsx      |  2 +-
 .../src/app/configurator/index.tsx            | 90 ++++++++++++-------
 2 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/apps/widget-configurator/src/app/configurator/embedDialog.tsx b/apps/widget-configurator/src/app/configurator/embedDialog.tsx
index 87bfdd1ac8..2b5ef2a874 100644
--- a/apps/widget-configurator/src/app/configurator/embedDialog.tsx
+++ b/apps/widget-configurator/src/app/configurator/embedDialog.tsx
@@ -31,7 +31,7 @@ export default function EmbedDialog() {
 
   return (
     <div>
-      <Button onClick={handleClickOpen('paper')}>{`View Embed Code </>`}</Button>
+      <Button variant="outlined" onClick={handleClickOpen('paper')}>{`View Embed Code </>`}</Button>
       {/* <Button onClick={handleClickOpen('body')}>scroll=body</Button> */}
       <Dialog
         open={open}
diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
index b4aa6edf7c..785ec2cd3d 100644
--- a/apps/widget-configurator/src/app/configurator/index.tsx
+++ b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -42,8 +42,8 @@ const TradeModeOptions = [
 
 const NetworkOptions = [
   { chainID: 1, label: 'Ethereum' },
-  { chainID: 100, label: 'Gnosis Chain' }
-];
+  { chainID: 100, label: 'Gnosis Chain' },
+]
 
 const TokenOptions = ['COW', 'USDC']
 
@@ -61,9 +61,9 @@ export function Configurator({ title }: { title: string }) {
       toggleColorMode()
     }
 
-    const url = new URL(iframeURL);
-    url.searchParams.set('theme', selectedTheme);
-    setIframeURL(url.toString());
+    const url = new URL(iframeURL)
+    url.searchParams.set('theme', selectedTheme)
+    setIframeURL(url.toString())
   }
 
   const [tradeModes, setTradeModes] = React.useState<TradeMode[]>([TradeMode.Swap, TradeMode.Limit, TradeMode.TWAP])
@@ -71,29 +71,29 @@ export function Configurator({ title }: { title: string }) {
     setTradeModes(event.target.value as TradeMode[])
   }
 
-  const [network, setNetwork] = React.useState<{ chainID: number; label: string } | null>(NetworkOptions[0]);
+  const [network, setNetwork] = React.useState<{ chainID: number; label: string } | null>(NetworkOptions[0])
   const [sellToken, setSellToken] = React.useState<string | null>(TokenOptions[0])
-  const [sellTokenAmount, setSellTokenAmount] = React.useState<number>(100000);
+  const [sellTokenAmount, setSellTokenAmount] = React.useState<number>(100000)
   const [buyToken, setBuyToken] = React.useState<string | null>(TokenOptions[0])
-  const [buyTokenAmount, setBuyTokenAmount] = React.useState<number>(100000);
+  const [buyTokenAmount, setBuyTokenAmount] = React.useState<number>(100000)
 
-  const [iframeURL, setIframeURL] = React.useState<string>('');
+  const [iframeURL, setIframeURL] = React.useState<string>('')
 
   const constructIframeURL = React.useCallback(() => {
     if (network) {
-      return `https://swap-dev-git-widget-ui-5b-cowswap.vercel.app/#/${network.chainID}/widget/swap/${sellToken}/${buyToken}?sellAmount=${sellTokenAmount}&buyAmount=${buyTokenAmount}&theme=${mode}`;
+      return `https://swap-dev-git-widget-ui-5b-cowswap.vercel.app/#/${network.chainID}/widget/swap/${sellToken}/${buyToken}?sellAmount=${sellTokenAmount}&buyAmount=${buyTokenAmount}&theme=${mode}`
     }
-    return '';
-  }, [sellToken, buyToken, sellTokenAmount, buyTokenAmount, mode, network]);
+    return ''
+  }, [sellToken, buyToken, sellTokenAmount, buyTokenAmount, mode, network])
 
   React.useEffect(() => {
-    setIframeURL(constructIframeURL());
-  }, [constructIframeURL, network]);
-  
+    setIframeURL(constructIframeURL())
+  }, [constructIframeURL, network])
+
   const handleWidgetRefreshClick = () => {
-    const newIframeURL = constructIframeURL();
-    setIframeURL(newIframeURL);
-  };
+    const newIframeURL = constructIframeURL()
+    setIframeURL(newIframeURL)
+  }
 
   return (
     <Box sx={WrapperStyled}>
@@ -104,7 +104,13 @@ export function Configurator({ title }: { title: string }) {
 
         <Divider variant="middle">Wallet</Divider>
 
-        <LoadingButton loading={false} loadingPosition="start" startIcon={<WalletIcon />} variant="contained" onClick={handleWidgetRefreshClick}>
+        <LoadingButton
+          loading={false}
+          loadingPosition="start"
+          startIcon={<WalletIcon />}
+          variant="contained"
+          onClick={handleWidgetRefreshClick}
+        >
           Connect
         </LoadingButton>
 
@@ -158,16 +164,16 @@ export function Configurator({ title }: { title: string }) {
         </FormControl>
 
         <Autocomplete
-      value={network}
-      onChange={(event: any, newValue: { chainID: number; label: string } | null) => {
-        setNetwork(newValue);
-      }}
-      getOptionLabel={(option) => option.label}
-      id="controllable-states-network"
-      options={NetworkOptions}
-      size="small"
-      renderInput={(params) => <TextField {...params} label="Network" />}
-    />
+          value={network}
+          onChange={(event: any, newValue: { chainID: number; label: string } | null) => {
+            setNetwork(newValue)
+          }}
+          getOptionLabel={(option) => option.label}
+          id="controllable-states-network"
+          options={NetworkOptions}
+          size="small"
+          renderInput={(params) => <TextField {...params} label="Network" />}
+        />
 
         <Divider variant="middle">Token selection</Divider>
 
@@ -186,7 +192,13 @@ export function Configurator({ title }: { title: string }) {
           renderInput={(params) => <TextField {...params} label="Sell Token" />}
         />
 
-        <TextField id="input-sellTokenAmount" label="Sell amount" value={sellTokenAmount} onChange={(e) => setSellTokenAmount(Number(e.target.value))} size="small" />
+        <TextField
+          id="input-sellTokenAmount"
+          label="Sell amount"
+          value={sellTokenAmount}
+          onChange={(e) => setSellTokenAmount(Number(e.target.value))}
+          size="small"
+        />
 
         <Autocomplete
           value={buyToken}
@@ -202,7 +214,13 @@ export function Configurator({ title }: { title: string }) {
           renderInput={(params) => <TextField {...params} label="Buy Token" size="small" />}
         />
 
-        <TextField id="input-buyTokenAmount" label="Buy amount" value={buyTokenAmount} onChange={(e) => setBuyTokenAmount(Number(e.target.value))} size="small" />
+        <TextField
+          id="input-buyTokenAmount"
+          label="Buy amount"
+          value={buyTokenAmount}
+          onChange={(e) => setBuyTokenAmount(Number(e.target.value))}
+          size="small"
+        />
 
         <Divider variant="middle" />
 
@@ -210,15 +228,19 @@ export function Configurator({ title }: { title: string }) {
           Refresh Widget
         </LoadingButton> */}
 
-        <EmbedDialog />
-
         <Link href="#hide" onClick={() => setIsDrawerOpen(false)}>
-          Hide configurator
+          Hide drawer
         </Link>
       </Drawer>
 
       <Box sx={ContentStyled}>
         <iframe src={iframeURL} width="400px" height="640px" title="widget" />
+
+        <Box sx={{ display: 'flex', flexFlow: 'column wrap', justifyContent: 'space-between', alignItems: 'center', margin: '1.6rem 0 0', gap: '2.4rem'}}>
+        <Typography variant="body2">URL: {iframeURL}</Typography>
+        <EmbedDialog />
+        </Box>
+
       </Box>
     </Box>
   )

From 790abd03747fbc7c66f4dd3f56abdeb6a1f2a42e Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Fri, 13 Oct 2023 17:30:06 +0100
Subject: [PATCH 21/26] feat: widget configurator app

---
 .../src/assets/icon/wallet.svg                |  2 +-
 .../src/legacy/components/Header/index.tsx    | 12 ++----
 .../components/Settings/SettingsMod.tsx       |  2 +-
 .../src/legacy/theme/baseTheme.tsx            |  2 +-
 .../pure/OrdersTableContainer/index.tsx       | 19 ++++++----
 .../trade/containers/TradeWidget/index.tsx    |  2 +-
 .../trade/containers/TradeWidget/styled.tsx   | 36 +++++++-----------
 .../wallet/containers/Web3Status/index.tsx    | 14 ++++---
 .../modules/wallet/pure/StatusIcon/index.tsx  |  2 +-
 .../wallet/pure/Web3StatusInner/index.tsx     | 15 ++++----
 .../wallet/pure/Web3StatusInner/styled.ts     | 37 ++++---------------
 .../src/app/configurator/index.tsx            | 20 +++++++---
 12 files changed, 70 insertions(+), 93 deletions(-)

diff --git a/apps/cowswap-frontend/src/assets/icon/wallet.svg b/apps/cowswap-frontend/src/assets/icon/wallet.svg
index 2833ba1b63..a320a3cd8b 100644
--- a/apps/cowswap-frontend/src/assets/icon/wallet.svg
+++ b/apps/cowswap-frontend/src/assets/icon/wallet.svg
@@ -1 +1 @@
-<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.722 9.722c.646 0 1.167-.52 1.167-1.166 0-.646-.521-1.167-1.167-1.167-.645 0-1.166.521-1.166 1.167 0 .645.52 1.166 1.166 1.166ZM3.112 0h7.777c.863 0 1.555.7 1.555 1.556V3.11c.864 0 1.556.7 1.556 1.556v7.777A1.55 1.55 0 0 1 12.444 14H3.111A3.11 3.11 0 0 1 0 10.889V3.11A3.11 3.11 0 0 1 3.111 0Zm7.777 3.111V1.556H3.11c-.855 0-1.555.7-1.555 1.555v.42c.458-.264.987-.42 1.555-.42h7.778ZM1.556 10.89c0 .863.7 1.555 1.555 1.555h9.333V4.667H3.111c-.855 0-1.555.7-1.555 1.555v4.667Z" fill="#0F2C61" fill-opacity=".6"/></svg>
\ No newline at end of file
+<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.722 9.722c.646 0 1.167-.52 1.167-1.166 0-.646-.521-1.167-1.167-1.167-.645 0-1.166.521-1.166 1.167 0 .645.52 1.166 1.166 1.166ZM3.112 0h7.777c.863 0 1.555.7 1.555 1.556V3.11c.864 0 1.556.7 1.556 1.556v7.777A1.55 1.55 0 0 1 12.444 14H3.111A3.11 3.11 0 0 1 0 10.889V3.11A3.11 3.11 0 0 1 3.111 0Zm7.777 3.111V1.556H3.11c-.855 0-1.555.7-1.555 1.555v.42c.458-.264.987-.42 1.555-.42h7.778ZM1.556 10.89c0 .863.7 1.555 1.555 1.555h9.333V4.667H3.111c-.855 0-1.555.7-1.555 1.555v4.667Z" fill="#0F2C61"/></svg>
\ No newline at end of file
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
index 581b097f3f..c372e56e99 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 { 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'
@@ -52,20 +51,20 @@ const CHAIN_CURRENCY_LABELS: { [chainId in ChainId]?: string } = {
 }
 
 // Todo: fix 'any' types
-export const AccountElementComponent = ({ pendingActivity, handleOpenOrdersPanel }: any) => {
+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 ?? '']
-  const isInjectedWidgetMode = isInjectedWidget()
 
   return (
     <AccountElement active={!!account} onClick={handleOpenOrdersPanel}>
-      {!isInjectedWidgetMode && account && !isChainIdUnsupported && userEthBalance && chainId && (
+      {!isWidgetMode && account && !isChainIdUnsupported && userEthBalance && chainId && (
         <BalanceText>
           <TokenAmount amount={userEthBalance} tokenSymbol={{ symbol: nativeToken }} />
         </BalanceText>
       )}
+
       <Web3Status pendingActivities={pendingActivity} />
     </AccountElement>
   )
@@ -73,11 +72,8 @@ export const AccountElementComponent = ({ pendingActivity, handleOpenOrdersPanel
 
 export default function Header() {
   const { account, chainId } = useWalletInfo()
-  const isInjectedWidgetMode = isInjectedWidget()
   const injectedWidgetParams = useInjectedWidgetParams()
-
   const isChainIdUnsupported = useIsProviderNetworkUnsupported()
-
   const { pendingActivity } = useCategorizeRecentActivity()
   const [darkMode, toggleDarkModeAux] = useDarkModeManager()
   const toggleDarkMode = useCallback(() => {
@@ -141,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 ? (
diff --git a/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx b/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx
index 7de384b883..740f718e45 100644
--- a/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx
@@ -65,7 +65,7 @@ export const EmojiWrapper = styled.div`
 `
 
 const StyledMenu = styled.div`
-  margin: 0 0 0 auto;
+  margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
index ef57e93e46..641bfa2dad 100644
--- a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
+++ b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
@@ -412,7 +412,7 @@ export const UniThemedGlobalStyle = css`
     ${UI.BOX_SHADOW_NORMAL}: 0 1.5rem 1rem #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d;
 
     // Icons
-    ${UI.ICON_SIZE_NORMAL}: 24px;
+    ${UI.ICON_SIZE_NORMAL}: 20px;
     ${UI.ICON_SIZE_SMALL}: 16px;
     ${UI.ICON_SIZE_XSMALL}: 14px;
     ${UI.ICON_COLOR_NORMAL}: var(${UI.COLOR_TEXT1});
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 3572e28bbf..15cc04d0d0 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
 
 import cowMeditatingV2 from '@cowprotocol/assets/cow-swap/meditating-cow-v2.svg'
 import imageConnectWallet from '@cowprotocol/assets/cow-swap/wallet-plus.svg'
+import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { ExternalLink } from '@cowprotocol/ui'
 
 import { Trans } from '@lingui/macro'
@@ -178,14 +179,18 @@ export function OrdersTableContainer({
           <h3>
             <Trans>Connect a wallet</Trans>
           </h3>
-          <p>
-            <Trans>
-              To use {orderType} orders, please connect your wallet <br />
-              to one of our supported networks.
-            </Trans>
-          </p>
+          {!isInjectedWidget && (
+            <>
+              <p>
+                <Trans>
+                  To use {orderType} orders, please connect your wallet <br />
+                  to one of our supported networks.
+                </Trans>
+              </p>
 
-          <Web3Status pendingActivities={pendingActivities} />
+              <Web3Status pendingActivities={pendingActivities} />
+            </>
+          )}
         </Content>
       )
     }
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 5cdb66206e..3f3abc9394 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
@@ -150,7 +150,7 @@ export function TradeWidget(props: TradeWidgetProps) {
         <styledEl.ContainerBox>
           <styledEl.Header>
             <TradeWidgetLinks isDropdown={isInjectedWidgetMode} />
-            {isInjectedWidgetMode && <AccountElementComponent pendingActivity={pendingActivity} handleOpenOrdersPanel={handleOpenOrdersPanel} />}
+            {isInjectedWidgetMode && <AccountElementComponent isWidgetMode={isInjectedWidgetMode} pendingActivity={pendingActivity} handleOpenOrdersPanel={handleOpenOrdersPanel} />}
             {!lockScreen && settingsWidget}
           </styledEl.Header>
 
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
index a528a2562a..d0db6d5151 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
@@ -4,7 +4,7 @@ import { AccountElement } from 'legacy/components/Header/styled'
 
 import { SetRecipient } from 'modules/swap/containers/SetRecipient'
 import { Wrapper as AccountWrapper } from 'modules/wallet/pure/Web3StatusInner/styled'
-import { Web3StatusConnect, Web3StatusConnected } from 'modules/wallet/pure/Web3StatusInner/styled'
+import { Web3StatusConnect } from 'modules/wallet/pure/Web3StatusInner/styled'
 
 import { UI } from 'common/constants/theme'
 
@@ -35,11 +35,7 @@ export const Header = styled.div`
 
   ${AccountElement} {
     margin: 0 20px 0 auto;
-
-    &:hover {
-      border-color: transparent;
-      background: var(${UI.COLOR_GREY});
-    }
+    border: 0;
   }
 
   ${AccountElement} > ${AccountWrapper} {
@@ -48,14 +44,19 @@ export const Header = styled.div`
 
   ${AccountElement} ${Web3StatusConnect} {
     margin: 0;
-    padding: 0;
+    padding: 6px 12px;
     background: 0;
     border: 0;
-    font-size: 13px;
+    font-size: 14px;
     font-weight: var(${UI.FONT_WEIGHT_MEDIUM});
-    color: var(${UI.COLOR_TEXT2});
-    transition: color 0.2s ease-in-out;
+    color: var(${UI.COLOR_TEXT1});
+    transition: all 0.2s ease-in-out;
     gap: 6px;
+    opacity: 0.7;
+
+    &:hover {
+      background: var(${UI.COLOR_GREY});
+    }
 
     > svg {
       --size: var(${UI.ICON_SIZE_SMALL});
@@ -64,21 +65,10 @@ export const Header = styled.div`
       margin: 0;
     }
 
-    &:hover {
-      color: var(${UI.COLOR_TEXT1});
+    > svg > path {
+      fill: var(${UI.COLOR_TEXT1});
     }
   }
-
-  ${AccountElement} ${Web3StatusConnect} > p {
-    color: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-    margin: 0;
-  }
-
-  ${AccountElement} ${Web3StatusConnected} {
-    padding: 6px;
-  }
 `
 
 export const CurrencySeparatorBox = styled.div<{ withRecipient: boolean; compactView: boolean }>`
diff --git a/apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx b/apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
index 98d9318854..2a9aea6b8f 100644
--- a/apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
+++ b/apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
@@ -1,4 +1,4 @@
-import { STORAGE_KEY_LAST_PROVIDER } from '@cowprotocol/common-const'
+import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { useWalletDetails, useWalletInfo, getWeb3ReactConnection } from '@cowprotocol/wallet'
 import { useWeb3React } from '@web3-react/core'
 
@@ -13,9 +13,12 @@ import { WalletModal } from '../WalletModal'
 
 export function Web3Status({ pendingActivities }: { pendingActivities: string[] }) {
   const { connector } = useWeb3React()
-  const { account, active, chainId } = useWalletInfo()
+  const { account, 
+    active, 
+    chainId } = useWalletInfo()
   const { ensName } = useWalletDetails()
   const connectionType = getWeb3ReactConnection(connector).type
+  const isInjectedWidgetMode = isInjectedWidget()
 
   const error = useAppSelector(
     (state) => state.connection.errorByConnectionType[getWeb3ReactConnection(connector).type]
@@ -24,14 +27,12 @@ export function Web3Status({ pendingActivities }: { pendingActivities: string[]
   const toggleWalletModal = useToggleWalletModal()
   useCloseFollowTxPopupIfNotPendingOrder()
 
-  const latestProvider = localStorage.getItem(STORAGE_KEY_LAST_PROVIDER)
-
-  if (!active && !latestProvider) {
+  if (!active) {
     return null
   }
 
   return (
-    <Wrapper>
+    <Wrapper isWidgetMode={isInjectedWidgetMode}>
       <Web3StatusInner
         pendingCount={pendingActivities.length}
         account={account}
@@ -40,6 +41,7 @@ export function Web3Status({ pendingActivities }: { pendingActivities: string[]
         ensName={ensName}
         connectWallet={toggleWalletModal}
         connectionType={connectionType}
+        isWidgetMode={isInjectedWidgetMode}
       />
       <WalletModal />
       <AccountSelectorModal />
diff --git a/apps/cowswap-frontend/src/modules/wallet/pure/StatusIcon/index.tsx b/apps/cowswap-frontend/src/modules/wallet/pure/StatusIcon/index.tsx
index 6b37269109..9ab79535a2 100644
--- a/apps/cowswap-frontend/src/modules/wallet/pure/StatusIcon/index.tsx
+++ b/apps/cowswap-frontend/src/modules/wallet/pure/StatusIcon/index.tsx
@@ -7,7 +7,7 @@ const IconWrapper = styled.div<{ size?: number }>`
   ${({ theme }) => theme.flexColumnNoWrap};
   align-items: center;
   justify-content: center;
-  margin-right: 8px;
+
   & > img,
   span {
     height: ${({ size }) => (size ? size + 'px' : '32px')};
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 9c17e88b09..5b319f289c 100644
--- a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx
+++ b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx
@@ -1,5 +1,4 @@
 import { shortenAddress } from '@cowprotocol/common-utils'
-import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { Loader, RowBetween } from '@cowprotocol/ui'
 import { ConnectionType } from '@cowprotocol/wallet'
 
@@ -20,13 +19,13 @@ export interface Web3StatusInnerProps {
   connectWallet: () => void
   connectionType: ConnectionType
   ensName?: string | null
+  isWidgetMode: boolean
 }
 
 export function Web3StatusInner(props: Web3StatusInnerProps) {
-  const { account, pendingCount, chainId, error, ensName, connectionType, connectWallet } = props
+  const { account, pendingCount, chainId, error, ensName, connectionType, connectWallet, isWidgetMode } = props
 
   const hasPendingTransactions = !!pendingCount
-  const isInjectedWidgetMode = isInjectedWidget()
 
   if (!chainId) {
     return null
@@ -36,7 +35,7 @@ export function Web3StatusInner(props: Web3StatusInnerProps) {
     return (
       <Web3StatusError>
         <NetworkIcon />
-        <Text>
+        <Text isWidgetMode={isWidgetMode}>
           <Trans>Error</Trans>
         </Text>
       </Web3StatusError>
@@ -49,14 +48,14 @@ export function Web3StatusInner(props: Web3StatusInnerProps) {
         {hasPendingTransactions ? (
           <RowBetween>
             <FollowPendingTxPopup>
-              <Text>
+              <Text isWidgetMode={isWidgetMode}>
                 <Trans>{pendingCount} Pending</Trans>
               </Text>{' '}
             </FollowPendingTxPopup>
             <Loader stroke="white" />
           </RowBetween>
         ) : (
-          <Text>{ensName || shortenAddress(account)}</Text>
+          <Text isWidgetMode={isWidgetMode}>{ensName || shortenAddress(account)}</Text>
         )}
         {!hasPendingTransactions && <StatusIcon connectionType={connectionType} />}
       </Web3StatusConnected>
@@ -65,10 +64,10 @@ export function Web3StatusInner(props: Web3StatusInnerProps) {
 
   return (
     <Web3StatusConnect id="connect-wallet" onClick={connectWallet} faded={!account}>
-      <Text>
+      <Text isWidgetMode={isWidgetMode}>
         <Trans>Connect wallet</Trans>
       </Text>
-      {isInjectedWidgetMode && <SVG src={ICON_WALLET} title="Wallet" /> }
+      {isWidgetMode && <SVG src={ICON_WALLET} title="Wallet" /> }
     </Web3StatusConnect>
   )
 }
diff --git a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts
index 35738b87d3..40e70089bf 100644
--- a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts
+++ b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts
@@ -19,31 +19,7 @@ export const Web3StatusError = styled(Web3StatusGeneric)`
   }
 `
 
-export const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
-  /* border: none; */
-  /* color: ${({ theme }) => theme.primaryText1}; */
-  /* font-weight: 500; */
-
-  /* :hover,
-  :focus {
-    border: 1px solid ${({ theme }) => darken(0.05, theme.primary4)};
-    color: ${({ theme }) => theme.primaryText1};
-  } */
-
-  /* ${({ faded }) =>
-    faded &&
-    css`
-      background-color: ${({ theme }) => theme.primary5};
-      border: 1px solid ${({ theme }) => theme.primary5};
-      color: ${({ theme }) => theme.primaryText1};
-
-      :hover,
-      :focus {
-        border: 1px solid ${({ theme }) => darken(0.05, theme.primary4)};
-        color: ${({ theme }) => darken(0.05, theme.primaryText1)};
-      }
-    `} */
-`
+export const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>``
 
 export const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean; clickDisabled?: boolean }>`
   background-color: var(${UI.COLOR_GREY});
@@ -64,13 +40,13 @@ export const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean
     `}
 `
 
-export const Text = styled.p`
+export const Text = styled.p<{ isWidgetMode: boolean }>`
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin: 0 0.5rem 0 0.25rem;
-  font-size: 1rem;
+  margin: 0;
+  font-size: ${({ isWidgetMode }) => (isWidgetMode ? '15px' : '1rem')};
   width: fit-content;
   font-weight: 500;
 `
@@ -82,7 +58,7 @@ export const NetworkIcon = styled(Activity)`
   height: 16px;
 `
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{ isWidgetMode: boolean }>`
   color: var(${UI.COLOR_TEXT1});
   height: 40px;
   width: 100%;
@@ -97,11 +73,12 @@ export const Wrapper = styled.div`
     margin: 0 auto;
   `};
 
-  button {
+  > button {
     height: auto;
     border-radius: 21px;
     padding: 6px 12px;
     width: max-content;
+    gap: 6px;
   }
 
   ${Web3StatusConnected} {
diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
index 785ec2cd3d..2f04e07957 100644
--- a/apps/widget-configurator/src/app/configurator/index.tsx
+++ b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -164,9 +164,9 @@ export function Configurator({ title }: { title: string }) {
         </FormControl>
 
         <Autocomplete
-          value={network}
+          value={network || NetworkOptions[0]}
           onChange={(event: any, newValue: { chainID: number; label: string } | null) => {
-            setNetwork(newValue)
+            setNetwork(newValue || NetworkOptions[0])
           }}
           getOptionLabel={(option) => option.label}
           id="controllable-states-network"
@@ -236,11 +236,19 @@ export function Configurator({ title }: { title: string }) {
       <Box sx={ContentStyled}>
         <iframe src={iframeURL} width="400px" height="640px" title="widget" />
 
-        <Box sx={{ display: 'flex', flexFlow: 'column wrap', justifyContent: 'space-between', alignItems: 'center', margin: '1.6rem 0 0', gap: '2.4rem'}}>
-        <Typography variant="body2">URL: {iframeURL}</Typography>
-        <EmbedDialog />
+        <Box
+          sx={{
+            display: 'flex',
+            flexFlow: 'column wrap',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            margin: '1.6rem 0 0',
+            gap: '2.4rem',
+          }}
+        >
+          <Typography variant="body2">URL: {iframeURL}</Typography>
+          <EmbedDialog />
         </Box>
-
       </Box>
     </Box>
   )

From 65c6f0065be827d5919b6b669f6f19dbbdef912d Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Mon, 16 Oct 2023 12:29:54 +0100
Subject: [PATCH 22/26] feat: widget configurator app

---
 apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx       | 7 +++++++
 .../src/modules/wallet/containers/Web3Status/index.tsx     | 4 +---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
index 641bfa2dad..e951158846 100644
--- a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
+++ b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
@@ -528,6 +528,13 @@ export const ThemedGlobalStyle = createGlobalStyle`
     display: block!important;
   }
 
+    // Walletconnect V2 mobile override
+  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/wallet/containers/Web3Status/index.tsx b/apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
index 2a9aea6b8f..cf55f21755 100644
--- a/apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
+++ b/apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
@@ -13,9 +13,7 @@ import { WalletModal } from '../WalletModal'
 
 export function Web3Status({ pendingActivities }: { pendingActivities: string[] }) {
   const { connector } = useWeb3React()
-  const { account, 
-    active, 
-    chainId } = useWalletInfo()
+  const { account, active, chainId } = useWalletInfo()
   const { ensName } = useWalletDetails()
   const connectionType = getWeb3ReactConnection(connector).type
   const isInjectedWidgetMode = isInjectedWidget()

From a133ca52090e6961f25fc4397ea7559cef10e04a Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Mon, 16 Oct 2023 12:55:26 +0100
Subject: [PATCH 23/26] feat: widget configurator app

---
 apps/widget-configurator/src/app/configurator/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
index 2f04e07957..76c5083a83 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-5b-cowswap.vercel.app/#/${network.chainID}/widget/swap/${sellToken}/${buyToken}?sellAmount=${sellTokenAmount}&buyAmount=${buyTokenAmount}&theme=${mode}`
+      return `https://swap-dev-git-widget-ui-6-cowswap.vercel.app/#/${network.chainID}/widget/swap/${sellToken}/${buyToken}?sellAmount=${sellTokenAmount}&buyAmount=${buyTokenAmount}&theme=${mode}`
     }
     return ''
   }, [sellToken, buyToken, sellTokenAmount, buyTokenAmount, mode, network])

From 0abd19e3c940e63d1596fd580279d41436dca982 Mon Sep 17 00:00:00 2001
From: Alexandr Kazachenko <shoom3301@gmail.com>
Date: Wed, 18 Oct 2023 19:21:13 +0600
Subject: [PATCH 24/26] refactor: extract AccountElement and AccountModalState

---
 .../src/common/hooks/useOrdersPanel.ts        | 25 --------
 .../Header/AccountElement/index.tsx           | 38 ++++++++++++
 .../Header/AccountElement/styled.tsx          | 58 ++++++++++++++++++
 .../src/legacy/components/Header/index.tsx    | 53 ++---------------
 .../src/legacy/components/Header/styled.tsx   | 59 -------------------
 .../account/containers/OrdersPanel/index.tsx  | 19 +++---
 .../account/hooks/useAccountModalState.ts     |  7 +++
 .../account/hooks/useToggleAccountModal.ts    |  9 +++
 .../src/modules/account/index.ts              |  3 +
 .../account/state/accountModalState.ts        | 10 ++++
 .../application/containers/App/index.tsx      |  9 +--
 .../trade/containers/TradeWidget/index.tsx    | 12 ++--
 .../trade/containers/TradeWidget/styled.tsx   | 43 +-------------
 .../wallet/containers/Web3Status/index.tsx    | 11 ++--
 .../wallet/pure/Web3StatusInner/index.tsx     | 13 ++--
 .../wallet/pure/Web3StatusInner/styled.ts     | 45 ++++++++++++--
 .../src/jotai/atomWithPartialUpdate.ts        |  9 +--
 17 files changed, 205 insertions(+), 218 deletions(-)
 delete mode 100644 apps/cowswap-frontend/src/common/hooks/useOrdersPanel.ts
 create mode 100644 apps/cowswap-frontend/src/legacy/components/Header/AccountElement/index.tsx
 create mode 100644 apps/cowswap-frontend/src/legacy/components/Header/AccountElement/styled.tsx
 create mode 100644 apps/cowswap-frontend/src/modules/account/hooks/useAccountModalState.ts
 create mode 100644 apps/cowswap-frontend/src/modules/account/hooks/useToggleAccountModal.ts
 create mode 100644 apps/cowswap-frontend/src/modules/account/index.ts
 create mode 100644 apps/cowswap-frontend/src/modules/account/state/accountModalState.ts

diff --git a/apps/cowswap-frontend/src/common/hooks/useOrdersPanel.ts b/apps/cowswap-frontend/src/common/hooks/useOrdersPanel.ts
deleted file mode 100644
index 28ddcafe61..0000000000
--- a/apps/cowswap-frontend/src/common/hooks/useOrdersPanel.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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,
-  };
-};
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/index.tsx
new file mode 100644
index 0000000000..2abed3be76
--- /dev/null
+++ b/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { NATIVE_CURRENCY_BUY_TOKEN } from '@cowprotocol/common-const'
+import { TokenAmount } from '@cowprotocol/ui'
+import { useWalletInfo } from '@cowprotocol/wallet'
+
+import { useToggleAccountModal } from 'modules/account'
+import { useNativeCurrencyBalances } from 'modules/tokens/hooks/useCurrencyBalance'
+import { Web3Status } from 'modules/wallet/containers/Web3Status'
+
+import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetworkUnsupported'
+
+import { Wrapper, BalanceText } from './styled'
+
+interface AccountElementProps {
+  pendingActivities: string[]
+  isWidgetMode?: boolean
+  className?: string
+}
+
+export function AccountElement({ className, isWidgetMode, pendingActivities }: AccountElementProps) {
+  const { account, chainId } = useWalletInfo()
+  const isChainIdUnsupported = useIsProviderNetworkUnsupported()
+  const userEthBalance = useNativeCurrencyBalances(account ? [account] : [])?.[account ?? '']
+  const toggleAccountModal = useToggleAccountModal()
+  const nativeToken = NATIVE_CURRENCY_BUY_TOKEN[chainId].symbol
+
+  return (
+    <Wrapper className={className} active={!!account} onClick={() => account && toggleAccountModal()}>
+      {!isWidgetMode && account && !isChainIdUnsupported && userEthBalance && chainId && (
+        <BalanceText>
+          <TokenAmount amount={userEthBalance} tokenSymbol={{ symbol: nativeToken }} />
+        </BalanceText>
+      )}
+      <Web3Status pendingActivities={pendingActivities} />
+    </Wrapper>
+  )
+}
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/styled.tsx b/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/styled.tsx
new file mode 100644
index 0000000000..4671f68633
--- /dev/null
+++ b/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/styled.tsx
@@ -0,0 +1,58 @@
+import { transparentize } from 'polished'
+import { Text } from 'rebass'
+import styled from 'styled-components/macro'
+
+export const BalanceText = styled(Text)`
+  font-weight: 500;
+  font-size: 13px;
+  padding: 0 6px 0 12px;
+  min-width: initial;
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+    display: none;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    overflow: hidden;
+    max-width: 100px;
+    text-overflow: ellipsis;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
+`
+
+export const Wrapper = styled.div<{ active: boolean }>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg3)};
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg1)};
+  border-radius: 21px;
+  border: 2px solid transparent;
+  transition: border 0.2s ease-in-out;
+  pointer-events: auto;
+  width: auto;
+
+  :focus {
+    border: 1px solid blue;
+  }
+
+  &:hover {
+    border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)};
+  }
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    height: 100%;
+  `}
+
+  ${({ theme }) =>
+    theme.isInjectedWidgetMode &&
+    `
+    margin: 0 20px 0 auto!important;
+    border: 0!important;
+  `}
+`
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
index c372e56e99..96443e678b 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
@@ -1,9 +1,7 @@
-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 as ChainId, SupportedChainId } from '@cowprotocol/cow-sdk'
-import { TokenAmount } from '@cowprotocol/ui'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
 import SVG from 'react-inlinesvg'
@@ -11,30 +9,24 @@ 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 { OrdersPanel } from 'modules/account/containers/OrdersPanel'
 import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { MainMenuContext } from 'modules/mainMenu'
 import { MenuTree } from 'modules/mainMenu/pure/MenuTree'
 import { useSwapRawState } from 'modules/swap/hooks/useSwapRawState'
-import { useNativeCurrencyBalances } from 'modules/tokens/hooks/useCurrencyBalance'
 import { useTradeState } from 'modules/trade/hooks/useTradeState'
 import { getDefaultTradeRawState } from 'modules/trade/types/TradeRawState'
-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 { AccountElement } from './AccountElement'
 import MobileMenuIcon from './MobileMenuIcon'
 import {
-  AccountElement,
-  BalanceText,
   CustomLogoImg,
   HeaderControls,
   HeaderElement,
@@ -46,30 +38,6 @@ import {
   Wrapper,
 } from './styled'
 
-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 injectedWidgetParams = useInjectedWidgetParams()
@@ -83,14 +51,10 @@ export default function Header() {
   const swapRawState = useSwapRawState()
   const { state: tradeState } = useTradeState()
 
-  const { isOrdersPanelOpen, handleOpenOrdersPanel, handleCloseOrdersPanel } = useOrdersPanel();
-
   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(() => {
@@ -126,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 || isOrdersPanelOpen ? addBodyClass('noScroll') : removeBodyClass('noScroll')
-  }, [isOrdersPanelOpen, isMobileMenuOpen, isUpToLarge, isUpToMedium, isUpToSmall, isLargeAndUp])
-
   return (
     <Wrapper isMobileMenuOpen={isMobileMenuOpen}>
       <HeaderModWrapper>
@@ -165,12 +123,11 @@ export default function Header() {
               />
             )}
 
-            <AccountElementComponent pendingActivity={pendingActivity} handleOpenOrdersPanel={handleOpenOrdersPanel} />
+            <AccountElement pendingActivities={pendingActivity} />
           </HeaderElement>
         </HeaderControls>
 
         {isUpToLarge && <MobileMenuIcon isMobileMenuOpen={isMobileMenuOpen} onClick={handleMobileMenuOnClick} />}
-        {isOrdersPanelOpen && <OrdersPanel handleCloseOrdersPanel={handleCloseOrdersPanel} />}
       </HeaderModWrapper>
     </Wrapper>
   )
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx b/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
index 24d5e59293..5b4efb71ec 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
@@ -5,7 +5,6 @@ import { Row, RowFixed } from '@cowprotocol/ui'
 import useScrollPosition from '@react-hook/window-scroll'
 import { transparentize, darken } from 'polished'
 import { NavLink } from 'react-router-dom'
-import { Text } from 'rebass'
 import styled, { css } from 'styled-components/macro'
 
 import { MenuFlyout, MenuSection, Content as MenuContent, MenuTitle } from 'legacy/components/MenuDropdown/styled'
@@ -52,43 +51,6 @@ export const HeaderControlsUni = styled.div`
   `};
 `
 
-export const BalanceTextUni = styled(Text)`
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-    display: none;
-  `};
-`
-
-export const BalanceText = styled(BalanceTextUni)`
-  font-weight: 500;
-  font-size: 13px;
-  padding: 0 6px 0 12px;
-
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    overflow: hidden;
-    max-width: 100px;
-    text-overflow: ellipsis;
-  `};
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    display: none;
-  `};
-`
-
-export const AccountElementUni = styled.div<{ active: boolean }>`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  border-radius: 12px;
-  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg3)};
-  white-space: nowrap;
-  width: 100%;
-  cursor: pointer;
-
-  :focus {
-    border: 1px solid blue;
-  }
-`
-
 export const StyledNavLinkUni = styled(NavLink)`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: left;
@@ -113,27 +75,6 @@ export const StyledNavLinkUni = styled(NavLink)`
   }
 `
 
-export const AccountElement = styled(AccountElementUni)<{ active: boolean }>`
-  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg1)};
-  border-radius: 21px;
-  border: 2px solid transparent;
-  transition: border 0.2s ease-in-out;
-  pointer-events: auto;
-  width: auto;
-
-  &:hover {
-    border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)};
-  }
-
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    height: 100%;
-  `}
-
-  ${BalanceText} {
-    min-width: initial;
-  }
-`
-
 export const StyledMenuButton = styled.button`
   position: relative;
   width: 100%;
diff --git a/apps/cowswap-frontend/src/modules/account/containers/OrdersPanel/index.tsx b/apps/cowswap-frontend/src/modules/account/containers/OrdersPanel/index.tsx
index 2b8d9012b8..fac493e916 100644
--- a/apps/cowswap-frontend/src/modules/account/containers/OrdersPanel/index.tsx
+++ b/apps/cowswap-frontend/src/modules/account/containers/OrdersPanel/index.tsx
@@ -13,6 +13,8 @@ import { toggleAccountSelectorModalAtom } from 'modules/wallet/containers/Accoun
 import { UI } from 'common/constants/theme'
 import { useCategorizeRecentActivity } from 'common/hooks/useCategorizeRecentActivity'
 
+import { useAccountModalState } from '../../hooks/useAccountModalState'
+import { useToggleAccountModal } from '../../hooks/useToggleAccountModal'
 import { AccountDetails } from '../AccountDetails'
 
 const SideBar = styled.div`
@@ -49,7 +51,7 @@ const SidebarBackground = styled.div`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1;
+  z-index: 4;
   width: 100%;
   height: 100%;
   background: ${({ theme }) => transparentize(0.1, theme.black)};
@@ -123,21 +125,18 @@ const Wrapper = styled.div`
   ${({ theme }) => theme.colorScrollbar};
 `
 
-export interface OrdersPanelProps {
-  handleCloseOrdersPanel: () => void
-}
-
-export function OrdersPanel({ handleCloseOrdersPanel }: OrdersPanelProps) {
+// TODO: rename the component into AccountModal
+export function OrdersPanel() {
   const { active } = useWalletInfo()
   const { ensName } = useWalletDetails()
   const toggleWalletModal = useToggleWalletModal()
   const toggleAccountSelectorModal = useSetAtom(toggleAccountSelectorModalAtom)
-
+  const { isOpen } = useAccountModalState()
   const { pendingActivity, confirmedActivity } = useCategorizeRecentActivity()
 
-  const ENSName = ensName
+  const handleCloseOrdersPanel = useToggleAccountModal()
 
-  if (!active) {
+  if (!active || !isOpen) {
     return null
   }
 
@@ -152,7 +151,7 @@ export function OrdersPanel({ handleCloseOrdersPanel }: OrdersPanelProps) {
           </Header>
 
           <AccountDetails
-            ENSName={ENSName}
+            ENSName={ensName}
             pendingTransactions={pendingActivity}
             confirmedTransactions={confirmedActivity}
             toggleWalletModal={toggleWalletModal}
diff --git a/apps/cowswap-frontend/src/modules/account/hooks/useAccountModalState.ts b/apps/cowswap-frontend/src/modules/account/hooks/useAccountModalState.ts
new file mode 100644
index 0000000000..5455ca5ee2
--- /dev/null
+++ b/apps/cowswap-frontend/src/modules/account/hooks/useAccountModalState.ts
@@ -0,0 +1,7 @@
+import { useAtomValue } from 'jotai'
+
+import { AccountModalState, accountModalStateAtom } from '../state/accountModalState'
+
+export function useAccountModalState(): AccountModalState {
+  return useAtomValue(accountModalStateAtom)
+}
diff --git a/apps/cowswap-frontend/src/modules/account/hooks/useToggleAccountModal.ts b/apps/cowswap-frontend/src/modules/account/hooks/useToggleAccountModal.ts
new file mode 100644
index 0000000000..773747062d
--- /dev/null
+++ b/apps/cowswap-frontend/src/modules/account/hooks/useToggleAccountModal.ts
@@ -0,0 +1,9 @@
+import { useSetAtom } from 'jotai'
+
+import { updateAccountModalStateAtom } from '../state/accountModalState'
+
+export function useToggleAccountModal() {
+  const updateAccountModalState = useSetAtom(updateAccountModalStateAtom)
+
+  return () => updateAccountModalState((prev) => ({ isOpen: !prev.isOpen }))
+}
diff --git a/apps/cowswap-frontend/src/modules/account/index.ts b/apps/cowswap-frontend/src/modules/account/index.ts
new file mode 100644
index 0000000000..c2e758557c
--- /dev/null
+++ b/apps/cowswap-frontend/src/modules/account/index.ts
@@ -0,0 +1,3 @@
+export { OrdersPanel } from './containers/OrdersPanel'
+export { useToggleAccountModal } from './hooks/useToggleAccountModal'
+export { useAccountModalState } from './hooks/useAccountModalState'
diff --git a/apps/cowswap-frontend/src/modules/account/state/accountModalState.ts b/apps/cowswap-frontend/src/modules/account/state/accountModalState.ts
new file mode 100644
index 0000000000..d33550d8c3
--- /dev/null
+++ b/apps/cowswap-frontend/src/modules/account/state/accountModalState.ts
@@ -0,0 +1,10 @@
+import { atom } from 'jotai'
+
+import { atomWithPartialUpdate } from '@cowprotocol/common-utils'
+
+export interface AccountModalState {
+  isOpen: boolean
+}
+export const { atom: accountModalStateAtom, updateAtom: updateAccountModalStateAtom } = atomWithPartialUpdate(
+  atom<AccountModalState>({ isOpen: false })
+)
diff --git a/apps/cowswap-frontend/src/modules/application/containers/App/index.tsx b/apps/cowswap-frontend/src/modules/application/containers/App/index.tsx
index 0137ad47cf..1f2a59ec5a 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/App/index.tsx
+++ b/apps/cowswap-frontend/src/modules/application/containers/App/index.tsx
@@ -7,15 +7,15 @@ import URLWarning from 'legacy/components/Header/URLWarning'
 import TopLevelModals from 'legacy/components/TopLevelModals'
 import DarkModeQueryParamReader from 'legacy/theme'
 
+import { OrdersPanel } from 'modules/account'
 import { useInitializeUtm } from 'modules/utm'
 
+import { useAnalyticsReporter } from 'common/hooks/useAnalyticsReporter'
 import RedirectAnySwapAffectedUsers from 'pages/error/AnySwapAffectedUsers/RedirectAnySwapAffectedUsers'
 
 import { RoutesApp } from './RoutesApp'
 import * as styledEl from './styled'
 
-import { useAnalyticsReporter } from '../../../../common/hooks/useAnalyticsReporter'
-
 export function App() {
   useAnalyticsReporter()
   useInitializeUtm()
@@ -30,13 +30,15 @@ export function App() {
       <styledEl.AppWrapper>
         <URLWarning />
 
+        <OrdersPanel />
+
         {/* Hide header for injected widget mode */}
         {!isInjectedWidgetMode && (
           <styledEl.HeaderWrapper>
             <Header />
           </styledEl.HeaderWrapper>
         )}
-        
+
         <styledEl.BodyWrapper>
           <TopLevelModals />
           <RoutesApp />
@@ -50,7 +52,6 @@ export function App() {
             <Footer />
           </styledEl.FooterWrapper>
         )}
-        
       </styledEl.AppWrapper>
     </ErrorBoundary>
   )
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 3f3abc9394..59bc94d6ae 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
@@ -6,10 +6,9 @@ import { useIsSafeWallet, useWalletDetails, useWalletInfo } from '@cowprotocol/w
 
 import { t } from '@lingui/macro'
 
-import { AccountElementComponent } from 'legacy/components/Header'
+import { AccountElement } from 'legacy/components/Header/AccountElement'
 import { PriceImpact } from 'legacy/hooks/usePriceImpact'
 
-import { OrdersPanel } from 'modules/account/containers/OrdersPanel'
 import { TradeWidgetLinks } from 'modules/application/containers/TradeWidgetLinks'
 import { SetRecipientProps } from 'modules/swap/containers/SetRecipient'
 import { useIsWrapOrUnwrap } from 'modules/trade/hooks/useIsWrapOrUnwrap'
@@ -19,7 +18,6 @@ import { TradeQuoteUpdater } from 'modules/tradeQuote'
 
 import { useCategorizeRecentActivity } from 'common/hooks/useCategorizeRecentActivity'
 import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetworkUnsupported'
-import { useOrdersPanel } from 'common/hooks/useOrdersPanel'
 import { useThrottleFn } from 'common/hooks/useThrottleFn'
 import { CurrencyArrowSeparator } from 'common/pure/CurrencyArrowSeparator'
 import { CurrencyInputPanel, CurrencyInputPanelProps } from 'common/pure/CurrencyInputPanel'
@@ -34,7 +32,6 @@ import { PriceImpactUpdater } from '../../updaters/PriceImpactUpdater'
 import { WrapFlowActionButton } from '../WrapFlowActionButton'
 import { WrapNativeModal } from '../WrapNativeModal'
 
-
 export interface TradeWidgetActions {
   onCurrencySelection: CurrencyInputPanelProps['onCurrencySelection']
   onUserInput: CurrencyInputPanelProps['onUserInput']
@@ -131,7 +128,6 @@ export function TradeWidget(props: TradeWidgetProps) {
   const isInjectedWidgetMode = isInjectedWidget()
 
   const { pendingActivity } = useCategorizeRecentActivity()
-  const { isOrdersPanelOpen, handleOpenOrdersPanel, handleCloseOrdersPanel } = useOrdersPanel()
 
   return (
     <styledEl.Container id={id}>
@@ -150,7 +146,9 @@ export function TradeWidget(props: TradeWidgetProps) {
         <styledEl.ContainerBox>
           <styledEl.Header>
             <TradeWidgetLinks isDropdown={isInjectedWidgetMode} />
-            {isInjectedWidgetMode && <AccountElementComponent isWidgetMode={isInjectedWidgetMode} pendingActivity={pendingActivity} handleOpenOrdersPanel={handleOpenOrdersPanel} />}
+            {isInjectedWidgetMode && (
+              <AccountElement isWidgetMode={isInjectedWidgetMode} pendingActivities={pendingActivity} />
+            )}
             {!lockScreen && settingsWidget}
           </styledEl.Header>
 
@@ -205,8 +203,6 @@ export function TradeWidget(props: TradeWidgetProps) {
           )}
         </styledEl.ContainerBox>
       </styledEl.Container>
-
-      {isOrdersPanelOpen && <OrdersPanel handleCloseOrdersPanel={handleCloseOrdersPanel} />}
     </styledEl.Container>
   )
 }
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
index d0db6d5151..5a09ff0406 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
@@ -1,10 +1,6 @@
 import styled from 'styled-components/macro'
 
-import { AccountElement } from 'legacy/components/Header/styled'
-
 import { SetRecipient } from 'modules/swap/containers/SetRecipient'
-import { Wrapper as AccountWrapper } from 'modules/wallet/pure/Web3StatusInner/styled'
-import { Web3StatusConnect } from 'modules/wallet/pure/Web3StatusInner/styled'
 
 import { UI } from 'common/constants/theme'
 
@@ -30,45 +26,8 @@ export const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: ${({ theme }) => theme.isInjectedWidgetMode ? '0 7px' : '0 5px 0 0'};
+  padding: ${({ theme }) => (theme.isInjectedWidgetMode ? '0 7px' : '0 5px 0 0')};
   margin: 0;
-
-  ${AccountElement} {
-    margin: 0 20px 0 auto;
-    border: 0;
-  }
-
-  ${AccountElement} > ${AccountWrapper} {
-    height: initial;
-  }
-
-  ${AccountElement} ${Web3StatusConnect} {
-    margin: 0;
-    padding: 6px 12px;
-    background: 0;
-    border: 0;
-    font-size: 14px;
-    font-weight: var(${UI.FONT_WEIGHT_MEDIUM});
-    color: var(${UI.COLOR_TEXT1});
-    transition: all 0.2s ease-in-out;
-    gap: 6px;
-    opacity: 0.7;
-
-    &:hover {
-      background: var(${UI.COLOR_GREY});
-    }
-
-    > svg {
-      --size: var(${UI.ICON_SIZE_SMALL});
-      height: var(--size);
-      width: var(--size);
-      margin: 0;
-    }
-
-    > svg > path {
-      fill: var(${UI.COLOR_TEXT1});
-    }
-  }
 `
 
 export const CurrencySeparatorBox = styled.div<{ withRecipient: boolean; compactView: boolean }>`
diff --git a/apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx b/apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
index cf55f21755..ac5836bffe 100644
--- a/apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
+++ b/apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
@@ -1,4 +1,3 @@
-import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { useWalletDetails, useWalletInfo, getWeb3ReactConnection } from '@cowprotocol/wallet'
 import { useWeb3React } from '@web3-react/core'
 
@@ -11,12 +10,15 @@ import { AccountSelectorModal } from '../AccountSelectorModal'
 import { useCloseFollowTxPopupIfNotPendingOrder } from '../FollowPendingTxPopup'
 import { WalletModal } from '../WalletModal'
 
-export function Web3Status({ pendingActivities }: { pendingActivities: string[] }) {
+export interface Web3StatusProps {
+  pendingActivities: string[]
+  className?: string
+}
+export function Web3Status({ pendingActivities, className }: Web3StatusProps) {
   const { connector } = useWeb3React()
   const { account, active, chainId } = useWalletInfo()
   const { ensName } = useWalletDetails()
   const connectionType = getWeb3ReactConnection(connector).type
-  const isInjectedWidgetMode = isInjectedWidget()
 
   const error = useAppSelector(
     (state) => state.connection.errorByConnectionType[getWeb3ReactConnection(connector).type]
@@ -30,7 +32,7 @@ export function Web3Status({ pendingActivities }: { pendingActivities: string[]
   }
 
   return (
-    <Wrapper isWidgetMode={isInjectedWidgetMode}>
+    <Wrapper className={className}>
       <Web3StatusInner
         pendingCount={pendingActivities.length}
         account={account}
@@ -39,7 +41,6 @@ export function Web3Status({ pendingActivities }: { pendingActivities: string[]
         ensName={ensName}
         connectWallet={toggleWalletModal}
         connectionType={connectionType}
-        isWidgetMode={isInjectedWidgetMode}
       />
       <WalletModal />
       <AccountSelectorModal />
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 5b319f289c..2e352d7608 100644
--- a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx
+++ b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx
@@ -19,11 +19,10 @@ export interface Web3StatusInnerProps {
   connectWallet: () => void
   connectionType: ConnectionType
   ensName?: string | null
-  isWidgetMode: boolean
 }
 
 export function Web3StatusInner(props: Web3StatusInnerProps) {
-  const { account, pendingCount, chainId, error, ensName, connectionType, connectWallet, isWidgetMode } = props
+  const { account, pendingCount, chainId, error, ensName, connectionType, connectWallet } = props
 
   const hasPendingTransactions = !!pendingCount
 
@@ -35,7 +34,7 @@ export function Web3StatusInner(props: Web3StatusInnerProps) {
     return (
       <Web3StatusError>
         <NetworkIcon />
-        <Text isWidgetMode={isWidgetMode}>
+        <Text>
           <Trans>Error</Trans>
         </Text>
       </Web3StatusError>
@@ -48,14 +47,14 @@ export function Web3StatusInner(props: Web3StatusInnerProps) {
         {hasPendingTransactions ? (
           <RowBetween>
             <FollowPendingTxPopup>
-              <Text isWidgetMode={isWidgetMode}>
+              <Text>
                 <Trans>{pendingCount} Pending</Trans>
               </Text>{' '}
             </FollowPendingTxPopup>
             <Loader stroke="white" />
           </RowBetween>
         ) : (
-          <Text isWidgetMode={isWidgetMode}>{ensName || shortenAddress(account)}</Text>
+          <Text>{ensName || shortenAddress(account)}</Text>
         )}
         {!hasPendingTransactions && <StatusIcon connectionType={connectionType} />}
       </Web3StatusConnected>
@@ -64,10 +63,10 @@ export function Web3StatusInner(props: Web3StatusInnerProps) {
 
   return (
     <Web3StatusConnect id="connect-wallet" onClick={connectWallet} faded={!account}>
-      <Text isWidgetMode={isWidgetMode}>
+      <Text>
         <Trans>Connect wallet</Trans>
       </Text>
-      {isWidgetMode && <SVG src={ICON_WALLET} title="Wallet" /> }
+      <SVG src={ICON_WALLET} title="Wallet" />
     </Web3StatusConnect>
   )
 }
diff --git a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts
index 40e70089bf..a6435a5d71 100644
--- a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts
+++ b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts
@@ -19,7 +19,41 @@ export const Web3StatusError = styled(Web3StatusGeneric)`
   }
 `
 
-export const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>``
+export const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
+  > svg {
+    display: ${({ theme }) => (theme.isInjectedWidgetMode ? '' : 'none')};
+  }
+
+  ${({ theme }) =>
+    theme.isInjectedWidgetMode &&
+    `
+      margin: 0;
+      padding: 6px 12px;
+      background: 0;
+      border: 0;
+      font-size: 14px;
+      font-weight: var(${UI.FONT_WEIGHT_MEDIUM});
+      color: var(${UI.COLOR_TEXT1})!important;
+      transition: all 0.2s ease-in-out;
+      gap: 6px;
+      opacity: 0.7;
+
+      &:hover {
+        background: var(${UI.COLOR_GREY});
+      }
+
+      > svg {
+        --size: var(${UI.ICON_SIZE_SMALL});
+        height: var(--size);
+        width: var(--size);
+        margin: 0;
+      }
+
+      > svg > path {
+        fill: var(${UI.COLOR_TEXT1});
+      }
+  `}
+`
 
 export const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean; clickDisabled?: boolean }>`
   background-color: var(${UI.COLOR_GREY});
@@ -40,13 +74,13 @@ export const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean
     `}
 `
 
-export const Text = styled.p<{ isWidgetMode: boolean }>`
+export const Text = styled.p`
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin: 0;
-  font-size: ${({ isWidgetMode }) => (isWidgetMode ? '15px' : '1rem')};
+  font-size: ${({ theme }) => (theme.isInjectedWidgetMode ? '15px' : '1rem')};
   width: fit-content;
   font-weight: 500;
 `
@@ -58,10 +92,9 @@ export const NetworkIcon = styled(Activity)`
   height: 16px;
 `
 
-export const Wrapper = styled.div<{ isWidgetMode: boolean }>`
+export const Wrapper = styled.div`
   color: var(${UI.COLOR_TEXT1});
-  height: 40px;
-  width: 100%;
+  height: ${({ theme }) => (theme.isInjectedWidgetMode ? 'initial' : '40px')};
   display: flex;
   padding: 0;
   margin: 0;
diff --git a/libs/common-utils/src/jotai/atomWithPartialUpdate.ts b/libs/common-utils/src/jotai/atomWithPartialUpdate.ts
index 6b3fab7bed..6a864b413c 100644
--- a/libs/common-utils/src/jotai/atomWithPartialUpdate.ts
+++ b/libs/common-utils/src/jotai/atomWithPartialUpdate.ts
@@ -1,14 +1,15 @@
-import { atom, PrimitiveAtom, WritableAtom } from 'jotai'
+import { atom, PrimitiveAtom, SetStateAction, WritableAtom } from 'jotai'
 
 export function atomWithPartialUpdate<T>(anyAtom: PrimitiveAtom<T>): {
   atom: typeof anyAtom
-  updateAtom: WritableAtom<null, [nextState: Partial<T>], void>
+  updateAtom: WritableAtom<null, [SetStateAction<Partial<T>>], void>
 } {
-  const updateAtom = atom(null, (get, set, nextState: Partial<T>) => {
+  const updateAtom = atom(null, (get, set, nextState: SetStateAction<Partial<T>>) => {
     set(anyAtom, () => {
       const prevState = get(anyAtom)
+      const update = typeof nextState === 'function' ? nextState(prevState) : nextState
 
-      return { ...prevState, ...nextState }
+      return { ...prevState, ...update }
     })
   })
 

From 3e78f094e66b703e3472368a874ab9fcb338f8f6 Mon Sep 17 00:00:00 2001
From: Alexandr Kazachenko <shoom3301@gmail.com>
Date: Thu, 19 Oct 2023 14:48:19 +0600
Subject: [PATCH 25/26] chore: update yarn.lock

---
 yarn.lock | 632 +++++++++++++-----------------------------------------
 1 file changed, 148 insertions(+), 484 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index da9249d238..1dcdb33270 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3221,31 +3221,6 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
-"@json-rpc-tools/provider@^1.5.5":
-  version "1.7.6"
-  resolved "https://registry.yarnpkg.com/@json-rpc-tools/provider/-/provider-1.7.6.tgz#8a17c34c493fa892632e278fd9331104e8491ec6"
-  integrity sha512-z7D3xvJ33UfCGv77n40lbzOYjZKVM3k2+5cV7xS8G6SCvKTzMkhkUYuD/qzQUNT4cG/lv0e9mRToweEEVLVVmA==
-  dependencies:
-    "@json-rpc-tools/utils" "^1.7.6"
-    axios "^0.21.0"
-    safe-json-utils "^1.1.1"
-    ws "^7.4.0"
-
-"@json-rpc-tools/types@^1.7.6":
-  version "1.7.6"
-  resolved "https://registry.yarnpkg.com/@json-rpc-tools/types/-/types-1.7.6.tgz#5abd5fde01364a130c46093b501715bcce5bdc0e"
-  integrity sha512-nDSqmyRNEqEK9TZHtM15uNnDljczhCUdBmRhpNZ95bIPKEDQ+nTDmGMFd2lLin3upc5h2VVVd9tkTDdbXUhDIQ==
-  dependencies:
-    keyvaluestorage-interface "^1.0.0"
-
-"@json-rpc-tools/utils@^1.7.6":
-  version "1.7.6"
-  resolved "https://registry.yarnpkg.com/@json-rpc-tools/utils/-/utils-1.7.6.tgz#67f04987dbaa2e7adb6adff1575367b75a9a9ba1"
-  integrity sha512-HjA8x/U/Q78HRRe19yh8HVKoZ+Iaoo3YZjakJYxR+rw52NHo6jM+VE9b8+7ygkCFXl/EHID5wh/MkXaE/jGyYw==
-  dependencies:
-    "@json-rpc-tools/types" "^1.7.6"
-    "@pedrouid/environment" "^1.0.1"
-
 "@juggle/resize-observer@^3.3.1":
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
@@ -4219,11 +4194,6 @@
     node-addon-api "^3.2.1"
     node-gyp-build "^4.3.0"
 
-"@pedrouid/environment@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@pedrouid/environment/-/environment-1.0.1.tgz#858f0f8a057340e0b250398b75ead77d6f4342ec"
-  integrity sha512-HaW78NszGzRZd9SeoI3JD11JqY+lubnaOx7Pewj5pfjqWXOEATpeKIFb9Z4t2WBUK2iryiXX3lzWwmYWgUL0Ug==
-
 "@phenomnomnominal/tsquery@~5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@phenomnomnominal/tsquery/-/tsquery-5.0.1.tgz#a2a5abc89f92c01562a32806655817516653a388"
@@ -7139,31 +7109,10 @@
   resolved "https://registry.yarnpkg.com/@wagmi/chains/-/chains-1.6.0.tgz#eb992ad28dbaaab729b5bcab3e5b461e8a035656"
   integrity sha512-5FRlVxse5P4ZaHG3GTvxwVANSmYJas1eQrTBHhjxVtqXoorm0aLmCHbhmN8Xo1yu09PaWKlleEvfE98yH4AgIw==
 
-"@walletconnect/browser-utils@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/browser-utils/-/browser-utils-1.8.0.tgz#33c10e777aa6be86c713095b5206d63d32df0951"
-  integrity sha512-Wcqqx+wjxIo9fv6eBUFHPsW1y/bGWWRboni5dfD8PtOmrihrEpOCmvRJe4rfl7xgJW8Ea9UqKEaq0bIRLHlK4A==
-  dependencies:
-    "@walletconnect/safe-json" "1.0.0"
-    "@walletconnect/types" "^1.8.0"
-    "@walletconnect/window-getters" "1.0.0"
-    "@walletconnect/window-metadata" "1.0.0"
-    detect-browser "5.2.0"
-
-"@walletconnect/client@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/client/-/client-1.8.0.tgz#6f46b5499c7c861c651ff1ebe5da5b66225ca696"
-  integrity sha512-svyBQ14NHx6Cs2j4TpkQaBI/2AF4+LXz64FojTjMtV4VMMhl81jSO1vNeg+yYhQzvjcGH/GpSwixjyCW0xFBOQ==
-  dependencies:
-    "@walletconnect/core" "^1.8.0"
-    "@walletconnect/iso-crypto" "^1.8.0"
-    "@walletconnect/types" "^1.8.0"
-    "@walletconnect/utils" "^1.8.0"
-
-"@walletconnect/core@2.9.2":
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.9.2.tgz#c46734ca63771b28fd77606fd521930b7ecfc5e1"
-  integrity sha512-VARMPAx8sIgodeyngDHbealP3B621PQqjqKsByFUTOep8ZI1/R/20zU+cmq6j9RCrL+kLKZcrZqeVzs8Z7OlqQ==
+"@walletconnect/core@2.10.2":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.10.2.tgz#a1bf6e3e87b33f9df795ce0970d8ddd400fdc8a3"
+  integrity sha512-JQz/xp3SLEpTeRQctdck2ugSBVEpMxoSE+lFi2voJkZop1hv6P+uqr6E4PzjFluAjeAnKlT1xvra0aFWjPWVcw==
   dependencies:
     "@walletconnect/heartbeat" "1.2.1"
     "@walletconnect/jsonrpc-provider" "1.0.13"
@@ -7176,42 +7125,12 @@
     "@walletconnect/relay-auth" "^1.0.4"
     "@walletconnect/safe-json" "^1.0.2"
     "@walletconnect/time" "^1.0.2"
-    "@walletconnect/types" "2.9.2"
-    "@walletconnect/utils" "2.9.2"
+    "@walletconnect/types" "2.10.2"
+    "@walletconnect/utils" "2.10.2"
     events "^3.3.0"
     lodash.isequal "4.5.0"
     uint8arrays "^3.1.0"
 
-"@walletconnect/core@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-1.8.0.tgz#6b2748b90c999d9d6a70e52e26a8d5e8bfeaa81e"
-  integrity sha512-aFTHvEEbXcZ8XdWBw6rpQDte41Rxwnuk3SgTD8/iKGSRTni50gI9S3YEzMj05jozSiOBxQci4pJDMVhIUMtarw==
-  dependencies:
-    "@walletconnect/socket-transport" "^1.8.0"
-    "@walletconnect/types" "^1.8.0"
-    "@walletconnect/utils" "^1.8.0"
-
-"@walletconnect/crypto@^1.0.2":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@walletconnect/crypto/-/crypto-1.0.3.tgz#7b8dd4d7e2884fe3543c7c07aea425eef5ef9dd4"
-  integrity sha512-+2jdORD7XQs76I2Odgr3wwrtyuLUXD/kprNVsjWRhhhdO9Mt6WqVzOPu0/t7OHSmgal8k7SoBQzUc5hu/8zL/g==
-  dependencies:
-    "@walletconnect/encoding" "^1.0.2"
-    "@walletconnect/environment" "^1.0.1"
-    "@walletconnect/randombytes" "^1.0.3"
-    aes-js "^3.1.2"
-    hash.js "^1.1.7"
-    tslib "1.14.1"
-
-"@walletconnect/encoding@^1.0.1", "@walletconnect/encoding@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/encoding/-/encoding-1.0.2.tgz#cb3942ad038d6a6bf01158f66773062dd25724da"
-  integrity sha512-CrwSBrjqJ7rpGQcTL3kU+Ief+Bcuu9PH6JLOb+wM6NITX1GTxR/MfNwnQfhLKK6xpRAyj2/nM04OOH6wS8Imag==
-  dependencies:
-    is-typedarray "1.0.0"
-    tslib "1.14.1"
-    typedarray-to-buffer "3.1.5"
-
 "@walletconnect/environment@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/environment/-/environment-1.0.1.tgz#1d7f82f0009ab821a2ba5ad5e5a7b8ae3b214cd7"
@@ -7219,33 +7138,19 @@
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/ethereum-provider@^1.7.8":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/ethereum-provider/-/ethereum-provider-1.8.0.tgz#ed1dbf9cecc3b818758a060d2f9017c50bde1d32"
-  integrity sha512-Nq9m+oo5P0F+njsROHw9KMWdoc/8iGHYzQdkjJN/1C7DtsqFRg5k5a3hd9rzCLpbPsOC1q8Z5lRs6JQgDvPm6Q==
-  dependencies:
-    "@walletconnect/client" "^1.8.0"
-    "@walletconnect/jsonrpc-http-connection" "^1.0.2"
-    "@walletconnect/jsonrpc-provider" "^1.0.5"
-    "@walletconnect/signer-connection" "^1.8.0"
-    "@walletconnect/types" "^1.8.0"
-    "@walletconnect/utils" "^1.8.0"
-    eip1193-provider "1.0.1"
-    eventemitter3 "4.0.7"
-
-"@walletconnect/ethereum-provider@^2.8.6":
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/ethereum-provider/-/ethereum-provider-2.9.2.tgz#fb3a6fca279bb4e98e75baa2fb9730545d41bb99"
-  integrity sha512-eO1dkhZffV1g7vpG19XUJTw09M/bwGUwwhy1mJ3AOPbOSbMPvwiCuRz2Kbtm1g9B0Jv15Dl+TvJ9vTgYF8zoZg==
+"@walletconnect/ethereum-provider@^2.10.1", "@walletconnect/ethereum-provider@^2.10.2":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/ethereum-provider/-/ethereum-provider-2.10.2.tgz#d5aca538fbcbbf7dd771bceb2430de30f06411de"
+  integrity sha512-QMYFZ6+rVq2CJLdIPdKK0j1Qm66UA27oQU5V2SrL8EVwl7wFfm0Bq7fnL+qAWeDpn612dNeNErpk/ROa1zWlWg==
   dependencies:
     "@walletconnect/jsonrpc-http-connection" "^1.0.7"
     "@walletconnect/jsonrpc-provider" "^1.0.13"
     "@walletconnect/jsonrpc-types" "^1.0.3"
     "@walletconnect/jsonrpc-utils" "^1.0.8"
-    "@walletconnect/sign-client" "2.9.2"
-    "@walletconnect/types" "2.9.2"
-    "@walletconnect/universal-provider" "2.9.2"
-    "@walletconnect/utils" "2.9.2"
+    "@walletconnect/sign-client" "2.10.2"
+    "@walletconnect/types" "2.10.2"
+    "@walletconnect/universal-provider" "2.10.2"
+    "@walletconnect/utils" "2.10.2"
     events "^3.3.0"
 
 "@walletconnect/events@^1.0.1":
@@ -7265,16 +7170,7 @@
     "@walletconnect/time" "^1.0.2"
     tslib "1.14.1"
 
-"@walletconnect/iso-crypto@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/iso-crypto/-/iso-crypto-1.8.0.tgz#44ddf337c4f02837c062dbe33fa7ab36789df451"
-  integrity sha512-pWy19KCyitpfXb70hA73r9FcvklS+FvO9QUIttp3c2mfW8frxgYeRXfxLRCIQTkaYueRKvdqPjbyhPLam508XQ==
-  dependencies:
-    "@walletconnect/crypto" "^1.0.2"
-    "@walletconnect/types" "^1.8.0"
-    "@walletconnect/utils" "^1.8.0"
-
-"@walletconnect/jsonrpc-http-connection@^1.0.2", "@walletconnect/jsonrpc-http-connection@^1.0.7":
+"@walletconnect/jsonrpc-http-connection@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.7.tgz#a6973569b8854c22da707a759d241e4f5c2d5a98"
   integrity sha512-qlfh8fCfu8LOM9JRR9KE0s0wxP6ZG9/Jom8M0qsoIQeKF3Ni0FyV4V1qy/cc7nfI46SLQLSl4tgWSfLiE1swyQ==
@@ -7284,7 +7180,7 @@
     cross-fetch "^3.1.4"
     tslib "1.14.1"
 
-"@walletconnect/jsonrpc-provider@1.0.13", "@walletconnect/jsonrpc-provider@^1.0.13", "@walletconnect/jsonrpc-provider@^1.0.5":
+"@walletconnect/jsonrpc-provider@1.0.13", "@walletconnect/jsonrpc-provider@^1.0.13":
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.13.tgz#9a74da648d015e1fffc745f0c7d629457f53648b"
   integrity sha512-K73EpThqHnSR26gOyNEL+acEex3P7VWZe6KE12ZwKzAt2H4e5gldZHbjsu2QR9cLeJ8AXuO7kEMOIcRv1QEc7g==
@@ -7293,7 +7189,7 @@
     "@walletconnect/safe-json" "^1.0.2"
     tslib "1.14.1"
 
-"@walletconnect/jsonrpc-types@1.0.3", "@walletconnect/jsonrpc-types@^1.0.1", "@walletconnect/jsonrpc-types@^1.0.2", "@walletconnect/jsonrpc-types@^1.0.3":
+"@walletconnect/jsonrpc-types@1.0.3", "@walletconnect/jsonrpc-types@^1.0.2", "@walletconnect/jsonrpc-types@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.3.tgz#65e3b77046f1a7fa8347ae02bc1b841abe6f290c"
   integrity sha512-iIQ8hboBl3o5ufmJ8cuduGad0CQm3ZlsHtujv9Eu16xq89q+BG7Nh5VLxxUgmtpnrePgFkTwXirCTkwJH1v+Yw==
@@ -7301,7 +7197,7 @@
     keyvaluestorage-interface "^1.0.0"
     tslib "1.14.1"
 
-"@walletconnect/jsonrpc-utils@1.0.8", "@walletconnect/jsonrpc-utils@^1.0.3", "@walletconnect/jsonrpc-utils@^1.0.6", "@walletconnect/jsonrpc-utils@^1.0.7", "@walletconnect/jsonrpc-utils@^1.0.8":
+"@walletconnect/jsonrpc-utils@1.0.8", "@walletconnect/jsonrpc-utils@^1.0.6", "@walletconnect/jsonrpc-utils@^1.0.7", "@walletconnect/jsonrpc-utils@^1.0.8":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-utils/-/jsonrpc-utils-1.0.8.tgz#82d0cc6a5d6ff0ecc277cb35f71402c91ad48d72"
   integrity sha512-vdeb03bD8VzJUL6ZtzRYsFMq1eZQcM3EAzT0a3st59dyLfJ0wq+tKMpmGH7HlB7waD858UWgfIcudbPFsbzVdw==
@@ -7337,57 +7233,30 @@
     pino "7.11.0"
     tslib "1.14.1"
 
-"@walletconnect/mobile-registry@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/mobile-registry/-/mobile-registry-1.4.0.tgz#502cf8ab87330841d794819081e748ebdef7aee5"
-  integrity sha512-ZtKRio4uCZ1JUF7LIdecmZt7FOLnX72RPSY7aUVu7mj7CSfxDwUn6gBuK6WGtH+NZCldBqDl5DenI5fFSvkKYw==
-
-"@walletconnect/modal-core@2.6.1":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/modal-core/-/modal-core-2.6.1.tgz#bc76055d0b644a2d4b98024324825c108a700905"
-  integrity sha512-f2hYlJ5pwzGvjyaZ6BoGR5uiMgXzWXt6w6ktt1N8lmY6PiYp8whZgqx2hTxVWwVlsGnaIfh6UHp1hGnANx0eTQ==
+"@walletconnect/modal-core@2.6.2":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/modal-core/-/modal-core-2.6.2.tgz#d73e45d96668764e0c8668ea07a45bb8b81119e9"
+  integrity sha512-cv8ibvdOJQv2B+nyxP9IIFdxvQznMz8OOr/oR/AaUZym4hjXNL/l1a2UlSQBXrVjo3xxbouMxLb3kBsHoYP2CA==
   dependencies:
-    valtio "1.11.0"
+    valtio "1.11.2"
 
-"@walletconnect/modal-ui@2.6.1":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/modal-ui/-/modal-ui-2.6.1.tgz#200c54c8dfe3c71321abb2724e18bb357dfd6371"
-  integrity sha512-RFUOwDAMijSK8B7W3+KoLKaa1l+KEUG0LCrtHqaB0H0cLnhEGdLR+kdTdygw+W8+yYZbkM5tXBm7MlFbcuyitA==
+"@walletconnect/modal-ui@2.6.2":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/modal-ui/-/modal-ui-2.6.2.tgz#fa57c087c57b7f76aaae93deab0f84bb68b59cf9"
+  integrity sha512-rbdstM1HPGvr7jprQkyPggX7rP4XiCG85ZA+zWBEX0dVQg8PpAgRUqpeub4xQKDgY7pY/xLRXSiCVdWGqvG2HA==
   dependencies:
-    "@walletconnect/modal-core" "2.6.1"
-    lit "2.7.6"
+    "@walletconnect/modal-core" "2.6.2"
+    lit "2.8.0"
     motion "10.16.2"
     qrcode "1.5.3"
 
-"@walletconnect/modal@^2.5.9":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/modal/-/modal-2.6.1.tgz#066fdbfcff83b58c8a9da66ab4af0eb93e3626de"
-  integrity sha512-G84tSzdPKAFk1zimgV7JzIUFT5olZUVtI3GcOk77OeLYjlMfnDT23RVRHm5EyCrjkptnvpD0wQScXePOFd2Xcw==
-  dependencies:
-    "@walletconnect/modal-core" "2.6.1"
-    "@walletconnect/modal-ui" "2.6.1"
-
-"@walletconnect/qrcode-modal@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/qrcode-modal/-/qrcode-modal-1.8.0.tgz#ddd6f5c9b7ee52c16adf9aacec2a3eac4994caea"
-  integrity sha512-BueaFefaAi8mawE45eUtztg3ZFbsAH4DDXh1UNwdUlsvFMjqcYzLUG0xZvDd6z2eOpbgDg2N3bl6gF0KONj1dg==
+"@walletconnect/modal@^2.6.2":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/modal/-/modal-2.6.2.tgz#4b534a836f5039eeb3268b80be7217a94dd12651"
+  integrity sha512-eFopgKi8AjKf/0U4SemvcYw9zlLpx9njVN8sf6DAkowC2Md0gPU/UNEbH1Wwj407pEKnEds98pKWib1NN1ACoA==
   dependencies:
-    "@walletconnect/browser-utils" "^1.8.0"
-    "@walletconnect/mobile-registry" "^1.4.0"
-    "@walletconnect/types" "^1.8.0"
-    copy-to-clipboard "^3.3.1"
-    preact "10.4.1"
-    qrcode "1.4.4"
-
-"@walletconnect/randombytes@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@walletconnect/randombytes/-/randombytes-1.0.3.tgz#e795e4918367fd1e6a2215e075e64ab93e23985b"
-  integrity sha512-35lpzxcHFbTN3ABefC9W+uBpNZl1GC4Wpx0ed30gibfO/y9oLdy1NznbV96HARQKSBV9J9M/rrtIvf6a23jfYw==
-  dependencies:
-    "@walletconnect/encoding" "^1.0.2"
-    "@walletconnect/environment" "^1.0.1"
-    randombytes "^2.1.0"
-    tslib "1.14.1"
+    "@walletconnect/modal-core" "2.6.2"
+    "@walletconnect/modal-ui" "2.6.2"
 
 "@walletconnect/relay-api@^1.0.9":
   version "1.0.9"
@@ -7409,11 +7278,6 @@
     tslib "1.14.1"
     uint8arrays "^3.0.0"
 
-"@walletconnect/safe-json@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/safe-json/-/safe-json-1.0.0.tgz#12eeb11d43795199c045fafde97e3c91646683b2"
-  integrity sha512-QJzp/S/86sUAgWY6eh5MKYmSfZaRpIlmCJdi5uG4DJlKkZrHEF7ye7gA+VtbVzvTtpM/gRwO2plQuiooIeXjfg==
-
 "@walletconnect/safe-json@^1.0.1", "@walletconnect/safe-json@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@walletconnect/safe-json/-/safe-json-1.0.2.tgz#7237e5ca48046e4476154e503c6d3c914126fa77"
@@ -7421,42 +7285,21 @@
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/sign-client@2.9.2":
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/sign-client/-/sign-client-2.9.2.tgz#ff4c81c082c2078878367d07f24bcb20b1f7ab9e"
-  integrity sha512-anRwnXKlR08lYllFMEarS01hp1gr6Q9XUgvacr749hoaC/AwGVlxYFdM8+MyYr3ozlA+2i599kjbK/mAebqdXg==
+"@walletconnect/sign-client@2.10.2":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/sign-client/-/sign-client-2.10.2.tgz#33300a9cfe42487473f66b73c99535f6b26f8c54"
+  integrity sha512-vviSLV3f92I0bReX+OLr1HmbH0uIzYEQQFd1MzIfDk9PkfFT/LLAHhUnDaIAMkIdippqDcJia+5QEtT4JihL3Q==
   dependencies:
-    "@walletconnect/core" "2.9.2"
+    "@walletconnect/core" "2.10.2"
     "@walletconnect/events" "^1.0.1"
     "@walletconnect/heartbeat" "1.2.1"
     "@walletconnect/jsonrpc-utils" "1.0.8"
     "@walletconnect/logger" "^2.0.1"
     "@walletconnect/time" "^1.0.2"
-    "@walletconnect/types" "2.9.2"
-    "@walletconnect/utils" "2.9.2"
+    "@walletconnect/types" "2.10.2"
+    "@walletconnect/utils" "2.10.2"
     events "^3.3.0"
 
-"@walletconnect/signer-connection@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/signer-connection/-/signer-connection-1.8.0.tgz#6cdf490df770e504cc1a550bdb5bac7696b130bc"
-  integrity sha512-+YAaTAP52MWZJ2wWnqKClKCPlPHBo6reURFe0cWidLADh9mi/kPWGALZ5AENK22zpem1bbKV466rF5Rzvu0ehA==
-  dependencies:
-    "@walletconnect/client" "^1.8.0"
-    "@walletconnect/jsonrpc-types" "^1.0.1"
-    "@walletconnect/jsonrpc-utils" "^1.0.3"
-    "@walletconnect/qrcode-modal" "^1.8.0"
-    "@walletconnect/types" "^1.8.0"
-    eventemitter3 "4.0.7"
-
-"@walletconnect/socket-transport@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/socket-transport/-/socket-transport-1.8.0.tgz#9a1128a249628a0be11a0979b522fe82b44afa1b"
-  integrity sha512-5DyIyWrzHXTcVp0Vd93zJ5XMW61iDM6bcWT4p8DTRfFsOtW46JquruMhxOLeCOieM4D73kcr3U7WtyR4JUsGuQ==
-  dependencies:
-    "@walletconnect/types" "^1.8.0"
-    "@walletconnect/utils" "^1.8.0"
-    ws "7.5.3"
-
 "@walletconnect/time@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@walletconnect/time/-/time-1.0.2.tgz#6c5888b835750ecb4299d28eecc5e72c6d336523"
@@ -7464,10 +7307,10 @@
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/types@2.9.2":
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.9.2.tgz#d5fd5a61dc0f41cbdca59d1885b85207ac7bf8c5"
-  integrity sha512-7Rdn30amnJEEal4hk83cdwHUuxI1SWQ+K7fFFHBMqkuHLGi3tpMY6kpyfDxnUScYEZXqgRps4Jo5qQgnRqVM7A==
+"@walletconnect/types@2.10.2":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.10.2.tgz#68e433a29ec2cf42d79d8b50c77bd5c1d91db721"
+  integrity sha512-luNV+07Wdla4STi9AejseCQY31tzWKQ5a7C3zZZaRK/di+rFaAAb7YW04OP4klE7tw/mJRGPTlekZElmHxO8kQ==
   dependencies:
     "@walletconnect/events" "^1.0.1"
     "@walletconnect/heartbeat" "1.2.1"
@@ -7476,30 +7319,25 @@
     "@walletconnect/logger" "^2.0.1"
     events "^3.3.0"
 
-"@walletconnect/types@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-1.8.0.tgz#3f5e85b2d6b149337f727ab8a71b8471d8d9a195"
-  integrity sha512-Cn+3I0V0vT9ghMuzh1KzZvCkiAxTq+1TR2eSqw5E5AVWfmCtECFkVZBP6uUJZ8YjwLqXheI+rnjqPy7sVM4Fyg==
-
-"@walletconnect/universal-provider@2.9.2":
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/universal-provider/-/universal-provider-2.9.2.tgz#40e54e98bc48b1f2f5f77eb5b7f05462093a8506"
-  integrity sha512-JmaolkO8D31UdRaQCHwlr8uIFUI5BYhBzqYFt54Mc6gbIa1tijGOmdyr6YhhFO70LPmS6gHIjljwOuEllmlrxw==
+"@walletconnect/universal-provider@2.10.2":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/universal-provider/-/universal-provider-2.10.2.tgz#85c8da39f65da8fe33f65f62689e703607b5ddc5"
+  integrity sha512-wFgI0LbQ3D56sgaUMsgOHCM5m8WLxiC71BGuCKQfApgsbNMVKugYVy2zWHyUyi8sqTQHI+uSaVpDev4UHq9LEw==
   dependencies:
     "@walletconnect/jsonrpc-http-connection" "^1.0.7"
     "@walletconnect/jsonrpc-provider" "1.0.13"
     "@walletconnect/jsonrpc-types" "^1.0.2"
     "@walletconnect/jsonrpc-utils" "^1.0.7"
     "@walletconnect/logger" "^2.0.1"
-    "@walletconnect/sign-client" "2.9.2"
-    "@walletconnect/types" "2.9.2"
-    "@walletconnect/utils" "2.9.2"
+    "@walletconnect/sign-client" "2.10.2"
+    "@walletconnect/types" "2.10.2"
+    "@walletconnect/utils" "2.10.2"
     events "^3.3.0"
 
-"@walletconnect/utils@2.9.2":
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.9.2.tgz#035bdb859ee81a4bcc6420f56114cc5ec3e30afb"
-  integrity sha512-D44hwXET/8JhhIjqljY6qxSu7xXnlPrf63UN/Qfl98vDjWlYVcDl2+JIQRxD9GPastw0S8XZXdRq59XDXLuZBg==
+"@walletconnect/utils@2.10.2":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.10.2.tgz#1f2c6a2f1bb95bcc4517b1e94aa7164c9286eb46"
+  integrity sha512-syxXRpc2yhSknMu3IfiBGobxOY7fLfLTJuw+ppKaeO6WUdZpIit3wfuGOcc0Ms3ZPFCrGfyGOoZsCvgdXtptRg==
   dependencies:
     "@stablelib/chacha20poly1305" "1.0.1"
     "@stablelib/hkdf" "1.0.1"
@@ -7509,45 +7347,20 @@
     "@walletconnect/relay-api" "^1.0.9"
     "@walletconnect/safe-json" "^1.0.2"
     "@walletconnect/time" "^1.0.2"
-    "@walletconnect/types" "2.9.2"
+    "@walletconnect/types" "2.10.2"
     "@walletconnect/window-getters" "^1.0.1"
     "@walletconnect/window-metadata" "^1.0.1"
     detect-browser "5.3.0"
     query-string "7.1.3"
     uint8arrays "^3.1.0"
 
-"@walletconnect/utils@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-1.8.0.tgz#2591a197c1fa7429941fe428876088fda6632060"
-  integrity sha512-zExzp8Mj1YiAIBfKNm5u622oNw44WOESzo6hj+Q3apSMIb0Jph9X3GDIdbZmvVZsNPxWDL7uodKgZcCInZv2vA==
-  dependencies:
-    "@walletconnect/browser-utils" "^1.8.0"
-    "@walletconnect/encoding" "^1.0.1"
-    "@walletconnect/jsonrpc-utils" "^1.0.3"
-    "@walletconnect/types" "^1.8.0"
-    bn.js "4.11.8"
-    js-sha3 "0.8.0"
-    query-string "6.13.5"
-
-"@walletconnect/window-getters@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/window-getters/-/window-getters-1.0.0.tgz#1053224f77e725dfd611c83931b5f6c98c32bfc8"
-  integrity sha512-xB0SQsLaleIYIkSsl43vm8EwETpBzJ2gnzk7e0wMF3ktqiTGS6TFHxcprMl5R44KKh4tCcHCJwolMCaDSwtAaA==
-
-"@walletconnect/window-getters@^1.0.0", "@walletconnect/window-getters@^1.0.1":
+"@walletconnect/window-getters@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/window-getters/-/window-getters-1.0.1.tgz#f36d1c72558a7f6b87ecc4451fc8bd44f63cbbdc"
   integrity sha512-vHp+HqzGxORPAN8gY03qnbTMnhqIwjeRJNOMOAzePRg4xVEEE2WvYsI9G2NMjOknA8hnuYbU3/hwLcKbjhc8+Q==
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/window-metadata@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/window-metadata/-/window-metadata-1.0.0.tgz#93b1cc685e6b9b202f29c26be550fde97800c4e5"
-  integrity sha512-9eFvmJxIKCC3YWOL97SgRkKhlyGXkrHwamfechmqszbypFspaSk+t2jQXAEU7YClHF6Qjw5eYOmy1//zFi9/GA==
-  dependencies:
-    "@walletconnect/window-getters" "^1.0.0"
-
 "@walletconnect/window-metadata@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/window-metadata/-/window-metadata-1.0.1.tgz#2124f75447b7e989e4e4e1581d55d25bc75f7be5"
@@ -7556,105 +7369,96 @@
     "@walletconnect/window-getters" "^1.0.1"
     tslib "1.14.1"
 
-"@web3-react/coinbase-wallet@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/coinbase-wallet/-/coinbase-wallet-8.2.0.tgz#038bb9e915834046320621aa49db5ba79130e488"
-  integrity sha512-SFPrsRbyw1gECyKJmE/TAB3iMhHAqh9DTa8X2FKPMgPyNPVPcha4+G0SuWy55rysh0MO6TJbj9pofX3HvXaYpw==
+"@web3-react/coinbase-wallet@^8.2.3":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@web3-react/coinbase-wallet/-/coinbase-wallet-8.2.3.tgz#08d9ae9c9d15313a58f0bc33d970c73b0aaf813a"
+  integrity sha512-hYrOwv0RzhwQuI87GBv9ZHAblgrFg7YomnObOyuH2tPZT8+cQAtgP4D293TDQhW9SR1NXxzoS0tbTECWd4yUAQ==
   dependencies:
-    "@web3-react/types" "^8.2.0"
+    "@web3-react/types" "^8.2.3"
 
-"@web3-react/core@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/core/-/core-8.2.0.tgz#95fb615bb283be520e6f61b5e48cfb0047943808"
-  integrity sha512-r7dmK2E8Jrpvm/DF93hGMB+8lECHSI3Oo0NrHbhxkisK6in6rdgAXeYFhZtM48LBAm9py6fQvLzjCM6Qx9q0oQ==
+"@web3-react/core@^8.2.3":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@web3-react/core/-/core-8.2.3.tgz#142899e74401bfd3a481a1b9578b2fd8f9dfde81"
+  integrity sha512-0ezmRKhqQpoa9ct2/3erg60zBXfC/f/liYR1mfSGKtIroRkLnPARigZSV6pI+fi8bhfGJ0RKtFWyTCCWZzdq1w==
   dependencies:
-    "@web3-react/store" "^8.2.0"
-    "@web3-react/types" "^8.2.0"
-    zustand "^4.3.5"
+    "@web3-react/store" "^8.2.3"
+    "@web3-react/types" "^8.2.3"
+    zustand "4.4.0"
   optionalDependencies:
     "@ethersproject/providers" "^5"
 
-"@web3-react/eip1193@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/eip1193/-/eip1193-8.2.0.tgz#a7953769f9d0bec54472aceb01f72c889458378f"
-  integrity sha512-Ugbt+FisHO8aLD5o5B4AZdtgSVpjrbmtC5MgHrOEBw+IwFqr20EJreh052u8ExI2OrPjARIVOkNcp50Xxs7oUw==
+"@web3-react/eip1193@^8.2.3":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@web3-react/eip1193/-/eip1193-8.2.3.tgz#d09d5a5ea98719010eb7dd845631acb1f15c51e5"
+  integrity sha512-PdL8PCv3zgQrnowRlBK7PIO8G7v/nc31PYgarACo8mX+l5Y4+l7+ma/kpkULXp5yLtc4qlQYlCalmXpcbtl2FA==
   dependencies:
-    "@web3-react/types" "^8.2.0"
+    "@web3-react/types" "^8.2.3"
     eventemitter3 "^4.0.7"
 
-"@web3-react/empty@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/empty/-/empty-8.2.0.tgz#dac248ab22867700b5be716cd5a3f8f95308e8c5"
-  integrity sha512-U8BIF56lW1GHXFz9cPAJnlmKM8VcsjpXr+LXNXGS+9mr5AEjNcjbn9T9EnQf4hY4YXUPHAnjsVcZoUfw3q6u7Q==
+"@web3-react/empty@^8.2.3":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@web3-react/empty/-/empty-8.2.3.tgz#70a0b07d7918a1f10c6dc4001b9fefc2f72face8"
+  integrity sha512-Uopeac2XgyJLmK8EawNmG1kferlSvklKgWzbianygriC3C3+6yHvflUBmHzYfcpZDq5gotP4JJr2bmhGAocQ5w==
   dependencies:
-    "@web3-react/types" "^8.2.0"
+    "@web3-react/types" "^8.2.3"
 
-"@web3-react/gnosis-safe@^8.2.0":
-  version "8.2.1"
-  resolved "https://registry.yarnpkg.com/@web3-react/gnosis-safe/-/gnosis-safe-8.2.1.tgz#c38601b2bd8c1a30691f9562693bc6e1b199e113"
-  integrity sha512-e4m6IphnnR3ENUnIL63GTN3uZGMdsb2V1uomJrbGtgcnZm/yM3/cea0f9J07+eF7zM6rIdad9NSbeivZQiiyOQ==
+"@web3-react/gnosis-safe@^8.2.4":
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/@web3-react/gnosis-safe/-/gnosis-safe-8.2.4.tgz#1f595a64bd26506a2e537b8a6734b5bf243d4e36"
+  integrity sha512-4M0CFludHJXtLsKJlKBIeMZcdTO60e6psYhYm2GLy76do9K9JJvBE8U4YVFBHLpk7sWpySsrCuYcaVZyzZ/xtA==
   dependencies:
     "@safe-global/safe-apps-provider" "^0.17.1"
     "@safe-global/safe-apps-sdk" "^8.0.0"
-    "@web3-react/types" "^8.2.0"
+    "@web3-react/types" "^8.2.3"
 
-"@web3-react/metamask@^8.2.1":
-  version "8.2.1"
-  resolved "https://registry.yarnpkg.com/@web3-react/metamask/-/metamask-8.2.1.tgz#7ffac16e2a55ff8f1195e2831a9f9f99fa0bfba9"
-  integrity sha512-JysxkAImIygkD95Bimrj7HwcTq79tq4ZSlphZt24LBMrEVY5K8k+e5mCAuJuDZ7Fu+aBxqpS0lgPjaBGKdNu/A==
+"@web3-react/metamask@^8.2.4":
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/@web3-react/metamask/-/metamask-8.2.4.tgz#26438222c4b17964c011ea359058ba6feb6a2330"
+  integrity sha512-4yoqDgvcB0QKUGSk00/fUipA3z5rOXcQYAwE0CABPa5lbTRAIm5i8F0Gj8UW7QO0pQus4UtjX0+JxWdclB7UrA==
   dependencies:
     "@metamask/detect-provider" "^1.2.0"
-    "@web3-react/types" "^8.2.0"
+    "@web3-react/types" "^8.2.3"
 
-"@web3-react/network@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/network/-/network-8.2.0.tgz#225ae9e135711e8c64ab3123570abaa5b82b8145"
-  integrity sha512-3OcJwuaot8A+VTSoCe17MZv/K/TNVw7DjtYoS7lBRS/CmzYIwP53Tosea4MkliOuXiUUKj7Ge1D2FpWohq6pHw==
+"@web3-react/network@^8.2.3":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@web3-react/network/-/network-8.2.3.tgz#edc8268877006780321fed7e632ebd86ef057eb8"
+  integrity sha512-OAlXo3aNhldANmHt/N88SuLrWihVQizJf0cNy1cqnbNIAg87292PnAqCZrj3Pwaq/s8hoSgapc87zl1KFJeTjA==
   dependencies:
     "@ethersproject/providers" "^5"
-    "@web3-react/types" "^8.2.0"
+    "@web3-react/types" "^8.2.3"
 
-"@web3-react/store@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/store/-/store-8.2.0.tgz#4260c7d1fca3c8e0358f32ed8909a5d8dba69a80"
-  integrity sha512-cG8nb+tBeRUJu+98ko6YZuAWmoipGMEbR3bhineCNd4x2mXv3GbWSPtE17GeWVshZgDbZu2/Du0okTx+22VWCg==
+"@web3-react/store@^8.2.3":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@web3-react/store/-/store-8.2.3.tgz#64a0ddaf49f85c120e07f5089dd4d7df9346f881"
+  integrity sha512-qUJQ5pDsYYDra+/+glq2BmIS43HYAiEZ22sLLVh6E75WiZKRNOOqUxBDPe33KTIn718DLt51j+wd2FT+oT/kJQ==
   dependencies:
     "@ethersproject/address" "^5"
-    "@web3-react/types" "^8.2.0"
-    zustand "^4.3.5"
+    "@web3-react/types" "^8.2.3"
+    zustand "4.4.0"
 
-"@web3-react/types@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/types/-/types-8.2.0.tgz#195464ebb94cb417e6dc3c16951573f9b6b3832a"
-  integrity sha512-TBYTFlqJZaEpVbuAAKRJFX5PZc3lI1TqDZzY94zwCrCh4GBepwwK7+PxmRAppMFuNa5x0vFX/ghLEC44e6TCFg==
+"@web3-react/types@^8.2.3":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@web3-react/types/-/types-8.2.3.tgz#e2ac1eaaa7f96b518a5535fee048bf73470f5c21"
+  integrity sha512-kSG90QkN+n7IOtp10nQ44oS8J7jzfH9EmqnruwBpCGybh1FM/ohyRvUKWYZNfNE4wsjTSpKsINR0/VdDsZMHyg==
   dependencies:
-    zustand "^4.3.5"
+    zustand "4.4.0"
 
-"@web3-react/url@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/url/-/url-8.2.0.tgz#5df80f213bf6b6f382aa842ae37ad0703d413a37"
-  integrity sha512-dt1i8AgZso6y0sX67JSZ1DzsU511iFu4Gcxksbw/yJPlFybsHco+Fcg94WLjWj4ec26kVRUBySUVCyXrYlg0kQ==
+"@web3-react/url@^8.2.3":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@web3-react/url/-/url-8.2.3.tgz#20de44f6e653575f0d522c3e905ab00bf1e6a918"
+  integrity sha512-gOcs8uEbD+BKMvw2VhTWnD8Ls3aOmbebLwASu7daWYuM2eB8hS8AoqsEAbV1NnliNpY7ztd+L1Vi5CckiIhXcw==
   dependencies:
     "@ethersproject/providers" "^5"
-    "@web3-react/types" "^8.2.0"
-
-"@web3-react/walletconnect-v2@^8.3.7":
-  version "8.3.7"
-  resolved "https://registry.yarnpkg.com/@web3-react/walletconnect-v2/-/walletconnect-v2-8.3.7.tgz#272ff3674eeb9a8eae2ae06a133993a6ff01669f"
-  integrity sha512-iaD6Uqhfdkk50n8S+ADJBttgivdMNuR+mti+v98WAUCO3Spnw5i47B2fs+qCQwJIwmD5qCis0zZzlZMwBOriGg==
-  dependencies:
-    "@walletconnect/ethereum-provider" "^2.8.6"
-    "@walletconnect/modal" "^2.5.9"
-    "@web3-react/types" "^8.2.0"
-    eventemitter3 "^4.0.7"
+    "@web3-react/types" "^8.2.3"
 
-"@web3-react/walletconnect@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/walletconnect/-/walletconnect-8.2.0.tgz#e4e325132f04f03a07a19cd193b4b97bfe6a9914"
-  integrity sha512-Yl1C0beRnwohtFZ9c6xz6mOci2MqoES2hYKhJI4X7qKqcmQJC6TOeLjlYfzjdUTUvP8IDf0A7flYZVeBUvL/fg==
+"@web3-react/walletconnect-v2@^8.5.1":
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/@web3-react/walletconnect-v2/-/walletconnect-v2-8.5.1.tgz#bc7d43b53bb30ec524e0cc36e20e1f279bf18818"
+  integrity sha512-K6RjdllFpEftTDQw39fRfuVcBLNCWXDxx5oZiWDc7D2RW071C0m1WridOeUiELmCXykyDCrIjd2zAVwV4GGueA==
   dependencies:
-    "@walletconnect/ethereum-provider" "^1.7.8"
-    "@web3-react/types" "^8.2.0"
+    "@walletconnect/ethereum-provider" "^2.10.1"
+    "@walletconnect/modal" "^2.6.2"
+    "@web3-react/types" "^8.2.3"
     eventemitter3 "^4.0.7"
 
 "@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
@@ -7918,11 +7722,6 @@ aes-js@3.0.0:
   resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d"
   integrity sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==
 
-aes-js@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a"
-  integrity sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ==
-
 agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -8015,11 +7814,6 @@ ansi-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.1.tgz#123d6479e92ad45ad897d4054e3c7ca7db4944e1"
   integrity sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==
 
-ansi-regex@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.1.tgz#164daac87ab2d6f6db3a29875e2d1766582dabed"
-  integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==
-
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
@@ -8381,13 +8175,6 @@ axios@^0.19.2:
   dependencies:
     follow-redirects "1.5.10"
 
-axios@^0.21.0:
-  version "0.21.4"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
-  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
-  dependencies:
-    follow-redirects "^1.14.0"
-
 axios@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
@@ -8859,11 +8646,6 @@ bn.js@4.11.6:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.6.tgz#53344adb14617a13f6e8dd2ce28905d1c0ba3215"
   integrity sha512-XWwnNNFCuuSQ0m3r3C4LE3EiORltHd9M05pq6FOlVeiophzRbMo50Sbz1ehl8K3Z+jw9+vmgnXefY1hz8X+2wA==
 
-bn.js@4.11.8:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
-
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.0, bn.js@^4.11.6, bn.js@^4.11.8, bn.js@^4.11.9, bn.js@^4.12.0:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
@@ -9136,19 +8918,6 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
-buffer-alloc-unsafe@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
-  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
-
-buffer-alloc@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
-  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
-  dependencies:
-    buffer-alloc-unsafe "^1.1.0"
-    buffer-fill "^1.0.0"
-
 buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@@ -9159,12 +8928,7 @@ buffer-equal@0.0.1:
   resolved "https://registry.yarnpkg.com/buffer-equal/-/buffer-equal-0.0.1.tgz#91bc74b11ea405bc916bc6aa908faafa5b4aac4b"
   integrity sha512-RgSV6InVQ9ODPdLWJ5UAqBqJBOg370Nz6ZQtRzpt6nUjc8v0St97uJ4PYC6NztqIScrAXafKM3mZPMygSe1ggA==
 
-buffer-fill@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
-  integrity sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ==
-
-buffer-from@^1.0.0, buffer-from@^1.1.1:
+buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
@@ -9669,15 +9433,6 @@ clipboardy@^2.3.0:
     execa "^1.0.0"
     is-wsl "^2.1.1"
 
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
 cliui@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
@@ -10048,7 +9803,7 @@ cookie@^0.4.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
-copy-to-clipboard@^3.2.0, copy-to-clipboard@^3.3.1:
+copy-to-clipboard@^3.2.0:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
   integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
@@ -11084,11 +10839,6 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-detect-browser@5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.2.0.tgz#c9cd5afa96a6a19fda0bbe9e9be48a6b6e1e9c97"
-  integrity sha512-tr7XntDAu50BVENgQfajMLzacmSe34D+qZc4zjnniz0ZVuw/TZcLcyxHQjYpJTM36sGEkZZlYLnIM1hH7alTMA==
-
 detect-browser@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca"
@@ -11427,13 +11177,6 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-eip1193-provider@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/eip1193-provider/-/eip1193-provider-1.0.1.tgz#420d29cf4f6c443e3f32e718fb16fafb250637c3"
-  integrity sha512-kSuqwQ26d7CzuS/t3yRXo2Su2cVH0QfvyKbr2H7Be7O5YDyIq4hQGCNTo5wRdP07bt+E2R/8nPCzey4ojBHf7g==
-  dependencies:
-    "@json-rpc-tools/provider" "^1.5.5"
-
 ejs@^3.1.6, ejs@^3.1.7:
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
@@ -11481,11 +11224,6 @@ emittery@^0.8.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
   integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
 
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
-
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -12440,7 +12178,7 @@ eventemitter3@4.0.4:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384"
   integrity sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==
 
-eventemitter3@4.0.7, eventemitter3@^4.0.0, eventemitter3@^4.0.7:
+eventemitter3@^4.0.0, eventemitter3@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -12971,7 +12709,7 @@ follow-redirects@1.5.10:
   dependencies:
     debug "=3.1.0"
 
-follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.15.0:
+follow-redirects@^1.0.0, follow-redirects@^1.15.0:
   version "1.15.2"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@@ -14910,7 +14648,7 @@ is-typed-array@^1.1.10, is-typed-array@^1.1.3, is-typed-array@^1.1.9:
   dependencies:
     which-typed-array "^1.1.11"
 
-is-typedarray@1.0.0, is-typedarray@^1.0.0, is-typedarray@~1.0.0:
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
@@ -14952,7 +14690,7 @@ is-yarn-global@^0.3.0:
   resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
   integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==
 
-isarray@^2.0.1, isarray@^2.0.5:
+isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
   integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
@@ -16634,14 +16372,21 @@ lit-html@^2.7.0:
   dependencies:
     "@types/trusted-types" "^2.0.2"
 
-lit@2.7.6:
-  version "2.7.6"
-  resolved "https://registry.yarnpkg.com/lit/-/lit-2.7.6.tgz#810007b876ed43e0c70124de91831921598b1665"
-  integrity sha512-1amFHA7t4VaaDe+vdQejSVBklwtH9svGoG6/dZi9JhxtJBBlqY5D1RV7iLUYY0trCqQc4NfhYYZilZiVHt7Hxg==
+lit-html@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.8.0.tgz#96456a4bb4ee717b9a7d2f94562a16509d39bffa"
+  integrity sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+
+lit@2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.8.0.tgz#4d838ae03059bf9cafa06e5c61d8acc0081e974e"
+  integrity sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==
   dependencies:
     "@lit/reactive-element" "^1.6.0"
     lit-element "^3.3.0"
-    lit-html "^2.7.0"
+    lit-html "^2.8.0"
 
 load-bmfont@^1.3.1:
   version "1.4.1"
@@ -18795,7 +18540,7 @@ pkg-up@^4.0.0:
   dependencies:
     find-up "^6.2.0"
 
-pngjs@^3.0.0, pngjs@^3.3.0, pngjs@^3.3.3:
+pngjs@^3.0.0, pngjs@^3.3.3:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
@@ -19397,11 +19142,6 @@ postcss@^8.4.27:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-preact@10.4.1:
-  version "10.4.1"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.1.tgz#9b3ba020547673a231c6cf16f0fbaef0e8863431"
-  integrity sha512-WKrRpCSwL2t3tpOOGhf2WfTpcmbpxaWtDbdJdKdjd0aEiTkvOmS4NBkG6kzlaAHI9AkQ3iVqbFWM3Ei7mZ4o1Q==
-
 preact@^10.5.9:
   version "10.16.0"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.16.0.tgz#68a06d70b191b8a313ea722d61e09c6b2a79a37e"
@@ -19667,19 +19407,6 @@ q@^1.1.2, q@^1.5.1:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
 
-qrcode@1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83"
-  integrity sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==
-  dependencies:
-    buffer "^5.4.3"
-    buffer-alloc "^1.2.0"
-    buffer-from "^1.1.1"
-    dijkstrajs "^1.0.1"
-    isarray "^2.0.1"
-    pngjs "^3.3.0"
-    yargs "^13.2.4"
-
 qrcode@1.5.3:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.3.tgz#03afa80912c0dccf12bc93f615a535aad1066170"
@@ -19716,15 +19443,6 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
   integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
 
-query-string@6.13.5:
-  version "6.13.5"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.5.tgz#99e95e2fb7021db90a6f373f990c0c814b3812d8"
-  integrity sha512-svk3xg9qHR39P3JlHuD7g3nRnyay5mHbrPctEBDUxUkHRifPHXJDhBUycdCC0NBjXoDf44Gb+IsOZL1Uwn8M/Q==
-  dependencies:
-    decode-uri-component "^0.2.0"
-    split-on-first "^1.0.0"
-    strict-uri-encode "^2.0.0"
-
 query-string@7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328"
@@ -21721,15 +21439,6 @@ string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -21817,13 +21526,6 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -22819,7 +22521,7 @@ typed-array-length@^1.0.4:
     for-each "^0.3.3"
     is-typed-array "^1.1.9"
 
-typedarray-to-buffer@3.1.5, typedarray-to-buffer@^3.1.5:
+typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
   integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
@@ -23245,10 +22947,10 @@ validator@^13.7.0:
   resolved "https://registry.yarnpkg.com/validator/-/validator-13.9.0.tgz#33e7b85b604f3bbce9bb1a05d5c3e22e1c2ff855"
   integrity sha512-B+dGG8U3fdtM0/aNK4/X8CXq/EcxU2WPrPEkJGslb47qyHsxmbggTWK0yEA4qnYVNF+nxNlN88o14hIcPmSIEA==
 
-valtio@1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.11.0.tgz#c029dcd17a0f99d2fbec933721fe64cfd32a31ed"
-  integrity sha512-65Yd0yU5qs86b5lN1eu/nzcTgQ9/6YnD6iO+DDaDbQLn1Zv2w12Gwk43WkPlUBxk5wL/6cD5YMFf7kj6HZ1Kpg==
+valtio@1.11.2:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.11.2.tgz#b8049c02dfe65620635d23ebae9121a741bb6530"
+  integrity sha512-1XfIxnUXzyswPAPXo1P3Pdx2mq/pIqZICkWN60Hby0d9Iqb+MEIpqgYVlbflvHdrp2YR/q3jyKWRPJJ100yxaw==
   dependencies:
     proxy-compare "2.5.1"
     use-sync-external-store "1.2.0"
@@ -24401,15 +24103,6 @@ wrap-ansi@^4.0.0:
     string-width "^2.1.1"
     strip-ansi "^4.0.0"
 
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-
 wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
@@ -24456,12 +24149,7 @@ ws@7.4.6:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
   integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
 
-ws@7.5.3:
-  version "7.5.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.3.tgz#160835b63c7d97bfab418fc1b8a9fced2ac01a74"
-  integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==
-
-ws@7.5.9, ws@^7.2.0, ws@^7.4.0, ws@^7.4.5, ws@^7.4.6, ws@^7.5.1:
+ws@7.5.9, ws@^7.2.0, ws@^7.4.5, ws@^7.4.6, ws@^7.5.1:
   version "7.5.9"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
   integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
@@ -24610,14 +24298,6 @@ yargs-parser@^10.0.0:
   dependencies:
     camelcase "^4.1.0"
 
-yargs-parser@^13.1.2:
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
-  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
 yargs-parser@^18.1.2, yargs-parser@^18.1.3:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
@@ -24631,22 +24311,6 @@ yargs-parser@^20.2.2, yargs-parser@^20.2.3, yargs-parser@^20.2.9:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
-yargs@^13.2.4:
-  version "13.3.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
-  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
-  dependencies:
-    cliui "^5.0.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^13.1.2"
-
 yargs@^15.3.1, yargs@^15.4.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
@@ -24724,9 +24388,9 @@ z-schema@~5.0.2:
   optionalDependencies:
     commander "^10.0.0"
 
-zustand@^4.3.5:
-  version "4.3.9"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.9.tgz#a7d4332bbd75dfd25c6848180b3df1407217f2ad"
-  integrity sha512-Tat5r8jOMG1Vcsj8uldMyqYKC5IZvQif8zetmLHs9WoZlntTHmIoNM8TpLRY31ExncuUvUOXehd0kvahkuHjDw==
+zustand@4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.4.0.tgz#13b3e8ca959dd53d536034440aec382ff91b65c3"
+  integrity sha512-2dq6wq4dSxbiPTamGar0NlIG/av0wpyWZJGeQYtUOLegIUvhM2Bf86ekPlmgpUtS5uR7HyetSiktYrGsdsyZgQ==
   dependencies:
     use-sync-external-store "1.2.0"

From 7f5b6993bf33316d9194f5b1574c60eac6c9fd37 Mon Sep 17 00:00:00 2001
From: Alexandr Kazachenko <shoom3301@gmail.com>
Date: Thu, 19 Oct 2023 15:24:13 +0600
Subject: [PATCH 26/26] chore: fix code style

---
 .../src/legacy/components/Header/index.tsx        | 15 +++++++++++++--
 apps/cowswap-frontend/src/legacy/theme/index.tsx  |  4 +---
 .../pure/OrdersTableContainer/index.tsx           |  2 +-
 apps/cowswap-frontend/src/test-utils.tsx          |  4 +---
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
index 96443e678b..7d2469c82f 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/index.tsx
@@ -1,6 +1,7 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, 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'
 
@@ -9,10 +10,11 @@ import { useNavigate } from 'react-router-dom'
 
 import CowBalanceButton from 'legacy/components/CowBalanceButton'
 import { NetworkSelector } from 'legacy/components/Header/NetworkSelector'
-import { upToLarge, upToSmall, useMediaQuery } from 'legacy/hooks/useMediaQuery'
+import { LargeAndUp, upToLarge, upToMedium, 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'
@@ -50,11 +52,14 @@ 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(() => {
@@ -90,6 +95,12 @@ 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/theme/index.tsx b/apps/cowswap-frontend/src/legacy/theme/index.tsx
index 23f7ac3719..d561ee9070 100644
--- a/apps/cowswap-frontend/src/legacy/theme/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/theme/index.tsx
@@ -174,9 +174,7 @@ export default function ThemeProvider({ children }: { children?: React.ReactNode
   const darkMode = useIsDarkMode()
   const isInjectedWidgetMode = isInjectedWidget()
 
-  const themeObject = useMemo(() => {
-    return theme(darkMode, isInjectedWidgetMode);
-  }, [darkMode, isInjectedWidgetMode]);
+  const themeObject = useMemo(() => theme(darkMode, isInjectedWidgetMode), [darkMode, isInjectedWidgetMode])
 
   return <StyledComponentsThemeProvider theme={themeObject}>{children}</StyledComponentsThemeProvider>
 }
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 edef8f9d70..6b0ff20bc3 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
@@ -180,7 +180,7 @@ export function OrdersTableContainer({
           <h3>
             <Trans>Connect a wallet</Trans>
           </h3>
-          {!isInjectedWidget && (
+          {!isInjectedWidget() && (
             <>
               <p>
                 <Trans>
diff --git a/apps/cowswap-frontend/src/test-utils.tsx b/apps/cowswap-frontend/src/test-utils.tsx
index 96071afead..87695461f7 100644
--- a/apps/cowswap-frontend/src/test-utils.tsx
+++ b/apps/cowswap-frontend/src/test-utils.tsx
@@ -30,9 +30,7 @@ const MockThemeProvider = ({ children }: { children: React.ReactNode }) => {
   const darkMode = useIsDarkMode()
   const isInjectedWidgetMode = isInjectedWidget()
 
-  const themeObject = useMemo(() => {
-    return theme(darkMode, isInjectedWidgetMode);
-  }, [darkMode, isInjectedWidgetMode]);
+  const themeObject = useMemo(() => theme(darkMode, isInjectedWidgetMode), [darkMode, isInjectedWidgetMode])
 
   return <StyledComponentsThemeProvider theme={themeObject}>{children}</StyledComponentsThemeProvider>
 }