@hanzo/ui 5.1.8 → 5.3.0

package/finance/components/AdvancedChart.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function AdvancedChart({ symbol = 'NASDAQ:AAPL' }: { symbol?: string }) {
+  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-advanced-chart.js'
+    script.type = 'text/javascript'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      width: '100%',
+      height: '600',
+      symbol,
+      interval: 'D',
+      timezone: 'Etc/UTC',
+      theme: 'dark',
+      style: '1',
+      locale: 'en',
+      allow_symbol_change: true,
+      calendar: false,
+      support_host: 'https://www.tradingview.com',
+    })
+
+    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())
+      }
+    }
+  }, [symbol])
+
+  return (
+    <div className="tradingview-widget-container w-full h-[600px]" ref={container}>
+      <div className="tradingview-widget-container__widget h-full"></div>
+    </div>
+  )
+}
+
+export default memo(AdvancedChart)

package/finance/components/CompanyProfile.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+export interface CompanyProfileProps {
+  symbol?: string
+  width?: string | number
+  height?: string | number
+  locale?: string
+  colorTheme?: 'light' | 'dark'
+  isTransparent?: boolean
+}
+
+export default function CompanyProfile({
+  symbol = 'NASDAQ:AAPL',
+  width = '100%',
+  height = '100%',
+  locale = 'en',
+  colorTheme = 'dark',
+  isTransparent = false
+}: CompanyProfileProps) {
+  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-profile.js'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      width,
+      height,
+      colorTheme,
+      isTransparent,
+      symbol,
+      locale,
+    })
+
+    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, height, locale, colorTheme, isTransparent])
+
+  return (
+    <div className="tradingview-widget-container" ref={containerRef}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}

package/finance/components/CryptoScreener.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function CryptoScreener() {
+  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({
+      defaultColumn: 'overview',
+      screener_type: 'crypto_mkt',
+      displayCurrency: 'USD',
+      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(CryptoScreener)

package/finance/components/Financials.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+export interface FinancialsProps {
+  symbol?: string
+  width?: string | number
+  height?: string | number
+  locale?: string
+  colorTheme?: 'light' | 'dark'
+  isTransparent?: boolean
+  displayMode?: 'regular' | 'compact' | 'adaptive'
+  largeChartUrl?: string
+}
+
+export default function Financials({
+  symbol = 'NASDAQ:AAPL',
+  width = '100%',
+  height = '500',
+  locale = 'en',
+  colorTheme = 'dark',
+  isTransparent = false,
+  displayMode = 'adaptive',
+  largeChartUrl = ''
+}: FinancialsProps) {
+  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-financials.js'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      colorTheme,
+      isTransparent,
+      largeChartUrl,
+      displayMode,
+      width,
+      height,
+      symbol,
+      locale,
+    })
+
+    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, height, locale, colorTheme, isTransparent, displayMode, largeChartUrl])
+
+  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/ForexScreener.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function ForexScreener() {
+  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: 'forex',
+      showToolbar: true,
+      defaultColumn: 'overview',
+      defaultScreen: 'general',
+      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(ForexScreener)

package/finance/components/MarketOverview.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function MarketOverview() {
+  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-market-overview.js'
+    script.type = 'text/javascript'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      colorTheme: 'dark',
+      dateRange: '12M',
+      locale: 'en',
+      largeChartUrl: '',
+      isTransparent: false,
+      showFloatingTooltip: false,
+      plotLineColorGrowing: 'rgba(41, 98, 255, 1)',
+      plotLineColorFalling: 'rgba(41, 98, 255, 1)',
+      gridLineColor: 'rgba(240, 243, 250, 0)',
+      scaleFontColor: '#DBDBDB',
+      belowLineFillColorGrowing: 'rgba(41, 98, 255, 0.12)',
+      belowLineFillColorFalling: 'rgba(41, 98, 255, 0.12)',
+      belowLineFillColorGrowingBottom: 'rgba(41, 98, 255, 0)',
+      belowLineFillColorFallingBottom: 'rgba(41, 98, 255, 0)',
+      symbolActiveColor: 'rgba(41, 98, 255, 0.12)',
+      tabs: [
+        {
+          title: 'Indices',
+          symbols: [
+            { s: 'FOREXCOM:SPXUSD', d: 'S&P 500 Index' },
+            { s: 'FOREXCOM:NSXUSD', d: 'US 100 Cash CFD' },
+            { s: 'FOREXCOM:DJI', d: 'Dow Jones Industrial Average Index' },
+            { s: 'INDEX:NKY', d: 'Japan 225' },
+            { s: 'INDEX:DEU40', d: 'DAX Index' },
+            { s: 'FOREXCOM:UKXGBP', d: 'FTSE 100 Index' },
+          ],
+          originalTitle: 'Indices',
+        },
+        {
+          title: 'Futures',
+          symbols: [
+            { s: 'BMFBOVESPA:ISP1!', d: 'S&P 500' },
+            { s: 'BMFBOVESPA:EUR1!', d: 'Euro' },
+            { s: 'CMCMARKETS:GOLD', d: 'Gold' },
+            { s: 'PYTH:WTI3!', d: 'WTI Crude Oil' },
+            { s: 'BMFBOVESPA:CCM1!', d: 'Corn' },
+          ],
+          originalTitle: 'Futures',
+        },
+        {
+          title: 'Bonds',
+          symbols: [
+            { s: 'EUREX:FGBL1!', d: 'Euro Bund' },
+            { s: 'EUREX:FBTP1!', d: 'Euro BTP' },
+            { s: 'EUREX:FGBM1!', d: 'Euro BOBL' },
+          ],
+          originalTitle: 'Bonds',
+        },
+        {
+          title: 'Forex',
+          symbols: [
+            { s: 'FX:EURUSD', d: 'EUR to USD' },
+            { s: 'FX:GBPUSD', d: 'GBP to USD' },
+            { s: 'FX:USDJPY', d: 'USD to JPY' },
+            { s: 'FX:USDCHF', d: 'USD to CHF' },
+            { s: 'FX:AUDUSD', d: 'AUD to USD' },
+            { s: 'FX:USDCAD', d: 'USD to CAD' },
+          ],
+          originalTitle: 'Forex',
+        },
+      ],
+      support_host: 'https://www.tradingview.com',
+      backgroundColor: '#0f0f0f',
+      width: '100%',
+      height: '550',
+      showSymbolLogo: true,
+      showChart: true,
+    })
+
+    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(MarketOverview)

package/finance/components/NewsTimeline.tsx

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

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