[ECO Bounty] DePINscan Launch ETA Sorting Inaccuracy and Mobile UI Misalignment

Description

In the DePINscan "Token Launch" view, the sorting functionality for the Launch ETA column does not accurately order projects from oldest to newest (or vice versa). The logic appears to fail when comparing different date formats (e.g., "Q4 2024" vs. "Aug 28, 2024"). Additionally, the mobile interface suffers from alignment issues where column headers do not line up with their respective data.

Severity

Medium — It hinders the user's ability to track upcoming project launches chronologically, which is the primary purpose of this specific view.

Impact

• User Confusion: Users cannot reliably see which projects are launching next because "Q4 2024" is placed above "Aug 28, 2024," and "2025 Q3" follows "Aug 28, 2024" in an inconsistent manner.

• Data Reliability: The lack of a uniform date format (Quarterly vs. Monthly vs. Specific Date) makes the sorting algorithm behave unpredictably.

• Poor Mobile UX: The "Launch ETA" header is shifted too far to the right, causing a visual disconnect from the dates listed below it.

Reproduce

1. Open the ioPay app and navigate to the Discover tab.

2. Select the DePINscan dApp.

3. Switch the project view to "Token Launch."

4. Click the "Launch ETA" column header to sort.

5. Observe that "Q4 2024" is listed above "Aug 28, 2024," and "Q1 2025" is listed before "2025 Q3."

6. Observe the horizontal alignment of the "Launch ETA" text relative to the dates in the list.

Expectation

• Sorting: The list should follow a strict chronological timeline. Specific dates (Aug 2024) should be grouped correctly with their respective quarters (Q3 2024) and years.

• UI Design: The "Launch ETA" header should be centered or right-aligned directly above the date values to ensure readability on small screens.

• Formatting: Dates should ideally follow a standardized format (e.g., all YYYY-MM-DD or all Quarter Year) to assist the sorting engine.

Actual

• Sorting: The order is mixed (e.g., a 2026 date is second on the list while 2024 dates appear above and below it).

• UI Design: The header "Launch ETA" is nearly touching the edge of the screen, while the dates are indented further left.

Suggest Fix

• Standardize Data Input: Convert all "ETA" strings into standard timestamps in the backend so the sorting algorithm treats "Q4 2024" as 2024-10-01.

• CSS Flexbox/Grid: Adjust the table header container on mobile to use justify-content: space-between or assign fixed percentage widths to columns to ensure the header always sits directly above the data.

• Date Normalization: Display dates in a consistent format across all projects to prevent the "alphabetical vs. numerical" sorting conflict currently visible.

Wallet Address: io1tkw393kejmxwnd454twc6020sxcyvh5dxqmren

Device & Environment:

-Operating system: Android 13

-Device model: Redmi Note 10 Pro