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

aldin4u · 2025-12-23T09:57:25Z

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

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

coderabbitai · 2025-12-23T09:57:35Z

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

cloudflare-workers-and-pages · 2025-12-23T09:58:24Z

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 · 2025-12-23T10:00:27Z

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

aldin4u requested a review from vignesha22 December 23, 2025 09:57

IAmKio requested changes Jan 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

aldin4u commented Dec 23, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Dec 23, 2025 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages bot commented Dec 23, 2025

Uh oh!

cloudflare-workers-and-pages bot commented Dec 23, 2025

Uh oh!

IAmKio left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

aldin4u commented Dec 23, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Dec 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

cloudflare-workers-and-pages bot commented Dec 23, 2025

Deploying pillarx-debug with Cloudflare Pages

Uh oh!

cloudflare-workers-and-pages bot commented Dec 23, 2025

Deploying x with Cloudflare Pages

Uh oh!

IAmKio left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

aldin4u commented Dec 23, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 23, 2025 •

edited

Loading