@hanzo/ui 5.1.8 → 5.2.1

package/finance/components/OrdersHistory.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+export interface Order {
+  id: string
+  symbol: string
+  type: 'buy' | 'sell'
+  shares: number
+  price: number
+  status: 'open' | 'filled' | 'cancelled' | 'pending'
+  timestamp: number
+  orderType?: 'market' | 'limit'
+}
+
+export interface OrdersHistoryProps {
+  orders: Order[]
+  onCancelOrder?: (orderId: string) => void
+  onOrderClick?: (order: Order) => void
+}
+
+export function OrdersHistory({ orders, onCancelOrder, onOrderClick }: OrdersHistoryProps) {
+  const getTickerFromSymbol = (symbol: string) => {
+    return symbol.split(':')[1] || symbol
+  }
+
+  if (orders.length === 0) {
+    return (
+      <div className="p-4 text-center py-8 text-white/40">
+        <p className="text-sm">No orders yet</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 space-y-2">
+      {orders.map((order) => (
+        <div 
+          key={order.id} 
+          className={`bg-white/5 rounded-lg p-3 ${onOrderClick ? 'cursor-pointer hover:bg-white/10 transition-colors' : ''}`}
+          onClick={() => onOrderClick?.(order)}
+        >
+          <div className="flex items-start justify-between mb-2">
+            <div>
+              <div className="font-semibold text-white">
+                {getTickerFromSymbol(order.symbol)}
+              </div>
+              <div className="text-xs text-white/60">
+                {new Date(order.timestamp).toLocaleString()}
+              </div>
+            </div>
+            <div className={`text-xs px-2 py-1 rounded ${
+              order.status === 'filled'
+                ? 'bg-success/20 text-success'
+                : order.status === 'cancelled'
+                ? 'bg-white/10 text-white/60'
+                : order.status === 'pending'
+                ? 'bg-yellow-500/20 text-yellow-400'
+                : 'bg-blue-500/20 text-blue-400'
+            }`}>
+              {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
+            </div>
+          </div>
+          <div className="grid grid-cols-3 gap-2 text-xs">
+            <div>
+              <div className="text-white/60">Side</div>
+              <div className={`font-medium ${order.type === 'buy' ? 'text-success' : 'text-danger'}`}>
+                {order.type.toUpperCase()}
+              </div>
+            </div>
+            <div>
+              <div className="text-white/60">Shares</div>
+              <div className="text-white font-medium">{order.shares}</div>
+            </div>
+            <div>
+              <div className="text-white/60">Price</div>
+              <div className="text-white font-medium">
+                {order.price > 0 ? `$${order.price.toFixed(2)}` : 'Market'}
+              </div>
+            </div>
+          </div>
+          {order.orderType && (
+            <div className="mt-2 text-xs">
+              <span className="text-white/60">Type: </span>
+              <span className="text-white font-medium">
+                {order.orderType.charAt(0).toUpperCase() + order.orderType.slice(1)}
+              </span>
+            </div>
+          )}
+          {order.status === 'open' && onCancelOrder && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation()
+                onCancelOrder(order.id)
+              }}
+              className="w-full mt-2 py-1.5 text-xs bg-white/5 hover:bg-white/10 text-white/80 rounded transition-colors"
+            >
+              Cancel Order
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/finance/components/PositionsList.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { TrendingUp, TrendingDown } from 'lucide-react'
+
+export interface Position {
+  symbol: string
+  shares: number
+  avgPrice: number
+  currentPrice: number
+}
+
+export interface PositionsListProps {
+  positions: Position[]
+  onPositionClick?: (position: Position) => void
+}
+
+export function PositionsList({ positions, onPositionClick }: PositionsListProps) {
+  const getTickerFromSymbol = (symbol: string) => {
+    return symbol.split(':')[1] || symbol
+  }
+
+  if (positions.length === 0) {
+    return (
+      <div className="p-4 text-center py-8 text-white/40">
+        <p className="text-sm">No open positions</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 space-y-2">
+      {positions.map((position) => {
+        const pl = (position.currentPrice - position.avgPrice) * position.shares
+        const plPercent = ((position.currentPrice - position.avgPrice) / position.avgPrice) * 100
+        const totalValue = position.currentPrice * position.shares
+
+        return (
+          <div 
+            key={position.symbol} 
+            className={`bg-white/5 rounded-lg p-3 ${onPositionClick ? 'cursor-pointer hover:bg-white/10 transition-colors' : ''}`}
+            onClick={() => onPositionClick?.(position)}
+          >
+            <div className="flex items-center justify-between mb-2">
+              <div className="font-semibold text-white">
+                {getTickerFromSymbol(position.symbol)}
+              </div>
+              <div className={`flex items-center gap-1 text-sm ${pl >= 0 ? 'text-success' : 'text-danger'}`}>
+                {pl >= 0 ? <TrendingUp size={14} /> : <TrendingDown size={14} />}
+                {pl >= 0 ? '+' : ''}{plPercent.toFixed(2)}%
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-2 text-xs">
+              <div>
+                <div className="text-white/60">Shares</div>
+                <div className="text-white font-medium">{position.shares}</div>
+              </div>
+              <div>
+                <div className="text-white/60">Avg Price</div>
+                <div className="text-white font-medium">${position.avgPrice.toFixed(2)}</div>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-2 text-xs mt-2 pt-2 border-t border-white/10">
+              <div>
+                <div className="text-white/60">Current Price</div>
+                <div className="text-white font-medium">${position.currentPrice.toFixed(2)}</div>
+              </div>
+              <div>
+                <div className="text-white/60">Total Value</div>
+                <div className="text-white font-medium">${totalValue.toFixed(2)}</div>
+              </div>
+            </div>
+            <div className="mt-2 pt-2 border-t border-white/10">
+              <div className="flex justify-between items-center text-xs">
+                <span className="text-white/60">P&L</span>
+                <span className={`font-semibold ${pl >= 0 ? 'text-success' : 'text-danger'}`}>
+                  {pl >= 0 ? '+' : ''}${pl.toFixed(2)}
+                </span>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/finance/components/StockScreener.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function StockScreener() {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (container.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    container.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-screener.js'
+    script.type = 'text/javascript'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      market: 'america',
+      showToolbar: true,
+      defaultColumn: 'overview',
+      defaultScreen: 'most_capitalized',
+      isTransparent: false,
+      locale: 'en',
+      colorTheme: 'dark',
+      width: '100%',
+      height: 550,
+    })
+
+    container.current.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      if (container.current) {
+        // Remove initialization flag on unmount
+        delete container.current.dataset.initialized
+        // Remove all scripts
+        const scripts = container.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [])
+
+  return (
+    <div className="tradingview-widget-container w-full" ref={container}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}
+
+export default memo(StockScreener)

package/finance/components/SymbolInfo.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+export interface SymbolInfoProps {
+  symbol?: string
+  width?: string | number
+  locale?: string
+  colorTheme?: 'light' | 'dark'
+  isTransparent?: boolean
+}
+
+export default function SymbolInfo({
+  symbol = 'NASDAQ:AAPL',
+  width = '100%',
+  locale = 'en',
+  colorTheme = 'dark',
+  isTransparent = false
+}: SymbolInfoProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (containerRef.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    containerRef.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      symbol,
+      width,
+      locale,
+      colorTheme,
+      isTransparent,
+    })
+
+    containerRef.current.appendChild(script)
+
+    return () => {
+      if (containerRef.current) {
+        // Remove initialization flag on unmount
+        delete containerRef.current.dataset.initialized
+        // Remove all scripts
+        const scripts = containerRef.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [symbol, width, locale, colorTheme, isTransparent])
+
+  return (
+    <div className="tradingview-widget-container" ref={containerRef}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}

package/finance/components/TechnicalAnalysis.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+export interface TechnicalAnalysisProps {
+  symbol?: string
+  interval?: '1m' | '5m' | '15m' | '30m' | '1h' | '2h' | '4h' | '1D' | '1W' | '1M'
+  width?: string | number
+  height?: string | number
+  locale?: string
+  colorTheme?: 'light' | 'dark'
+  isTransparent?: boolean
+  showIntervalTabs?: boolean
+  displayMode?: 'single' | 'multiple'
+}
+
+export default function TechnicalAnalysis({
+  symbol = 'NASDAQ:AAPL',
+  interval = '15m',
+  width = '100%',
+  height = '500',
+  locale = 'en',
+  colorTheme = 'dark',
+  isTransparent = false,
+  showIntervalTabs = true,
+  displayMode = 'single'
+}: TechnicalAnalysisProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (containerRef.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    containerRef.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      interval,
+      width,
+      isTransparent,
+      height,
+      symbol,
+      showIntervalTabs,
+      displayMode,
+      locale,
+      colorTheme,
+    })
+
+    containerRef.current.appendChild(script)
+
+    return () => {
+      if (containerRef.current) {
+        // Remove initialization flag on unmount
+        delete containerRef.current.dataset.initialized
+        // Remove all scripts
+        const scripts = containerRef.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [symbol, interval, width, height, locale, colorTheme, isTransparent, showIntervalTabs, displayMode])
+
+  return (
+    <div className="tradingview-widget-container w-full h-[500px]" ref={containerRef}>
+      <div className="tradingview-widget-container__widget h-full"></div>
+    </div>
+  )
+}

package/finance/components/TickerTape.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function TickerTape() {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (container.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    container.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js'
+    script.type = 'text/javascript'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      symbols: [
+        { proName: 'FOREXCOM:SPXUSD', title: 'S&P 500' },
+        { proName: 'FOREXCOM:NSXUSD', title: 'US 100' },
+        { proName: 'FX_IDC:EURUSD', title: 'EUR/USD' },
+        { proName: 'BITSTAMP:BTCUSD', title: 'Bitcoin' },
+        { proName: 'BITSTAMP:ETHUSD', title: 'Ethereum' },
+        { description: 'Tesla', proName: 'NASDAQ:TSLA' },
+        { description: 'Apple', proName: 'NASDAQ:AAPL' },
+        { description: 'Amazon', proName: 'NASDAQ:AMZN' },
+        { description: 'NVIDIA', proName: 'NASDAQ:NVDA' },
+        { description: 'Microsoft', proName: 'NASDAQ:MSFT' },
+        { description: 'Google', proName: 'NASDAQ:GOOGL' },
+        { description: 'Meta', proName: 'NASDAQ:META' },
+      ],
+      showSymbolLogo: true,
+      isTransparent: false,
+      displayMode: 'adaptive',
+      colorTheme: 'dark',
+      locale: 'en',
+    })
+
+    container.current.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      if (container.current) {
+        // Remove initialization flag on unmount
+        delete container.current.dataset.initialized
+        // Remove all scripts
+        const scripts = container.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [])
+
+  return (
+    <div className="tradingview-widget-container w-full" ref={container}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}
+
+export default memo(TickerTape)

package/finance/components/TradingPanel.tsx

@@ -0,0 +1,238 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { TrendingUp, TrendingDown } from 'lucide-react'
+
+export interface TradingPanelProps {
+  symbol: string
+  currentPrice: number
+}
+
+export function TradingPanel({ symbol, currentPrice }: TradingPanelProps) {
+  const [orderType, setOrderType] = useState<'buy' | 'sell'>('buy')
+  const [quantity, setQuantity] = useState('')
+  const [portfolio, setPortfolio] = useState<any>(null)
+  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null)
+
+  useEffect(() => {
+    loadPortfolio()
+  }, [])
+
+  const loadPortfolio = () => {
+    const storedPortfolio = localStorage.getItem('begm_portfolio')
+    if (storedPortfolio) {
+      setPortfolio(JSON.parse(storedPortfolio))
+    } else {
+      const initialPortfolio = {
+        cash: 100000,
+        holdings: []
+      }
+      localStorage.setItem('begm_portfolio', JSON.stringify(initialPortfolio))
+      setPortfolio(initialPortfolio)
+    }
+  }
+
+  const executeTrade = () => {
+    if (!quantity || parseFloat(quantity) <= 0) {
+      setMessage({ type: 'error', text: 'Please enter a valid quantity' })
+      return
+    }
+
+    const qty = parseFloat(quantity)
+    const total = qty * currentPrice
+
+    if (orderType === 'buy') {
+      // Check if user has enough cash
+      if (total > portfolio.cash) {
+        setMessage({ type: 'error', text: 'Insufficient funds' })
+        return
+      }
+
+      // Update portfolio
+      const existingHolding = portfolio.holdings.find((h: any) => h.symbol === symbol)
+      if (existingHolding) {
+        // Update existing holding
+        const newQuantity = existingHolding.quantity + qty
+        const newAveragePrice = ((existingHolding.averagePrice * existingHolding.quantity) + (currentPrice * qty)) / newQuantity
+        existingHolding.quantity = newQuantity
+        existingHolding.averagePrice = newAveragePrice
+        existingHolding.currentPrice = currentPrice
+      } else {
+        // Add new holding
+        portfolio.holdings.push({
+          symbol,
+          quantity: qty,
+          averagePrice: currentPrice,
+          currentPrice
+        })
+      }
+
+      portfolio.cash -= total
+    } else {
+      // Selling
+      const existingHolding = portfolio.holdings.find((h: any) => h.symbol === symbol)
+      
+      if (!existingHolding || existingHolding.quantity < qty) {
+        setMessage({ type: 'error', text: 'Insufficient shares' })
+        return
+      }
+
+      // Update holding
+      existingHolding.quantity -= qty
+      existingHolding.currentPrice = currentPrice
+      
+      // Remove holding if quantity is 0
+      if (existingHolding.quantity === 0) {
+        portfolio.holdings = portfolio.holdings.filter((h: any) => h.symbol !== symbol)
+      }
+
+      portfolio.cash += total
+    }
+
+    // Save updated portfolio
+    localStorage.setItem('begm_portfolio', JSON.stringify(portfolio))
+    setPortfolio({ ...portfolio })
+
+    // Record order
+    const orders = JSON.parse(localStorage.getItem('begm_orders') || '[]')
+    orders.push({
+      id: `ORD-${Date.now()}`,
+      symbol,
+      type: orderType,
+      quantity: qty,
+      price: currentPrice,
+      total,
+      timestamp: new Date().toISOString(),
+      status: 'completed'
+    })
+    localStorage.setItem('begm_orders', JSON.stringify(orders))
+
+    setMessage({ 
+      type: 'success', 
+      text: `Successfully ${orderType === 'buy' ? 'bought' : 'sold'} ${qty} shares of ${symbol}` 
+    })
+    setQuantity('')
+
+    // Clear message after 3 seconds
+    setTimeout(() => setMessage(null), 3000)
+  }
+
+  const getHoldingInfo = () => {
+    if (!portfolio) return null
+    const holding = portfolio.holdings.find((h: any) => h.symbol === symbol)
+    return holding
+  }
+
+  const holding = getHoldingInfo()
+
+  return (
+    <div className="bg-white/5 border border-white/10 rounded-lg p-6 backdrop-blur-xl">
+      <h3 className="text-lg font-bold text-white mb-4">Trade {symbol}</h3>
+
+      {/* Order Type Selection */}
+      <div className="flex gap-2 mb-4">
+        <button
+          onClick={() => setOrderType('buy')}
+          className={`flex-1 py-2 rounded-lg font-medium transition-all ${
+            orderType === 'buy'
+              ? 'bg-success text-white'
+              : 'bg-white/5 text-white/60 hover:bg-white/10'
+          }`}
+        >
+          <TrendingUp size={16} className="inline mr-2" />
+          Buy
+        </button>
+        <button
+          onClick={() => setOrderType('sell')}
+          className={`flex-1 py-2 rounded-lg font-medium transition-all ${
+            orderType === 'sell'
+              ? 'bg-danger text-white'
+              : 'bg-white/5 text-white/60 hover:bg-white/10'
+          }`}
+        >
+          <TrendingDown size={16} className="inline mr-2" />
+          Sell
+        </button>
+      </div>
+
+      {/* Current Holdings Info */}
+      {holding && (
+        <div className="mb-4 p-3 bg-white/5 rounded-lg">
+          <p className="text-xs text-white/60 mb-1">Your Holdings</p>
+          <p className="text-sm text-white">
+            {holding.quantity} shares @ ${holding.averagePrice.toFixed(2)} avg
+          </p>
+        </div>
+      )}
+
+      {/* Price Info */}
+      <div className="mb-4 p-3 bg-white/5 rounded-lg">
+        <p className="text-xs text-white/60 mb-1">Current Price</p>
+        <p className="text-lg font-bold text-white">${currentPrice.toFixed(2)}</p>
+      </div>
+
+      {/* Quantity Input */}
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-white/80 mb-2">
+          Quantity (Shares)
+        </label>
+        <input
+          type="number"
+          value={quantity}
+          onChange={(e) => setQuantity(e.target.value)}
+          min="1"
+          step="1"
+          placeholder="Enter quantity"
+          className="w-full px-4 py-2 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/40 focus:outline-none focus:border-success"
+        />
+      </div>
+
+      {/* Order Total */}
+      {quantity && parseFloat(quantity) > 0 && (
+        <div className="mb-4 p-3 bg-white/5 rounded-lg">
+          <div className="flex justify-between items-center">
+            <span className="text-sm text-white/60">Estimated Total</span>
+            <span className="text-lg font-bold text-white">
+              ${(parseFloat(quantity) * currentPrice).toFixed(2)}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Available Cash */}
+      <div className="mb-4 p-3 bg-white/5 rounded-lg">
+        <div className="flex justify-between items-center">
+          <span className="text-sm text-white/60">Available Cash</span>
+          <span className="text-sm font-medium text-white">
+            ${portfolio?.cash.toLocaleString() || '0'}
+          </span>
+        </div>
+      </div>
+
+      {/* Message */}
+      {message && (
+        <div className={`mb-4 p-3 rounded-lg ${
+          message.type === 'success' ? 'bg-success/20 text-success' : 'bg-danger/20 text-danger'
+        }`}>
+          <p className="text-sm">{message.text}</p>
+        </div>
+      )}
+
+      {/* Execute Button */}
+      <button
+        onClick={executeTrade}
+        className={`w-full py-3 rounded-lg font-medium transition-all ${
+          orderType === 'buy'
+            ? 'bg-success hover:bg-success/90 text-white'
+            : 'bg-danger hover:bg-danger/90 text-white'
+        }`}
+      >
+        {orderType === 'buy' ? 'Buy' : 'Sell'} {symbol}
+      </button>
+
+      <p className="text-xs text-white/40 text-center mt-4">
+        This is a demo account. No real money is at risk.
+      </p>
+    </div>
+  )
+}