feat: add search bar to home page with navigation to pulse#478
feat: add search bar to home page with navigation to pulse#478
Conversation
WalkthroughAdds a Pulse Search entry in the pillarx-app that navigates to Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant PillarX as pillarx-app
participant Router as Router
participant AppWrapper as Pulse AppWrapper
participant Search as Pulse Search
User->>PillarX: Click "Pulse Search" button
PillarX->>Router: navigate("/pulse?searching=true")
Router->>AppWrapper: Mount /pulse with ?searching=true
AppWrapper->>AppWrapper: read searching -> setSearching(true), cameFromPillarXHome = true
AppWrapper->>Search: render with handleSetSearching callback
Search->>Search: open search UI
User->>Search: Close search
Search->>AppWrapper: call handleSetSearching(false)
AppWrapper->>AppWrapper: sees cameFromPillarXHome == true
AppWrapper->>Router: navigate("/")
AppWrapper->>AppWrapper: setSearching(false), cameFromPillarXHome = false
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (4)
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 pillarx-debug with
|
| Latest commit: |
aa7a1ad
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://bb62a752.pillarx-debug.pages.dev |
| Branch Preview URL: | https://feature-home-search-navigati.pillarx-debug.pages.dev |
Deploying x with
|
| Latest commit: |
aa7a1ad
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://f2a8a359.x-e62.pages.dev |
| Branch Preview URL: | https://feature-home-search-navigati.x-e62.pages.dev |
src/apps/pillarx-app/index.tsx
Outdated
| className="w-[6px] h-[6px] opacity-60" | ||
| /> | ||
| </div> | ||
| <span className="font-['Poppins'] font-normal text-[13px] leading-[13px] tracking-[-0.02em] text-white opacity-50 ml-[10px] select-none"> |
There was a problem hiding this comment.
no need the font-['Poppins'], it automatically picks up that font - bit not a showstopper of course
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/apps/the-exchange/components/CardsSwap/test/__snapshots__/CardSwap.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (3)
src/apps/pillarx-app/index.tsx(6 hunks)src/apps/pulse/components/App/AppWrapper.tsx(4 hunks)src/apps/pulse/components/Search/Search.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 2025-03-28T09:22:22.712Z
Learnt from: RanaBug
Repo: pillarwallet/x PR: 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/App/AppWrapper.tsx
📚 Learning: 2025-08-20T09:14:16.888Z
Learnt from: RanaBug
Repo: pillarwallet/x PR: 374
File: src/apps/pillarx-app/index.tsx:12-12
Timestamp: 2025-08-20T09:14:16.888Z
Learning: In this codebase, Transaction Kit providers are set up at the container level (src/containers/Authorized.tsx), not at individual app component levels. App components like src/apps/pillarx-app/index.tsx are children that consume the context through the provider tree.
Applied to files:
src/apps/pulse/components/App/AppWrapper.tsx
📚 Learning: 2025-11-04T14:34:00.373Z
Learnt from: RanaBug
Repo: pillarwallet/x PR: 445
File: src/containers/Authorized.tsx:63-77
Timestamp: 2025-11-04T14:34:00.373Z
Learning: In src/containers/Authorized.tsx, the tempKit useEffect intentionally excludes chainId from its dependency array because the kit is used by useWalletModeVerification to check wallet mode across all supported chains, regardless of the currently selected chainId. The chainId parameter is only used for initial kit configuration and does not affect the multi-chain verification results.
Applied to files:
src/apps/pulse/components/App/AppWrapper.tsx
📚 Learning: 2025-10-15T10:31:06.760Z
Learnt from: IAmKio
Repo: pillarwallet/x PR: 432
File: src/containers/Main.tsx:135-141
Timestamp: 2025-10-15T10:31:06.760Z
Learning: In src/containers/Main.tsx, the React Native webview messaging setup intentionally only activates when the `devicePlatform` URL parameter is present ('ios' or 'android'). On reloads or direct navigation without URL params, the site should behave normally and not attempt to re-establish RN messaging. This is by design to ensure the site functions properly in both RN webview and standard browser contexts.
Applied to files:
src/apps/pillarx-app/index.tsx
🧬 Code graph analysis (1)
src/apps/pillarx-app/index.tsx (1)
src/pages/Landing.jsx (1)
navigate(51-51)
⏰ 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). (4)
- GitHub Check: unit-tests
- GitHub Check: lint
- GitHub Check: build
- GitHub Check: Cloudflare Pages: pillarx-debug
🔇 Additional comments (4)
src/apps/pillarx-app/index.tsx (3)
13-13: Pulse search navigation wiring looks consistentImporting
useNavigate, creatingnavigate, and usinghandleSearchClickto go to/pulse?searching=truelines up with the newsearching-param behavior inAppWrapperandSearch. No issues from a routing or state perspective.Also applies to: 44-44, 64-64, 343-346
365-381: Home search bar button implementation looks goodThe search bar is correctly implemented as a
<button>with a visible “Search” label and reasonable hit area and styling. Semantics and accessibility are fine for this use case; nothing blocking here.
434-438: Header spacing adjustment is safeReducing
margin-bottomonHeaderContainerfor desktop and mobile is purely presentational and doesn’t affect behavior or layout structure elsewhere. Looks fine.src/apps/pulse/components/Search/Search.tsx (1)
234-250:handleClosecorrectly defers navigation whensearching=true, but verify behavior across entrypointsConditionally skipping
removeQueryParams()when thesearchingquery param is'true'matches the intent to letAppWrapperdecide how to navigate back (e.g., to PillarX home) for/pulse?searching=trueentries, while preserving the old behavior for other URLs.Please double‑check the following flows to confirm they behave as expected:
- From PillarX home (
/pulse?searching=true):
- Close via back button / ESC / outside click → search closes and you end up back on the PillarX home page.
- Existing deep links (e.g.
?asset=...,?relayBuy=...):
- Close search → stays within Pulse and query params are cleaned up as before.
If any of these diverge from the desired UX, this is the place to refine the
searchingParamcondition.
github-actions
bot
temporarily deployed
to
Preview (feature/home-search-navigation)
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/apps/pillarx-app/index.tsx (1)
428-432: Double‑check reduced header bottom margin against the action bar layoutThe reduced
margin-bottom(20px / 16px on mobile) tightens the header spacing and likely better matches the search bar design, but there was a previous issue where larger spacing helped avoid clashes with the action bar. Please re‑verify on smaller viewports and with the action bar visible that there’s no overlap or visual regression.
🧹 Nitpick comments (1)
src/apps/pillarx-app/index.tsx (1)
44-45: Tweak search icon semantics for better screen‑reader behaviorThe search button structure looks good and matches the described UX, but since the button already has visible text “Search”, consider making the icon decorative to avoid duplicate announcements by screen readers:
- <img src={searchIcon} alt="search" className="w-[14px] h-[14px] opacity-60" /> + <img + src={searchIcon} + alt="" + aria-hidden="true" + className="w-[14px] h-[14px] opacity-60" + />This keeps the visual design while improving a11y.
Also applies to: 365-375
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/apps/pillarx-app/index.tsx(6 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: aldin4u
Repo: pillarwallet/x PR: 478
File: src/apps/pulse/components/App/AppWrapper.tsx:22-23
Timestamp: 2025-12-11T12:40:02.519Z
Learning: In the Pulse app's AppWrapper component (src/apps/pulse/components/App/AppWrapper.tsx), when users enter via `/pulse?searching=true` from PillarX home and select a token or market, they should continue into Pulse to complete their transaction, not navigate back to home. Only when closing the search without making a selection should they return to PillarX home.
📚 Learning: 2025-12-11T12:40:02.519Z
Learnt from: aldin4u
Repo: pillarwallet/x PR: 478
File: src/apps/pulse/components/App/AppWrapper.tsx:22-23
Timestamp: 2025-12-11T12:40:02.519Z
Learning: In the Pulse app's AppWrapper component (src/apps/pulse/components/App/AppWrapper.tsx), when users enter via `/pulse?searching=true` from PillarX home and select a token or market, they should continue into Pulse to complete their transaction, not navigate back to home. Only when closing the search without making a selection should they return to PillarX home.
Applied to files:
src/apps/pillarx-app/index.tsx
📚 Learning: 2025-10-15T10:31:06.760Z
Learnt from: IAmKio
Repo: pillarwallet/x PR: 432
File: src/containers/Main.tsx:135-141
Timestamp: 2025-10-15T10:31:06.760Z
Learning: In src/containers/Main.tsx, the React Native webview messaging setup intentionally only activates when the `devicePlatform` URL parameter is present ('ios' or 'android'). On reloads or direct navigation without URL params, the site should behave normally and not attempt to re-establish RN messaging. This is by design to ensure the site functions properly in both RN webview and standard browser contexts.
Applied to files:
src/apps/pillarx-app/index.tsx
🧬 Code graph analysis (1)
src/apps/pillarx-app/index.tsx (1)
src/pages/Landing.jsx (1)
navigate(51-51)
⏰ 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 (1)
src/apps/pillarx-app/index.tsx (1)
13-13: Pulse search navigation wiring matches the intended/pulse?searching=trueflowUsing
useNavigateplushandleSearchClickto route to/pulse?searching=trueis consistent with the Pulse AppWrapper behavior for opening search from PillarX home, and keeps the routing logic local and simple. Please just re‑verify both flows (selecting a token/market vs closing search without selection) still behave as expected end‑to‑end with this new entry point. Based on learnings, this matches the intended Pulse entry behavior.Also applies to: 64-65, 343-346
github-actions
bot
temporarily deployed
to
Preview (feature/home-search-navigation)
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/apps/pillarx-app/index.tsx (1)
376-376: Font declaration not necessary.As noted in previous review comments, the
font-['Poppins']declaration is unnecessary as the font is automatically picked up. While not a blocker, it can be safely removed for cleaner code.
🧹 Nitpick comments (1)
src/apps/pillarx-app/index.tsx (1)
366-379: Consider adding an aria-label for improved accessibility.While the button has visible text content, adding an
aria-label="Search tokens and markets"would provide clearer context for screen reader users about what the search functionality does.Apply this diff:
<button type="button" onClick={handleSearchClick} + aria-label="Search tokens and markets" className="flex items-center w-full max-w-[645px] h-8 mx-auto mb-5 mobile:mb-4 bg-[rgba(30,29,36,0.3)] border-2 border-[#1e1d24] shadow-[inset_0px_2px_0px_2px_#121116] rounded-[10px] px-[10px] cursor-pointer" >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/apps/pillarx-app/index.tsx(6 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: aldin4u
Repo: pillarwallet/x PR: 478
File: src/apps/pulse/components/App/AppWrapper.tsx:22-23
Timestamp: 2025-12-11T12:40:02.519Z
Learning: In the Pulse app's AppWrapper component (src/apps/pulse/components/App/AppWrapper.tsx), when users enter via `/pulse?searching=true` from PillarX home and select a token or market, they should continue into Pulse to complete their transaction, not navigate back to home. Only when closing the search without making a selection should they return to PillarX home.
📚 Learning: 2025-12-11T12:40:02.519Z
Learnt from: aldin4u
Repo: pillarwallet/x PR: 478
File: src/apps/pulse/components/App/AppWrapper.tsx:22-23
Timestamp: 2025-12-11T12:40:02.519Z
Learning: In the Pulse app's AppWrapper component (src/apps/pulse/components/App/AppWrapper.tsx), when users enter via `/pulse?searching=true` from PillarX home and select a token or market, they should continue into Pulse to complete their transaction, not navigate back to home. Only when closing the search without making a selection should they return to PillarX home.
Applied to files:
src/apps/pillarx-app/index.tsx
📚 Learning: 2025-10-15T10:31:06.760Z
Learnt from: IAmKio
Repo: pillarwallet/x PR: 432
File: src/containers/Main.tsx:135-141
Timestamp: 2025-10-15T10:31:06.760Z
Learning: In src/containers/Main.tsx, the React Native webview messaging setup intentionally only activates when the `devicePlatform` URL parameter is present ('ios' or 'android'). On reloads or direct navigation without URL params, the site should behave normally and not attempt to re-establish RN messaging. This is by design to ensure the site functions properly in both RN webview and standard browser contexts.
Applied to files:
src/apps/pillarx-app/index.tsx
🧬 Code graph analysis (1)
src/apps/pillarx-app/index.tsx (1)
src/pages/Landing.jsx (1)
navigate(51-51)
⏰ 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). (4)
- GitHub Check: unit-tests
- GitHub Check: lint
- GitHub Check: build
- GitHub Check: Cloudflare Pages: pillarx-debug
🔇 Additional comments (2)
src/apps/pillarx-app/index.tsx (2)
343-346: Navigation logic is correct.The handler correctly navigates to
/pulse?searching=true, which triggers the Pulse app's search interface as designed. Based on learnings, the Pulse AppWrapper will read this query parameter to auto-open the search view.
432-435: Margin adjustments align with design requirements.The reduced margins were previously discussed and are intentional to accommodate the new search bar layout per design specifications.
github-actions
bot
temporarily deployed
to
Preview (feature/home-search-navigation)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx (1)
144-151: Add test coverage for wallet deployment scenarios in SwapReceiveCard.The mock provides optimistic defaults (wallet deployed, zero cost) but the test suite doesn't verify how SwapReceiveCard handles different deployment conditions. Since SwapReceiveCard adjusts token balance based on deployment cost for native tokens, consider adding tests for:
- Wallet not deployed (
isWalletDeployedreturnsfalse)- Non-zero deployment costs
- Deployment cost or gas price retrieval failures
Additionally, the mock is missing
clearWalletDeployedLocalStorageStatusfrom the hook's exported interface—though this function currently isn't used, maintaining parity with the actual hook API would improve maintainability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: aldin4u
Repo: pillarwallet/x PR: 478
File: src/apps/pulse/components/App/AppWrapper.tsx:22-23
Timestamp: 2025-12-11T12:40:02.519Z
Learning: In the Pulse app's AppWrapper component (src/apps/pulse/components/App/AppWrapper.tsx), when users enter via `/pulse?searching=true` from PillarX home and select a token or market, they should continue into Pulse to complete their transaction, not navigate back to home. Only when closing the search without making a selection should they return to PillarX home.
⏰ 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). (4)
- GitHub Check: lint
- GitHub Check: unit-tests
- GitHub Check: build
- GitHub Check: Cloudflare Pages: pillarx-debug
github-actions
bot
temporarily deployed
to
Preview (feature/home-search-navigation)
github-actions
bot
temporarily deployed
to
Preview (feature/home-search-navigation)
2 participants
Description
How Has This Been Tested?
Branch: feature/home-search-navigation
Changes: Search bar on home page, Pulse navigation, Tailwind refactor, bug fixes.
Verification: Tests passed, linting clean.
Screenshots (if appropriate):
Types of changes
Summary by CodeRabbit
New Features
Behavior
Style
Tests
✏️ Tip: You can customize this high-level summary in your review settings.