@orvui/vue 0.0.0-stage → 0.1.1

package/src/charts/liquidity-heatmap/src/LiquidityHeatmapPlot.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { computed, ref, useId } from "vue";
+import { motion } from "motion-v";
+import { EASE_OUT } from "../../../lib/ease";
+import { NumberTicker } from "../../../motion/number";
+import { moveFocus } from "../../shared";
+import ChartTooltip from "../../ChartTooltip.vue";
+import { useLiquidityHeatmap, heatColor } from "./context";
+import { pricePosition } from "./model";
+const heatmap = useLiquidityHeatmap();
+const active = ref<string | null>(null),
+  cursor = ref<string | null>(null),
+  anchor = ref<HTMLElement | null>(null);
+const tooltipId = useId();
+const rows = computed(() =>
+  heatmap.prices.map((price, row) => ({
+    price,
+    cells: heatmap.columns.map((column, index) => ({
+      key: JSON.stringify([column.id, price]),
+      column,
+      price,
+      index: row * heatmap.columns.length + index,
+      size: column.levels.get(price),
+      color: heatColor(column.levels.get(price) ?? 0, heatmap.ceiling),
+    })),
+  })),
+);
+const cells = computed(() => rows.value.flatMap((row) => row.cells));
+const byKey = computed(
+  () => new Map(cells.value.map((cell) => [cell.key, cell])),
+);
+const focusedKey = computed(() =>
+  cursor.value !== null && byKey.value.has(cursor.value)
+    ? cursor.value
+    : cells.value[0]?.key,
+);
+const selected = computed(() =>
+  active.value === null ? null : (byKey.value.get(active.value) ?? null),
+);
+const trace = computed(() => {
+  let continuation = false;
+  const commands = heatmap.columns.map((column, index) => {
+    const y =
+      column.price === undefined
+        ? null
+        : pricePosition(column.price, heatmap.prices);
+    if (y === null) {
+      continuation = false;
+      return "";
+    }
+    const command = `${continuation ? "L" : "M"}${index + 0.5},${y}`;
+    continuation = true;
+    return command;
+  });
+  return commands.join(" ");
+});
+const topology = computed(() =>
+  heatmap.columns
+    .map(
+      (column) =>
+        `${column.id}:${column.price !== undefined && pricePosition(column.price, heatmap.prices) !== null}`,
+    )
+    .join("|"),
+);
+const labels = computed(() =>
+  heatmap.columns.filter(
+    (_, index) =>
+      index % Math.max(1, Math.ceil(heatmap.columns.length / 5)) === 0 ||
+      index === heatmap.columns.length - 1,
+  ),
+);
+function activate(event: Event, key: string) {
+  anchor.value = event.currentTarget as HTMLElement;
+  active.value = key;
+}
+function focus(event: Event, key: string) {
+  cursor.value = key;
+  activate(event, key);
+}
+</script>
+<template>
+  <p
+    v-if="!heatmap.prices.length || !heatmap.columns.length"
+    class="py-16 text-center text-sm text-muted-foreground"
+  >
+    No liquidity data
+  </p>
+  <div v-else class="overflow-x-auto">
+    <div
+      class="relative"
+      :style="{
+        minWidth: Math.max(480, heatmap.columns.length * 24) + 'px',
+        paddingRight: '72px',
+      }"
+    >
+      <div class="relative">
+        <table
+          aria-label="Liquidity by price and time"
+          class="w-full table-fixed border-separate border-spacing-[2px]"
+          data-chart-keyboard
+        >
+          <thead class="sr-only">
+            <tr>
+              <th
+                v-for="column in heatmap.columns"
+                :key="column.id"
+                scope="col"
+              >
+                {{ column.label }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in rows" :key="row.price">
+              <td v-for="cell in row.cells" :key="cell.column.id" class="p-0">
+                <button
+                  type="button"
+                  data-chart-item
+                  :data-cell="cell.index"
+                  :tabindex="cell.key === focusedKey ? 0 : -1"
+                  :aria-label="`${cell.column.label}, ${heatmap.formatPrice(cell.price)}: ${cell.size === undefined ? 'No data' : heatmap.formatSize(cell.size) + ' ' + heatmap.unit}`"
+                  :aria-describedby="
+                    active === cell.key ? tooltipId : undefined
+                  "
+                  class="relative block h-6 w-full rounded-[2px] bg-muted/30 outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-foreground"
+                  @pointerenter="
+                    $event.pointerType !== 'touch' && activate($event, cell.key)
+                  "
+                  @pointerleave="active = null"
+                  @focus="focus($event, cell.key)"
+                  @blur="active = null"
+                  @click="activate($event, cell.key)"
+                  @keydown="
+                    moveFocus(
+                      $event,
+                      cell.index,
+                      cells.length,
+                      heatmap.columns.length,
+                    )
+                  "
+                  @keydown.esc="active = null"
+                >
+                  <motion.span
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-0 rounded-[2px]"
+                    :initial="false"
+                    :animate="{
+                      opacity: cell.size !== undefined ? 1 : 0,
+                      backgroundColor: cell.color,
+                    }"
+                    :transition="{
+                      duration: heatmap.reduce ? 0 : 0.28,
+                      ease: EASE_OUT,
+                    }"
+                  />
+                  <span
+                    v-if="active === cell.key"
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-0 rounded-[2px] ring-1 ring-inset ring-white"
+                  /></button
+                ><span class="sr-only">{{ cell.size ?? "No data" }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div
+          aria-hidden="true"
+          class="absolute -right-[72px] top-0 bottom-0 flex w-16 flex-col justify-around text-right font-mono text-[10px] text-muted-foreground tabular-nums"
+        >
+          <span v-for="price in heatmap.prices" :key="price">{{
+            heatmap.formatPrice(price)
+          }}</span>
+        </div>
+        <svg
+          :key="topology"
+          aria-hidden="true"
+          class="pointer-events-none absolute inset-0 size-full overflow-visible"
+          :viewBox="`0 0 ${heatmap.columns.length} ${heatmap.prices.length}`"
+          preserveAspectRatio="none"
+        >
+          <motion.path
+            :initial="false"
+            :animate="{ d: trace }"
+            :transition="{
+              duration: heatmap.reduce ? 0 : 0.28,
+              ease: EASE_OUT,
+            }"
+            fill="none"
+            stroke="black"
+            stroke-opacity=".35"
+            stroke-width="4"
+            vector-effect="non-scaling-stroke"
+          />
+          <motion.path
+            :initial="false"
+            :animate="{ d: trace }"
+            :transition="{
+              duration: heatmap.reduce ? 0 : 0.28,
+              ease: EASE_OUT,
+            }"
+            fill="none"
+            stroke="white"
+            stroke-opacity=".9"
+            stroke-width="1.5"
+            vector-effect="non-scaling-stroke"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+      <div
+        aria-hidden="true"
+        class="mt-3 flex justify-between font-mono text-[10px] text-muted-foreground"
+      >
+        <span v-for="column in labels" :key="column.id">{{
+          column.label
+        }}</span>
+      </div>
+    </div>
+    <ChartTooltip
+      :key="active ?? 'closed'"
+      :id="tooltipId"
+      :open="selected !== null"
+      :anchor="anchor"
+      @update:open="!$event && (active = null)"
+    >
+      <span v-if="selected" class="flex flex-col gap-1 font-mono text-xs"
+        ><span class="text-muted-foreground"
+          >{{ selected.column.label }} ·
+          {{ heatmap.formatPrice(selected.price) }}</span
+        >
+        <span class="inline-flex items-center tabular-nums"
+          ><template v-if="selected.size === undefined">No data</template
+          ><NumberTicker
+            v-else
+            :value="selected.size"
+            :format="() => heatmap.formatSize(selected!.size!)"
+            :suffix="' ' + heatmap.unit"
+            :duration="0.35"
+            :start-on-view="false"
+        /></span>
+        <span
+          v-if="
+            selected.column.price !== undefined &&
+            Number.isFinite(selected.column.price)
+          "
+          class="text-muted-foreground"
+          >Market {{ heatmap.formatPrice(selected.column.price) }}</span
+        >
+      </span>
+    </ChartTooltip>
+  </div>
+</template>

package/src/charts/liquidity-heatmap/src/context.ts

@@ -0,0 +1,50 @@
+import { computed, reactive } from "vue";
+import { useReducedMotion } from "../../../lib/composables";
+import { context, formatNumber, formatCompact } from "../../shared";
+import { buildLiquidityHeatmap, type LiquiditySnapshot } from "./model";
+export interface LiquidityHeatmapProps {
+  snapshots: readonly LiquiditySnapshot[];
+  maxSize?: number;
+  unit?: string;
+  label?: string;
+  formatPrice?: (value: number) => string;
+  formatSize?: (value: number) => string;
+  className?: string;
+}
+export function createLiquidityModel(props: LiquidityHeatmapProps) {
+  const data = computed(() => buildLiquidityHeatmap(props.snapshots));
+  const ceiling = computed(() => {
+    const supplied = props.maxSize;
+    return supplied !== undefined && Number.isFinite(supplied) && supplied > 0
+      ? supplied
+      : data.value.maximum;
+  });
+  return reactive({
+    columns: computed(() => data.value.columns),
+    prices: computed(() => data.value.prices),
+    ceiling,
+    unit: computed(() => props.unit ?? "units"),
+    label: computed(() => props.label ?? "Liquidity heatmap"),
+    formatPrice: computed(() => props.formatPrice ?? formatNumber),
+    formatSize: computed(() => props.formatSize ?? formatCompact),
+    reduce: useReducedMotion(),
+  });
+}
+export const liquidityContext =
+  context<ReturnType<typeof createLiquidityModel>>("LiquidityHeatmap");
+export const useLiquidityHeatmap = liquidityContext.use;
+export const LIQUIDITY_COLORS = [
+  "#17233b",
+  "#254f80",
+  "#217c90",
+  "#27af98",
+  "#97d56b",
+  "#f4df76",
+];
+export const heatColor = (value: number, maximum: number) =>
+  LIQUIDITY_COLORS[
+    Math.min(
+      LIQUIDITY_COLORS.length - 1,
+      Math.floor((maximum > 0 ? value / maximum : 0) * LIQUIDITY_COLORS.length),
+    )
+  ];

package/src/charts/liquidity-heatmap/src/model.ts

@@ -0,0 +1,58 @@
+export interface LiquiditySnapshot {
+  id: string;
+  label: string;
+  levels: readonly { price: number; size: number }[];
+  price?: number;
+}
+
+export function buildLiquidityHeatmap(snapshots: readonly LiquiditySnapshot[]) {
+  const snapshotsById = new Map<string, LiquiditySnapshot>();
+  for (const snapshot of snapshots)
+    if (!snapshotsById.has(snapshot.id))
+      snapshotsById.set(snapshot.id, snapshot);
+  const priceLevels = new Set<number>();
+  let maximum = 0;
+  const columns = [...snapshotsById.values()].map((snapshot) => {
+    const levels = new Map<number, number>();
+    for (const observation of snapshot.levels) {
+      const { price, size } = observation;
+      if (
+        !Number.isFinite(price) ||
+        price <= 0 ||
+        !Number.isFinite(size) ||
+        size < 0
+      )
+        continue;
+      const summed = (levels.get(price) ?? 0) + size;
+      if (Number.isFinite(summed)) levels.set(price, summed);
+    }
+    for (const [price, size] of levels) {
+      priceLevels.add(price);
+      maximum = Math.max(maximum, size);
+    }
+    return { ...snapshot, levels };
+  });
+  return { columns, prices: [...priceLevels].sort((a, b) => b - a), maximum };
+}
+
+export function pricePosition(price: number, prices: readonly number[]) {
+  const last = prices.length - 1;
+  if (
+    !Number.isFinite(price) ||
+    last < 0 ||
+    price > prices[0] ||
+    price < prices[last]
+  )
+    return null;
+  if (price === prices[last]) return last + 0.5;
+  let lower = 0;
+  let upper = last;
+  while (upper - lower > 1) {
+    const middle = (lower + upper) >>> 1;
+    if (price > prices[middle]) upper = middle;
+    else lower = middle;
+  }
+  return (
+    lower + 0.5 + (prices[lower] - price) / (prices[lower] - prices[upper])
+  );
+}

package/src/charts/order-book/index.ts

@@ -0,0 +1,35 @@
+export { default as OrderBook } from "./src/OrderBook.vue";
+export { default as OrderBookBalance } from "./src/OrderBookBalance.vue";
+export { default as OrderBookDepthRow } from "./src/OrderBookDepthRow.vue";
+export { default as OrderBookDepthSummary } from "./src/OrderBookDepthSummary.vue";
+export { default as OrderBookHeader } from "./src/OrderBookHeader.vue";
+export { default as OrderBookSide } from "./src/OrderBookSide.vue";
+export { default as OrderBookSpread } from "./src/OrderBookSpread.vue";
+export { useOrderBook } from "./src/context";
+export type {
+  OrderBookProps,
+  OrderBookLevel,
+  OrderBookActiveLevel,
+} from "./src/context";
+export type {
+  DepthLevel as OrderBookDepthLevel,
+  DepthSummary as OrderBookDepthSummaryData,
+} from "./src/model";
+export type OrderBookSideProps = InstanceType<
+  (typeof import("./src/OrderBookSide.vue"))["default"]
+>["$props"];
+export type OrderBookDepthSummaryProps = InstanceType<
+  (typeof import("./src/OrderBookDepthSummary.vue"))["default"]
+>["$props"];
+export type OrderBookDepthRowProps = InstanceType<
+  (typeof import("./src/OrderBookDepthRow.vue"))["default"]
+>["$props"];
+export type OrderBookHeaderProps = InstanceType<
+  (typeof import("./src/OrderBookHeader.vue"))["default"]
+>["$props"];
+export type OrderBookBalanceProps = InstanceType<
+  (typeof import("./src/OrderBookBalance.vue"))["default"]
+>["$props"];
+export type OrderBookSpreadProps = InstanceType<
+  (typeof import("./src/OrderBookSpread.vue"))["default"]
+>["$props"];

package/src/charts/order-book/src/OrderBook.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import {
+  createOrderBookModel,
+  orderBookContext,
+  type OrderBookProps,
+} from "./context";
+import OrderBookHeader from "./OrderBookHeader.vue";
+import OrderBookSide from "./OrderBookSide.vue";
+import OrderBookSpread from "./OrderBookSpread.vue";
+import OrderBookBalance from "./OrderBookBalance.vue";
+const props = defineProps<OrderBookProps>();
+const emit = defineEmits([
+  "update:activeLevel",
+  "activeLevelChange",
+  "levelSelect",
+]);
+const book = createOrderBookModel(props, emit);
+provide(orderBookContext.key, book);
+</script>
+<template>
+  <section
+    :aria-label="book.label"
+    :class="[
+      'w-full max-w-[560px] overflow-hidden rounded-2xl border border-border bg-background font-mono text-xs tabular-nums',
+      props.className,
+    ]"
+  >
+    <slot
+      ><OrderBookHeader /><OrderBookSide
+        side="ask" /><OrderBookSpread /><OrderBookSide
+        side="bid" /><OrderBookBalance
+    /></slot>
+  </section>
+</template>

package/src/charts/order-book/src/OrderBookBalance.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion } from "motion-v";
+import { SPRING_PANEL } from "../../../lib/ease";
+import { useOrderBook } from "./context";
+const book = useOrderBook();
+const total = computed(() => book.bidTotal + book.askTotal);
+const ratio = computed(() => (total.value ? book.bidTotal / total.value : 0.5));
+</script>
+<template>
+  <div class="space-y-2 border-t border-border px-4 pt-3 pb-3">
+    <div class="flex justify-between text-[10px]">
+      <span class="text-emerald-700 dark:text-emerald-400"
+        >Bids {{ total ? (ratio * 100).toFixed(1) + "%" : "—" }}</span
+      ><span class="text-muted-foreground">Visible depth</span
+      ><span class="text-rose-600 dark:text-rose-400"
+        >Asks {{ total ? ((1 - ratio) * 100).toFixed(1) + "%" : "—" }}</span
+      >
+    </div>
+    <div
+      aria-hidden="true"
+      class="relative h-1 overflow-hidden rounded-full bg-rose-500/25"
+    >
+      <motion.div
+        :initial="false"
+        :animate="{ scaleX: ratio }"
+        :transition="book.reduce ? { duration: 0 } : SPRING_PANEL"
+        class="absolute inset-0 origin-left bg-emerald-500/60"
+      />
+    </div>
+  </div>
+</template>

package/src/charts/order-book/src/OrderBookDepthRow.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, watch } from "vue";
+import { animate, motion, motionValue } from "motion-v";
+import { EASE_OUT, SPRING_PANEL } from "../../../lib/ease";
+import { useOrderBook } from "./context";
+import type { DepthLevel } from "./model";
+const props = defineProps<{
+  row: DepthLevel;
+  side: "bid" | "ask";
+  inRange?: boolean;
+  fraction: number;
+  entranceIndex: number;
+}>();
+const book = useOrderBook();
+const highlight = motionValue(0);
+let entered = false,
+  revision = 0;
+let feedback: ReturnType<typeof animate> | undefined;
+let fading: ReturnType<typeof animate> | undefined;
+onMounted(() => {
+  entered = true;
+});
+watch(
+  () => [props.row.size, book.reduce] as const,
+  ([size, reduced], [previous]) => {
+    const current = ++revision;
+    feedback?.stop();
+    fading?.stop();
+    if (size === previous || reduced) {
+      highlight.set(0);
+      return;
+    }
+    feedback = animate(highlight, 0.1, {
+      duration: 0.08,
+      ease: EASE_OUT,
+      onComplete() {
+        if (current === revision)
+          fading = animate(highlight, 0, { duration: 0.2, ease: EASE_OUT });
+      },
+    });
+  },
+);
+onBeforeUnmount(() => {
+  revision++;
+  feedback?.stop();
+  fading?.stop();
+  highlight.destroy();
+});
+function inspect() {
+  book.setActiveLevel({ side: props.side, price: props.row.price });
+}
+</script>
+<template>
+  <motion.tr
+    :initial="{ opacity: 0 }"
+    :animate="{ opacity: 1 }"
+    :transition="{
+      duration: 0.18,
+      ease: EASE_OUT,
+      delay: book.reduce || entered ? 0 : Math.min(entranceIndex, 8) * 0.025,
+    }"
+    class="group"
+    :class="
+      side === 'ask'
+        ? 'text-rose-600 dark:text-rose-400'
+        : 'text-emerald-700 dark:text-emerald-400'
+    "
+    @pointerenter="inspect"
+  >
+    <td class="relative h-8 px-4 py-0">
+      <div
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-y-px left-1 w-[calc(300%-8px)] overflow-hidden rounded-sm"
+      >
+        <motion.div
+          :initial="
+            book.reduce ? false : { scaleX: fraction * 0.85, opacity: 0 }
+          "
+          :animate="{ scaleX: fraction, opacity: 1 }"
+          :transition="
+            book.reduce
+              ? { duration: 0 }
+              : {
+                  ...SPRING_PANEL,
+                  delay: entered ? 0 : Math.min(entranceIndex, 8) * 0.025,
+                }
+          "
+          class="absolute inset-0 origin-right overflow-hidden rounded-sm"
+          ><div class="absolute inset-0 bg-current opacity-[0.12]"
+        /></motion.div>
+        <motion.div
+          :style="{ opacity: highlight }"
+          class="absolute inset-0 bg-current"
+        />
+        <div
+          class="absolute inset-0 bg-current transition-opacity duration-150"
+          :class="
+            inRange ? 'opacity-[0.08]' : 'opacity-0 group-hover:opacity-[0.05]'
+          "
+        />
+      </div>
+      <button
+        v-if="book.selectable"
+        type="button"
+        class="relative rounded-sm outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+        :aria-label="`${side === 'ask' ? 'Ask' : 'Bid'} ${book.formatPrice(row.price)}, size ${book.formatSize(row.size)}, cumulative ${book.formatSize(row.total)}`"
+        @focus="inspect"
+        @blur="book.setActiveLevel(null)"
+        @click="book.select(row, side)"
+        @keydown.esc="book.setActiveLevel(null)"
+      >
+        {{ book.formatPrice(row.price) }}</button
+      ><span v-else class="relative">{{ book.formatPrice(row.price) }}</span>
+    </td>
+    <td class="relative px-4 py-0 text-right text-foreground">
+      {{ book.formatSize(row.size) }}
+    </td>
+    <td class="relative px-4 py-0 text-right text-muted-foreground">
+      {{ book.formatSize(row.total) }}
+    </td>
+  </motion.tr>
+</template>

package/src/charts/order-book/src/OrderBookDepthSummary.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useOrderBook } from "./context";
+withDefaults(defineProps<{ placeholder?: string }>(), {
+  placeholder: "Hover a level to see the cost of filling up to it",
+});
+const book = useOrderBook();
+</script>
+<template>
+  <p
+    aria-live="polite"
+    class="flex min-h-10 flex-wrap items-center justify-between gap-x-4 gap-y-1 border-t border-border px-4 py-2 text-muted-foreground"
+  >
+    <span v-if="!book.summary" class="font-sans">{{ placeholder }}</span
+    ><slot v-else :summary="book.summary"
+      ><span
+        >Avg
+        <span class="text-foreground">{{
+          book.formatPrice(book.summary.averagePrice)
+        }}</span></span
+      ><span
+        ><span class="text-foreground"
+          >{{ book.formatSize(book.summary.size) }} {{ book.baseSymbol }}</span
+        >
+        · {{ book.formatPrice(book.summary.quote) }}
+        {{ book.quoteSymbol }}</span
+      ></slot
+    >
+  </p>
+</template>

package/src/charts/order-book/src/OrderBookHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useOrderBook } from "./context";
+const book = useOrderBook();
+</script>
+<template>
+  <div
+    aria-hidden="true"
+    class="grid grid-cols-3 py-3 text-[10px] uppercase tracking-wider text-muted-foreground"
+  >
+    <span class="px-4"
+      >Price{{ book.quoteSymbol ? ` (${book.quoteSymbol})` : "" }}</span
+    ><span class="px-4 text-right"
+      >Size{{ book.baseSymbol ? ` (${book.baseSymbol})` : "" }}</span
+    ><span class="px-4 text-right">Total</span>
+  </div>
+</template>

package/src/charts/order-book/src/OrderBookSide.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useOrderBook } from "./context";
+import OrderBookDepthRow from "./OrderBookDepthRow.vue";
+const props = defineProps<{ side: "bid" | "ask" }>();
+const book = useOrderBook();
+const rows = computed(() => {
+  const levels = props.side === "ask" ? book.asks.slice().reverse() : book.bids;
+  return levels.map((row, index) => {
+    const depthIndex = props.side === "ask" ? levels.length - index - 1 : index;
+    return {
+      row,
+      depthIndex,
+      inRange:
+        book.active?.side === props.side && depthIndex <= book.active.index,
+      fraction: book.maxTotal ? row.total / book.maxTotal : 0,
+    };
+  });
+});
+</script>
+<template>
+  <table
+    :aria-label="side === 'ask' ? 'Asks · sell orders' : 'Bids · buy orders'"
+    class="w-full table-fixed border-separate border-spacing-0"
+  >
+    <thead class="sr-only">
+      <tr>
+        <th scope="col">Price {{ book.quoteSymbol }}</th>
+        <th scope="col">Size {{ book.baseSymbol }}</th>
+        <th scope="col">Cumulative total {{ book.baseSymbol }}</th>
+      </tr>
+    </thead>
+    <tbody @pointerleave="book.setActiveLevel(null)">
+      <tr v-if="!rows.length">
+        <td colspan="3" class="px-4 py-6 text-center text-muted-foreground">
+          No {{ side === "ask" ? "asks" : "bids" }}
+        </td>
+      </tr>
+      <OrderBookDepthRow
+        v-for="entry in rows"
+        :key="entry.row.price"
+        :row="entry.row"
+        :side="side"
+        :in-range="entry.inRange"
+        :fraction="entry.fraction"
+        :entrance-index="entry.depthIndex"
+      />
+    </tbody>
+  </table>
+</template>