Merge branch 'develop' into feat/wallet-restoring-spinner

Author: elena-zh

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

@@ -50,14 +50,14 @@ const Wrapper = styled.div<{
   }
 `
 
-const Heading = styled.h2<{ modalMode: boolean }>`
+const Heading = styled.h2<{ skipLeftPadding: boolean }>`
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   width: 100%;
   height: auto;
   margin: 0;
-  padding: ${({ modalMode }) => (modalMode ? '16px 20px 3px' : '16px 20px 3px 40px')};
+  padding: ${({ skipLeftPadding }) => (skipLeftPadding ? '16px 20px 3px' : '16px 20px 3px 40px')};
   font-size: var(${UI.FONT_SIZE_MEDIUM});
 
   ${Media.upToSmall()} {
@@ -159,6 +159,7 @@ export interface NewModalProps {
   children?: React.ReactNode
   modalMode?: boolean
   justifyContent?: string
+  showBackButton?: boolean
 }
 
 export function NewModal({
@@ -170,15 +171,16 @@ export function NewModal({
   title,
   children,
   onDismiss,
+  showBackButton = true,
 }: NewModalProps): ReactNode {
   const onDismissCallback = useCallback(() => onDismiss?.(), [onDismiss])
 
   return (
     <Wrapper maxWidth={maxWidth} minHeight={minHeight} modalMode={modalMode}>
       <ModalInner>
-        {!modalMode && <BackButtonStyled onClick={onDismissCallback} />}
+        {!modalMode && showBackButton && <BackButtonStyled onClick={onDismissCallback} />}
         {title && (
-          <Heading modalMode={!!modalMode}>
+          <Heading skipLeftPadding={!!modalMode || !showBackButton}>
             {title}{' '}
             {modalMode && (
               <IconX onClick={onDismissCallback}>

apps/cowswap-frontend/src/locales/en-US.po

@@ -3073,9 +3073,9 @@ msgstr "If allowance remains insufficient at creation time, this portion will no
 #~ msgid "User rejected signing the order"
 #~ msgstr "User rejected signing the order"
 
-#: libs/common-const/src/common.ts
-#~ msgid "Account Proxy"
-#~ msgstr "Account Proxy"
+#: apps/cowswap-frontend/src/pages/Account/index.tsx
+msgid "Account Proxy"
+msgstr "Account Proxy"
 
 #: apps/cowswap-frontend/src/modules/orderProgressBar/constants.ts
 #~ msgid "Executing', description: 'The winner of the competition is now executing your order on-chain."

apps/cowswap-frontend/src/modules/accountProxy/containers/AccountProxyWidgetPage/index.tsx

@@ -1,11 +1,10 @@
-import { ReactNode, useLayoutEffect, useRef, useState } from 'react'
+import { ReactNode, useLayoutEffect, useState } from 'react'
 
-import { useOnClickOutside } from '@cowprotocol/common-hooks'
 import { isAddress } from '@cowprotocol/common-utils'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
 import { useLingui } from '@lingui/react/macro'
-import { Outlet, useLocation, useParams } from 'react-router'
+import { Outlet, useLocation, useParams, matchPath } from 'react-router'
 
 import { useToggleWalletModal } from 'legacy/state/application/hooks'
 
@@ -16,7 +15,7 @@ import { Routes } from 'common/constants/routes'
 import { useNavigate, useNavigateBack } from 'common/hooks/useNavigate'
 import { NewModal } from 'common/pure/NewModal'
 
-import { EmptyWrapper, HelpLink, ModalWrapper, TitleWrapper, WidgetWrapper } from './styled'
+import { EmptyWrapper, HelpLink, TitleWrapper, WidgetWrapper } from './styled'
 
 import { NEED_HELP_LABEL } from '../../consts'
 import { useOnAccountOrChainChanged } from '../../hooks/useOnAccountOrChainChanged'
@@ -28,18 +27,8 @@ import { WidgetPageTitle } from '../WidgetPageTitle'
 
 const URL_NETWORK_CHANGED_STATE = 'network-changed'
 
-interface AccountProxiesPageProps {
-  modalMode?: boolean
-  onDismiss?(): void
-}
-
-export function AccountProxyWidgetPage({
-  modalMode = false,
-  onDismiss: modalOnDismiss,
-}: AccountProxiesPageProps): ReactNode {
+export function AccountProxyWidgetPage(): ReactNode {
   const { i18n } = useLingui()
-  const widgetRef = useRef(null)
-  const Wrapper = modalMode ? ModalWrapper : EmptyWrapper
   const { chainId, account } = useWalletInfo()
   const tradeNavigate = useTradeNavigate()
   const { inputCurrencyId, outputCurrencyId } = useSwapRawState()
@@ -55,10 +44,11 @@ export function AccountProxyWidgetPage({
 
   const isWalletConnected = !!account
   const isHelpPage = location.pathname.endsWith('/help')
+  const isRootProxyPage = !!matchPath(Routes.ACCOUNT_PROXIES, location.pathname)
   const query = new URLSearchParams(location.search)
   const [sourceRoute] = useState<string>(query.get('source') || 'swap')
 
-  const defaultOnDismiss = (): void => {
+  const onDismiss = (): void => {
     if (location.key === 'default' || location.state === URL_NETWORK_CHANGED_STATE) {
       tradeNavigate(
         chainId,
@@ -71,22 +61,18 @@ export function AccountProxyWidgetPage({
     }
   }
 
-  const onDismiss = modalOnDismiss || defaultOnDismiss
-
   // Go to main page when account/chainId changes
   useLayoutEffect(() => {
     if (!accountOrChainChanged) return
 
     navigate(getProxyAccountUrl(chainId), { state: URL_NETWORK_CHANGED_STATE })
   }, [accountOrChainChanged, chainId, navigate])
 
-  useOnClickOutside([widgetRef], modalMode ? onDismiss : undefined)
-
   return (
-    <Wrapper $modalMode={modalMode}>
-      <WidgetWrapper ref={widgetRef}>
+    <EmptyWrapper>
+      <WidgetWrapper>
         <NewModal
-          modalMode={modalMode}
+          showBackButton={!isRootProxyPage}
           title={
             <TitleWrapper>
               <span>
@@ -106,6 +92,6 @@ export function AccountProxyWidgetPage({
           {isWalletConnected || isHelpPage ? <Outlet /> : <WalletNotConnected onConnect={toggleWalletModal} />}
         </NewModal>
       </WidgetWrapper>
-    </Wrapper>
+    </EmptyWrapper>
   )
 }

apps/cowswap-frontend/src/modules/accountProxy/containers/AccountProxyWidgetPage/styled.tsx

@@ -1,35 +1,14 @@
-import { Media } from '@cowprotocol/ui'
-
-import { transparentize } from 'color2k'
 import { Link } from 'react-router'
 import styled from 'styled-components/macro'
 import { WIDGET_MAX_WIDTH } from 'theme'
 
-export const EmptyWrapper = styled.div<{ $modalMode: boolean }>`
-  width: 100%;
-`
-
-export const ModalWrapper = styled.div<{ $modalMode: boolean }>`
-  position: ${({ $modalMode }) => ($modalMode ? 'fixed' : 'static')};
+export const EmptyWrapper = styled.div`
   width: 100%;
-  height: 100%;
-  z-index: 100;
-  left: 0;
-  top: 0;
-  overflow-y: scroll;
-  padding: 50px 0;
-  background: ${({ theme }) => (theme.isWidget ? 'transparent' : transparentize(theme.black, 0.5))};
-  backdrop-filter: blur(3px);
-
-  ${Media.upToSmall()} {
-    padding: 0;
-  }
 `
 
 export const WidgetWrapper = styled.div`
   width: 100%;
   max-width: ${WIDGET_MAX_WIDTH.swap};
-  margin: 0 auto;
   position: relative;
 `
 

apps/cowswap-frontend/src/modules/accountProxy/index.tsx

@@ -92,11 +92,13 @@ export function RoutesApp(): ReactNode {
         <Route path="*" element={<AccountNotFound />} />
       </Route>
 
-      <Route path={RoutesEnum.ACCOUNT_PROXIES} element={<AccountProxyWidgetPage />}>
-        <Route path={RoutesEnum.ACCOUNT_PROXY} element={<AccountProxyPage />} />
-        <Route path={RoutesEnum.ACCOUNT_PROXY_RECOVER} element={<AccountProxyRecoverPage />} />
-        <Route path={RoutesEnum.ACCOUNT_PROXY_HELP} element={<AccountProxyHelpPage />} />
-        <Route index element={<AccountProxiesPage />} />
+      <Route path={RoutesEnum.ACCOUNT_PROXIES} element={<Account />}>
+        <Route element={<AccountProxyWidgetPage />}>
+          <Route path={RoutesEnum.ACCOUNT_PROXY} element={<AccountProxyPage />} />
+          <Route path={RoutesEnum.ACCOUNT_PROXY_RECOVER} element={<AccountProxyRecoverPage />} />
+          <Route path={RoutesEnum.ACCOUNT_PROXY_HELP} element={<AccountProxyHelpPage />} />
+          <Route index element={<AccountProxiesPage />} />
+        </Route>
       </Route>
       <Route path="claim" element={<Navigate to={RoutesEnum.ACCOUNT} />} />
       <Route path="profile" element={<Navigate to={RoutesEnum.ACCOUNT} />} />

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

@@ -34,6 +34,10 @@ jest.mock('modules/fortune', () => ({
   FortuneWidget: () => null,
 }))
 
+jest.mock('modules/accountProxy', () => ({
+  getProxyAccountUrl: (chainId: number) => `/${chainId}/account/account-proxy`,
+}))
+
 jest.mock('./menuConsts.utils', () => ({
   getSolversExplorerUrl: () => 'https://explorer.cow.fi/solvers',
 }))

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

@@ -8,6 +8,7 @@ import { msg } from '@lingui/core/macro'
 import AppziButton from 'legacy/components/AppziButton'
 import { Version } from 'legacy/components/Version'
 
+import { getProxyAccountUrl } from 'modules/accountProxy'
 import { FortuneWidget } from 'modules/fortune'
 
 import { Routes } from 'common/constants/routes'
@@ -51,7 +52,7 @@ const ACCOUNT_ITEM = (chainId: SupportedChainId): UntranslatedMenuItem => ({
       label: msg`Tokens`,
     },
     {
-      href: `/${chainId}/account-proxy`,
+      href: getProxyAccountUrl(chainId),
       label: ACCOUNT_PROXY_LABEL,
     },
   ],

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

@@ -6,7 +6,7 @@ import { BannerOrientation, CollapsibleInlineBanner, StatusColorVariant } from '
 import { Trans, useLingui } from '@lingui/react/macro'
 import { Link } from 'react-router'
 
-import { getProxyAccountUrl } from 'modules/accountProxy/utils/getProxyAccountUrl'
+import { getProxyAccountUrl } from 'modules/accountProxy'
 
 import { AddressLink } from 'common/pure/AddressLink'
 

apps/cowswap-frontend/src/modules/bridge/pure/ProxyAccountBanner/index.tsx

@@ -7,7 +7,7 @@ import { useWalletInfo } from '@cowprotocol/wallet'
 import { Trans } from '@lingui/react/macro'
 import { Link } from 'react-router'
 
-import { getProxyAccountUrl } from 'modules/accountProxy/utils/getProxyAccountUrl'
+import { getProxyAccountUrl } from 'modules/accountProxy'
 import { useIsHooksTradeType } from 'modules/trade'
 
 import { useIsProviderNetworkDeprecated } from 'common/hooks/useIsProviderNetworkDeprecated'