[EPIC]: Search Bar Redesign

[pmjanus]

Main Task: Teloscan Search Functionality UI Enhancements

Description

The Teloscan search API has been updated to provide more organized and relevant results for tokens, NFTs, addresses, block numbers, and transaction hashes. We need to implement the corresponding UI changes to display the search results effectively. This task will be broken down into subtasks to be implemented in a specific order.

Main Tasks

1. Search Result Sections

   • Create separate sections in the search results component for:
     • Tokens (ERC-20s)
     • NFTs (ERC721 & ERC1155)
     • Addresses
     • Contracts
   • Add clickable navigation tabs above the search results to allow users to switch between the Token and NFT sections.

2. Result Display

   • For each search result, display the following elements (if available):
     • Icon
     • Contract name
     • Price
     • Contract Address
   • Ensure that the UI layout is responsive and adapts well to different screen sizes.

3. Token Prioritization

   • When displaying token, including NFT, results, prioritize tokens in the following order:
     • Curated tokens from the frontend token list
     • Verified contracts
     • Regular contracts
   • Visually differentiate the token results based on their priority (e.g., using different background colors or labels).

4. Search Input Handling

   • Update the search input field to handle the various search types (address, block number, name, transaction hash).
   • Implement real-time suggestions or autocomplete functionality to assist users while typing their search queries.

5. Loading and Error States

   • Display appropriate loading indicators while the search results are being fetched from the API.
   • Handle and display error messages if the search API encounters any issues or returns error responses.

Subtasks (to be implemented in order)

• #780
• #781
• #782
• #783
• #784

Testing

• Conduct thorough testing of the search UI to ensure it integrates correctly with the updated search API.
• Test various search scenarios, including partial and exact matches for addresses and names.
• Verify that the navigation tabs function correctly and switch between the Token and NFT sections.
• Validate that the result elements (icon, contract name, price, contract address) are displayed accurately based on the API response.

Additional Notes

• The search API endpoints have already been implemented and are ready to be integrated with the frontend UI.
• The frontend token list and contract verification process are assumed to be in place. If not, additional tasks may be required to implement those features.

Known Issues

• There is a bug in how the token list is handled, where the supportedInterfaces property is not set if the token comes from the token list. This bug will be addressed in a future sprint.

Token Type Differentiation

• For contracts, the token type can be differentiated using the supportedInterfaces property, which is a comma-separated list.
  • ERC721 tokens will have supportedInterfaces=erc721,erc721_metadata.
  • ERC20 tokens will have supportedInterfaces=erc20.

Definition of Done

• All subtasks have been completed in the specified order.
• The search UI enhancements are implemented according to the specified requirements.
• The search results are displayed in separate sections for Tokens, NFTs, and Addresses.
• Clickable navigation tabs are added to switch between the Token and NFT sections.
• Search results include the specified elements (icon, contract name, price, contract address) when available.
• Token results are prioritized based on the curated frontend token list, verified contracts, and regular contracts.
• The search input field handles various search types and provides real-time suggestions or autocomplete functionality.
• Loading and error states are properly handled and displayed in the UI.
• Thorough testing has been conducted to ensure the search UI integrates correctly with the updated search API.