[Interactive Chart] - Trade Page

[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.

Support for both chart types should be configured individually for each chain as well. For example, interactive charts may be implemented for the Ethereum chain, while other chains could continue using TradingView charts.

For further details on managing interactive charts across different pages and strategies, please refer to the section below.

Strategies: Limit/Range and Recurring:

The above strategies on the trade page 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:

Strategy creation

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 trade page with limit/range and recurring strategies loads, therefore:

• Upon loading the trade page with one of the above strategies, 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)
-- Go to trade page
-- Select Limit/Range strategy option
-- 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

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

Strategy creation

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 interactive 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
  -- Show interactive chart without price history which 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

Editing existing market price

The edit market price button on both strategy creation 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.

Strategies: Spot

Since the chart when the spot strategy is selected on 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:

• IF there is a price history
  -- Show history tab with interactive chart on page load

• ESLE
  -- Show history chart without the price history

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.