[Txns-List] Implementing New Filter Design on Transaction Pages

[SamantaCasal]

Description: We are introducing an advanced set of filtering options to both the general transaction list and the list for specific addresses on our platform. This enhancement is designed to empower users with more precise control over the transaction data they wish to view, thereby improving the efficiency and relevance of their search queries. The new filters include:

1. AppIDs Filtering: Users will now have the capability to filter transactions based on one or more application IDs. This feature is particularly useful for users interested in monitoring transactions associated with specific applications, enabling them to quickly isolate relevant data from the broader transaction pool.
2. Chain-Based Filtering: We are implementing a filter to allow users to narrow down transactions where the specified chain acts as either the source or the target of the transaction. This addition is aimed at users who wish to analyze cross-chain activities or focus on transactions originating from or targeting a specific blockchain.

Acceptance Criteria

1. Design Consistency: The newly designed filters for appIDs filtering, chain-based filtering, and payload type filtering must be consistently applied across both the general transaction page and the transaction list for a specific address.
2. Functionality Integration: The filters must be fully functional, allowing users to select and apply filters as intended. This includes the ability to select multiple appIDs, choose transactions based on the source or target chain, and filter by payload type with real-time updating of the transaction list based on selected criteria.
3. User Interface (UI) Responsiveness: The filter UI must be responsive and render correctly across all device types and screen sizes, ensuring a seamless user experience on desktops, tablets, and smartphones.

RESOUCES

FIGMA: https://www.figma.com/file/8qmNZk2VvL1ZCIBqNklKjT/WormholeScan-Design?type=design&node-id=265-7284&mode=design&t=fvmJp4p0WS9UgVRa-0

[SamantaCasal]

• [ ] Case 1: Protocol Unknown filter does not work. -> Note: [Backend-improvement] It has to return transactions for which we do not know the source app. That is when the appId is empty. Solution from the front.

• [ ] Case 2: Protocol Unknow+ Exclusive filter takes longer Note: [Backend improvement]Will be reviewed in the backend for a better response time

• [x] Case 3: Exclusive:

• It should only be enabled for cases where it applies: Mayan Portal Bridge NTT Standard Relayer Note: [Frontend] When you select a protocol that has more than one protocol, you must enable selecting only or several.

• [x] Case 4: WH Gateway:

• As target -> We should specify that it includes Injective, Osmosis, Kujira, and Evmos.

• Is there a way from the front to separate these chains? Note: Backend improvement to separate chains. Create a ticket for the next sprint

Questions:

• How are the Protocols and Chains lists updated? -> Note: Currently they are updated manually, and the chains can be automated, the protocols would not be ideal since on the front some names are not the same.

• Is there a way to disable the page numbers when the result returns less than or = 50 transactions?

• Is it a backend limitation to select only one chain at a time, both for source and target? -> Backend improvement to select multiple chains

[SamantaCasal]

FYI: @giulianoconti view in Safari

[SamantaCasal]

Tooltip Texts: FYI: @giulianoconti

1. Displays all transactions, including additional protocols. Ex: Portal Bridge, Mayan
2. Displays only Portal Bridge transactions. Ex: Portal Bridge