Des 78 search bar development

[abbylow]

No description provided.

[linear]

SCR-297 [Search Bar] Development

Development Sub-Tasks:

1. Frontend Development:

1. Setup Search Bar UI: Create the search bar UI component using the finalized designs.
2. Implement Real-time Filtering: If client-side filtering is chosen, implement real-time filtering as users type.
3. Handle Various States: Implement different states of the search bar (e.g., empty, typing, results, no results).
   1. When typing the wallet should filter the list in real time
   2. User can search by token name and symbol
4. Integration with Backend: If server-side searching is necessary, integrate the frontend with the backend API to fetch filtered token lists.
5. Optimize Performance: Ensure that the search feature is smooth and responsive, especially if dealing with a large list of tokens.
6. Accessibility Implementation: Make sure the search bar is accessible, including features like keyboard navigation and screen reader compatibility.
7. "Recent" Feature - is not part of this task, and should be integrated separately

States:

• Empty:

  image.png

• Typing: show all tokens that match the inputed words. Example: Typing "USD" should show you "USDT" "USDC"

• No Results:

  image.png

Design:

https://www.figma.com/file/qSigVM7zUBAfqhqHCXOOpX/Mantle-Core-Style-Guide?type=design&node-id=9507-30944&mode=design&t=GuEYaKxR4acSa6Jr-4

Populated, FAQ open - Mantle-Core-Style-Guide (Figma)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
mantle-bridge	✅ Ready (Inspect)	Visit Preview	Aug 24, 2023 4:06am

4 Ignored Deployments

Name	Status	Preview	Updated (UTC)
ethcc	⬜️ Ignored (Inspect)		Aug 24, 2023 4:06am
mantle-converter	⬜️ Ignored (Inspect)		Aug 24, 2023 4:06am
mantle-faucet	⬜️ Ignored (Inspect)		Aug 24, 2023 4:06am
mantle-token-graph	⬜️ Ignored (Inspect)		Aug 24, 2023 4:06am

[grezle]

LGTM! 🚀