Order Entry

import { OrderEntry } from '@hanzo/ui'

export function Default() {
  return (
    <YStack maxW={360}>
      <OrderEntry symbol="NASDAQ:AAPL" accountBalance={10000} />
    </YStack>
  )
}

export function HandlingSubmit() {
  return (
    <YStack maxW={360}>
      <OrderEntry
        symbol="NYSE:TSLA"
        accountBalance={25000}
        onPlaceOrder={(order) => console.log("Order placed:", order)}
      />
    </YStack>
  )
}

export function Disabled() {
  return (
    <YStack maxW={360}>
      <OrderEntry symbol="NASDAQ:MSFT" accountBalance={5000} disabled />
    </YStack>
  )
}

Types

export type OrderSide = 'buy' | 'sell'

export type OrderKind = 'market' | 'limit'

export interface PlacedOrder {
  symbol: string
  side: OrderSide
  orderType: OrderKind
  shares: number
  limitPrice?: number
}

export interface OrderEntryProps {
  /** Trading symbol, e.g. `"NASDAQ:AAPL"`. The part after `:` is the ticker shown on the submit button. */
  symbol?: string
  /** Buying power shown at the top of the ticket. */
  accountBalance?: number
  /** Fired with the composed order when the trader submits it; the form then clears. */
  onPlaceOrder?: (order: PlacedOrder) => void
  disabled?: boolean
}

Exports