@luxfi/ui 7.4.15 → 8.1.0

package/src/trading-panel.tsx

@@ -0,0 +1,262 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Box, css } from '@hanzo/ui'
+import { TrendingDown, TrendingUp } from "lucide-react"
+
+export interface TradingPanelProps {
+  symbol: string
+  currentPrice: number
+}
+
+export function TradingPanel({
+  symbol = "NASDAQ:AAPL",
+  currentPrice = 175.5,
+}: Partial<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 (
+    <Box className="bg-white/5 border border-white/10 rounded-lg p-6 backdrop-blur-xl">
+      <Box tag="h3" className="text-lg font-bold text-white mb-4">Trade {symbol}</Box>
+
+      {/* Order Type Selection */}
+      <Box className="flex gap-2 mb-4">
+        <Box tag="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} style={css('inline mr-2')} />
+          Buy
+        </Box>
+        <Box tag="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} style={css('inline mr-2')} />
+          Sell
+        </Box>
+      </Box>
+
+      {/* Current Holdings Info */}
+      {holding && (
+        <Box className="mb-4 p-3 bg-white/5 rounded-lg">
+          <Box tag="p" className="text-xs text-white/60 mb-1">Your Holdings</Box>
+          <Box tag="p" className="text-sm text-white">
+            {holding.quantity} shares @ ${holding.averagePrice.toFixed(2)} avg
+          </Box>
+        </Box>
+      )}
+
+      {/* Price Info */}
+      <Box className="mb-4 p-3 bg-white/5 rounded-lg">
+        <Box tag="p" className="text-xs text-white/60 mb-1">Current Price</Box>
+        <Box tag="p" className="text-lg font-bold text-white">
+          ${currentPrice.toFixed(2)}
+        </Box>
+      </Box>
+
+      {/* Quantity Input */}
+      <Box className="mb-4">
+        <Box tag="label" className="block text-sm font-medium text-white/80 mb-2">
+          Quantity (Shares)
+        </Box>
+        <Box tag="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"
+        />
+      </Box>
+
+      {/* Order Total */}
+      {quantity && parseFloat(quantity) > 0 && (
+        <Box className="mb-4 p-3 bg-white/5 rounded-lg">
+          <Box className="flex justify-between items-center">
+            <Box tag="span" className="text-sm text-white/60">Estimated Total</Box>
+            <Box tag="span" className="text-lg font-bold text-white">
+              ${(parseFloat(quantity) * currentPrice).toFixed(2)}
+            </Box>
+          </Box>
+        </Box>
+      )}
+
+      {/* Available Cash */}
+      <Box className="mb-4 p-3 bg-white/5 rounded-lg">
+        <Box className="flex justify-between items-center">
+          <Box tag="span" className="text-sm text-white/60">Available Cash</Box>
+          <Box tag="span" className="text-sm font-medium text-white">
+            ${portfolio?.cash.toLocaleString() || "0"}
+          </Box>
+        </Box>
+      </Box>
+
+      {/* Message */}
+      {message && (
+        <Box
+          className={`mb-4 p-3 rounded-lg ${
+            message.type === "success"
+              ? "bg-success/20 text-success"
+              : "bg-danger/20 text-danger"
+          }`}
+        >
+          <Box tag="p" className="text-sm">{message.text}</Box>
+        </Box>
+      )}
+
+      {/* Execute Button */}
+      <Box tag="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}
+      </Box>
+
+      <Box tag="p" className="text-xs text-white/40 text-center mt-4">
+        This is a demo account. No real money is at risk.
+      </Box>
+    </Box>
+  )
+}
+
+export default TradingPanel

package/src/two-tier-navigation-bar.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface TwoTierNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  items?: Array<{ label: string; href: string }>
+}
+
+const TwoTierNavigationBar = React.forwardRef<
+  HTMLElement,
+  TwoTierNavigationBarProps
+>(({ className, items = [], ...props }, ref) => {
+  return (
+    <Box tag="nav"
+      ref={ref}
+      className={cn("border-b bg-background", className)}
+      {...props}
+    >
+      <Box className="container flex h-16 items-center gap-6">
+        {items.map((item) => (
+          <Box tag="a"
+            key={item.href}
+            href={item.href}
+            className="text-sm font-medium transition-colors hover:text-primary"
+          >
+            {item.label}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  )
+})
+TwoTierNavigationBar.displayName = "TwoTierNavigationBar"
+
+export { TwoTierNavigationBar }

package/src/underline-navigation-bar.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface UnderlineNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  items?: Array<{ label: string; href: string }>
+}
+
+const UnderlineNavigationBar = React.forwardRef<
+  HTMLElement,
+  UnderlineNavigationBarProps
+>(({ className, items = [], ...props }, ref) => {
+  return (
+    <Box tag="nav"
+      ref={ref}
+      className={cn("border-b bg-background", className)}
+      {...props}
+    >
+      <Box className="container flex h-16 items-center gap-6">
+        {items.map((item) => (
+          <Box tag="a"
+            key={item.href}
+            href={item.href}
+            className="text-sm font-medium transition-colors hover:text-primary"
+          >
+            {item.label}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  )
+})
+UnderlineNavigationBar.displayName = "UnderlineNavigationBar"
+
+export { UnderlineNavigationBar }

package/src/utils/cn.ts

@@ -1,7 +1,3 @@
-import type { ClassValue } from 'clsx';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: Array<ClassValue>): string {
-  return twMerge(clsx(inputs));
-}
+// The one `cn` lives in @hanzo/ui; ../utils re-exports it. This path is kept
+// because call sites import it, and it must not become a second copy.
+export { cn, type ClassValue } from '@hanzo/ui'

package/src/utils.ts

@@ -1,6 +1,12 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}
+/**
+ * `cn` — re-exported from @hanzo/ui, which is where the one implementation now
+ * lives.
+ *
+ * There were two of them in this package (here and utils/cn.ts), both calling
+ * `twMerge(clsx(...))`. twMerge exists to resolve conflicts BETWEEN Tailwind
+ * utilities, and there are none left to resolve: this package renders through
+ * @hanzo/gui style props, and a class name here is only a stable handle a host
+ * may select on. So it was resolving conflicts in a vocabulary nothing writes,
+ * at the cost of two dependencies.
+ */
+export { cn, type ClassValue } from '@hanzo/ui'