#783 | Search bar (Final) - NFTs / bug fixes / keys navigation

[Viterbo]

Fixes #783, #807, #803

This branch is missing some features. I'm working on preparing it.

Description

This PR includes the previous part and adds the ERC info for the NFTs results and key navigation support. It also fixes some bugs described in the issue https://github.com/telosnetwork/teloscan/issues/803

Test scenarios

• go to this home page
• write the word: swap
  • see 3 categories
  • use the keys to navigate through the results (up and down arrows)
  • as you navigate using keys, notice:
    • the container auto scrolls to show the selected result
    • if you happen to change the category, the tab will also change the selection
    • if you press enter, you will navigate to the corresponding selected entry page. If there is no chosen entry, it will navigate to the first result.
    • If you start scrolling (using the mouse) the selection will be lost and the tabs will be selected according to the upper section being seen instead of the selected result (because there's no one).
    • if you press ESC if will close the autocomplete and clear the input.

[netlify[bot]]

✅ Deploy Preview for testnet-teloscan ready!

Name	Link
🔨 Latest commit	e1193dda0f9983c5f58912b2ae3ea19bd9e25ee2
🔍 Latest deploy log	https://app.netlify.com/sites/testnet-teloscan/deploys/66b24d22cf91ad0008a2e6d1
😎 Deploy Preview	https://deploy-preview-812--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[bot]]

✅ Deploy Preview for teloscan-stage ready!

Name	Link
🔨 Latest commit	e1193dda0f9983c5f58912b2ae3ea19bd9e25ee2
🔍 Latest deploy log	https://app.netlify.com/sites/teloscan-stage/deploys/66b24d2248163200080978ee
😎 Deploy Preview	https://deploy-preview-812--teloscan-stage.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[bot]]

✅ Deploy Preview for dev-mainnet-teloscan ready!

Name	Link
🔨 Latest commit	e1193dda0f9983c5f58912b2ae3ea19bd9e25ee2
🔍 Latest deploy log	https://app.netlify.com/sites/dev-mainnet-teloscan/deploys/66b24d229319320008b16c52
😎 Deploy Preview	https://deploy-preview-812--dev-mainnet-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.