[Trade Page] Layout & URL

[GrandSchtroumpf]

Ref #1167

The trade page have two sections :

• Form
• Explorer

The Form section will be using subpages, while the
They will both share the same URL and search params, so they should not collide.

Common

• path: /trade/$explorer/$type
• search params:

interface BaseTradeSearch {
  base: string;
  quote: string;
  historyStart?: number;
  historyEnd?: number;
}

Form

Strategy Type

• path: /trade/tradeType/$explorer
• search params:

interface TradeTypeSearch {
  type: 'disposable' | 'recurring' | 'overlapping' | 'spot';
}

Disposable

• path: /trade/$explorer/disposable
• search params:

interface TradeDisposableSearch {
  direction: StrategyDirection;
  settings: StrategySettings;
  min?: string;
  max?: string;
  budget?: string;
}

Recurring

• paths: /trade/$explorer/recurring/$step
• search params:

interface TradeRecurringSearch {
  buyMin?: string;
  buyMax?: string;
  buyBudget?: string;
  buySettings: StrategySettings;
  sellMin?: string;
  sellMax?: string;
  sellBudget?: string;
  sellSettings: StrategySettings;
}

Overlapping

• path: /trade/$explorer/overlapping/$step
• search params:

interface TradeOverlappingSearch {
  marketPrice?: string;
  min?: string;
  max?: string;
  spread?: string;
  anchor?: 'buy' | 'sell';
  budget?: string;
  chartType?: 'history' | 'range';
}

Market

• path: /trade/$explorer/market
• search params:

interface TradeMarketSearch {
  direction: StrategyDirection;
  amount?: number;
  anchor?: StrategyDirection; // direction=buy&anchor=buy -> receive
}

Explorer

Overview

• path: /trade/overview/$type
• search params:

interface TradeOverviewSearch {
  direction: StrategyDirection;
  amount?: number;
  anchor?: StrategyDirection; // direction=buy&anchor=buy -> receive
}

Portfolio

• path: /trade/portfolio/$type
• search params:

interface TradePortfolioSearch {
  token?: string;
}

Activity

• path: /trade/activity/$type
• search params:

interface TradeActivitySearch {
  limit?: number;
  offset?: number;
  ids?: string[];
  actions?: ActivityAction[];
  start?: Date;
  end?: Date;
}

Routes

interface TradeRouteSearch {
  // Trade Type
  '/trade/overview'/tradeType: BaseTradeSearch & TradeTypeSearch & TradeOverviewSearch;
  '/trade/portfolio/tradeType': BaseTradeSearch & TradeTypeSearch & TradePortfolioSearch;
  '/trade/activity/tradeType': BaseTradeSearch & TradeTypeSearch & TradeActivtySearch;

  // Disposable
  '/trade/overview/disposable': BaseTradeSearch & TradeDisposableSearch & TradeOverviewSearch;
  '/trade/portfolio/disposable': BaseTradeSearch & TradeDisposableSearch & TradePortfolioSearch;
  '/trade/activity/disposable': BaseTradeSearch & TradeDisposableSearch & TradeActivtySearch;

  // Recurring
  '/trade/overview/recurring/sell': BaseTradeSearch & TradeRecurringSearch & TradeOverviewSearch;
  '/trade/overview/recurring/buy': BaseTradeSearch & TradeRecurringSearch & TradeOverviewSearch;
  '/trade/overview/recurring/summer': BaseTradeSearch & TradeRecurringSearch & TradeOverviewSearch;

  '/trade/portfolio/recurring/sell': BaseTradeSearch & TradeRecurringSearch & TradePortfolioSearch;
  '/trade/portfolio/recurring/buy': BaseTradeSearch & TradeRecurringSearch & TradePortfolioSearch;
  '/trade/portfolio/recurring/summary': BaseTradeSearch & TradeRecurringSearch & TradePortfolioSearch;

  '/trade/activity/recurring/sell': BaseTradeSearch & TradeRecurringSearch & TradeActivtySearch;
  '/trade/activity/recurring/buy': BaseTradeSearch & TradeRecurringSearch & TradeActivtySearch;
  '/trade/activity/recurring/summary': BaseTradeSearch & TradeRecurringSearch & TradeActivtySearch;

  // Overlapping
  '/trade/overview/overlapping/price': BaseTradeSearch & TradeOverlappingSearch & TradeOverviewSearch;
  '/trade/portfolio/overlapping/price': BaseTradeSearch & TradeOverlappingSearch & TradePortfolioSearch;
  '/trade/activity/overlapping/price': BaseTradeSearch & TradeOverlappingSearch & TradeActivtySearch;

  '/trade/overview/overlapping/budget': BaseTradeSearch & TradeOverlappingSearch & TradeOverviewSearch;
  '/trade/portfolio/overlapping/budget': BaseTradeSearch & TradeOverlappingSearch & TradePortfolioSearch;
  '/trade/activity/overlapping/budget': BaseTradeSearch & TradeOverlappingSearch & TradeActivtySearch;

  '/trade/overview/overlapping/summary': BaseTradeSearch & TradeOverlappingSearch & TradeOverviewSearch;
  '/trade/portfolio/overlapping/summary': BaseTradeSearch & TradeOverlappingSearch & TradePortfolioSearch;
  '/trade/activity/overlapping/summary': BaseTradeSearch & TradeOverlappingSearch & TradeActivtySearch;
 
  // Market
  '/trade/overview/market': BaseTradeSearch & TradeMarketSearch & TradeOverviewSearch;
  '/trade/portfolio/market': BaseTradeSearch & TradeMarketSearch & TradePortfolioSearch;
  '/trade/activity/market': BaseTradeSearch & TradeMarketSearch & TradeActivtySearch;
}

Side Effect

We'll need to update the explorer/$type/$slug/portfolio/token/$address page to explorer/$type/$slug/portfolio?token={address}