Skip to content

fix: improve swap UI when network costs round to 0 #6846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Olaleye-Blessing wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix: improve swap UI when network costs round to 0 #6846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions apps/cowswap-frontend/src/common/pure/ReceiveAmountInfo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ export function ReceiveAmountInfoTooltip(props: ReceiveAmountInfoTooltipProps):
const hasProtocolFee = hasValidFee(protocolFeeAmount, protocolFeeBps)
const hasAnyFee = hasPartnerFee || hasProtocolFee
const hasNetworkFee = !isFractionFalsy(networkFeeAmount)
const hasFee = hasNetworkFee || hasAnyFee

const isEoaNotEthFlow = allowsOffchainSigning && !isEoaEthFlow

Expand All @@ -72,7 +71,9 @@ export function ReceiveAmountInfoTooltip(props: ReceiveAmountInfoTooltipProps):

{hasPartnerFee && <FeeItem title={t`Partner fee`} isSell={isSell} feeAmount={partnerFeeAmount} />}

<NetworkFeeItem discount={discount} networkFeeAmount={networkFeeAmount} isSell={isSell} hasFee={hasFee} />
{hasNetworkFee && (
<NetworkFeeItem discount={discount} networkFeeAmount={networkFeeAmount} isSell={isSell} hasFee={hasAnyFee} />
Comment on lines +74 to +75
Copy link
Collaborator

@alfetopito alfetopito Jan 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While this does fix a problem, of showing something when the amounts are too small, I don't think it solves the main issue because:

  1. The amount is negligible, < 1 atom of the opposite token, but it's not completely 0, so FREE isn't accurate
  2. Even here in the code, we use the hasNetworkFee to control the render of the component, but use hasAnyFee, which depends on hasPartnerFee and hasProcotolFee

Copy link
Author

@Olaleye-Blessing Olaleye-Blessing Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the <NetworkFeeItem /> is a little misleading. If there's a protocol/partner fee but the network fee is zero, the component will always display 0. I don't think the hasFee prop is really effective if <NetworkFeeItem /> always renders only the network fee.

)}

{!hasAnyFee && !isEoaNotEthFlow && <FeeItem title={t`Fee`} isSell={isSell} feeAmount={undefined} />}

Expand Down
3 changes: 2 additions & 1 deletion apps/cowswap-frontend/src/modules/trade/containers/TradeFeesAndCosts/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,15 @@ export function TradeFeesAndCosts(props: TradeFeesAndCostsProps): ReactNode {
showTotalRow={showTotalRow}
/>

{hasNetworkCosts && networkFeeAmount && (
{networkFeeAmount && (
<NetworkCostsRow
networkFeeAmount={networkFeeAmount}
networkFeeAmountUsd={networkFeeAmountUsd}
withTimelineDot={withTimelineDot}
amountSuffix={networkCostsSuffix}
tooltipSuffix={networkCostsTooltipSuffix}
isLast
showFreeLabel={!hasNetworkCosts}
/>
)}
</>
Expand Down
3 changes: 3 additions & 0 deletions apps/cowswap-frontend/src/modules/trade/pure/NetworkCostsRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ interface NetworkCostsRowProps {
amountSuffix?: ReactNode
tooltipSuffix?: ReactNode
isLast?: boolean
showFreeLabel?: boolean
}

export function NetworkCostsRow({
Expand All @@ -22,6 +23,7 @@ export function NetworkCostsRow({
amountSuffix,
tooltipSuffix,
isLast = false,
showFreeLabel = false,
}: NetworkCostsRowProps): ReactNode {
const { t } = useLingui()

Expand All @@ -42,6 +44,7 @@ export function NetworkCostsRow({
}
label={t`Network costs (est.)`}
isLast={isLast}
showFreeLabel={showFreeLabel}
/>
)
}
32 changes: 24 additions & 8 deletions apps/cowswap-frontend/src/modules/trade/pure/ReviewOrderModalAmountRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
import { ReactElement, ReactNode } from 'react'

import { FiatAmount, InfoTooltip, TokenAmount } from '@cowprotocol/ui'
import { FiatAmount, InfoTooltip, TokenAmount, UI } from '@cowprotocol/ui'
import { Currency, CurrencyAmount } from '@uniswap/sdk-core'

import { Trans } from '@lingui/react/macro'
import styled from 'styled-components/macro'
import { Nullish } from 'types'

import { Content, Label } from 'modules/trade/pure/ConfirmDetailsItem/styled'

import { ConfirmDetailsItem } from '../ConfirmDetailsItem'
import { ReceiveAmountTitle } from '../ReceiveAmountTitle'

const GreenText = styled.span`
color: var(${UI.COLOR_GREEN});
`

export type ReviewOrderAmountRowProps = {
amount?: Nullish<CurrencyAmount<Currency>>
fiatAmount?: Nullish<CurrencyAmount<Currency>>
Expand All @@ -21,6 +27,7 @@ export type ReviewOrderAmountRowProps = {
withTimelineDot?: boolean
highlighted?: boolean
isLast?: boolean
showFreeLabel?: boolean
}

export function ReviewOrderModalAmountRow({
Expand All @@ -34,17 +41,26 @@ export function ReviewOrderModalAmountRow({
withTimelineDot = false,
highlighted = false,
isLast = false,
showFreeLabel = false,
}: ReviewOrderAmountRowProps): ReactElement {
const Amount = (
<Content highlighted={highlighted}>
{children}
{!isAmountAccurate && '≈ '}
<TokenAmount amount={amount} defaultValue="-" tokenSymbol={amount?.currency} />
{amountSuffix}
{fiatAmount && (
{showFreeLabel ? (
<GreenText>
<Trans>FREE</Trans>
</GreenText>
) : (
<>
&nbsp;
<FiatAmount amount={fiatAmount} withParentheses />
{children}
{!isAmountAccurate && '≈ '}
<TokenAmount amount={amount} defaultValue="-" tokenSymbol={amount?.currency} />
{amountSuffix}
{fiatAmount && (
<>
&nbsp;
<FiatAmount amount={fiatAmount} withParentheses />
</>
)}
</>
)}
</Content>
Expand Down
Loading