Split DEX into Two Pages - Githubissues

penumbra-zone / dex-explorer

Web app for visualization the state of the Penumbra DEX

Apache License 2.0

8 stars 1 forks source link

Split DEX into Two Pages #38

Closed JasonMHasperhoven closed 3 weeks ago

JasonMHasperhoven commented 1 month ago

To enhance the user experience and navigation, we will split the current DEX interface into two pages: Trade and Explorer. This task involves the following steps:

UI Changes

Change header background color to match a card's bg color & change navigation items: Trade & Explorer
Implement & reuse card component that accepts a title prop (remove purple glow)
Use new temporary background color
Miscellaneous changes View Figma Design

Trade Page:

Move/Split Existing Components:

Chart: Relocate the chart component to the new Trade page.
Depth: Move the depth component to the Trade page.
Orderbook: Transfer the orderbook component to the Trade page.
Develop a New Pair Selector: Develop a 2 stage pair selector that asks users to 1) select the base asset and then 2) the quote asset.

Explorer Page:

Move Search Bar: Relocate the search bar component from the header to the Explorer page. Layout Design:
Recent Swaps: Position the recent swaps section on the right side of the Explorer page.
Trades: Position the trades section on the left side of the Explorer page.

VanishMax commented 3 weeks ago

@JasonMHasperhoven I guess this issue is finished by #47 ?

You can close the issues automatically if you link PRs with issues: https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue. For example, by placing closes #47 in the PR description