Our objective is to expand our offerings by allowing users to create all types of trade strategies on the trade page. This includes limit & range disposable, recurring and concentrated strategies as well as spot trade strategy which is the current trade option against existing liquidity on the platform.
Additionally, we aim to enhance the data presented to users on the trade page by introducing selected pair strategies and their related activities.
The update includes the following changes to the trade page:
Modifying the buy and sell order creation forms to include options for creating limit & range disposable, recurring, and concentrated strategies (the same types currently available on the create strategy page), as well as a spot trade strategy, which is the current trading option against existing liquidity.
Updating the token pair selection section to enable choosing any token pair combination, allowing users to create strategies with new token pairs without existing liquidity pools.
Hiding and repositioning certain elements on the trade page, such as the order book and depth chart.
Enhancing the trade page data by adding an activity section.
Updating every strategy creation flow to route through the trade page, making the current strategy creation flow obsolete.
Important- The new trade page designs feature mockups with interactive charts. Replacing TradingView charts with these interactive charts is not part of this issue and will be addressed in the next task. Therefore:
Consider every interactive history chart in the mockups as a TradingView chart.
The date picker is related to the interactive chart view, so do not implement it at this point.
Trade section
The existing buy and sell forms will be replaced with a single trade section, that will include the strategy creation functionality
The new trade section will enable users to create all available strategy types on the app . Users will be able to complete the entire strategy creation process seamlessly within the trade page, eliminating the need to navigate to a separate strategy creation page.
When a strategy type is selected and before proceeding with the creation flow, the strategy info section will be displayed below the selection, similar to the strategy info section on the current create strategy page.
-- Default strategy type selection: Limit/Range
Each strategy creation logic is explained in the "Strategy creation" section below
Strategy creation
The process for creating each type of strategy follows a distinct flow.
The limit & range stratrgies user creates on the trade page is identical to the one users create through the existing disposable strategy creation process.
The limit & range strategy creation flow resembles the set prices page of the limit and range strategy, with similar fields and logic but with the the following difference:
-- Default order selection: Sell order instead of Buy order
Once the user submits a limit or range order, the corresponding strategy will be created.
Upon completing the creation of a limit/range strategy, users will be redirected to "My Strategies" page.
The recurring stratrgy user creates on the trade page is identical to the one users create through the existing strategy creation process.
The recurring strategy creation flow resembles the set prices page of the recurring strategy, with similar fields and logic but is broken into several steps, allowing users to navigate between the strategy creation pages.
-- Sell high (first step)
-- Buy low (second step)
-- Summary (third step)
Once the user submits a recurring strategy creation on the trade page, the corresponding strategy will be created.
Upon completing the creation of a recurring strategy, users will be redirected to "My Strategies" page.
The concentrated stratrgy user creates on the trade page is identical to the one users create through the existing strategy creation process.
The concentrated strategy creation flow resembles the set prices page of the concentrated strategy, with similar fields and logic but with the following differences:
-- The creation flow is broken into several steps, allowing users to navigate between the strategy creation pages.
--- Set prices (first step)
--- Set budgets (second step)
--- Summary (third step)
-- Move the range chart to the range tab within the price history chart.
--- The range chart tab is shown by default on the set prices page load.
--- The range chart maintains the same logic as the current range chart with the following exception:
--- IF on set prices page
----Both the range and history charts are interactive.
--- ELSE(on set budgets or summary page)
----The displayed data on both charts remains unchanged, but no value can be edited
Once the user submits a concentrated strategy creation on the trade page, the corresponding strategy will be created.
Upon completing the creation of a concentrated strategy, users will be redirected to "My Strategies" page.
Spot trade strategy creation form is a combination of the current Buy&Sell forms of the trade page, with the same fields and logic.
Placing a spot trade strstegy will keep the user on the trade page.
IF the selected token pair does not have a liquidity pool
-- User wont be able to proceed with spot trade strategy creation
-- Selecting a spot trade will show the following notification on the spot info page mockupELSE, show Spot order info page
Token selection
To ensure users can select any token for creating their desired strategy, we plan to replace the current token pair selection menu. Instead, we'll introduce separate token selection modals identical to those used in the current strategy creation and simulate pages.
Consider adding an indication in the select token modal that informs the user which token pairs are currently available for spot trading once they select the base token.- TBD
Order book and price chart
Hide the order book
Hide the depth chart tab
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.
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.
Strategy creation flow
We want to update the strategy creation and duplicate flows so that users will create strategies exclusively through the trade page, making the current strategy creation& duplicate flow obsolete, therefore:
On "Create strategy" CTA click (anywhere in the app)
-- Redirect user to the trade page in the same tab with default "Limit/Range" strategy type selected
On "Duplicate" option click (in strategy menu)
-- Open the trade page in the same tab on Sell High/Buy Low/Set Prices step (according to the strategy being duplicated), with the preselected token pair, strategy type, and corresponding strategy values prefilled (similar to the current duplicate page logic).
Note! -All other strategy flows (edit, deposit and withdraw) remain unchanged
Mobile
The mobile design of the new trade page maintains the current page structure, with the token selection and strategy creation section at the top, the chart in the middle, and the order book section at the bottom of the page replaced with the activity section.
tiagofilipenunes
commented
3 months ago
Overview
Our objective is to expand our offerings by allowing users to create all types of trade strategies on the trade page. This includes limit & range disposable, recurring and concentrated strategies as well as spot trade strategy which is the current trade option against existing liquidity on the platform. Additionally, we aim to enhance the data presented to users on the trade page by introducing selected pair strategies and their related activities.
Designs
Mockups Strategy icons
Implementation
The update includes the following changes to the trade page:
Trade section
Each strategy creation logic is explained in the "Strategy creation" section below
Strategy creation
The process for creating each type of strategy follows a distinct flow.
Limit & Range strategies
Limit/range strategy info page, Limit sell, Limit buy, Range sell, Range buy
Recurring strategies
Recurring strategy info page, Sell high(first step), Buy low(second step), Summary limit, Summary range
Concentrated strategies
Concentrated strategy info page, Set prices history chart, Set prices range chart, Set budgets, Summary
The concentrated stratrgy user creates on the trade page is identical to the one users create through the existing strategy creation process.
The concentrated strategy creation flow resembles the set prices page of the concentrated strategy, with similar fields and logic but with the following differences: -- The creation flow is broken into several steps, allowing users to navigate between the strategy creation pages. --- Set prices (first step) --- Set budgets (second step) --- Summary (third step) -- Move the range chart to the range tab within the price history chart. --- The range chart tab is shown by default on the set prices page load. --- The range chart maintains the same logic as the current range chart with the following exception: --- IF on set prices page ----Both the range and history charts are interactive. --- ELSE(on set budgets or summary page) ----The displayed data on both charts remains unchanged, but no value can be edited
Once the user submits a concentrated strategy creation on the trade page, the corresponding strategy will be created.
Upon completing the creation of a concentrated strategy, users will be redirected to "My Strategies" page.
Spot trade strategy
The spot rade strategy creation is similar to the current process for placing buy/sell orders on the trade page. Spot order info page, Spot order sell, Spot order buy
Token selection
To ensure users can select any token for creating their desired strategy, we plan to replace the current token pair selection menu. Instead, we'll introduce separate token selection modals identical to those used in the current strategy creation and simulate pages.
Consider adding an indication in the select token modal that informs the user which token pairs are currently available for spot trading once they select the base token.- TBD
Order book and price chart
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.
Logic
Strategy creation flow
We want to update the strategy creation and duplicate flows so that users will create strategies exclusively through the trade page, making the current strategy creation& duplicate flow obsolete, therefore:
Note! -All other strategy flows (edit, deposit and withdraw) remain unchanged
Mobile
The mobile design of the new trade page maintains the current page structure, with the token selection and strategy creation section at the top, the chart in the middle, and the order book section at the bottom of the page replaced with the activity section.