#781 | Search bar (part 2) - Add Token Search Results Support

[Viterbo]

Fixes #780, #781, #782, #801

Draft: this PR is completely included in the third and final part: #812

Description

This PR includes the first part and adds support for tokens, NFTs, contracts and blocks to the search bar, following the sort criteria given in the issue #781 description.

Test Scenarios

• go to home page

• test the following search queries:

  • bnb
    • 3 results. The known BNB token is on top
  • eth
    • 3 results. The known ETH token is on top
  • usd
    • multiple results
    • The known USDC and USDT are on top, followed by verified tokens, followed by not-verified
    • USDC is on top of USDT because of a higher price
  • swap
    • multiple categories
    • play with tabs to see the auto-scroll
  • nft
    • multiple results
    • see NFTs blocky icon and symbol displayed
    • verified nfts are placed on top

• resize the browser to a low resolution and make any search

  • it should display correctly (adding ellipsis points to large addresses and transactions hashes)

---

Known issues: the auto-scroll tabs work, but if the category is already in sight it does scroll to a random point (that's a bug to fix and still has no issue for it)

[netlify]

✅ Deploy Preview for testnet-teloscan ready!

Name	Link
🔨 Latest commit	5337af0
🔍 Latest deploy log	https://app.netlify.com/sites/testnet-teloscan/deploys/66a170a151283200087b249d
😎 Deploy Preview	https://deploy-preview-800--testnet-teloscan.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for teloscan ready!

Name	Link
🔨 Latest commit	5337af0
🔍 Latest deploy log	https://app.netlify.com/sites/teloscan/deploys/66a170a1d5982f00082951f1
😎 Deploy Preview	https://deploy-preview-800--teloscan.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pmjanus]

Hi @viter_rod,

Regarding the search bar on https://deploy-preview-800--testnet-teloscan.netlify.app/, I'd like to propose improving its keyboard navigation. Currently, users must click on search results even for exact matches. Here are two potential approaches:

1. Pressing Enter navigates to the first result, regardless of match type.

   • This is my preferred option, similar to Etherscan's behavior in some cases.

2. Pressing Enter navigates to the first result only for exact matches.

   • This aligns with Etherscan's functionality in certain scenarios.
   • For multiple results, Etherscan sometimes directs to a search results page. (This happens when you search from the bar when it's on the top right of the page, not on the homepage).

Additional request:

• Implement keyboard navigation through search results (up/down arrow keys) Close it with ESC.

Could you evaluate the complexity of implementing these features? They would significantly enhance user experience and accessibility.