auramaxx 1.0.0-alpha.4

package/src/components/apps/App.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import React from 'react';
+import { Minus, X, MoreHorizontal, LucideIcon } from 'lucide-react';
+
+interface AppAction {
+  label: string;
+  icon?: LucideIcon;
+  onClick: () => void;
+  variant?: 'primary' | 'secondary' | 'danger';
+}
+
+interface AppProps {
+  title: string;
+  icon?: LucideIcon;
+  size?: 'compact' | 'small' | 'medium' | 'large' | 'wide' | 'full';
+  dismissable?: boolean;
+  collapsible?: boolean;
+  onDismiss?: () => void;
+  actions?: AppAction[];
+  children: React.ReactNode;
+  className?: string;
+  status?: 'normal' | 'alert' | 'success';
+}
+
+const sizeClasses = {
+  compact: 'col-span-3',
+  small: 'col-span-4',
+  medium: 'col-span-6',
+  large: 'col-span-8',
+  wide: 'col-span-9',
+  full: 'col-span-12',
+};
+
+export const App: React.FC<AppProps> = ({
+  title,
+  icon: Icon,
+  size = 'small',
+  dismissable = false,
+  collapsible = false,
+  onDismiss,
+  actions,
+  children,
+  className = '',
+  status = 'normal',
+}) => {
+  const [collapsed, setCollapsed] = React.useState(false);
+
+  const statusBorders: Record<string, string> = {
+    normal: 'var(--color-border, #e5e5e5)',
+    alert: 'var(--color-warning, #ff4d00)',
+    success: 'var(--color-accent, #ccff00)',
+  };
+
+  return (
+    <div className={`${sizeClasses[size]} ${className}`}>
+      <div
+        className="relative overflow-hidden group"
+        style={{
+          background: 'var(--color-surface, #ffffff)',
+          border: `1px solid ${statusBorders[status]}`,
+        }}
+      >
+        {/* Corner Brackets */}
+        <div className="absolute top-1 left-1 w-2 h-2 opacity-50" style={{ borderLeft: '1px solid var(--color-border, #e5e5e5)', borderTop: '1px solid var(--color-border, #e5e5e5)' }} />
+        <div className="absolute top-1 right-1 w-2 h-2 opacity-50" style={{ borderRight: '1px solid var(--color-border, #e5e5e5)', borderTop: '1px solid var(--color-border, #e5e5e5)' }} />
+        <div className="absolute bottom-1 left-1 w-2 h-2 opacity-50" style={{ borderLeft: '1px solid var(--color-border, #e5e5e5)', borderBottom: '1px solid var(--color-border, #e5e5e5)' }} />
+        <div className="absolute bottom-1 right-1 w-2 h-2 opacity-50" style={{ borderRight: '1px solid var(--color-border, #e5e5e5)', borderBottom: '1px solid var(--color-border, #e5e5e5)' }} />
+
+        {/* Noise Texture */}
+        <div className="absolute inset-0 opacity-[0.02] pointer-events-none bg-[radial-gradient(var(--color-text,#000)_1px,transparent_1px)] bg-[size:3px_3px]" />
+
+        {/* Header */}
+        <div
+          className="px-3 py-2 flex items-center justify-between relative z-10"
+          style={{ borderBottom: '1px solid var(--color-border-muted, #eee)' }}
+        >
+          <div className="flex items-center gap-2">
+            {Icon && <Icon size={12} style={{ color: 'var(--color-text-muted, #888)' }} />}
+            <span className="font-mono text-[10px] font-bold tracking-widest uppercase" style={{ color: 'var(--color-text, #0a0a0a)' }}>{title}</span>
+          </div>
+          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+            {collapsible && (
+              <button
+                onClick={() => setCollapsed(!collapsed)}
+                className="p-1 transition-colors"
+              >
+                <Minus size={10} style={{ color: 'var(--color-text-muted, #888)' }} />
+              </button>
+            )}
+            {dismissable && (
+              <button
+                onClick={onDismiss}
+                className="p-1 transition-colors"
+              >
+                <X size={10} style={{ color: 'var(--color-text-muted, #888)' }} />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Content */}
+        {!collapsed && (
+          <div className="p-3 relative z-10">
+            {children}
+          </div>
+        )}
+
+        {/* Footer Actions */}
+        {!collapsed && actions && actions.length > 0 && (
+          <div
+            className="px-3 py-2 flex items-center gap-2 relative z-10"
+            style={{ borderTop: '1px solid var(--color-border-muted, #eee)' }}
+          >
+            {actions.slice(0, 2).map((action, i) => {
+              const ActionIcon = action.icon;
+              const variantStyles: Record<string, React.CSSProperties> = {
+                primary: {
+                  background: 'var(--color-text, #0a0a0a)',
+                  color: 'var(--color-surface, #ffffff)',
+                },
+                secondary: {
+                  border: '1px solid var(--color-border, #e5e5e5)',
+                  color: 'var(--color-text-muted, #888)',
+                },
+                danger: {
+                  border: '1px solid var(--color-warning, #ff4d00)',
+                  color: 'var(--color-warning, #ff4d00)',
+                },
+              };
+              return (
+                <button
+                  key={i}
+                  onClick={action.onClick}
+                  className="px-3 py-1.5 font-mono text-[9px] tracking-widest flex items-center gap-1.5 transition-colors"
+                  style={variantStyles[action.variant || 'secondary']}
+                >
+                  {ActionIcon && <ActionIcon size={10} />}
+                  {action.label}
+                </button>
+              );
+            })}
+            {actions.length > 2 && (
+              <button className="ml-auto p-1 transition-colors">
+                <MoreHorizontal size={12} style={{ color: 'var(--color-text-muted, #888)' }} />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/apps/AppGrid.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+
+interface AppGridProps {
+  children: React.ReactNode;
+}
+
+export const AppGrid: React.FC<AppGridProps> = ({ children }) => {
+  return (
+    <div className="grid grid-cols-12 gap-4 auto-rows-max">
+      {children}
+    </div>
+  );
+};

package/src/components/apps/DetailedAddressDrawer.tsx

@@ -0,0 +1,325 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Copy, Edit2, Save, EyeOff, Eye, Flame } from 'lucide-react';
+import { Drawer } from '@/components/design-system';
+
+interface WalletData {
+  address: string;
+  tier: 'cold' | 'hot' | 'temp';
+  chain: string;
+  balance?: string;
+  name?: string;
+  color?: string;
+  emoji?: string;
+  description?: string;
+  hidden?: boolean;
+  tokenHash?: string;
+  createdAt?: string;
+}
+
+interface DetailedAddressDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  wallet: WalletData | null;
+  onUpdate: (address: string, updates: { name?: string; color?: string; emoji?: string; description?: string; hidden?: boolean }) => Promise<void>;
+  onCopyAddress: (address: string) => void;
+  copiedAddress: string | null;
+}
+
+const EMOJI_OPTIONS = ['🔥', '💎', '🚀', '⚡', '🌙', '🌟', '💰', '🎯', '🔮', '🌈'];
+const COLOR_OPTIONS = ['#ff4d00', '#0047ff', '#00c853', '#ffab00', '#9c27b0', '#00bcd4', '#e91e63', '#607d8b'];
+
+export const DetailedAddressDrawer: React.FC<DetailedAddressDrawerProps> = ({
+  isOpen,
+  onClose,
+  wallet,
+  onUpdate,
+  onCopyAddress,
+  copiedAddress,
+}) => {
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // Edit form state
+  const [editName, setEditName] = useState('');
+  const [editDescription, setEditDescription] = useState('');
+  const [editEmoji, setEditEmoji] = useState('');
+  const [editColor, setEditColor] = useState('');
+  const [editHidden, setEditHidden] = useState(false);
+
+  // Reset edit state when wallet changes
+  useEffect(() => {
+    if (wallet) {
+      setEditName(wallet.name || '');
+      setEditDescription(wallet.description || '');
+      setEditEmoji(wallet.emoji || '');
+      setEditColor(wallet.color || '');
+      setEditHidden(wallet.hidden || false);
+    }
+    setIsEditMode(false);
+  }, [wallet]);
+
+  const handleSave = async () => {
+    if (!wallet) return;
+    setSaving(true);
+    try {
+      await onUpdate(wallet.address, {
+        name: editName || undefined,
+        description: editDescription || undefined,
+        emoji: editEmoji || undefined,
+        color: editColor || undefined,
+        hidden: editHidden,
+      });
+      setIsEditMode(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!wallet) return null;
+
+  const shortAddress = (addr: string) => `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+
+  return (
+    <Drawer
+      isOpen={isOpen}
+      onClose={onClose}
+      title={isEditMode ? 'EDIT WALLET' : 'WALLET DETAILS'}
+      subtitle={shortAddress(wallet.address)}
+      width="md"
+    >
+      <div className="space-y-5">
+        {/* QR Code & Address */}
+        <div className="bg-[var(--color-surface,#ffffff)] border border-[var(--color-border,#e5e5e5)] p-4">
+          <div className="flex justify-center mb-4">
+            <div className="p-2 bg-[var(--color-surface,#ffffff)] border border-[var(--color-border,#e5e5e5)] relative">
+              <div className="absolute top-1 left-1 w-2 h-2 border-l border-t border-[var(--color-border-focus,#0a0a0a)]" />
+              <div className="absolute top-1 right-1 w-2 h-2 border-r border-t border-[var(--color-border-focus,#0a0a0a)]" />
+              <div className="absolute bottom-1 left-1 w-2 h-2 border-l border-b border-[var(--color-border-focus,#0a0a0a)]" />
+              <div className="absolute bottom-1 right-1 w-2 h-2 border-r border-b border-[var(--color-border-focus,#0a0a0a)]" />
+              <img
+                src={`https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=${wallet.address}&bgcolor=ffffff&color=0a0a0a&margin=0`}
+                alt="Wallet QR Code"
+                className="w-28 h-28"
+              />
+            </div>
+          </div>
+
+          <div className="p-2 bg-[var(--color-text,#0a0a0a)] border border-[var(--color-border-focus,#0a0a0a)] mb-3">
+            <code className="font-mono text-[10px] text-[var(--color-accent,#ccff00)] break-all select-all block text-center leading-relaxed">
+              {wallet.address}
+            </code>
+          </div>
+
+          <button
+            onClick={() => onCopyAddress(wallet.address)}
+            className="w-full py-2 bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] font-mono text-[9px] tracking-widest flex items-center justify-center gap-2 hover:text-[var(--color-accent,#ccff00)] transition-colors"
+          >
+            <Copy size={10} />
+            {copiedAddress === wallet.address ? 'COPIED!' : 'COPY ADDRESS'}
+          </button>
+        </div>
+
+        {/* Wallet Metadata */}
+        <div className="bg-[var(--color-surface,#ffffff)] border border-[var(--color-border,#e5e5e5)] p-4">
+          <div className="flex items-center justify-between mb-3">
+            <div className="font-mono text-[9px] text-[var(--color-text-muted,#6b7280)] tracking-widest">METADATA</div>
+            <button
+              onClick={() => isEditMode ? handleSave() : setIsEditMode(true)}
+              disabled={saving}
+              className="flex items-center gap-1 px-2 py-1 border border-[var(--color-border,#e5e5e5)] font-mono text-[9px] text-[var(--color-text-muted,#6b7280)] hover:border-[var(--color-border-focus,#0a0a0a)] hover:text-[var(--color-text-hover,#0a0a0a)] transition-colors disabled:opacity-50"
+            >
+              {isEditMode ? (
+                <>
+                  <Save size={10} />
+                  {saving ? 'SAVING...' : 'SAVE'}
+                </>
+              ) : (
+                <>
+                  <Edit2 size={10} />
+                  EDIT
+                </>
+              )}
+            </button>
+          </div>
+
+          {isEditMode ? (
+            <div className="space-y-4">
+              {/* Name */}
+              <div>
+                <label className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest block mb-1">NAME</label>
+                <input
+                  type="text"
+                  value={editName}
+                  onChange={(e) => setEditName(e.target.value)}
+                  placeholder="Wallet name..."
+                  className="w-full px-3 py-2 border border-[var(--color-border,#e5e5e5)] font-mono text-xs focus:outline-none focus:border-[var(--color-border-focus,#0a0a0a)] bg-[var(--color-surface,#ffffff)]"
+                />
+              </div>
+
+              {/* Description */}
+              <div>
+                <label className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest block mb-1">DESCRIPTION</label>
+                <textarea
+                  value={editDescription}
+                  onChange={(e) => setEditDescription(e.target.value)}
+                  placeholder="Add a description..."
+                  rows={2}
+                  className="w-full px-3 py-2 border border-[var(--color-border,#e5e5e5)] font-mono text-xs focus:outline-none focus:border-[var(--color-border-focus,#0a0a0a)] bg-[var(--color-surface,#ffffff)] resize-none"
+                />
+              </div>
+
+              {/* Emoji Picker */}
+              <div>
+                <label className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest block mb-1">EMOJI</label>
+                <div className="flex flex-wrap gap-1">
+                  <button
+                    onClick={() => setEditEmoji('')}
+                    className={`w-8 h-8 border flex items-center justify-center transition-colors ${
+                      !editEmoji ? 'border-[var(--color-border-focus,#0a0a0a)] bg-[var(--color-background-alt,#f4f4f5)]' : 'border-[var(--color-border,#e5e5e5)] hover:border-[var(--color-border-hover,#d4d4d4)]'
+                    }`}
+                  >
+                    <Flame size={12} className="text-[var(--color-warning,#ff4d00)]" />
+                  </button>
+                  {EMOJI_OPTIONS.map((emoji) => (
+                    <button
+                      key={emoji}
+                      onClick={() => setEditEmoji(emoji)}
+                      className={`w-8 h-8 border flex items-center justify-center text-sm transition-colors ${
+                        editEmoji === emoji ? 'border-[var(--color-border-focus,#0a0a0a)] bg-[var(--color-background-alt,#f4f4f5)]' : 'border-[var(--color-border,#e5e5e5)] hover:border-[var(--color-border-hover,#d4d4d4)]'
+                      }`}
+                    >
+                      {emoji}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Color Picker */}
+              <div>
+                <label className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest block mb-1">COLOR</label>
+                <div className="flex flex-wrap gap-1">
+                  <button
+                    onClick={() => setEditColor('')}
+                    className={`w-8 h-8 border flex items-center justify-center transition-colors ${
+                      !editColor ? 'border-[var(--color-border-focus,#0a0a0a)]' : 'border-[var(--color-border,#e5e5e5)] hover:border-[var(--color-border-hover,#d4d4d4)]'
+                    }`}
+                  >
+                    <div className="w-4 h-4 bg-[var(--color-border,#e5e5e5)] rounded-full" />
+                  </button>
+                  {COLOR_OPTIONS.map((color) => (
+                    <button
+                      key={color}
+                      onClick={() => setEditColor(color)}
+                      className={`w-8 h-8 border flex items-center justify-center transition-colors ${
+                        editColor === color ? 'border-[var(--color-border-focus,#0a0a0a)]' : 'border-[var(--color-border,#e5e5e5)] hover:border-[var(--color-border-hover,#d4d4d4)]'
+                      }`}
+                    >
+                      <div className="w-4 h-4 rounded-full" style={{ backgroundColor: color }} />
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Hidden Toggle */}
+              <div>
+                <label className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest block mb-1">VISIBILITY</label>
+                <button
+                  onClick={() => setEditHidden(!editHidden)}
+                  className={`flex items-center gap-2 px-3 py-2 border transition-colors w-full ${
+                    editHidden
+                      ? 'border-[var(--color-warning,#ff4d00)] bg-[var(--color-warning,#ff4d00)]/5 text-[var(--color-warning,#ff4d00)]'
+                      : 'border-[var(--color-border,#e5e5e5)] hover:border-[var(--color-border-hover,#d4d4d4)]'
+                  }`}
+                >
+                  {editHidden ? <EyeOff size={12} /> : <Eye size={12} />}
+                  <span className="font-mono text-[10px]">
+                    {editHidden ? 'HIDDEN - Excluded from totals' : 'VISIBLE - Included in totals'}
+                  </span>
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {/* Display View */}
+              <div className="flex items-center gap-3">
+                {wallet.emoji ? (
+                  <div className="w-10 h-10 border border-[var(--color-border,#e5e5e5)] flex items-center justify-center text-xl">
+                    {wallet.emoji}
+                  </div>
+                ) : (
+                  <div className="w-10 h-10 border border-[var(--color-warning,#ff4d00)]/30 flex items-center justify-center">
+                    <Flame size={16} className="text-[var(--color-warning,#ff4d00)]" />
+                  </div>
+                )}
+                <div className="flex-1">
+                  <div className="font-bold text-sm text-[var(--color-text,#0a0a0a)]">
+                    {wallet.name || 'Unnamed Wallet'}
+                  </div>
+                  {wallet.description && (
+                    <div className="font-mono text-[9px] text-[var(--color-text-muted,#6b7280)] mt-0.5">{wallet.description}</div>
+                  )}
+                </div>
+                {wallet.color && (
+                  <div
+                    className="w-4 h-4 rounded-full border border-[var(--color-border,#e5e5e5)]"
+                    style={{ backgroundColor: wallet.color }}
+                  />
+                )}
+              </div>
+
+              {wallet.hidden && (
+                <div className="flex items-center gap-2 px-2 py-1.5 bg-[var(--color-warning,#ff4d00)]/10 border border-[var(--color-warning,#ff4d00)]/30">
+                  <EyeOff size={10} className="text-[var(--color-warning,#ff4d00)]" />
+                  <span className="font-mono text-[9px] text-[var(--color-warning,#ff4d00)]">HIDDEN</span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Details Grid */}
+        <div className="bg-[var(--color-surface,#ffffff)] border border-[var(--color-border,#e5e5e5)] p-4">
+          <div className="font-mono text-[9px] text-[var(--color-text-muted,#6b7280)] tracking-widest mb-3">DETAILS</div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <div className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest">CREATED</div>
+              <div className="font-mono text-[10px] text-[var(--color-text,#0a0a0a)] mt-0.5">
+                {wallet.createdAt
+                  ? new Date(wallet.createdAt).toLocaleDateString()
+                  : 'Unknown'}
+              </div>
+            </div>
+            <div>
+              <div className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest">BALANCE</div>
+              <div className="font-mono text-[10px] text-[var(--color-text,#0a0a0a)] mt-0.5 font-bold">
+                {wallet.balance || '0 ETH'}
+              </div>
+            </div>
+            <div>
+              <div className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest">CHAIN</div>
+              <div className="font-mono text-[10px] text-[var(--color-text,#0a0a0a)] mt-0.5 uppercase">
+                {wallet.chain}
+              </div>
+            </div>
+            <div>
+              <div className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest">TIER</div>
+              <div className="font-mono text-[10px] text-[var(--color-warning,#ff4d00)] mt-0.5 uppercase font-bold">
+                {wallet.tier}
+              </div>
+            </div>
+            {wallet.tokenHash && (
+              <div className="col-span-2">
+                <div className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest">CREATED BY</div>
+                <div className="font-mono text-[9px] text-[var(--color-text-muted,#6b7280)] mt-0.5 truncate">
+                  {wallet.tokenHash.slice(0, 16)}...
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  );
+};