feat(new-chains): add q4 chains (#6404)

* chore: set cow-sdk version temporarily to pr-606

* feat: add linea/plasma chainInfo

* feat: add linea/plasma common settings

* feat: add linea/plasma network config

* chore: add todo regarding tenderly support for linea/plasma

* chore: remove unused constant

* refactor: rename fn to getCowTokenForChain

* feat: add linea/plasma initial tokens

* feat: add linea/plasma feature flags

* feat: add linea/plasma explorer config

* refactor: remove unused fn

* feat: add linea/plasma safe config

* refactor: make ens settings same for most networks

* feat: add linea/plasma favorite tokens config

* feat: add linea/plasma to token search

* feat: add linea/plasma uni token lists (that don't exist yet)

* feat: add linea/plasma trust assets config

* feat: add linea/plasma rpc config for switching chains

* feat: disable plasma from bff balances fetching

* feat: add linea/plasma explorer configs

* feat: add linea/plasma initial yield page configs

* feat: add linea/plasma fee config

* feat: add linea/plasma defillama config

* refactor: use isZkSyncChain instead of hardcoding it for lens

* feat: add linea/plasma/bnb bridge banner

* feat: add linea/plasma cowswap benefits to progress bar

* feat: add linea/plasma surplus card start dates

* feat: add linea/plasma as new chains, replacing bnb and lens

* feat: add bnb to list of supported chains FAQ

* chore: add doc entry to not mistakenly update chain names map

* feat: add linea/plasma token lists

* chore: bump all sdk packages to the PR version

* chore: add hack to show linea/plasma chain logos

* fix: replace hook with pure component for unsupported networks text

* fix: use correct address for USDT on Plasma

* fix: remove temporary workaround for linea/plasma logos

* fix: replace sdk gh pkgs with published version

* fix: typo

* fix: remove duplicated entry for BNB

* fix: disable tenderly for Plasma

* fix: typo

* fix: automate list of deployed chains

* fix: move available chains text to a helper fn

* fix: show all chains CoW Swap is available on

* fix: increase number of networks to show from 9 to 10

Author: alfetopito

apps/cow-fi/data/cow-protocol/const.tsx

@@ -32,6 +32,7 @@ import IMG_LOGO_SHAPESHIFT from '@cowprotocol/assets/images/logo-shapeshift.svg'
 import IMG_LOGO_STAKE_DAO from '@cowprotocol/assets/images/logo-stakedao.svg'
 import IMG_LOGO_SYNTHETIX from '@cowprotocol/assets/images/logo-synthetix.svg'
 import IMG_LOGO_TELLER_FINANCE from '@cowprotocol/assets/images/logo-teller.svg'
+import { getAvailableChainsText } from '@cowprotocol/common-const'
 import { Color } from '@cowprotocol/ui'
 
 import { CowFiCategory, toCowFiGtmEvent } from 'src/common/analytics/types'
@@ -390,8 +391,7 @@ export function useFaqData(): FaqItem[] {
     },
     {
       question: 'What chains does CoW Protocol currently support?',
-      answer:
-        'CoW Protocol is currently deployed on Ethereum, BNB, Base, Arbitrum, Polygon, Avalanche, Gnosis, and Lens.',
+      answer: 'CoW Protocol is currently deployed on: ' + getAvailableChainsText(),
     },
     {
       question: 'How do I get support?',

apps/cowswap-frontend/src/common/containers/WalletUnsupportedNetworkBanner/index.tsx

@@ -1,11 +1,12 @@
-import { UI, Media } from '@cowprotocol/ui'
+import { ReactElement } from 'react'
+
+import { Media, UI } from '@cowprotocol/ui'
 
 import { AlertCircle } from 'react-feather'
 import styled from 'styled-components/macro'
 
 import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetworkUnsupported'
-
-import { useUnsupportedNetworksText } from '../../hooks/useUnsupportedNetworksText'
+import { UnsupportedNetworksText } from 'common/pure/UnsupportedNetworksText'
 
 const Wrapper = styled.div`
   position: fixed;
@@ -37,11 +38,8 @@ const StyledAlertCircle = styled(AlertCircle)`
   color: var(${UI.COLOR_DANGER});
 `
 
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function WalletUnsupportedNetworkBanner() {
+export function WalletUnsupportedNetworkBanner(): ReactElement {
   const isChainIdUnsupported = useIsProviderNetworkUnsupported()
-  const unsupportedNetworksText = useUnsupportedNetworksText()
 
   return (
     <>
@@ -50,7 +48,9 @@ export function WalletUnsupportedNetworkBanner() {
           <div>
             <StyledAlertCircle size={24} />
           </div>
-          <div>{unsupportedNetworksText}</div>
+          <div>
+            <UnsupportedNetworksText />
+          </div>
         </Wrapper>
       )}
     </>

apps/cowswap-frontend/src/common/hooks/useUnsupportedNetworksText.tsx

@@ -9,7 +9,7 @@ import { Trans } from '@lingui/macro'
 
 import * as styledEl from './styled'
 
-const NEW_NETWORK_IDS = [SupportedChainId.BNB, SupportedChainId.LENS] // BNB, Lens
+const NEW_NETWORK_IDS = [SupportedChainId.LINEA, SupportedChainId.PLASMA]
 
 export interface NetworksListProps {
   currentChainId: SupportedChainId | null

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

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react'
+
+import { Trans } from '@lingui/macro'
+
+export function UnsupportedNetworksText(): ReactElement {
+  return <Trans>Please connect your wallet to one of our supported networks.</Trans>
+}

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

@@ -25,7 +25,9 @@ const BASE_START_DATE = 'December 2024'
 const POLYGON_START_DATE = 'June 2025'
 const AVALANCHE_START_DATE = 'June 2025'
 const LENS_START_DATE = 'September 2025'
-const BNB_START_DATE = 'September 2025' // TODO: Update when BNB is supported
+const BNB_START_DATE = 'September 2025'
+const LINEA_START_DATE = 'November 2025'
+const PLASMA_START_DATE = 'December 2025'
 
 const START_DATE: Record<SupportedChainId, string> = {
   [SupportedChainId.MAINNET]: DEFAULT_START_DATE,
@@ -37,6 +39,8 @@ const START_DATE: Record<SupportedChainId, string> = {
   [SupportedChainId.AVALANCHE]: AVALANCHE_START_DATE,
   [SupportedChainId.LENS]: LENS_START_DATE,
   [SupportedChainId.BNB]: BNB_START_DATE,
+  [SupportedChainId.LINEA]: LINEA_START_DATE,
+  [SupportedChainId.PLASMA]: PLASMA_START_DATE,
 }
 
 // TODO: Break down this large function into smaller functions

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

@@ -2,18 +2,18 @@ import { Fragment, ReactNode } from 'react'
 
 import { CHAIN_INFO } from '@cowprotocol/common-const'
 import { styled } from '@cowprotocol/common-hooks'
-import { getEtherscanLink, getExplorerLabel, shortenAddress, getExplorerAddressLink } from '@cowprotocol/common-utils'
+import { getEtherscanLink, getExplorerAddressLink, getExplorerLabel, shortenAddress } from '@cowprotocol/common-utils'
 import { Command } from '@cowprotocol/types'
 import { ExternalLink } from '@cowprotocol/ui'
 import {
-  useWalletInfo,
-  useWalletDetails,
-  useIsWalletConnect,
+  ConnectionType,
   getIsHardWareWallet,
-  useDisconnectWallet,
-  useConnectionType,
   getIsInjectedMobileBrowser,
-  ConnectionType,
+  useConnectionType,
+  useDisconnectWallet,
+  useIsWalletConnect,
+  useWalletDetails,
+  useWalletInfo,
 } from '@cowprotocol/wallet'
 
 import { Trans } from '@lingui/macro'
@@ -26,7 +26,7 @@ import { updateSelectedWallet } from 'legacy/state/user/reducer'
 import { useInjectedWidgetParams } from 'modules/injectedWidget'
 
 import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetworkUnsupported'
-import { useUnsupportedNetworksText } from 'common/hooks/useUnsupportedNetworksText'
+import { UnsupportedNetworksText } from 'common/pure/UnsupportedNetworksText'
 
 import { AccountIcon } from './AccountIcon'
 import { ActivitiesList } from './ActivitiesList'
@@ -43,8 +43,8 @@ import {
   WalletActions,
   WalletName,
   WalletNameAddress,
-  WalletSelector,
   WalletSecondaryActions,
+  WalletSelector,
   WalletWrapper,
   Wrapper,
 } from './styled'
@@ -102,8 +102,6 @@ export function AccountDetails({
   const isWalletConnect = useIsWalletConnect()
   const isInjectedMobileBrowser = getIsInjectedMobileBrowser()
 
-  const unsupportedNetworksText = useUnsupportedNetworksText()
-
   // In case the wallet is connected via WalletConnect and has wallet name set, add the suffix to be clear
   // This to avoid confusion for instance when using Metamask mobile
   // When name is not set, it defaults to WalletConnect already
@@ -177,7 +175,9 @@ export function AccountDetails({
       </InfoCard>
 
       {isChainIdUnsupported ? (
-        <UnsupportedWalletBox>{unsupportedNetworksText}</UnsupportedWalletBox>
+        <UnsupportedWalletBox>
+          <UnsupportedNetworksText />
+        </UnsupportedWalletBox>
       ) : (
         <>
           <SurplusCard />

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

@@ -2,6 +2,7 @@ import PROGRESSBAR_COW_SURPLUS_1 from '@cowprotocol/assets/cow-swap/progressbar-
 import PROGRESSBAR_COW_SURPLUS_2 from '@cowprotocol/assets/cow-swap/progressbar-finished-image-2.svg'
 import PROGRESSBAR_COW_SURPLUS_3 from '@cowprotocol/assets/cow-swap/progressbar-finished-image-3.svg'
 import PROGRESSBAR_COW_SURPLUS_4 from '@cowprotocol/assets/cow-swap/progressbar-finished-image-4.svg'
+import { getAvailableChainsText } from '@cowprotocol/common-const'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 
 /**
@@ -88,8 +89,7 @@ export const COW_SWAP_BENEFITS = [
   "Unlike most other exchanges, CoW Swap doesn't charge you any fees if your trade fails.",
 ]
 
-export const TRADE_ON_NEW_CHAINS_BENEFIT =
-  'CoW Swap is now live on Arbitrum, Base, Polygon, and Avalanche. Switch the network toggle in the nav bar for quick, cheap transactions.'
+export const TRADE_ON_NEW_CHAINS_BENEFIT = `CoW Swap is live on ${getAvailableChainsText()}. Switch the network toggle in the nav bar for quick, cheap transactions.`
 
 export const CHAIN_SPECIFIC_BENEFITS: Record<SupportedChainId, string[]> = {
   [SupportedChainId.MAINNET]: [TRADE_ON_NEW_CHAINS_BENEFIT, ...COW_SWAP_BENEFITS],
@@ -101,6 +101,8 @@ export const CHAIN_SPECIFIC_BENEFITS: Record<SupportedChainId, string[]> = {
   [SupportedChainId.AVALANCHE]: COW_SWAP_BENEFITS,
   [SupportedChainId.LENS]: COW_SWAP_BENEFITS,
   [SupportedChainId.BNB]: COW_SWAP_BENEFITS,
+  [SupportedChainId.LINEA]: COW_SWAP_BENEFITS,
+  [SupportedChainId.PLASMA]: COW_SWAP_BENEFITS,
 }
 
 export const SURPLUS_IMAGES = [

apps/cowswap-frontend/src/modules/orderProgressBar/constants.ts

@@ -51,9 +51,13 @@ const RootWrapper = styled.div`
   }
 `
 
+// TODO: remove once network is supported for cross-chain swaps
 const SHOULD_SHOW_ALERT = {
   [SupportedChainId.GNOSIS_CHAIN]: true,
   [SupportedChainId.LENS]: true,
+  [SupportedChainId.BNB]: true,
+  [SupportedChainId.LINEA]: true,
+  [SupportedChainId.PLASMA]: true,
 }
 
 type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT

apps/cowswap-frontend/src/modules/swap/containers/NetworkBridgeBanner/NetworkBridgeBanner.tsx

@@ -10,7 +10,7 @@ import { Check, ChevronDown, ChevronUp } from 'react-feather'
 import * as styledEl from './styled'
 
 // Number of skeleton shimmers to show during loading state
-const LOADING_ITEMS_COUNT = 9
+const LOADING_ITEMS_COUNT = 10
 
 const LoadingShimmerElements = (
   <styledEl.Wrapper>