fix auto-select case sensitivity and fix display token data response

[RanaBug]

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

• New Features
  • Enhanced token lookup by enabling case-insensitive comparisons, ensuring more accurate token selection.
  • Improved token search behavior by dynamically adjusting the matching approach based on input length for more precise results.

[coderabbitai]

Walkthrough

The pull request updates the token comparison and search logic. In two component files, the strict equality checks for contract addresses have been replaced by case-insensitive comparisons using toLocaleLowerCase(). In addition, the token search function in the tokens data service now uses a conditional approach: for long search inputs (over 40 characters), an exact match is performed using a Fuse instance on combined data, whereas for shorter inputs, a fuzzy search is carried out on native tokens with a modified threshold. No changes were made to exported or public entities.

Changes

File(s)	Change Summary
src/apps/the-exchange/.../DropdownTokenList.tsx src/apps/token-atlas/.../TokensSearchResult.tsx	Replaced strict equality (===) with a case-insensitive comparison for the token contract property by using toLocaleLowerCase() within conditional checks.
src/services/tokensData.ts	Modified the convertAPIResponseToTokens function to use a conditional search mechanism: using an exact match via a Fuse instance for inputs longer than 40 characters, and a fuzzy search with a threshold of 0.3 for shorter inputs.

Sequence Diagram(s)

sequenceDiagram
    participant C as Component
    participant E as useEffect Hook
    participant R as Token Result
    C->>E: Detect update in searchTokenResult
    E->>R: Retrieve contract (converted to lowercase)
    alt Contract equals searchToken (lowercase)
      E-->>C: Auto-select token if only one result exists
    else
      E-->>C: No auto-selection
    end

Loading

sequenceDiagram
    participant U as User
    participant TS as convertAPIResponseToTokens
    participant F as Fuse
    U->>TS: Provide searchInput
    alt searchInput length > 40
      TS->>F: Search using [nativeTokens + tokenData] with exact match (=)
    else searchInput length ≤ 40
      TS->>F: Search nativeTokens with fuzzy threshold 0.3
    end
    F-->>TS: Return search results
    TS-->>U: Output filtered token list

Loading

Possibly related PRs

• fix/PRO-3156/exchange-gnosis-issues #269: Modifies the contract comparison logic using case-insensitive checks, similar to the changes here.
• fix token asset name #251: Updates token contract equality checks to be case-insensitive, aligning with this PR’s modifications.
• feat/PRO-3166/search-contract-address #275: Involves adjustments to contract comparison in token search results for case-insensitivity, directly related to these changes.

Suggested reviewers

• IAmKio

Poem

I'm a rabbit in the code parade,
Hopping through changes that are finely made.
Lowercase checks make contract woes recede,
With fuzzy searches, precision is achieved indeed.
In every line, my whiskers twitch with glee—
Hop along, for a codebase bug-free!
🐇🌟

---

📜 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 2c9665b and 066675e.

⛔ Files ignored due to path filters (2)

• 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

📒 Files selected for processing (3)

• src/apps/the-exchange/components/DropdownTokensList/DropdownTokenList.tsx (1 hunks)
• src/apps/token-atlas/components/TokensSearchResult/TokensSearchResult.tsx (1 hunks)
• src/services/tokensData.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

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

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.

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

• GitHub Check: build
• GitHub Check: Cloudflare Pages

🔇 Additional comments (5)

src/apps/token-atlas/components/TokensSearchResult/TokensSearchResult.tsx (1)

73-74: Good fix for case-insensitive token matching!

Converting both the contract address and search token to lowercase ensures consistent matching regardless of case, which is appropriate for Ethereum addresses that might be represented in different cases but refer to the same address.

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

139-140: Good fix for case-insensitive token matching!

Converting both the contract address and search token to lowercase ensures consistent matching regardless of case, which resolves the auto-select case sensitivity issue mentioned in the PR objectives.

---

147-148: Consistent implementation of case-insensitive matching.

This implements the same case-insensitive matching for the receive token selection, maintaining consistency with the swap token implementation above.

src/services/tokensData.ts (2)

355-373: Enhanced search strategy for contract addresses.

The specialized handling for long inputs (>40 characters) is a good approach:

1. It correctly assumes these are likely contract addresses
2. It searches across both native tokens and token data
3. It uses exact matching with the = operator for precise results

This change complements the UI components' case-insensitive contract comparison.

---

374-386:

Details

✅ Verification successful

Adjusted search strategy for token names and symbols.

For shorter search inputs, the implementation now:

1. Only searches native tokens with Fuse.js
2. Increases the fuzzy search threshold from 0.2 to 0.3
3. Combines results with token data

Note: The higher threshold (0.3) makes the search more lenient, which may return more results but potentially less precise matches. Consider monitoring search result quality.

---

🌐 Web query:

What is the recommended threshold value for Fuse.js for token name/symbol searches?

💡 Result:

The recommended threshold value for token name/symbol searches in Fuse.js depends on the desired balance between precision and flexibility:

1. Default threshold:
   The standard threshold of 0.6 works well for general use cases[1][4][10], allowing some typos while maintaining relevance for typical search patterns.

2. Short token optimization:
   For cryptocurrency-style token names/symbols (typically short alphanumeric strings), consider lowering the threshold to 0.2-0.3[5][9]. This makes matching stricter while still allowing minor character differences:

const fuse = new Fuse(tokens, {
  keys: ['name', 'symbol'],
  threshold: 0.2, // Stricter matching for short strings
  ignoreLocation: true // Recommended for token searches
});

3. Key considerations:

   • Threshold 0 requires perfect matches (useful for ID fields)[3]
   • Threshold 0.6 allows ~40% deviation (good for longer text)
   • Threshold 0.2 allows ~80% accuracy (better for 3-6 character tokens)[9]

4. Complementary settings:
   Combine with ignoreLocation: true to search entire strings[1][9], and distance: 10-30 to limit match proximity for short tokens[1][4].

The optimal value depends on your token length distribution, but a threshold between 0.2-0.4 typically works best for cryptocurrency-style token searches based on common implementations[5][8][9]. Test with representative samples of your data while monitoring false positives.

Citations:

• 1: https://www.fusejs.io/api/options.html
• 2: [RFC] Extended searching in v4.0.0-beta krisk/Fuse#356
• 3: Threshold values per field: fuzzy matching for some, exact for others krisk/Fuse#576
• 4: https://www.npmjs.com/package/fuse.js/v/2.5.0
• 5: https://www.youtube.com/watch?v=LQgqexDseV0
• 6: https://docs.redhat.com/en/documentation/red_hat_virtualization/4.1/paged/administration_guide/chap-utilities
• 7: https://www.fusejs.io/examples.html
• 8: https://www.ashryan.io/fuzzy-search-with-fuse-js/
• 9: https://www.fusejs.io/concepts/scoring-theory.html
• 10: https://www.fusejs.io

---

Verified: Fuse.js threshold changes meet recommended guidelines

The updated logic in src/services/tokensData.ts (lines 374-386) now uses a Fuse.js threshold of 0.3, which is well within the recommended range (0.2–0.4) for short cryptocurrency token names/symbols. The approach of restricting the search to native tokens and merging the Fuse results with the existing token data is appropriate. Please continue monitoring the search quality to ensure precision remains acceptable.

✨ 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 resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @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:	066675e
Status:	✅  Deploy successful!
Preview URL:	https://1393c183.x-e62.pages.dev
Branch Preview URL:	https://feat-mobula-search-api.x-e62.pages.dev

View logs

[IAmKio]

LGTM