fix: trade bottom nav active state for all sub-tabs

[premiumjibles]

Description

The Trade tab in the mobile bottom navigation only showed as active for the Swap (/trade) and Limit (/limit) routes. Clicking Buy, Sell, or Earn sub-tabs navigated to /ramp/trade/* and /earn/* respectively, which were missing from the relatedPaths array used by MobileNavLink for active state matching.

Changes:

• Added /ramp/trade and /earn to the Trade route's relatedPaths array in RoutesCommon.tsx
• Fixed the mobile header title to use common.trade ("Trade") instead of transactionRow.swap ("Swap") for consistency with the bottom nav label

Issue (if applicable)

closes #11964

Risk

Near zero — only affects mobile bottom nav active state styling and a translation key for the mobile page title. No transaction logic, wallet interactions, or protocol changes.

What protocols, transaction types, wallets or contract interactions might be affected by this PR?

None.

Testing

Engineering

1. Open the app on mobile (or use responsive mode in DevTools)
2. Tap the Trade bottom nav tab
3. Tap through each sub-tab: Swap, Limit, Buy, Sell, Earn
4. Verify the Trade icon in the bottom nav stays active/highlighted for all five sub-tabs
5. Verify the mobile page header says "Trade" (not "Swap")

Operations

• Open mobile app, connect wallet
• Tap Trade in bottom nav — verify it's highlighted
• Tap each sub-tab (Swap, Limit, Buy, Sell, Earn) — verify Trade stays highlighted in bottom nav for all
• Verify the page title reads "Trade" on mobile

Screenshots (if applicable)

Demo

https://jam.dev/c/76b60627-67a4-48f4-b747-edc034f88912

Summary by CodeRabbit

• Updates
  • Enhanced Trade section routing to connect Ramp Trade and Earn features
  • Corrected mobile Trade header label for consistency

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 7f67d67 and 9497b14.

📒 Files selected for processing (2)

• src/Routes/RoutesCommon.tsx
• src/components/MultiHopTrade/components/SharedTradeInput/SharedTradeInputHeader.tsx

---

📝 Walkthrough

Walkthrough

The PR extends the Trade route's related paths to include '/ramp/trade' and '/earn', and updates the mobile header text translation key from 'transactionRow.swap' to 'common.trade'. These changes ensure consistent bottom navigation highlighting across all trade-related sections and align page titles with navbar terminology.

Changes

Cohort / File(s)	Summary
Route Configuration src/Routes/RoutesCommon.tsx	Extended the relatedPaths array for the Trade route to include /ramp/trade and /earn alongside the existing /trade and /limit paths, ensuring all trade-related tabs trigger navigation highlighting.
Mobile Header Translation src/components/MultiHopTrade/components/SharedTradeInput/SharedTradeInputHeader.tsx	Updated the mobile layout heading text translation key from transactionRow.swap to common.trade for consistent terminology with the bottom navigation bar.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• #11753 — Modifies SharedTradeInputHeader.tsx to add desktop toggle UI and adjust label/translation-related code
• #11752 — Updates both RoutesCommon.tsx and SharedTradeInputHeader.tsx to rename trade labels and adjust route/translation configurations

Suggested reviewers

• premiumjibles
• gomesalexandre

Poem

🐰 Through ramp and earn the trader hops,
The paths now light from bottom tops,
With common tongue and routes aligned,
Navigation's true—no more unkind!
All tabs now glow in harmony bright! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing the trade bottom nav active state across all sub-tabs (Swap, Limit, Buy, Sell, Earn).
Linked Issues check	✅ Passed	Changes fully address issue #11964: relatedPaths extended to include /ramp/trade and /earn [#11964], and mobile header title updated from transactionRow.swap to common.trade [#11964].
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the bottom nav active state and page title consistency as specified in issue #11964; no unrelated modifications present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/ss-5536-trade-nav-active-state

---

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

[0xApotheosis]

Does precisely as promised!