Fix Search to clear the token address from token-atlas#410
Conversation
WalkthroughUpdates Buy and Search components to adjust token selection flow: adds navigation-based query cleanup after selecting a token and restricts reading the asset URL parameter to buy mode. Minor eslint dependency comment added. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant Search as Search (isBuy)
participant Atlas as Token Atlas
participant Buy as Buy
participant Nav as Router
rect rgba(220,245,255,0.5)
Note over Search,Atlas: Token selection via URL or search (Buy mode)
U->>Search: Open Buy with ?asset=...
Search-->>Atlas: Resolve token (if isBuy)
Atlas-->>Buy: Token selected
end
rect rgba(230,255,230,0.5)
Note over Buy,Nav: Post-selection URL cleanup (new)
Buy->>Nav: navigate(currentPath, { replace, search: "" })
Nav-->>U: URL without query params
end
rect rgba(255,240,220,0.5)
Note over Search: Sell mode behavior (unchanged + guard)
U->>Search: Open Sell with ?asset=...
Search-->>Search: Ignore asset when !isBuy
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate 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. Comment |
Deploying x with
|
| Latest commit: |
9bccc4e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://193111e3.x-e62.pages.dev |
| Branch Preview URL: | https://fix-pro-3690-change-token-at.x-e62.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/apps/pulse/components/Search/Search.tsx (1)
145-145: Consider using the shared removeQueryParams helper.The
removeQueryParamsfunction defined in the Buy component (lines 84-86) could be extracted to a shared utility to avoid duplication, since both components perform identical URL cleanup operations.Apply this refactor to share the utility:
+// Create a shared utility file: src/apps/pulse/utils/navigation.ts +import { useLocation, useNavigate } from 'react-router-dom'; + +export const useRemoveQueryParams = () => { + const navigate = useNavigate(); + const location = useLocation(); + + return () => { + navigate(location.pathname, { replace: true }); + }; +};Then update both components to use the shared utility:
- const removeQueryParams = () => { - navigate(location.pathname, { replace: true }); - }; + const removeQueryParams = useRemoveQueryParams();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/apps/pulse/components/Buy/Buy.tsx(3 hunks)src/apps/pulse/components/Search/Search.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: RanaBug
PR: pillarwallet/x#275
File: src/apps/the-exchange/components/DropdownTokensList/DropdownTokenList.tsx:180-195
Timestamp: 2025-03-28T09:22:22.712Z
Learning: In the Exchange app, `swapTokenList` and `receiveTokenList` are derived from `searchTokenResult` when search is active, so including `searchToken` in the useEffect dependency array that uses these lists would be redundant as the lists will update when search results change.
📚 Learning: 2025-03-28T09:22:22.712Z
Learnt from: RanaBug
PR: pillarwallet/x#275
File: src/apps/the-exchange/components/DropdownTokensList/DropdownTokenList.tsx:180-195
Timestamp: 2025-03-28T09:22:22.712Z
Learning: In the Exchange app, `swapTokenList` and `receiveTokenList` are derived from `searchTokenResult` when search is active, so including `searchToken` in the useEffect dependency array that uses these lists would be redundant as the lists will update when search results change.
Applied to files:
src/apps/pulse/components/Buy/Buy.tsxsrc/apps/pulse/components/Search/Search.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: unit-tests
- GitHub Check: lint
- GitHub Check: build
🔇 Additional comments (5)
src/apps/pulse/components/Search/Search.tsx (1)
124-128: LGTM! Clean guard implementation for buy mode token address reading.The
replace: trueoption prevents the URL from being added to the browser history, which is appropriate for cleaning up URL parameters. The guard ensures the asset parameter is only read when in buy mode, aligning with the PR objective to prevent token addresses from appearing in sell searches.src/apps/pulse/components/Buy/Buy.tsx (4)
14-14: LGTM! Added useNavigate for URL cleanup functionality.The import aligns with the PR objective to clear query parameters after token selection.
77-77: LGTM! Clean URL parameter cleanup implementation.The
navigatehook andremoveQueryParamshelper provide a clean way to remove URL parameters by navigating to the current path without search parameters. Usingreplace: trueprevents adding a new history entry, which is appropriate for cleanup operations.Also applies to: 84-86
394-396: LGTM! Proper cleanup after token-atlas auto-selection.Calling
removeQueryParams()after successfully selecting a token from the token-atlas flow ensures the URL is cleaned up, preventing the asset parameter from interfering with subsequent searches.
399-399: ESLint disable is appropriate for the cleanup dependency.The eslint-disable comment is justified because the
removeQueryParamsfunction call in the useEffect is intentionally excluded from dependencies to avoid unnecessary re-renders when the cleanup function changes.
2 participants
Description
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Summary by CodeRabbit
New Features
Bug Fixes