Repository: cowprotocol/cowswap
Pull request #5525: feat(bridge): add chain name in currency selector
Author: login: fairlighteth
Labels: name: Bridge
Created: 2025-03-18T17:37:52Z | Merged: 2025-03-24T13:21:10Z

# Summary

Display chain name in currency selector by default to improve cross-chain token identification.

# To Test

1. Open any trade widget (Swap, Limit Orders, etc.)
- [ ] Chain name should be visible under token symbols in currency selectors
- [ ] Chain name should be correctly displayed for both input and output tokens
- [ ] Verify chain name updates correctly when switching networks

# Background

Added `displayChainName` prop with default value of `true` to improve UX by making it clearer which chain tokens belong to.

# Screenshots
<img width="522" alt="Screenshot 2025-03-18 at 17 22 41" src="https://github.com/user-attachments/assets/b43ccbac-7d50-4b85-9312-84336980ae67" />
<img width="501" alt="Screenshot 2025-03-18 at 17 22 35" src="https://github.com/user-attachments/assets/eaaf92a4-335d-4be8-8884-af87bfaad325" />
<img width="508" alt="Screenshot 2025-03-18 at 17 22 12" src="https://github.com/user-attachments/assets/149f75ac-7d42-4ac2-8341-e175f18f7c59" />
<img width="514" alt="Screenshot 2025-03-18 at 17 22 02" src="https://github.com/user-attachments/assets/d663e4f1-6ed6-4181-a959-8e7619dba65f" />
<img width="514" alt="Screenshot 2025-03-18 at 17 21 55" src="https://github.com/user-attachments/assets/33db915f-4d90-4885-9e09-e11b66e0e112" />
<img width="551" alt="Screenshot 2025-03-18 at 17 21 48" src="https://github.com/user-attachments/assets/4f344eaa-2193-4efc-a22f-2e3fa233f974" />

## disabled:
<img width="540" alt="Screenshot 2025-03-18 at 17 37 09" src="https://github.com/user-attachments/assets/01fa624c-d29b-48e9-8d70-253ed45707b6" />



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced an option to display the blockchain network name alongside currency selections and within the trade widget, adding contextual clarity to the interface.

- **Style**
  - Updated visual elements and accessibility settings to seamlessly integrate the blockchain display, ensuring clear and consistent presentation across the affected components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx
index 65e0ee35914..98bfbcca31f 100644
--- a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx
+++ b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx
@@ -38,6 +38,7 @@ export interface CurrencyInputPanelProps extends Partial<BuiltItProps> {
   inputDisabled?: boolean
   tokenSelectorDisabled?: boolean
   displayTokenName?: boolean
+  displayChainName?: boolean
   inputTooltip?: string
   showSetMax?: boolean
   maxBalance?: CurrencyAmount<Currency> | undefined
@@ -70,6 +71,7 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
     inputDisabled = false,
     tokenSelectorDisabled = false,
     displayTokenName = false,
+    displayChainName = false,
     inputTooltip,
     onUserInput,
     allowsOffchainSigning,
@@ -249,6 +251,7 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
               loading={areCurrenciesLoading || disabled}
               readonlyMode={tokenSelectorDisabled}
               displayTokenName={displayTokenName}
+              displayChainName={displayChainName}
               customSelectTokenButton={customSelectTokenButton}
             />
           </div>
diff --git a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx
index 52ef6d81561..41a22ecf18d 100644
--- a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx
@@ -1,5 +1,7 @@
 import { ReactNode } from 'react'
 
+import { CHAIN_INFO } from '@cowprotocol/common-const'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { TokenLogo } from '@cowprotocol/tokens'
 import { TokenName } from '@cowprotocol/ui'
 import { Currency } from '@uniswap/sdk-core'
@@ -8,22 +10,46 @@ import { Trans } from '@lingui/macro'
 import { Nullish } from 'types'
 
 import * as styledEl from './styled'
-import { CurrencyName, StyledTokenSymbol } from './styled'
+import { StyledTokenSymbol, TokenSubText } from './styled'
+
+const TOKEN_SYMBOL_LENGTH = 40
+const TOKEN_NAME_LENGTH = 110
+const TOKEN_LOGO_SIZE = {
+  LARGE: 32,
+  SMALL: 28,
+} as const
 
 export interface CurrencySelectButtonProps {
   currency?: Nullish<Currency>
   loading: boolean
   readonlyMode?: boolean
   displayTokenName?: boolean
+  displayChainName?: boolean
   onClick?(): void
   customSelectTokenButton?: ReactNode
 }
 
 export function CurrencySelectButton(props: CurrencySelectButtonProps) {
-  const { currency, onClick, loading, readonlyMode = false, displayTokenName = false, customSelectTokenButton } = props
-  const $stubbed = !currency || false
+  const {
+    currency,
+    onClick,
+    loading,
+    readonlyMode = false,
+    displayTokenName = false,
+    displayChainName = false,
+    customSelectTokenButton,
+  } = props
+
+  const $noCurrencySelected = !currency
+  const showDetailedDisplay = displayTokenName || displayChainName
 
-  if (!currency && customSelectTokenButton) return <div onClick={onClick}>{customSelectTokenButton}</div>
+  if (!currency && customSelectTokenButton) {
+    return (
+      <div onClick={onClick} role="button" aria-label="Select custom token" tabIndex={0}>
+        {customSelectTokenButton}
+      </div>
+    )
+  }
 
   return (
     <styledEl.CurrencySelectWrapper
@@ -32,25 +58,44 @@ export function CurrencySelectButton(props: CurrencySelectButtonProps) {
       disabled={readonlyMode}
       onClick={onClick}
       isLoading={loading}
-      $stubbed={$stubbed}
+      $noCurrencySelected={$noCurrencySelected}
       displayTokenName={displayTokenName}
+      displayChainName={displayChainName}
+      role="button"
+      aria-label={currency ? `Selected token: ${currency.symbol}` : 'Select a token'}
+      tabIndex={readonlyMode ? -1 : 0}
     >
-      {currency ? <TokenLogo token={currency} size={displayTokenName ? 36 : 24} /> : <div></div>}
-      <styledEl.CurrencySymbol className="token-symbol-container" $stubbed={$stubbed}>
+      {currency ? (
+        <TokenLogo token={currency} size={showDetailedDisplay ? TOKEN_LOGO_SIZE.LARGE : TOKEN_LOGO_SIZE.SMALL} />
+      ) : (
+        <div aria-hidden="true" />
+      )}
+      <styledEl.CurrencySymbol className="token-symbol-container" $noCurrencySelected={$noCurrencySelected}>
         {currency ? (
           <>
-            <StyledTokenSymbol token={currency} length={40} displayTokenName={displayTokenName} />
+            <StyledTokenSymbol
+              token={currency}
+              length={TOKEN_SYMBOL_LENGTH}
+              displayTokenName={displayTokenName}
+              displayChainName={displayChainName}
+            />
+
             {displayTokenName && (
-              <CurrencyName>
-                <TokenName token={currency} length={110} />
-              </CurrencyName>
+              <TokenSubText>
+                <TokenName token={currency} length={TOKEN_NAME_LENGTH} />
+              </TokenSubText>
+            )}
+            {displayChainName && currency.chainId && (
+              <TokenSubText>
+                {CHAIN_INFO[currency.chainId as SupportedChainId]?.label || `ChainID: ${currency.chainId}`}
+              </TokenSubText>
             )}
           </>
         ) : (
           <Trans>Select a token</Trans>
         )}
       </styledEl.CurrencySymbol>
-      {readonlyMode ? null : $stubbed ? <styledEl.ArrowDown $stubbed={$stubbed} /> : <styledEl.ArrowDown />}
+      {readonlyMode ? null : <styledEl.ArrowDown $noCurrencySelected={$noCurrencySelected} aria-hidden="true" />}
     </styledEl.CurrencySelectWrapper>
   )
 }
diff --git a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx
index 98674cc438a..31d0296a5d2 100644
--- a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx
+++ b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx
@@ -3,22 +3,44 @@ import { Media, TokenSymbol, UI } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
-export const CurrencyName = styled.div`
+export const TokenSubText = styled.div`
   font-size: 12px;
-  color: var(${UI.COLOR_TEXT_OPACITY_70});
+  line-height: 1;
+  color: var(${UI.COLOR_TEXT_OPACITY_50});
   transition: color var(${UI.ANIMATION_DURATION}) ease-in-out;
 `
 
-export const ArrowDown = styled((props) => <DropDown {...props} />)<{ $stubbed?: boolean }>`
+export const CurrencySymbol = styled.div<{ $noCurrencySelected: boolean }>`
+  display: flex;
+  flex-flow: column wrap;
+  gap: 3px;
+  font-size: 19px;
+  font-weight: 500;
+  line-height: 1;
+  text-align: left;
+  color: inherit;
+  transition: color var(${UI.ANIMATION_DURATION}) ease-in-out;
+
+  ${Media.upToSmall()} {
+    font-size: 16px;
+    word-break: break-word;
+    white-space: normal;
+    text-align: left;
+  }
+`
+
+export const ArrowDown = styled((props) => <DropDown {...props} />)<{ $noCurrencySelected?: boolean }>`
+  --arrow-width: 12px;
+  --arrow-height: 7px;
   margin: 0 3px;
-  width: 12px;
-  height: 7px;
-  min-width: 12px;
-  min-height: 7px;
+  width: var(--arrow-width);
+  height: var(--arrow-height);
+  min-width: var(--arrow-width);
+  min-height: var(--arrow-height);
 
   > path {
-    stroke: currentColor;
-    stroke-width: 2px;
+    stroke: var(${UI.COLOR_TEXT_OPACITY_50});
+    stroke-width: 2;
     transition: stroke var(${UI.ANIMATION_DURATION}) ease-in-out;
   }
 
@@ -27,16 +49,21 @@ export const ArrowDown = styled((props) => <DropDown {...props} />)<{ $stubbed?:
   }
 `
 
-export const StyledTokenSymbol = styled(TokenSymbol)<{ displayTokenName: boolean }>`
+export const StyledTokenSymbol = styled(TokenSymbol)<{ displayTokenName: boolean; displayChainName: boolean }>`
   font-size: ${({ displayTokenName }) => (displayTokenName ? '15px' : null)};
+  color: var(${UI.COLOR_TEXT_PAPER});
+  transition: color var(${UI.ANIMATION_DURATION}) ease-in-out;
 `
 
 export const CurrencySelectWrapper = styled.button<{
   isLoading: boolean
-  $stubbed: boolean
+  $noCurrencySelected: boolean
   readonlyMode: boolean
   displayTokenName: boolean
+  displayChainName: boolean
 }>`
+  --min-height: 35px;
+  --min-width: 190px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -44,44 +71,36 @@ export const CurrencySelectWrapper = styled.button<{
   gap: 6px;
   border: 0;
   outline: none;
-  background: ${({ $stubbed }) => ($stubbed ? `var(${UI.COLOR_PRIMARY})` : `var(${UI.COLOR_PAPER})`)};
-  color: ${({ $stubbed }) => ($stubbed ? `var(${UI.COLOR_BUTTON_TEXT})` : `var(${UI.COLOR_TEXT_PAPER})`)};
+  background: ${({ $noCurrencySelected }) =>
+    $noCurrencySelected ? `var(${UI.COLOR_PRIMARY})` : `var(${UI.COLOR_PAPER})`};
+  color: ${({ $noCurrencySelected }) =>
+    $noCurrencySelected ? `var(${UI.COLOR_BUTTON_TEXT})` : `var(${UI.COLOR_TEXT_PAPER})`};
   box-shadow: var(${UI.BOX_SHADOW_2});
   opacity: ${({ isLoading }) => (isLoading ? 0.6 : 1)};
   border-radius: var(${UI.BORDER_RADIUS_NORMAL});
   ${({ readonlyMode }) => (readonlyMode ? 'padding-right: 10px;' : '')}
-  transition: background var(${UI.ANIMATION_DURATION}) ease-in-out, color var(${UI.ANIMATION_DURATION}) ease-in-out;
-  max-width: 190px;
-  padding: ${({ displayTokenName }) => (displayTokenName ? '8px' : '6px')};
+  transition: background var(${UI.ANIMATION_DURATION}) ease-in-out;
+  max-width: var(--max-width);
+  min-height: var(--min-height);
+  padding: ${({ displayTokenName, displayChainName }) =>
+    displayTokenName || displayChainName ? '5px 10px 5px 5px' : '5px'};
 
-  &:hover {
-    color: ${({ $stubbed, readonlyMode }) =>
-      readonlyMode ? '' : $stubbed ? `var(${UI.COLOR_BUTTON_TEXT})` : `var(${UI.COLOR_BUTTON_TEXT})`};
-    background: ${({ readonlyMode, $stubbed }) =>
-      readonlyMode ? '' : $stubbed ? `var(${UI.COLOR_PRIMARY_LIGHTER});` : `var(${UI.COLOR_PRIMARY});`};
+  ${StyledTokenSymbol} {
+    color: ${({ $noCurrencySelected }) =>
+      $noCurrencySelected ? `var(${UI.COLOR_BUTTON_TEXT})` : `var(${UI.COLOR_TEXT_PAPER})`};
   }
 
-  &:hover ${ArrowDown} > path {
-    transition: stroke var(${UI.ANIMATION_DURATION}) ease-in-out;
-    stroke: ${({ $stubbed }) => ($stubbed ? 'currentColor' : `var(${UI.COLOR_BUTTON_TEXT})`)};
-  }
-
-  &:hover ${CurrencyName} {
-    color: var(${UI.COLOR_BUTTON_TEXT});
-  }
-`
+  &:hover {
+    background: ${({ readonlyMode, $noCurrencySelected }) =>
+      readonlyMode ? '' : $noCurrencySelected ? `var(${UI.COLOR_PRIMARY_LIGHTER});` : `var(${UI.COLOR_PRIMARY});`};
 
-export const CurrencySymbol = styled.div<{ $stubbed: boolean }>`
-  font-size: 19px;
-  font-weight: 500;
-  text-align: left;
-  color: inherit;
-  transition: color var(${UI.ANIMATION_DURATION}) ease-in-out;
+    ${TokenSubText}, ${StyledTokenSymbol}, ${CurrencySymbol} {
+      color: var(${UI.COLOR_BUTTON_TEXT});
+    }
 
-  ${Media.upToSmall()} {
-    font-size: 16px;
-    word-break: break-word;
-    white-space: normal;
-    text-align: left;
+    ${ArrowDown} > path {
+      stroke: ${({ $noCurrencySelected }) =>
+        $noCurrencySelected ? `var(${UI.COLOR_TEXT_OPACITY_50})` : `var(${UI.COLOR_BUTTON_TEXT})`};
+    }
   }
 `
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx
index 4e40244bd56..f6a91e65e97 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx
@@ -33,6 +33,7 @@ import * as styledEl from './styled'
 import { TradeWidgetProps } from './types'
 
 import { useTradeStateFromUrl } from '../../hooks/setupTradeState/useTradeStateFromUrl'
+import { useIsCurrentTradeBridging } from '../../hooks/useIsCurrentTradeBridging'
 import { useIsEoaEthFlow } from '../../hooks/useIsEoaEthFlow'
 import { useIsWrapOrUnwrap } from '../../hooks/useIsWrapOrUnwrap'
 import { useLimitOrdersPromoBanner } from '../../hooks/useLimitOrdersPromoBanner'
@@ -58,6 +59,8 @@ export function TradeWidgetForm(props: TradeWidgetProps) {
   const isAlternativeOrderModalVisible = useIsAlternativeOrderModalVisible()
   const { pendingActivity } = useCategorizeRecentActivity()
   const isWrapOrUnwrap = useIsWrapOrUnwrap()
+  const { isLimitOrdersUpgradeBannerEnabled, isBridgingEnabled } = useFeatureFlags()
+  const isCurrentTradeBridging = useIsCurrentTradeBridging()
 
   const { slots, actions, params, disableOutput } = props
   const { settingsWidget, lockScreen, topContent, middleContent, bottomContent, outerContent } = slots
@@ -72,6 +75,7 @@ export function TradeWidgetForm(props: TradeWidgetProps) {
     hideTradeWarnings,
     enableSmartSlippage,
     displayTokenName = false,
+    displayChainName = isBridgingEnabled && isCurrentTradeBridging,
     isMarketOrderWidget = false,
     isSellingEthSupported = false,
   } = params
@@ -98,7 +102,6 @@ export function TradeWidgetForm(props: TradeWidgetProps) {
   const alternativeOrderModalVisible = useIsAlternativeOrderModalVisible()
   const primaryFormValidation = useGetTradeFormValidation()
   const { shouldBeVisible: isLimitOrdersPromoBannerVisible } = useLimitOrdersPromoBanner()
-  const { isLimitOrdersUpgradeBannerEnabled } = useFeatureFlags()
   const isEoaEthFlow = useIsEoaEthFlow()
 
   const sellToken = inputCurrencyInfo.currency
@@ -142,6 +145,7 @@ export function TradeWidgetForm(props: TradeWidgetProps) {
     allowsOffchainSigning,
     tokenSelectorDisabled: alternativeOrderModalVisible,
     displayTokenName,
+    displayChainName,
   }
 
   const openSellTokenSelect = useCallback(
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/types.ts b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/types.ts
index 53229dd8056..e49e8b797d0 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/types.ts
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/types.ts
@@ -27,6 +27,7 @@ interface TradeWidgetParams {
   enableSmartSlippage?: boolean
   isMarketOrderWidget?: boolean
   displayTokenName?: boolean
+  displayChainName?: boolean
   customSelectTokenButton?: ReactNode
 }
 


Reviews:
user: login: shoom3301
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-19T05:58:37Z
user: login: shoom3301
body: Looks great!
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-19T05:59:18Z
user: login: alfetopito
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-19T18:30:50Z
user: login: elena-zh
body: Hey @fairlighteth , great, thank you!
However, networks names are displayed when I switch the flag off: 
![image](https://github.com/user-attachments/assets/2606eae1-24a3-413c-a365-6888e8804d22)

Could you please fix it? 
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T11:17:44Z
user: login: elena-zh
body: Okay then...
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T15:18:26Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 96c0ac3cfcd36e4e203495d8d636d36408cde4fb and 691835664e0865559dfc378265307508339bb6a5.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx` (4 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Definitions (1)</summary>

<details>
<summary>apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx (1)</summary><blockquote>

<details>
<summary>apps/cowswap-frontend/src/modules/trade/hooks/useIsCurrentTradeBridging.ts (1) (1)</summary>

* `useIsCurrentTradeBridging` (3-7)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (3)</summary>

* GitHub Check: Lint
* GitHub Check: Test
* GitHub Check: Cypress

</details>

<details>
<summary>🔇 Additional comments (2)</summary><blockquote>

<details>
<summary>apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx (2)</summary>

`62-64`: **Confirm that useIsCurrentTradeBridging is used correctly**

The hook `useIsCurrentTradeBridging` is introduced here to determine if the current trade involves bridging between different chains. Note that it returns `true` when the input and output currencies have different chain IDs.

---

`148-148`: **LGTM! The displayChainName prop is correctly passed to both currency input panels**

This ensures the chain name will be displayed in both input and output currency selectors based on the configured value.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T16:20:27Z
user: login: elena-zh
body: Hey @fairlighteth , I can face the same issues that Leandro reported. But I believe they are not related to the current PR. 
Behavior wise, changes LGTM!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-21T14:11:48Z
user: login: shoom3301
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-24T08:56:30Z

Review comments:
diff_hunk: @@ -8,22 +10,46 @@ import { Trans } from '@lingui/macro'
 import { Nullish } from 'types'
 
 import * as styledEl from './styled'
-import { CurrencyName, StyledTokenSymbol } from './styled'
+import { StyledTokenSymbol, TokenSubText } from './styled'
+
+const TOKEN_SYMBOL_LENGTH = 40
+const TOKEN_NAME_LENGTH = 110
+const TOKEN_LOGO_SIZE = {
+  LARGE: 32,
+  SMALL: 28,
+} as const
 
 export interface CurrencySelectButtonProps {
   currency?: Nullish<Currency>
   loading: boolean
   readonlyMode?: boolean
   displayTokenName?: boolean
+  displayChainName?: boolean
   onClick?(): void
   customSelectTokenButton?: ReactNode
 }
 
 export function CurrencySelectButton(props: CurrencySelectButtonProps) {
-  const { currency, onClick, loading, readonlyMode = false, displayTokenName = false, customSelectTokenButton } = props
-  const $stubbed = !currency || false
+  const {
+    currency,
+    onClick,
+    loading,
+    readonlyMode = false,
+    displayTokenName = false,
+    displayChainName = false,
+    customSelectTokenButton,
+  } = props
+
+  const $noCurrencySelected = !currency || false
path: apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx
user: login: shoom3301
body: ```suggestion
  const $noCurrencySelected = !currency
```
created_at: 2025-03-19T05:58:36Z
author_association: COLLABORATOR
diff_hunk: @@ -72,6 +75,7 @@ export function TradeWidgetForm(props: TradeWidgetProps) {
     hideTradeWarnings,
     enableSmartSlippage,
     displayTokenName = false,
+    displayChainName = isBridgingEnabled && !isCurrentTradeBridging,
path: apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Review the logic for displayChainName default value**

The current implementation only shows chain names when bridging is enabled AND the current trade is NOT bridging. Based on the PR objectives, chain names should help identify cross-chain tokens, so this logic seems counterintuitive.

Consider changing to simply `displayChainName = isBridgingEnabled` to show chain names whenever the bridging feature is enabled, regardless of whether the current trade is cross-chain or not.

```diff
-    displayChainName = isBridgingEnabled && !isCurrentTradeBridging,
+    displayChainName = isBridgingEnabled,
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    displayChainName = isBridgingEnabled,
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-20T16:20:26Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-03-18T17:37:56Z
body: [vc]: #+uT8LbztSSJ8YWgMh4RX37iP0+UVJV1ItbGhnChoJG8=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJjb3dmaSIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9jb3dzd2FwL2Nvd2ZpL0hGY3liSmpwajVCajhERDdobW9mMmh5V3hZbXkiLCJwcmV2aWV3VXJsIjoiY293ZmktZ2l0LWZlYXQtdG9rZW5zZWxlY3Rvci1zdHlsZS1jb3dzd2FwLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQifSx7Im5hbWUiOiJzZGstdG9vbHMiLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vY293c3dhcC1kZXYvc2RrLXRvb2xzL2kyMXJIUG0xRnJ5WmlOUTlIeUNUYnpTcm9pY0giLCJwcmV2aWV3VXJsIjoic2RrLXRvb2xzLWdpdC1mZWF0LXRva2Vuc2VsZWN0b3Itc3R5bGUtY293c3dhcC1kZXYudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJJR05PUkVEIn0seyJuYW1lIjoid2lkZ2V0LWNvbmZpZ3VyYXRvciIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9jb3dzd2FwL3dpZGdldC1jb25maWd1cmF0b3IvM2pvdXA0YlNaRDZTQkJjTlMzcWkzOHdCTUp1MyIsInByZXZpZXdVcmwiOiJ3aWRnZXQtY29uZmlndXJhdG9yLWdpdC1mZWF0LXRva2Vuc2VsZWN0b3Itc3R5bGUtY293c3dhcC52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IklHTk9SRUQifSx7Im5hbWUiOiJjb3Ntb3MiLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vY293c3dhcC1kZXYvY29zbW9zL0dvTm1TeGRXSmtOSnh6TWRSR2hoVE1KdFdlS0IiLCJwcmV2aWV3VXJsIjoiY29zbW9zLWdpdC1mZWF0LXRva2Vuc2VsZWN0b3Itc3R5bGUtY293c3dhcC1kZXYudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJJR05PUkVEIn0seyJuYW1lIjoic3dhcC1kZXYiLCJyb290RGlyZWN0b3J5IjoiYXBwcy9jb3dzd2FwLWZyb250ZW5kIiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL2Nvd3N3YXAtZGV2L3N3YXAtZGV2L0hkM25ZVmVwRVI4OEJHVkxHaFd3aVZKSk53MUIiLCJwcmV2aWV3VXJsIjoic3dhcC1kZXYtZ2l0LWZlYXQtdG9rZW5zZWxlY3Rvci1zdHlsZS1jb3dzd2FwLWRldi52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIn0seyJuYW1lIjoiZXhwbG9yZXItZGV2Iiwicm9vdERpcmVjdG9yeSI6bnVsbCwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL2Nvd3N3YXAtZGV2L2V4cGxvcmVyLWRldi8yQ3lRVHVZNVpkeEhINUZhelR0YVRZa3hhWVdGIiwicHJldmlld1VybCI6ImV4cGxvcmVyLWRldi1naXQtZmVhdC10b2tlbnNlbGVjdG9yLXN0eWxlLWNvd3N3YXAtZGV2LnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQifV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **cowfi** | ✅ Ready ([Inspect](https://vercel.com/cowswap/cowfi/HFcybJjpj5Bj8DD7hmof2hyWxYmy)) | [Visit Preview](https://cowfi-git-feat-tokenselector-style-cowswap.vercel.app) | Mar 24, 2025 1:13pm |
| **explorer-dev** | ✅ Ready ([Inspect](https://vercel.com/cowswap-dev/explorer-dev/2CyQTuY5ZdxHH5FazTtaTYkxaYWF)) | [Visit Preview](https://explorer-dev-git-feat-tokenselector-style-cowswap-dev.vercel.app) | Mar 24, 2025 1:13pm |
| **swap-dev** | ✅ Ready ([Inspect](https://vercel.com/cowswap-dev/swap-dev/Hd3nYVepER88BGVLGhWwiVJJNw1B)) | [Visit Preview](https://swap-dev-git-feat-tokenselector-style-cowswap-dev.vercel.app) | Mar 24, 2025 1:13pm |

<details><summary>3 Skipped Deployments</summary>

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **cosmos** | ⬜️ Ignored ([Inspect](https://vercel.com/cowswap-dev/cosmos/GoNmSxdWJkNJxzMdRGhhTMJtWeKB)) | [Visit Preview](https://cosmos-git-feat-tokenselector-style-cowswap-dev.vercel.app) | Mar 24, 2025 1:13pm |
| **sdk-tools** | ⬜️ Ignored ([Inspect](https://vercel.com/cowswap-dev/sdk-tools/i21rHPm1FryZiNQ9HyCTbzSroicH)) | [Visit Preview](https://sdk-tools-git-feat-tokenselector-style-cowswap-dev.vercel.app) | Mar 24, 2025 1:13pm |
| **widget-configurator** | ⬜️ Ignored ([Inspect](https://vercel.com/cowswap/widget-configurator/3joup4bSZD6SBBcNS3qi38wBMJu3)) | [Visit Preview](https://widget-configurator-git-feat-tokenselector-style-cowswap.vercel.app) | Mar 24, 2025 1:13pm |
</details>







author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-03-18T17:38:00Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

This pull request adds an optional `displayChainName` property to several UI components in the cowswap-frontend project. The property is added to the `CurrencyInputPanel` and `CurrencySelectButton` components (and their styled counterparts), and is configured in the TradeWidget components as well. In these components, the new flag enables conditional rendering of blockchain chain names. Changes include extending prop interfaces, updating component destructuring, renaming internal variables, and adjusting style logic, all without impacting existing functionality.

## Changes

| Files | Change Summary |
|-------|----------------|
| `apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx`,<br>`.../CurrencySelectButton/index.tsx`,<br>`.../CurrencySelectButton/styled.tsx` | Added optional `displayChainName` property to component props and adjusted styled components. Updated destructuring logic (renaming `$stubbed` to `$noCurrencySelected`) and introduced new styled components (`TokenSubText` and `CurrencySymbol`) for conditionally rendering chain names. |
| `apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx`,<br>`.../TradeWidget/types.ts` | Integrated a new `displayChainName` parameter into the TradeWidget components to enable the display of blockchain chain names in the widget UI. |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant TW as TradeWidgetForm
    participant CIP as CurrencyInputPanel
    participant CSB as CurrencySelectButton
    participant UI as Renderer

    TW->>CIP: Pass displayChainName (true)
    CIP->>CSB: Forward displayChainName prop
    CSB->>UI: Conditionally render chain name based on flag
```

## Possibly related PRs

- **cowprotocol/cowswap#5511**: Related changes that also introduce a `displayChainName` property to the `CurrencySelectButtonProps` interface.
- **cowprotocol/cowswap#5437**: Modifications that add the `displayChainName` property to the `CurrencyInputPanelProps`.
- **cowprotocol/cowswap#5508**: Changes that introduce a `displayChainName` property to the `CurrencySelectButtonProps`.

## Suggested labels

`preview-widget-cfg`

## Suggested reviewers

- elena-zh
- alfetopito
- shoom3301

## Poem

> I'm a code bunny, hopping through the source so fine,  
> Dropping flags that make chain names in the UI shine.  
> With every prop and style tweak, I skip in delight,  
> Watching blockchain names appear just right.  
> In the garden of commits, I celebrate this change in code,  
> A playful nibble on updates on my merry, winding road.  
> (\_/) Hop on, my friends! Enjoy the clever mode.

<!-- walkthrough_end -->


---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 691835664e0865559dfc378265307508339bb6a5 and cb52c908b729241c88bf51cef28bd0d293f5e107.

</details>

<details>
<summary>📒 Files selected for processing (2)</summary>

* `apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx` (2 hunks)
* `apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx` (4 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (2)</summary>

* apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx
* apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: Cypress

</details>

</details>
<!-- internal state start -->


<!-- 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= -->

<!-- internal state end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=cowprotocol/cowswap&utm_content=5525):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: fairlighteth
created_at: 2025-03-20T14:52:48Z
body: > Hey @fairlighteth , great, thank you! However, networks names are displayed when I switch the flag off: ![image](https://private-user-images.githubusercontent.com/70885163/424947413-2606eae1-24a3-413c-a365-6888e8804d22.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI0ODI2MzEsIm5iZiI6MTc0MjQ4MjMzMSwicGF0aCI6Ii83MDg4NTE2My80MjQ5NDc0MTMtMjYwNmVhZTEtMjRhMy00MTNjLWEzNjUtNjg4OGU4ODA0ZDIyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIwVDE0NTIxMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTUyZTZiZWU1ZWNiN2NjODc0OWZkY2Q2Zjg4YWY1ODk5YTdiNGJlM2JkZTFlNDg3M2ViYTgyNjRmYzc1MDkxYzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.hMzPCs5ILEEsiZkRCG5zW-pXfsxy5UWZE4r8XmIuFcA)
> 
> Could you please fix it?

This is shown regardless of the bridge and swap feature flag.
author_association: CONTRIBUTOR
user: login: alfetopito
created_at: 2025-03-20T18:19:43Z
body: > > Hey @fairlighteth , great, thank you! However, networks names are displayed when I switch the flag off: ![image](https://private-user-images.githubusercontent.com/70885163/424947413-2606eae1-24a3-413c-a365-6888e8804d22.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI0ODI2MzEsIm5iZiI6MTc0MjQ4MjMzMSwicGF0aCI6Ii83MDg4NTE2My80MjQ5NDc0MTMtMjYwNmVhZTEtMjRhMy00MTNjLWEzNjUtNjg4OGU4ODA0ZDIyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIwVDE0NTIxMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTUyZTZiZWU1ZWNiN2NjODc0OWZkY2Q2Zjg4YWY1ODk5YTdiNGJlM2JkZTFlNDg3M2ViYTgyNjRmYzc1MDkxYzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.hMzPCs5ILEEsiZkRCG5zW-pXfsxy5UWZE4r8XmIuFcA)
> > Could you please fix it?
> 
> This is shown regardless of the bridge and swap feature flag.

To be clear, I thought the decision (based on [this thread](https://cowservices.slack.com/archives/C0361CDG8GP/p1742485374124129?thread_ts=1742484043.514329&cid=C0361CDG8GP)) was to show the labels ONLY when the network differs.
Not the case? Or that discussion came after and the code still needs to be updated?
author_association: COLLABORATOR
user: login: elena-zh
created_at: 2025-03-21T09:24:53Z
body: > > > Hey @fairlighteth , great, thank you! However, networks names are displayed when I switch the flag off:
> > > Could you please fix it?
> > 
> > 
> > This is shown regardless of the bridge and swap feature flag.
> 
> To be clear, I thought the decision (based on [this thread](https://cowservices.slack.com/archives/C0361CDG8GP/p1742485374124129?thread_ts=1742484043.514329&cid=C0361CDG8GP)) was to show the labels ONLY when the network differs. Not the case? Or that discussion came after and the code still needs to be updated?

Hey @alfetopito , it was before the discussion. Now the code needs to be updated :) 
author_association: CONTRIBUTOR
user: login: fairlighteth
created_at: 2025-03-21T12:24:21Z
body: Logic has been updated to:
- Feature flag OFF? Don't show network labels (incl. don't show same network chain labels - NO labels).
- Feature flag ON? Always show network labels - exception: when both tokens are on the same network.
author_association: CONTRIBUTOR
user: login: alfetopito
created_at: 2025-03-21T13:44:22Z
body: > Logic has been updated to:
> 
>     * Feature flag OFF? Don't show network labels (incl. don't show same network chain labels - NO labels).
> 
>     * Feature flag ON? Always show network labels - exception: when both tokens are on the same network.

The deployment is a bit clunky.
In the latest deployment that I could find on vercel (https://swap-dev-git-feat-tokenselector-style-cowswap-dev.vercel.app), it still shows the network icons even for same network, although without the labels.
Is that expected? (I thought not even logos would be there, but I might have understood it wrong).

Probably due to missing data, but when I select some chains, I see the chain id instead of the name:

![image](https://github.com/user-attachments/assets/1bb5bcc9-3b16-4853-8659-f26be3a18cec)

Also, I only see 3 chains in the buy token selector. Our supported chains are not present:

![image](https://github.com/user-attachments/assets/88858bd1-7bc6-48e8-bac7-4afc2685aa58)

The last 2 probably not related to the current change.
author_association: COLLABORATOR