Expose platform activity data on the explore page

[Costa769]

Overview

Currently, much of the platform's activity is hidden from users, leaving them unaware of the significant activity taking place on the app. We aim to change that by exposing additional information to highlight the platform's activity on the explore page. This will include exposing total trade count, showcasing popular and unique token pairs traded on the platform, and highlighting successful strategies that users can duplicate.

Designs

Explore page total activity data

API

https://api.carbondefi.xyz/v1/ethereum/analytics/trending

Implementation

We want to add the following data to the top section of the explore page:

1. Total trades count
2. Popular pairs and their total trade count
3. Trending strategies and their total trade count

Please note that the data above should be displayed only on the SEI and CELO networks. The Explore page on other networks should remain unaffected.

• Use the API endpoint to retrieve all the above data except for strategy type
  -- Strategy type will be calculated on the FE
• We will use a unique logic and different frontend update intervals for displaying the different data points, which will be detailed in the sections below.
• Explore page should keep the existing functionality unchanged.

Total Trades

The total trades is the number of trades executed across all strategies since the platform's launch. The total trades value will be displayed using a running up animation that only increases.

Here's the logic for retrieving and displaying the total trade value:

On Trade Page Load:

• Display the total trades value using an animation that starts from 0 and increases to the 95% of the last fetched value over 5 seconds, and slowly accumulating the remaining 5% for 25 seconds to fill up the 30 seconds interval
• Retrieve a new total trades value every 30 seconds
• IF the new value= the previously fetched value, do not apply any animation
  -- The total trades value will remain unchanged for the next 30 seconds.
• ELSE IF the new total trades value != previously fetched value, calculate the difference (delta) and update the total trades value to the new value using a 30-second animation.

Numbers update animation example
Animation example

Popular pairs

Display three popular token pairs with the total trade count for each pair using the following logic:

• Every 24 hours, retrieve the list of token pairs along with the total trades and number of trades in the last 24 hours from all strategies for each pair.
• Select the 10 pairs with the highest number of total trades which have traded at least once in the last 24 hours.
• Randomly choose 3 token pairs from the selected list.
• Display these 3 token pairs in descending order by trade count.
• No specific page load animation is required for displaying or updating the token pair list.
• Clicking on any token pair will automatically initiate a search for that pair.

Trending strategies

We want to showcase the most active strategies that users can view and copy. Each row in the trending strategies list will display:

• Strategy ID+token pair
• Strategy type
• Strategie's total number of trades

The logic for retrieving and displaying these popular strategies will be similar to the logic used for popular token pairs, with the following differences:

• The strategy type parameter will be calculated on the front end.
• Each row is clickable and will redirect the user to the selected strategy's activity page.

Trade and Create Strategy CTAs

”Trade” - On clikc will open a trade page with spot trade option pre-selected
”Create Strategy”- On clikc will open a trade page with limit/range strategy pre-selected

Mobile

On mobile devices:

• Display only the total trades and both CTAs at the top of the page, above the search field.
• Hide the popular pairs and trending strategies sections.