Allow change network2

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

@@ -10,6 +10,9 @@ export const ActiveRowWrapper = styled.div`
   cursor: pointer;
   width: 100%;
   padding: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `
 
 export const ActiveRowLinkList = styled.div`

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

@@ -8,7 +8,7 @@ import { useWalletInfo } from '@cowprotocol/wallet'
 
 import ReactDOM from 'react-dom'
 
-import { upToLarge, useMediaQuery } from 'legacy/hooks/useMediaQuery'
+import { upToLargeAlt, upToSmall, useMediaQuery } from 'legacy/hooks/useMediaQuery'
 
 import { useToggleAccountModal } from 'modules/account'
 import { clickNotifications } from 'modules/analytics'
@@ -19,7 +19,7 @@ import { Web3Status } from 'modules/wallet/containers/Web3Status'
 
 import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetworkUnsupported'
 
-import { BalanceText, Wrapper, LeftGroup } from './styled'
+import { BalanceText, Wrapper, AccountGroup } from './styled'
 
 import { NetworkSelector } from '../NetworkSelector'
 
@@ -31,12 +31,13 @@ interface AccountElementProps {
 export function AccountElement({ className, pendingActivities }: AccountElementProps) {
   const { account, chainId } = useWalletInfo()
   const isInjectedWidgetMode = isInjectedWidget()
-  const { standaloneMode, hideNetworkSelector } = useInjectedWidgetParams()
+  const { standaloneMode } = useInjectedWidgetParams()
   const isChainIdUnsupported = useIsProviderNetworkUnsupported()
   const userEthBalance = useNativeCurrencyAmount(chainId, account)
   const toggleAccountModal = useToggleAccountModal()
   const nativeTokenSymbol = NATIVE_CURRENCIES[chainId].symbol
-  const isUpToLarge = useMediaQuery(upToLarge)
+  const isUpToLargeAlt = useMediaQuery(upToLargeAlt)
+  const isUpToSmall = useMediaQuery(upToSmall)
 
   const unreadNotifications = useUnreadNotifications()
   const unreadNotificationsCount = Object.keys(unreadNotifications).length
@@ -50,18 +51,20 @@ export function AccountElement({ className, pendingActivities }: AccountElementP
     standaloneMode !== false &&
     !isInjectedWidgetMode &&
     userEthBalance &&
-    !isUpToLarge
+    !isUpToLargeAlt
 
   return (
     <>
       <Wrapper className={className}>
-        <LeftGroup active={!!account}>
+        {!isInjectedWidgetMode && !isUpToSmall && <NetworkSelector />}
+        <AccountGroup active={!!account}>
           {showEthBalance && (
             <BalanceText>
               <TokenAmount amount={userEthBalance} tokenSymbol={{ symbol: nativeTokenSymbol }} />
             </BalanceText>
           )}
           <Web3Status pendingActivities={pendingActivities} onClick={() => account && toggleAccountModal()} />
+
           {account && (
             <NotificationBell
               unreadCount={unreadNotificationsCount}
@@ -73,9 +76,7 @@ export function AccountElement({ className, pendingActivities }: AccountElementP
               }}
             />
           )}
-        </LeftGroup>
-
-        {!hideNetworkSelector && <NetworkSelector />}
+        </AccountGroup>
       </Wrapper>
 
       {ReactDOM.createPortal(

apps/cowswap-frontend/src/legacy/components/Header/AccountElement/styled.tsx

@@ -31,21 +31,16 @@ export const Wrapper = styled.div`
   gap: 16px;
   position: relative;
   width: 100%;
-  flex-direction: row-reverse;
-
-  ${Media.upToMedium()} {
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-  }
+  flex-direction: row;
 `
 
-export const LeftGroup = styled.div<{ active: boolean }>`
+export const AccountGroup = styled.div<{ active: boolean }>`
   display: flex;
   align-items: center;
   background: ${({ active }) => (active ? `var(${UI.COLOR_PAPER_DARKER})` : `var(${UI.COLOR_PAPER})`)};
   border-radius: 28px;
   border: none;
   transition: border var(${UI.ANIMATION_DURATION}) ease-in-out;
   pointer-events: auto;
+  margin: 0 auto;
 `

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

@@ -123,6 +123,10 @@ const SelectorWrapper = styled.div`
   ${Media.MediumAndUp()} {
     position: relative;
   }
+
+  ${Media.upToSmall()} {
+    font-size: 14px;
+  }
 `
 const StyledChevronDown = styled(ChevronDown)`
   width: 21px;

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

@@ -1,4 +1,4 @@
-import { Media, RowFixed, UI } from '@cowprotocol/ui'
+import { Media, RowFixed } from '@cowprotocol/ui'
 
 import styled, { css } from 'styled-components/macro'
 
@@ -10,20 +10,6 @@ export const HeaderControls = styled.div`
   gap: 6px;
   max-width: 100%;
   height: 100%;
-
-  ${Media.upToMedium()} {
-    margin: 0 0 0 auto;
-    height: 56px;
-    width: 100%;
-    position: sticky;
-    bottom: 0;
-    left: 0;
-    z-index: 10;
-    background: var(${UI.COLOR_PAPER});
-    padding: 5px 10px;
-    flex-flow: row-reverse;
-    justify-content: space-between;
-  }
 `
 
 export const HeaderElement = styled.div`

apps/cowswap-frontend/src/legacy/hooks/useMediaQuery.ts

@@ -27,4 +27,5 @@ export const isMediumOnly = `(min-width: ${MEDIA_WIDTHS.upToSmall + 1}px) and (m
 export const upToMedium = `(max-width: ${MEDIA_WIDTHS.upToMedium}px)`
 export const isLargeOnly = `(min-width: ${MEDIA_WIDTHS.upToMedium + 1}px) and (max-width: ${MEDIA_WIDTHS.upToLarge}px)`
 export const upToLarge = `(max-width: ${MEDIA_WIDTHS.upToLarge}px)`
+export const upToLargeAlt = `(max-width: ${MEDIA_WIDTHS.upToLargeAlt}px)`
 export const LargeAndUp = `(min-width: ${MEDIA_WIDTHS.upToLarge + 1}px)`

apps/cowswap-frontend/src/modules/account/containers/AccountDetails/index.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from 'react'
 
 import { CHAIN_INFO } from '@cowprotocol/common-const'
+import { useMediaQuery } from '@cowprotocol/common-hooks'
 import { getEtherscanLink, getExplorerLabel, shortenAddress, getExplorerAddressLink } from '@cowprotocol/common-utils'
 import { Command } from '@cowprotocol/types'
 import { ExternalLink } from '@cowprotocol/ui'
@@ -18,6 +19,8 @@ import {
 import { Trans } from '@lingui/macro'
 
 import Copy from 'legacy/components/Copy'
+import { NetworkSelector } from 'legacy/components/Header/NetworkSelector'
+import { upToSmall } from 'legacy/hooks/useMediaQuery'
 import {
   ActivityDescriptors,
   groupActivitiesByDay,
@@ -44,7 +47,7 @@ import {
   TransactionListWrapper,
   UnsupportedWalletBox,
   WalletAction,
-  WalletActions,
+  WalletActionsWrapper,
   WalletName,
   WalletNameAddress,
   WalletSelector,
@@ -155,11 +158,11 @@ export function AccountDetails({
               {(ENSName || account) && <Copy toCopy={ENSName ? ENSName : account ? account : ''} />}
             </WalletWrapper>
 
-            <WalletActions>
-              {' '}
-              {!isChainIdUnsupported && <NetworkCard title={networkLabel}>{networkLabel}</NetworkCard>}{' '}
-              {formatConnectorName()}
-            </WalletActions>
+            <WalletActions
+              isChainIdUnsupported={isChainIdUnsupported}
+              networkLabel={networkLabel}
+              formatConnectorName={formatConnectorName}
+            />
           </AccountControl>
         </AccountGroupingRow>
         <AccountGroupingRow>
@@ -228,3 +231,31 @@ export function AccountDetails({
     </Wrapper>
   )
 }
+
+const WalletActions = ({
+  isChainIdUnsupported,
+  networkLabel,
+  formatConnectorName,
+}: {
+  isChainIdUnsupported: boolean
+  networkLabel: string
+  formatConnectorName: () => React.ReactNode
+}) => {
+  const isMobile = useMediaQuery(upToSmall)
+
+  const wallet = isMobile ? (
+    <NetworkSelector />
+  ) : !isChainIdUnsupported ? (
+    <>
+      <NetworkCard title={networkLabel}>{networkLabel}</NetworkCard>{' '}
+    </>
+  ) : null
+
+  return (
+    <WalletActionsWrapper>
+      {' '}
+      {wallet}
+      {formatConnectorName()}
+    </WalletActionsWrapper>
+  )
+}

apps/cowswap-frontend/src/modules/account/containers/AccountDetails/styled.ts

@@ -71,7 +71,7 @@ export const WalletAction = styled(ButtonSecondary)`
   }
 `
 
-export const WalletActions = styled.div`
+export const WalletActionsWrapper = styled.div`
   display: flex;
   margin: 10px 0 0;
   flex-flow: column wrap;
@@ -147,7 +147,9 @@ export const Wrapper = styled.div`
   ${WalletAction} {
     color: inherit;
     opacity: 0.85;
-    transition: color var(${UI.ANIMATION_DURATION}) ease-in-out, opacity var(${UI.ANIMATION_DURATION}) ease-in-out;
+    transition:
+      color var(${UI.ANIMATION_DURATION}) ease-in-out,
+      opacity var(${UI.ANIMATION_DURATION}) ease-in-out;
     margin: auto;
     padding: 0;
     border: 0;
@@ -223,7 +225,7 @@ export const Wrapper = styled.div`
     }
   }
 
-  ${AccountControl} ${WalletActions} {
+  ${AccountControl} ${WalletActionsWrapper} {
     ${Media.upToSmall()} {
       width: 100%;
       flex-flow: row wrap;

apps/cowswap-frontend/src/modules/advancedOrders/pure/Settings/index.tsx

@@ -1,5 +1,6 @@
 import { AdvancedOrdersSettingsState } from 'modules/advancedOrders/state/advancedOrdersSettingsAtom'
 import { SettingsBox, SettingsContainer, SettingsTitle } from 'modules/trade/pure/Settings'
+import { ChangeNetworkWidget } from 'modules/tradeWidgetAddons/containers/SettingsTab'
 
 export interface SettingsProps {
   state: AdvancedOrdersSettingsState
@@ -11,6 +12,7 @@ export function Settings({ state, onStateChanged }: SettingsProps) {
 
   return (
     <SettingsContainer>
+      <ChangeNetworkWidget />
       <SettingsTitle>Interface Settings</SettingsTitle>
 
       <SettingsBox

apps/cowswap-frontend/src/modules/application/containers/App/index.tsx

@@ -137,6 +137,7 @@ export function App() {
               productVariant={PRODUCT_VARIANT}
               customTheme={customTheme}
               settingsNavItems={settingsNavItems}
+              // settingsTopContent={isMobile ? <SettingsTopContentMobile /> : null}
               showGlobalSettings
               bgColorDark={'rgb(222 227 230 / 7%)'}
               colorDark={'#DEE3E6'}
@@ -147,7 +148,7 @@ export function App() {
               activeBackgroundDark="#282854"
               hoverBackgroundDark={'#18193B'}
               LinkComponent={LinkComponent}
-              persistentAdditionalContent={isMobile ? null : persistentAdditionalContent} // This will stay at its original location
+              persistentAdditionalContent={persistentAdditionalContent} // This will stay at its original location
               additionalContent={null} // On desktop renders inside the menu bar, on mobile renders inside the mobile menu
             />
           )}
@@ -185,11 +186,16 @@ export function App() {
               hasTouchFooter
             />
           )}
-
-          {/* Render MobileHeaderControls outside of MenuBar on mobile */}
-          {isMobile && !isInjectedWidgetMode && persistentAdditionalContent}
         </styledEl.AppWrapper>
       </Suspense>
     </ErrorBoundary>
   )
 }
+
+// const SettingsTopContentMobile = () => {
+//   return (
+//     <styledEl.SettingsTopContentMobile>
+//       <NetworkSelector />
+//     </styledEl.SettingsTopContentMobile>
+//   )
+// }

apps/cowswap-frontend/src/modules/application/containers/App/styled.ts

@@ -108,3 +108,12 @@ export const BodyWrapper = styled.div<{ customTheme?: CowSwapTheme }>`
       `}
   }
 `
+
+export const SettingsTopContentMobile = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 16px;
+`

apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx

@@ -1,4 +1,5 @@
 import { SettingsBox, SettingsContainer, SettingsTitle } from 'modules/trade/pure/Settings'
+import { ChangeNetworkWidget } from 'modules/tradeWidgetAddons/containers/SettingsTab'
 
 import { LimitOrdersSettingsState } from '../../state/limitOrdersSettingsAtom'
 
@@ -12,6 +13,7 @@ export function Settings({ state, onStateChanged }: SettingsProps) {
 
   return (
     <SettingsContainer>
+      <ChangeNetworkWidget />
       <SettingsTitle>Interface Settings</SettingsTitle>
 
       <SettingsBox

apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/SettingsTab/index.tsx

@@ -13,9 +13,11 @@ import { Text } from 'rebass'
 import { ThemedText } from 'theme'
 
 import { AutoColumn } from 'legacy/components/Column'
+import { NetworkSelector } from 'legacy/components/Header/NetworkSelector'
 import { Toggle } from 'legacy/components/Toggle'
 
 import { toggleHooksEnabledAnalytics, toggleRecipientAddressAnalytics } from 'modules/analytics'
+import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { SettingsIcon } from 'modules/trade/pure/Settings'
 
 import * as styledEl from './styled'
@@ -55,6 +57,8 @@ export function SettingsTab({ className, recipientToggleState, hooksEnabledState
     [hooksEnabled, toggleHooksEnabledAux],
   )
 
+  const isInjectedWidgetMode = isInjectedWidget()
+
   return (
     <Menu>
       <SettingsTabController buttonRef={menuButtonRef}>
@@ -64,6 +68,8 @@ export function SettingsTab({ className, recipientToggleState, hooksEnabledState
           </styledEl.StyledMenuButton>
           <styledEl.MenuFlyout portal={false}>
             <AutoColumn gap="md" style={{ padding: '1rem' }}>
+              <ChangeNetworkWidget />
+
               <Text fontWeight={600} fontSize={14}>
                 <Trans>Transaction Settings</Trans>
               </Text>
@@ -92,7 +98,7 @@ export function SettingsTab({ className, recipientToggleState, hooksEnabledState
                 />
               </RowBetween>
 
-              {!isInjectedWidget() && hooksEnabled !== null && (
+              {!isInjectedWidgetMode && hooksEnabled !== null && (
                 <RowBetween>
                   <RowFixed>
                     <ThemedText.Black fontWeight={400} fontSize={14}>
@@ -151,3 +157,27 @@ function SettingsTabController({ buttonRef, children }: SettingsTabControllerPro
 
   return children
 }
+
+export function ChangeNetworkWidget() {
+  const isInjectedWidgetMode = isInjectedWidget()
+  const { standaloneMode } = useInjectedWidgetParams()
+
+  if (!isInjectedWidgetMode || !standaloneMode) {
+    return null
+  }
+  return (
+    <>
+      <Text fontWeight={600} fontSize={14}>
+        <Trans>Settings</Trans>
+      </Text>
+      <RowBetween style={{ marginBottom: '1rem' }}>
+        <RowFixed>
+          <ThemedText.Black fontWeight={400} fontSize={14}>
+            <Trans>Network</Trans>
+          </ThemedText.Black>
+        </RowFixed>
+        <NetworkSelector />
+      </RowBetween>
+    </>
+  )
+}