UI: Search improvements

[mazurroman]

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributor guidelines

TODO

• When someone enters text in the search bar, query is being made. The UI should force the user to wait until the query returns. When the user, for example, clicks enter while the query is in progress, nothing should happen
• Once the query returns, the user sees available options in the dropdown. We only use titles to differentiate between different sections (i.e. addresses vs contracts). We don't need tabs so let's remove them (see screenshot, tabs are in green)
• On homepage, we want a big search similar style to https://optimistic.etherscan.io/ ; on subpages we can keep search in the header, similar to what we have today. The homepage search should also have a header based on the RPC network connection. In our case, it is OP Mainnet Explorer, so same style as here: https://optimistic.etherscan.io/

[melnikga]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I can take this

I've worked with a lot of Walnut projects and I'm ready to tackle this issue.
In the OP scan project, I was developing token transfers in tx details page (#13 )

How I plan on tackling this issue

My profile on OnlyDust: https://app.onlydust.com/u/melnikga

[martinvibes]

hi @mazurroman let me hop on this issue

[PoulavBhowmick03]

I would love to work on this!

How I Plan to Tackle This Issue

Understand Current Implementation:

Review existing search functionality and UI components.
Identify workflow and areas for improvement.

Implement Query Lock:
Add a loading state to the search input to prevent multiple submissions.
Use a debounce function to optimize API calls.

Update UI for Search Results:
Simplify dropdown by removing unnecessary tabs.
Use titles to differentiate sections without tabs.

Design Homepage Search
Implement a prominent search bar on the homepage, similar to Optimistic Etherscan.
Integrate consistent search functionality across subpages in the header.
Execution Plan:

Use a debouncing library or custom function.
Update CSS to reflect design changes.
Test to ensure expected behavior.

I would love to work on this if assigned

[ShantelPeters]

I am applying for this issue via https://app.onlydust.com/p/opscan

Hello, I've read the contributors guidelines and I'm excited to help with this task. I understand the requirements:

1. Implement a debouncing mechanism to prevent multiple queries when the user types in the search bar.
2. Disable the search bar while a query is in progress to prevent multiple submissions.
3. Remove tabs and use titles to differentiate between sections (e.g., addresses vs contracts).
4. Redesign the homepage search bar to match the style of Optimistic Etherscan, including a header based on the RPC network connection (OP Mainnet Explorer).
5. Keep the search bar in the header on subpages, similar to the current design.

To achieve this, I would:

1. Use a debouncing library or implement a custom debouncing function to delay queries.
2. Add a loading state to the search bar to prevent multiple submissions while a query is in progress.
3. Update the CSS to remove tabs and use titles to differentiate between sections.
4. Redesign the homepage search bar to match the Optimistic Etherscan style, including the header.
5. Test the changes to ensure the search bar behaves as expected.

Please assign me this task, and I'll deliver the updated code to achieve the desired functionality and design.

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend developer with a strong focus on creating responsive and user-friendly interfaces. My experience includes working extensively with html, css, javascript, Tailwind css, Sass, React, TypeScript, and various UI libraries. I have a keen eye for design and usability, ensuring that users have a seamless experience while interacting with web applications. My recent projects involved improving navigation designs and resolving complex UI issues, which demonstrates my ability to handle intricate frontend tasks efficiently.

How I plan on tackling this issue

Understand the Current Implementation:

Review the existing search functionality to understand its workflow and identify areas where improvements are needed.
Analyze the UI components and how they interact with the backend when a search query is initiated.
Implement Query Lock:

Ensure the search input is disabled or shows a loading state when a query is in progress. This will prevent users from submitting multiple queries simultaneously and improve performance.
Use a debounce function to minimize the number of API calls and optimize the search performance.
Update UI for Search Results:

Simplify the dropdown by removing unnecessary tabs, ensuring a clean and focused display of search results.
Differentiate between sections using titles without tabs, enhancing the user experience by making the interface more intuitive.
Design Homepage Search:

Implement a large, prominent search bar on the homepage, similar to Optimistic Etherscan. This will provide users with a familiar and visually appealing search experience.

Keep the search functionality consistent across subpages, integrating it into the header while maintaining the current design. This will ensure users have a cohesive experience throughout the site.

[ooochoche]

@mazurroman I've read through the guidelines and if it is yet to be assigned I can work on it

[petersdt]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

am peter with intermediate skills in js, typescript and react frame work

How I plan on tackling this issue

using the provided instructions above

1. Make the UI Wait for the Query to Return
2. Remove Tabs from the Dropdown
3. Implement a Big Search Bar on the Homepage
4. Maintain Header Search on Subpages

[estherbreath]

@mazurroman I would like to work on this issue.
I would improve on the Search Query Handling, Search Results Display, Homepage Search Enhancement, and the RPC Network Connection Indicator.

[armandocodecr]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As a Full-Stack Developer with a year of experience, I am well-prepared to contribute effectively to your project. My technical and soft skills have enabled me to successfully complete contributions to Walnut's repositories, demonstrating my ability to deliver high-quality solutions that meet project standards.

I am adept at problem-solving and take pride in creating applications that reduce workloads across various departments. My ability to adapt and learn quickly enables me to tackle new challenges effectively and independently, making me highly capable of addressing complex issues and implementing efficient solutions.

I am also a member of "Dojo coding," a community where many developers contribute to various projects. This community provides substantial support and knowledge-sharing, enhancing my ability to contribute effectively.

Effective communication is one of my strengths. I ensure that my explanations and descriptions are detailed and user-friendly, which has been appreciated by the maintainers I've worked with. My tech stack aligns perfectly with the project's requirements, ensuring a smooth integration and development process.

Overall, my skills, experience, and community support make me well-equipped to contribute to your project by resolving issues efficiently and delivering high-quality, impactful solutions.

How I plan on tackling this issue

Request for Issue Assignment: Search Bar Query Handling

Hi Walnut team,

I am excited about the opportunity to work on this issue. I have previously contributed to Walnut's repositories and have a deep understanding of the codebase. This particular issue is related to a PR that I submitted, which gives me a unique advantage in addressing and resolving it efficiently.

Technical Plan

Objective

To ensure that the search bar query handling is user-friendly by making the UI force the user to wait until the query returns. Additionally, the homepage search bar should have a similar style to the one on Optimistic Etherscan and include a header based on the RPC network connection.

Step-by-Step Implementation

Prevent User Actions During Query

Disable Input During Query:

• Modify the search bar component to disable further input or actions (e.g., pressing Enter) while a query is in progress.
• Use a loading indicator to inform the user that the query is being processed.

Handle Input:

• Ensure that any additional input attempts during the query are ignored until the query returns.

Dropdown Display

Show Available Options:

• Once the query returns, display the available options in a dropdown menu.
• Use only titles to differentiate between different sections (e.g., addresses vs. contracts) and remove tabs as specified.

Homepage Search Bar

Style and Layout:

• Implement a large search bar on the homepage similar in style to Optimistic Etherscan.
• Ensure that the homepage search bar includes a header based on the RPC network connection (e.g., "OP Mainnet Explorer").

Consistent Header Search:

• Maintain the current search bar style in the header for subpages to ensure consistency across the site.

Code Modifications

Frontend Components:

• Edit the search bar component to implement the new behavior and styles.
• Update the homepage and subpage layouts to incorporate the new search bar styles and header.

State Management:

• Adjust state management to handle the loading state during queries and prevent additional inputs.

Validation and Testing

User Experience Testing:

• Conduct thorough testing to ensure that the user experience is seamless and that the search bar behaves as expected.

Visual Validation:

• Verify that the homepage search bar and header match the required styles and that the dropdown displays correctly without tabs.

Conclusion

Given my previous contributions to Walnut's repositories and my familiarity with the codebase, I am confident in my ability to resolve this issue effectively. My understanding of the related PR will allow me to work more efficiently and deliver a high-quality solution.

Thank you for considering my request. I look forward to contributing further to Walnut's repositories.

Best regards!

[juandiegocv27]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Juan Diego Carballo, with a robust background in TypeScript and blockchain technology. My experience includes optimizing user interfaces for better interaction and integration with blockchain functionalities. I have actively participated in events like StarkHack and a hackerhouse in Brussels, enhancing my capability to tackle real-world tech challenges. My projects can be viewed on my GitHub Profile and OnlyDust Profile. Plus I´m active member of Dojo Coding community 🇨🇷. This is my first contribution to Walnut’s Repositories.

How I plan on tackling this issue

-Approach to Solve the Issue:

1. Search Query Management:

   • Implement a mechanism to disable the search button and ignore further keystrokes when a query is in progress, ensuring users cannot trigger multiple searches simultaneously. This prevents unnecessary server load and potential UI lag.

2. UI Simplification:

   • Remove tabs in the search dropdown that distinguish between addresses and contracts. Instead, use clear, simple headers within the dropdown to differentiate sections, streamlining the interface and improving user navigation.

3. Homepage Search Enhancement:

   • On the homepage, introduce a larger, more prominent search bar similar to the one on Optimistic Etherscan. This will provide a more engaging user experience right from the start.
   • Style the homepage search bar to reflect the current RPC network connection, specifically labeling it as 'OP Mainnet Explorer' to provide clarity and maintain stylistic consistency across the platform.

This targeted approach ensures an efficient search functionality that enhances user experience while maintaining simplicity and performance integrity on the OP Scan platform.

Already run the project in local, and the database too:

[Ugo-X]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer with expertise in Next.js, Nest.js, TypeScript, JavaScript, React, Node.js, Three.js, and Solidity. My journey with OnlyDust hackathons began at Edition 1, and I've since made 29 contributions across 9 projects, including op-scan in the latest OD-hack. With my extensive experience on the OnlyDust platform (profile: https://app.onlydust.com/u/Ugo-X), I've honed my skills in delivering quality solutions under pressure.

I bring a unique blend of technical proficiency and user-focused design to every project, whether it's crafting immersive 3D experiences or developing smart contracts. My track record shows I can adapt quickly and contribute effectively to diverse challenges.

As we surf through Edition 6, I'm excited to leverage my skills and hackathon experience to push the boundaries of blockchain development. I'm confident in my ability to tackle new challenges and drive innovation in this space.

How I plan on tackling this issue

How i would handle the issue:

1. Search query handling:
   I will implement a loading state for the search functionality. I will modify the search input handler to prevent user interactions while a query is in progress. I will disable the search input and button during the search process to ensure users can't initiate multiple searches simultaneously.

2. Dropdown UI update:
   I will redesign the dropdown component to show only titles for different sections. I will remove the tabs from the dropdown, simplifying the UI. I will ensure that the dropdown clearly differentiates between categories like addresses and contracts without using separate tabs.

3. Homepage search implementation:
   I will create a new component for the homepage search, mimicking the style of Optimistic Etherscan. I will design a large, centered search bar with appropriate placeholder text. I will add a header above the search bar displaying "OP Mainnet Explorer" to match the specified style.

4. Subpage header update:
   I will maintain the existing header search for subpages but ensure consistency across all pages. I will review the current header design and make any necessary adjustments to keep it uniform throughout the site.

5. Routing logic implementation:
   I will use React Router to handle different pages and determine which search component to display. I will set up routes for the homepage and subpages, ensuring the correct search component is rendered based on the current URL.

6. Styling components:
   I will create CSS styles to match the Optimistic Etherscan design. I will focus on the homepage search layout, including the centered design and prominent header. I will also style the subpage header search to maintain consistency with the overall design.

7. Testing and refinement:
   I will thoroughly test the new search functionality across different pages and scenarios. I will pay special attention to the search behavior during active queries, the appearance and functionality of the dropdown results, and the consistency of the header search on subpages. I will make adjustments as necessary based on these tests.

8. Performance optimization:
   I will implement debouncing for the search input to prevent excessive API calls. This will ensure a smooth user experience by limiting the frequency of search requests as the user types.

9. Error handling and user feedback:
   I will implement proper error handling mechanisms and user feedback systems. I will display clear error messages when searches fail and provide visual feedback during the search process.

10. Documentation and code comments:
    I will add comprehensive documentation and code comments to explain the implementation details. This will make it easier for other developers to understand and maintain the code in the future.

Throughout this process, I will ensure that the search functionality works seamlessly, the UI is user-friendly and visually appealing, and the overall user experience matches the quality and style of Optimistic Etherscan.

[onlydustapp]

Hi @PoulavBhowmick03!
Maintainers during the ODHack #6.0 will be tracking applications via OnlyDust.
Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[PoulavBhowmick03]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a seasoned fullstack blockchain developer, with over 2 years of experience
I have contributed to many open source repositories and also to OnlyDust

How I plan on tackling this issue

I would love to work on this!

How I Plan to Tackle This Issue
Understand Current Implementation:

Review existing search functionality and UI components.
Identify workflow and areas for improvement.

Implement Query Lock:
Add a loading state to the search input to prevent multiple submissions.
Use a debounce function to optimize API calls.

Update UI for Search Results:
Simplify dropdown by removing unnecessary tabs.
Use titles to differentiate sections without tabs.

Design Homepage Search
Implement a prominent search bar on the homepage, similar to Optimistic Etherscan.
Integrate consistent search functionality across subpages in the header.
Execution Plan:

Use a debouncing library or custom function.
Update CSS to reflect design changes.
Test to ensure expected behavior.

I would love to work on this if assigned
I had previously commented, but did not make it through only dust. hoping to get assigned

[saimeunt]

@juandiegocv27 assigning this to you, please don't hesitate to reach out to me if you encounter any blocking issues with the fixes required in this issue.