Trade Page: range and limit orders creation and activity display

[Costa769]

Overview

Our objective is to expand our offerings by allowing users to place limit and range orders on the trade page. Additionally, we aim to enhance the data presented to users by introducing selected pair strategies and their related activities.

Designs

Mockups
Error messages
Warning checkbox

Implementation

The update includes the following changes to the trade page:

1. Modifying the order creation section to include options for creating limit and range disposable orders.
2. Hiding and repositioning certain elements on the trade page, such as the order book and chart.
3. Enhancing the trade page data by adding an activity section.

Orders section

• Both the buy and sell forms will be consolidated into a single interface, allowing users to toggle between buying and selling options.
  -- Default selection-> Buy tab
• Each option will offer three types of orders: market, disposable limit, and disposable range orders.
  -- Default selection->Market order for both buy and sell tabs

The logic for each type of order creation is explained in the "Creating an Order" section below

Creating an order

The process for creating each type of order follows a distinct flow.

Market order

The flow of market orders is similar to the current process for placing buy/sell orders on the trade page.

• Market order creation form is similar to the current Buy/Sell form of the trade page, with the same fields and logic.

Limit & Range Orders

The process of creating limit and range orders is similar to creating limit and range strategies, respectively.

• When a user submits a limit or range order, it initiates the creation of a disposable limit or range strategy. This strategy is identical to the one users create through the existing strategy creation process.
• Users will seamlessly complete the entire strategy creation process within the trade page, without being redirected to a separate strategy creation page.
• The limit and range order creation form resembles the set prices page of the limit and range strategy, with similar fields and logic.
• Once the user submits a limit or range order, the corresponding strategy will be created.
• After successfully submitting a limit or range order the user will then be redirected to My Strategies page (TBD).

Order book and price chart

• Hide the order book
• Re-position the price chart as shown on the design mockup

Activity section

This section will display all activity related to the selected pair, using the same layout (overview, portfolio, and activity tabs) and functionality as the explore page when a specific token pair is selected. Overview, Portfolio, Activity

Logic

• On page load, display the activity tab with the activity for the selected pair.
• When the user changes the selected pair, all three tabs will update to show the data relevant to the new pair.

Mobile

[tiagofilipenunes]

Related #633