fix(pulse): token selector responsiveness and daily price change data

[aldin4u]

• Refactored token selector in Buy and Sell components to use a flexible flexbox layout, resolving text overlap and width issues.
• Fixed dailyPriceChange data mapping in Search.tsx to correctly handle both 'price_change_24h' and 'priceChange24h' properties.
• Updated Buy.tsx to include price change data when pre-selecting tokens from URL.

Description

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Fixed 24-hour price change display to accurately reflect real market values when available.

• UI/UX Improvements

  • Refactored token selector layout for enhanced responsiveness and visual clarity.
  • Improved visual hierarchy and presentation of token price information and change indicators.
  • Enhanced overall styling consistency across buy and sell interfaces.

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

[coderabbitai]

Walkthrough

This PR refactors the Pulse token selector components' UI layouts and data sourcing. It converts fixed absolute-positioned layouts to flexible flex-based designs in Buy and Sell components, updates token price change data sourcing to derive from price_change_24h or priceChange24h fields, and applies corresponding styling adjustments across all three modified components.

Changes

Cohort / File(s)	Summary
Token Selector UI Refactoring src/apps/pulse/components/Buy/Buy.tsx, src/apps/pulse/components/Sell/Sell.tsx	Converted token selector blocks from absolute positioning to flexible flex layouts. Updated logo containers, restructured price/change indicators, and adjusted responsive behavior. Sell component includes substantial layout restructuring with new Text Container for token information rows.
Daily Price Change Data Sourcing src/apps/pulse/components/Buy/Buy.tsx, src/apps/pulse/components/Search/Search.tsx, src/apps/pulse/components/Sell/Sell.tsx	Updated dailyPriceChange field derivation to use price_change_24h or priceChange24h with fallback to 0. Changed default from hardcoded 0 to foundToken.price_change_24h in Buy component for rendering real 24-hour changes when available.
Minor Styling & Formatting src/apps/pulse/components/Search/Search.tsx	Applied UI className formatting edits and minor style adjustments for consistency; no behavioral impact.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Feature/pulse token selector fix #482: Directly related—modifies the same token-selector UI refactoring in Buy and Sell components alongside Search dailyPriceChange sourcing updates.
• Fixes/Relay_Buy #460: Related—modifies Buy and Search components with overlapping token data handling and price source logic changes.
• Fixes after QA review on feat/PRO-3638/sell-feature-pulse #395: Related—modifies the same Pulse components (Search, Sell, Buy) with token price/change and token-selector UI alterations.

Suggested reviewers

• IAmKio
• RanaBug

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers key changes in the PR but lacks critical testing details and does not mark any change-type checkboxes as required by the template.	Add detailed testing information (environment, test cases, and results) and mark appropriate change-type checkbox(es) to complete the required template sections.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main changes: fixing token selector responsiveness and daily price change data handling, which aligns with the refactoring work across Buy, Sell, and Search components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/pulse-token-selector-fix

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c5487f1 and 9237fb4.

📒 Files selected for processing (3)

• src/apps/pulse/components/Buy/Buy.tsx
• src/apps/pulse/components/Search/Search.tsx
• src/apps/pulse/components/Sell/Sell.tsx

🧰 Additional context used

🧠 Learnings (7)

📓 Common learnings

Learnt from: RanaBug
Repo: pillarwallet/x PR: 391
File: src/apps/pulse/components/Sell/Sell.tsx:113-130
Timestamp: 2025-09-09T12:40:15.629Z
Learning: In the Pulse app Sell component, when a user changes/switches tokens, the input amount automatically resets to 0, which means liquidity validation state doesn't become stale when tokens change.

Learnt from: aldin4u
Repo: pillarwallet/x PR: 478
File: src/apps/pulse/components/App/AppWrapper.tsx:22-23
Timestamp: 2025-12-11T12:40:09.964Z
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.

Learnt from: aldin4u
Repo: pillarwallet/x PR: 461
File: src/apps/pulse/components/Search/MarketList.tsx:10-15
Timestamp: 2025-11-21T13:10:33.422Z
Learning: In the Pulse app's MarketList component (src/apps/pulse/components/Search/MarketList.tsx), markets should display liquidity (not price) in the right-hand column. This is per the design specification.

Learnt from: IAmKio
Repo: pillarwallet/x PR: 351
File: src/apps/pulse/utils/intent.ts:44-53
Timestamp: 2025-08-12T07:42:24.656Z
Learning: In the Pulse app's intent utilities (src/apps/pulse/utils/intent.ts), the team has chosen to use floating-point arithmetic for token amount calculations despite potential precision issues, accepting JavaScript's decimal place limitations as a valid trade-off for their use case.

📚 Learning: 2025-09-09T12:40:15.629Z

Learnt from: RanaBug
Repo: pillarwallet/x PR: 391
File: src/apps/pulse/components/Sell/Sell.tsx:113-130
Timestamp: 2025-09-09T12:40:15.629Z
Learning: In the Pulse app Sell component, when a user changes/switches tokens, the input amount automatically resets to 0, which means liquidity validation state doesn't become stale when tokens change.

Applied to files:

• src/apps/pulse/components/Sell/Sell.tsx
• src/apps/pulse/components/Search/Search.tsx
• src/apps/pulse/components/Buy/Buy.tsx

📚 Learning: 2025-11-21T13:10:33.422Z

Learnt from: aldin4u
Repo: pillarwallet/x PR: 461
File: src/apps/pulse/components/Search/MarketList.tsx:10-15
Timestamp: 2025-11-21T13:10:33.422Z
Learning: In the Pulse app's MarketList component (src/apps/pulse/components/Search/MarketList.tsx), markets should display liquidity (not price) in the right-hand column. This is per the design specification.

Applied to files:

• src/apps/pulse/components/Sell/Sell.tsx
• src/apps/pulse/components/Search/Search.tsx
• src/apps/pulse/components/Buy/Buy.tsx

📚 Learning: 2025-12-11T12:40:09.964Z

Learnt from: aldin4u
Repo: pillarwallet/x PR: 478
File: src/apps/pulse/components/App/AppWrapper.tsx:22-23
Timestamp: 2025-12-11T12:40:09.964Z
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/pulse/components/Sell/Sell.tsx
• src/apps/pulse/components/Buy/Buy.tsx

📚 Learning: 2025-08-12T07:42:24.656Z

Learnt from: IAmKio
Repo: pillarwallet/x PR: 351
File: src/apps/pulse/utils/intent.ts:44-53
Timestamp: 2025-08-12T07:42:24.656Z
Learning: In the Pulse app's intent utilities (src/apps/pulse/utils/intent.ts), the team has chosen to use floating-point arithmetic for token amount calculations despite potential precision issues, accepting JavaScript's decimal place limitations as a valid trade-off for their use case.

Applied to files:

• src/apps/pulse/components/Buy/Buy.tsx

📚 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/Buy/Buy.tsx

📚 Learning: 2025-04-23T15:04:20.826Z

Learnt from: RanaBug
Repo: pillarwallet/x PR: 290
File: src/apps/pillarx-app/components/TileTitle/TitleTitle.tsx:6-10
Timestamp: 2025-04-23T15:04:20.826Z
Learning: In this repository, TileTitleProps and TileTitle are different types that serve different purposes. TileTitleProps is used for the TileTitle component and has optional fields (title?, leftDecorator?, rightDecorator?), while TileTitle in api.ts has a required text field. The TileTitleProps interface aligns with the TokensMarketData.title type in api.ts which also has optional fields.

Applied to files:

• src/apps/pulse/components/Buy/Buy.tsx

🧬 Code graph analysis (2)

src/apps/pulse/components/Sell/Sell.tsx (1)

src/utils/number.tsx (1)

• formatExponentialSmallNumber (119-149)

src/apps/pulse/components/Buy/Buy.tsx (1)

src/apps/pulse/utils/blockchain.ts (1)

• isNativeToken (17-18)

⏰ 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/pulse/components/Buy/Buy.tsx (2)

601-601: LGTM! Price change data now included for pre-selected tokens.

This correctly adds the dailyPriceChange field when tokens are pre-selected from the URL, addressing the PR objective. The use of price_change_24h with a fallback to 0 is consistent with the buy flow in Search.tsx (line 469).

---

645-720: Excellent UI refactor for token selector responsiveness.

The token selector has been successfully refactored from fixed absolute positioning to a flexible flexbox layout. Key improvements include:

• Better text truncation with min-w-0, flex-1, and truncate classes
• Cleaner stacked layout for symbol/name and price/change rows
• Conditional triangle indicator rendering (only when dailyPriceChange !== 0)
• Improved responsive behavior across different screen sizes

The refactor is well-structured and consistent with the Sell component changes.

src/apps/pulse/components/Sell/Sell.tsx (1)

304-388: LGTM! Token selector refactor consistent with Buy component.

The token selector has been successfully refactored to use a flexible flexbox layout, matching the pattern used in Buy.tsx. The changes include:

• Flexible stacked layout replacing absolute positioning
• Proper text truncation with min-w-0 and truncate classes
• Conditional triangle indicator (only when dailyPriceChange !== 0)
• Price display using formatExponentialSmallNumber(token.usdValue)

The consistency between Buy and Sell components improves maintainability.

src/apps/pulse/components/Search/Search.tsx (1)

469-469: The property access order is correct and intentional—no changes needed here.

The dailyPriceChange fallback logic uses appropriate property access orders for each code path: line 469 (Token branch) tries price_change_24h for PortfolioToken compatibility, while line 484 (Asset branch) tries priceChange24h matching the Asset type definition. Both paths are correct for their respective data sources and won't cause inconsistent display values.

The (item as any) type assertions could be improved by properly typing the items, but this is a minor code quality concern, not a functional issue.

---

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

[cloudflare-workers-and-pages]

Deploying pillarx-debug with    Cloudflare Pages

Latest commit:	9237fb4
Status:	✅  Deploy successful!
Preview URL:	https://e433c87f.pillarx-debug.pages.dev
Branch Preview URL:	https://feature-pulse-token-selector.pillarx-debug.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying x with    Cloudflare Pages

Latest commit:	9237fb4
Status:	✅  Deploy successful!
Preview URL:	https://5fa768b3.x-e62.pages.dev
Branch Preview URL:	https://feature-pulse-token-selector.x-e62.pages.dev

View logs

[IAmKio]

Can we sort out the unit tests / linting issues before we review