From 7f0ef469bccf1eec24526afac82082563746f36a Mon Sep 17 00:00:00 2001
From: buck54321 <buck54321@gmail.com>
Date: Mon, 3 Oct 2022 13:26:50 -0500
Subject: [PATCH] ui: restyle markets page

This restyles the markets page. The new style is responsive. There are also some other
stylistic changes that apply across the app, including a softer-edged DEX symbol, and
adjusted buy/sell colors.
---
 client/webserver/live_test.go                 |   21 +-
 client/webserver/locales/en-us.go             |    4 +-
 client/webserver/locales/pl-pl.go             |    3 +-
 client/webserver/locales/pt-br.go             |    3 +-
 client/webserver/locales/zh-cn.go             |    3 +-
 .../webserver/site/src/css/application.scss   |   15 +-
 client/webserver/site/src/css/forms.scss      |   25 +-
 client/webserver/site/src/css/icons.scss      |    6 +
 client/webserver/site/src/css/main.scss       |  138 +-
 client/webserver/site/src/css/main_dark.scss  |   57 +-
 client/webserver/site/src/css/market.scss     | 1147 +++++++++--------
 .../webserver/site/src/css/market_dark.scss   |  256 ++--
 client/webserver/site/src/css/wallets.scss    |   50 +-
 .../webserver/site/src/css/wallets_dark.scss  |   18 +-
 .../webserver/site/src/html/bodybuilder.tmpl  |   29 +-
 client/webserver/site/src/html/forms.tmpl     |   19 +
 client/webserver/site/src/html/markets.tmpl   |  771 ++++++-----
 client/webserver/site/src/html/wallets.tmpl   |   27 +-
 .../site/src/img/candlestick_bttn.png         |  Bin 502 -> 0 bytes
 client/webserver/site/src/img/depth_bttn.png  |  Bin 665 -> 0 bytes
 .../site/src/img/softened-icon-dark.png       |  Bin 0 -> 3207 bytes
 .../site/src/img/softened-icon-dark.xcf       |  Bin 0 -> 24321 bytes
 .../webserver/site/src/img/softened-icon.png  |  Bin 0 -> 4318 bytes
 client/webserver/site/src/js/app.ts           |   24 +-
 client/webserver/site/src/js/charts.ts        |  193 ++-
 client/webserver/site/src/js/doc.ts           |    5 +-
 client/webserver/site/src/js/forms.ts         |   71 +-
 client/webserver/site/src/js/locales.ts       |   26 +-
 client/webserver/site/src/js/markets.ts       | 1047 +++++++--------
 client/webserver/site/src/js/registry.ts      |    3 +-
 client/webserver/site/src/js/wallets.ts       |   58 +-
 .../webserver/site/template-builder/main.go   |    2 +-
 dex/candles/candles.go                        |   15 +-
 dex/candles/candles_test.go                   |    4 +-
 dex/msgjson/types.go                          |    2 +
 server/apidata/apidata.go                     |   12 +-
 36 files changed, 2138 insertions(+), 1916 deletions(-)
 delete mode 100644 client/webserver/site/src/img/candlestick_bttn.png
 delete mode 100644 client/webserver/site/src/img/depth_bttn.png
 create mode 100644 client/webserver/site/src/img/softened-icon-dark.png
 create mode 100644 client/webserver/site/src/img/softened-icon-dark.xcf
 create mode 100644 client/webserver/site/src/img/softened-icon.png

diff --git a/client/webserver/live_test.go b/client/webserver/live_test.go
index eae66d27ab..ff02a65802 100644
--- a/client/webserver/live_test.go
+++ b/client/webserver/live_test.go
@@ -29,6 +29,7 @@ import (
 	"decred.org/dcrdex/client/comms"
 	"decred.org/dcrdex/client/core"
 	"decred.org/dcrdex/client/db"
+	"decred.org/dcrdex/client/orderbook"
 	"decred.org/dcrdex/dex"
 	"decred.org/dcrdex/dex/calc"
 	"decred.org/dcrdex/dex/candles"
@@ -48,7 +49,7 @@ const (
 
 var (
 	tCtx                  context.Context
-	maxDelay                     = time.Second * 2
+	maxDelay                     = time.Second * 4
 	epochDuration                = time.Second * 30 // milliseconds
 	feedPeriod                   = time.Second * 10
 	creationPendingAsset  uint32 = 0xFFFFFFFF
@@ -183,7 +184,7 @@ func mkMrkt(base, quote string) *core.Market {
 			Rate:    rate,
 			// BookVolume: ,
 			Change24: change24,
-			// Vol24: ,
+			Vol24:    lotSize * uint64(50000*rand.Float32()),
 		},
 	}
 }
@@ -1141,12 +1142,24 @@ func (c *TCore) book(dexAddr, mktID string) *core.OrderBook {
 		buys = append(buys, ord)
 		c.buys[ord.Token] = ord
 	}
+	recentMatches := make([]*orderbook.MatchSummary, 0, 25)
+	tNow := time.Now()
+	for i := 0; i < 25; i++ {
+		ord := randomOrder(rand.Float32() > 0.5, maxQty, midGap, gapWidthFactor*midGap, false)
+		recentMatches = append(recentMatches, &orderbook.MatchSummary{
+			Rate:  ord.MsgRate,
+			Qty:   ord.QtyAtomic,
+			Stamp: uint64(tNow.Add(-time.Duration(i) * time.Minute).UnixMilli()),
+			Sell:  ord.Sell,
+		})
+	}
 	c.orderMtx.Unlock()
 	sort.Slice(buys, func(i, j int) bool { return buys[i].Rate > buys[j].Rate })
 	sort.Slice(sells, func(i, j int) bool { return sells[i].Rate < sells[j].Rate })
 	return &core.OrderBook{
-		Buys:  buys,
-		Sells: sells,
+		Buys:          buys,
+		Sells:         sells,
+		RecentMatches: recentMatches,
 	}
 }
 
diff --git a/client/webserver/locales/en-us.go b/client/webserver/locales/en-us.go
index 80d2094cb8..8e676d0f54 100644
--- a/client/webserver/locales/en-us.go
+++ b/client/webserver/locales/en-us.go
@@ -81,10 +81,10 @@ var EnUS = map[string]string{
 	"outdated_tooltip":               "Balance may be outdated. Connect to the wallet to refresh.",
 	"available":                      "available",
 	"connect_refresh_tooltip":        "Click to connect and refresh",
-	"add_a_base_wallet":              `Add a<br><span data-unit="base"></span><br>wallet`,
-	"add_a_quote_wallet":             `Add a<br><span data-unit="quote"></span><br>wallet`,
+	"add_a_wallet":                   `Add a <span data-tmpl="addWalletSymbol"></span> wallet`,
 	"locked":                         "locked",
 	"immature":                       "immature",
+	"fee balance":                    "fee balance",
 	"Sell Orders":                    "Sell Orders",
 	"Your Orders":                    "Your Orders",
 	"Recent Matches":                 "Recent Matches",
diff --git a/client/webserver/locales/pl-pl.go b/client/webserver/locales/pl-pl.go
index aad168313c..10d4847ecd 100644
--- a/client/webserver/locales/pl-pl.go
+++ b/client/webserver/locales/pl-pl.go
@@ -80,8 +80,7 @@ var PlPL = map[string]string{
 	"outdated_tooltip":               "Saldo może być nieaktualne. Połącz się z portfelem, aby je odświeżyć.",
 	"available":                      "dostępne",
 	"connect_refresh_tooltip":        "Kliknij, aby połączyć i odświeżyć",
-	"add_a_base_wallet":              `Dodaj portfel<br><span data-unit="base"></span><br>`,
-	"add_a_quote_wallet":             `Dodaj portfel<br><span data-unit="quote"></span><br>`,
+	"add_a_wallet":                   `Dodaj portfel <span data-tmpl="addWalletSymbol"></span> `,
 	"locked":                         "zablokowane",
 	"immature":                       "niedojrzałe",
 	"Sell Orders":                    "Zlecenia sprzedaży",
diff --git a/client/webserver/locales/pt-br.go b/client/webserver/locales/pt-br.go
index 8ac717169a..685a840ceb 100644
--- a/client/webserver/locales/pt-br.go
+++ b/client/webserver/locales/pt-br.go
@@ -80,8 +80,7 @@ var PtBr = map[string]string{
 	"outdated_tooltip":               "Balanço pode está desatualizado. Conecte-se a carteira para atualizar.",
 	"available":                      "disponível",
 	"connect_refresh_tooltip":        "Clique para conectar e atualizar",
-	"add_a_base_wallet":              `Adicionar uma carteira<br><span data-unit="base"></span><br>`,
-	"add_a_quote_wallet":             `Adicionar uma<br><span data-unit="quote"></span><br>carteira`,
+	"add_a_wallet":                   `Adicionar uma carteira <span data-tmpl="addWalletSymbol"></span> `,
 	"locked":                         "trancado",
 	"immature":                       "imaturo",
 	"Sell Orders":                    "Pedido de venda",
diff --git a/client/webserver/locales/zh-cn.go b/client/webserver/locales/zh-cn.go
index 864c7d6c84..11e4cccb70 100644
--- a/client/webserver/locales/zh-cn.go
+++ b/client/webserver/locales/zh-cn.go
@@ -80,8 +80,7 @@ var ZhCN = map[string]string{
 	"outdated_tooltip":               "账户可能已过期。请连接到钱包进行更新。",
 	"available":                      "可用",
 	"connect_refresh_tooltip":        "点击连接并刷新",
-	"add_a_base_wallet":              `添加一个<br><span data-unit="base"></span><br>钱包`,
-	"add_a_quote_wallet":             `添加一个<br><span data-unit="quote"></span><br>钱包`,
+	"add_a_wallet":                   `添加一个 <span data-tmpl="addWalletSymbol"></span> 钱包`,
 	"locked":                         "锁定",
 	"immature":                       "不成熟",
 	"Sell Orders":                    "卖单",
diff --git a/client/webserver/site/src/css/application.scss b/client/webserver/site/src/css/application.scss
index f7d7c803ca..a1e77f4f8c 100644
--- a/client/webserver/site/src/css/application.scss
+++ b/client/webserver/site/src/css/application.scss
@@ -2,17 +2,14 @@
 $grid-columns: 24;
 $font-color-dark: #dfe2e1;
 $font-color-light: #333;
-$buycolor_dark: #05a35a;
-$sellcolor_dark: #ae3333;
+$buycolor_dark: #29bb77;
+$sellcolor_dark: #e95e5e;
 $buycolor_light: #207a46;
 $sellcolor_light: #99302b;
-$light_bg_1: #eaeaea;
-$light_bg_2: #d5d5d5;
-$dark_bg_1: #111;
-$dark_bg_2: #1e1e1e;
-$dark_bg_3: #292929;
-$dark_body_bg: #13202b;
-$light_body_bg: #e0e0e0;
+$light_body_bg: white;
+$dark_body_bg: #091a28;
+$light_border_color: #ddd;
+$dark_border_color: #383f4b;
 $sans: "source-sans", sans-serif;
 $demi-sans: "demi-sans", sans-serif;
 $mono: "mono", monospace;
diff --git a/client/webserver/site/src/css/forms.scss b/client/webserver/site/src/css/forms.scss
index f65bf71b57..7c59355762 100644
--- a/client/webserver/site/src/css/forms.scss
+++ b/client/webserver/site/src/css/forms.scss
@@ -1,10 +1,6 @@
 #regAssetForm {
   position: relative;
 
-  .grey {
-    color: #999;
-  }
-
   div.reg-asset-allmkts {
     min-width: 210px;
     max-width: 320px;
@@ -117,10 +113,6 @@
 #confirmRegForm {
   width: 425px;
 
-  .grey {
-    color: grey;
-  }
-
   button.submit {
     width: auto;
     padding: 12px 30px;
@@ -155,10 +147,6 @@
 #newWalletForm {
   width: 425px;
 
-  .grey {
-    color: #999;
-  }
-
   .wallet-tabs {
     width: 100%;
     display: flex;
@@ -255,7 +243,7 @@ button.form-button {
   bottom: 0;
   right: 0;
   padding: 25px 0;
-  background-color: #e0e0e0f3;
+  background-color: $light_body_bg;
   z-index: 100;
 
   & > form {
@@ -274,10 +262,6 @@ button.form-button {
 #walletWait {
   max-width: 425px;
 
-  .grey {
-    color: #999;
-  }
-
   .icons {
     width: 25px;
   }
@@ -345,3 +329,10 @@ button.form-button {
 #authorizeSeedDisplay {
   width: 425px;
 }
+
+#deposit {
+  #copyAlert {
+    margin-left: 12px;
+    position: absolute;
+  }
+}
diff --git a/client/webserver/site/src/css/icons.scss b/client/webserver/site/src/css/icons.scss
index 65d1321b2f..75d0908a7d 100644
--- a/client/webserver/site/src/css/icons.scss
+++ b/client/webserver/site/src/css/icons.scss
@@ -110,6 +110,12 @@
   transform: rotate(180deg);
 }
 
+.ico-arrowup::before {
+  content: "\e90c";
+  display: inline-block;
+  transform: rotate(-90deg);
+}
+
 .ico-checkbox::before {
   content: "\e90d";
 }
diff --git a/client/webserver/site/src/css/main.scss b/client/webserver/site/src/css/main.scss
index 52d111e367..eb38e67515 100644
--- a/client/webserver/site/src/css/main.scss
+++ b/client/webserver/site/src/css/main.scss
@@ -60,39 +60,34 @@ input:invalid {
   overflow-y: auto;
 }
 
-.overflow-x-hidden {
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-x-hidden,
+.stylish-overflow.overflow-x-hidden {
   overflow-x: hidden;
 }
 
 header.maintop {
   width: 100%;
-  height: 60px;
-  min-height: 60px;
+  height: 70px;
+  min-height: 70px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 100;
-  background-color: white;
-  border-bottom: 1px solid #777;
+  border-bottom: 1px solid $light_border_color;
 }
 
-a.logo,
 a.logo-icon {
   display: block;
-  height: 30px;
-  margin: 0 20px;
+  margin: 0 10px;
   background-size: cover;
   cursor: pointer;
-}
-
-a.logo {
-  width: 145px;
-  background-image: url("/img/logo_wide_v1.svg");
-}
-
-a.logo-icon {
-  width: 30px;
-  background-image: url("/img/logo_icon_v1.svg");
+  height: 40px;
+  width: 40px;
+  background-image: url("/img/softened-icon.png");
 }
 
 div.main {
@@ -116,31 +111,6 @@ button:focus {
   outline: none;
 }
 
-.card {
-  width: 400px;
-  border-radius: 3px;
-  position: relative;
-
-  button {
-    padding: 6px 0;
-  }
-
-  input,
-  select {
-    background-color: $light_bg_2;
-  }
-
-  input:focus,
-  select:focus {
-    background-color: $light_bg_2;
-  }
-
-  form label {
-    font-size: 15px;
-    font-family: $demi-sans;
-  }
-}
-
 .dynamicopts {
   display: flex;
   align-items: stretch;
@@ -154,11 +124,17 @@ button:focus {
   }
 }
 
-div.mainlinks > div,
-div.mainlinks > a {
-  padding-right: 1em;
-  color: #4a4949;
-  cursor: pointer;
+div.mainlinks {
+  white-space: nowrap;
+
+  & > div,
+  & > a {
+    color: #4a4949;
+    cursor: pointer;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 10px;
+  }
 }
 
 .plainlink {
@@ -187,12 +163,8 @@ header.maintop a:hover,
   cursor: pointer;
 }
 
-div.mainlinks .hoverbright:hover {
-  color: $dark_bg_3;
-}
-
-form.card button:hover {
-  color: black;
+div.mainlinks .hoverbg:hover {
+  color: #222;
 }
 
 div.spinner {
@@ -246,6 +218,19 @@ input[type=number] {
   @include stylish-overflow;
 }
 
+.stylish-overflow.hoveronly:not(:hover) {
+  scrollbar-color: transparent transparent;
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 4px;
+  }
+}
+
 .max-h-100 {
   max-height: 100%;
 }
@@ -327,7 +312,7 @@ div.popup-notes {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  background-color: white;
+  background-color: $light_body_bg;
   border: 1px solid #7777;
   z-index: 100;
   font-family: $sans;
@@ -389,32 +374,36 @@ div.popup-notes {
   display: none !important;
 }
 
-.bg0 {
-  background-color: white;
+.buycolor {
+  color: $buycolor_light;
 }
 
-.bg1 {
-  background-color: $light_bg_1;
+.sellcolor {
+  color: $sellcolor_light;
 }
 
-.border1 {
-  border: 1px solid #aaa;
+.errcolor {
+  color: #e61c00;
 }
 
-.bg2 {
-  background-color: $light_bg_2;
+.grey {
+  color: #999;
 }
 
-.buycolor {
-  color: $buycolor_light;
+.brdrleft {
+  border-left: 1px solid $light_border_color;
 }
 
-.sellcolor {
-  color: $sellcolor_light;
+.brdrright {
+  border-right: 1px solid $light_border_color;
 }
 
-.errcolor {
-  color: #e61c00;
+.brdrtop {
+  border-top: 1px solid $light_border_color;
+}
+
+.brdrbottom {
+  border-bottom: 1px solid $light_border_color;
 }
 
 hr.dashed {
@@ -477,10 +466,6 @@ div.form-closer {
   font-size: 15px;
 }
 
-div.border1 {
-  border: 1px solid #aaa;
-}
-
 #loader {
   background-color: #e0e0e077;
 }
@@ -498,6 +483,11 @@ span.token-aware-symbol sup {
 @include media-breakpoint-up(md) {
   div.mainlinks > div,
   div.mainlinks > a {
-    padding-right: 1.7em;
+    padding-left: 18px;
+    padding-right: 18px;
+
+    &:last-child {
+      padding-right: 0;
+    }
   }
 }
diff --git a/client/webserver/site/src/css/main_dark.scss b/client/webserver/site/src/css/main_dark.scss
index 343ff4a467..8cddd35ed2 100644
--- a/client/webserver/site/src/css/main_dark.scss
+++ b/client/webserver/site/src/css/main_dark.scss
@@ -3,49 +3,51 @@ body.dark {
   color: $font-color-dark;
 
   header.maintop {
-    background-color: black;
-    border-bottom-style: none;
+    // background-color: black;
+    border-bottom-style: solid;
+    border-color: $dark_border_color;
+    border-width: 1px;
+  }
+
+  a.logo-icon {
+    background-image: url("/img/softened-icon-dark.png");
   }
 
   .offwhite {
     color: #a1a1a1;
   }
 
+  .grey {
+    color: #666;
+  }
+
   div.mainlinks > div,
   div.mainlinks > a {
     color: #a8a8a8;
   }
 
-  div.mainlinks .hoverbright:hover {
+  div.mainlinks .hoverbg:hover {
     color: #c5c5c5;
   }
 
-  a.logo {
-    background-image: url("/img/logo_wide_dark_v1.svg");
-  }
-
   div.note:not(:last-child) {
     border-color: #333;
   }
 
-  .bg0 {
-    background-color: black;
-  }
-
-  .border1 {
-    border: 1px solid #333;
+  .brdrleft {
+    border-left: 1px solid dark_border_color;
   }
 
-  .bg1 {
-    background-color: $dark_bg_1;
+  .brdrright {
+    border-right: 1px solid dark_border_color;
   }
 
-  .bg2 {
-    background-color: $dark_bg_2;
+  .brdrtop {
+    border-top: 1px solid dark_border_color;
   }
 
-  .bg3 {
-    background-color: $dark_bg_3;
+  .brdrbottom {
+    border-bottom: 1px solid dark_border_color;
   }
 
   .subtlelink,
@@ -99,22 +101,13 @@ body.dark {
     opacity: 1;
   }
 
-  form.card button,
-  form.card label {
-    text-shadow: 0 0 4px black;
-  }
-
-  form.card button:hover {
-    color: #dde9ff;
-  }
-
   div.popup-notes > span {
     background-color: white;
     color: $font-color-light;
   }
 
   #forms {
-    background-color: #13202bf3;
+    background-color: $dark_body_bg;
   }
 
   .buycolor {
@@ -125,13 +118,9 @@ body.dark {
     color: $sellcolor_dark;
   }
 
-  div.border1 {
-    border: 1px solid #333;
-  }
-
   #noteBox,
   #profileBox {
-    background-color: $dark_bg_1;
+    background-color: $dark_body_bg;
   }
 
   #tooltip {
diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss
index d64694cb41..bf89f95b1e 100644
--- a/client/webserver/site/src/css/market.scss
+++ b/client/webserver/site/src/css/market.scss
@@ -1,406 +1,405 @@
-div.marketlist {
-  // width: 175px;
-  border-right: 1px solid #626262;
-  z-index: 99;
-  background-color: #dbdbdb;
-  min-width: 190px;
-
-  .selected {
-    border-style: solid none;
-    border-width: 1px;
-    border-color: #aaa;
-  }
-
-  .header {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+div[data-handler=markets] {
+  .ordertable-wrap {
     width: 100%;
-    max-width: 250px;
-  }
 
-  .xc:not(:first-child) .header {
-    padding-top: 15px;
-  }
+    &:first-child {
+      border-bottom: 1px solid $light_border_color;
+    }
 
-  .grey {
-    color: #555;
-  }
-}
+    &:last-child {
+      border-top: 1px solid $light_border_color;
+    }
 
-div.marketrow {
-  font-size: 16px;
-  padding: 3px 4px;
-  cursor: pointer;
-  white-space: nowrap;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  margin: 3px;
-  background-color: #c2c9d4;
-  border-radius: 3px;
-  // border: 1px solid #7775;
-
-  & > div {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    line-height: 1;
-    padding: 2px 0;
+    tbody#sellRows {
+      border-top: 1px solid $light_border_color;
+    }
   }
 
-  &:hover,
-  &.selected {
-    padding: 2px 3px;
-    border: 1px solid #1b966d;
+  .ordertable-header {
+    height: 30px;
+    padding: 0 45px 0 10px;
   }
 
-  span.upgreen {
-    color: #35b97c;
-  }
+  .orderbook {
+    min-width: 300px;
+    width: 90%;
+    border-right: 1px solid $light_border_color;
+    border-left: 1px solid $light_border_color;
+    border-top: 1px solid $light_border_color;
 
-  span.downred {
-    color: #c33b3b;
-  }
+    & > div:first-child { // buy orders
+      order: 3;
+    }
+
+    & > div:nth-child(2) { // header
+      order: 1;
+    }
 
-  span.pct-change {
-    min-width: 50px;
-    text-align: right;
+    & > div:last-child { // sell orders
+      order: 2;
+    }
   }
-}
 
-label.market-search {
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-  margin: 1px;
-  background-color: white;
+  .order-panel {
+    min-width: 375px;
+    width: 90%;
 
-  input {
-    border: none;
-    width: 100%;
-  }
+    & > div {
+      border: 1px solid $light_border_color;
+    }
 
-  span {
-    width: 25px;
-    text-align: center;
-  }
-}
+    #orderForm {
+      input[type=number] {
+        height: 30px;
+        border: 1px solid #6a6a6a;
+        border-radius: 0;
+        font-size: 14px;
+      }
 
-div.market-orders-table-container {
-  @include media-breakpoint-down(lg) {
-    max-height: 200px;
-  }
+      input:focus {
+        outline: none;
+      }
 
-  @include media-breakpoint-up(lg) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-  }
-}
+      span.unitbox {
+        position: absolute;
+        font-size: 14px;
+        font-family: "demi-sans", sans-serif;
+        right: 5px;
+        top: 48%; // Looks better than 50 for some reason.
+        transform: translateY(-50%);
+        white-space: nowrap;
+      }
 
-div.user-orders-table-container {
-  @include media-breakpoint-down(xxl) {
-    max-height: 200px;
-  }
+      button {
+        padding: 5px 25px;
+        border-radius: 3px;
+        color: #555;
+      }
 
-  @include media-breakpoint-up(xxl) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-  }
-}
+      button:hover,
+      button.selected {
+        color: black;
+      }
 
-table.ordertable {
-  border-collapse: collapse;
-  border: none;
-  width: 100%;
-  margin-bottom: 10px;
+      button.submit {
+        background-color: #5cba8b;
+      }
 
-  th {
-    font-size: 14px;
-    font-family: "demi-sans", sans-serif;
-  }
+      button.selected,
+      button.submit {
+        &.buygreen-bg {
+          background-color: #207a4699;
+        }
 
-  td {
-    font-size: 14px;
-  }
+        &.sellred-bg {
+          background-color: #99302b99;
+        }
+      }
 
-  td,
-  th {
-    font-size: 14px;
-    padding: 3px 0;
-  }
+      .ico-unlocked {
+        color: #1e7d11;
+      }
 
-  tr {
-    border-bottom: 1px solid #b3b3b3;
+      #orderPreview,
+      .h21 {
+        height: 21px;
+      }
+    }
   }
 
-  tbody > tr:hover,
-  tbody > tr.hover {
-    background-color: white;
-  }
+  .market-chart {
+    @extend .flex-center;
 
-  .ico-check {
-    color: #9b8c09;
+    flex-grow: 1;
+    position: relative;
+    min-width: 100px; // Letting it go to zero can be problematic, causing some major cpu during chart calcs
+
+    canvas {
+      position: absolute;
+      left: 0;
+      top: 0;
+      user-select: none;
+    }
   }
-}
 
-table.balance-table {
-  width: 96%;
-  margin: 0 2%;
-  font-size: 15px;
+  .user-order {
+    margin: 0 20px;
+    border: 1px solid $light_border_color;
 
-  td,
-  th {
-    white-space: nowrap;
-    text-align: left;
-    border-width: 1px;
-    border-color: #3a3a3a;
-    font-size: 14px;
-  }
+    &:not(:last-child) {
+      border-bottom-style: none;
+    }
 
-  th {
-    border-bottom-style: solid;
-  }
+    &:last-child .order-details {
+      border-bottom-style: none;
+      padding-bottom: 0;
+    }
 
-  button {
-    font-family: $sans;
-    padding: 2px 10px;
-    margin: 5px 0;
-    font-size: 14px;
-    border: 1px solid #444;
-    border-radius: 3px;
-    background-color: transparent;
-  }
+    .user-order-header {
+      @extend .flex-center;
 
-  td:not(:first-child) {
-    font-family: $mono;
-  }
+      padding: 5px 10px 5px 20px;
+      font-size: 14px;
+      position: relative;
+      // border: 1px solid grey;
 
-  td:first-child {
-    font-size: 14px;
-  }
+      .side-indicator {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 8px;
+
+        &.buy {
+          background-color: $buycolor_light;
+        }
+
+        &.sell {
+          background-color: $sellcolor_light;
+        }
+      }
 
-  td.fs16 {
-    font-size: 16px;
-  }
+      .active-indicator {
+        height: 8px;
+        border-radius: 4px;
 
-  th:not(:first-child),
-  td:not(:first-child) {
-    padding: 0 10px;
-    border-left-style: solid;
-  }
+        &.active {
+          margin: 0 5px;
+          width: 8px;
+          background-color: $buycolor_light;
+        }
+      }
+    }
 
-  td.pointer:hover {
-    background-color: #fff1;
-  }
+    .order-details {
+      margin-bottom: 25px;
+      padding: 0 10px 10px;
+      border-width: 1px;
+      border-color: $light_border_color;
+      border-style: solid none;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      row-gap: 10px;
+      line-height: 1;
 
-  .ico-expired {
-    color: orangered;
+      .user-order-datum {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        & > span:first-child {
+          font-size: 12px;
+          font-family: $demi-sans;
+          color: grey;
+          margin-bottom: 2px;
+        }
+
+        & > span:nth-child(2) {
+          font-size: 14px;
+        }
+
+        &.full-span {
+          grid-column: 1 / -1;
+        }
+      }
+    }
   }
 
-  td .ico-spinner,
-  td .ico-sleeping,
-  td .ico-cross {
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-    margin: 0 auto;
-  }
+  table.ordertable {
+    border-collapse: collapse;
+    border: none;
+    width: 100%;
 
-  .micro-icon {
-    width: 13px;
-    height: 13px;
-    bottom: 1px;
-  }
-}
+    th {
+      font-family: "demi-sans", sans-serif;
+    }
 
-.card {
-  .grey {
-    color: #939b99;
-  }
+    td,
+    th {
+      font-size: 15px;
+      padding: 3px 0;
+    }
 
-  .buygreen {
-    background-color: #207a4699;
-  }
+    td:first-child {
+      width: 100%;
+    }
 
-  .micro-icon {
-    bottom: auto;
-  }
-}
+    td:last-child {
+      min-width: 30px;
+    }
 
-table#vFeeTable {
-  width: 100%;
-  font-size: 15px;
+    tbody > tr:hover,
+    tbody > tr.hover {
+      background-color: white;
+    }
 
-  tbody {
-    width: 100%;
+    .ico-check {
+      color: #9b8c09;
+    }
   }
 
-  td {
-    padding: 3px 6px;
-    border-color: #333;
-  }
+  .markettab {
+    height: 30px;
+    border-style: none;
 
-  td:first-child {
-    white-space: nowrap;
+    &.selected {
+      background-color: #fffe;
+    }
   }
 
-  td.squeeze {
-    width: 1px;
+  .numorders {
+    background-color: #c5c5e6;
+    border-radius: 3px;
+    line-height: 1;
+    padding: 1px;
+    font-size: 0.9em;
   }
 
-  tr:not(:first-child) > td {
-    border-style: solid;
+  #leftColumnV1 {
+    height: 100%;
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    border-right-style: solid;
+    border-color: $light_border_color;
     border-width: 1px;
+    background-color: $light_body_bg;
+    z-index: 2;
 
-    &:first-child {
-      border-style: solid solid solid none;
+    &.default {
+      display: none;
     }
 
-    &:last-child {
-      border-style: solid none solid solid;
+    #searchBoxV1 {
+      height: 55px;
+      border-bottom-style: solid;
+      border-color: $light_border_color;
+      border-width: 1px;
     }
-  }
-
-  tr.heavy-bottom > td,
-  td.heavy-bottom {
-    border-bottom-color: #555;
-  }
 
-  tr.heavy-top > td {
-    border-top-color: #555;
-  }
-}
+    &.stashed {
+      display: none;
+    }
 
-.market-header button:hover {
-  color: black;
-}
+    #marketSearchV1:focus {
+      border: none;
+      outline: none;
+    }
 
-table.balance-table button:hover {
-  border-color: #959595;
-}
+    #marketSearchV1 {
+      @extend .fill-abs;
 
-.market-header {
-  height: 30px;
-  background-color: $light_bg_2;
-  color: #222;
+      z-index: 2;
+      background-color: transparent;
+      font-size: 25px;
+      text-align: center;
+      font-family: $demi-sans;
+      font-variant: small-caps;
+      border: none;
 
-  button.selected {
-    color: black;
-  }
-}
+      & + .ico-search {
+        z-index: 1;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        opacity: 0.25;
+      }
 
-#orderForm {
-  input[type=number] {
-    height: 30px;
-    border: 1px solid #6a6a6a;
-    border-radius: 0;
-    font-size: 14px;
-  }
+      &:hover + .ico-search {
+        opacity: 0.5;
+      }
 
-  input:focus {
-    outline: none;
-  }
+      &:focus + .ico-search {
+        display: none;
+      }
+    }
 
-  span.unitbox {
-    position: absolute;
-    font-size: 14px;
-    font-family: "demi-sans", sans-serif;
-    right: 5px;
-    top: 48%; // Looks better than 50 for some reason.
-    transform: translateY(-50%);
-    white-space: nowrap;
-  }
+    #leftHider {
+      padding: 0 5px;
+      border-left-style: solid;
+      border-color: $light_border_color;
+      border-width: 1px;
 
-  button {
-    padding: 5px 25px;
-    border-radius: 3px;
-    color: #555;
-  }
+      .ico-arrowback {
+        transform: scaleX(0.5);
+        opacity: 0.5;
+      }
 
-  button:hover,
-  button.selected {
-    color: black;
-  }
+      &:hover .ico-arrowback {
+        opacity: 1;
+      }
+    }
 
-  button.submit {
-    background-color: #5cba8b;
-  }
+    #marketListV1 {
+      height: 100%;
+      min-width: 225px;
 
-  button.selected,
-  button.submit {
-    &.buygreen {
-      background-color: #207a4699;
-    }
+      .market-tmpl-v1 {
+        line-height: 1;
+        margin-bottom: 10px;
+        width: 100%;
 
-    &.sellred {
-      background-color: #99302b99;
-    }
-  }
+        img {
+          width: 20px;
+          height: 20px;
+          position: relative;
 
-  .ico-unlocked {
-    color: #1e7d11;
-  }
+          // &:nth-child(0) {
+          //   top: 5px;
+          // }
 
-  #orderPreview,
-  .h21 {
-    height: 21px;
+          // &:nth-child(1) {
+          //   top: -5px;
+          // }
+        }
+      }
+    }
   }
-}
 
-#marketChart {
-  position: relative;
-  background-color: white;
-  height: 40%;
-  border-bottom: 1px solid #626262;
-  padding-top: 20px;
+  #mainContent {
+    @extend .fill-abs;
 
-  .chart-legend {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 0 5px;
-    height: 30px;
-    font-size: 14px;
-    color: #444;
-
-    .category-spacer {
-      display: inline-block;
-      margin: 0 7px;
-      position: relative;
-      bottom: 2px;
+    row-gap: 30px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+
+    & > div {
+      &:first-child { // order book
+        max-height: 1000px;
+        order: 3;
+      }
 
-      &::after {
-        content: "|";
+      &:nth-child(2) { // charts
+        min-height: 750px;
+        width: 90%;
+        order: 3;
       }
-    }
 
-    button.chart-selector {
-      width: 52px;
-      height: 20px;
-      padding: 1px;
-      margin-right: 10px;
-      background-color: #7772;
-      border: 1px solid #777;
-      border-radius: 5px;
+      &:last-child { // order form, wallets, user orders
+        order: 2;
+      }
     }
+  }
 
-    button.chart-selector:hover {
-      background-color: #7777;
-      border-color: #6cac78;
-    }
+  #epochLine,
+  #durBttnBox {
+    position: absolute;
+    left: 50px;
+    top: 5px;
+    background-color: $light_body_bg;
+    z-index: 1;
+    display: none; // shown on hover
+  }
 
+  #durBttnBox {
     .candle-dur-bttn {
-      background-color: #7772;
+      background-color: $light_body_bg;
       border: 1px solid #777;
       padding: 2px 4px;
       font-size: 14px;
@@ -417,6 +416,12 @@ table.balance-table button:hover {
         border-color: #6cac78;
       }
     }
+  }
+
+  #epochLine {
+    @extend .flex-center;
+
+    display: none;
 
     .epoch-line {
       display: inline-block;
@@ -427,238 +432,252 @@ table.balance-table button:hover {
       position: relative;
       top: 1px;
     }
-
-    #candlestickBttn {
-      background-image: url("/img/candlestick_bttn.png");
-    }
-
-    #depthBttn {
-      background-image: url("/img/depth_bttn.png");
-    }
   }
-}
-
-#marketLoader {
-  z-index: 50;
-  background-color: rgba(0 0 0 / 50%);
-}
-
-#marketLoader > div {
-  width: 40px;
-  height: 40px;
-  font-size: 40px;
-}
 
-#chartResizer {
-  position: absolute;
-  bottom: 0;
-  height: 6px;
-  width: 100%;
-  z-index: 2;
-  cursor: ns-resize;
-}
+  .market-chart:hover > #durBttnBox,
+  .market-chart:hover > #epochLine {
+    display: block;
+  }
 
-.markettab {
-  background-color: transparent;
-  border-top-style: none;
-  border-bottom-style: none;
-  border-right: 1px solid black;
-  border-radius: 4px 4px 0 0;
-}
+  .chart-legend {
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+    height: 30px;
+    font-size: 14px;
+  }
 
-.markettab.selected {
-  background-color: #f9f9f9;
-}
+  #loaderMsg {
+    color: #777;
+  }
 
-.brdrleft {
-  border-left: 1px solid #6a6a6a;
-}
+  #registrationStatus {
+    .title {
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
 
-.brdrright {
-  border-right: 1px solid #6a6a6a;
-}
+    &.waiting {
+      .title {
+        color: #9b8c09;
+      }
+    }
 
-.market-bal {
-  border: 1px solid #6a6a6a;
-  border-radius: 3px;
-}
+    &.completed {
+      .title {
+        color: #5cba8b;
+      }
 
-.market-bal-lbl {
-  display: block;
-  position: absolute;
-  left: 10px;
-  top: -11px;
-  padding: 0 3px;
-  font-size: 16px;
-  font-family: "demi-sans", sans-serif;
-  background-color: $light_bg_1;
-}
+      #regStatusMessage {
+        display: none;
+      }
+    }
 
-#orders {
-  .ico-unlocked {
-    color: #1e7d11;
+    &.error {
+      .title {
+        color: red;
+      }
+    }
   }
-}
 
-.orders-left {
-  min-height: 350px;
-}
+  #verifyForm {
+    .echo-data span {
+      margin: 0 5px;
+    }
 
-.order-panel {
-  min-height: 500px;
-}
+    .red {
+      color: #f55a;
+    }
 
-#loaderMsg {
-  color: #777;
-}
+    .disclaimer {
+      text-align: justify;
+    }
 
-#registrationStatus {
-  .title {
-    font-weight: bold;
-    margin-bottom: 5px;
-  }
+    .header {
+      &.buygreen-bg {
+        background-color: #207a4699;
+      }
 
-  &.waiting {
-    .title {
-      color: #9b8c09;
+      &.sellred-bg {
+        background-color: #99302b99;
+      }
     }
-  }
 
-  &.completed {
-    .title {
-      color: #5cba8b;
-    }
+    button.selected {
+      &.buygreen-bg {
+        background-color: #207a4699;
+      }
 
-    #regStatusMessage {
-      display: none;
+      &.sellred-bg {
+        background-color: #99302b99;
+      }
     }
-  }
 
-  &.error {
-    .title {
-      color: red;
+    .loader {
+      height: 40px;
     }
-  }
-}
 
-#verifyForm {
-  .echo-data span {
-    margin: 0 5px;
-  }
+    .order-opt {
+      border: 1px solid #424242;
+      border-radius: 3px;
+      padding: 4px;
+      margin-top: 8px;
+      opacity: 0.7;
 
-  .red {
-    color: #f55a;
-  }
+      div.opt-check {
+        width: 15px;
+        height: 15px;
+        border-radius: 7.5px;
+        border: 2px solid #424242;
+        margin-top: 5px;
+        cursor: pointer;
+      }
 
-  .disclaimer {
-    text-align: justify;
-  }
+      .xy-range-input {
+        width: 35px;
+        font-size: 14px;
+        height: 16px;
+      }
+
+      .slider {
+        margin: 10px 10px 5px;
+        height: 2px;
+        background-color: grey;
+        position: relative;
+
+        .slider-handle {
+          position: absolute;
+          height: 20px;
+          width: 14px;
+          top: -9px;
+          border-radius: 7px;
+          background-color: #2cce9c;
+          border: 2px solid #424242;
+          cursor: pointer;
+        }
+      }
+
+      &:not(.selected) {
+        cursor: pointer;
+      }
+
+      &.selected {
+        opacity: 1;
+        background-color: #e8ebed;
 
-  .header {
-    &.buygreen {
-      background-color: #207a4699;
+        div.opt-check {
+          background-color: #2cce9c;
+        }
+      }
     }
 
-    &.sellred {
-      background-color: #99302b99;
+    #vUnlockPreorder {
+      .ico-locked {
+        font-size: 35px;
+      }
     }
   }
 
-  button.selected {
-    &.buygreen {
-      background-color: #207a4699;
+  #vDetailPane {
+    max-width: 425px;
+
+    .indent {
+      border-left: 2px solid #777a;
     }
 
-    &.sellred {
-      background-color: #99302b99;
+    table.fee-breakout {
+      margin: 5px 0;
+
+      td {
+        border: 1px solid #777a;
+        text-align: center;
+        padding: 2px 5px;
+      }
     }
   }
+}
 
-  .loader {
-    height: 40px;
-  }
+.market-stats-v1 {
+  display: flex;
+  margin: 0 5px;
+  gap: 15px;
 
-  .order-opt {
-    border: 1px solid #424242;
-    border-radius: 3px;
-    padding: 4px;
-    margin-top: 8px;
-    opacity: 0.7;
+  .data-point {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin-left: 20px;
+    font-size: 18px;
+    line-height: 1.25;
 
-    div.opt-check {
-      width: 15px;
-      height: 15px;
-      border-radius: 7.5px;
-      border: 2px solid #424242;
-      margin-top: 5px;
-      cursor: pointer;
+    span.label {
+      font-family: $demi-sans;
+      font-size: 15px;
     }
+  }
 
-    .xy-range-input {
-      width: 35px;
-      font-size: 14px;
-      height: 16px;
-    }
+  .twentyfour {
+    margin-left: 0;
+    border-left: 1px solid $light_border_color;
 
-    .slider {
-      margin: 10px 10px 5px;
-      height: 2px;
-      background-color: grey;
-      position: relative;
+    .data-point {
+      margin-left: 0;
 
-      .slider-handle {
-        position: absolute;
-        height: 20px;
-        width: 14px;
-        top: -9px;
-        border-radius: 7px;
-        background-color: #2cce9c;
-        border: 2px solid #424242;
-        cursor: pointer;
+      & > * {
+        padding-right: 20px;
       }
-    }
 
-    &:not(.selected) {
-      cursor: pointer;
-    }
+      span.label {
+        width: 100%;
+        border-bottom: 1px solid $light_border_color;
+      }
 
-    &.selected {
-      opacity: 1;
-      background-color: #e8ebed;
+      &:first-child > span.label {
+        padding-right: 5px;
+        padding-left: 5px;
+      }
 
-      div.opt-check {
-        background-color: #2cce9c;
+      &:nth-child(3),
+      &:nth-child(4) {
+        align-items: flex-end;
+
+        span.label {
+          text-align: right;
+        }
+      }
+
+      &:nth-child(4) > * {
+        padding-right: 0;
       }
     }
   }
 
-  #vUnlockPreorder {
-    .ico-locked {
-      font-size: 35px;
-    }
+  img {
+    width: 30px;
+    height: 30px;
+
+    // &:nth-child(1) {
+    //   position: relative;
+    //   left: 5px;
+    // }
   }
 }
 
-div.numorders {
-  background-color: #c5c5e6;
-  border-radius: 3px;
-  line-height: 1;
-  padding: 1px;
-  font-size: 0.9em;
+#headerSpace .market-stats-v1 {
+  display: none;
 }
 
-#liveTable {
-  th,
-  td {
-    padding: 2px 10px;
-    white-space: nowrap;
+#main .market-stats-v1 {
+  border-bottom: 1px solid $light_border_color;
+}
 
-    &.last {
-      flex: 1;
-      min-width: 57px;
-    }
-  }
+#recentMatchesBox {
+  @extend .stylish-overflow;
+
+  max-height: 350px;
+}
 
+#recentMatchesTable {
   th {
     align-items: center;
 
@@ -691,67 +710,123 @@ div.numorders {
   tr {
     cursor: pointer;
   }
+}
 
-  .ico-cross {
-    font-size: 12px;
-    cursor: pointer;
+@include media-breakpoint-up(xl) {
+  #main .market-stats-v1 {
+    display: none;
+    border-top: none;
   }
 
-  .ico-rocket {
-    font-size: 12px;
-    cursor: pointer;
+  #headerSpace .market-stats-v1 {
+    display: flex;
   }
-}
 
-#recentMatchesTable {
-  th {
-    align-items: center;
+  div[data-handler=markets] #leftColumnV1 {
+    position: relative;
 
-    &:hover {
-      opacity: 0.7;
+    &.default {
+      display: flex;
     }
+  }
+}
 
-    .ico-arrowdown {
-      display: inline-block;
-      visibility: hidden;
-      vertical-align: middle;
-      font-size: 10px;
-      margin-left: 5px;
+@include media-breakpoint-up(lg) {
+  div[data-handler=markets] {
+    #mainContent {
+      overflow: hidden;
+      flex-direction: row;
+      align-items: stretch;
+      row-gap: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      & > div:nth-child(n) { // need nth-child for specificity
+        min-height: auto;
+      }
+
+      & > div:first-child { // order book
+        order: 1;
+      }
+
+      & > div:nth-child(2) { // charts
+        width: auto;
+        order: 2;
+      }
+
+      & > div:last-child { // order form, wallets, user orders
+        order: 3;
+      }
     }
 
-    &.sorted-dsc {
-      .ico-arrowdown {
-        visibility: visible;
+    .ordertable-wrap {
+      height: calc(50% - 15px);
+      display: flex;
+
+      &.reversible {
+        flex-direction: column-reverse;
+      }
+
+      &:first-child {
+        border-bottom: 1px solid $light_border_color;
+      }
+
+      &:last-child {
+        border-top: 1px solid $light_border_color;
+      }
+
+      tbody {
+        display: flex;
+      }
+
+      tbody#sellRows {
+        flex-direction: column-reverse;
+        border-top: none;
+      }
+
+      tbody#buyRows {
+        flex-direction: column;
       }
     }
 
-    &.sorted-asc {
-      .ico-arrowdown {
-        visibility: visible;
-        transform: rotate(180deg);
+    .orderbook {
+      border-left: none;
+      border-top: none;
+      width: auto;
+
+      & > div:first-child { // sell orders
+        order: 1;
+      }
+
+      & > div:nth-child(2) { // header
+        order: 2;
+      }
+
+      & > div:last-child { // buy orders
+        order: 3;
       }
     }
-  }
 
-  tr {
-    cursor: pointer;
-  }
-}
+    .order-panel {
+      width: 375px;
 
-#vDetailPane {
-  max-width: 425px;
+      & > div {
+        @include fill-abs;
+        @include stylish-overflow;
 
-  .indent {
-    border-left: 2px solid #777a;
+        height: 100%;
+        overflow-x: hidden;
+        border-style: none none none solid;
+      }
+    }
   }
 
-  table.fee-breakout {
-    margin: 5px 0;
+  table.ordertable {
+    width: auto;
+  }
 
-    td {
-      border: 1px solid #777a;
-      text-align: center;
-      padding: 2px 5px;
-    }
+  #recentMatchesBox {
+    overflow: visible;
+    max-height: none;
   }
 }
diff --git a/client/webserver/site/src/css/market_dark.scss b/client/webserver/site/src/css/market_dark.scss
index 21bef59e6a..8f38b625c5 100644
--- a/client/webserver/site/src/css/market_dark.scss
+++ b/client/webserver/site/src/css/market_dark.scss
@@ -1,154 +1,208 @@
 body.dark {
-  input[type=number] {
-    border-color: #444;
-  }
+  div[data-handler=markets] {
+    input[type=number] {
+      border-color: #444;
+    }
 
-  table.ordertable {
-    color: #a1a1a1;
+    table.ordertable {
+      color: #a1a1a1;
 
-    tr {
-      border-bottom: 1px solid #222;
+      tbody > tr:hover,
+      tbody > tr.hover {
+        background-color: #1d2936;
+      }
     }
 
-    tbody > tr:hover,
-    tbody > tr.hover {
-      background-color: #1d2936;
+    .numorders {
+      background-color: #141488;
     }
-  }
 
-  div.marketorders {
-    background-color: #080808;
+    .markettab.selected {
+      background-color: #fff1;
+    }
 
-    table.ordertable tr {
-      border-bottom: 1px solid #131313;
+    .market-bal {
+      border: 1px solid $dark_border_color;
+      border-radius: 3px;
     }
-  }
 
-  div.numorders {
-    background-color: #141488;
-  }
+    .brdrleft {
+      border-left: 1px solid $dark_border_color;
+    }
 
-  div.marketlist {
-    background-color: #1c1c1f;
-    border-right-color: black;
+    .brdrright {
+      border-right: 1px solid $dark_border_color;
+    }
 
-    .grey {
-      color: #999;
+    .brdrtop {
+      border-top: 1px solid $dark_border_color;
     }
-  }
 
-  .marketrow {
-    background-color: #34383e;
+    .brdrbottom {
+      border-bottom: 1px solid $dark_border_color;
+    }
 
-    &.selected {
-      border: 1px solid #7a97;
+    .chart-legend {
+      color: #999;
     }
-  }
 
-  label.market-search {
-    background-color: black;
-  }
+    .ordertable-wrap {
+      &:first-child {
+        border-bottom: 1px solid $dark_border_color;
+      }
 
-  .markettab.selected,
-  .market-bal-lbl {
-    background-color: $dark_bg_1;
-  }
+      &:last-child {
+        border-top: 1px solid $dark_border_color;
+      }
 
-  .market-header {
-    background-color: $dark_bg_3;
-    color: inherit;
+      tbody#sellRows {
+        border-top: 1px solid $dark_border_color;
+      }
+    }
 
-    button {
-      color: #bbb;
+    .orderbook {
+      border-right: 1px solid $dark_border_color;
+      border-left: 1px solid $dark_border_color;
+      border-top: 1px solid $dark_border_color;
     }
 
-    button:hover,
-    button.selected {
-      color: #f2fffd;
+    .order-panel > div {
+      border: 1px solid $dark_border_color;
     }
-  }
 
-  .market-bal {
-    border: 1px solid #3a3a3a;
-    border-radius: 3px;
-  }
+    .user-order {
+      border: 1px solid $dark_border_color;
 
-  .brdrleft {
-    border-left: 1px solid black;
-  }
+      .order-details {
+        border-color: $dark_border_color;
+      }
 
-  .brdrright {
-    border-right: 1px solid black;
-  }
+      .user-order-header {
+        .side-indicator {
+          &.buy {
+            background-color: $buycolor_dark;
+          }
 
-  #marketChart {
-    background-color: #131313;
-    border-bottom-color: black;
+          &.sell {
+            background-color: $buycolor_dark;
+          }
+        }
 
-    .chart-legend {
-      color: #999;
+        .active-indicator.active {
+          background-color: $buycolor_dark;
+        }
+      }
     }
-  }
 
-  #orderForm {
-    color: #a1a1a1;
+    #orderForm {
+      color: #a1a1a1;
 
-    button {
-      color: #aaa;
-    }
-
-    button:hover,
-    button.selected {
-      color: #eee;
-    }
+      button {
+        color: #aaa;
+      }
 
-    button.submit {
-      background-color: #0b5831;
-      color: #eee;
-    }
+      button:hover,
+      button.selected {
+        color: #eee;
+      }
 
-    button.selected,
-    button.submit {
-      &.buygreen {
-        background-color: #05a35a99;
+      button.submit {
+        background-color: #0b5831;
+        color: #eee;
       }
 
-      &.sellred {
-        background-color: #ae333399;
+      button.selected,
+      button.submit {
+        &.buygreen-bg {
+          background-color: #29bb7799;
+        }
+
+        &.sellred-bg {
+          background-color: #e95e5e99;
+        }
       }
     }
-  }
 
-  #verifyForm {
-    .header {
-      &.buygreen {
-        background-color: #05a35a99;
+    #verifyForm {
+      .header {
+        &.buygreen-bg {
+          background-color: #29bb7799;
+        }
+
+        &.sellred-bg {
+          background-color: #e95e5e99;
+        }
       }
 
-      &.sellred {
-        background-color: #ae333399;
+      button.selected {
+        &.buygreen-bg {
+          background-color: #29bb7799;
+        }
+
+        &.sellred-bg {
+          background-color: #e95e5e99;
+        }
       }
-    }
 
-    button.selected {
-      &.buygreen {
-        background-color: #05a35a99;
+      .order-opt.selected {
+        background-color: #222e38;
       }
+    }
 
-      &.sellred {
-        background-color: #ae333399;
+    #leftColumnV1 {
+      border-color: $dark_border_color;
+      background-color: $dark_body_bg;
+
+      #searchBoxV1 {
+        border-color: $dark_border_color;
+
+        #leftHider {
+          border-color: $dark_border_color;
+        }
       }
     }
+  }
 
-    .order-opt.selected {
-      background-color: #222e38;
+  .twentyfour {
+    border-left: 1px solid $dark_border_color;
+
+    .data-point span.label {
+      border-bottom: 1px solid $dark_border_color;
+    }
+  }
+
+  #main .market-stats-v1 {
+    border-bottom: 1px solid $dark_border_color;
+  }
+
+  #durBttnBox,
+  #epochLine {
+    background-color: $dark_body_bg;
+
+    .candle-dur-bttn {
+      background-color: $dark_body_bg;
     }
   }
+}
+
+@include media-breakpoint-up(lg) {
+  body.dark div[data-handler=markets] {
+    .orderbook {
+      border-left: none;
+      border-top: none;
+    }
+
+    .ordertable-wrap {
+      &:first-child {
+        border-bottom: 1px solid $dark_border_color;
+      }
+
+      &:last-child {
+        border-top: 1px solid $dark_border_color;
+      }
 
-  #liveTable {
-    th {
-      .ico-arrowdown {
-        color: #a1a1a1;
+      tbody#sellRows {
+        border-top: none;
       }
     }
   }
diff --git a/client/webserver/site/src/css/wallets.scss b/client/webserver/site/src/css/wallets.scss
index 76a854266f..6fc0384016 100644
--- a/client/webserver/site/src/css/wallets.scss
+++ b/client/webserver/site/src/css/wallets.scss
@@ -1,8 +1,4 @@
 .walletspage {
-  .grey {
-    color: #999;
-  }
-
   .ico-unlocked {
     color: #1e7d11;
   }
@@ -23,15 +19,6 @@
     min-width: 90%;
   }
 
-  .bg1 {
-    background-color: #0e0c1b;
-  }
-
-  .border-top-lt-xxl,
-  .border-top-lt-lg {
-    border-top: 1px solid #7777;
-  }
-
   #depositAddress {
     user-select: all;
   }
@@ -52,12 +39,9 @@
     margin-right: 5px;
   }
 
-  #copyAlert {
-    margin-left: 12px;
-    position: absolute;
-  }
-
   #assetSelect {
+    border-right: 1px solid $dark-border-color;
+
     .icon-select {
       padding: 15px;
       cursor: pointer;
@@ -185,6 +169,15 @@
     width: 100px;
     height: 100px;
   }
+
+  #marketsOverviewBox {
+    border-left: 1px solid $light_border_color;
+    border-bottom: 1px solid $light_border_color;
+  }
+
+  #walletDetailsBox {
+    border-bottom: $light_border_color;
+  }
 }
 
 @include media-breakpoint-up(xxl) {
@@ -193,13 +186,13 @@
   }
 
   .walletspage {
-    .border-top-lt-xxl {
-      border-top: none;
-    }
-
     .flex-nowrap-xxl {
       flex-wrap: nowrap;
     }
+
+    div#orderActivityBox {
+      border-top: none;
+    }
   }
 }
 
@@ -213,12 +206,17 @@
   }
 
   .walletspage {
-    .bg1-lg {
-      background-color: #0e0c1b;
+    #orderActivityBox {
+      border-top: 1px solid $dark-border-color;
     }
 
-    .border-top-lt-lg {
-      border-top: none;
+    #marketsOverviewBox {
+      border-right: 1px solid $dark-border-color;
+      border-bottom: none;
+    }
+
+    #walletDetailsBox {
+      border-bottom: none;
     }
   }
 
diff --git a/client/webserver/site/src/css/wallets_dark.scss b/client/webserver/site/src/css/wallets_dark.scss
index 778d7792dc..97b6d8df8d 100644
--- a/client/webserver/site/src/css/wallets_dark.scss
+++ b/client/webserver/site/src/css/wallets_dark.scss
@@ -1,16 +1,12 @@
-body.dark .walletspage {
-  table.wallets {
-    tbody tr {
-      background-color: $dark_bg_2;
+body.dark {
+  .walletspage {
+    #marketsOverviewBox {
+      border-left: 1px solid $dark_border_color;
+      border-bottom: 1px solid $dark_border_color;
     }
 
-    button {
-      background-color: black;
-      color: $font-color-dark;
-    }
-
-    td {
-      border-color: #333;
+    #walletDetailsBox {
+      border-bottom: $dark_border_color;
     }
   }
 }
diff --git a/client/webserver/site/src/html/bodybuilder.tmpl b/client/webserver/site/src/html/bodybuilder.tmpl
index 8a9239b0fd..29d6132304 100644
--- a/client/webserver/site/src/html/bodybuilder.tmpl
+++ b/client/webserver/site/src/html/bodybuilder.tmpl
@@ -8,7 +8,7 @@
   <link rel="icon" href="/img/favicon.png?v=AK4XS4">
   <meta name="description" content="Decred DEX Client Web Portal">
   <title>{{.Title}}</title>
-  <link href="/css/style.css?v=RQIW8193" rel="stylesheet">
+  <link href="/css/style.css?v=GHTDFVH710" rel="stylesheet">
 </head>
 <body {{if .UserInfo.DarkMode}} class="dark"{{end}}>
   <div class="popup-notes" id="popupNotes">
@@ -25,24 +25,25 @@
 <header id=header class="maintop">
   {{$authed := .UserInfo.Authed}}
   {{$marketsReady := and $authed (gt (len .UserInfo.Exchanges) 0)}}
-  <a href="/" class="logo d-none d-md-block"></a>
+  <a href="/" class="logo-icon d-none d-md-block"></a>
   <a href="/" class="logo-icon d-block d-md-none"></a>
-  <div class="mainlinks fs18 offwhite">
+  <div id="headerSpace"></div>
+  <div class="mainlinks fs18 offwhite pe-3">
 
-    <a href="/markets" class="demi hoverbright{{if not $marketsReady}} d-hide{{end}}" id="marketsMenuEntry">[[[Markets]]]</a>
+    <a href="/markets" class="demi hoverbg{{if not $marketsReady}} d-hide{{end}}" id="marketsMenuEntry">[[[Markets]]]</a>
 
-    <a href="/wallets" class="demi hoverbright{{if not $authed}} d-hide{{end}}" id="walletsMenuEntry">[[[Wallets]]]</a>
+    <a href="/wallets" class="demi hoverbg{{if not $authed}} d-hide{{end}}" id="walletsMenuEntry">[[[Wallets]]]</a>
 
-    <div class="d-inline-block position-relative{{if not $authed}} d-hide{{end}}" id="noteMenuEntry">
-      <span class="ico-bell fs20 hoverbright" id="noteBell"></span>
+    <div class="d-inline-block position-relative hoverbg{{if not $authed}} d-hide{{end}}" id="noteBell">
+      <span class="ico-bell fs20  p-2"></span>
       <div id="noteIndicator" class="d-hide"></div>
     </div>
 
-    <div class="d-inline-block position-relative{{if not $authed}} d-hide{{end}}" id="profileMenuEntry">
-      <span class="ico-profile fs20 hoverbright" id="profileIcon"></span>
+    <div class="d-inline-block position-relative hoverbg{{if not $authed}} d-hide{{end}}" id="profileIcon">
+      <span class="ico-profile p-2 fs20"></span>
     </div>
 
-    <a href="/settings" class="ico-settings hoverbright fs24"></a>
+    <a href="/settings" class="ico-settings hoverbg fs24"></a>
 
   </div>
   <div id="loader" class="fill-abs flex-center d-hide">
@@ -51,7 +52,7 @@
 
   <div id="noteBox" class="d-hide">
     <div class="icon fs20 ico-bell p-1" id="innerNoteIcon"></div>
-    <div class="header d-flex align-items-center justify-content-start fs17 demi hoverbright px-3 py-2">
+    <div class="header d-flex align-items-center justify-content-start fs17 demi hoverbg px-3 py-2">
       <div id="noteCat" class="active">[[[Notifications]]]</div>
       <div id="pokeCat">[[[Recent Activity]]]</div>
     </div>
@@ -78,15 +79,15 @@
 
   <div id="profileBox" class="d-hide">
     <div class="icon fs20 ico-profile p-1" id="innerProfileIcon"></div>
-    <span class="demi hoverbright pointer" id="profileSignout">[[[Sign Out]]]</span>
-    <a href="/orders" class="demi hoverbright plainlink pt-2">[[[Order History]]]</a>
+    <span class="demi hoverbg pointer" id="profileSignout">[[[Sign Out]]]</span>
+    <a href="/orders" class="demi hoverbg plainlink pt-2">[[[Order History]]]</a>
   </div>
 
 </header>
 {{end}}
 
 {{define "bottom"}}
-<script src="/js/entry.js?v=RQIW8193"></script>
+<script src="/js/entry.js?v=GHTDFVH710"></script>
 </body>
 </html>
 {{end}}
diff --git a/client/webserver/site/src/html/forms.tmpl b/client/webserver/site/src/html/forms.tmpl
index 81be4c2160..951f773831 100644
--- a/client/webserver/site/src/html/forms.tmpl
+++ b/client/webserver/site/src/html/forms.tmpl
@@ -111,6 +111,25 @@
 <div class="fs15 pt-3 text-center d-hide errcolor text-break" id="unlockErr"></div>
 {{end}}
 
+{{define "depositAddress"}}
+<div class="form-closer hoverbg"><span class="ico-cross"></span></div>
+<div class="px-2 py-1 mb-2 text-center position-relative fs22 sans-light">
+  [[[Deposit]]]
+  <img id="depositLogo" class="micro-icon mx-1">
+  <span id="depositName"></span>
+</div>
+<img class="mb-3" id="qrcode" />
+<div class="mono bg0 p-2 fs15">
+  <span id="depositAddress"></span>
+  <span id="copyAddressBtn" class="ico-copy mt-2 ml-2 fs18"></span>
+  <span id="copyAlert" class="d-hide">[[[copied]]]</span>
+</div>
+<div class="my-3">
+  <button id="newDepAddrBttn" type="button" class=" px-2 justify-content-center fs15 bg2 selected">[[[New Deposit Address]]]</button>
+</div>
+<div class="fs15 pt-3 text-center d-hide errcolor text-break" id="depositErr"></div>
+{{end}}
+
 {{define "dexAddrForm"}}
 <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
 <div data-tmpl="addDexHdr" class="flex-center fs24 sans-light"><span class="ico-plus fs12 me-2"></span> [[[Add a DEX]]]</div>
diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
index e18e4407d6..de95f14257 100644
--- a/client/webserver/site/src/html/markets.tmpl
+++ b/client/webserver/site/src/html/markets.tmpl
@@ -10,445 +10,433 @@
 
 {{define "markets"}}
 {{template "top" .}}
-<div id="main" data-handler="markets" class="main clear m-0 flex-nowrap">
-
+<div id="main" data-handler="markets" class="main m-0 flex-nowrap v1">
   {{- /* MARKET LIST */ -}}
-  <div class="marketlist">
+  <div id="leftColumnV1" class="flex-column align-items-end v1 default">
+    <div class="h-100 d-flex flex-column align-items-stretch">
 
-    {{- /* SEARCH INPUT */ -}}
-    <label class="market-search">
-      <div><span class="ico-search px-2"></span></div>
-      <div class="flex-grow-1 position-relative">
-        <input type="text" id="marketSearch" class="px-1">
-      </div>
-    </label>
-
-    {{- /* LIST OF EXCHANGE SECTIONS WITH MARKETS */ -}}
-    <div id="marketList">
-      <div data-tmpl="xc" class="xc">
-        <div class="header d-flex justify-content-start align-items-center ps-1 fs14 grey">
-          <span class="ico-disconnected" title="disconnected" data-tmpl="disconnected"></span>
-          <span data-tmpl="header"></span>
+      <div class="d-flex align-items-stretch" id="searchBoxV1">
+        <div class="flex-grow-1 p-1 position-relative">
+          <input type="text" id="marketSearchV1" spellcheck="false">
+          <div class="ico-search fs22"></div>
         </div>
-        
-        <div data-tmpl="mkts">
-          <div class="marketrow" data-tmpl="mktrow">
-            <div>
-              <img class="micro-icon me-1" data-tmpl="baseIcon">
-              <img class="micro-icon me-1" data-tmpl="quoteIcon">
-              <div class="ps-1 pe-2 flex-grow-1">
+        <div id="leftHider" class="flex-center pointer hoverbg">
+          <span class="ico-arrowback fs24">
+        </div>
+      </div>
+
+      <div class="flex-grow-1 overflow-y-hidden">
+        <div id="marketListV1" class="stylish-overflow hoveronly overflow-x-hidden">
+          <div id="marketTmplV1" class="market-tmpl-v1 d-flex align-items-stretch p-2 my-1 pointer hoverbg">
+            <div class="flex-center">
+              <img data-tmpl="baseIcon">
+              <img data-tmpl="quoteIcon" class="ms-1">
+              <span class="disconnected ico-disconnected d-hide" id="disconnectedIcon"></span>
+            </div>
+            <div class="d-flex flex-column pe-4 ps-2 flex-grow-1">
+              <span class="fs17 demi">
                 <span data-tmpl="baseSymbol"></span>-<span data-tmpl="quoteSymbol"></span>
-              </div>
-              <span data-tmpl="pctChange" class="upgreen fs14 demi d-hide pct-change"></span>
+              </span>
+              <span class="fs15 grey" data-tmpl="baseName"></span>
             </div>
-            <div class="justify-content-between fs12 grey d-hide" data-tmpl="bottomRow">
-              <span data-tmpl="assetName">Decred</span>
-              <span data-tmpl="price">0.00296</span>
+            <div class="d-flex flex-column align-items-end ps-3">
+              <span data-tmpl="price" class="fs17">-</span>
+              <span data-tmpl="change" class="fs15">-</span>
             </div>
-            
           </div>
         </div>
       </div>
     </div>
-
   </div>
 
-  {{- /* RIGHT COLUMN */ -}}
-  <div id="rightSide" class="d-flex flex-column flex-grow-1 h-100 overflow-y-auto overflow-x-hidden">
-
-    {{- /* CHART */ -}}
+  {{- /* MAIN CONTENT */ -}}
+  <div class="flex-grow-1 position-relative v1">
+    <div class="stylish-overflow h-100 w-100 overflow-x-hidden d-flex flex-column align-items-stretch">
 
-    <div id="marketChart" class="w-100">
-      <div id="chartErrMsg" class="fs15 pt-3 text-center d-hide errcolor text-break"></div>
-      <div id="marketLoader" class="fill-abs flex-center">
-        <div class="ico-spinner spinner"></div>
-
-      </div>
-      <div class="chart-legend" id="chartLegend">
-        <button class="chart-selector" id="candlestickBttn"></button>
-        <button class="chart-selector d-hide" id="depthBttn"></button>
-        <div class="d-flex align-items-center" id="epochLine"><div class="epoch-line"></div> [[[epoch]]]</div>
-        <div class="flex-grow-1">
-          <div id="hoverData" class="d-flex align-items-center d-hide">
-            <span class="category-spacer text-center text-nowrap"></span>
-            <span class="ico-target fs11 me-1"></span>
-            <span id="depthHoverData">
-              [[[price]]]: <span id="hoverPrice"></span>,
-              [[[volume]]]: <span id="hoverVolume"></span>
-            </span>
-            <span class="d-hide" id="candleHoverData">
-              S: <span id="candleStart"></span>,
-              E: <span id="candleEnd"></span>,
-              L: <span id="candleLow"></span>,
-              H: <span id="candleHigh"></span>,
-              V: <span id="candleVol"></span>
-            </span>
+      {{- /* MARKET STATS - SMALL SCREENS */ -}}
+      <div id="marketStatsV1" class="market-stats-v1 align-items-center justify-content-center p-2 flex-wrap">
+        <div class="flex-center me-2 pointer hoverbg" data-tmpl="marketSelect">
+          <div class="flex-center">
+            <img data-tmpl="baseIcon"><img data-tmpl="quoteIcon" class="ms-1">
           </div>
+          <div class="flex-center fs24 demi ms-2">
+            <span data-tmpl="baseSymbol"></span>-<span data-tmpl="quoteSymbol"></span>
+          </div>
+          <span class="ico-arrowdown fs8 grey ms-1"></span>
         </div>
-        <div id="depthSummary" class="d-flex align-items-center">
-          <span>[[[sells]]]: <span id="sellBookedBase"></span> <span data-unit="base"></span>, <span id="sellBookedQuote"></span> <span data-unit="quote"></span></span>
-          <span class="category-spacer"></span>
-          <span class="me-2">[[[buys]]]: <span id="buyBookedBase"></span> <span data-unit="base"></span>, <span id="buyBookedQuote"></span> <span data-unit="quote"></span></span>
+  
+        <div class="data-point">
+          <span class="label grey">Price</span>
+          <div class="flex-center me-2">
+            <span data-tmpl="price"></span>
+            <div data-tmpl="change" class="ms-2"></div>
+          </div>
+        </div>
+
+        <div class="twentyfour flex-center align-items-stretch">
+          <div class="data-point">
+            <span class="label grey">24 Hr.</span>
+          </div>
+    
+          <div class="data-point">
+            <span class="label grey">Volume</span>
+            <div class="flex-center me-2">
+              <div data-tmpl="volume">-</div>
+            </div>
+          </div>
+    
+          <div class="data-point">
+            <span class="label grey">High</span>
+            <div class="flex-center ms-2">
+              <div data-tmpl="high">-</div>
+            </div>
+          </div>
+    
+          <div class="data-point">
+            <span class="label grey">Low</span>
+            <div class="flex-center ms-2">
+              <div data-tmpl="low">-</div>
+            </div>
+          </div>
         </div>
-        <div class="d-flex flex-nowrap me-2 d-hide" id="durBttnBox"><button class="candle-dur-bttn" id="durBttnTemplate"></button></div>
       </div>
-      <div id="chartResizer"></div>
-    </div>
 
-    {{- /* ORDERS */ -}}
-    <div id="orders" class="w-100 d-flex flex-grow-1 flex-wrap bg1">
+      <div class="flex-grow-1 position-relative">
+        <div id="mainContent">
 
-      <div class="orders-left col-24 col-xxl-14 p-0">
-        <div class="row m-0 h-100">
+          {{- /* ORDER BOOK */ -}}
+          <div class="d-flex flex-column orderbook">
+            <div class="stylish-overflow hoveronly overflow-x-hidden flex-grow-1 ordertable-wrap reversible">
 
-          {{- /* BUY ORDER LIST */ -}}
-          <div class="marketorders order-lg-1 order-2 col-lg-7 p-0 bg1 d-flex flex-column">
-            <div class="market-header text-center fs14 py-1">[[[Buy Orders]]]</div>
-            <div class="brdrleft flex-grow-1 bg1 position-relative">
-              <div class="market-orders-table-container stylish-overflow">
-                <table class="ordertable">
-                  {{block "thead" .}}
-                  <thead>
-                    <tr>
-                      <th class="text-start ps-2">[[[Quantity]]]</th>
-                      <th class="text-end pe-2">[[[Rate]]]</th>
-                      <th class="text-end pe-2">[[[Epoch]]]</th>
-                    </tr>
-                  </thead>
-                  {{end}}
-                  <tbody id="buyRows">
-                    {{- /* This row is used by the app as a template. */ -}}
-                    <tr id="rowTemplate">
-                      <td class="ps-2">
-                        <div class="d-flex justify-content-start align-items-center">
-                          <div data-tmpl="qty">-</div>
-                          <div class="numorders text-center ms-2" data-tmpl="numorders">-</div>
-                        </div>
-                      </td>
-                      <td class="text-end pe-2" data-tmpl="rate">-</td>
-                      <td class="text-end pe-3" data-tmpl="epoch"></td>
-                    </tr>
-                  </tbody>
-                </table>
+              {{- /* SELL ORDER LIST */ -}}
+              <table class="ordertable">
+                <tbody id="sellRows"></tbody>
+              </table>
+            </div>
+
+            <div class="ordertable-header flex-center fs15">
+              <span class="flex-grow-1">Order Book</span>
+              <span class="flex-center">
+                <span id="obUp" class="ico-arrowup buycolor fs11"></span>
+                <span id="obPrice" class="buycolor ms-1">0.001568</span>
+              </span>
+            </div>
+
+            <div class="stylish-overflow hoveronly overflow-x-hidden flex-grow-1 ordertable-wrap">
+
+              {{- /* BUY ORDER LIST */ -}}
+              <table class="ordertable buys">
+                <tbody id="buyRows">
+                  {{- /* This row is used by the app as a template. */ -}}
+                  <tr id="rowTemplate">
+                    <td class="ps-2">
+                      <div class="d-flex justify-content-start align-items-center">
+                        <div data-tmpl="qty">-</div>
+                        <div class="numorders text-center ms-2" data-tmpl="numorders">-</div>
+                      </div>
+                    </td>
+                    <td class="text-end pe-2" data-tmpl="rate">-</td>
+                    <td class="text-end pe-3" data-tmpl="epoch"></td>
+                  </tr>
+                </tbody>
+              </table> {{- /* END BUY ORDER LIST */ -}}
+            </div>
+          </div> {{- /* END ORDER BOOK */ -}}
+
+          {{- /* CHARTS */ -}}
+          <div class="flex-grow-1 position-relative">
+            <div class="fill-abs d-flex flex-column align-items-stretch">
+              <div id="candlesChart" class="market-chart">
+                <div id="durBttnBox"><button class="candle-dur-bttn" id="durBttnTemplate"></button></div>
+              </div>
+
+              <div class="chart-legend">
+                <div id="chartErrMsg" class="p-2 flex-center errcolor w-100"></div>
+                <div class="flex-grow-1">
+                  <div id="hoverData" class="d-flex align-items-center d-hide">
+                    <span class="ico-target fs11 me-1"></span>
+                    <span id="depthHoverData">
+                      [[[price]]]: <span id="hoverPrice"></span>,
+                      [[[volume]]]: <span id="hoverVolume"></span>
+                    </span>
+                    <span class="d-hide" id="candleHoverData">
+                      S: <span id="candleStart"></span>,
+                      E: <span id="candleEnd"></span>,
+                      L: <span id="candleLow"></span>,
+                      H: <span id="candleHigh"></span>,
+                      V: <span id="candleVol"></span>
+                    </span>
+                  </div>
+                </div>
+
+                <div id="depthSummary" class="d-flex align-items-center d-hide">
+                  <span>[[[sells]]]: <span id="sellBookedBase"></span> <span data-unit="base"></span>, <span id="sellBookedQuote"></span> <span data-unit="quote"></span></span>
+                  |
+                  <span class="me-2">[[[buys]]]: <span id="buyBookedBase"></span> <span data-unit="base"></span>, <span id="buyBookedQuote"></span> <span data-unit="quote"></span></span>
+                </div>
+              </div>
+
+              <div id="depthChart" class="market-chart">
+                <div id="epochLine" class="d-hide"><div class="epoch-line"></div> [[[epoch]]]</div>
               </div>
             </div>
           </div>
 
-          {{- /* ORDER PANEL */ -}}
-          <div class="col-lg-10 order-1 order-lg-2 order-panel p-0 brdrleft brdrright d-flex flex-column">
-            <div class="market-header fs14 d-flex justify-content-start ps-4 align-items-stretch">
-              <button id="limitBttn" type="button" class="flex-center px-3 py-0 markettab brdrleft selected">[[[Limit Order]]]</button>
-              <button id="marketBttn" type="button" class="flex-center px-3 py-0 markettab brdrleft brdrright">[[[Market Order]]]</button>
-            </div>
+          {{- /* ORDER FORM */ -}}
+          <div class="order-panel pb-3 position-relative">
+            <div class="d-flex flex-column align-items-stretch">
 
-            <div class="flex-grow-1 position-relative">
-              <div class="fill-abs px-4 stylish-overflow">
+              {{- /* ORDER TYPE BUTTONS */ -}}
+              <div id="orderTypeBttns" class="fs14 d-flex justify-content-start align-items-stretch d-hide">
+                <button id="limitBttn" type="button" class="flex-center px-3 py-0 markettab brdrbottom selected">[[[Limit Order]]]</button>
+                <button id="marketBttn" type="button" class="flex-center px-3 py-0 markettab brdrbottom brdrleft brdrright">[[[Market Order]]]</button>
+              </div>
 
-                <div class="fs15 pt-3 text-center d-hide" id="loaderMsg"></div>
+              <div class="fs15 pt-3 text-center d-hide" id="loaderMsg"></div>
 
-                {{- /* REGISTRATION STATUS */ -}}
-                <div class="d-hide p-2 mt-2" id="registrationStatus">
-                  <div class="p-0 w-100">
-                    <div class="d-flex flex-column justify-content-center align-items-center">
-                      <span id="regStatusTitle" class="title"></span>
-                      <p id="regStatusMessage">[[[reg_status_msg]]]
-                      </p>
-                      <span id="regStatusConfsDisplay"></span>
-                    </div>
+              {{- /* REGISTRATION STATUS */ -}}
+              <div class="d-hide p-2 mt-2" id="registrationStatus">
+                <div class="p-0 w-100">
+                  <div class="d-flex flex-column justify-content-center align-items-center">
+                    <span id="regStatusTitle" class="title"></span>
+                    <p id="regStatusMessage">[[[reg_status_msg]]]
+                    </p>
+                    <span id="regStatusConfsDisplay"></span>
                   </div>
                 </div>
+              </div>
 
-                {{- /* ORDER FORM */ -}}
-                <form id="orderForm" class="bg1">
-                  <div class="p-0 w-100">
-
-                    {{- /* BUY - SELL SELECTOR */ -}}
-                    <div class="d-flex justify-content-start pt-4 pb-2 fs14">
-                      <button id="buyBttn" type="button" class="bg2 buygreen selected">
-                        [[[Buy]]]
-                        <span data-unit="base"></span>
-                      </button>
-                      <button id="sellBttn" type="button" class="bg2 sellred ms-2">
-                        [[[Sell]]]
-                        <span data-unit="base"></span>
-                      </button>
-                      <span></span>
-                    </div>
+              {{- /* ORDER FORM */ -}}
+              <form id="orderForm" class="p-3 d-hide">
+                <div class="p-0 w-100">
+
+                  {{- /* BUY - SELL SELECTOR */ -}}
+                  <div class="d-flex justify-content-start pb-2 fs14">
+                    <button id="buyBttn" type="button" class="buygreen-bg selected">
+                      [[[Buy]]]
+                      <span data-unit="base"></span>
+                    </button>
+                    <button id="sellBttn" type="button" class="sellred-bg ms-2">
+                      [[[Sell]]]
+                      <span data-unit="base"></span>
+                    </button>
+                    <span></span>
+                  </div>
 
-                    {{- /* MARKET CONFIG */ -}}
-                    <div class="d-flex justify-content-between my-2 fs14">
-                      <div>
-                        [[[Lot Size]]]:
-                        <span id="lotSize"></span>
-                        <span data-unit="base"></span>
-                      </div>
-                      <div>
-                        [[[Rate Step]]]:
-                        <span id="rateStep"></span>
-                        <span data-unit="quote"></span>
-                      </div>
+                  {{- /* MARKET CONFIG */ -}}
+                  <div class="d-flex justify-content-between my-2 fs14">
+                    <div>
+                      [[[Lot Size]]]:
+                      <span id="lotSize"></span>
+                      <span data-unit="base"></span>
                     </div>
-                    <div class="my-2 fs14 h21" id="maxBox">
-                      <div id="maxOrd" class="d-hide position-relative pointer">
-                        <span id="maxLotBox" class="d-hide">
-                          <span class="underline">[[[Max]]] <span id="maxLbl">[[[Buy]]]</span></span>:
-                          <span id="maxFromLots"></span>
-                          <span id="maxFromLotsLbl">[[[lot]]]</span>
-                        </span>
-                        <span id="maxAboveZero" class="d-hide">
-                          ,
-                          <span id="maxFromAmt"></span>
-                          <span id="maxFromTicker"></span>
-                          &rarr;
-                          <span id="maxToAmt"></span>
-                          <span id="maxToTicker"></span>
-                        </span>
-                      </div>
+                    <div>
+                      [[[Rate Step]]]:
+                      <span id="rateStep"></span>
+                      <span data-unit="quote"></span>
+                    </div>
+                  </div>
+                  <div class="my-2 fs14 h21" id="maxBox">
+                    <div id="maxOrd" class="d-hide position-relative pointer">
+                      <span id="maxLotBox" class="d-hide">
+                        <span class="underline">[[[Max]]] <span id="maxLbl">[[[Buy]]]</span></span>:
+                        <span id="maxFromLots"></span>
+                        <span id="maxFromLotsLbl">[[[lot]]]</span>
+                      </span>
+                      <span id="maxAboveZero" class="d-hide">
+                        ,
+                        <span id="maxFromAmt"></span>
+                        <span id="maxFromTicker"></span>
+                        <!-- &rarr;
+                        <span id="maxToAmt"></span>
+                        <span id="maxToTicker"></span> -->
+                      </span>
                     </div>
+                  </div>
 
-                    {{- /* RATE AND QUANTITY INPUTS */ -}}
-                    <div class="d-flex mt-3" id="priceBox">
-                      <label for="rateField" class="form-label col-6 d-flex align-items-center p-0">[[[Price]]]</label>
-                      <div class="col-18 p-0 position-relative">
-                        <input type="number" class="form-control select bg1" id="rateField">
-                        <span class="unitbox"><span class="unit" data-unit="quote"></span>/<span class="unit" data-unit="base"></span></span>
-                      </div>
+                  {{- /* RATE AND QUANTITY INPUTS */ -}}
+                  <div class="d-flex mt-3" id="priceBox">
+                    <label for="rateField" class="form-label col-6 d-flex align-items-center p-0">[[[Price]]]</label>
+                    <div class="col-18 p-0 position-relative">
+                      <input type="number" class="form-control select bg1" id="rateField">
+                      <span class="unitbox"><span class="unit" data-unit="quote"></span>/<span class="unit" data-unit="base"></span></span>
                     </div>
-                    <div class="d-flex mt-4" id="qtyBox">
-                      <label for="qtyField" class="form-label col-6 d-flex align-items-center p-0">[[[Quantity]]]</label>
-                      <div class="col-6 p-0 position-relative">
-                        <input type="number" class="form-control select bg1" id="lotField">
-                        <span class="unit unitbox">[[[Lots]]]</span>
-                      </div>
-                      <div class="col-1 p-0"></div> {{/* spacer */}}
-                      <div class="col-11 p-0 position-relative">
-                        <input type="number" class="form-control select bg1" id="qtyField">
-                        <span class="unit unitbox" data-unit="base"></span>
-                      </div>
+                  </div>
+                  <div class="d-flex mt-4" id="qtyBox">
+                    <label for="qtyField" class="form-label col-6 d-flex align-items-center p-0">[[[Quantity]]]</label>
+                    <div class="col-6 p-0 position-relative">
+                      <input type="number" class="form-control select bg1" id="lotField">
+                      <span class="unit unitbox">[[[Lots]]]</span>
+                    </div>
+                    <div class="col-1 p-0"></div> {{/* spacer */}}
+                    <div class="col-11 p-0 position-relative">
+                      <input type="number" class="form-control select bg1" id="qtyField">
+                      <span class="unit unitbox" data-unit="base"></span>
                     </div>
+                  </div>
 
-                    {{- /* MARKET BUY ORDER QUANTITY INPUT */ -}}
-                    <div id="mktBuyBox" class="d-hide">
-                      <div class="text-center mt-2 fs15">
-                        [[[min trade is about]]] <span id="minMktBuy"></span> <span data-unit="quote"></span>
-                      </div>
-                      <div class="d-flex justify-content-center mt-2">
-                        <!-- <label for="mktBuyField" class="flex-center col-12 p-0">Trading</label> -->
-                        <div class="col-12 p-0 position-relative">
-                          <input type="number" class="form-control select bg1" id="mktBuyField">
-                          <span class="unit unitbox" data-unit="quote"></span>
-                        </div>
+                  {{- /* MARKET BUY ORDER QUANTITY INPUT */ -}}
+                  <div id="mktBuyBox" class="d-hide">
+                    <div class="text-center mt-2 fs15">
+                      [[[min trade is about]]] <span id="minMktBuy"></span> <span data-unit="quote"></span>
+                    </div>
+                    <div class="d-flex justify-content-center mt-2">
+                      <!-- <label for="mktBuyField" class="flex-center col-12 p-0">Trading</label> -->
+                      <div class="col-12 p-0 position-relative">
+                        <input type="number" class="form-control select bg1" id="mktBuyField">
+                        <span class="unit unitbox" data-unit="quote"></span>
                       </div>
-                      <div class="p-0 fs14 flex-center mt-1">
-                        <span>
-                          ~ <span id="mktBuyScore">0</span> <span data-unit="base"></span>
-                          @ <span id="mktBuyLots">0</span> <span >[[[Lots]]]</span><br>
+                    </div>
+                    <div class="p-0 fs14 flex-center mt-1">
+                      <span>
+                        ~ <span id="mktBuyScore">0</span> <span data-unit="base"></span>
+                        @ <span id="mktBuyLots">0</span> <span >[[[Lots]]]</span><br>
 
-                        </span>
-                      </div>
+                      </span>
                     </div>
+                  </div>
 
-                    {{- /* ORDER PREVIEW */ -}}
-                    <div class="mt-2 fs14 text-end" id="orderPreview"></div>
+                  {{- /* ORDER PREVIEW */ -}}
+                  <div class="mt-2 fs14 text-end" id="orderPreview"></div>
 
-                    {{- /* TIME-IN-FORCE CHECK BOX */ -}}
-                    <div class="my-1 text-start form-check" id="tifBox">
-                      <input id="tifNow" class="form-check-input" type="checkbox" value="">
-                      <label class="form-check-label" for="tifNow">
-                        [[[Immediate or cancel]]]
-                        <span class="ico-info fs12" data-tooltip="[[[immediate_explanation]]]"></span>
-                      </label>
-                    </div>
+                  {{- /* TIME-IN-FORCE CHECK BOX */ -}}
+                  <div class="my-1 text-start form-check" id="tifBox">
+                    <input id="tifNow" class="form-check-input" type="checkbox" value="">
+                    <label class="form-check-label" for="tifNow">
+                      [[[Immediate or cancel]]]
+                      <span class="ico-info fs12" data-tooltip="[[[immediate_explanation]]]"></span>
+                    </label>
+                  </div>
 
-                    {{- /* SUBMIT ORDER BUTTON */ -}}
-                    <div class="text-end">
-                      <button id="submitBttn" type="button" class="my-1 fs14 submit text-center buygreen"></button> {{/* textContent set by script */}}
-                    </div>
+                  {{- /* SUBMIT ORDER BUTTON */ -}}
+                  <div class="text-end">
+                    <button id="submitBttn" type="button" class="my-1 fs14 submit text-center buygreen-bg"></button> {{/* textContent set by script */}}
                   </div>
-                  <div class="fs15 pt-3 text-center d-hide errcolor text-break" id="orderErr"></div>
-                </form>
-
-                {{- /* BALANCES */ -}}
-                <div id="marketBalance" class="market-bal pt-2 pb-1 my-3 position-relative">
-                  <span class="market-bal-lbl">[[[Balances]]]</span>
-                  <table class="balance-table" id="balanceTable">
-                    <thead>
-                      <tr>
-                        <th></th>
-                        <th>
-                          <div class="d-flex align-items-center pb-1" id="baseWalletIcons">
-                            <img id="baseImg" class="micro-icon me-1">
-                            <span id="balBaseSymbol"></span>
-                            <div class="flex-grow-1"></div>
-                            <div id="baseWalletState" class="fs12">{{template "walletIcons"}}</div>
-                            <span class="ico-expired fs16 ps-1" id="baseExpired" data-tooltip="[[[outdated_tooltip]]]"></span>
-                          </div>
-                        </th>
-                        <th>
-                          <div class="d-flex align-items-center pb-1" id="quoteWalletIcons">
-                            <img id="quoteImg" class="micro-icon me-1">
-                            <span id="balQuoteSymbol"></span>
-                            <div class="flex-grow-1"></div>
-                            <div id="quoteWalletState" class="fs12">{{template "walletIcons"}}</div>
-                            <span class="ico-expired fs16 ps-1" id="quoteExpired" data-tooltip="[[[outdated_tooltip]]]"></span>
-                          </div>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td class="fs16">[[[available]]]</td>
-                        <td id="baseUnsupported" rowspan="3">
-                          <div class="ico-cross"></div>
-                        </td>
-                        <td id="baseConnect" rowspan="3" class="pointer" data-tooltip="[[[connect_refresh_tooltip]]]">
-                          <div class="ico-sleeping"></div>
-                        </td>
-                        <td id="baseSpinner" rowspan="3">
-                          <div class="ico-spinner spinner"></div>
-                        </td>
-                        <td id="baseNewWalletRow" rowspan="3">
-                          <button id="baseNewButton" type="button" class="newwallet bg1 text-center">[[[add_a_base_wallet]]]</button>
-                        </td>
-                        <td id="baseWalletPendingRow" rowspan="3">
-                          <div class="ico-spinner spinner fs20"></div>
-                        </td>
-                        <td id="baseAvail" class="fs16"></td>
-                        <td id="quoteUnsupported" rowspan="3">
-                          <div class="ico-cross"></div>
-                        </td>
-                        <td id="quoteConnect" rowspan="3" class="pointer" data-tooltip="[[[connect_refresh_tooltip]]]">
-                          <div class="ico-sleeping"></div>
-                        </td>
-                        <td id="quoteSpinner" rowspan="3">
-                          <div class="ico-spinner spinner"></div>
-                        </td>
-                        <td id="quoteNewWalletRow" rowspan="3" class="brdr-left">
-                          <button id="quoteNewButton" type="button" class="newwallet bg1 text-center">[[[add_a_quote_wallet]]]</button>
-                        </td>
-                        <td id="quoteWalletPendingRow" rowspan="3">
-                          <div class="ico-spinner spinner fs20"></div>
-                        </td>
-                        <td id="quoteAvail" class="brdr-left fs16"></td>
-                      </tr>
-                      <tr>
-                        <td>[[[locked]]]</td>
-                        <td id="baseLocked"></td>
-                        <td id="quoteLocked" class="brdr-left"></td>
-                      </tr>
-                      <tr>
-                        <td>[[[immature]]]</td>
-                        <td id="baseImmature"></td>
-                        <td id="quoteImmature" class="brdr-left"></td>
-                      </tr>
-                      <tr class="d-hide" id="parentBalance">
-                        <td>fee balance</td>
-                        <td><span id="baseParent"></span> <img id="baseParentLogo" class="micro-icon"></td>
-                        <td><span id="quoteParent"></span> <img id="quoteParentLogo" class="micro-icon"></td>
-                      </tr>
-                    </tbody>
-                  </table>
                 </div>
-              </div>
-            </div>
-          </div>
+                <div class="fs15 pt-3 text-center d-hide errcolor text-break" id="orderErr"></div>
+              </form>
 
-          {{- /* SELL ORDER LIST */ -}}
-          <div class="marketorders col-lg-7 order-3 p-0 bg1 d-flex flex-column">
-            <div class="market-header text-center fs14 py-1">[[[Sell Orders]]]</div>
-            <div class="brdrleft flex-grow-1 bg1 position-relative">
-              <div class="market-orders-table-container stylish-overflow">
-                <table class="ordertable">
-                  {{template "thead"}}
-                  <tbody id="sellRows"></tbody>
-                </table>
+              {{- /* BALANCES */ -}}
+              <div id="noWallet" class="p-3 flex-center fs16 grey d-hide">
+                Create wallets to trade
+              </div>
+              <div id="walletInfoTmpl" class="brdrtop brdrbottom mb-3 d-flex flex-column align-items-stretch">
+                <div class="d-flex align-items-center px-3 py-1 brdrbottom" data-tmpl="walletIcons">
+                  <img data-tmpl="logo" class="micro-icon me-1">
+                  <span data-tmpl="symbol"></span>
+                  <div class="flex-grow-1"></div>
+                  <div data-tmpl="walletState" class="fs12">{{template "walletIcons"}}</div>
+                  <div data-tmpl="walletAddr" class="ico-qrcode fs12 p-2 pointer hoverbg"></div>
+                  <span class="ico-expired fs16 ps-1" data-tmpl="expired" data-tooltip="[[[outdated_tooltip]]]"></span>
+                </div>
+                <div data-tmpl="unsupported" class="flex-center position-relative py-2 d-hide">
+                  <div class="fs13 ico-cross"></div>
+                  <span class="fs15 grey ms-1">asset not supported</span>
+                </div>
+                <div data-tmpl="connect" class="pointer d-hide" data-tooltip="[[[connect_refresh_tooltip]]]">
+                  <div class="ico-sleeping"></div>
+                </div>
+                <div data-tmpl="newWalletRow" class="flex-center p-2 d-hide">
+                  <button data-tmpl="newWalletBttn" type="button" class="pointer hoverbg text-center p-2 text-nowrap">[[[add_a_wallet]]]</button>
+                </div>
+                <div data-tmpl="spinner" class="flex-center position-relative py-2">
+                  <div class="ico-spinner spinner fs15"></div>
+                </div>
+                <div data-tmpl="balanceRows" class="d-flex flex-column align-items-stretch brdrbottom lh1">
+                  <div class="d-flex justify-content-between align-items-center px-3 py-1 fs15" data-tmpl="balanceRowTmpl">
+                    <span data-tmpl="title"></span>
+                    <div data-tmpl="bal"></div>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
 
-      {{- /* USER ORDERS */ -}}
-      <div class="bg0 p-0 col-24 col-xxl-10 d-flex flex-column align-items-stretch">
-        <div class="market-header text-center fs14 py-1 brdrleft">
-          [[[Your Orders]]]
-        </div>
-        <div class="brdrleft flex-grow-1 bg1 position-relative">
+              {{- /* USER ORDERS */ -}}
+              <div id="userOrdersHeader" class="text-center fs20 sans-light my-1">[[[Your Orders]]]</div>
+              <div id="userNoOrders" class="p-3 flex-center fs16 grey">no active orders</div>
+              <div id="userOrders" class="mb-3">
+                <div id="userOrderTmpl" class="user-order">
+                  <div data-tmpl="header" class="user-order-header">
+                    <div data-tmpl="sideLight" class="side-indicator buy"></div>
+                    <span data-tmpl="side"></span>
+                    <span data-tmpl="qty" class="ms-1"></span>
+                    <span data-tmpl="baseSymbol" class="ms-1 grey"></span>
+                    <span class="flex-grow-1 d-flex align-items-center justify-content-end">
+                      <span data-tmpl="status"></span>
+                      <span data-tmpl="activeLight" class="active-indicator active"></span>
+                    </span>
+                    <div data-tmpl="expander" class="p-1 pointer hoverbg fs11 ico-arrowdown"></div>
+                    
+                    <!-- <span class="fs11 ico-open ms-2"></span> -->
+                  </div>
+                  <div data-tmpl="details" class="order-details d-hide">
+                    <div class="user-order-datum full-span d-flex flex-row justify-content-start align-items-center brdrbottom fs12 p-2">
+                      <span data-tmpl="accelerateBttn" class="ico-rocket pointer hoverbg d-hide me-3" data-tooltip="accelerate order"></span>
+                      <span data-tmpl="cancelBttn" class="ico-cross pointer hoverbg fs11 d-hide me-3" data-tooltip="[[[cancel order]]]"></span>
+                      <a data-tmpl="link" class="ico-open pointer hoverbg me-3 fs13 plainlink" data-tooltip="[[[order details]]]"></a>
+                    </div>
+                    <div class="user-order-datum">
+                      <span>[[[Type]]]</span>
+                      <span data-tmpl="type"></span>
+                    </div>
+                    <div class="user-order-datum">
+                      <span>[[[Side]]]</span>
+                      <span data-tmpl="side"></span>
+                    </div>
+                    <div class="user-order-datum">
+                      <span>[[[Status]]]</span>
+                      <span data-tmpl="status"></span>
+                    </div>
+                    <div class="user-order-datum">
+                      <span>[[[Age]]]</span>
+                      <span data-tmpl="age"></span>
+                    </div>
+                    <div class="user-order-datum">
+                      <span>[[[Quantity]]]</span>
+                      <span data-tmpl="qty"></span>
+                    </div>
+                    <div class="user-order-datum">
+                      <span>[[[Rate]]]</span>
+                      <span data-tmpl="rate"></span>
+                    </div>
+                    <div class="user-order-datum">
+                      <span>[[[Filled]]]</span>
+                      <span data-tmpl="filled"></span>
+                    </div>
+                    <div class="user-order-datum">
+                      <span>[[[Settled]]]</span>
+                      <span data-tmpl="settled"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>{{- /* END USER ORDERS */ -}}
 
-          <div class="user-orders-table-container stylish-overflow">
-            <table id="liveTable" class="ordertable">
-              <thead>
-                <tr>
-                  <th data-ordercol="type">[[[Type]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="sell">[[[Side]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="submitTime">[[[Age]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="rate">[[[Rate]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="qty">[[[Quantity]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="filled">[[[Filled]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="settled">[[[Settled]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="status">[[[Status]]] <span class="ico-arrowdown"></span></th>
-                  <th class="last"></th>
-                </tr>
-              </thead>
-              <tbody id="liveList">
-                <tr id="liveTemplate">
-                  <td data-tmpl="type"></td>
-                  <td data-tmpl="side"></td>
-                  <td data-tmpl="age"></td>
-                  <td data-tmpl="rate"></td>
-                  <td data-tmpl="qty"></td>
-                  <td data-tmpl="filled"></td>
-                  <td data-tmpl="settled"></td>
-                  <td data-tmpl="status"></td>
-                  <td class="last text-end">
-                    <span data-tmpl="accelerateBttn" class="ico-rocket d-hide" data-tooltip="accelerate order"></span>
-                    <span data-tmpl="cancelBttn" class="ico-cross d-hide" data-tooltip="[[[cancel order]]]"></span>
-                    <a data-tmpl="link" class="ico-open fs13 pointer ms-2 plainlink" data-tooltip="[[[order details]]]"></a>
-                  </td>
-                </tr>
-              </tbody>
-              <tbody>
-                <tr>
-                  <td colspan="9" class="text-center">
-                    <a href="/orders" class="d-block fs14 px-2 plainlink">[[[view order history]]]</a>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
+              {{- /* RECENT MATCHES */ -}}
+              <div id=recentMatchesBox  class="d-flex flex-column align-items-stretch px-3 pb-4">
+                <div id="userOrdersHeader" class="text-center fs20 sans-light my-1">[[[Recent Matches]]]</div>
+                <table id="recentMatchesTable" class="ordertable">
+                  <thead>
+                    <tr>
+                      <th data-ordercol="age">[[[Age]]] <span class="ico-arrowdown"></span></th>
+                      <th data-ordercol="rate" class="text-end pe-2"><span class="ico-arrowdown"></span> [[[Rate]]]</th>
+                      <th data-ordercol="qty" class="text-end"><span class="ico-arrowdown"></span> [[[Quantity]]]</th>
+                    </tr>
+                  </thead>
+                  <tbody id="recentMatchesLiveList">
+                    <tr id="recentMatchesTemplate">
+                      <td data-tmpl="age"></td>
+                      <td data-tmpl="rate" class="text-end pe-2"></td>
+                      <td data-tmpl="qty" class="text-end"></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>{{- /* END RECENT MATCHES */ -}}
 
-    {{- /* Recently Matched orders */ -}}
-    <div class="bg0 p-0 col-24 col-xxl-100 d-flex flex-column align-items-stretch">
-    {{/* <div class="bg0 p-0 col-24 col-xxl-10 d-flex flex-column align-items-stretch"> */}}
-        <div class="market-header text-center fs14 py-1 brdrleft">
-          [[[Recent Matches]]]
-        </div>
-        <div class=" brdrleft flex-grow-1 bg1 position-relative">
-          <div class="stylish-overflow">
-            <table id="recentMatchesTable" class="ordertable">
-              <thead>
-                <tr>
-                  <th data-ordercol="stamp">[[[Time]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="rate">[[[Rate]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="qty">[[[Quantity]]] <span class="ico-arrowdown"></span></th>
-                  <th class="last"></th>
-                </tr>
-              </thead>
-              <tbody id="recentMatchesLiveList">
-                <tr id="recentMatchesTemplate">
-                  <td data-tmpl="age"></td>
-                  <td data-tmpl="rate"></td>
-                  <td data-tmpl="qty"></td>
-                </tr>
-              </tbody>
-            </table>
+            </div>
           </div>
         </div>
       </div>
-  </div>
+    </div>
+  </div>{{- /* END CONTENT */ -}}
 
   {{- /* POP-UP FORMS */ -}}
   <div id="forms" class="d-hide">
@@ -458,6 +446,11 @@
       {{template "unlockWalletForm"}}
     </form>
 
+    {{- /* DEPOSIT ADDRESS */ -}}
+    <form class="position-relative flex-center flex-column fs20 d-hide" id="deposit">
+      {{template "depositAddress"}}
+    </form>
+
     {{- /* NEW WALLET */ -}}
     <form class="m-auto d-hide" id="newWalletForm" autocomplete="off">
       {{template "newWalletForm"}}
@@ -471,7 +464,7 @@
     {{- /* VERIFY FORM */ -}}
       <form class="position-relative fs16 text-center d-hide" id="verifyForm" autocomplete="off">
         <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
-        <div class="py-1 text-center fs18 position-relative header buygreen" id="vHeader">
+        <div class="py-1 text-center fs18 position-relative header buygreen-bg" id="vHeader">
           <span id="vBuySell"></span> <span data-unit="base"></span>
         </div>
         <div class="d-flex justify-content-between align-items-center py-2 fs13">
@@ -556,7 +549,7 @@
               [[[Fee Projection]]]
               <span class="ico-info fs12" data-tooltip="[[[fee_projection_tooltip]]]"></span>
             </span>
-            <span class="grey fs14 underline pointer hoverbright" id="vFeeDetails">[[[details]]]</span>
+            <span class="grey fs14 underline pointer hoverbg" id="vFeeDetails">[[[details]]]</span>
           </div>
 
           <div class="py-1 d-flex align-items-center justify-content-center fs18" id="vFeeSummary">
@@ -587,7 +580,7 @@
                 <input type="password" class="form-control select w-100" id="vUnlockPass">
               </div>
               <div class="col-12 p-0 d-flex align-items-end justify-content-end">
-                <button type="button" id="vUnlockSubmit" class="selected buygreen">[[[Unlock]]]</button>
+                <button type="button" id="vUnlockSubmit" class="selected buygreen-bg">[[[Unlock]]]</button>
               </div>
             </div>
           </div>
diff --git a/client/webserver/site/src/html/wallets.tmpl b/client/webserver/site/src/html/wallets.tmpl
index 11d57a3500..d24fa0eb02 100644
--- a/client/webserver/site/src/html/wallets.tmpl
+++ b/client/webserver/site/src/html/wallets.tmpl
@@ -4,7 +4,7 @@
 <div id="main" data-handler="wallets" class="walletspage flex-grow-1 position-relative">
   <div class="fill-abs d-flex align-items-stretch">
     {{- /* ASSET SELECT */ -}}
-    <div class="d-flex flex-column align-items-stretch stylish-overflow bg1 invisible" id="assetSelect">
+    <div class="d-flex flex-column align-items-stretch stylish-overflow invisible" id="assetSelect">
       <div id="iconSelectTmpl" class="icon-select d-flex align-items-stretch">
         <img data-tmpl="img">
         <div class="d-none d-md-flex flex-column justify-content-around ps-2">
@@ -122,8 +122,8 @@
         </div>{{/* END WALLET DETAILS */}}
 
         {{- /* MARKETS OVERVIEW */ -}}
-        <div class="col-24 col-lg-12 col-xxl-8 d-flex stylish-overflow-lg bg1-lg border-top-lt-lg invisible" id="marketsOverviewBox">
-          <div class="m-auto flex-center flex-column w-100 py-3">
+        <div class="col-24 col-lg-12 col-xxl-8 d-flex stylish-overflow-lg invisible" id="marketsOverviewBox">
+          <div class="m-auto flex-center flex-column w-100 p-3">
             <div class="d-flex align-items-start flex-column mw-90p">
               <span class="fs28 sans-light mb-2">[[[asset_name Markets]]]</span>
               <table id="availableMarketsTable" class="w-100">
@@ -163,8 +163,8 @@
         </div>{{/* END MARKETS OVERVIEW */}}
 
         {{- /* RECENT ORDERS */ -}}
-        <div class="col-24 col-xxl-8 d-flex stylish-overflow-lg border-top-lt-xxl invisible" id="orderActivityBox">
-          <div class="my-auto flex-center w-100 py-3" id="orderActivity">
+        <div class="col-24 col-xxl-8 d-flex stylish-overflow-lg invisible" id="orderActivityBox">
+          <div class="my-auto flex-center w-100 p-3" id="orderActivity">
             <div class="d-flex align-items-start flex-column mw-90p">
               <span class="fs28 sans-light mb-2">[[[Recent asset_name Activity]]]</span>
               <table id="ordersTable" class="my-auto" class="w-100">
@@ -332,22 +332,7 @@
 
     {{- /* DEPOSIT ADDRESS */ -}}
     <form class="position-relative flex-center flex-column fs20 d-hide" id="deposit">
-      <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
-      <div class="px-2 py-1 mb-2 text-center position-relative fs22 sans-light">
-        [[[Deposit]]]
-        <img id="depositLogo" class="micro-icon mx-1">
-        <span id="depositName"></span>
-      </div>
-      <img class="mb-3" id="qrcode" />
-      <div class="mono bg0 p-2 fs15">
-        <span id="depositAddress"></span>
-        <span id="copyAddressBtn" class="ico-copy mt-2 ml-2 fs18"></span>
-        <span id="copyAlert" class="d-hide">[[[copied]]]</span>
-      </div>
-      <div class="my-3">
-        <button id="newDepAddrBttn" type="button" class=" px-2 justify-content-center fs15 bg2 selected">[[[New Deposit Address]]]</button>
-      </div>
-      <div class="fs15 pt-3 text-center d-hide errcolor text-break" id="depositErr"></div>
+      {{template "depositAddress"}}
     </form>
 
     {{- /* UNLOCK WALLET */ -}}
diff --git a/client/webserver/site/src/img/candlestick_bttn.png b/client/webserver/site/src/img/candlestick_bttn.png
deleted file mode 100644
index a434899404019de33f8f40d3f84a0e66e98f63be..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 502
zcmV<S0SW$zP)<h;3K|Lk000e1NJLTq001-q000yS1^@s6!qgt!00009a7bBm000B$
z000B$0mHTYaR2}S8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10fR|I
zK~z|U?Ug%A15pr0&ulhWNJOzPW&VIx7K)W1S_zg$)Xq+@7PQe)NGT#(XdyOQYAsk=
z1gs>r7QTWcL1Z6e5iE8$Zj9@?A>=F1Fn8v_<z68yC%q$xtOmHn2FumQ(B8On+Bb&l
zWV}!w%+Mw=a-b^#o-%fTWQB0|5gGO%m185JZDLDTsNG{~Dm4f6dZ=OCiDlh1YgW^o
zKsD#Xui`kDf45?5F%ek;vL32>1~e4{rVyF-^_GCdggWlZb(~Q6KNK;VP6t0_xE9MQ
z#x*lsC|kMUX`nyA@5+@Qovxa1z+QlageI|}{1(^nI1=s3+4dH&?V}p$%!r93B=zMJ
z74WC~%KckTGUK45UMTM@R1U)0+E+;2S&(%v)K{P`r0fDip0YtPIiaJ>AZgtUa90mm
ztlc*4&sX;vVH4Y40K~_g-|QHOZO=5I9{}_i{iw4RsHTi7;1=N-rQ|JYx!Filz6Qh)
sf$FzK*RCRR9^`Tlz<jL$6k4762}Lh!D~*-B3IG5A07*qoM6N<$f^e4Be*gdg

diff --git a/client/webserver/site/src/img/depth_bttn.png b/client/webserver/site/src/img/depth_bttn.png
deleted file mode 100644
index cac873aaff9414a701df0e093da548f8d2f3a890..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 665
zcmV;K0%rY*P)<h;3K|Lk000e1NJLTq001-q000yS1^@s6!qgt!00009a7bBm000B$
z000B$0mHTYaR2}S8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10wzgB
zK~z|U)t0|&6JZ#~KhJxYr0HE+5NaZV#X*E32o6$-b3u>_4nh2Zq#{B`g$gdZ6wDtW
zg5Xw@*x>479h^Ej6crR#w-%(<#-O?Pai~h#lB9RJr1+VRd+&Ll@8|A)k5{PrCs5<j
z__jik2LCxOD$`)+8S<M{_yGDAt1q}xf4Se`qF`FCUEn0h493)096h>Up?blzxj#%`
z9}P4~OtcdM^c-csFt{l3;C37po>R@t0Z%YPWeTg`2NP>=DEOpOIf5XE>LDEGy->;A
z1D)SP{W?x!oWj@jz9;R1I?hEzZUO%G0WEb{a=RF%`ExwhWD!uvA~MTPnLmUP0%MNE
z5vnI#_YRP5Hyln#b(*r5?KM*r6votXia@@@W77Gju$!BR+@RtwBU;0nXI$P`>mg@H
zG?|=0^(@w&LF5=9-D<)L!PZyJqmoCoM8$uD$PyYX@u|MT18jsjx1n$t*S(FklK@Cp
zkAFlFY9$3sp*jTyj{B>Wd5y>`hEp{ztZjsuOd&}kaShe0Kr%|8aC@jbV+fZ(pHgpp
zq2fJcapXX^B87wMI7M8yis}pzWr(nc!Y~4Im!_Si>OJPi=Ka>wyh0k+Jq?@(CW-0g
z_ETsJA%n^s32#B!{752E#M)DcOaM;Y?fNhD7ekI@@)y=#53|X`GB_c~5(Hj9Wnhp(
zLJpDGm)K5Rj4orf)bB=E-l3Ytn1#OeFy`}bakY?nX7j{u00000NkvXXu0mjf41Xw=

diff --git a/client/webserver/site/src/img/softened-icon-dark.png b/client/webserver/site/src/img/softened-icon-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..91975d7a21a0cc0ada3417933eeed53b000f62b9
GIT binary patch
literal 3207
zcmV;240!X2P)<h;3K|Lk000e1NJLTq003kF003kN1^@s6aN?Cz00009a7bBm000id
z000id0mpBsWB>pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H13=~O3
zK~#90?VWpYT-ANYKfiPLp<PKxGOZmt81f*YloB*NY{exZ(BL72G!mJRNh!u!*~V$>
z0PUnn+k}}+lF5@g#KAn|-8HzOOj3|TJ1~$o1}Au88iE2z2q7g+2*EWEDYo`;clX|3
z{*dk2yOtKOwD)1G&wuyc-ShoP-#zEvbIv`#BZGs3ED#+`*a0lyWx<e$5u52`sgyn4
zD5trile2x%xK<TqpJUvYUVeGeo~28Ns{Vx;eYS5OlS?jnaf#zt$6KzIa!jpvrq9K&
zoEq+4V;21)nH;hkuS@+sq`!a6?A|qT3$V7ucwAr)@C?e67=1!Tb`K2n{djzQ$ZfH#
zNHaOPv7;l_bB-9!KzS>|X}}wS*8%ZXic;j-j`Z;D^(Q@sR7&|_Rn4^}@@Xc3?}>1q
zsk;9WJ8sSMZ7e$w`uoSs|Ll5Yz(Fn*cn5F}kZe=&H3##Sbb9qK51#NeS*m=fO+p9h
z1Kz93d!3ls>=bj4in7fy*1x4vSH03^t+rxMWd|^_YWJ>*L68%~ADLK8+_wQU8zSgp
z^+$NRcv!B&a-+@-b}{$w2D34qUj3MVlC4oJ-qLB2SS4^ZhBJfERK(+f=P65t{Xqo5
zbd|rt#r=U@%so^t=ieES?u<Cj=CobP{=G%~Szxmgj2Qr^JG&tvalW{^!!Bn3yHePC
zPLRUew~vWk%w}qK>RD9246-;#eE<Zj{xAxL96&Bqad($X`O#u=oA3XaQYnAt#VaSi
z2a*L{;<w(cXp<%@0vJ(UV^RHSxsYr30|o%LojuMjWxrxne;}~J4~<sP>3i!TOv6>5
z9wu7mcoFWb6tZ`hO1Cd+SD~d+{!AQs43%q`rBfU>QL7;yROB+F&bU359hh%fl~Vpn
zqq++?r46C^hSw0m$EV&ovlJr_m5ceS=JMsq$&DT5Qhrob?*P(mj;-x9Hd#(cal9Hy
zLGyMY`>E~Q$BwvJb=}eKRHEkrQC;I_aP6d_$<nAA0w9Q7|L&C&xAgaqy=qfit#0kB
zmaT6yJ=_sl1aGU<@Q0Zw8*-3!yLU~FHZ#SxxBa18b-x2F4=}E_;O(hLyN1-Enca^}
z+%(gb{rm4Yo?7)Gpg-7{+Jnas6Wx2r;Rx&PLjIHWr=ELmEFQON-$eM6u)>-H`|1z8
zHN^0vU}KplqMxeoKrTLh;wFI$!VIZJ90%Q5f5Ou_sycizZt)J3^MZ|Q&WH%3m8sm1
z)sjC4ZFOQTOdLi2E}hOiSASAwdh4WA%AaYJH!wXMzYkRh5li5>17AxjdIHLc2qy}h
z#PqCLSUvsU0!zR<P!|}&OQ<}K>eC2&fEQ=~u-4S&d6O_dOC*MW)p&Kr;e%9a_(#xM
z^EEY<>#;2NTuaSLg-e0cTKWDw`J(`}09-_OfNZy1>w#GMs%P3&@QgL29hA#k&K1|J
z1y<3%DbJA6y{P$`<v2ONrlWl`<RHajcBv6_y{Kl0_}Ez!UQzTj-TRBTRF`Zh`6=YP
zAqS}zx1O!&W<{3;BG?`j7&US8@pydoL=b|3{bJ+k)sHP((fc-3u7{(dzw?4C?#g63
zb9GQ=K)_AN`1p{U>>U2IAQ#f~NhEY0mRRkqRBFwC1uYy(o1RDy?=-F%0DcjMeskpR
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

literal 0
HcmV?d00001

diff --git a/client/webserver/site/src/img/softened-icon-dark.xcf b/client/webserver/site/src/img/softened-icon-dark.xcf
new file mode 100644
index 0000000000000000000000000000000000000000..59908f2e728e0ccf1c9ac25aea62d8bec45ceab1
GIT binary patch
literal 24321
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
E04X(3P5=M^

literal 0
HcmV?d00001

diff --git a/client/webserver/site/src/img/softened-icon.png b/client/webserver/site/src/img/softened-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..b7547bcb2edc43c5030c782ed41ee0e08957f182
GIT binary patch
literal 4318
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
M07*qoM6N<$g4^{C1^@s6

literal 0
HcmV?d00001

diff --git a/client/webserver/site/src/js/app.ts b/client/webserver/site/src/js/app.ts
index 2030b2e4a2..681b297fe9 100644
--- a/client/webserver/site/src/js/app.ts
+++ b/client/webserver/site/src/js/app.ts
@@ -84,6 +84,7 @@ export default class Application {
   recorders: Record<string, LogMessage[]>
   main: HTMLElement
   header: HTMLElement
+  headerSpace: HTMLElement
   assets: Record<number, SupportedAsset>
   exchanges: Record<string, Exchange>
   walletMap: Record<number, WalletState>
@@ -258,6 +259,7 @@ export default class Application {
     this.main.replaceWith(main)
     this.main = main
     this.noteReceivers = []
+    Doc.empty(this.headerSpace)
     this.attach(data)
     return true
   }
@@ -303,6 +305,7 @@ export default class Application {
    */
   attachHeader () {
     this.header = idel(document.body, 'header')
+    this.headerSpace = Doc.idel(this.header, 'headerSpace')
     this.popupNotes = idel(document.body, 'popupNotes')
     this.popupTmpl = Doc.tmplElement(this.popupNotes, 'note')
     if (this.popupTmpl) this.popupTmpl.remove()
@@ -316,13 +319,13 @@ export default class Application {
     page.loader.remove()
     Doc.show(page.loader)
 
-    bind(page.noteMenuEntry, 'click', async () => {
+    bind(page.noteBell, 'click', async () => {
       Doc.hide(page.pokeList)
       Doc.show(page.noteList)
       this.ackNotes()
       page.noteCat.classList.add('active')
       page.pokeCat.classList.remove('active')
-      this.showDropdown(page.noteMenuEntry, page.noteBox)
+      this.showDropdown(page.noteBell, page.noteBox)
       Doc.hide(page.noteIndicator)
       for (const note of this.notes) {
         if (note.acked) {
@@ -334,8 +337,8 @@ export default class Application {
       this.storeNotes()
     })
 
-    bind(page.profileMenuEntry, 'click', () => {
-      this.showDropdown(page.profileMenuEntry, page.profileBox)
+    bind(page.profileIcon, 'click', () => {
+      this.showDropdown(page.profileIcon, page.profileBox)
     })
 
     bind(page.innerNoteIcon, 'click', () => { Doc.hide(page.noteBox) })
@@ -370,8 +373,8 @@ export default class Application {
     const ico = icon.getBoundingClientRect()
     Doc.hide(this.page.noteBox, this.page.profileBox)
     Doc.show(dialog)
-    dialog.style.right = `${window.innerWidth - ico.left - ico.width + 11}px`
-    dialog.style.top = `${ico.top - 9}px`
+    dialog.style.right = `${window.innerWidth - ico.left - ico.width + 5}px`
+    dialog.style.top = `${ico.top - 4}px`
 
     const hide = (e: MouseEvent) => {
       if (!Doc.mouseInElement(e, dialog)) {
@@ -459,10 +462,10 @@ export default class Application {
       return
     }
     if (!this.user.authed) {
-      Doc.hide(page.noteMenuEntry, page.walletsMenuEntry, page.marketsMenuEntry, page.profileMenuEntry)
+      Doc.hide(page.noteBell, page.walletsMenuEntry, page.marketsMenuEntry, page.profileIcon)
       return
     }
-    Doc.show(page.noteMenuEntry, page.walletsMenuEntry, page.profileMenuEntry)
+    Doc.show(page.noteBell, page.walletsMenuEntry, page.profileIcon)
     if (Object.keys(this.user.exchanges).length > 0) {
       Doc.show(page.marketsMenuEntry)
     } else {
@@ -833,8 +836,9 @@ export default class Application {
   }
 
   /* conventionalRate converts the encoded atomic rate to a conventional rate */
-  conventionalRate (baseID: number, quoteID: number, encRate: number): number {
-    const [b, q] = [this.unitInfo(baseID), this.unitInfo(quoteID)]
+  conventionalRate (baseID: number, quoteID: number, encRate: number, xc?: Exchange): number {
+    const [b, q] = [this.unitInfo(baseID, xc), this.unitInfo(quoteID, xc)]
+
     const r = b.conventional.conversionFactor / q.conventional.conversionFactor
     return encRate / RateEncodingFactor * r
   }
diff --git a/client/webserver/site/src/js/charts.ts b/client/webserver/site/src/js/charts.ts
index bf26d4f2da..6f37e2d21d 100644
--- a/client/webserver/site/src/js/charts.ts
+++ b/client/webserver/site/src/js/charts.ts
@@ -1,11 +1,10 @@
-import Doc from './doc'
+import Doc, { Animation } from './doc'
 import { RateEncodingFactor } from './orderutil'
 import OrderBook from './orderbook'
 import State from './state'
 import { UnitInfo, Market, Candle, CandlesPayload } from './registry'
 
 const bind = Doc.bind
-const unbind = Doc.unbind
 const PIPI = 2 * Math.PI
 const plusChar = String.fromCharCode(59914)
 const minusChar = String.fromCharCode(59915)
@@ -105,8 +104,8 @@ interface Theme {
 
 const darkTheme: Theme = {
   axisLabel: '#b1b1b1',
-  gridBorder: '#3a3a3a',
-  gridLines: '#2a2a2a',
+  gridBorder: '#383f4b',
+  gridLines: '#383f4b',
   gapLine: '#6b6b6b',
   value: '#9a9a9a',
   zoom: '#5b5b5b',
@@ -122,8 +121,8 @@ const darkTheme: Theme = {
 
 const lightTheme: Theme = {
   axisLabel: '#1b1b1b',
-  gridBorder: '#3a3a3a',
-  gridLines: '#dadada',
+  gridBorder: '#ddd',
+  gridLines: '#ddd',
   gapLine: '#595959',
   value: '#4d4d4d',
   zoom: '#777',
@@ -138,12 +137,13 @@ const lightTheme: Theme = {
 }
 
 // Chart is the base class for charts.
-class Chart {
+export class Chart {
   parent: HTMLElement
   report: ChartReporters
   theme: Theme
   canvas: HTMLCanvasElement
   visible: boolean
+  renderScheduled: boolean
   ctx: CanvasRenderingContext2D
   mousePos: Point | null
   rect: DOMRect
@@ -153,6 +153,7 @@ class Chart {
   xRegion: Region
   yRegion: Region
   dataExtents: Extents
+  unattachers: (() => void)[]
 
   constructor (parent: HTMLElement, reporters: ChartReporters) {
     this.parent = parent
@@ -173,6 +174,7 @@ class Chart {
     this.mousePos = null
     bind(this.canvas, 'mousemove', (e: MouseEvent) => {
       // this.rect will be set in resize().
+      if (!this.rect) return
       this.mousePos = {
         x: e.clientX - this.rect.left,
         y: e.clientY - this.rect.y
@@ -183,12 +185,24 @@ class Chart {
       this.mousePos = null
       this.draw()
     })
+
+    // Bind resize.
+    const resizeObserver = new ResizeObserver(() => this.resize())
+    resizeObserver.observe(this.parent)
+
     // Scrolling by wheel is smoother when the rate is slightly limited.
     this.wheelLimiter = null
     bind(this.canvas, 'wheel', (e: WheelEvent) => { this.wheel(e) })
-    this.boundResizer = () => { this.resize(parent.clientHeight) }
-    bind(window, 'resize', this.boundResizer)
     bind(this.canvas, 'click', (e: MouseEvent) => { this.click(e) })
+    const setVis = () => {
+      this.visible = document.visibilityState !== 'hidden'
+      if (this.visible && this.renderScheduled) {
+        this.renderScheduled = false
+        this.draw()
+      }
+    }
+    bind(document, 'visibilitychange', setVis)
+    this.unattachers = [() => { Doc.unbind(document, 'visibilitychange', setVis) }]
   }
 
   wheeled () {
@@ -221,9 +235,9 @@ class Chart {
    * updating the height programmatically after the caller sets a style.height
    * but before the clientHeight has been updated.
    */
-  resize (parentHeight: number) {
+  resize () {
     this.canvas.width = this.parent.clientWidth
-    this.canvas.height = parentHeight - 20 // magic number derived from a soup of css values.
+    this.canvas.height = this.parent.clientHeight
     const xLblHeight = 30
     const yGuess = 40 // y label width guess. Will be adjusted when drawn.
     const plotExtents = new Extents(yGuess, this.canvas.width, 10, this.canvas.height - xLblHeight)
@@ -246,22 +260,10 @@ class Chart {
     this.report.zoom(bigger)
   }
 
-  /* hide hides the canvas */
-  hide () {
-    this.visible = false
-    Doc.hide(this.canvas)
-  }
-
-  /* show shows the canvas */
-  show () {
-    this.visible = true
-    Doc.show(this.canvas)
-    this.resize(this.parent.clientHeight)
-  }
-
   /* The market handler will call unattach when the markets page is unloaded. */
   unattach () {
-    unbind(window, 'resize', this.boundResizer)
+    for (const u of this.unattachers) u()
+    this.unattachers = []
   }
 
   /* render must be implemented by the child class. */
@@ -270,10 +272,10 @@ class Chart {
   }
 
   /* applyLabelStyle applies the style used for axis tick labels. */
-  applyLabelStyle () {
+  applyLabelStyle (fontSize?: number) {
     this.ctx.textAlign = 'center'
     this.ctx.textBaseline = 'middle'
-    this.ctx.font = '12px \'sans\', sans-serif'
+    this.ctx.font = `${fontSize ?? '14'}px 'sans', sans-serif`
     this.ctx.fillStyle = this.theme.axisLabel
   }
 
@@ -343,11 +345,12 @@ class Chart {
    * provided plot region.
    */
   doYLabels (region: Region, step: number, unit: string, valFmt?: (v: number) => string) {
+    this.applyLabelStyle()
     const yLabels = makeLabels(this.ctx, region.height(), this.dataExtents.y.min,
       this.dataExtents.y.max, 50, step, unit, valFmt)
 
     // Reassign the width of the y-label column to accommodate the widest text.
-    const yAxisWidth = (yLabels.widest || 0) * 1.5
+    const yAxisWidth = (yLabels.widest || 0) + 20 /* x padding */
     this.yRegion.extents.x.max = yAxisWidth
     this.yRegion.extents.y.max = region.extents.y.max
 
@@ -404,7 +407,7 @@ export class DepthChart extends Chart {
       sells: []
     }
     this.setZoomBttns() // can't wait for requestAnimationFrame -> resized
-    this.resize(parent.clientHeight)
+    this.resize()
   }
 
   // setZoomBttns creates new regions for zoom in and zoom out buttons. It is
@@ -481,11 +484,13 @@ export class DepthChart extends Chart {
    */
   render () {
     // if connection fails it is not possible to get book.
-    if (!this.book || !this.visible) return
+    if (!this.book || !this.visible || this.canvas.width === 0) {
+      this.renderScheduled = true
+      return
+    }
 
     this.clear()
     // if (!this.book || this.book.empty()) return
-
     const ctx = this.ctx
     const mousePos = this.mousePos
     const buys = this.book.buys
@@ -841,7 +846,7 @@ export class CandleChart extends Chart {
     this.reporters = reporters
     this.zoomLevel = 1
     this.numToShow = 100
-    this.resize(parent.clientHeight)
+    this.resize()
   }
 
   /* resized is called when the window or parent element are resized. */
@@ -877,7 +882,10 @@ export class CandleChart extends Chart {
   /* render draws the chart */
   render () {
     const data = this.data
-    if (!data || !this.visible) return
+    if (!data || !this.visible || this.canvas.width === 0) {
+      this.renderScheduled = true
+      return
+    }
     const candleWidth = data.ms
     const mousePos = this.mousePos
     const allCandles = data.candles || []
@@ -1023,6 +1031,125 @@ export class CandleChart extends Chart {
   }
 }
 
+interface WaveOpts {
+  message?: string
+  backgroundColor?: string | boolean // true for <body> background color
+}
+
+/* Wave is a loading animation that displays a colorful line that oscillates */
+export class Wave extends Chart {
+  ani: Animation
+  size: [number, number]
+  region: Region
+  colorShift: number
+  opts: WaveOpts
+  msgRegion: Region
+  fontSize: number
+
+  constructor (parent: HTMLElement, opts?: WaveOpts) {
+    super(parent, {
+      resize: () => this.resized(),
+      click: (/* e: MouseEvent */) => { /* pass */ },
+      zoom: (/* bigger: boolean */) => { /* pass */ }
+    })
+    this.canvas.classList.add('fill-abs')
+    this.canvas.style.zIndex = '5'
+
+    this.opts = opts ?? {}
+
+    const period = 1500 // ms
+    const start = Math.random() * period
+    this.colorShift = Math.random() * 360
+
+    // y = A*cos(k*x + theta*t + c)
+    // combine three waves with different periods and speeds and phases.
+    const amplitudes = [1, 0.65, 0.75]
+    const ks = [3, 3, 2]
+    const speeds = [Math.PI, Math.PI * 10 / 9, Math.PI / 2.5]
+    const phases = [0, 0, Math.PI * 1.5]
+    const n = 75
+    const single = (n: number, angularX: number, angularTime: number): number => {
+      return amplitudes[n] * Math.cos(ks[n] * angularX + speeds[n] * angularTime + phases[n])
+    }
+    const value = (x: number, angularTime: number): number => {
+      const angularX = x * Math.PI * 2
+      return (single(0, angularX, angularTime) + single(1, angularX, angularTime) + single(2, angularX, angularTime)) / 3
+    }
+    this.resize()
+    this.ani = new Animation(Animation.Forever, () => {
+      const angularTime = (new Date().getTime() - start) / period * Math.PI * 2
+      const values = []
+      for (let i = 0; i < n; i++) {
+        values.push(value(i / (n - 1), angularTime))
+      }
+      this.drawValues(values)
+    })
+  }
+
+  resized () {
+    const opts = this.opts
+    const [maxW, maxH] = [150, 100]
+    const [cw, ch] = [this.canvas.width, this.canvas.height]
+    let [w, h] = [cw * 0.8, ch * 0.8]
+    if (w > maxW) w = maxW
+    if (h > maxH) h = maxH
+    let [l, t] = [(cw - w) / 2, (ch - h) / 2]
+    if (opts.message) {
+      this.fontSize = clamp(h * 0.15, 10, 14)
+      this.applyLabelStyle(this.fontSize)
+      const ypad = this.fontSize * 0.5
+      const halfH = (this.fontSize / 2) + ypad
+      t -= halfH
+      this.msgRegion = new Region(this.ctx, new Extents(0, cw, t + h, t + h + 2 * halfH))
+    }
+    this.region = new Region(this.ctx, new Extents(l, l + w, t, t + h))
+  }
+
+  drawValues (values: number[]) {
+    if (!this.region) return
+    this.clear()
+    const hsl = (h: number) => `hsl(${h}, 35%, 50%)`
+
+    const { region, msgRegion, canvas: { width: w, height: h }, opts: { backgroundColor: bg, message: msg }, colorShift, ctx } = this
+
+    if (bg) {
+      if (bg === true) ctx.fillStyle = window.getComputedStyle(document.body, null).getPropertyValue('background-color')
+      else ctx.fillStyle = bg
+      ctx.fillRect(0, 0, w, h)
+    }
+
+    region.plot(new Extents(0, 1, -1, 1), (ctx: CanvasRenderingContext2D, t: Translator) => {
+      ctx.lineWidth = 4
+      ctx.lineCap = 'round'
+
+      const shift = colorShift + (new Date().getTime() % 2000) / 2000 * 360 // colors move with frequency 1 / 2s
+      const grad = ctx.createLinearGradient(t.x(0), 0, t.x(1), 0)
+      grad.addColorStop(0, hsl(shift))
+      ctx.strokeStyle = grad
+
+      ctx.beginPath()
+      ctx.moveTo(t.x(0), t.y(values[0]))
+      for (let i = 1; i < values.length; i++) {
+        const prog = i / (values.length - 1)
+        grad.addColorStop(prog, hsl(prog * 300 + shift))
+        ctx.lineTo(t.x(prog), t.y(values[i]))
+      }
+      ctx.stroke()
+    })
+    if (!msg) return
+    msgRegion.plot(new Extents(0, 1, 0, 1), (ctx: CanvasRenderingContext2D, t: Translator) => {
+      ctx.fillText(msg, t.x(0.5), t.y(0.5), this.msgRegion.width())
+    })
+  }
+
+  render () { /* pass */ }
+
+  stop () {
+    this.ani.stop()
+    this.canvas.remove()
+  }
+}
+
 /*
  * Extents holds a min and max in both the x and y directions, and provides
  * getters for related data.
diff --git a/client/webserver/site/src/js/doc.ts b/client/webserver/site/src/js/doc.ts
index 76277b41f0..e8088d17ce 100644
--- a/client/webserver/site/src/js/doc.ts
+++ b/client/webserver/site/src/js/doc.ts
@@ -384,7 +384,7 @@ export class Animation {
   done: (() => void) | undefined
   endAnimation: boolean
   thread: Promise<void>
-  Forever: number
+  static Forever: number
 
   constructor (duration: number, f: (progress: number) => void, easingAlgo?: string, done?: () => void) {
     this.done = done
@@ -399,7 +399,7 @@ export class Animation {
     duration = duration >= 0 ? duration : 1000 * 86400 * 365 * 10 // 10 years, in ms
     const easer = easingAlgo ? Easing[easingAlgo] : Easing.linear
     const start = new Date().getTime()
-    const end = start + duration
+    const end = (duration === Animation.Forever) ? Number.MAX_SAFE_INTEGER : start + duration
     const range = end - start
     const frameDuration = 1000 / FPS
     let now = start
@@ -438,6 +438,7 @@ export class Animation {
     if (this.done) this.done()
   }
 }
+Animation.Forever = -1
 
 /* Easing algorithms for animations. */
 export const Easing: Record<string, (t: number) => number> = {
diff --git a/client/webserver/site/src/js/forms.ts b/client/webserver/site/src/js/forms.ts
index d44ae65b0f..d1e4c0f390 100644
--- a/client/webserver/site/src/js/forms.ts
+++ b/client/webserver/site/src/js/forms.ts
@@ -3,6 +3,7 @@ import { postJSON } from './http'
 import State from './state'
 import * as intl from './locales'
 import * as OrderUtil from './orderutil'
+import { Wave } from './charts'
 import {
   app,
   PasswordCache,
@@ -130,10 +131,10 @@ export class NewWalletForm {
       walletType: walletType,
       parentForm: parentForm
     }
-    const loaded = app().loading(this.page.mainForm)
 
+    const ani = new Wave(this.page.mainForm, { backgroundColor: true })
     const res = await postJSON('/api/newwallet', createForm)
-    loaded()
+    ani.stop()
     return res
   }
 
@@ -1562,6 +1563,72 @@ export class LoginForm {
   }
 }
 
+const traitNewAddresser = 1 << 1
+
+/*
+ * DepositAddress displays a deposit address, a QR code, and a button to
+ * generate a new address (if supported).
+ */
+export class DepositAddress {
+  form: PageElement
+  page: Record<string, PageElement>
+  assetID: number
+
+  constructor (form: PageElement) {
+    this.form = form
+    const page = this.page = Doc.idDescendants(form)
+    Doc.bind(page.newDepAddrBttn, 'click', async () => { this.newDepositAddress() })
+    Doc.bind(page.copyAddressBtn, 'click', () => { this.copyAddress() })
+  }
+
+  /* Display a deposit address. */
+  async setAsset (assetID: number) {
+    this.assetID = assetID
+    const page = this.page
+    Doc.hide(page.depositErr)
+    const asset = app().assets[assetID]
+    page.depositLogo.src = Doc.logoPath(asset.symbol)
+    const wallet = app().walletMap[assetID]
+    page.depositName.textContent = asset.name
+    page.depositAddress.textContent = wallet.address
+    page.qrcode.src = `/generateqrcode?address=${wallet.address}`
+    if ((wallet.traits & traitNewAddresser) !== 0) Doc.show(page.newDepAddrBttn)
+    else Doc.hide(page.newDepAddrBttn)
+  }
+
+  /* Fetch a new address from the wallet. */
+  async newDepositAddress () {
+    const page = this.page
+    Doc.hide(page.depositErr)
+    const loaded = app().loading(this.form)
+    const res = await postJSON('/api/depositaddress', {
+      assetID: this.assetID
+    })
+    loaded()
+    if (!app().checkResponse(res)) {
+      page.depositErr.textContent = res.msg
+      Doc.show(page.depositErr)
+      return
+    }
+    page.depositAddress.textContent = res.address
+    page.qrcode.src = `/generateqrcode?address=${res.address}`
+  }
+
+  async copyAddress () {
+    const page = this.page
+    navigator.clipboard.writeText(page.depositAddress.textContent || '')
+      .then(() => {
+        Doc.show(page.copyAlert)
+        setTimeout(() => {
+          Doc.hide(page.copyAlert)
+        }, 800)
+      })
+      .catch((reason) => {
+        console.error('Unable to copy: ', reason)
+      })
+  }
+}
+
 const animationLength = 300
 
 /* Swap form1 for form2 with an animation. */
diff --git a/client/webserver/site/src/js/locales.ts b/client/webserver/site/src/js/locales.ts
index ab72010a01..239db32f37 100644
--- a/client/webserver/site/src/js/locales.ts
+++ b/client/webserver/site/src/js/locales.ts
@@ -6,7 +6,6 @@ export const ID_SET_BUTTON_BUY = 'ID_SET_BUTTON_BUY'
 export const ID_SET_BUTTON_SELL = 'ID_SET_BUTTON_SELL'
 export const ID_OFF = 'ID_OFF'
 export const ID_READY = 'ID_READY'
-export const ID_LOCKED = 'ID_LOCKED'
 export const ID_NOWALLET = 'ID_NOWALLET'
 export const ID_DISABLED_MSG = 'ID_DISABLED_MSG'
 export const ID_WALLET_SYNC_PROGRESS = 'ID_WALLET_SYNC_PROGRESS'
@@ -61,6 +60,12 @@ export const ID_BUYING = 'ID_BUYING'
 export const ID_WALLET_DISABLED_MSG = 'WALLET_DISABLED'
 export const ID_WALLET_ENABLED_MSG = 'WALLET_ENABLED'
 export const ID_ACTIVE_ORDERS_ERR_MSG = 'ACTIVE_ORDERS_ERR_MSG'
+export const ID_AVAILABLE = 'AVAILABLE'
+export const ID_LOCKED = 'LOCKED'
+export const ID_IMMATURE = 'IMMATURE'
+export const ID_FEE_BALANCE = 'FEE_BALANCE'
+export const ID_CANDLES_LOADING = 'CANDLES_LOADING'
+export const ID_DEPTH_LOADING = 'DEPTH_LOADING'
 
 export const enUS: Locale = {
   [ID_NO_PASS_ERROR_MSG]: 'password cannot be empty',
@@ -123,7 +128,12 @@ export const enUS: Locale = {
   [ID_WALLET_ENABLED_MSG]: '{{ assetName }} Wallet Enabled',
   [ID_WALLET_DISABLED_MSG]: '{{ assetName }} Wallet Disabled',
   [ID_DISABLED_MSG]: 'wallet is disabled',
-  [ID_ACTIVE_ORDERS_ERR_MSG]: '{{ assetName }} wallet is actively managing orders'
+  [ID_ACTIVE_ORDERS_ERR_MSG]: '{{ assetName }} wallet is actively managing orders',
+  [ID_AVAILABLE]: 'available',
+  [ID_IMMATURE]: 'immature',
+  [ID_FEE_BALANCE]: 'fee balance',
+  [ID_CANDLES_LOADING]: 'waiting for candlesticks',
+  [ID_DEPTH_LOADING]: 'retrieving depth data'
 }
 
 export const ptBR: Locale = {
@@ -175,7 +185,9 @@ export const ptBR: Locale = {
   [ID_CHANGE_WALLET_TYPE]: 'trocar o tipo de carteira',
   [ID_KEEP_WALLET_TYPE]: 'Não trocara tipo de carteira',
   [WALLET_READY]: 'Carteira Pronta',
-  [SETUP_NEEDED]: 'Configuração Necessária'
+  [SETUP_NEEDED]: 'Configuração Necessária',
+  [ID_AVAILABLE]: 'disponível',
+  [ID_IMMATURE]: 'imaturo'
 }
 
 export const zhCN: Locale = {
@@ -213,7 +225,9 @@ export const zhCN: Locale = {
   [ID_EPOCH]: '时间',
   [ID_API_ERROR]: '接口错误',
   [ID_ADD]: '加',
-  [ID_CREATE]: '创建'
+  [ID_CREATE]: '创建',
+  [ID_AVAILABLE]: '可用',
+  [ID_IMMATURE]: '不成熟'
 }
 
 export const plPL: Locale = {
@@ -265,7 +279,9 @@ export const plPL: Locale = {
   [ID_CHANGE_WALLET_TYPE]: 'zmień typ portfela',
   [ID_KEEP_WALLET_TYPE]: 'nie zmieniaj typu portfela',
   [WALLET_READY]: 'Portfel jest gotowy',
-  [SETUP_NEEDED]: 'Potrzebna konfiguracja'
+  [SETUP_NEEDED]: 'Potrzebna konfiguracja',
+  [ID_AVAILABLE]: 'dostępne',
+  [ID_IMMATURE]: 'niedojrzałe'
 }
 
 export const deDE: Locale = {
diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts
index a5b03d0a23..81ea33eade 100644
--- a/client/webserver/site/src/js/markets.ts
+++ b/client/webserver/site/src/js/markets.ts
@@ -9,10 +9,17 @@ import {
   CandleReporters,
   MouseReport,
   VolumeReport,
-  DepthMarker
+  DepthMarker,
+  Wave
 } from './charts'
 import { postJSON } from './http'
-import { NewWalletForm, UnlockWalletForm, AccelerateOrderForm, bind as bindForm } from './forms'
+import {
+  NewWalletForm,
+  UnlockWalletForm,
+  AccelerateOrderForm,
+  DepositAddress,
+  bind as bindForm
+} from './forms'
 import * as OrderUtil from './orderutil'
 import ws from './ws'
 import * as intl from './locales'
@@ -48,7 +55,6 @@ import {
   MiniOrder,
   RemainderUpdate,
   ConnEventNote,
-  Spot,
   OrderOption,
   ConnectionStatus,
   RecentMatch
@@ -67,19 +73,20 @@ const unmarketRoute = 'unmarket'
 const epochMatchSummaryRoute = 'epoch_match_summary'
 
 const lastMarketKey = 'selectedMarket'
-const chartRatioKey = 'chartRatio'
 const depthZoomKey = 'depthZoom'
 
 const animationLength = 500
 
 const anHour = 60 * 60 * 1000 // milliseconds
 
-const depthChart = 'depth_chart'
-const candleChart = 'candle_chart'
-
 const check = document.createElement('span')
 check.classList.add('ico-check')
 
+const buyBtnClass = 'buygreen-bg'
+const sellBtnClass = 'sellred-bg'
+
+const fiveMinBinKey = '5m'
+
 const percentFormatter = new Intl.NumberFormat(document.documentElement.lang, {
   minimumFractionDigits: 1,
   maximumFractionDigits: 2
@@ -88,8 +95,10 @@ const percentFormatter = new Intl.NumberFormat(document.documentElement.lang, {
 const parentIDNone = 0xFFFFFFFF
 
 interface MetaOrder {
-  row: HTMLElement
-  order: Order
+  div: HTMLElement
+  header: Record<string, PageElement>
+  details: Record<string, PageElement>
+  ord: Order
   cancelling?: boolean
   status?: number
 }
@@ -118,28 +127,6 @@ interface CurrentMarket {
   rateConversionFactor: number
 }
 
-interface BalanceWidgetElement {
-  id: number
-  parentID: number
-  cfg: Asset | null
-  logo: PageElement
-  symbol: PageElement
-  avail: PageElement
-  newWalletRow: PageElement
-  newWalletBttn: PageElement
-  walletPendingRow: PageElement
-  locked: PageElement
-  immature: PageElement
-  parentBal: PageElement
-  parentIcon: PageElement
-  unsupported: PageElement
-  expired: PageElement
-  connect: PageElement
-  spinner: PageElement
-  iconBox: PageElement
-  stateIcons: WalletIcons
-}
-
 interface LoadTracker {
   loaded: () => void
   timer: number
@@ -149,10 +136,14 @@ interface OrderRow extends HTMLElement {
   manager: OrderTableRowManager
 }
 
+interface StatsDisplay {
+  row: PageElement
+  tmpl: Record<string, PageElement>
+}
+
 export default class MarketsPage extends BasePage {
   page: Record<string, PageElement>
   main: HTMLElement
-  loaded: (() => void) | null
   maxLoaded: (() => void) | null
   maxOrderUpdateCounter: number
   market: CurrentMarket
@@ -169,12 +160,9 @@ export default class MarketsPage extends BasePage {
   depthLines: Record<string, DepthLine[]>
   activeMarkerRate: number | null
   hovers: HTMLElement[]
-  ordersSortKey: string
-  ordersSortDirection: 1 | -1
   ogTitle: string
   depthChart: DepthChart
   candleChart: CandleChart
-  currentChart: string
   candleDur: string
   balanceWgt: BalanceWidget
   marketList: MarketList
@@ -182,6 +170,7 @@ export default class MarketsPage extends BasePage {
   baseUnits: NodeListOf<HTMLElement>
   unlockForm: UnlockWalletForm
   newWalletForm: NewWalletForm
+  depositAddrForm: DepositAddress
   keyup: (e: KeyboardEvent) => void
   secondTicker: number
   candlesLoading: LoadTracker | null
@@ -189,13 +178,14 @@ export default class MarketsPage extends BasePage {
   recentMatches: RecentMatch[]
   recentMatchesSortKey: string
   recentMatchesSortDirection: 1 | -1
+  stats: [StatsDisplay, StatsDisplay]
+  loadingAnimations: { candles?: Wave, depth?: Wave }
 
   constructor (main: HTMLElement, data: any) {
     super()
     const page = this.page = Doc.idDescendants(main)
     this.main = main
     if (!this.main.parentElement) return // Not gonna happen, but TypeScript cares.
-    this.loaded = app().loading(this.main.parentElement)
     // There may be multiple pending updates to the max order. This makes sure
     // that the screen is updated with the most recent one.
     this.maxOrderUpdateCounter = 0
@@ -207,13 +197,8 @@ export default class MarketsPage extends BasePage {
       input: []
     }
     this.hovers = []
-    // 'Your Orders' list sort key and direction.
-    this.ordersSortKey = 'submitTime'
     // 'Recent Matches' list sort key and direction.
     this.recentMatchesSortKey = 'stamp'
-    // 1 if sorting ascendingly, -1 if sorting descendingly.
-    this.ordersSortDirection = 1
-    // same as this.ordersSortDirection.
     this.recentMatchesSortDirection = 1
     // store original title so we can re-append it when updating market value.
     this.ogTitle = document.title
@@ -224,39 +209,44 @@ export default class MarketsPage extends BasePage {
       mouse: (r: MouseReport) => { this.reportDepthMouse(r) },
       zoom: (z: number) => { this.reportDepthZoom(z) }
     }
-    this.depthChart = new DepthChart(page.marketChart, depthReporters, State.fetch(depthZoomKey))
+    this.depthChart = new DepthChart(page.depthChart, depthReporters, State.fetch(depthZoomKey))
 
     const candleReporters: CandleReporters = {
       mouse: c => { this.reportMouseCandle(c) }
     }
-    this.candleChart = new CandleChart(page.marketChart, candleReporters)
+    this.candleChart = new CandleChart(page.candlesChart, candleReporters)
 
     const success = () => { /* do nothing */ }
     // Do not call cleanTemplates before creating the AccelerateOrderForm
     this.accelerateOrderForm = new AccelerateOrderForm(page.accelerateForm, success)
 
     // TODO: Store user's state and reload last known configuration.
-    this.candleChart.hide()
-    this.currentChart = depthChart
-    this.candleDur = ''
+    this.candleDur = fiveMinBinKey
 
     // Set up the BalanceWidget.
     {
-      const wgt = this.balanceWgt = new BalanceWidget(page.balanceTable)
+      page.walletInfoTmpl.removeAttribute('id')
+      const bWidget = page.walletInfoTmpl
+      const qWidget = page.walletInfoTmpl.cloneNode(true) as PageElement
+      bWidget.after(qWidget)
+      const wgt = this.balanceWgt = new BalanceWidget(bWidget, qWidget)
       const baseIcons = wgt.base.stateIcons.icons
       const quoteIcons = wgt.quote.stateIcons.icons
-      bind(wgt.base.connect, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
-      bind(wgt.quote.connect, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
-      bind(wgt.base.expired, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
-      bind(wgt.quote.expired, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
+      bind(wgt.base.tmpl.connect, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
+      bind(wgt.quote.tmpl.connect, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
+      bind(wgt.base.tmpl.expired, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
+      bind(wgt.quote.tmpl.expired, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
       bind(baseIcons.sleeping, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
       bind(quoteIcons.sleeping, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
       bind(baseIcons.locked, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
       bind(quoteIcons.locked, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
       bind(baseIcons.disabled, 'click', () => { this.showToggleWalletStatus(this.market.base) })
       bind(quoteIcons.disabled, 'click', () => { this.showToggleWalletStatus(this.market.quote) })
-      bind(wgt.base.newWalletBttn, 'click', () => { this.showCreate(this.market.base) })
-      bind(wgt.quote.newWalletBttn, 'click', () => { this.showCreate(this.market.quote) })
+      bind(wgt.base.tmpl.newWalletBttn, 'click', () => { this.showCreate(this.market.base) })
+      bind(wgt.quote.tmpl.newWalletBttn, 'click', () => { this.showCreate(this.market.quote) })
+      Doc.bind(wgt.base.tmpl.walletAddr, 'click', () => { this.showDeposit(this.market.base.id) })
+      Doc.bind(wgt.quote.tmpl.walletAddr, 'click', () => { this.showDeposit(this.market.quote.id) })
+      this.depositAddrForm = new DepositAddress(page.deposit)
     }
 
     // Bind toggle wallet status form.
@@ -264,18 +254,7 @@ export default class MarketsPage extends BasePage {
 
     // Prepare templates for the buy and sell tables and the user's order table.
     OrderUtil.setOptionTemplates(page)
-    Doc.cleanTemplates(page.rowTemplate, page.liveTemplate, page.durBttnTemplate, page.booleanOptTmpl, page.rangeOptTmpl, page.orderOptTmpl)
-
-    // Prepare the list of markets.
-    this.marketList = new MarketList(page.marketList)
-    for (const xc of this.marketList.xcSections) {
-      if (!xc.marketRows) continue
-      for (const row of xc.marketRows) {
-        bind(row.node, 'click', () => {
-          this.setMarket(xc.host, row.mkt.baseid, row.mkt.quoteid)
-        })
-      }
-    }
+    Doc.cleanTemplates(page.rowTemplate, page.durBttnTemplate, page.booleanOptTmpl, page.rangeOptTmpl, page.orderOptTmpl, page.userOrderTmpl)
 
     // Store the elements that need their ticker changed when the market
     // changes.
@@ -285,8 +264,8 @@ export default class MarketsPage extends BasePage {
     // Buttons to set order type and side.
     bind(page.buyBttn, 'click', () => {
       swapBttns(page.sellBttn, page.buyBttn)
-      page.submitBttn.classList.remove('sellred')
-      page.submitBttn.classList.add('buygreen')
+      page.submitBttn.classList.remove(sellBtnClass)
+      page.submitBttn.classList.add(buyBtnClass)
       page.maxLbl.textContent = intl.prep(intl.ID_BUY)
       this.setOrderBttnText()
       this.setOrderVisibility()
@@ -294,8 +273,8 @@ export default class MarketsPage extends BasePage {
     })
     bind(page.sellBttn, 'click', () => {
       swapBttns(page.buyBttn, page.sellBttn)
-      page.submitBttn.classList.add('sellred')
-      page.submitBttn.classList.remove('buygreen')
+      page.submitBttn.classList.add(sellBtnClass)
+      page.submitBttn.classList.remove(buyBtnClass)
       page.maxLbl.textContent = intl.prep(intl.ID_SELL)
       this.setOrderBttnText()
       this.setOrderVisibility()
@@ -326,12 +305,6 @@ export default class MarketsPage extends BasePage {
       } else page.lotField.value = String(this.market.maxBuys[this.adjustedRate()].swap.lots)
       this.lotChanged()
     })
-    bind(page.depthBttn, 'click', () => {
-      this.depthChartSelected()
-    })
-    bind(page.candlestickBttn, 'click', () => {
-      this.candleChartSelected()
-    })
 
     Doc.disableMouseWheel(page.rateField, page.lotField, page.qtyField, page.mktBuyField)
 
@@ -367,10 +340,7 @@ export default class MarketsPage extends BasePage {
     // Order detail view
     Doc.bind(page.vFeeDetails, 'click', () => this.showForm(page.vDetailPane))
     Doc.bind(page.closeDetailPane, 'click', () => this.showVerifyForm())
-    // Bind active orders list's header sort events.
-    page.liveTable.querySelectorAll('[data-ordercol]')
-      .forEach((th: HTMLElement) => bind(th, 'click', () => setOrdersSortCol(th.dataset.ordercol || '')))
-    // Bind active orders list's header sort events.
+    // // Bind active orders list's header sort events.
     page.recentMatchesTable.querySelectorAll('[data-ordercol]')
       .forEach((th: HTMLElement) => bind(
         th, 'click', () => setRecentMatchesSortCol(th.dataset.ordercol || '')
@@ -389,44 +359,17 @@ export default class MarketsPage extends BasePage {
       setRecentMatchesSortColClasses()
     }
 
-    const setOrdersSortCol = (key: string) => {
-      // First unset header's current sorted col classes.
-      unsetOrdersSortColClasses()
-      // If already sorting by key change sort direction.
-      if (this.ordersSortKey === key) {
-        this.ordersSortDirection *= -1
-      } else {
-        // Otherwise update sort key and set default direction to ascending.
-        this.ordersSortKey = key
-        this.ordersSortDirection = 1
-      }
-      this.refreshActiveOrders()
-      // Set header's new sorted col classes.
-      setOrdersSortColClasses()
-    }
-
     // sortClassByDirection receives a sort direction and return a class based on it.
     const sortClassByDirection = (element: 1 | -1) => {
       if (element === 1) return 'sorted-asc'
       return 'sorted-dsc'
     }
 
-    const unsetOrdersSortColClasses = () => {
-      page.liveTable.querySelectorAll('[data-ordercol]')
-        .forEach(th => th.classList.remove('sorted-asc', 'sorted-dsc'))
-    }
-
     const unsetRecentMatchesSortColClasses = () => {
       page.recentMatchesTable.querySelectorAll('[data-ordercol]')
         .forEach(th => th.classList.remove('sorted-asc', 'sorted-dsc'))
     }
 
-    const setOrdersSortColClasses = () => {
-      const key = this.ordersSortKey
-      const sortCls = sortClassByDirection(this.ordersSortDirection)
-      Doc.safeSelector(page.liveTable, `[data-ordercol=${key}]`).classList.add(sortCls)
-    }
-
     const setRecentMatchesSortColClasses = () => {
       const key = this.recentMatchesSortKey
       const sortCls = sortClassByDirection(this.recentMatchesSortDirection)
@@ -434,7 +377,6 @@ export default class MarketsPage extends BasePage {
     }
 
     // Set default's sorted col header classes.
-    setOrdersSortColClasses()
     setRecentMatchesSortColClasses()
 
     const closePopups = () => {
@@ -473,8 +415,8 @@ export default class MarketsPage extends BasePage {
     bind(page.rateField, 'keyup', () => { this.previewQuoteAmt(true) })
 
     // Market search input bindings.
-    bind(page.marketSearch, 'change', () => { this.filterMarkets() })
-    bind(page.marketSearch, 'keyup', () => { this.filterMarkets() })
+    bind(page.marketSearchV1, 'change', () => { this.filterMarkets() })
+    bind(page.marketSearchV1, 'keyup', () => { this.filterMarkets() })
 
     const clearChartLines = () => {
       this.depthLines.hover = []
@@ -482,45 +424,37 @@ export default class MarketsPage extends BasePage {
     }
     bind(page.buyRows, 'mouseleave', clearChartLines)
     bind(page.sellRows, 'mouseleave', clearChartLines)
-    bind(page.liveList, 'mouseleave', () => {
+    bind(page.userOrders, 'mouseleave', () => {
       this.activeMarkerRate = null
       this.setDepthMarkers()
     })
 
-    // Load the user's layout preferences.
-    const setChartRatio = (r: number) => {
-      if (r > 0.7) r = 0.7
-      else if (r < 0.25) r = 0.25
-
-      const h = r * (this.main.clientHeight - app().header.offsetHeight)
-      page.marketChart.style.height = `${h}px`
-
-      this.depthChart.resize(h)
-      this.candleChart.resize(h)
-    }
-    const chartDivRatio = State.fetch(chartRatioKey)
-    if (chartDivRatio) {
-      setChartRatio(chartDivRatio)
-    }
-    // Bind chart resizing.
-    bind(page.chartResizer, 'mousedown', (e: MouseEvent) => {
-      if (e.button !== 0) return
-      e.preventDefault()
-      let chartRatio: number
-      const trackMouse = (ee: MouseEvent) => {
-        ee.preventDefault()
-        const box = page.rightSide.getBoundingClientRect()
-        const h = box.bottom - box.top
-        chartRatio = (ee.pageY - box.top) / h
-        setChartRatio(chartRatio)
-      }
-      bind(document, 'mousemove', trackMouse)
-      bind(document, 'mouseup', () => {
-        if (chartRatio) State.store(chartRatioKey, chartRatio)
-        Doc.unbind(document, 'mousemove', trackMouse)
-      })
+    Doc.bind(page.leftHider, 'click', () => {
+      page.leftColumnV1.classList.remove('default')
+      page.leftColumnV1.classList.add('stashed')
     })
 
+    const stats0 = page.marketStatsV1
+    const stats1 = stats0.cloneNode(true) as PageElement
+    Doc.hide(stats0, stats1)
+    stats1.removeAttribute('id')
+    app().headerSpace.appendChild(stats1)
+    this.stats = [{ row: stats0, tmpl: Doc.parseTemplate(stats0) }, { row: stats1, tmpl: Doc.parseTemplate(stats1) }]
+    for (const s of this.stats) {
+      Doc.bind(s.tmpl.marketSelect, 'click', () => {
+        page.leftColumnV1.classList.remove('stashed', 'default')
+      })
+    }
+
+    this.marketList = new MarketList(page.marketListV1)
+    // Prepare the list of markets.
+    for (const row of this.marketList.markets) {
+      bind(row.node, 'click', () => {
+        this.startLoadingAnimations()
+        this.setMarket(row.mkt.xc.host, row.mkt.baseid, row.mkt.quoteid)
+      })
+    }
+
     // Notification filters.
     app().registerNoteFeeder({
       order: (note: OrderNote) => { this.handleOrderNote(note) },
@@ -531,6 +465,23 @@ export default class MarketsPage extends BasePage {
       spots: (note: SpotPriceNote) => { this.handlePriceUpdate(note) }
     })
 
+    this.loadingAnimations = {}
+    this.startLoadingAnimations()
+
+    // Start a ticker to update time-since values.
+    this.secondTicker = window.setInterval(() => {
+      for (const mord of Object.values(this.metaOrders)) {
+        mord.details.age.textContent = Doc.timeSince(mord.ord.submitTime)
+      }
+      for (const td of Doc.applySelector(page.recentMatchesLiveList, '[data-tmpl=age]')) {
+        td.textContent = Doc.timeSince(parseFloat(td.dataset.sinceStamp ?? '0'))
+      }
+    }, 1000)
+
+    this.init(data)
+  }
+
+  async init (data: any) {
     // Fetch the first market in the list, or the users last selected market, if
     // it exists.
     let selected
@@ -540,23 +491,26 @@ export default class MarketsPage extends BasePage {
       selected = State.fetch(lastMarketKey)
     }
     if (!selected || !this.marketList.exists(selected.host, selected.base, selected.quote)) {
-      selected = this.marketList.first()
+      const first = this.marketList.first()
+      if (first) selected = { host: first.mkt.xc.host, base: first.mkt.baseid, quote: first.mkt.quoteid }
     }
-    this.setMarket(selected.host, selected.base, selected.quote)
-
-    // Start a ticker to update time-since values.
-    this.secondTicker = window.setInterval(() => {
-      for (const metaOrder of Object.values(this.metaOrders)) {
-        const td = Doc.tmplElement(metaOrder.row, 'age')
-        td.textContent = Doc.timeSince(metaOrder.order.submitTime)
-      }
-    }, 1000)
+    if (selected) this.setMarket(selected.host, selected.base, selected.quote)
 
     // set the initial state for the registration status
     this.setRegistrationStatusVisibility()
     this.setBalanceVisibility()
   }
 
+  startLoadingAnimations () {
+    const { page, loadingAnimations: anis, depthChart, candleChart } = this
+    depthChart.canvas.classList.add('invisible')
+    candleChart.canvas.classList.add('invisible')
+    if (anis.candles) anis.candles.stop()
+    anis.candles = new Wave(page.candlesChart, { message: intl.prep(intl.ID_CANDLES_LOADING) })
+    if (anis.depth) anis.depth.stop()
+    anis.depth = new Wave(page.depthChart, { message: intl.prep(intl.ID_CANDLES_LOADING) })
+  }
+
   /* isSell is true if the user has selected sell in the order options. */
   isSell () {
     return this.page.sellBttn.classList.contains('selected')
@@ -572,6 +526,50 @@ export default class MarketsPage extends BasePage {
     return !!this.market.dex.pendingFee
   }
 
+  /* setStats updates the currently displayed market and spot price. */
+  setStats (): void {
+    const selected = this.market
+    if (!selected) return
+    // Get an up-to-date Market.
+    const xc = app().exchanges[selected.dex.host]
+    const mkt = xc.markets[selected.cfg.name]
+    for (const s of this.stats) {
+      setMarketDetails(s.tmpl, mkt)
+      if (mkt.spot) {
+        const bconv = xc.assets[mkt.baseid].unitInfo.conventional.conversionFactor
+        s.tmpl.volume.textContent = fourSigFigs(mkt.spot.vol24 / bconv)
+        setPriceAndChange(s.tmpl, xc, mkt)
+      }
+    }
+  }
+
+  /* setHighLow calculates the high and low rates over the last 24 hours. */
+  setHighLow () {
+    const cache = this.market?.candleCaches[fiveMinBinKey]
+    if (!cache) {
+      for (const s of this.stats) {
+        s.tmpl.high.textContent = '-'
+        s.tmpl.low.textContent = '-'
+      }
+      return
+    }
+
+    // We'll eventually get this data in the spot, but for now, we must set it
+    // from candles.
+    let [high, low] = [0, 0]
+    for (let i = cache.candles.length - 1; i >= 0; i--) {
+      const c = cache.candles[i]
+      if (low === 0 || (c.lowRate > 0 && c.lowRate < low)) low = c.lowRate
+      if (c.highRate > high) high = c.highRate
+    }
+
+    const bconv = app().unitInfo(this.market.cfg.baseid, this.market.dex).conventional.conversionFactor
+    for (const s of this.stats) {
+      s.tmpl.high.textContent = high > 0 ? fourSigFigs(high / bconv) : '-'
+      s.tmpl.low.textContent = low > 0 ? fourSigFigs(low / bconv) : '-'
+    }
+  }
+
   /* assetsAreSupported is true if all the assets of the current market are
    * supported
    */
@@ -611,14 +609,14 @@ export default class MarketsPage extends BasePage {
     const page = this.page
     // By default the order form should be hidden, and only if market is set
     // and ready for trading the form should show up.
-    Doc.hide(page.orderForm)
+    Doc.hide(page.orderForm, page.orderTypeBttns)
     const feePaid = !this.hasFeePending()
     const assetsAreSupported = this.assetsAreSupported()
     const { base, quote } = this.market
     const hasWallets = base && app().assets[base.id].wallet && quote && app().assets[quote.id].wallet
 
     if (feePaid && assetsAreSupported && hasWallets) {
-      Doc.show(page.orderForm)
+      Doc.show(page.orderForm, page.orderTypeBttns)
     }
   }
 
@@ -636,6 +634,7 @@ export default class MarketsPage extends BasePage {
     const symbol = market.base ? market.quoteCfg.symbol : market.baseCfg.symbol
     page.loaderMsg.textContent = intl.prep(intl.ID_NOT_SUPPORTED, { asset: symbol.toUpperCase() })
     Doc.show(page.loaderMsg)
+    Doc.hide(page.noWallet)
   }
 
   /* setRegistrationStatusView sets the text content and class for the
@@ -727,18 +726,19 @@ export default class MarketsPage extends BasePage {
     page.qtyField.value = ''
     page.rateField.value = ''
 
+    Doc.hide(page.noWallet)
+
     // If we have not yet connected, there is no dex.assets or any other
     // exchange data, so just put up a message and wait for the connection to be
     // established, at which time handleConnNote will refresh and reload.
     if (!dex || !dex.markets || dex.connectionStatus !== ConnectionStatus.Connected) {
       page.chartErrMsg.textContent = intl.prep(intl.ID_CONNECTION_FAILED)
       Doc.show(page.chartErrMsg)
-      if (this.loaded) this.loaded()
-      this.main.style.opacity = '1'
-      Doc.hide(page.marketLoader)
       return
     }
 
+    for (const s of this.stats) Doc.show(s.row)
+
     const baseCfg = dex.assets[base]
     const quoteCfg = dex.assets[quote]
 
@@ -772,13 +772,19 @@ export default class MarketsPage extends BasePage {
       buyBalance: 0
     }
 
-    Doc.show(page.marketLoader)
-    if (!dex.candleDurs || dex.candleDurs.length === 0) this.currentChart = depthChart
-    if (this.currentChart === depthChart) ws.request('loadmarket', makeMarket(host, base, quote))
-    else {
-      if (dex.candleDurs.indexOf(this.candleDur) === -1) this.candleDur = dex.candleDurs[0]
-      this.loadCandles()
-    }
+    Doc.setVis(!(this.market.base.wallet && this.market.quote.wallet), page.noWallet)
+    this.setStats()
+    this.refreshRecentMatchesTable()
+
+    // if (!dex.candleDurs || dex.candleDurs.length === 0) this.currentChart = depthChart
+
+    // depth chart
+    ws.request('loadmarket', makeMarket(host, base, quote))
+
+    // candlesticks
+    this.candleDur = fiveMinBinKey
+    this.loadCandles()
+
     this.setLoaderMsgVisibility()
     this.setRegistrationStatusVisibility()
     this.resolveOrderFormVisibility()
@@ -819,25 +825,24 @@ export default class MarketsPage extends BasePage {
     while (this.hovers.length) (this.hovers.shift() as HTMLElement).classList.remove('hover')
     const page = this.page
     if (!r) {
-      Doc.hide(page.hoverData)
+      Doc.hide(page.hoverData, page.depthHoverData)
       return
     }
+    Doc.show(page.hoverData, page.depthHoverData)
 
     // If the user is hovered to within a small percent (based on chart width)
     // of a user order, highlight that order's row.
-    for (const metaOrd of Object.values(this.metaOrders)) {
-      const [row, ord] = [metaOrd.row, metaOrd.order]
+    for (const { div, ord } of Object.values(this.metaOrders)) {
       if (ord.status !== OrderUtil.StatusBooked) continue
       if (r.hoverMarkers.indexOf(ord.rate) > -1) {
-        row.classList.add('hover')
-        this.hovers.push(row)
+        div.classList.add('hover')
+        this.hovers.push(div)
       }
     }
 
     page.hoverPrice.textContent = Doc.formatCoinValue(r.rate)
     page.hoverVolume.textContent = Doc.formatCoinValue(r.depth)
     page.hoverVolume.style.color = r.dotColor
-    Doc.show(page.hoverData)
   }
 
   /*
@@ -852,16 +857,15 @@ export default class MarketsPage extends BasePage {
   reportMouseCandle (candle: Candle | null) {
     const page = this.page
     if (!candle) {
-      Doc.hide(page.hoverData)
+      Doc.hide(page.hoverData, page.candleHoverData)
       return
     }
-
+    Doc.show(page.hoverData, page.candleHoverData)
     page.candleStart.textContent = Doc.formatCoinValue(candle.startRate / this.market.rateConversionFactor)
     page.candleEnd.textContent = Doc.formatCoinValue(candle.endRate / this.market.rateConversionFactor)
     page.candleHigh.textContent = Doc.formatCoinValue(candle.highRate / this.market.rateConversionFactor)
     page.candleLow.textContent = Doc.formatCoinValue(candle.lowRate / this.market.rateConversionFactor)
     page.candleVol.textContent = Doc.formatCoinValue(candle.matchVolume, this.market.baseUnitInfo)
-    Doc.show(page.hoverData)
   }
 
   /*
@@ -1034,20 +1038,23 @@ export default class MarketsPage extends BasePage {
 
     page.maxFromLots.textContent = lots.toString()
     // XXX add plural into format details, so we don't need this
-    page.maxFromLotsLbl.textContent = lots === 1 ? 'lot' : 'lots'
+    page.maxFromLotsLbl.textContent = intl.prep(lots === 1 ? intl.ID_LOT : intl.ID_LOTS)
     if (!maxOrder) {
       Doc.hide(page.maxAboveZero)
       return
     }
     // Could add the estimatedFees here, but that might also be
     // confusing.
-    const [fromAsset, toAsset] = sell ? [this.market.base, this.market.quote] : [this.market.quote, this.market.base]
+    const fromAsset = sell ? this.market.base : this.market.quote
+    // DRAFT NOTE: Maybe just use base qty from lots.
     page.maxFromAmt.textContent = Doc.formatCoinValue(maxOrder.value || 0, fromAsset.unitInfo)
     page.maxFromTicker.textContent = fromAsset.symbol.toUpperCase()
     // Could subtract the maxOrder.redemptionFees here.
-    const toConversion = sell ? this.adjustedRate() / OrderUtil.RateEncodingFactor : OrderUtil.RateEncodingFactor / this.adjustedRate()
-    page.maxToAmt.textContent = Doc.formatCoinValue((maxOrder.value || 0) * toConversion, toAsset.unitInfo)
-    page.maxToTicker.textContent = toAsset.symbol.toUpperCase()
+    // The qty conversion doesn't fit well with the new design.
+    // TODO: Make this work somehow?
+    // const toConversion = sell ? this.adjustedRate() / OrderUtil.RateEncodingFactor : OrderUtil.RateEncodingFactor / this.adjustedRate()
+    // page.maxToAmt.textContent = Doc.formatCoinValue((maxOrder.value || 0) * toConversion, toAsset.unitInfo)
+    // page.maxToTicker.textContent = toAsset.symbol.toUpperCase()
   }
 
   /*
@@ -1084,6 +1091,9 @@ export default class MarketsPage extends BasePage {
       Doc.empty(this.page.sellRows)
       return
     }
+    Doc.show(this.page.epochLine)
+    if (this.loadingAnimations.depth) this.loadingAnimations.depth.stop()
+    this.depthChart.canvas.classList.remove('invisible')
     this.depthChart.set(this.book, cfg.lotsize, cfg.ratestep, baseUnitInfo, quoteUnitInfo)
     this.recentMatches = data.book.recentMatches ?? []
     this.refreshRecentMatchesTable()
@@ -1137,36 +1147,6 @@ export default class MarketsPage extends BasePage {
     }
   }
 
-  /*
-   * ordersSortCompare returns sort compare function according to the active
-   * sort key and direction.
-   */
-  ordersSortCompare () {
-    switch (this.ordersSortKey) {
-      case 'submitTime':
-        return (a: Order, b: Order) => this.ordersSortDirection * (b.submitTime - a.submitTime)
-      case 'rate':
-        return (a: Order, b: Order) => this.ordersSortDirection * (a.rate - b.rate)
-      case 'qty':
-        return (a: Order, b: Order) => this.ordersSortDirection * (a.qty - b.qty)
-      case 'type':
-        return (a: Order, b: Order) => this.ordersSortDirection *
-        OrderUtil.typeString(a).localeCompare(OrderUtil.typeString(b))
-      case 'sell':
-        return (a: Order, b: Order) => this.ordersSortDirection *
-          (OrderUtil.sellString(a)).localeCompare(OrderUtil.sellString(b))
-      case 'status':
-        return (a: Order, b: Order) => this.ordersSortDirection *
-          (OrderUtil.statusString(a)).localeCompare(OrderUtil.statusString(b))
-      case 'settled':
-        return (a: Order, b: Order) => this.ordersSortDirection *
-          ((OrderUtil.settled(a) * 100 / a.qty) - (OrderUtil.settled(b) * 100 / b.qty))
-      case 'filled':
-        return (a: Order, b: Order) => this.ordersSortDirection *
-          ((OrderUtil.filled(a) * 100 / a.qty) - (OrderUtil.filled(b) * 100 / b.qty))
-    }
-  }
-
   /* refreshActiveOrders refreshes the user's active order list. */
   refreshActiveOrders () {
     const page = this.page
@@ -1175,62 +1155,88 @@ export default class MarketsPage extends BasePage {
     for (const oid in metaOrders) delete metaOrders[oid]
     const orders = app().orders(market.dex.host, marketID(market.baseCfg.symbol, market.quoteCfg.symbol))
     // Sort orders by sort key.
-    const compare = this.ordersSortCompare()
-    orders.sort(compare)
+    orders.sort((a: Order, b: Order) => b.submitTime - a.submitTime)
+
+    Doc.empty(page.userOrders)
+    Doc.setVis(orders?.length, page.userOrders)
+    Doc.setVis(!orders?.length, page.userNoOrders)
 
-    Doc.empty(page.liveList)
     for (const ord of orders) {
-      const row = page.liveTemplate.cloneNode(true) as HTMLElement
-      metaOrders[ord.id] = {
-        row: row,
-        order: ord
+      const div = page.userOrderTmpl.cloneNode(true) as HTMLElement
+      page.userOrders.appendChild(div)
+
+      const header = Doc.parseTemplate(Doc.tmplElement(div, 'header'))
+      const detailsDiv = Doc.tmplElement(div, 'details')
+      const details = Doc.parseTemplate(detailsDiv)
+
+      const mord: MetaOrder = {
+        div: div,
+        header: header,
+        details: details,
+        ord: ord
       }
-      Doc.bind(row, 'mouseenter', () => {
+      metaOrders[ord.id] = mord
+
+      header.sideLight.classList.add(ord.sell ? 'sell' : 'buy')
+      details.side.textContent = header.side.textContent = OrderUtil.sellString(ord)
+      details.side.classList.add(ord.sell ? 'sellcolor' : 'buycolor')
+      header.side.classList.add(ord.sell ? 'sellcolor' : 'buycolor')
+      details.qty.textContent = header.qty.textContent = fourSigFigs(ord.qty / this.market.baseUnitInfo.conventional.conversionFactor)
+      details.rate.textContent = fourSigFigs(ord.rate / this.market.rateConversionFactor)
+      header.baseSymbol.textContent = ord.baseSymbol.toUpperCase()
+      details.type.textContent = OrderUtil.typeString(ord)
+      this.updateMetaOrder(mord)
+
+      Doc.bind(div, 'mouseenter', () => {
         this.activeMarkerRate = ord.rate
         this.setDepthMarkers()
       })
-      this.updateUserOrderRow(row, ord)
+
       if (ord.type === OrderUtil.Limit && (ord.tif === OrderUtil.StandingTiF && ord.status < OrderUtil.StatusExecuted)) {
-        const icon = Doc.tmplElement(row, 'cancelBttn')
-        Doc.show(icon)
-        bind(icon, 'click', e => {
+        Doc.show(details.cancelBttn)
+        bind(details.cancelBttn, 'click', e => {
           e.stopPropagation()
-          this.showCancel(row, ord.id)
+          this.showCancel(div, ord.id)
         })
       }
 
-      const accelerateBttn = Doc.tmplElement(row, 'accelerateBttn')
-      bind(accelerateBttn, 'click', e => {
+      bind(details.accelerateBttn, 'click', e => {
         e.stopPropagation()
         this.showAccelerate(ord)
       })
       if (app().canAccelerateOrder(ord)) {
-        Doc.show(accelerateBttn)
+        Doc.show(details.accelerateBttn)
       }
 
-      const side = Doc.tmplElement(row, 'side')
-      side.classList.add(ord.sell ? 'sellcolor' : 'buycolor')
-      const link = Doc.tmplElement(row, 'link')
-      link.href = `order/${ord.id}`
-      app().bindInternalNavigation(row)
-      page.liveList.appendChild(row)
-      app().bindTooltips(row)
+      Doc.bind(header.expander, 'click', () => {
+        if (Doc.isDisplayed(detailsDiv)) {
+          Doc.hide(detailsDiv)
+          header.expander.classList.add('ico-arrowdown')
+          header.expander.classList.remove('ico-arrowup')
+          return
+        }
+        Doc.show(detailsDiv)
+        header.expander.classList.remove('ico-arrowdown')
+        header.expander.classList.add('ico-arrowup')
+      })
+      details.link.href = `order/${ord.id}`
+      app().bindInternalNavigation(div)
+      app().bindTooltips(div)
     }
     this.setDepthMarkers()
   }
 
   /*
-  * updateUserOrderRow sets the td contents of the user's order table row.
+  * updateMetaOrder sets the td contents of the user's order table row.
   */
-  updateUserOrderRow (tr: HTMLElement, ord: Order) {
-    updateDataCol(tr, 'type', OrderUtil.typeString(ord))
-    updateDataCol(tr, 'side', OrderUtil.sellString(ord))
-    updateDataCol(tr, 'age', Doc.timeSince(ord.submitTime))
-    updateDataCol(tr, 'rate', Doc.formatCoinValue(ord.rate / this.market.rateConversionFactor))
-    updateDataCol(tr, 'qty', Doc.formatCoinValue(ord.qty, this.market.baseUnitInfo))
-    updateDataCol(tr, 'filled', `${(OrderUtil.filled(ord) / ord.qty * 100).toFixed(1)}%`)
-    updateDataCol(tr, 'settled', `${(OrderUtil.settled(ord) / ord.qty * 100).toFixed(1)}%`)
-    updateDataCol(tr, 'status', OrderUtil.statusString(ord))
+  updateMetaOrder (mord: MetaOrder) {
+    const { header, details, ord } = mord
+    if (ord.status <= OrderUtil.StatusBooked) header.activeLight.classList.add('active')
+    else header.activeLight.classList.remove('active')
+    details.status.textContent = header.status.textContent = OrderUtil.statusString(ord)
+    details.age.textContent = Doc.timeSince(ord.submitTime)
+    details.filled.textContent = `${(OrderUtil.filled(ord) / ord.qty * 100).toFixed(1)}%`
+    details.settled.textContent = `${(OrderUtil.settled(ord) / ord.qty * 100).toFixed(1)}%`
   }
 
   /* setMarkers sets the depth chart markers for booked orders. */
@@ -1240,8 +1246,7 @@ export default class MarketsPage extends BasePage {
       sells: []
     }
     const rateFactor = this.market.rateConversionFactor
-    for (const mo of Object.values(this.metaOrders)) {
-      const ord = mo.order
+    for (const { ord } of Object.values(this.metaOrders)) {
       if (ord.rate && ord.status === OrderUtil.StatusBooked) {
         if (ord.sell) {
           markers.sells.push({
@@ -1291,7 +1296,6 @@ export default class MarketsPage extends BasePage {
     this.refreshActiveOrders()
     this.handleBook(mktBook)
     this.updateTitle()
-    Doc.hide(page.marketLoader)
     this.marketList.select(host, b.id, q.id)
 
     State.store(lastMarketKey, {
@@ -1313,13 +1317,6 @@ export default class MarketsPage extends BasePage {
     this.balanceWgt.setWallets(host, b.id, q.id)
     this.setMarketBuyOrderEstimate()
     this.refreshActiveOrders()
-    if (this.loaded) {
-      this.loaded()
-      this.loaded = null
-      Doc.animate(250, progress => {
-        this.main.style.opacity = String(progress)
-      })
-    }
   }
 
   /* handleBookOrderRoute is the handler for 'book_order' notifications. */
@@ -1374,12 +1371,13 @@ export default class MarketsPage extends BasePage {
       this.candlesLoading.loaded()
       this.candlesLoading = null
     }
-    this.depthChart.hide()
-    this.candleChart.show()
-    if (data.host !== this.market.dex.host) return
+    if (data.host !== this.market.dex.host || data.marketID !== this.market.cfg.name) return
     const dur = data.payload.dur
     this.market.candleCaches[dur] = data.payload
-    if (this.currentChart !== candleChart || this.candleDur !== dur) return
+    this.setHighLow()
+    if (this.candleDur !== dur) return
+    if (this.loadingAnimations.candles) this.loadingAnimations.candles.stop()
+    this.candleChart.canvas.classList.remove('invisible')
     this.candleChart.setCandles(data.payload, this.market.cfg, this.market.baseUnitInfo, this.market.quoteUnitInfo)
   }
 
@@ -1401,7 +1399,7 @@ export default class MarketsPage extends BasePage {
       if (last.startStamp === candle.startStamp) candles[candles.length - 1] = candle
       else candles.push(candle)
     }
-    if (this.currentChart !== candleChart || this.candleDur !== dur) return
+    if (this.candleDur !== dur) return
     this.candleChart.draw()
   }
 
@@ -1409,8 +1407,7 @@ export default class MarketsPage extends BasePage {
   async showForm (form: HTMLElement) {
     this.currentForm = form
     const page = this.page
-    Doc.hide(page.unlockWalletForm, page.verifyForm, page.newWalletForm,
-      page.cancelForm, page.vDetailPane, page.accelerateForm, page.toggleWalletStatusConfirm)
+    Doc.hide(...Array.from(page.forms.children))
     form.style.right = '10000px'
     Doc.show(page.forms, form)
     const shift = (page.forms.offsetWidth + form.offsetWidth) / 2
@@ -1532,8 +1529,6 @@ export default class MarketsPage extends BasePage {
       }
     }
     // Visually differentiate between buy/sell orders.
-    const buyBtnClass = 'buygreen'
-    const sellBtnClass = 'sellred'
     if (isSell) {
       page.vHeader.classList.add(sellBtnClass)
       page.vHeader.classList.remove(buyBtnClass)
@@ -1744,10 +1739,10 @@ export default class MarketsPage extends BasePage {
 
   /* showCancel shows a form to confirm submission of a cancel order. */
   showCancel (row: HTMLElement, orderID: string) {
-    const order = this.metaOrders[orderID].order
+    const ord = this.metaOrders[orderID].ord
     const page = this.page
-    const remaining = order.qty - order.filled
-    const asset = OrderUtil.isMarketBuy(order) ? this.market.quote : this.market.base
+    const remaining = ord.qty - ord.filled
+    const asset = OrderUtil.isMarketBuy(ord) ? this.market.quote : this.market.base
     page.cancelRemain.textContent = Doc.formatCoinValue(remaining, asset.unitInfo)
     page.cancelUnit.textContent = asset.symbol.toUpperCase()
     Doc.hide(page.cancelErr)
@@ -1755,7 +1750,7 @@ export default class MarketsPage extends BasePage {
     page.cancelPass.focus()
     this.cancelData = {
       bttn: Doc.tmplElement(row, 'cancelBttn'),
-      order: order
+      order: ord
     }
   }
 
@@ -1802,16 +1797,17 @@ export default class MarketsPage extends BasePage {
     this.showVerify()
   }
 
+  /* Display a deposit address. */
+  async showDeposit (assetID: number) {
+    this.depositAddrForm.setAsset(assetID)
+    this.showForm(this.page.deposit)
+  }
+
   /*
    * handlePriceUpdate is the handler for the 'spots' notification.
    */
   handlePriceUpdate (note: SpotPriceNote) {
-    const xcSection = this.marketList.xcSection(note.host)
-    if (!xcSection || !xcSection.marketRows) return
-    for (const spot of Object.values(note.spots)) {
-      const marketRow = xcSection.marketRow(spot.baseID, spot.quoteID)
-      if (marketRow) marketRow.setSpot(spot)
-    }
+    this.marketList.updateSpots(note)
   }
 
   /*
@@ -1832,20 +1828,18 @@ export default class MarketsPage extends BasePage {
    */
   handleOrderNote (note: OrderNote) {
     const order = note.order
-    const metaOrder = this.metaOrders[order.id]
+    const mord = this.metaOrders[order.id]
     // If metaOrder doesn't exist for the given order it means it was
     // created via dexcctl and the GUI isn't aware of it.
     // Call refreshActiveOrders to grab the order.
-    if (!metaOrder) return this.refreshActiveOrders()
-    const oldStatus = metaOrder.status
-    metaOrder.order = order
-    const cancelBttn = Doc.tmplElement(metaOrder.row, 'cancelBttn')
-    if (note.topic === 'MissedCancel') Doc.show(cancelBttn)
-    if (order.filled === order.qty) Doc.hide(cancelBttn)
-    const accelerateBttn = Doc.tmplElement(metaOrder.row, 'accelerateBttn')
-    if (app().canAccelerateOrder(order)) Doc.show(accelerateBttn)
-    else Doc.hide(accelerateBttn)
-    this.updateUserOrderRow(metaOrder.row, order)
+    if (!mord) return this.refreshActiveOrders()
+    const oldStatus = mord.status
+    mord.ord = order
+    if (note.topic === 'MissedCancel') Doc.show(mord.details.cancelBttn)
+    if (order.filled === order.qty) Doc.hide(mord.details.cancelBttn)
+    if (app().canAccelerateOrder(order)) Doc.show(mord.details.accelerateBttn)
+    else Doc.hide(mord.details.accelerateBttn)
+    this.updateMetaOrder(mord)
     // Only reset markers if there is a change, since the chart is redrawn.
     if ((oldStatus === OrderUtil.StatusEpoch && order.status === OrderUtil.StatusBooked) ||
       (oldStatus === OrderUtil.StatusBooked && order.status > OrderUtil.StatusBooked)) this.setDepthMarkers()
@@ -1863,26 +1857,26 @@ export default class MarketsPage extends BasePage {
     }
 
     this.clearOrderTableEpochs()
-    for (const metaOrder of Object.values(this.metaOrders)) {
-      const order = metaOrder.order
-      const alreadyMatched = note.epoch > order.epoch
-      const statusTD = Doc.tmplElement(metaOrder.row, 'status')
+    for (const { ord, details, header } of Object.values(this.metaOrders)) {
+      const alreadyMatched = note.epoch > ord.epoch
       switch (true) {
-        case order.type === OrderUtil.Limit && order.status === OrderUtil.StatusEpoch && alreadyMatched:
-          statusTD.textContent = order.tif === OrderUtil.ImmediateTiF ? intl.prep(intl.ID_EXECUTED) : intl.prep(intl.ID_BOOKED)
-          order.status = order.tif === OrderUtil.ImmediateTiF ? OrderUtil.StatusExecuted : OrderUtil.StatusBooked
+        case ord.type === OrderUtil.Limit && ord.status === OrderUtil.StatusEpoch && alreadyMatched: {
+          const status = ord.tif === OrderUtil.ImmediateTiF ? intl.prep(intl.ID_EXECUTED) : intl.prep(intl.ID_BOOKED)
+          details.status.textContent = header.status.textContent = status
+          ord.status = ord.tif === OrderUtil.ImmediateTiF ? OrderUtil.StatusExecuted : OrderUtil.StatusBooked
           break
-        case order.type === OrderUtil.Market && order.status === OrderUtil.StatusEpoch:
+        }
+        case ord.type === OrderUtil.Market && ord.status === OrderUtil.StatusEpoch:
           // Technically don't know if this should be 'executed' or 'settling'.
-          statusTD.textContent = intl.prep(intl.ID_EXECUTED)
-          order.status = OrderUtil.StatusExecuted
+          details.status.textContent = header.status.textContent = intl.prep(intl.ID_EXECUTED)
+          ord.status = OrderUtil.StatusExecuted
           break
       }
     }
   }
 
   /*
-   * ordersSortCompare returns sort compare function according to the active
+   * recentMatchesSortCompare returns sort compare function according to the active
    * sort key and direction.
    */
   recentMatchesSortCompare () {
@@ -1905,14 +1899,13 @@ export default class MarketsPage extends BasePage {
     recentMatches.sort(compare)
     for (const match of recentMatches) {
       const row = page.recentMatchesTemplate.cloneNode(true) as HTMLElement
-
+      const tmpl = Doc.parseTemplate(row)
       app().bindTooltips(row)
-      updateDataCol(row, 'rate', Doc.formatCoinValue(match.rate / this.market.rateConversionFactor))
-      // change rate color based if is sell or not.
-      updateDataCol(row, 'qty', Doc.formatCoinValue(match.qty, this.market.baseUnitInfo))
-      updateDataCol(row, 'age', new Date(match.stamp).toLocaleTimeString())
+      tmpl.rate.textContent = Doc.formatCoinValue(match.rate / this.market.rateConversionFactor)
+      tmpl.qty.textContent = Doc.formatCoinValue(match.qty, this.market.baseUnitInfo)
+      tmpl.age.textContent = Doc.timeSince(match.stamp)
+      tmpl.age.dataset.sinceStamp = String(match.stamp)
       row.classList.add(match.sell ? 'sellcolor' : 'buycolor')
-
       page.recentMatchesLiveList.append(row)
     }
   }
@@ -1924,8 +1917,7 @@ export default class MarketsPage extends BasePage {
   setBalanceVisibility () {
     const mkt = this.market
     if (!mkt || !mkt.dex) return
-    if (mkt.dex.connectionStatus === ConnectionStatus.Connected) Doc.show(this.page.balanceTable)
-    else Doc.hide(this.page.balanceTable)
+    this.balanceWgt.setBalanceVisibility(mkt.dex.connectionStatus === ConnectionStatus.Connected)
   }
 
   /* handleBalanceNote handles notifications updating a wallet's balance. */
@@ -1996,6 +1988,7 @@ export default class MarketsPage extends BasePage {
     const asset = user.assets[this.currentCreate.id]
     Doc.hide(this.page.forms)
     this.balanceWgt.updateAsset(asset.id)
+    Doc.setVis(!(this.market.base.wallet && this.market.quote.wallet), this.page.noWallet)
     this.resolveOrderFormVisibility()
   }
 
@@ -2255,7 +2248,7 @@ export default class MarketsPage extends BasePage {
       // or this may be the first opportunity to get the server's config, so
       // fetch it all before reloading the markets page.
       await app().fetchUser()
-      await app().loadPage('markets')
+      if (!this.market) this.init({})
     }
   }
 
@@ -2264,7 +2257,7 @@ export default class MarketsPage extends BasePage {
    * value of the search input.
    */
   filterMarkets () {
-    const filterTxt = this.page.marketSearch.value
+    const filterTxt = this.page.marketSearchV1.value
     const filter = filterTxt ? (mkt: MarketRow) => mkt.name.includes(filterTxt) : () => true
     this.marketList.setFilter(filter)
   }
@@ -2275,33 +2268,6 @@ export default class MarketsPage extends BasePage {
     this.depthChart.draw()
   }
 
-  /*
-   * depthChartSelected is called when the user clicks a button to show the
-   * depth chart.
-  */
-  depthChartSelected () {
-    const page = this.page
-    Doc.hide(page.depthBttn, page.durBttnBox, page.candleHoverData)
-    Doc.show(page.candlestickBttn, page.epochLine, page.depthHoverData, page.depthSummary)
-    this.currentChart = depthChart
-    this.depthChart.show()
-    this.candleChart.hide()
-  }
-
-  /*
-   * candleChartSelected is called when the user clicks a button to show the
-   * historical market data (candlestick) chart.
-  */
-  candleChartSelected () {
-    const page = this.page
-    const dex = this.market.dex
-    this.currentChart = candleChart
-    Doc.hide(page.candlestickBttn, page.epochLine, page.depthHoverData, page.depthSummary)
-    Doc.show(page.depthBttn, page.durBttnBox, page.candleHoverData)
-    if (dex.candleDurs.indexOf(this.candleDur) === -1) this.candleDur = dex.candleDurs[0]
-    this.loadCandles()
-  }
-
   /* candleDurationSelected sets the candleDur and loads the candles. */
   candleDurationSelected (dur: string) {
     this.candleDur = dur
@@ -2320,8 +2286,8 @@ export default class MarketsPage extends BasePage {
     const { candleCaches, cfg, baseUnitInfo, quoteUnitInfo } = this.market
     const cache = candleCaches[this.candleDur]
     if (cache) {
-      this.depthChart.hide()
-      this.candleChart.show()
+      // this.depthChart.hide()
+      // this.candleChart.show()
       this.candleChart.setCandles(cache, cfg, baseUnitInfo, quoteUnitInfo)
       return
     }
@@ -2331,11 +2297,10 @@ export default class MarketsPage extends BasePage {
   /* requestCandles sends the loadcandles request. */
   requestCandles () {
     this.candlesLoading = {
-      loaded: () => { Doc.hide(this.page.marketLoader) },
+      loaded: () => { /* pass */ },
       timer: window.setTimeout(() => {
         if (this.candlesLoading) {
           this.candlesLoading = null
-          Doc.hide(this.page.marketLoader)
           console.error('candles not received')
         }
       }, 10000)
@@ -2370,69 +2335,68 @@ export default class MarketsPage extends BasePage {
  * and sort order of markets.
  */
 class MarketList {
-  xcSections: ExchangeSection[]
+  // xcSections: ExchangeSection[]
+  div: PageElement
+  rowTmpl: PageElement
+  markets: MarketRow[]
   selected: MarketRow
 
   constructor (div: HTMLElement) {
-    const xcTmpl = Doc.tmplElement(div, 'xc')
-    Doc.cleanTemplates(xcTmpl)
-    this.xcSections = []
-    for (const dex of Object.values(app().user.exchanges)) {
-      this.xcSections.push(new ExchangeSection(xcTmpl, dex))
-    }
-    // Initial sort is alphabetical.
-    for (const xc of this.sortedSections()) {
-      div.appendChild(xc.node)
+    this.div = div
+    this.rowTmpl = Doc.idel(div, 'marketTmplV1')
+    Doc.cleanTemplates(this.rowTmpl)
+    this.reloadMarketsPane()
+  }
+
+  updateSpots (note: SpotPriceNote) {
+    for (const row of this.markets) {
+      if (row.mkt.xc.host !== note.host) continue
+      const spot = note.spots[row.mkt.name]
+      if (!spot) return
+      const xc = app().exchanges[row.mkt.xc.host]
+      const mkt = xc.markets[row.mkt.name]
+      setPriceAndChange(row.tmpl, xc, mkt)
     }
   }
 
-  /*
-   * sortedSections returns a list of ExchangeSection sorted alphabetically by
-   * host.
-   */
-  sortedSections () {
-    return [...this.xcSections].sort((a, b) => a.host < b.host ? -1 : 1)
+  reloadMarketsPane (): void {
+    Doc.empty(this.div)
+    this.markets = []
+
+    const addMarket = (mkt: ExchangeMarket) => {
+      const bui = app().unitInfo(mkt.baseid, mkt.xc)
+      const qui = app().unitInfo(mkt.quoteid, mkt.xc)
+      const rateConversionFactor = OrderUtil.RateEncodingFactor / bui.conventional.conversionFactor * qui.conventional.conversionFactor
+      const row = new MarketRow(this.rowTmpl, mkt, rateConversionFactor)
+      this.div.appendChild(row.node)
+      return row
+    }
+
+    for (const mkt of sortedMarkets()) this.markets.push(addMarket(mkt))
   }
 
-  /*
-   * xcSection is a getter for the ExchangeSection for a specified host.
-   */
-  xcSection (host: string) {
-    for (const xc of this.xcSections) {
-      if (xc.host === host) return xc
+  find (host: string, baseID: number, quoteID: number): MarketRow | null {
+    for (const row of this.markets) {
+      if (row.mkt.xc.host === host && row.mkt.baseid === baseID && row.mkt.quoteid === quoteID) return row
     }
     return null
   }
 
   /* exists will be true if the specified market exists. */
-  exists (host: string, baseID: number, quoteID: number) {
-    const xc = this.xcSection(host)
-    // If connecting to an offline server the client is not able to get xc.marketRows.
-    // Therefore we must check for it.
-    if (!xc || !xc.marketRows) return false
-    for (const mkt of xc.marketRows) {
-      if (mkt.baseID === baseID && mkt.quoteID === quoteID) return true
-    }
-    return false
+  exists (host: string, baseID: number, quoteID: number): boolean {
+    return this.find(host, baseID, quoteID) !== null
   }
 
   /* first gets the first market from the first exchange, alphabetically. */
-  first () {
-    const firstXC = this.sortedSections()[0]
-    const firstMkt = firstXC.first()
-    // Cannot find markets if server connection failed.
-    if (!firstMkt) return makeMarket(firstXC.host)
-    return makeMarket(firstXC.host, firstMkt.baseID, firstMkt.quoteID)
+  first (): MarketRow {
+    return this.markets[0]
   }
 
   /* select sets the specified market as selected. */
   select (host: string, baseID: number, quoteID: number) {
-    if (this.selected) this.selected.node.classList.remove('selected')
-    const xcSection = this.xcSection(host)
-    if (!xcSection) return console.error(`select: no exchange section for ${host}`)
-    const marketRow = xcSection.marketRow(baseID, quoteID)
-    if (!marketRow) return console.error(`select: no market row for ${host}, ${baseID}-${quoteID}`)
-    this.selected = marketRow
+    const row = this.find(host, baseID, quoteID)
+    if (!row) return console.error(`select: no market row for ${host}, ${baseID}-${quoteID}`)
+    this.selected = row
     this.selected.node.classList.add('selected')
   }
 
@@ -2440,99 +2404,20 @@ class MarketList {
    * on the core.ConnEventNote.
    */
   setConnectionStatus (note: ConnEventNote) {
-    const xcSection = this.xcSection(note.host)
-    if (!xcSection) return console.error(`setConnectionStatus: no exchange section for ${note.host}`)
-    xcSection.setConnected(note.connectionStatus === ConnectionStatus.Connected)
-  }
-
-  /*
-   * setFilter sets the visibility of market rows based on the provided filter.
-   */
-  setFilter (filter: (mkt: MarketRow) => boolean) {
-    for (const xc of this.xcSections) {
-      xc.setFilter(filter)
-    }
-  }
-}
-
-/*
- * ExchangeSection is a top level section of the MarketList.
- */
-class ExchangeSection {
-  marketRows: MarketRow[]
-  host: string
-  dex: Exchange
-  node: HTMLElement
-  disconnectedIco: PageElement
-
-  constructor (template: HTMLElement, dex: Exchange) {
-    this.dex = dex
-    this.host = dex.host
-    this.node = template.cloneNode(true) as HTMLElement
-    const tmpl = Doc.parseTemplate(this.node)
-    tmpl.header.textContent = dex.host
-
-    this.disconnectedIco = tmpl.disconnected
-    if (dex.connectionStatus === ConnectionStatus.Connected) Doc.hide(tmpl.disconnected)
-
-    tmpl.mkts.removeChild(tmpl.mktrow)
-    // If disconnected is not possible to get the markets from the server.
-    if (!dex.markets) return
-
-    this.marketRows = Object.values(dex.markets).map(mkt => {
-      const bui = app().unitInfo(mkt.baseid, dex)
-      const qui = app().unitInfo(mkt.quoteid, dex)
-      const rateConversionFactor = OrderUtil.RateEncodingFactor / bui.conventional.conversionFactor * qui.conventional.conversionFactor
-      return new MarketRow(tmpl.mktrow, mkt, rateConversionFactor)
-    })
-
-    // for (const mkt of Object.values(dex.markets)) {
-    //   this.marketRows.push(new MarketRow(tmpl.mktrow, mkt))
-    // }
-    for (const market of this.sortedMarkets()) {
-      tmpl.mkts.appendChild(market.node)
-    }
-  }
-
-  /*
-   * sortedMarkets is the list of MarketRow sorted alphabetically by the base
-   * symbol first, quote symbol second.
-   */
-  sortedMarkets () {
-    if (!this.marketRows) return []
-    return [...this.marketRows].sort((a, b) => a.name < b.name ? -1 : 1)
-  }
-
-  /*
-   * first returns the first market in the alphabetically-sorted list of
-   * markets.
-   */
-  first () {
-    return this.sortedMarkets()[0]
-  }
-
-  /*
-   * marketRow gets the MarketRow for the specified market.
-   */
-  marketRow (baseID: number, quoteID: number) {
-    for (const mkt of this.marketRows) {
-      if (mkt.baseID === baseID && mkt.quoteID === quoteID) return mkt
+    for (const row of this.markets) {
+      if (row.mkt.xc.host !== note.host) continue
+      if (note.connectionStatus === ConnectionStatus.Connected) Doc.hide(row.tmpl.disconnectedIco)
+      else Doc.show(row.tmpl.disconnectedIco)
     }
   }
 
-  /* setConnected sets the visiblity of the disconnected icon. */
-  setConnected (isConnected: boolean) {
-    if (isConnected) Doc.hide(this.disconnectedIco)
-    else Doc.show(this.disconnectedIco)
-  }
-
   /*
    * setFilter sets the visibility of market rows based on the provided filter.
    */
   setFilter (filter: (mkt: MarketRow) => boolean) {
-    for (const mkt of this.marketRows) {
-      if (filter(mkt)) Doc.show(mkt.node)
-      else Doc.hide(mkt.node)
+    for (const row of this.markets) {
+      if (filter(row)) Doc.show(row.node)
+      else Doc.hide(row.node)
     }
   }
 }
@@ -2543,7 +2428,7 @@ class ExchangeSection {
  */
 class MarketRow {
   node: HTMLElement
-  mkt: Market
+  mkt: ExchangeMarket
   name: string
   baseID: number
   quoteID: number
@@ -2552,7 +2437,7 @@ class MarketRow {
   tmpl: Record<string, PageElement>
   rateConversionFactor: number
 
-  constructor (template: HTMLElement, mkt: Market, rateConversionFactor: number) {
+  constructor (template: HTMLElement, mkt: ExchangeMarket, rateConversionFactor: number) {
     this.mkt = mkt
     this.name = mkt.name
     this.baseID = mkt.baseid
@@ -2566,27 +2451,19 @@ class MarketRow {
     tmpl.quoteIcon.src = Doc.logoPath(mkt.quotesymbol)
     tmpl.baseSymbol.appendChild(Doc.symbolize(mkt.basesymbol))
     tmpl.quoteSymbol.appendChild(Doc.symbolize(mkt.quotesymbol))
-    this.setSpot(mkt.spot)
+    tmpl.baseName.textContent = mkt.baseName
+    setPriceAndChange(tmpl, mkt.xc, mkt)
   }
+}
 
-  setSpot (spot: Spot) {
-    if (!spot) return
-    const { tmpl, mkt } = this
-
-    Doc.show(tmpl.pctChange)
-    const pct = spot.change24 * 100
-    const num = percentFormatter.format(pct)
-    const sign = pct > 0 ? '+' : ''
-    tmpl.pctChange.textContent = `${sign}${num}%`
-    tmpl.pctChange.classList.remove('upgreen', 'downred', 'grey')
-    tmpl.pctChange.classList.add(pct === 0 ? 'grey' : pct > 0 ? 'upgreen' : 'downred')
-    const baseAsset = app().assets[mkt.baseid]
-    if (baseAsset) {
-      Doc.show(tmpl.bottomRow)
-      tmpl.assetName.textContent = baseAsset.name
-      tmpl.price.textContent = Doc.formatCoinValue(spot.rate / this.rateConversionFactor)
-    }
-  }
+interface BalanceWidgetElement {
+  id: number
+  parentID: number
+  cfg: Asset | null
+  node: PageElement
+  tmpl: Record<string, PageElement>
+  iconBox: PageElement
+  stateIcons: WalletIcons
 }
 
 /*
@@ -2599,54 +2476,35 @@ class MarketRow {
 class BalanceWidget {
   base: BalanceWidgetElement
   quote: BalanceWidgetElement
-  parentRow: PageElement
+  // parentRow: PageElement
   dex: Exchange
 
-  constructor (table: HTMLElement) {
-    const els = Doc.idDescendants(table)
+  constructor (base: HTMLElement, quote: HTMLElement) {
+    Doc.hide(base, quote)
+    const btmpl = Doc.parseTemplate(base)
     this.base = {
       id: 0,
       parentID: parentIDNone,
       cfg: null,
-      logo: els.baseImg,
-      symbol: els.balBaseSymbol,
-      avail: els.baseAvail,
-      newWalletRow: els.baseNewWalletRow,
-      newWalletBttn: els.baseNewButton,
-      walletPendingRow: els.baseWalletPendingRow,
-      locked: els.baseLocked,
-      immature: els.baseImmature,
-      parentBal: els.baseParent,
-      parentIcon: els.baseParentLogo,
-      unsupported: els.baseUnsupported,
-      expired: els.baseExpired,
-      connect: els.baseConnect,
-      spinner: els.baseSpinner,
-      iconBox: els.baseWalletState,
-      stateIcons: new WalletIcons(els.baseWalletState)
+      node: base,
+      tmpl: btmpl,
+      iconBox: btmpl.walletState,
+      stateIcons: new WalletIcons(btmpl.walletState)
     }
+    btmpl.balanceRowTmpl.remove()
+
+    const qtmpl = Doc.parseTemplate(quote)
     this.quote = {
       id: 0,
       parentID: parentIDNone,
       cfg: null,
-      logo: els.quoteImg,
-      symbol: els.balQuoteSymbol,
-      avail: els.quoteAvail,
-      newWalletRow: els.quoteNewWalletRow,
-      newWalletBttn: els.quoteNewButton,
-      walletPendingRow: els.quoteWalletPendingRow,
-      locked: els.quoteLocked,
-      immature: els.quoteImmature,
-      parentBal: els.quoteParent,
-      parentIcon: els.quoteParentLogo,
-      unsupported: els.quoteUnsupported,
-      expired: els.quoteExpired,
-      connect: els.quoteConnect,
-      spinner: els.quoteSpinner,
-      iconBox: els.quoteWalletState,
-      stateIcons: new WalletIcons(els.quoteWalletState)
-    }
-    this.parentRow = els.parentBalance
+      node: quote,
+      tmpl: qtmpl,
+      iconBox: qtmpl.walletState,
+      stateIcons: new WalletIcons(qtmpl.walletState)
+    }
+    qtmpl.balanceRowTmpl.remove()
+    // this.parentRow = els.parentBalance
 
     app().registerNoteFeeder({
       balance: (note: BalanceNote) => { this.updateAsset(note.assetID) },
@@ -2655,6 +2513,11 @@ class BalanceWidget {
     })
   }
 
+  setBalanceVisibility (connected: boolean) {
+    if (connected) Doc.show(this.base.node, this.quote.node)
+    else Doc.hide(this.base.node, this.quote.node)
+  }
+
   /*
    * setWallet sets the balance widget to display data for specified market.
    */
@@ -2671,7 +2534,6 @@ class BalanceWidget {
     this.quote.id = quoteID
     this.quote.parentID = parentID(quoteID)
     this.quote.cfg = this.dex.assets[quoteID]
-    Doc.hide(this.parentRow)
     this.updateWallet(this.base)
     this.updateWallet(this.quote)
   }
@@ -2681,74 +2543,88 @@ class BalanceWidget {
    * core.Wallet state.
    */
   updateWallet (side: BalanceWidgetElement) {
-    if (!side.cfg) return // no wallet set yet
-    const asset = app().assets[side.id]
+    const { cfg, tmpl, iconBox, stateIcons, id: assetID } = side
+    if (!cfg) return // no wallet set yet
+    const asset = app().assets[assetID]
     // Just hide everything to start.
     Doc.hide(
-      side.newWalletRow, side.avail, side.immature, side.locked,
-      side.expired, side.unsupported, side.connect, side.spinner, side.iconBox,
-      side.walletPendingRow, side.parentIcon
+      tmpl.newWalletRow, tmpl.expired, tmpl.unsupported, tmpl.connect, tmpl.spinner,
+      tmpl.walletState, tmpl.balanceRows, tmpl.walletAddr
     )
-    side.logo.src = Doc.logoPath(side.cfg.symbol)
-    Doc.empty(side.symbol)
-    side.symbol.appendChild(Doc.symbolize(side.cfg.symbol))
+    tmpl.logo.src = Doc.logoPath(cfg.symbol)
+    tmpl.addWalletSymbol.textContent = cfg.symbol.toUpperCase()
+    Doc.empty(tmpl.symbol)
+    tmpl.symbol.appendChild(Doc.symbolize(cfg.symbol))
     // Handle an unsupported asset.
     if (!asset) {
-      Doc.show(side.unsupported)
+      Doc.show(tmpl.unsupported)
       return
     }
-    Doc.show(side.iconBox)
+    Doc.show(iconBox)
     const wallet = asset.wallet
-    side.stateIcons.readWallet(wallet)
+    stateIcons.readWallet(wallet)
     // Handle no wallet configured.
     if (!wallet) {
       if (asset.walletCreationPending) {
-        Doc.show(side.walletPendingRow)
+        Doc.show(tmpl.spinner)
         return
       }
-      Doc.show(side.newWalletRow)
+      Doc.show(tmpl.newWalletRow)
       return
     }
+    Doc.show(tmpl.walletAddr)
     // Parent asset
-    side.parentBal.textContent = '—'
-    if (asset.token) {
-      Doc.show(this.parentRow, side.parentIcon)
-      const { wallet: { balance }, unitInfo, symbol } = app().assets[asset.token.parentID]
-      side.parentBal.textContent = Doc.formatCoinValue(balance.available, unitInfo)
-      side.parentIcon.src = Doc.logoPath(symbol)
-    }
     const bal = wallet.balance
     // Handle not connected and no balance known for the DEX.
     if (!bal && !wallet.running && !wallet.disabled) {
-      Doc.show(side.connect)
+      Doc.show(tmpl.connect)
       return
     }
     // If there is no balance, but the wallet is connected, show the loading
     // icon while we fetch an update.
     if (!bal) {
-      app().fetchBalance(side.id)
-      Doc.show(side.spinner)
+      app().fetchBalance(assetID)
+      Doc.show(tmpl.spinner)
       return
     }
+
     // We have a wallet and a DEX-specific balance. Set all of the fields.
-    Doc.show(side.avail, side.immature, side.locked)
-    side.avail.textContent = Doc.formatCoinValue(bal.available, asset.unitInfo)
-    side.locked.textContent = Doc.formatCoinValue((bal.locked + bal.contractlocked), asset.unitInfo)
-    side.immature.textContent = Doc.formatCoinValue(bal.immature, asset.unitInfo)
+    Doc.show(tmpl.balanceRows)
+    Doc.empty(tmpl.balanceRows)
+    const addRow = (title: string, bal: number, ui: UnitInfo, icon?: PageElement) => {
+      const row = tmpl.balanceRowTmpl.cloneNode(true) as PageElement
+      tmpl.balanceRows.appendChild(row)
+      const balTmpl = Doc.parseTemplate(row)
+      balTmpl.title.textContent = title
+      balTmpl.bal.textContent = Doc.formatCoinValue(bal, ui)
+      if (icon) balTmpl.bal.append(icon)
+    }
+
+    addRow(intl.prep(intl.ID_AVAILABLE), bal.available, asset.unitInfo)
+    addRow(intl.prep(intl.ID_LOCKED), bal.locked + bal.contractlocked, asset.unitInfo)
+    addRow(intl.prep(intl.ID_IMMATURE), bal.immature, asset.unitInfo)
+    if (asset.token) {
+      const { wallet: { balance }, unitInfo, symbol } = app().assets[asset.token.parentID]
+      const icon = document.createElement('img')
+      icon.src = Doc.logoPath(symbol)
+      icon.classList.add('micro-icon')
+      addRow(intl.prep(intl.ID_FEE_BALANCE), balance.available, unitInfo, icon)
+    }
+
     // If the current balance update time is older than an hour, show the
     // expiration icon. Request a balance update, if possible.
     const expired = new Date().getTime() - new Date(bal.stamp).getTime() > anHour
     if (expired && !wallet.disabled) {
-      Doc.show(side.expired)
-      if (wallet.running) app().fetchBalance(side.id)
-    } else Doc.hide(side.expired)
+      Doc.show(tmpl.expired)
+      if (wallet.running) app().fetchBalance(assetID)
+    } else Doc.hide(tmpl.expired)
   }
 
   /* updateParent updates the side's parent asset balance. */
   updateParent (side: BalanceWidgetElement) {
     const { wallet: { balance }, unitInfo, symbol } = app().assets[side.parentID]
-    side.parentBal.textContent = Doc.formatCoinValue(balance.available, unitInfo)
-    side.parentIcon.src = Doc.logoPath(symbol)
+    side.tmpl.parentBal.textContent = Doc.formatCoinValue(balance.available, unitInfo)
+    side.tmpl.parentLogo.src = Doc.logoPath(symbol)
   }
 
   /*
@@ -2788,13 +2664,6 @@ function swapBttns (before: HTMLElement, now: HTMLElement) {
   now.classList.add('selected')
 }
 
-/*
- * updateDataCol sets the textContent of descendent template element.
- */
-function updateDataCol (tr: HTMLElement, col: string, s: string) {
-  Doc.tmplElement(tr, col).textContent = s
-}
-
 /*
  * wireOrder prepares a copy of the order with the options field converted to a
  * string -> string map.
@@ -2943,3 +2812,61 @@ class OrderTableRowManager {
     }
   }
 }
+
+interface ExchangeMarket extends Market {
+  xc: Exchange
+  baseName: string
+  bui: UnitInfo
+}
+
+function sortedMarkets (): ExchangeMarket[] {
+  const mkts: ExchangeMarket[] = []
+  const assets = app().assets
+  const convertMarkets = (xc: Exchange, mkts: Market[]) => {
+    return mkts.map((mkt: Market) => {
+      const a = assets[mkt.baseid]
+      const baseName = a ? a.name : mkt.basesymbol
+      const bui = app().unitInfo(mkt.baseid, xc)
+      return Object.assign({ xc, baseName, bui }, mkt)
+    })
+  }
+  for (const xc of Object.values(app().exchanges)) mkts.push(...convertMarkets(xc, Object.values(xc.markets || {})))
+  mkts.sort((a: ExchangeMarket, b: ExchangeMarket): number => {
+    if (!a.spot) {
+      if (b.spot) return 1 // put b first, since we have the spot
+      // no spots. compare market name then host name
+      if (a.name === b.name) return a.xc.host.localeCompare(b.xc.host)
+      return a.name.localeCompare(b.name)
+    } else if (!b.spot) return -1 // put a first, since we have the spot
+    const [aLots, bLots] = [a.spot.vol24 / a.lotsize, b.spot.vol24 / b.lotsize]
+    return bLots - aLots // whoever has more volume by lot count
+  })
+  return mkts
+}
+
+const FourSigFigs = new Intl.NumberFormat((navigator.languages as string[]), {
+  minimumSignificantDigits: 4,
+  maximumSignificantDigits: 4
+})
+
+const intFormatter = new Intl.NumberFormat((navigator.languages as string[]))
+
+function fourSigFigs (v: number): string {
+  if (v < 100) return FourSigFigs.format(v)
+  return intFormatter.format(Math.round(v))
+}
+
+function setMarketDetails (tmpl: Record<string, PageElement>, mkt: Market) {
+  tmpl.baseIcon.src = Doc.logoPath(mkt.basesymbol)
+  tmpl.quoteIcon.src = Doc.logoPath(mkt.quotesymbol)
+  tmpl.baseSymbol.textContent = mkt.basesymbol.toUpperCase()
+  tmpl.quoteSymbol.textContent = mkt.quotesymbol.toUpperCase()
+}
+
+function setPriceAndChange (tmpl: Record<string, PageElement>, xc: Exchange, mkt: Market) {
+  if (!mkt.spot) return
+  tmpl.price.textContent = fourSigFigs(app().conventionalRate(mkt.baseid, mkt.quoteid, mkt.spot.rate, xc))
+  const sign = mkt.spot.change24 > 0 ? '+' : ''
+  tmpl.change.classList.add(mkt.spot.change24 >= 0 ? 'buycolor' : 'sellcolor')
+  tmpl.change.textContent = `${sign}${(mkt.spot.change24 * 100).toFixed(1)}%`
+}
diff --git a/client/webserver/site/src/js/registry.ts b/client/webserver/site/src/js/registry.ts
index ef28803440..56d35994cb 100644
--- a/client/webserver/site/src/js/registry.ts
+++ b/client/webserver/site/src/js/registry.ts
@@ -495,6 +495,7 @@ export interface Application {
   seedGenTime: number
   user: User
   header: HTMLElement
+  headerSpace: HTMLElement
   walletMap: Record<number, WalletState>
   exchanges: Record<string, Exchange>
   fiatRatesMap: Record<number, number>
@@ -529,7 +530,7 @@ export interface Application {
   order (oid: string): Order | null
   canAccelerateOrder(order: Order): boolean
   unitInfo (assetID: number, xc?: Exchange): UnitInfo
-  conventionalRate (baseID: number, quoteID: number, encRate: number): number
+  conventionalRate (baseID: number, quoteID: number, encRate: number, xc?: Exchange): number
   walletDefinition (assetID: number, walletType: string): WalletDefinition
   currentWalletDefinition (assetID: number): WalletDefinition
   fetchBalance (assetID: number): Promise<WalletBalance>
diff --git a/client/webserver/site/src/js/wallets.ts b/client/webserver/site/src/js/wallets.ts
index b3565f51dd..6317f5d598 100644
--- a/client/webserver/site/src/js/wallets.ts
+++ b/client/webserver/site/src/js/wallets.ts
@@ -1,7 +1,13 @@
 import Doc, { Animation } from './doc'
 import BasePage from './basepage'
 import { postJSON } from './http'
-import { NewWalletForm, WalletConfigForm, UnlockWalletForm, bind as bindForm } from './forms'
+import {
+  NewWalletForm,
+  WalletConfigForm,
+  UnlockWalletForm,
+  DepositAddress,
+  bind as bindForm
+} from './forms'
 import State from './state'
 import * as intl from './locales'
 import * as OrderUtil from './orderutil'
@@ -21,7 +27,6 @@ import {
 
 const animationLength = 300
 const traitRescanner = 1
-const traitNewAddresser = 1 << 1
 const traitLogFiler = 1 << 2
 const traitRecoverer = 1 << 5
 const traitWithdrawer = 1 << 6
@@ -63,6 +68,7 @@ export default class WalletsPage extends BasePage {
   newWalletForm: NewWalletForm
   reconfigForm: WalletConfigForm
   unlockForm: UnlockWalletForm
+  depositAddrForm: DepositAddress
   keyup: (e: KeyboardEvent) => void
   changeWalletPW: boolean
   displayed: HTMLElement
@@ -88,7 +94,6 @@ export default class WalletsPage extends BasePage {
       Doc.bind(el, 'click', () => { this.closePopups() })
     })
     Doc.bind(page.cancelForce, 'click', () => { this.closePopups() })
-    Doc.bind(page.copyAddressBtn, 'click', () => { this.copyAddress() })
 
     this.selectedAssetID = -1
     Doc.cleanTemplates(
@@ -152,7 +157,7 @@ export default class WalletsPage extends BasePage {
     bindForm(page.toggleWalletStatusConfirm, page.toggleWalletStatusSubmit, async () => { this.toggleWalletStatus() })
 
     // New deposit address button.
-    Doc.bind(page.newDepAddrBttn, 'click', async () => { this.newDepositAddress() })
+    this.depositAddrForm = new DepositAddress(page.deposit)
 
     // Clicking on the available amount on the Send form populates the
     // amount field.
@@ -218,20 +223,6 @@ export default class WalletsPage extends BasePage {
     if (this.animation) this.animation.stop()
   }
 
-  async copyAddress () {
-    const page = this.page
-    navigator.clipboard.writeText(page.depositAddress.textContent || '')
-      .then(() => {
-        Doc.show(page.copyAlert)
-        setTimeout(() => {
-          Doc.hide(page.copyAlert)
-        }, 800)
-      })
-      .catch((reason) => {
-        console.error('Unable to copy: ', reason)
-      })
-  }
-
   // stepSend makes a request to get an estimated fee and displays the confirm
   // send form.
   async stepSend () {
@@ -778,35 +769,8 @@ export default class WalletsPage extends BasePage {
 
   /* Display a deposit address. */
   async showDeposit (assetID: number) {
-    const page = this.page
-    Doc.hide(page.depositErr)
-    const box = page.deposit
-    const asset = app().assets[assetID]
-    page.depositLogo.src = Doc.logoPath(asset.symbol)
-    const wallet = app().walletMap[assetID]
-    page.depositName.textContent = asset.name
-    page.depositAddress.textContent = wallet.address
-    page.qrcode.src = `/generateqrcode?address=${wallet.address}`
-    if ((wallet.traits & traitNewAddresser) !== 0) Doc.show(page.newDepAddrBttn)
-    else Doc.hide(page.newDepAddrBttn)
-    this.showForm(box)
-  }
-
-  /* Fetch a new address from the wallet. */
-  async newDepositAddress () {
-    const page = this.page
-    Doc.hide(page.depositErr)
-    const loaded = app().loading(page.deposit)
-    const res = await postJSON('/api/depositaddress', {
-      assetID: this.selectedAssetID
-    })
-    loaded()
-    if (!app().checkResponse(res)) {
-      Doc.showFormError(page.depositErr, res.msg)
-      return
-    }
-    page.depositAddress.textContent = res.address
-    page.qrcode.src = `/generateqrcode?address=${res.address}`
+    this.depositAddrForm.setAsset(assetID)
+    this.showForm(this.page.deposit)
   }
 
   /* Show the form to either send or withdraw funds. */
diff --git a/client/webserver/site/template-builder/main.go b/client/webserver/site/template-builder/main.go
index 89ad2c9f50..b8db5d6691 100644
--- a/client/webserver/site/template-builder/main.go
+++ b/client/webserver/site/template-builder/main.go
@@ -81,7 +81,7 @@ func main() {
 				if !found {
 					replacement, found = enDict[key]
 					if !found {
-						return fmt.Errorf("no translation and no default replacement for %s", key)
+						return fmt.Errorf("no %s translation in %q and no default replacement for %s", lang, baseName, key)
 					}
 					fmt.Printf("Warning: no %s replacement text for key %q, using 'en' value %s \n", lang, key, replacement)
 				}
diff --git a/dex/candles/candles.go b/dex/candles/candles.go
index f80e6995e3..09bac9a2a1 100644
--- a/dex/candles/candles.go
+++ b/dex/candles/candles.go
@@ -107,11 +107,11 @@ func (c *Cache) WireCandles(count int) *msgjson.WireCandles {
 // from that candle is linearly interpreted between the endpoints. The caller is
 // responsible for making sure that dur >> binSize, otherwise the results will
 // be of little value.
-func (c *Cache) Delta(since time.Time) (changePct float64, vol uint64) {
+func (c *Cache) Delta(since time.Time) (changePct float64, vol, high, low uint64) {
 	cutoff := uint64(since.UnixMilli())
 	sz := len(c.Candles)
 	if sz == 0 {
-		return 0, 0
+		return 0, 0, 0, 0
 	}
 	var startRate, endRate uint64
 	for i := 0; i < sz; i++ {
@@ -127,6 +127,13 @@ func (c *Cache) Delta(since time.Time) (changePct float64, vol uint64) {
 			}
 		}
 
+		if low == 0 || (candle.LowRate > 0 && candle.LowRate < low) {
+			low = candle.LowRate
+		}
+		if candle.HighRate > high {
+			high = candle.HighRate
+		}
+
 		if candle.StartStamp <= cutoff && candle.StartRate != 0 {
 			// Interpret the point linearly between the start and end stamps
 			cut := float64(cutoff-candle.StartStamp) / float64(candle.EndStamp-candle.StartStamp)
@@ -147,9 +154,9 @@ func (c *Cache) Delta(since time.Time) (changePct float64, vol uint64) {
 		vol += candle.MatchVolume
 	}
 	if startRate == 0 {
-		return 0, vol
+		return 0, vol, high, low
 	}
-	return (float64(endRate) - float64(startRate)) / float64(startRate), vol
+	return (float64(endRate) - float64(startRate)) / float64(startRate), vol, high, low
 }
 
 // last gets the most recent candle in the cache.
diff --git a/dex/candles/candles_test.go b/dex/candles/candles_test.go
index effcf2cfd7..816be0bd93 100644
--- a/dex/candles/candles_test.go
+++ b/dex/candles/candles_test.go
@@ -173,7 +173,7 @@ func TestDelta(t *testing.T) {
 	check24 := func(expDelta float64, expVol uint64) {
 		t.Helper()
 		high, low := (expDelta + 0.01), (expDelta - 0.01)
-		delta24, vol24 := c.Delta(testTime.Add(-time.Hour * 24))
+		delta24, vol24, _, _ := c.Delta(testTime.Add(-time.Hour * 24))
 		if delta24 < low || delta24 > high {
 			t.Fatalf("wrong delta24. expected %.3f, got, %.3f", expDelta, delta24)
 		}
@@ -231,7 +231,7 @@ func TestDeltaPartialDays(t *testing.T) {
 		StartRate:   50,
 		EndRate:     150,
 	})
-	delta6, vol6 := c.Delta(tNow.Add(-time.Hour * 6))
+	delta6, vol6, _, _ := c.Delta(tNow.Add(-time.Hour * 6))
 	// In the last 6 hours, the rate would be interpreted as going from 125 to
 	// 150, change = 25/125 = 0.20
 	// Note that the cache would never be used with duration < binSize this way
diff --git a/dex/msgjson/types.go b/dex/msgjson/types.go
index a567ac3870..7cd9402ace 100644
--- a/dex/msgjson/types.go
+++ b/dex/msgjson/types.go
@@ -1101,6 +1101,8 @@ type Spot struct {
 	BookVolume uint64  `json:"bookVolume"`
 	Change24   float64 `json:"change24"`
 	Vol24      uint64  `json:"vol24"`
+	High24     uint64  `json:"high24"`
+	Low24      uint64  `json:"low24"`
 }
 
 // CandlesRequest is a data API request for market history.
diff --git a/server/apidata/apidata.go b/server/apidata/apidata.go
index 16ff35bed6..2efacb58d3 100644
--- a/server/apidata/apidata.go
+++ b/server/apidata/apidata.go
@@ -111,12 +111,12 @@ func (s *DataAPI) ReportEpoch(base, quote uint32, epochIdx uint64, stats *matche
 	}
 
 	// Add the candlestick.
-	addCandle := func() (change24 float64, vol24 uint64, err error) {
+	addCandle := func() (change24 float64, vol24, high24, low24 uint64, err error) {
 		s.cacheMtx.Lock()
 		defer s.cacheMtx.Unlock()
 		mktCaches := s.marketCaches[mktName]
 		if mktCaches == nil {
-			return 0, 0, fmt.Errorf("unknown market %q", mktName)
+			return 0, 0, 0, 0, fmt.Errorf("unknown market %q", mktName)
 		}
 		epochDur := s.epochDurations[mktName]
 		startStamp := epochIdx * epochDur
@@ -140,13 +140,13 @@ func (s *DataAPI) ReportEpoch(base, quote uint32, epochIdx uint64, stats *matche
 			cache.Add(candle)
 		}
 		if cache5min == nil {
-			return 0, 0, fmt.Errorf("no 5 minute cache")
+			return 0, 0, 0, 0, fmt.Errorf("no 5 minute cache")
 		}
-		change24, vol24 = cache5min.Delta(time.Now().Add(-time.Hour * 24))
+		change24, vol24, high24, low24 = cache5min.Delta(time.Now().Add(-time.Hour * 24))
 		return
 	}
 
-	change24, vol24, err := addCandle()
+	change24, vol24, high24, low24, err := addCandle()
 	if err != nil {
 		return nil, err
 	}
@@ -159,6 +159,8 @@ func (s *DataAPI) ReportEpoch(base, quote uint32, epochIdx uint64, stats *matche
 		Rate:     stats.EndRate,
 		Change24: change24,
 		Vol24:    vol24,
+		High24:   high24,
+		Low24:    low24,
 	}
 	s.spotsMtx.Lock()
 	s.spots[mktName], err = json.Marshal(spot)