@hanzo/ui 5.6.1 → 8.0.0

package/finance/components/NewsTimeline.tsx

@@ -1,54 +0,0 @@
-'use client'
-
-import { useEffect, useRef, memo } from 'react'
-
-function NewsTimeline() {
-  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-timeline.js'
-    script.type = 'text/javascript'
-    script.async = true
-    script.innerHTML = JSON.stringify({
-      displayMode: 'regular',
-      feedMode: 'all_symbols',
-      colorTheme: 'dark',
-      isTransparent: false,
-      locale: 'en',
-      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(NewsTimeline)

package/finance/components/OrderEntry.tsx

@@ -1,157 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-
-export interface OrderEntryProps {
-  symbol: string
-  accountBalance: number
-  onPlaceOrder: (order: {
-    symbol: string
-    side: 'buy' | 'sell'
-    orderType: 'market' | 'limit'
-    shares: number
-    limitPrice?: number
-  }) => void
-  disabled?: boolean
-}
-
-export function OrderEntry({ 
-  symbol, 
-  accountBalance, 
-  onPlaceOrder,
-  disabled = false
-}: OrderEntryProps) {
-  const [orderType, setOrderType] = useState<'market' | 'limit'>('market')
-  const [orderSide, setOrderSide] = useState<'buy' | 'sell'>('buy')
-  const [shares, setShares] = useState('')
-  const [limitPrice, setLimitPrice] = useState('')
-
-  const getTickerFromSymbol = (symbol: string) => {
-    return symbol.split(':')[1] || symbol
-  }
-
-  const handlePlaceOrder = () => {
-    if (!shares || (orderType === 'limit' && !limitPrice)) return
-
-    onPlaceOrder({
-      symbol,
-      side: orderSide,
-      orderType,
-      shares: parseInt(shares),
-      limitPrice: orderType === 'limit' ? parseFloat(limitPrice) : undefined
-    })
-
-    // Reset form
-    setShares('')
-    setLimitPrice('')
-  }
-
-  return (
-    <div className="p-4 space-y-4">
-      {/* Account Balance */}
-      <div className="bg-white/5 rounded-lg p-3">
-        <div className="text-xs text-white/60 mb-1">Buying Power</div>
-        <div className="text-lg font-semibold text-white">
-          ${accountBalance.toLocaleString()}
-        </div>
-      </div>
-
-      {/* Buy/Sell Toggle */}
-      <div className="grid grid-cols-2 gap-2">
-        <button
-          onClick={() => setOrderSide('buy')}
-          disabled={disabled}
-          className={`py-2.5 rounded-lg font-semibold transition-all ${
-            orderSide === 'buy'
-              ? 'bg-success text-white'
-              : 'bg-white/5 text-white/60 hover:bg-white/10'
-          } disabled:opacity-50 disabled:cursor-not-allowed`}
-        >
-          Buy
-        </button>
-        <button
-          onClick={() => setOrderSide('sell')}
-          disabled={disabled}
-          className={`py-2.5 rounded-lg font-semibold transition-all ${
-            orderSide === 'sell'
-              ? 'bg-danger text-white'
-              : 'bg-white/5 text-white/60 hover:bg-white/10'
-          } disabled:opacity-50 disabled:cursor-not-allowed`}
-        >
-          Sell
-        </button>
-      </div>
-
-      {/* Order Type */}
-      <div>
-        <label className="text-xs text-white/60 mb-2 block">Order Type</label>
-        <div className="grid grid-cols-2 gap-2">
-          <button
-            onClick={() => setOrderType('market')}
-            disabled={disabled}
-            className={`py-2 rounded-lg text-sm font-medium transition-all ${
-              orderType === 'market'
-                ? 'bg-white/10 text-white'
-                : 'bg-white/5 text-white/60 hover:bg-white/10'
-            } disabled:opacity-50 disabled:cursor-not-allowed`}
-          >
-            Market
-          </button>
-          <button
-            onClick={() => setOrderType('limit')}
-            disabled={disabled}
-            className={`py-2 rounded-lg text-sm font-medium transition-all ${
-              orderType === 'limit'
-                ? 'bg-white/10 text-white'
-                : 'bg-white/5 text-white/60 hover:bg-white/10'
-            } disabled:opacity-50 disabled:cursor-not-allowed`}
-          >
-            Limit
-          </button>
-        </div>
-      </div>
-
-      {/* Shares */}
-      <div>
-        <label className="text-xs text-white/60 mb-2 block">Shares</label>
-        <input
-          type="number"
-          value={shares}
-          onChange={(e) => setShares(e.target.value)}
-          disabled={disabled}
-          className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-success disabled:opacity-50 disabled:cursor-not-allowed"
-          placeholder="0"
-        />
-      </div>
-
-      {/* Limit Price */}
-      {orderType === 'limit' && (
-        <div>
-          <label className="text-xs text-white/60 mb-2 block">Limit Price</label>
-          <input
-            type="number"
-            value={limitPrice}
-            onChange={(e) => setLimitPrice(e.target.value)}
-            disabled={disabled}
-            className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-success disabled:opacity-50 disabled:cursor-not-allowed"
-            placeholder="0.00"
-            step="0.01"
-          />
-        </div>
-      )}
-
-      {/* Place Order Button */}
-      <button
-        onClick={handlePlaceOrder}
-        disabled={disabled || !shares || (orderType === 'limit' && !limitPrice)}
-        className={`w-full py-3 rounded-lg font-semibold transition-all ${
-          orderSide === 'buy'
-            ? 'bg-success hover:bg-success/90 text-white'
-            : 'bg-danger hover:bg-danger/90 text-white'
-        } disabled:opacity-50 disabled:cursor-not-allowed`}
-      >
-        {orderSide === 'buy' ? 'Buy' : 'Sell'} {getTickerFromSymbol(symbol)}
-      </button>
-    </div>
-  )
-}

package/finance/components/OrdersHistory.tsx

@@ -1,103 +0,0 @@
-'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

@@ -1,85 +0,0 @@
-'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

@@ -1,56 +0,0 @@
-'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

@@ -1,62 +0,0 @@
-'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

@@ -1,74 +0,0 @@
-'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

@@ -1,66 +0,0 @@
-'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)