Merge pull request #5913 from cowprotocol/release/2025-07-02

chore(release): 2025-07-02

Author: cowdan

.gitignore

@@ -63,4 +63,7 @@ apps/cowswap-frontend/public/robots.txt
 
 # Claude context files (local only)
 CLAUDE.md
-.claude/
+.claude/
+
+# Serena project files
+.serena/

apps/cow-fi/components/NetworkItem/index.tsx

@@ -1,4 +1,10 @@
+import { JSX } from 'react'
+
+import Image from 'next/image'
+
 import { CopyToClipboard } from '@/components/CopyToClipboard'
+import { Network, NETWORK_IMAGE_MAP, NETWORK_MAP, NETWORK_URL_MAP } from '@/const/networkMap'
+
 import { ItemWrapper } from './styles'
 
 type PlatformData = {
@@ -9,41 +15,28 @@ type PlatformData = {
 }
 
 type Props = {
-  network: string
+  network: Network
   platformData: PlatformData
 }
 
-export function NetworkItem(props: Props) {
+export function NetworkItem(props: Props): JSX.Element {
   const { network, platformData } = props
   const { address, symbol, name } = platformData
 
+  const networkUrl = `${NETWORK_URL_MAP[network]}/${address}`
+  const networkImage = NETWORK_IMAGE_MAP[network]
+  const networkName = NETWORK_MAP[network]
+
   return (
     <ItemWrapper>
-      <a
-        href={
-          network === 'xdai' ? `https://gnosisscan.io/address/${address}` : `https://etherscan.io/address/${address}`
-        }
-        title={`${name} (${symbol}) on ${network === 'xdai' ? 'Gnosis Chain' : 'Ethereum'}`}
-        target="_blank"
-        rel="noreferrer nofollow"
-      >
-        <img
-          src={`/images/${network === 'xdai' ? 'gnosis-chain' : network}.svg`}
-          alt={network === 'xdai' ? 'Gnosis Chain' : 'Ethereum'}
-        />
-        {network === 'xdai' ? 'Gnosis Chain' : network.charAt(0).toUpperCase() + network.slice(1)}
+      <a href={networkUrl} title={`${name} (${symbol}) on ${networkName}`} target="_blank" rel="noreferrer nofollow">
+        <Image src={networkImage} alt={networkName} width={16} height={16} />
+        {networkName}
       </a>
-      <a
-        href={
-          network === 'xdai' ? `https://gnosisscan.io/address/${address}` : `https://etherscan.io/address/${address}`
-        }
-        title={`${name} (${symbol}) on ${network === 'xdai' ? 'Gnosis Chain' : 'Ethereum'}`}
-        target="_blank"
-        rel="noreferrer nofollow"
-      >
+      <a href={networkUrl} title={`${name} (${symbol}) on ${networkName}`} target="_blank" rel="noreferrer nofollow">
         <div>
           <i>{address}</i>
-          <img src="/images/external-arrow.svg" alt="Go to explorer" />
+          <Image src="/images/external-arrow.svg" alt="Go to explorer" width={16} height={16} />
         </div>
       </a>
       <span>

apps/cow-fi/components/SwapLinkCard/index.tsx

@@ -1,33 +1,40 @@
+import { JSX } from 'react'
+
+import Image from 'next/image'
+
 import { SwapCard } from '@/components/TokenDetails/index.styles'
+import { Network, NETWORK_IMAGE_MAP, NETWORK_MAP } from '@/const/networkMap'
 
 type SwapLinkCardProps = {
   contractAddress: string
   networkId: number
-  networkName: string
+  network: Network
   tokenSymbol: string
 }
 
-export const SwapLinkCard = ({ contractAddress, networkId, networkName, tokenSymbol }: SwapLinkCardProps) => {
-  return (
-    contractAddress && (
-      <SwapCard>
-        <a
-          href={`https://swap.cow.fi/#/${networkId}/swap/${
-            networkId === 100 ? 'WXDAI' : 'WETH'
-          }/${contractAddress}?sellAmount=1`}
-          target="_blank"
-          rel="nofollow noreferrer"
-        >
-          <img
-            src={`/images/${(networkName === 'Gnosis Chain' ? 'gnosis-chain' : networkName).toLowerCase()}.svg`}
-            alt={networkName}
-          />
-          <b>
-            Swap {tokenSymbol} <br /> on {networkName}
-          </b>
-          <img src="/images/external-arrow.svg" alt="Go to CoW Swap" />
-        </a>
-      </SwapCard>
-    )
-  )
+export const SwapLinkCard = ({
+  contractAddress,
+  networkId,
+  network,
+  tokenSymbol,
+}: SwapLinkCardProps): JSX.Element | null => {
+  const networkImage = NETWORK_IMAGE_MAP[network]
+
+  return contractAddress ? (
+    <SwapCard>
+      <a
+        href={`https://swap.cow.fi/#/${networkId}/swap/${
+          networkId === 100 ? 'WXDAI' : 'WETH'
+        }/${contractAddress}?sellAmount=1`}
+        target="_blank"
+        rel="nofollow noreferrer"
+      >
+        <Image src={networkImage} alt={NETWORK_MAP[network]} width={16} height={16} />
+        <b>
+          Swap {tokenSymbol} <br /> on {NETWORK_MAP[network]}
+        </b>
+        <Image src="/images/external-arrow.svg" alt="Go to CoW Swap" width={16} height={16} />
+      </a>
+    </SwapCard>
+  ) : null
 }

apps/cow-fi/components/SwapWidget.tsx

@@ -1,14 +1,23 @@
-import React, { useState, useEffect, ChangeEvent } from 'react'
+import { useState, useEffect, ChangeEvent, JSX } from 'react'
 
 import { Color } from '@cowprotocol/ui'
 
+import Image from 'next/image'
 import { transparentize } from 'polished'
 import styled from 'styled-components/macro'
 
 import { LinkWithUtmComponent } from 'modules/utm/components'
 
 import { Button } from '@/components/Button'
 import { CONFIG } from '@/const/meta'
+import {
+  Network,
+  NETWORK_DEFAULT_BUY_TOKEN_MAP,
+  NETWORK_DEFAULT_SELL_TOKEN_MAP,
+  NETWORK_ID_MAP,
+  NETWORK_IMAGE_MAP,
+  NETWORK_MAP,
+} from '@/const/networkMap'
 
 type TabProps = {
   active: boolean
@@ -193,128 +202,151 @@ type SwapWidgetProps = {
   platforms: Platforms
 }
 
-enum Networks {
-  ETHEREUM = 'ethereum',
-  XDAI = 'xdai',
+type Tab = 'Buy' | 'Sell'
+const DEFAULT_TAB: Tab = 'Buy'
+const DEFAULT_NETWORK: Network = 'ethereum'
+
+const getBuyAndSellTokens = (
+  activeTab: Tab,
+  network: Network,
+  contractAddress: string,
+): { sellToken: string; buyToken: string } => {
+  if (activeTab === 'Buy') {
+    return {
+      sellToken: NETWORK_DEFAULT_SELL_TOKEN_MAP[network],
+      buyToken: contractAddress,
+    }
+  }
+
+  return {
+    sellToken: contractAddress,
+    buyToken: NETWORK_DEFAULT_BUY_TOKEN_MAP[network],
+  }
 }
 
-const NETWORK_MAP: { [key: string]: string } = {
-  [Networks.ETHEREUM]: 'Ethereum',
-  [Networks.XDAI]: 'Gnosis Chain',
+const Tabs = ({ activeTab, setActiveTab }: { activeTab: Tab; setActiveTab: (tab: Tab) => void }): JSX.Element => {
+  return (
+    <TabContainer>
+      <Tab onClick={() => setActiveTab('Buy')} active={activeTab === 'Buy'}>
+        Buy
+      </Tab>
+      <Tab onClick={() => setActiveTab('Sell')} active={activeTab === 'Sell'}>
+        Sell
+      </Tab>
+    </TabContainer>
+  )
 }
 
-const WXDAI = '0xe91d153e0b41518a2ce8dd3d7944fa863463a97d'
-const WETH = ['0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', '0x6a023ccd1ff6f2045c3309768ead9e68f978f6e1']
+function DropdownNetworkOption({
+  network,
+  handleSelect,
+}: {
+  network: Network
+  handleSelect: (network: Network) => void
+}): JSX.Element {
+  const width = 20
+  const height = 20
 
-export const SwapWidget = ({ tokenId, tokenSymbol, tokenImage, platforms }: SwapWidgetProps) => {
-  const [activeTab, setActiveTab] = useState('Buy')
-  const [network, setNetwork] = useState<string | null>(null)
+  return (
+    <DropdownOption onClick={() => handleSelect(network)}>
+      <Image src={NETWORK_IMAGE_MAP[network]} alt={NETWORK_MAP[network]} width={width} height={height} />
+      {NETWORK_MAP[network]}
+    </DropdownOption>
+  )
+}
+
+const getDropdownBody = (platforms: Platforms, handleSelect: (network: Network) => void): JSX.Element => {
+  const { ethereum, xdai, base, 'arbitrum-one': arbitrum, avalanche, 'polygon-pos': polygon } = platforms
+
+  return (
+    <DropdownBody>
+      {ethereum?.contractAddress && <DropdownNetworkOption network="ethereum" handleSelect={handleSelect} />}
+      {base?.contractAddress && <DropdownNetworkOption network="base" handleSelect={handleSelect} />}
+      {arbitrum?.contractAddress && <DropdownNetworkOption network="arbitrum-one" handleSelect={handleSelect} />}
+      {polygon?.contractAddress && <DropdownNetworkOption network="polygon-pos" handleSelect={handleSelect} />}
+      {avalanche?.contractAddress && <DropdownNetworkOption network="avalanche" handleSelect={handleSelect} />}
+      {xdai?.contractAddress && <DropdownNetworkOption network="xdai" handleSelect={handleSelect} />}
+    </DropdownBody>
+  )
+}
+
+function getNetworkFromPlatforms(platforms: Platforms): Network {
+  const { ethereum, xdai, base, 'arbitrum-one': arbitrum, avalanche, 'polygon-pos': polygon } = platforms
+
+  if (ethereum?.contractAddress) return 'ethereum'
+  if (base?.contractAddress) return 'base'
+  if (arbitrum?.contractAddress) return 'arbitrum-one'
+  if (polygon?.contractAddress) return 'polygon-pos'
+  if (avalanche?.contractAddress) return 'avalanche'
+  if (xdai?.contractAddress) return 'xdai'
+
+  return 'ethereum'
+}
+
+export const SwapWidget = ({ tokenId, tokenSymbol, tokenImage, platforms }: SwapWidgetProps): JSX.Element => {
+  const [activeTab, setActiveTab] = useState<Tab>(DEFAULT_TAB)
+  const [network, setNetwork] = useState<Network>(DEFAULT_NETWORK)
   const [amount, setAmount] = useState(0)
 
   const [isOpen, setIsOpen] = useState(false)
-  const handleSelect = (network: string | null) => {
+
+  const handleSelect = (network: Network): void => {
     setNetwork(network)
     setIsOpen(false)
   }
 
+  // set initial network based on the available platforms
   useEffect(() => {
-    // set initial network based on the available platforms
-    if (platforms.ethereum.contractAddress) setNetwork(Networks.ETHEREUM)
-    else if (platforms.xdai.contractAddress) setNetwork(Networks.XDAI)
+    setNetwork(getNetworkFromPlatforms(platforms))
   }, [platforms])
 
-  const handleInputChange = (event: ChangeEvent<any>) => {
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
     let value = event.target.value
 
     // Remove leading minus sign if present
     if (value.startsWith('-')) {
       value = value.slice(1)
     }
 
-    if (value === '' || (parseFloat(value) >= 0 && !isNaN(value))) {
-      setAmount(value)
+    if (value === '' || (parseFloat(value) >= 0 && !isNaN(parseFloat(value)))) {
+      setAmount(parseFloat(value))
     }
   }
 
-  const onSwap = () => {
+  const getSwapUrl = (): string => {
     if (network && platforms[network]) {
-      const networkId = network === 'xdai' ? 100 : 1
+      const networkId = NETWORK_ID_MAP[network as Network]
       const contractAddress = platforms[network].contractAddress
 
-      let sellToken, buyToken
-      if (activeTab === 'Buy') {
-        sellToken = networkId === 100 ? 'WXDAI' : 'WETH'
-        buyToken = contractAddress
-
-        if (contractAddress === WXDAI) {
-          sellToken = 'XDAI'
-        }
-
-        if (WETH.includes(contractAddress)) {
-          sellToken = networkId === 100 ? 'WXDAI' : 'ETH'
-        }
-      } else {
-        sellToken = contractAddress
-        buyToken = networkId === 100 ? 'WXDAI' : 'WETH'
-
-        if (contractAddress === WXDAI) {
-          buyToken = 'XDAI'
-        }
-
-        if (WETH.includes(contractAddress)) {
-          buyToken = networkId === 100 ? 'WXDAI' : 'ETH'
-        }
-      }
+      const { sellToken, buyToken } = getBuyAndSellTokens(activeTab, network as Network, contractAddress)
 
       return `https://swap.cow.fi/#/${networkId}/swap/${sellToken}/${buyToken}?${activeTab.toLowerCase()}Amount=${amount}`
     } else {
       return '#'
     }
   }
 
+  const networkImage = NETWORK_IMAGE_MAP[network as Network]
+  const networkName = NETWORK_MAP[network as Network]
+
   return (
     <Wrapper>
-      <TabContainer>
-        <Tab onClick={() => setActiveTab('Buy')} active={activeTab === 'Buy'}>
-          Buy
-        </Tab>
-        <Tab onClick={() => setActiveTab('Sell')} active={activeTab === 'Sell'}>
-          Sell
-        </Tab>
-      </TabContainer>
+      <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
 
       <DropdownContainer>
         <DropdownHeader onClick={() => setIsOpen(!isOpen)}>
-          <img
-            src={`/images/${network === Networks.ETHEREUM ? 'ethereum' : 'gnosis-chain'}.svg`}
-            alt={network ? NETWORK_MAP[network] : ''}
-          />
-          <b>{network ? NETWORK_MAP[network] : ''}</b>
+          <Image src={networkImage} alt={networkName} width={16} height={16} />
+          <b>{networkName}</b>
         </DropdownHeader>
-        {isOpen && (
-          <DropdownBody>
-            {platforms?.ethereum?.contractAddress && (
-              <DropdownOption onClick={() => handleSelect('ethereum')}>
-                <img src="/images/ethereum.svg" alt="Ethereum" />
-                Ethereum
-              </DropdownOption>
-            )}
-            {platforms?.xdai?.contractAddress && (
-              <DropdownOption onClick={() => handleSelect('xdai')}>
-                <img src="/images/gnosis-chain.svg" alt="Gnosis Chain" />
-                Gnosis Chain
-              </DropdownOption>
-            )}
-          </DropdownBody>
-        )}
+        {isOpen && getDropdownBody(platforms, handleSelect)}
       </DropdownContainer>
 
       <InputLabel>
         {activeTab === 'Buy' ? 'Receive' : 'Send'}
 
         <div>
           <TokenLabel>
-            <img src={tokenImage} alt={tokenSymbol} />
+            <Image src={tokenImage} alt={tokenSymbol} width={20} height={20} />
             <span>{tokenSymbol}</span>
           </TokenLabel>
           <Input min={0} value={amount} type="text" onChange={handleInputChange} placeholder="0" />
@@ -326,7 +358,7 @@ export const SwapWidget = ({ tokenId, tokenSymbol, tokenImage, platforms }: Swap
           ...CONFIG.utm,
           utmContent: 'utm_content=swap-widget-token__' + encodeURI(tokenId),
         }}
-        href={onSwap()}
+        href={getSwapUrl()}
         passHref
       >
         <Button label={`Swap ${tokenSymbol}`} fontSize={1.6} minHeight={4.2} />