bloby-bot 0.37.1 → 0.39.1

package/workspace/client/src/components/Dashboard/CryptoPage.tsx

@@ -0,0 +1,470 @@
+import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import {
+  QrCode,
+  Send,
+  RefreshCw,
+  Wallet,
+  History,
+  LineChart,
+  Settings,
+  TrendingUp,
+  TrendingDown,
+} from 'lucide-react';
+
+type TabId = 'wallet' | 'history' | 'market' | 'settings';
+
+interface Asset {
+  symbol: string;
+  name: string;
+  amount: string;
+  usd: string;
+  change: number;
+  color: string;
+  initial: string;
+}
+
+const ASSETS: Asset[] = [
+  { symbol: 'ACH', name: 'Achain', amount: '35478.2', usd: '49.37', change: 67.9, color: '#7C5CFF', initial: 'A' },
+  { symbol: 'LINK', name: 'Chainlink', amount: '152.76', usd: '1121.95', change: -7, color: '#3F7AFF', initial: 'L' },
+  { symbol: 'ZAP', name: 'Zapper', amount: '271032.13', usd: '772', change: 16.77, color: '#9B6BFF', initial: 'Z' },
+  { symbol: 'SNT', name: 'Status', amount: '6234.10', usd: '184.20', change: 4.2, color: '#5DA9FF', initial: 'S' },
+  { symbol: 'ETH', name: 'Ethereum', amount: '2.184', usd: '7321.40', change: 2.8, color: '#8B8DFF', initial: 'E' },
+];
+
+export default function CryptoPage() {
+  const [tab, setTab] = useState<TabId>('wallet');
+  const [isDesktop, setIsDesktop] = useState(() =>
+    typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : false,
+  );
+  const dockRef = useRef<HTMLDivElement>(null);
+  const [dockHeight, setDockHeight] = useState(80);
+
+  useEffect(() => {
+    const mql = window.matchMedia('(min-width: 768px)');
+    const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!dockRef.current) return;
+    const measure = () => {
+      if (dockRef.current) setDockHeight(dockRef.current.offsetHeight);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(dockRef.current);
+    return () => ro.disconnect();
+  }, [isDesktop]);
+
+  // The sheet itself runs to bottom: 0 so the wallpaper never peeks
+  // through behind the dock. The inner content reserves dockHeight (+
+  // a small margin on desktop so list rows don't slip behind the
+  // floating glass pill).
+  const contentBottomPadding = isDesktop ? dockHeight + 16 : dockHeight;
+
+  return (
+    <div className="relative h-full w-full overflow-hidden">
+      {/* Hero content (uses the global wallpaper) */}
+      <div className="relative z-10 flex flex-col items-center pt-12 sm:pt-16 px-6 text-white">
+        <p className="text-xs uppercase tracking-[0.2em] text-white/65">Balance</p>
+
+        <h1
+          className="mt-3 text-5xl sm:text-6xl tracking-tight tabular-nums text-white"
+          style={{ fontWeight: 900, letterSpacing: '-0.04em' }}
+        >
+          $ 14,752<span>.19</span>
+        </h1>
+
+        <div className="mt-4 inline-flex items-center gap-1 rounded-full bg-emerald-400/20 border border-emerald-300/30 px-2.5 py-1 text-emerald-200 text-xs font-semibold">
+          <TrendingUp className="h-3 w-3" />
+          +85.2%
+        </div>
+
+        <div className="mt-10 flex items-center gap-10">
+          <ActionButton icon={QrCode} label="Receive" />
+          <ActionButton icon={Send} label="Send" />
+          <ActionButton icon={RefreshCw} label="Swap" />
+        </div>
+      </div>
+
+      {/* Draggable bottom sheet — runs to bottom: 0; content clears the dock */}
+      <DraggableSheet>
+        <div className="px-5 pt-4 pb-2 flex items-center justify-between">
+          <h2 className="text-xl font-bold text-zinc-900 tracking-tight">
+            {tab === 'wallet' && 'Assets'}
+            {tab === 'history' && 'History'}
+            {tab === 'market' && 'Market'}
+            {tab === 'settings' && 'Settings'}
+          </h2>
+        </div>
+
+        <div
+          className="flex-1 overflow-y-auto px-2"
+          style={{ paddingBottom: contentBottomPadding }}
+        >
+          {tab === 'wallet' && <AssetsList />}
+          {tab === 'history' && <HistoryList />}
+          {tab === 'market' && <MarketList />}
+          {tab === 'settings' && <SettingsList />}
+        </div>
+      </DraggableSheet>
+
+      {/* Bottom tab bar — full white dock on mobile, centered glass pill on desktop */}
+      <SheetTabBar ref={dockRef} tab={tab} onChange={setTab} isDesktop={isDesktop} />
+    </div>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────── */
+/* Action button                                                 */
+/* ────────────────────────────────────────────────────────────── */
+function ActionButton({
+  icon: Icon,
+  label,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+}) {
+  return (
+    <button type="button" className="flex flex-col items-center gap-2 group">
+      <span className="h-12 w-12 rounded-full bg-white/10 hover:bg-white/15 border border-white/15 flex items-center justify-center backdrop-blur-md transition group-active:scale-95">
+        <Icon className="h-5 w-5 text-white" />
+      </span>
+      <span className="text-[11px] text-white/85">{label}</span>
+    </button>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────── */
+/* Draggable sheet                                                */
+/* ────────────────────────────────────────────────────────────── */
+
+// Snap points are vertical offsets from the TOP of the page area, in px.
+// The sheet stretches from `top: snap` all the way to `bottom: 0` — the
+// dock floats above it. This guarantees the wallpaper never shows through
+// the gap between the sheet and the dock at any snap position.
+function DraggableSheet({ children }: { children: React.ReactNode }) {
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const [snap, setSnap] = useState<'mid' | 'expanded' | 'collapsed'>('mid');
+  const dragRef = useRef<{
+    startY: number;
+    startOffset: number;
+    pointerId: number | null;
+    lastY: number;
+    lastT: number;
+    velocity: number;
+  }>({ startY: 0, startOffset: 0, pointerId: null, lastY: 0, lastT: 0, velocity: 0 });
+  const [dragOffset, setDragOffset] = useState<number | null>(null);
+  const [vh, setVh] = useState(() => (typeof window !== 'undefined' ? window.innerHeight : 800));
+
+  useEffect(() => {
+    const onResize = () => setVh(window.innerHeight);
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  const SNAP_TOP = {
+    expanded: Math.round(vh * 0.10),
+    mid: Math.round(vh * 0.42),
+    collapsed: Math.round(vh * 0.66),
+  } as const;
+
+  const targetTop = SNAP_TOP[snap];
+  const currentTop = dragOffset ?? targetTop;
+
+  function onPointerDown(e: React.PointerEvent) {
+    const target = e.target as HTMLElement;
+    if (!target.closest('[data-sheet-drag]')) return;
+    e.preventDefault();
+    const el = sheetRef.current;
+    if (!el) return;
+    el.setPointerCapture(e.pointerId);
+    dragRef.current = {
+      startY: e.clientY,
+      startOffset: targetTop,
+      pointerId: e.pointerId,
+      lastY: e.clientY,
+      lastT: performance.now(),
+      velocity: 0,
+    };
+    setDragOffset(targetTop);
+  }
+
+  function onPointerMove(e: React.PointerEvent) {
+    const d = dragRef.current;
+    if (d.pointerId !== e.pointerId) return;
+    const now = performance.now();
+    const dt = Math.max(1, now - d.lastT);
+    d.velocity = (e.clientY - d.lastY) / dt; // px/ms
+    d.lastY = e.clientY;
+    d.lastT = now;
+    const next = Math.max(SNAP_TOP.expanded, Math.min(SNAP_TOP.collapsed, d.startOffset + (e.clientY - d.startY)));
+    setDragOffset(next);
+  }
+
+  function onPointerUp(e: React.PointerEvent) {
+    const d = dragRef.current;
+    if (d.pointerId !== e.pointerId) return;
+    const el = sheetRef.current;
+    el?.releasePointerCapture(e.pointerId);
+    const finalTop = dragOffset ?? targetTop;
+    const v = d.velocity; // px/ms; positive = moving down
+
+    let next: 'expanded' | 'mid' | 'collapsed';
+    if (v > 0.6) {
+      next = snap === 'expanded' ? 'mid' : 'collapsed';
+    } else if (v < -0.6) {
+      next = snap === 'collapsed' ? 'mid' : 'expanded';
+    } else {
+      const distances = (Object.keys(SNAP_TOP) as Array<keyof typeof SNAP_TOP>).map((k) => ({
+        k,
+        d: Math.abs(SNAP_TOP[k] - finalTop),
+      }));
+      distances.sort((a, b) => a.d - b.d);
+      next = distances[0].k;
+    }
+    setSnap(next);
+    setDragOffset(null);
+    dragRef.current.pointerId = null;
+  }
+
+  return (
+    <div
+      ref={sheetRef}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      className="absolute left-0 right-0 bottom-0 z-20 mx-auto flex flex-col bg-white shadow-[0_-20px_60px_-20px_rgba(0,0,0,0.45)]"
+      style={{
+        top: currentTop,
+        borderTopLeftRadius: 28,
+        borderTopRightRadius: 28,
+        transition: dragOffset == null ? 'top 320ms cubic-bezier(0.32, 0.72, 0, 1)' : 'none',
+        touchAction: 'none',
+        maxWidth: 720,
+        width: '100%',
+      }}
+    >
+      {/* Drag handle */}
+      <div
+        data-sheet-drag
+        className="flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing select-none"
+      >
+        <span className="block h-1.5 w-10 rounded-full bg-zinc-300" />
+      </div>
+
+      {children}
+    </div>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────── */
+/* Sheet content                                                  */
+/* ────────────────────────────────────────────────────────────── */
+
+function AssetsList() {
+  return (
+    <ul className="px-3 divide-y divide-zinc-100">
+      {ASSETS.map((a) => (
+        <li key={a.symbol} className="flex items-center gap-3 py-3 px-2">
+          <span
+            className="h-10 w-10 rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0"
+            style={{ backgroundColor: a.color }}
+          >
+            {a.initial}
+          </span>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-semibold text-zinc-900 truncate">{a.name}</p>
+            <p className="text-[11px] text-zinc-500">=~${a.usd}</p>
+          </div>
+          <div className="text-right">
+            <p className="text-sm font-semibold text-zinc-900 tabular-nums">{a.amount}</p>
+            <ChangeBadge value={a.change} />
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function ChangeBadge({ value }: { value: number }) {
+  const positive = value >= 0;
+  return (
+    <span
+      className={`inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold mt-0.5 ${
+        positive ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'
+      }`}
+    >
+      {positive ? <TrendingUp className="h-2.5 w-2.5" /> : <TrendingDown className="h-2.5 w-2.5" />}
+      {positive ? '+' : ''}
+      {value}%
+    </span>
+  );
+}
+
+function HistoryList() {
+  const items = [
+    { kind: 'Received', who: 'From 0x9a3...e21f', amount: '+ 0.42 ETH', when: 'Today, 09:14', positive: true },
+    { kind: 'Sent', who: 'To 0x12b...88aa', amount: '- 120.00 LINK', when: 'Yesterday', positive: false },
+    { kind: 'Swap', who: 'ACT → LINK', amount: '6.72 LINK', when: 'Mon', positive: true },
+    { kind: 'Received', who: 'From 0x7fa...1bd2', amount: '+ 250 ZAP', when: 'May 1', positive: true },
+  ];
+  return (
+    <ul className="px-3 divide-y divide-zinc-100">
+      {items.map((it, i) => (
+        <li key={i} className="flex items-center gap-3 py-3 px-2">
+          <span
+            className={`h-10 w-10 rounded-full flex items-center justify-center text-sm font-bold shrink-0 ${
+              it.positive ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'
+            }`}
+          >
+            {it.kind[0]}
+          </span>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-semibold text-zinc-900">{it.kind}</p>
+            <p className="text-[11px] text-zinc-500 truncate">{it.who}</p>
+          </div>
+          <div className="text-right">
+            <p className={`text-sm font-semibold tabular-nums ${it.positive ? 'text-emerald-700' : 'text-rose-700'}`}>{it.amount}</p>
+            <p className="text-[11px] text-zinc-400">{it.when}</p>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function MarketList() {
+  const items = [
+    { name: 'Bitcoin', symbol: 'BTC', price: '67,420.18', change: 1.4, initial: 'B', color: '#F7931A' },
+    { name: 'Ethereum', symbol: 'ETH', price: '3,352.91', change: 2.8, initial: 'E', color: '#627EEA' },
+    { name: 'Chainlink', symbol: 'LINK', price: '14.62', change: -3.1, initial: 'L', color: '#3F7AFF' },
+    { name: 'Solana', symbol: 'SOL', price: '162.04', change: 4.6, initial: 'S', color: '#9945FF' },
+    { name: 'Achain', symbol: 'ACH', price: '0.00139', change: 67.9, initial: 'A', color: '#7C5CFF' },
+  ];
+  return (
+    <ul className="px-3 divide-y divide-zinc-100">
+      {items.map((it) => (
+        <li key={it.symbol} className="flex items-center gap-3 py-3 px-2">
+          <span
+            className="h-10 w-10 rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0"
+            style={{ backgroundColor: it.color }}
+          >
+            {it.initial}
+          </span>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-semibold text-zinc-900">{it.name}</p>
+            <p className="text-[11px] text-zinc-500">{it.symbol}</p>
+          </div>
+          <div className="text-right">
+            <p className="text-sm font-semibold text-zinc-900 tabular-nums">${it.price}</p>
+            <ChangeBadge value={it.change} />
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function SettingsList() {
+  const rows = [
+    { label: 'Notifications', value: 'On' },
+    { label: 'Currency', value: 'USD' },
+    { label: 'Network', value: 'Ethereum' },
+    { label: 'Backup phrase', value: 'View' },
+    { label: 'Connected sites', value: '3' },
+    { label: 'About', value: 'v1.0' },
+  ];
+  return (
+    <ul className="px-3 divide-y divide-zinc-100">
+      {rows.map((r) => (
+        <li key={r.label} className="flex items-center justify-between py-3 px-2">
+          <span className="text-sm text-zinc-900">{r.label}</span>
+          <span className="text-sm text-zinc-500">{r.value}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────── */
+/* Tab bar — mobile = full-width white dock, desktop = glass pill  */
+/* ────────────────────────────────────────────────────────────── */
+const SheetTabBar = forwardRef<
+  HTMLDivElement,
+  { tab: TabId; onChange: (t: TabId) => void; isDesktop: boolean }
+>(function SheetTabBar({ tab, onChange, isDesktop }, ref) {
+  const tabs: Array<{ id: TabId; icon: React.ComponentType<{ className?: string }>; label: string }> = [
+    { id: 'wallet', icon: Wallet, label: 'Wallet' },
+    { id: 'history', icon: History, label: 'History' },
+    { id: 'market', icon: LineChart, label: 'Market' },
+    { id: 'settings', icon: Settings, label: 'Settings' },
+  ];
+
+  if (isDesktop) {
+    return (
+      <div
+        ref={ref}
+        className="absolute bottom-6 left-1/2 -translate-x-1/2 z-30"
+      >
+        <div className="glass-pill flex items-center gap-1 p-1.5 rounded-full">
+          {tabs.map((t) => {
+            const active = tab === t.id;
+            const Icon = t.icon;
+            return (
+              <button
+                key={t.id}
+                type="button"
+                onClick={() => onChange(t.id)}
+                className={`flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-medium transition ${
+                  active
+                    ? 'glass-inner-active text-white'
+                    : 'text-white/70 hover:text-white hover:bg-white/5'
+                }`}
+              >
+                <Icon className="h-4 w-4" />
+                <span>{t.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // Mobile: rounded-top dock with upward shadow, sheet sits flush.
+  return (
+    <div
+      ref={ref}
+      className="absolute bottom-0 left-0 right-0 z-30 bg-white"
+      style={{
+        paddingBottom: 'env(safe-area-inset-bottom)',
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+        boxShadow: '0 -10px 24px -8px rgba(0, 0, 0, 0.18)',
+      }}
+    >
+      <div className="mx-auto max-w-[720px] flex items-center justify-around px-2 pt-2.5 pb-2">
+        {tabs.map((t) => {
+          const active = tab === t.id;
+          const Icon = t.icon;
+          return (
+            <button
+              key={t.id}
+              type="button"
+              onClick={() => onChange(t.id)}
+              className={`flex flex-col items-center gap-0.5 px-4 py-1.5 rounded-xl transition ${
+                active ? 'text-zinc-900' : 'text-zinc-400 hover:text-zinc-700'
+              }`}
+            >
+              <Icon className="h-5 w-5" />
+              <span className={`text-[11px] ${active ? 'font-semibold' : 'font-medium'}`}>{t.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+});