Issue 6 | Search box v1

[armandocodecr]

Implement Search Box v1: Block, Transaction, and Address Search

Description

This Pull Request implements the Search Box v1 feature, allowing users to search by block number, transaction hash, or address within the application. The functionality is integrated into the navbar's search input and provides a dropdown with categorized results. Below is a detailed breakdown of the changes made:

Changes

1. Create useSearch Custom Hook:

   • File: hooks/useSearch.ts
   • Description:
     • Implemented a custom hook useSearch to handle search logic for blocks, transactions, and addresses.
     • Added debounce functionality to optimize API calls and prevent multiple requests while the user types.
     • Functions handleBlockSearch, handleTransactionSearch, and handleAddressSearch handle specific searches and update results based on the input.
     • updateSearchResult updates the search results state by category.
     • Managed state for searchResult, selectedCategory, and showResult.

2. Integrate useSearch into Search Component:

   • File: components/Search.tsx
   • Description:
     • Replaced local state management in the Search component with the useSearch hook.
     • Used onQueryChanged from the hook to handle input changes and update search results.
     • Integrated SearchResultDropDown to display results in a categorized dropdown menu.
     • The Search component now effectively manages the input for search queries and displays results dynamically.

3. Implement SearchResultDropDown Component:

   • File: components/search-result-dropdown.tsx
   • Description:
     • Created SearchResultDropDown to display search results below the input field.
     • Added logic to close the dropdown when clicking outside.
     • Ensured that the dropdown correctly shows and hides based on showResult state from useSearch.

4. Add CategoryListDropdown and CategoryValuesList Components:

   • Files: components/category-list-dropdown.tsx, components/category-values-list.tsx
   • Description:
     • CategoryListDropdown:
     • Displays a list of categories (Blocks, Transactions, Addresses) in the dropdown.
     • Allows users to select a category and view corresponding search results.
     • CategoryValuesList:
     • Shows the actual search results under the selected category.
     • Includes links that navigate to detailed pages for blocks, transactions, or addresses.
     • Utilizes truncateText to format and shorten long strings in the results.

5. Add Basic Pages for /block/:number and /address/:address:

   • Files: pages/block/[number].tsx, pages/address/[address].tsx
   • Description:
     • Created new pages that display block numbers and addresses passed as URL parameters.
     • Each page simply renders the parameter in an <h1> element for now, serving as placeholders for future detailed views.

6. Add truncateText Utility Function:

   • File: utils/truncateText.ts
   • Description:
     • Added a utility function truncateText to shorten long strings for display.
     • This function is used in CategoryValuesList to show abbreviated versions of block numbers, transaction hashes, and addresses while preserving their beginning and ending characters.

7. Add SearchInputResult Interface:

   • File: interfaces/index.ts
   • Description:
     • Created SearchInputResult interface to define the structure of search result objects.
     • This interface helps in type-checking and managing the search results state consistently across components.

8. Add Styles for Dropdown and Scrollbar:

   • File: styles/global.css (or relevant CSS file)
   • Description:
     • Added .card class to style the dropdown with a blurred background and rounded corners.
     • Styled the scrollbar with .custom-scroll classes to match the application's theme, including a customized thumb color.

Detailed Code Explanations

• Debounce Implementation in useSearch:

  • The debounce mechanism is implemented using useRef and setTimeout. This ensures that the API call to fetch search results is delayed by 500ms after the user stops typing. It helps to reduce the number of API requests, enhancing performance and user experience.
  • Example:

    debounceRef.current = setTimeout(async () => {
    // Fetch data based on user input
    }, 500);

• Dynamic Search Handling:

  • Functions handleBlockSearch, handleTransactionSearch, and handleAddressSearch encapsulate the logic for fetching data from the blockchain based on the type of input. Each function validates the input type and fetches corresponding data using the l2PublicClient methods.
  • Example:

    const handleBlockSearch = async (results: SearchInputResult[], searchValue: string) => {
    if (!isNumeric(searchValue)) return results;
    const blockNumber = BigInt(parseInt(searchValue, 10));
    const blockData = await l2PublicClient.getBlock({ blockNumber });
    if (blockData) {
    setSelectedCategory("Blocks");
    return updateSearchResult(results, "Blocks", searchValue);
    }
    return results;
    };

• Dropdown and Scrollbar Styling:

  • Added classes for the dropdown (.card) to ensure a consistent look with a blurred background effect.
  • Customized the scrollbar (.custom-scroll) for better integration with the overall theme of the application, ensuring it remains visually appealing and user-friendly.

Testing

• Manual Testing:
  • Tested the search functionality with various inputs for blocks, transaction hashes, and addresses.
  • Verified the dropdown displays correct results and navigates to appropriate pages.
  • Checked the debounce mechanism by typing rapidly and observing the reduction in API calls.
  • Ensured the newly created pages correctly display the parameters passed in the URL.

Video Demo

Watch the video demo to see how the search box works:

Linked Issues

• Closes #6

[armandocodecr]

I just realized that I created a utils folder to export the file named "truncateText.ts" when you already have a "utils" file in the "lib" folder. An apology for the oversight.

If you wish I can make the change to export the "truncateText" function from the "utils" file in the "lib" folder, and then create a commit and include it in the pull request changes.

[armandocodecr]

@saimeunt It is a pleasure to have contributed to this issue. I remain at your disposal to collaborate again for a v2 of the search box. 🤝