Integrate interactive price charts across all strategy flows.

[Costa769]

Overview

In order to allow users to adjust strategy parameters through chart interaction, we aim to extend the interactive chart functionality currently present on simulator pages to encompass the create, edit, deposit, and withdraw processes for all strategy types as well as on the trade page. These interactive charts will replace TradingView charts, maintaining consistency across the platform.

Implementation logic

• Replace tradingView chart with the proprietary interactive charts on every page/flow they are used
• Important: To allow flexibility for our licensees, we plan to support both chart types, enabling each licensee to choose between integrating the new interactive charts or continuing to use TradingView ones. Meaning we should use some feature flag or other way so that our licensees can choose which chart version to display. Note that certain sections, such as the price range chart on the set prices page of the overlapping strategy, are displayed or hidden depending on the chart we choose to use on the page. For more information, refer to the overlapping strategy section.
• Different strategies and trade pages require different handling that is described below.

Charts display & interactivity rules

Strategies: Limits, Ranges, and Recurring:

Create and edit strategy flow for these type of strategies include the tradingView price chart, which we would like to replace and display under the following rules

On set prices/edit prices pages

• IF we have both a market price for the base token and price history
  -- Show the interactive chart
  -- The chart should allow drag and drop functionality similar to the one available on the simulate page
• ELSE,
  -- Collapse the interactive price chart upon page load.
  --- Interactive chart without price history expended mockup

Populating price fields on set prices page

We want to ensure that users understand how to interact with the interactive chart as soon as the set prices page loads, therefore:

• During the strategy creation process, upon loading the set prices page, the price fields for limit, range and recurring strategies should be automatically filled using the default price input rules identical to those applied for recurring strategies on the simulation page.

Expected behavior (example)
-- Create limit strategy flow
-- Reach the "set prices" page
-- Buy Low price field should be pre-populated with a value 
(calculate in the same way as we do in the simulate page, pre-populated value = market price *99%)

Once a value is available, the interactive chart will display it as well and allow the drag and drop functionality already available on the simulate page

On depots&withdraw pages

• IF we have both a market price for the base token and price history
  -- Show the interactive chart
  -- Drag and drop functionality should be disabled
  -- The date selection should remain enabled
  -- Show the text below the chart that will indicate to the user that the drag and drop functionality is available on the edit prices page (Mockup TBD)
• ELSE,
  -- Collapse the interactive price chart upon page load.

Strategies: Overlapping

Unlike the simulate where it only supports tokens with price history, on the strategy creation/edit/etc flows, we have different options based on the available data at hand.

On set prices/edit prices pages

• IF we have price history
  -- This means that we can utilize the interactive chart as part of the flow as implemented on the simulate page
  -- Show the interactive chart
  -- Hide the price range section
  -- The chart should allow drag and drop functionality similar to the one available on the simulate page

• ELSE,
  -- Hide the interactive price chart upon page load.
  -- The price range section should remain visible OR display the market price input option as currently implemented

On depots&withdraw pages

• IF we have both a market price for the base token and price history
• Hide the price range section
• The interactive chart behavior is similar to the deposit &withdraw pages on limit/range/recurring strategies described in the above section
• ELSE,
• The behavior is similar to the set prices/edit prices pages with a missing price history described above

Trade page

Since the chart on the trade page lacks price points and spreads, users can only modify the date range of the interactive chart. Regarding the display rules, the following logic should be applied:

• Switch places between the "Depth" and "Price" tabs so the price tab is on the left

• IF there is a price history for the base token
  -- Show Price tab with interactive chart on page load

• ESLE
  -- Show Depth chart on page load

Strategy activity page

Display an expanded interactive chart for all strategy types, irrespective of whether we possess price history data or not.

• IF there is a price history for the base token
  -- Show the interactive chart
  --- Show the price points from the date the strategy was created on the chart (TBD)
  -- Drag and drop functionality should be disabled
  -- The date selection should remain enabled
  -- Show the text below the chart that will indicate to the user that the drag and drop functionality is available on the edit prices page (Mockup TBD)
• ESLE
  -- Show interactive chart without price history mockup

Mobile implementation

Interactive charts will be introduced on mobile as well. However, due to the challenge of interacting with price points on mobile devices, the following logic will be applied:

For all pages the interactive chart is displayed on:

• The interactive charts will show the same data we show on web (price points, spread, etc)
• Direct editing of prices will not be allowed on the interactive chart.
• A notification explaining that the interactive chart is available only on web will always displayed below the interactive chart. mockup
  -- If there are other notifications displayed below the price chart (such as on deposit or withdraw pages), they should be hidden, and only this notification should be shown.

Open issues

1. On activity page, should we indicate on the interactive chart when the strategy was created
2. How to handle edit market price option on the interactive chart