fix: improve swap UI when network costs round to 0

[Olaleye-Blessing]

Summary

Fixes #6826

Sometimes, there is no "network costs" field on the swap order estimation. This PR makes sure the field is present everytime even if the cost is zero. The word, "free", is shown when the cost is zero.

Screenshots

Before

After

To Test

1. Go to the swap page
2. Switch to any L2 chain with a general low gas fee (Gnosis, Plasma)
3. Swap tokens
4. Check the network costs field (present with the "free" word if the cost is zero)

Summary by CodeRabbit

• New Features

  • Added a "Free" label to indicate when network costs are absent.

• Improvements

  • Network cost row now appears whenever a network fee amount exists, clarifying when costs apply.
  • Fee labeling and propagation across review screens improved for clearer, more consistent fee breakdowns.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@Olaleye-Blessing is attempting to deploy a commit to the cow Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

[coderabbitai]

Walkthrough

The PR surfaces a new showFreeLabel prop through trade fee components and relaxes NetworkCostsRow rendering to depend on networkFeeAmount, allowing the UI to show a "Free" label when network costs are effectively zero while keeping the row visible.

Changes

Cohort / File(s)	Summary
Container apps/cowswap-frontend/src/modules/trade/containers/TradeFeesAndCosts/index.tsx	Render NetworkCostsRow when networkFeeAmount exists and pass showFreeLabel={ !hasNetworkCosts }.
Network costs row apps/cowswap-frontend/src/modules/trade/pure/NetworkCostsRow/index.tsx	Added optional showFreeLabel?: boolean (default false) to props and forwarded it to ReviewOrderModalAmountRow.
Amount row rendering apps/cowswap-frontend/src/modules/trade/pure/ReviewOrderModalAmountRow/index.tsx	Added showFreeLabel?: boolean; when true renders localized Trans("FREE") in green instead of numeric amount/fiat.
Receive amount info apps/cowswap-frontend/src/common/pure/ReceiveAmountInfo/index.tsx	Adjusted fee presence logic: removed internal hasFee calc, render NetworkFeeItem only when hasNetworkFee, and use hasAnyFee for fee flagging.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor User
    participant TradeFeesAndCosts as "TradeFeesAndCosts\n(container)"
    participant NetworkCostsRow as "NetworkCostsRow"
    participant ReviewAmountRow as "ReviewOrderModalAmountRow"

    User->>TradeFeesAndCosts: trigger render (trade/fees)
    TradeFeesAndCosts->>NetworkCostsRow: render(networkFeeAmount, hasNetworkCosts)
    Note right of NetworkCostsRow: computes showFreeLabel = !hasNetworkCosts
    NetworkCostsRow->>ReviewAmountRow: render(amount?, showFreeLabel)
    alt showFreeLabel == true
        ReviewAmountRow->>ReviewAmountRow: render "FREE" (Trans, green)
    else showFreeLabel == false
        ReviewAmountRow->>ReviewAmountRow: render numeric TokenAmount + optional fiat
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: add isLast for fees component #6625: Modifies the same fee-related components (NetworkCostsRow, ReviewOrderModalAmountRow) and prop/rendering behavior.
• hotfix: protocol fee tooltips/descriptions improvements  #6548: Adjusts amount/label rendering in ReviewOrderModalAmountRow and related UI flow.
• feat(bridge): include bridge costs to min. receive amount  #6002: Introduces "Free" label handling and changes network-fee UI components.

Suggested labels

Design

Suggested reviewers

• elena-zh
• limitofzero
• shoom3301

Poem

🐰 I hopped from prop to prop today,
If tiny fees would slip away,
I plant a "Free" where numbers hide,
Keep the costs row standing by your side,
A carrot cheer for clarity! 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly reflects the main change: improving swap UI when network costs round to 0 by displaying 'Free' instead of hiding the field.
Linked Issues check	✅ Passed	All code changes align with issue #6826: the PR ensures the network costs field always renders with a 'Free' label when costs round to zero instead of being hidden.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the network costs display issue. No unrelated modifications detected across the four modified files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Olaleye-Blessing]

I have read the CLA Document and I hereby sign the CLA

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@apps/cowswap-frontend/src/modules/trade/containers/TradeFeesAndCosts/index.tsx`:
- Around line 64-73: The isLast prop for the NetworkCostsRow is incorrectly tied
to hasNetworkCosts (isLast={!hasNetworkCosts}) so when networkFeeAmount exists
the row is marked not-last; change the prop to always pass true when rendering
NetworkCostsRow (e.g., isLast={true}) so that NetworkCostsRow is consistently
treated as the final timeline row regardless of hasNetworkCosts; locate this in
the TradeFeesAndCosts component around the NetworkCostsRow render and update the
isLast prop only (leave showFreeLabel logic as-is).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
swap-dev	Ready	Preview	Jan 19, 2026 1:40pm

[elena-zh]

Hey @Olaleye-Blessing , thank you for addressing this issue.
I have 2 nitpicks to report:

1. Styling: 'FREE' should be in capitals, and should be in green. See an example:

2. When we say that it is 'free', then, the 'receive'/'from' tooptips should not show '-0' for fee. The line should be removed from there.

Example:

Could you please address these issues?

Thanks

[Olaleye-Blessing]

Hy @elena-zh

I've addressed both issues. Thanks.

[elena-zh]

LGTM, thank you!

[alfetopito]

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

[Olaleye-Blessing]

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.