Build trading UIs
without the baggage.

import { OrderBook, PriceTicker } from '@wick/react';

function TradingPanel({ bookData, tickerData }) {
  return (
    <div className="trading-panel">
      <PriceTicker data={tickerData} showDetails />
      <OrderBook
        data={bookData}
        depth={15}
        showTotal
        showDepth
        onLevelClick={(d) => placeOrder(d.price)}
      />
    </div>
  );
}

<template>
  <div class="trading-panel">
    <wick-price-ticker show-details ref="ticker" />
    <wick-order-book depth="15" show-total show-depth ref="book" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import '@wick/price-ticker'
import '@wick/order-book'

const props = defineProps(['bookData', 'tickerData'])
const ticker = ref(null)
const book = ref(null)

watch(() => props.tickerData, (data) => { if (ticker.value) ticker.value.data = data })
watch(() => props.bookData,   (data) => { if (book.value)   book.value.data   = data })
</script>

<script>
  import '@wick/order-book';
  import '@wick/price-ticker';

  export let bookData;
  export let tickerData;

  let bookEl;
  let tickerEl;

  $: if (bookEl)   bookEl.data   = bookData;
  $: if (tickerEl) tickerEl.data = tickerData;
</script>

<wick-price-ticker show-details bind:this={tickerEl} />
<wick-order-book depth="15" show-total show-depth bind:this={bookEl} />

import { Component, Input, ViewChild, ElementRef } from '@angular/core';
import '@wick/order-book';
import '@wick/price-ticker';

@Component({
  selector: 'trading-panel',
  template: `
    <wick-price-ticker show-details #ticker></wick-price-ticker>
    <wick-order-book depth="15" show-total show-depth #book></wick-order-book>
  `,
})
export class TradingPanelComponent {
  @ViewChild('ticker') ticker!: ElementRef;
  @ViewChild('book')   book!: ElementRef;

  @Input() set tickerData(v: any) { if (this.ticker) this.ticker.nativeElement.data = v; }
  @Input() set bookData(v: any)   { if (this.book)   this.book.nativeElement.data   = v; }
}

import '@wick/order-book';
import '@wick/price-ticker';

const book   = document.querySelector('wick-order-book');
const ticker = document.querySelector('wick-price-ticker');

// Set initial snapshot
book.data   = bookData;
ticker.data = tickerData;

// Stream live updates
ws.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  book.applyDelta(msg.delta);
  ticker.data = msg.ticker;
};

// React to level clicks
book.addEventListener('wick-order-book-level-click', (e) => {
  placeOrder(e.detail.price, e.detail.side);
});