feat(dashboard): render prices and amounts as human-readable floats (#182)

The dev dashboard renders order-book prices and amounts as raw integers,
which is hard to read at a glance.

This makes the canister dev dashboard show each value as a
human-readable float per whole token with unit symbols, in the
trader-native `quantity @ price` notation, while keeping the exact raw
integers alongside (muted, in parentheses) for debugging. For example a
best ask now reads `0.01 ICP @ 90 ckBTC/ICP (1_000_000 @
9_000_000_000/10^8)`.

Scope is the dashboard only — no API or domain changes.

- Best bid/ask use the `quantity @ price` form; tick size, lot size and
spread render in the same float-with-units style.
- Values are scaled by the relevant token's decimals (quantities by
base, prices by quote), and the conversion is exact (no float math), so
large u256 quantities keep full precision.
- The exact raw integers stay visible in muted parentheses next to every
value, grouped with `_` thousands separators, with the price divisor
(`/10^quote_decimals`) shown so the scaling is verifiable.
- Depth tables carry the unit symbol in the column headers to avoid
repeating it per row.

<img width="1755" height="459" alt="Screenshot 2026-06-26 at 11 15 21"
src="https://github.com/user-attachments/assets/56f80640-943e-41a4-994e-1e70ce789205"
/>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: gregorydemay

canister/src/dashboard/mod.rs

@@ -4,7 +4,7 @@ mod tests;
 use crate::order::{OrderBook, Price, Quantity};
 use crate::state::State;
 use askama::Template;
-use candid::Principal;
+use candid::{Nat, Principal};
 use ic_stable_structures::Memory;
 use oisy_trade_types_internal::Mode;
 
@@ -30,8 +30,9 @@ pub struct DashboardPair {
     pub book_id: u64,
     pub base_symbol: String,
     pub quote_symbol: String,
-    pub tick_size: u128,
-    pub lot_size: u64,
+    pub quote_decimals: u8,
+    pub tick_size: Amount,
+    pub lot_size: Amount,
     pub maker_fee_bps: u16,
     pub taker_fee_bps: u16,
     pub bids_len: usize,
@@ -40,13 +41,32 @@ pub struct DashboardPair {
     pub resting_orders_len: usize,
     pub best_bid: Option<DashboardLevel>,
     pub best_ask: Option<DashboardLevel>,
-    pub spread: Option<u128>,
+    pub spread: Option<Amount>,
     pub depth: DashboardDepth,
 }
 
+/// A numeric dashboard field shown both as a human-readable decimal and as its
+/// underlying integer.
+///
+/// For a price `1_000_000_000` at 8 decimals: `decimal_value = "10"`,
+/// `raw_value = "1_000_000_000"`.
+pub struct Amount {
+    pub decimal_value: String,
+    pub raw_value: String,
+}
+
+impl Amount {
+    fn new(raw: Nat, decimals: u8) -> Self {
+        Self {
+            decimal_value: format_scaled(&raw.0.to_string(), decimals),
+            raw_value: raw.to_string(),
+        }
+    }
+}
+
 pub struct DashboardLevel {
-    pub price: u128,
-    pub quantity: String,
+    pub price: Amount,
+    pub quantity: Amount,
 }
 
 pub struct DashboardDepth {
@@ -61,8 +81,8 @@ impl DashboardDepth {
 }
 
 pub struct DashboardDepthLevel {
-    pub price: u128,
-    pub quantity: String,
+    pub price: Amount,
+    pub quantity: Amount,
     pub bar_width_percent: u8,
 }
 
@@ -88,17 +108,19 @@ impl DashboardTemplate {
                 let book = state
                     .order_book(book_id)
                     .expect("BUG: trading pair registered but order book missing");
-                let base_symbol = state
+                let base_metadata = state
                     .token_metadata(&pair.base)
-                    .expect("BUG: base token metadata missing")
-                    .symbol
-                    .clone();
-                let quote_symbol = state
+                    .expect("BUG: base token metadata missing");
+                let base_symbol = base_metadata.symbol.clone();
+                let quote_metadata = state
                     .token_metadata(&pair.quote)
-                    .expect("BUG: quote token metadata missing")
-                    .symbol
-                    .clone();
-                build_pair(book.id().get(), base_symbol, quote_symbol, book)
+                    .expect("BUG: quote token metadata missing");
+                let quote_symbol = quote_metadata.symbol.clone();
+                let decimals = PairDecimals {
+                    base: base_metadata.decimals,
+                    quote: quote_metadata.decimals,
+                };
+                build_pair(book.id().get(), base_symbol, quote_symbol, decimals, book)
             })
             .collect();
         Self {
@@ -111,28 +133,37 @@ impl DashboardTemplate {
     }
 }
 
+struct PairDecimals {
+    base: u8,
+    quote: u8,
+}
+
 fn build_pair(
     book_id: u64,
     base_symbol: String,
     quote_symbol: String,
+    decimals: PairDecimals,
     book: &OrderBook,
 ) -> DashboardPair {
     let bids: Vec<(Price, Quantity)> = book.bid_levels(DEPTH_LEVELS).collect();
     let asks: Vec<(Price, Quantity)> = book.ask_levels(DEPTH_LEVELS).collect();
     let best_bid_level = bids.first().copied();
     let best_ask_level = asks.first().copied();
-    let best_bid = best_bid_level.map(level);
-    let best_ask = best_ask_level.map(level);
+    let best_bid = best_bid_level.map(|l| level(l, &decimals));
+    let best_ask = best_ask_level.map(|l| level(l, &decimals));
     let spread = match (best_bid_level, best_ask_level) {
-        (Some((bid, _)), Some((ask, _))) => ask.checked_sub(bid).map(Price::get),
+        (Some((bid, _)), Some((ask, _))) => ask
+            .checked_sub(bid)
+            .map(|s| Amount::new(Nat::from(s.get()), decimals.quote)),
         _ => None,
     };
     DashboardPair {
         book_id,
         base_symbol,
         quote_symbol,
-        tick_size: book.tick_size().get(),
-        lot_size: book.lot_size().get(),
+        quote_decimals: decimals.quote,
+        tick_size: Amount::new(Nat::from(book.tick_size().get()), decimals.quote),
+        lot_size: Amount::new(Nat::from(book.lot_size().get()), decimals.base),
         maker_fee_bps: book.fee_rates().maker.get(),
         taker_fee_bps: book.fee_rates().taker.get(),
         bids_len: book.bids_len(),
@@ -142,29 +173,37 @@ fn build_pair(
         best_bid,
         best_ask,
         spread,
-        depth: build_depth(&bids, &asks),
+        depth: build_depth(&bids, &asks, &decimals),
     }
 }
 
-fn build_depth(bids: &[(Price, Quantity)], asks: &[(Price, Quantity)]) -> DashboardDepth {
+fn build_depth(
+    bids: &[(Price, Quantity)],
+    asks: &[(Price, Quantity)],
+    decimals: &PairDecimals,
+) -> DashboardDepth {
     let max = bids
         .iter()
         .chain(asks.iter())
         .map(|(_, q)| saturating_to_u128(q))
         .max()
         .unwrap_or(0);
     DashboardDepth {
-        bids: depth_levels(bids, max),
-        asks: depth_levels(asks, max),
+        bids: depth_levels(bids, max, decimals),
+        asks: depth_levels(asks, max, decimals),
     }
 }
 
-fn depth_levels(levels: &[(Price, Quantity)], max: u128) -> Vec<DashboardDepthLevel> {
+fn depth_levels(
+    levels: &[(Price, Quantity)],
+    max: u128,
+    decimals: &PairDecimals,
+) -> Vec<DashboardDepthLevel> {
     levels
         .iter()
         .map(|(price, qty)| DashboardDepthLevel {
-            price: price.get(),
-            quantity: qty.to_nat().to_string(),
+            price: Amount::new(Nat::from(price.get()), decimals.quote),
+            quantity: Amount::new(qty.to_nat(), decimals.base),
             bar_width_percent: bar_width_percent(saturating_to_u128(qty), max),
         })
         .collect()
@@ -181,10 +220,25 @@ fn bar_width_percent(qty: u128, max: u128) -> u8 {
     percent.min(100) as u8
 }
 
-fn level((price, quantity): (Price, Quantity)) -> DashboardLevel {
+fn level((price, quantity): (Price, Quantity), decimals: &PairDecimals) -> DashboardLevel {
     DashboardLevel {
-        price: price.get(),
-        quantity: quantity.to_nat().to_string(),
+        price: Amount::new(Nat::from(price.get()), decimals.quote),
+        quantity: Amount::new(quantity.to_nat(), decimals.base),
+    }
+}
+
+fn format_scaled(raw: &str, decimals: u8) -> String {
+    let decimals = decimals as usize;
+    if decimals == 0 {
+        return raw.to_string();
+    }
+    let padded = format!("{:0>width$}", raw, width = decimals + 1);
+    let split = padded.len() - decimals;
+    let frac = padded[split..].trim_end_matches('0');
+    if frac.is_empty() {
+        padded[..split].to_string()
+    } else {
+        format!("{}.{}", &padded[..split], frac)
     }
 }
 

canister/src/dashboard/tests.rs

@@ -1,4 +1,4 @@
-use super::{DashboardTemplate, bar_width_percent, saturating_to_u128};
+use super::{DashboardTemplate, bar_width_percent, format_scaled, saturating_to_u128};
 use crate::order::{
     BasisPoint, FeeRates, OrderBookId, OrderId, PendingOrder, Price, Quantity, Side, TimeInForce,
     TradingPair,
@@ -103,20 +103,13 @@ fn should_render_per_pair_metadata() {
 
     let dom = render(&state, 0);
     let dl_text = text(&dom, "section.pair dl");
-    let best_bid = 100 * PRICE_SCALE;
-    let best_ask = 110 * PRICE_SCALE;
-    assert!(dl_text.contains(&format!("{}", TICK_SIZE.get())));
-    assert!(dl_text.contains(&format!("{}", LOT_SIZE.get())));
-    // Pair each <dt> label with its <dd> value so the assertion checks the
-    // value wiring (and maker/taker are not swapped) without depending on
-    // whitespace between the tags.
     let dts = column(&dom, "section.pair dl dt");
     let dds = column(&dom, "section.pair dl dd");
     let value_for = |label: &str| {
         dts.iter()
             .zip(&dds)
             .find(|(dt, _)| dt.trim() == label)
-            .map(|(_, dd)| dd.trim().to_string())
+            .map(|(_, dd)| dd.split_whitespace().collect::<Vec<_>>().join(" "))
     };
     let expected_maker = format!("{MAKER_FEE_BPS} bps");
     let expected_taker = format!("{TAKER_FEE_BPS} bps");
@@ -128,18 +121,29 @@ fn should_render_per_pair_metadata() {
         value_for("Taker fee").as_deref(),
         Some(expected_taker.as_str())
     );
-    assert!(
-        dl_text.contains(&best_bid.to_string()),
-        "best bid {best_bid} in: {dl_text}"
+    assert_eq!(
+        value_for("Tick size").as_deref(),
+        Some("0.000001 ckBTC/ICP (100/10^8)")
     );
-    assert!(
-        dl_text.contains(&best_ask.to_string()),
-        "best ask {best_ask} in: {dl_text}"
+    assert_eq!(
+        value_for("Lot size").as_deref(),
+        Some("0.01 ICP (1_000_000)")
+    );
+    assert_eq!(
+        value_for("Best bid").as_deref(),
+        Some("0.01 ICP @ 100 ckBTC/ICP (1_000_000 @ 10_000_000_000/10^8)")
+    );
+    assert_eq!(
+        value_for("Best ask").as_deref(),
+        Some("0.01 ICP @ 110 ckBTC/ICP (1_000_000 @ 11_000_000_000/10^8)")
+    );
+    assert_eq!(
+        value_for("Spread").as_deref(),
+        Some("10 ckBTC/ICP (1_000_000_000/10^8)")
     );
     assert!(
-        dl_text.contains(&(best_ask - best_bid).to_string()),
-        "spread {} in: {dl_text}",
-        best_ask - best_bid
+        dl_text.contains("0.000001"),
+        "formatted tick size in: {dl_text}"
     );
 }
 
@@ -153,12 +157,12 @@ fn should_render_depth_chart_for_resting_orders() {
 
     let dom = render(&state, 0);
 
-    let bid_prices = column(&dom, "table.depth-bids td.price");
-    assert_eq!(bid_prices, vec![(100 * PRICE_SCALE).to_string()]);
-    let ask_prices = column(&dom, "table.depth-asks td.price");
-    assert_eq!(ask_prices, vec![(110 * PRICE_SCALE).to_string()]);
-    let bid_qtys = column(&dom, "table.depth-bids tbody tr td:nth-child(2)");
-    assert_eq!(bid_qtys, vec![candid::Nat::from(lot(1)).to_string()]);
+    let bid_prices = cells(&dom, "table.depth-bids td.price");
+    assert_eq!(bid_prices, vec!["100 (10_000_000_000/10^8)"]);
+    let ask_prices = cells(&dom, "table.depth-asks td.price");
+    assert_eq!(ask_prices, vec!["110 (11_000_000_000/10^8)"]);
+    let bid_qtys = cells(&dom, "table.depth-bids tbody tr td:nth-child(2)");
+    assert_eq!(bid_qtys, vec!["0.01 (1_000_000)"]);
 
     assert_eq!(bar_widths(&dom), vec!["width: 100%", "width: 100%"]);
 }
@@ -210,6 +214,39 @@ fn should_saturate_quantity_to_u128() {
     assert_eq!(saturating_to_u128(&Quantity::MAX), u128::MAX);
 }
 
+#[test]
+fn should_format_scaled_with_zero_decimals_as_passthrough() {
+    assert_eq!(format_scaled("12345", 0), "12345");
+}
+
+#[test]
+fn should_format_scaled_sub_one_with_leading_zero() {
+    assert_eq!(format_scaled("1000000", 9), "0.001");
+}
+
+#[test]
+fn should_format_scaled_trimming_trailing_zeros() {
+    assert_eq!(format_scaled("1000000000000000000", 18), "1");
+}
+
+#[test]
+fn should_format_scaled_exact_mid_value() {
+    assert_eq!(format_scaled("50000000000000000", 18), "0.05");
+}
+
+#[test]
+fn should_format_scaled_u256_quantity_without_precision_loss() {
+    let raw = Quantity::new(1, 0).to_nat().0.to_string();
+    assert_eq!(
+        raw, "340282366920938463463374607431768211456",
+        "Quantity::new(1, 0) is 2^128"
+    );
+    assert_eq!(
+        format_scaled(&raw, 18),
+        "340282366920938463463.374607431768211456"
+    );
+}
+
 fn fresh_state() -> State<VectorMemory, VectorMemory> {
     test_fixtures::state()
 }
@@ -303,6 +340,18 @@ fn column(dom: &Html, selector: &str) -> Vec<String> {
         .collect()
 }
 
+fn cells(dom: &Html, selector: &str) -> Vec<String> {
+    dom.select(&sel(selector))
+        .map(|e| {
+            e.text()
+                .collect::<String>()
+                .split_whitespace()
+                .collect::<Vec<_>>()
+                .join(" ")
+        })
+        .collect()
+}
+
 fn bar_widths(dom: &Html) -> Vec<String> {
     dom.select(&sel("td.bar div"))
         .map(|d| d.value().attr("style").unwrap_or("").to_string())