Merge branch 'feat/explorer-3' of https://github.com/cowprotocol/cowswap

 into feat/explorer-4

# Conflicts:
#	apps/explorer/src/api/operator/operatorApi.ts
#	apps/explorer/vite.config.ts

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.54.2](https://github.com/cowprotocol/cowswap/compare/v1.54.1...v1.54.2) (2024-01-08)
+
+
+### Bug Fixes
+
+* disable Christmas theme ([#3582](https://github.com/cowprotocol/cowswap/issues/3582)) ([94643fb](https://github.com/cowprotocol/cowswap/commit/94643fb3ca77aea37b772d823cc48665b441eeaa))
+
 ## [1.54.1](https://github.com/cowprotocol/cowswap/compare/v1.54.0...v1.54.1) (2023-12-28)
 
 

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

@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { useWeb3React } from '@web3-react/core'
 
@@ -7,9 +9,13 @@ export function useIsProviderNetworkUnsupported(): boolean {
   const { chainId } = useWeb3React()
   const { isSepoliaEnabled } = useFeatureFlags()
 
-  if (chainId === SupportedChainId.SEPOLIA && !isSepoliaEnabled) {
-    return true
-  }
+  return useMemo(() => {
+    if (!chainId) return false
+
+    if (chainId === SupportedChainId.SEPOLIA) {
+      return !isSepoliaEnabled
+    }
 
-  return !!chainId && !(chainId in SupportedChainId)
+    return !(chainId in SupportedChainId)
+  }, [chainId, isSepoliaEnabled])
 }

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

@@ -61,9 +61,9 @@ function Main() {
               <Web3Provider>
                 <ThemeProvider>
                   <ThemedGlobalStyle />
-                  <WalletUnsupportedNetworkBanner />
                   <BlockNumberProvider>
                     <WithLDProvider>
+                      <WalletUnsupportedNetworkBanner />
                       <Updaters />
 
                       {!isInjectedWidgetMode && (

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

@@ -24,7 +24,7 @@ export const LightCard = styled(Card)`
     width: 100%;
     border-radius: 16px;
     height: 100%;
-    border: 1px solid var(${UI.COLOR_PAPER_DARKER});
+    border: 2px solid var(${UI.COLOR_PAPER_DARKEST});
     opacity: 0.2;
     user-select: none;
     pointer-events: none;

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react'
 
 import { toggleDarkModeAnalytics } from '@cowprotocol/analytics'
+import { CHRISTMAS_THEME_ENABLED } from '@cowprotocol/common-const'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
@@ -107,9 +108,11 @@ export default function Header() {
                 </LogoImage>
 
                 {/* WINTER THEME ONLY */}
-                <WinterHat>
-                  <SVG src={winterThemeHat(darkMode)} />
-                </WinterHat>
+                {CHRISTMAS_THEME_ENABLED && (
+                  <WinterHat>
+                    <SVG src={winterThemeHat(darkMode)} />
+                  </WinterHat>
+                )}
                 {/* WINTER THEME ONLY */}
               </UniIcon>
             </Title>

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

@@ -1,3 +1,4 @@
+import { CHRISTMAS_THEME_ENABLED } from '@cowprotocol/common-const'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
 
 import ErrorBoundary from 'legacy/components/ErrorBoundary'
@@ -51,7 +52,7 @@ export function App() {
         ) : (
           <styledEl.FooterWrapper>
             <Footer />
-            <WinterFooter /> {/* Winter Themed Footer */}
+            {CHRISTMAS_THEME_ENABLED && <WinterFooter />} {/* Winter Themed Footer */}
           </styledEl.FooterWrapper>
         )}
       </styledEl.AppWrapper>

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx

@@ -145,6 +145,10 @@ const TabsContainer = styled.div<{ withSingleChild: boolean }>`
   `};
 `
 
+const ExternalLinkStyled = styled(ExternalLink)`
+  text-decoration: underline;
+`
+
 // Todo: Makes this arrow default behavior of <ExternalLink />
 const ExternalArrow = styled.span`
   display: inline-block;
@@ -236,10 +240,10 @@ export function OrdersTableContainer({
                 <Trans>You don't have any {isOpenOrdersTab ? 'open' : ''} orders at the moment.</Trans> <br />
                 <Trans>Time to create a new one!</Trans> {/* TODO: add link for Advanced orders also */}
                 {orderType === TabOrderTypes.LIMIT ? (
-                  <ExternalLink href="https://cow-protocol.medium.com/how-to-user-cow-swaps-surplus-capturing-limit-orders-24324326dc9e">
+                  <ExternalLinkStyled href="https://cow-protocol.medium.com/how-to-user-cow-swaps-surplus-capturing-limit-orders-24324326dc9e">
                     <Trans>Learn more</Trans>
                     <ExternalArrow />
-                  </ExternalLink>
+                  </ExternalLinkStyled>
                 ) : null}
               </>
             )}

apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/StatusIcon.tsx

@@ -30,7 +30,7 @@ const StepIcon = styled.div<{ status: StatusIconState }>`
   border: ${({ status }) =>
     status === 'pending'
       ? 'none'
-      : status === 'error'
+      : status === 'error' || status === 'cancelled'
       ? 'none'
       : status === 'success'
       ? 'none'
@@ -39,7 +39,7 @@ const StepIcon = styled.div<{ status: StatusIconState }>`
   background: ${({ status, theme }) =>
     status === 'pending'
       ? 'transparent'
-      : status === 'error'
+      : status === 'error' || status === 'cancelled'
       ? transparentize(theme.danger, 0.9)
       : status === 'success'
       ? transparentize(theme.success, 0.9)
@@ -83,14 +83,14 @@ const StepIcon = styled.div<{ status: StatusIconState }>`
   }
 
   > svg {
-    --color: ${({ status, theme }) =>
+    --color: ${({ status }) =>
       status === 'success'
-        ? theme.success
-        : status === 'error'
-        ? theme.danger
+        ? `var(${UI.COLOR_SUCCESS})`
+        : status === 'error' || status === 'cancelled'
+        ? `var(${UI.COLOR_DANGER})`
         : status === 'pending'
-        ? theme.text3
-        : transparentize(theme.text, 0.4)};
+        ? `var(${UI.COLOR_TEXT})`
+        : `var(${UI.COLOR_TEXT_OPACITY_70})`};
     object-fit: contain;
     width: 24px;
     height: 19px;
@@ -117,16 +117,16 @@ const StepIcon = styled.div<{ status: StatusIconState }>`
 `
 
 const Label = styled.span<{ status: StatusIconState; crossOut: boolean }>`
-  --color: ${({ status, crossOut, theme }) =>
+  --color: ${({ status, crossOut }) =>
     status === 'pending'
-      ? theme.text1
+      ? `var(${UI.COLOR_TEXT})`
       : crossOut
       ? `var(${UI.COLOR_PAPER_DARKER})`
-      : status === 'error'
-      ? theme.danger
+      : status === 'error' || status === 'cancelled'
+      ? `var(${UI.COLOR_DANGER})`
       : status === 'success'
-      ? theme.success
-      : transparentize(theme.text, 0.4)};
+      ? `var(${UI.COLOR_SUCCESS})`
+      : `var(${UI.COLOR_TEXT_OPACITY_70})`};
   color: var(--color);
   font-weight: ${({ status }) => (status === 'pending' ? '600' : '500')};
   font-size: 14px;

apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/Step.tsx

@@ -1,5 +1,7 @@
 import React, { PropsWithChildren } from 'react'
 
+import { UI } from '@cowprotocol/ui'
+
 import styled from 'styled-components/macro'
 
 import { ExplorerLink } from 'legacy/components/ExplorerLink'
@@ -32,7 +34,7 @@ const StepWrapper = styled.div`
     display: block;
     font-weight: 500;
     text-decoration: underline;
-    color: ${({ theme }) => theme.text3};
+    color: var(${UI.COLOR_TEXT});
     opacity: 1;
     font-size: 13px;
   }

apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/index.tsx

@@ -95,7 +95,7 @@ export const Progress = styled.div<ProgressProps>`
   height: var(--height);
   position: relative;
   display: flex;
-  background: var(${UI.COLOR_TEXT_OPACITY_10});
+  background: var(${UI.COLOR_PAPER});
   margin: 28px 0 0;
   border-radius: var(--height);
 
@@ -117,8 +117,14 @@ export const Progress = styled.div<ProgressProps>`
     height: inherit;
     transition: width var(${UI.ANIMATION_DURATION}) ease-in-out, background var(${UI.ANIMATION_DURATION}) ease-in-out;
     width: ${({ value }) => (value ? `${value}%` : '0%')};
-    background: ${({ status, theme }) =>
-      status === 'error' ? `var(${UI.COLOR_DANGER})` : status === 'success' ? `var(${UI.COLOR_SUCCESS})` : theme.text3};
+    background: ${({ status }) =>
+      status === 'error'
+        ? `var(${UI.COLOR_DANGER})`
+        : status === 'success'
+        ? `var(${UI.COLOR_SUCCESS})`
+        : status === 'pending'
+        ? `var(${UI.COLOR_PRIMARY})`
+        : `var(${UI.COLOR_TEXT_OPACITY_25})`};
     border-radius: var(--height);
 
     ${({ theme }) => theme.mediaWidth.upToSmall<ProgressProps>`

apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/steps/Step3.tsx

@@ -4,6 +4,7 @@ import Checkmark from '@cowprotocol/assets/cow-swap/checkmark.svg'
 import Exclamation from '@cowprotocol/assets/cow-swap/exclamation.svg'
 import Finish from '@cowprotocol/assets/cow-swap/finish.svg'
 import Refund from '@cowprotocol/assets/cow-swap/refund.svg'
+import { UI } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
@@ -16,7 +17,7 @@ const RefundMessage = styled.span`
 `
 
 const ExpiredMessage = styled.span`
-  color: ${({ theme }) => theme.warning};
+  color: var(${UI.COLOR_WARNING});
 `
 
 export function Step3({ nativeTokenSymbol, tokenLabel, order, creation, refund, cancellation }: EthFlowStepperProps) {

apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx

@@ -1,14 +1,20 @@
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { ExplorerDataType, getExplorerLink } from '@cowprotocol/common-utils'
 import { TokenLogo } from '@cowprotocol/tokens'
-import { ButtonPrimary } from '@cowprotocol/ui'
+import { ButtonPrimary, ExternalLink } from '@cowprotocol/ui'
 
 import { AlertCircle } from 'react-feather'
+import styled from 'styled-components/macro'
 
 import * as styledEl from './styled'
 
 import { ModalHeader } from '../ModalHeader'
 
+const ExternalLinkStyled = styled(ExternalLink)`
+  text-decoration: underline;
+  color: inherit;
+`
+
 export interface ImportTokenModalProps {
   tokens: TokenWithLogo[]
   onBack?(): void
@@ -34,13 +40,13 @@ export function ImportTokenModal(props: ImportTokenModalProps) {
             <TokenLogo token={token} size={24} />
             <styledEl.StyledTokenSymbol token={token} />
             <styledEl.TokenName>{token.name}</styledEl.TokenName>
-            <a
+            <ExternalLinkStyled
               target="_blank"
               href={getExplorerLink(token.chainId, token.address, ExplorerDataType.TOKEN)}
               rel="noreferrer"
             >
               {token.address}
-            </a>
+            </ExternalLinkStyled>
             <styledEl.UnknownSourceWarning>
               <AlertCircle size={14} />
               <span>Unknown Source</span>

apps/explorer/.eslintrc.json

@@ -1,6 +1,9 @@
 {
   "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  },
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/explorer/loadConfig.ts

@@ -17,11 +17,6 @@ function parseJsonOrYaml(filePath: string) {
 
 export function loadConfig() {
   const configPath = path.resolve(__dirname, CONFIG_FILE)
-  const CONFIG = parseJsonOrYaml(configPath)
 
-  // TODO: MGR
-  // TODO: I have no idea why this is needed, but it is
-  CONFIG.appId = 1
-
-  return CONFIG
+  return parseJsonOrYaml(configPath)
 }

apps/explorer/src/app/app.spec.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react'
+
+import { BrowserRouter } from 'react-router-dom'
+
+import App from './app'
+
+describe('App', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    )
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should have a greeting as the title', () => {
+    const { getByText } = render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    )
+    expect(getByText(/Welcome explorer/gi)).toBeTruthy()
+  })
+})

apps/explorer/src/app/app.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components'
+
+import NxWelcome from './nx-welcome'
+
+import { Route, Routes, Link } from 'react-router-dom'
+
+const StyledApp = styled.div`
+  // Your style here
+`
+
+export function App() {
+  return (
+    <StyledApp>
+      <NxWelcome title="explorer" />
+
+      {/* START: routes */}
+      {/* These routes and navigation have been generated for you */}
+      {/* Feel free to move and update them to fit your needs */}
+      <br />
+      <hr />
+      <br />
+      <div role="navigation">
+        <ul>
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/page-2">Page 2</Link>
+          </li>
+        </ul>
+      </div>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <div>
+              This is the generated root route. <Link to="/page-2">Click here for page 2.</Link>
+            </div>
+          }
+        />
+        <Route
+          path="/page-2"
+          element={
+            <div>
+              <Link to="/">Click here to go back to root page.</Link>
+            </div>
+          }
+        />
+      </Routes>
+      {/* END: routes */}
+    </StyledApp>
+  )
+}
+
+export default App