Fix token with balance of zero, chain filter reset and correct USD price

[RanaBug]

Description

• Fix for chain filter to reset to all when opening the swap or receive card
• Fix to only show tokens that have a balance above 0 in Swap card
• Fix of the USD price coming from Mobula rather than data utils

How Has This Been Tested?

• Existing Unit Tests and Manual Testing

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

• New Features

  • The token selection list now resets to a default "all" chain when opened for swapping or receiving tokens.

• Bug Fixes

  • Fixed an issue where contracts with zero or negative balances were incorrectly included in token lists.

• Tests

  • Updated and added tests to verify chain state resets and to simplify price assertions by using static token price data instead of external mocks.

[coderabbitai]

Walkthrough

The changes update how chain state and token price data are managed in the exchange-related components and their tests. When opening token lists in the swap UI, the chain state is now explicitly set to a default value. Price fetching logic is refactored to use static price data from tokens instead of asynchronous hooks. Tests are updated to reflect these changes by removing mocks and relying on token-internal price properties. Additionally, the portfolio API response converter now filters out tokens with non-positive balances.

Changes

File(s)	Change Summary
src/apps/the-exchange/components/CardsSwap/CardsSwap.tsx	Added dispatches to set default chain state when opening swap/receive token lists.
src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx src/apps/the-exchange/components/EnterAmount/test/EnterAmount.test.tsx src/apps/the-exchange/components/DropdownTokensList/test/DropdownTokensList.test.tsx	Updated tests to remove price-fetching hooks and mocks, rely on token-internal price and balance properties, and added tests for chain state reset on dropdown close.
src/apps/the-exchange/components/EnterAmount/EnterAmount.tsx	Removed asynchronous price fetching, now uses token's price property directly for USD price dispatch.
src/services/pillarXApiWalletPortfolio.ts	Filters out tokens with zero or negative balances when converting API responses.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CardsSwap
    participant ReduxStore

    User->>CardsSwap: Open Swap/Receive Token List
    CardsSwap->>ReduxStore: Dispatch setSwapChain/setReceiveChain (default: all)
    CardsSwap->>ReduxStore: Dispatch openSwapTokenList/openReceiveTokenList

Loading

sequenceDiagram
    participant EnterAmount
    participant ReduxStore

    EnterAmount->>EnterAmount: Token changes
    alt Token has price
        EnterAmount->>ReduxStore: Dispatch setUsdPrice with token.price
    else Token missing price
        EnterAmount->>console: Log error
        EnterAmount->>ReduxStore: Dispatch setUsdPrice with 0
    end

Loading

Possibly related PRs

• feat/PRO-3036/Mobula-Token-Data #245: Modifies token data handling in CardsSwap.tsx, replacing a hook with direct token data queries and changing the token data structure; related as both PRs adjust token data management in the same component, though with different focuses.

Suggested reviewers

• IAmKio

Poem

In a meadow where tokens hop and play,
Chains reset to "all" at the start of the day.
Prices now bloom from tokens within,
No more async fetches, let the swaps begin!
Balances checked, only the strong survive—
With each test and tweak, our code comes alive.
🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d960f41 and ebdb0c8.

⛔ Files ignored due to path filters (4)

• src/apps/pillarx-app/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snap is excluded by !**/*.snap
• src/apps/pillarx-app/components/PointsTile/test/__snapshots__/PointsTile.test.tsx.snap is excluded by !**/*.snap
• src/apps/the-exchange/components/CardsSwap/test/__snapshots__/CardSwap.test.tsx.snap is excluded by !**/*.snap
• src/apps/the-exchange/components/EnterAmount/test/__snapshots__/EnterAmount.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (6)

• src/apps/the-exchange/components/CardsSwap/CardsSwap.tsx (2 hunks)
• src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx (3 hunks)
• src/apps/the-exchange/components/DropdownTokensList/test/DropdownTokensList.test.tsx (2 hunks)
• src/apps/the-exchange/components/EnterAmount/EnterAmount.tsx (1 hunks)
• src/apps/the-exchange/components/EnterAmount/test/EnterAmount.test.tsx (3 hunks)
• src/services/pillarXApiWalletPortfolio.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (4)

src/apps/the-exchange/components/EnterAmount/EnterAmount.tsx (1)

src/apps/the-exchange/reducer/theExchangeSlice.ts (2)

• setUsdPriceSwapToken (89-91)
• setUsdPriceReceiveToken (92-94)

src/services/pillarXApiWalletPortfolio.ts (1)

src/services/tokensData.ts (1)

• chainIdToChainNameTokensData (213-234)

src/apps/the-exchange/components/CardsSwap/CardsSwap.tsx (1)

src/apps/the-exchange/reducer/theExchangeSlice.ts (3)

• setSwapChain (65-67)
• setIsReceiveOpen (62-64)
• setReceiveChain (68-70)

src/apps/the-exchange/components/DropdownTokensList/test/DropdownTokensList.test.tsx (1)

src/apps/the-exchange/reducer/theExchangeSlice.ts (4)

• setIsSwapOpen (59-61)
• setSwapChain (65-67)
• setIsReceiveOpen (62-64)
• setReceiveChain (68-70)

⏰ Context from checks skipped due to timeout of 90000ms (4)

• GitHub Check: lint
• GitHub Check: unit-tests
• GitHub Check: build
• GitHub Check: Cloudflare Pages

🔇 Additional comments (14)

src/services/pillarXApiWalletPortfolio.ts (1)

19-21: Filter for positive token balances successfully implemented.

The added filter ensures only tokens with positive balances (contract.balance > 0) are included in the returned array, which directly addresses the PR objective to show only tokens with non-zero balances in the Swap card.

src/apps/the-exchange/components/CardsSwap/CardsSwap.tsx (3)

8-10: Added imports for chain state actions.

Properly imported the necessary Redux actions for managing chain state.

---

61-62: Chain filter reset implemented for swap token selection.

Successfully implemented the reset of the swap chain filter to "all" when opening the swap token list, addressing the PR objective to fix chain filter behavior.

---

64-65: Chain filter reset implemented for receive token selection.

Successfully implemented the reset of the receive chain filter to "all" when opening the receive token list, addressing the PR objective to fix chain filter behavior.

src/apps/the-exchange/components/EnterAmount/EnterAmount.tsx (2)

73-82: Simplified price handling for swap token.

Correctly implemented direct access to token price properties for the swap token, replacing the previous asynchronous price fetching mechanism. This change addresses the PR objective to correct the USD price source.

---

90-99: Simplified price handling for receive token.

Correctly implemented direct access to token price properties for the receive token, maintaining consistency with the swap token implementation. The error handling with fallback to zero price is appropriate.

src/apps/the-exchange/components/EnterAmount/test/EnterAmount.test.tsx (3)

40-41: Added token properties for testing.

Added the necessary balance and price properties to mock token asset, which is required for the updated price handling logic.

---

51-52: Added token properties for testing.

Added the necessary balance and price properties to the second mock token asset, maintaining consistency with the first token.

---

126-126: Updated test assertion for token price.

Updated the assertion to check against the token's price from the mock data (0.1) instead of a hardcoded value, correctly reflecting the changes in price handling logic.

src/apps/the-exchange/components/DropdownTokensList/test/DropdownTokensList.test.tsx (2)

223-254: Good addition of test case for swap chain reset behavior.

This test effectively verifies that the swap chain state gets reset to "all" when closing the dropdown. This aligns with the PR objective to fix the chain filter behavior so it resets when opening the swap card.

---

256-287: Good addition of test case for receive chain reset behavior.

This test effectively verifies that the receive chain state gets reset to "all" when closing the dropdown. This parallels the swap chain test and provides complete coverage for the chain filter reset functionality.

src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx (3)

38-40: Price and balance properties added correctly to first mock token.

These additions align with the PR objective to fix token filtering based on balance and update USD price sourcing.

---

49-51: Price and balance properties added correctly to second mock token.

These additions align with the PR objective to fix token filtering based on balance and update USD price sourcing.

---

201-202: Test assertions updated correctly for USD price values.

The test now uses the static price properties from the tokens instead of hardcoded values, which aligns with the PR objective to correct the USD price source.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[cloudflare-workers-and-pages]

Deploying x with    Cloudflare Pages

Latest commit:	5e6e13f
Status:	✅  Deploy successful!
Preview URL:	https://e3fe98c8.x-e62.pages.dev
Branch Preview URL:	https://feat-pro-3162-the-exchange-c.x-e62.pages.dev

View logs

[IAmKio]

LGTM