[EPIC] UI Components Overview

[shrnkld]

CSS Framework

We will use Boostrap as the CSS framework for the app to allow us to build a responsive, flex-based app that can be deployed to desktop via Electron, and ensure compatibility with mobile devices in the future.

Components - main

1. Top bar - elements: logo, selected market, latest price, 24hr price change, 24hr volume
2. Left sidebar - elements: main nav (markets select, wallet config, app settings, help), external links (discord, twitter, telegram, web etc)
3. Chart area - views: price chart, depth chart, both
4. Order form - form with 4 tab views (buy preview, buy confirmation, sell preview, sell confirmation)
5. Orders tabbed table - elements: 4 tab views (open orders, order book, order history, trade history), expandable (collapses chart area), responsive and scrollable

Components - details

The following is a list of the child components required for each parent component:

Top bar

• logo
• selected market info - data from markets select component
• latest trade price info - feed from (?) api
• 24hr price info - change in price for last 24hrs - feed from (?) api
• 24hr volume info - feed from xbridge api

Left sidebar

• Main app nav:
  • Markets select menu - shows connected assets > all available assets
  • Wallet config menu - view list of connected wallets ****and connect new wallet button
  • App settings menu - includes the following components:
    • Market pricing - API source, API Key, update frequency
    • Partial order settings - lower limit toggle switch (TBD), auto repost orders toggle switch
    • Language settings - language selector
  • Help menu - list of external support links
• External links nav - external links as icons: discord, twitter, telegram, website

Chart area

• 3 chart views: price with volume, depth chart, combined with split view of price and depth charts
• price and volume data feed from XBridge API
• depth chart data from (TBD)

Order form

• Buy order tab - input fields:
  • Quantity to buy, Advanced mode toggle switch > Min buy qty, price shown in selected currency, BTC price
  • ‘Preview buy order’ button
• Buy order confirmation -
  • all order details info
  • ‘Confirm buy order’ button
• Sell order tab - input fields:
  • Quantity to sell, Advanced mode toggle switch > Min sell qty, price shown in selected currency, BTC price, total
  • ‘Preview sell order’ button
• Sell order confirmation -
  • all order details info
  • ‘Confirm sell order’ button

Orders table

• My open orders - table data via XBridge API (dxgetmyorders), order status indicator (status)
• Order book - data for all open orders on the network from XBridge API (dxgetorders and **dxGetOrderBook )
• Order history - table data for all completed orders via XBridge API (dxGetOrderHistory ) (need to confirm this in current DX app)
• Trade history - table data for all completed orders via XBridge API (dxGetTradingData ) (need to confirm this in current DX app)

Order detail modal view

Clicking on any order triggers a modal view for the selected order. Specific order details are displayed via the XBridge API (dxGetOrder)

• order details info view
• close modal button
• cancel order button