Tracking Issue: DEX UI v2

[JasonMHasperhoven]

Overview

This epic focuses on upgrading Penumbra's decentralized exchange (DEX) and creating a Minimum Viable Product (MVP). This MVP will lay the groundwork for future development and provide a solid base to expand it into a full-fletched DEX that will highlight the capabilities of Penumbra.

The plan is to do it in 2 phases:

Phase 1

In this phase, we make quality improvement to the codebase so that it's properly setup as per production standards and rearrange the existing components into 2 pages: Trade & Explorer.

The idea of this phase is to make minimal changes required so that we can get to a new, more functional layout without much effort.

The trade page will reuse the existing components (Chart, Depth Chart & Order Book) and only requires a new pair selector, while the explorer page will combine the Swaps & Blocks component into one screen, after which these components will be replaced with an updated design.

👉 View Figma Design

Tasks

• Improve Code Quality and Repo Setup #37
• Split DEX into Two Pages #38
• Implement Latest Swaps component #39
• Implement Latest Blocks component #40

Phase 2

For phase 2, we will build out the features required to make this into a minimal viable DEX in which people can buy/sell assets. In this phase we will use penumbra-zone's UI library to develop the necessary components. The philosophy here should still be to minimize any work so that we get to the MVP stage as quickly as possible. For example when we're developing the order form, we should only implement market orders and add limit orders etc. later on. The same applies to the other components.

🎨 Design Figma Link

Tasks

• Hidden v2 routes #46
• Implement ability to connect wallet #42
• UIv2 navigation #45
• Implement Trading View #63
• Route Book #64
• Asset Selector #65
• Asset Selector #65
• Decide state manager for V2 #66
• Implement progress component #67
• Implement Market Buy #86
• Implement new depth chart
• Implement an order form
  • Start with market order
• Implement balances
• Implement positions
• Implement orders
• Transaction details page
• Price impact of market swap (estimate rpc?)