Viem Migration - Yield tab is returning to previous page when clicked

[lgahdl]

Summary

Fixes #901

useTradeNavigate was reading the trade route from tradeTypeAtom (Jotai atom), which is updated via useLayoutEffect — meaning it's stale during the first render after a route change. When navigating from Swap to Yield, the atom still held the SWAP route, so useSetupTradeState's tokensAreEmpty redirect would fire and send the user back to /swap/WETH/USDC.

Fix: replace useTradeTypeInfo() (atom-based) with useTradeTypeInfoFromUrl() (URL-based) inside useTradeNavigate, so the redirect always targets the route that matches the current URL.

This was a heisenbug — opening Chrome DevTools slows JS execution enough to change render/effect timing, masking the race condition.

To Test

1. Open the app on the Swap page (e.g. /1/swap/WETH/USDC)

• Click on the Yield tab in the navigation
• Verify the page stays on Yield and does not redirect back to Swap
• Verify this works with Chrome DevTools closed
• Verify this works with Chrome DevTools open in a separate window

2. Navigate directly to the Yield URL without tokens (e.g. /1/yield)

• Verify the page loads correctly on Yield
• Verify no redirect occurs

3. Navigate between all trade tabs (Swap → Limit → Advanced → Yield → Swap)

• Verify each tab loads and stays on its own page without unexpected redirects

Background

The root cause is a race condition between useLayoutEffect and useEffect scheduling. In React, useLayoutEffect runs synchronously after the DOM commit, but the useEffect closures in the same render cycle already captured the pre-layout-effect state. So useTradeNavigate's tradeRoute was SWAP (stale) when the redirect effect fired, even though the URL had already changed to /yield.

useTradeTypeInfoFromUrl() derives the trade type directly from the URL via useMatch, making it always in sync with the current route without depending on atom propagation timing.

Summary by CodeRabbit

• Improvements
  • Enhanced trade route selection to better align with URL-derived navigation preferences, ensuring more consistent behavior when navigating between different trade types.

[vercel]

Someone 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]

Warning

Rate limit exceeded

@lgahdl has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 10 minutes and 3 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 10 minutes and 3 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 3db5176b-f1f8-403e-9464-3b9a5abc6042

📥 Commits

Reviewing files that changed from the base of the PR and between a9a8e52 and c4cc64a.

📒 Files selected for processing (1)

• apps/cowswap-frontend/src/modules/trade/hooks/useTradeNavigate.ts

Walkthrough

The useTradeNavigate hook now retrieves tradeTypeInfo from useTradeTypeInfoFromUrl instead of useTradeTypeInfo, changing the source for computing the target trade route. All other logic remains unchanged.

Changes

Cohort / File(s)	Summary
Trade Navigation Hook apps/cowswap-frontend/src/modules/trade/hooks/useTradeNavigate.ts	Switched tradeTypeInfo source from useTradeTypeInfo to useTradeTypeInfoFromUrl, altering how the trade route is determined based on URL-derived information rather than state-based trade type information.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A hop through the hooks, a swap of the source,
From state to URL, the route takes its course,
Two lines changed, navigation still flows,
Where the trade types lead, the router now knows! 🌿

🚥 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
Title check	✅ Passed	The title describes a specific bug fix (Yield tab redirecting back to previous page) which matches the actual change in the PR, though it references 'Viem Migration' which is not the primary focus of this changeset.
Description check	✅ Passed	The description fully covers the required template sections: Summary with issue reference, detailed To Test steps with checkboxes, and comprehensive Background explanation of the race condition.
Linked Issues check	✅ Passed	The PR addresses issue #901's core objective of eliminating race-condition-caused redirects when navigating trade tabs by switching from atom-based to URL-based trade type detection.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to fixing the redirect bug in useTradeNavigate by replacing one hook call, with no unrelated modifications to state management, RowSlippage, or ETH flow logic.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
swap-dev	Ready	Preview	Apr 16, 2026 0:27am

[elena-zh]

thank you