Integrate interactive price charts across all strategy flows.

[Costa769]

Overview

With the expansion of token offering of exotic pairs on multiple chains, the existing charting library cannot provide a reliable solution to display price history to the users.
In addition, the current library limitation does not allow the charts to be an integrated and interactive part of the user strategy creation and management flows.

As a result, the goal of this task is to replace the current TradingView implementation with a proprietary charting solution across the entire app.

Designs

All chart pages

Implementation logic

• Replace tradingView chart with the proprietary interactive charts on every page/flow they are used
  -- The interactive chart on each page will use the same date picker as the one on the simulate page.
• Important:
  To allow flexibility for our licensees, we are required to support both chart types, enabling each licensee to choose between integrating the new interactive charts or continuing to use TradingView ones.
  Meaning, the licensee will have the option to choose the current implementation of TradingView or to display the new implementation outlined in this issue. For more information, refer to the overlapping strategy section below.
• Different strategies and pages require different handling that is described below.

Strategies: Limits, Ranges, and Recurring:

The set and edit price pages as well as the deposit and withdraw pages will feature the new interactive chart with drag-and-drop functionality, as seen on the "Simulate" page, following these rules:

Create strategy set prices page

During the process of creating a new strategy

Charts display & interactivity rules

• IF we have price history
  -- Show the interactive chart with the price indicators mockup
  -- 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

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

Edit prices page

During the process of editing prices for an existing strategy

On the edit prices page, the interactive chart will display the current strategy price points, and represent the existing strategy. The drag-and-drop functionality of this interactive chart is the same as described in the "Charts Display & Interactivity Rules" section on the "Set prices" page. mockup

Depots & withdraw pages

During the process of depositing or withdrawing funds to/from an existing strategy

The logic for the interactive chart on the deposit and withdraw pages is similar to that of the set prices page, but it does not include the drag-and-drop functionality.

• IF we have price history
  -- Show the interactive chart with the price points
  -- Drag and drop functionality should be disabled
  -- 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 deposit mockup, withdraw mockup
  --- A warning below the chart will state that the price points are relevant to the current strategy and do not include any previous prices if they have been changed. (Text 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. Additionally, apart from replacing the TradingView chart with the interactive chart, we plan to keep the range chart and move it under the range tab on the interactive chart. Both charts behavior is described below

Create strategy set prices page

During the create strategy process

• IF we have market price and price history
  -- Display price range chart by default on page load mockup
  -- Show the interactive chart with the price points mockup
  -- The chart should allow drag and drop functionality similar to the one available on the simulate page

• ELSE, IF we have no market price and no price history
  -- Prompt the user to set a market price on page load (Setting the market price uses the same logic as currently implemented)
  -- Display price range chart by default on page load mockup
  -- The interactive chart will initially display a "No data available" notification and remain unchanged in case the user updates the market price.
  mockup

• ELSE, IF we have market price but no price history
  -- Display price range chart by default on page load
  -- The interactive chart maintain the same behavior as described in the section above

• ELSE, IF we have no market price but have price history
  -- Same logic as in section with no market price and no history but the interactive chart will display the price indicators and the new market price that was set by the user.mockup

Edit prices page

During the process of editing prices for an existing strategy

Similar to the edit prices on limits, ranges, and recurring strategy pages, the interactive chart will display only the current strategy price points, excluding any previously modified price points. The both charts functionality is the same as described in the "Create strategy set prices page" above. mockup

Editing existing market price

The edit market price button on both set and edit prices pages of the overlapping strategies has been relocated to the interactive chart section. The process for editing existing market prices will remain largely unchanged. The edit price form will still be used but will now be displayed in the center of the page. mockup
After the market price update, the following logic will be applied:

• IF there is a price history:
  -- The user remains on the same range chart or interactive chart tab they were on when they clicked the edit market price button.
  -- The market price is updated on both range and interactive charts.Interactive chart post update mockup

• ELSE:
  -- Market price is updated on the range chart, and the focus shifts to the range chart tab.
  -- The market price is not updated on the interactive chart, and the interactive chart retains its no-price-history design.

Depots & withdraw pages

During the process of depositing or withdrawing funds to/from an existing strategy

• IF we have both a market price and price history
  -- Display Range chart tab by default
  --- Drag and drop functionality on the range chart should be disabled
  --- Show the text below the range chart that will indicate to the user that the drag and drop functionality is available on the edit prices page(same text that is displayed under the interactive chart)
  -- The interactive chart behavior is similar to the deposit &withdraw pages on limit/range/recurring strategies described in the above section deposit mockup, withdraw mockup

• ELSE, IF we have market price but no price history
  -- Range chart behavior is similar to the section above
  -- The interactive chart will display a "No data available" notification

• ELSE, IF we have no market price but do have a price history
  -- Display interactive chart tab by default
  -- Interactive chart behavior is similar to the section where we have both a market price and price history
  -- Range chart without market price design(similar to the following mockup but with no "Please provide a price" text in the notification

• ELSE, IF** we have no market price and no price history
  -- Collapse the range and interactive price charts upon page load.

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 mockup

• IF there is a price history
  -- 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
  -- Show the interactive chart
  --- Hide the strategy price indicators on the chart mockup
  -- The date selection should be enabled
• ESLE
  -- Show interactive chart without price history mockup

Displaying history activity on the interactive chart

To ensure the activity table aligns with the interactive chart, we plan to add action indicators on the chart that correspond to the actions listed in the activity table (including both user actions and strategy trades).

Logic:

• All actions in the activity table will be displayed on the chart by default.
• Users can toggle the action indicators on the chart on or off. mockup toggle off, mockup toggle on
• Actions on the chart will be shown according to their timestamps.
  -- Indicators for user actions such as create, edit, deposit, withdraw, pause, and delete will be located on the timeline axis, ----- Buy and Sell actions will be displayed directly on the chart, with the indicator positioned according to the trade's average price.
  -- In case there is no price history data, all the action indicators will be located on the timeline axis mockup
  -- Note that user actions and strategy trade actions have different icons
• When hovering over an action icon on the chart, a tooltip will appear with details of the action
  -- The tooltip will show the action name and action description of the corresponding action in the activity table
  -- If there are multiple actions on the same date ticker on the chart, show all actions and their descriptions within the same tooltip.

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, market price, etc) Overlapping mockup 1, Overlapping mockup 2, Limit mockup
• Direct editing of prices will not be allowed on the interactive chart.
• On pages with range charts and pages where interactive charts display price points, a notification will be displayed below the chart, explaining that the drag and drop feature is available only on web.
  -- If there are other notifications displayed below the chart (such as on deposit or withdraw pages), they should be hidden, and only the notification above should be shown.