Widget UI 7

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

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

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

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

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

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

apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx

@@ -15,7 +15,7 @@ const ModalContentWrapper = styled.div`
   padding: 24px;
   color: var(${UI.COLOR_TEXT2});
   background-color: var(${UI.COLOR_CONTAINER_BG_01});
-  border-radius: 24px;
+  border-radius: var(${UI.BORDER_RADIUS_NORMAL});
 
   > p {
     line-height: 1.4;

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

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

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

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

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

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

apps/cowswap-frontend/src/legacy/components/Header/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>
+  )
+}

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;
+  `}
+`