auramaxx 0.0.20 → 0.1.1

package/src/app/health/page.tsx

@@ -1,5 +0,0 @@
-import { CredentialHealthDashboard } from '@/components/health/CredentialHealthDashboard';
-
-export default function HealthPage() {
-  return <CredentialHealthDashboard />;
-}

package/src/app/hello/page.tsx

@@ -1,102 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import React from 'react';
-
-import { DeviceMorphExperience } from '@/components/marketing/DeviceMorphExperience';
-import { AuraMaxxSpecOverlay } from '@/components/marketing/AuraMaxxSpecOverlay';
-
-function useReducedMotion(): boolean {
-  const [reduced, setReduced] = React.useState(false);
-
-  React.useEffect(() => {
-    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
-    const apply = () => setReduced(media.matches);
-    apply();
-    media.addEventListener('change', apply);
-    return () => media.removeEventListener('change', apply);
-  }, []);
-
-  return reduced;
-}
-
-export default function LandingPage() {
-  const reducedMotion = useReducedMotion();
-  const [progress, setProgress] = React.useState(0);
-
-  React.useEffect(() => {
-    if (reducedMotion) {
-      setProgress(0);
-      return;
-    }
-
-    let raf = 0;
-    const update = () => {
-      const max = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);
-      setProgress(Math.min(1, Math.max(0, window.scrollY / max)));
-      raf = 0;
-    };
-    const onScroll = () => {
-      if (raf) return;
-      raf = window.requestAnimationFrame(update);
-    };
-
-    update();
-    window.addEventListener('scroll', onScroll, { passive: true });
-    window.addEventListener('resize', onScroll);
-    return () => {
-      window.removeEventListener('scroll', onScroll);
-      window.removeEventListener('resize', onScroll);
-      if (raf) window.cancelAnimationFrame(raf);
-    };
-  }, [reducedMotion]);
-
-  const p = reducedMotion ? 0 : progress;
-
-  return (
-    <div className="relative w-full min-h-[500vh] overflow-x-hidden bg-tyvek-dim font-sans" data-testid="hello-page-shell">
-      <div className="fixed inset-0 z-[1] pointer-events-none" data-testid="hello-motion-background">
-        <div
-          data-testid="hello-bg-layer-grid"
-          className="absolute inset-0 marketing-grid opacity-45"
-          style={{ transform: `translateY(${p * -80}px)`, transition: reducedMotion ? 'none' : 'transform 120ms linear' }}
-        />
-        <div
-          data-testid="hello-bg-layer-tyvek"
-          className="absolute inset-0 tyvek-texture mix-blend-multiply opacity-35"
-          style={{ transform: `translateY(${p * -40}px) scale(${1 + p * 0.04})`, transition: reducedMotion ? 'none' : 'transform 120ms linear' }}
-        />
-        <div
-          data-testid="hello-bg-layer-radial"
-          className="absolute inset-0"
-          style={{
-            background:
-              'radial-gradient(circle at 15% 20%, rgba(10,10,10,0.10), transparent 38%), radial-gradient(circle at 80% 75%, rgba(255,255,255,0.18), transparent 40%)',
-            transform: `translate3d(${p * 24}px, ${p * -24}px, 0)`,
-            transition: reducedMotion ? 'none' : 'transform 120ms linear',
-          }}
-        />
-        {reducedMotion && (
-          <div data-testid="hello-reduced-motion-fallback" className="sr-only">
-            Reduced motion active
-          </div>
-        )}
-      </div>
-
-      <DeviceMorphExperience />
-      <AuraMaxxSpecOverlay />
-
-      <footer className="fixed bottom-4 right-4 z-50">
-        <nav className="flex items-center gap-3 border border-concrete/30 bg-void/85 px-4 py-2 text-[10px] tracking-widest font-mono text-tyvek backdrop-blur-sm">
-          <Link href="/terms" className="hover:text-voltage transition-colors">TERMS</Link>
-          <span className="text-concrete/40">|</span>
-          <Link href="/privacy" className="hover:text-voltage transition-colors">PRIVACY</Link>
-        </nav>
-      </footer>
-
-      <div className="thermal-bond">
-        <div className="thermal-seal-texture" />
-      </div>
-    </div>
-  );
-}

package/src/app/layout.tsx

@@ -1,40 +0,0 @@
-import type { Metadata } from 'next';
-import './globals.css';
-import { Providers } from './providers';
-import { ThemeProvider } from '@/hooks/useTheme';
-
-export const metadata: Metadata = {
-  metadataBase: new URL('https://auramaxx.sh'),
-  title: 'AuraMaxx',
-  description: 'Secure local wallets for AI agents',
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body>
-        {/* SVG Filters for Tyvek Effect */}
-        <svg className="absolute w-0 h-0 pointer-events-none" style={{ position: 'absolute', width: 0, height: 0 }}>
-          <filter id="tyvekFilter">
-            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch" />
-            <feColorMatrix type="saturate" values="0" />
-            <feComponentTransfer>
-              <feFuncR type="linear" slope="0.3" />
-              <feFuncG type="linear" slope="0.3" />
-              <feFuncB type="linear" slope="0.3" />
-            </feComponentTransfer>
-          </filter>
-        </svg>
-        <ThemeProvider>
-          <Providers>{children}</Providers>
-        </ThemeProvider>
-        {/* Tyvek texture — global noise overlay (z-index capped + inline pointerEvents for Electron compat) */}
-        <div className="tyvek-texture" style={{ opacity: 0.12, zIndex: 0, pointerEvents: 'none' }} />
-      </body>
-    </html>
-  );
-}

package/src/app/page.tsx

@@ -1,38 +0,0 @@
-import type { Metadata } from 'next';
-import UnlockPageClient from './UnlockPageClient';
-
-const SEO_TITLE = 'auramaxx.sh';
-const SEO_DESCRIPTION = 'THE APPLE KEYCHAIN FOR AI AGENTS. share passwpords, api keys, and credit cards with OpenClaw, Claude, Codex, Gemini,etc';
-
-export const metadata: Metadata = {
-  title: SEO_TITLE,
-  description: SEO_DESCRIPTION,
-  alternates: {
-    canonical: '/',
-  },
-  openGraph: {
-    type: 'website',
-    url: '/',
-    siteName: SEO_TITLE,
-    title: SEO_TITLE,
-    description: SEO_DESCRIPTION,
-    images: [
-      {
-        url: '/opengraph.webp',
-        width: 1512,
-        height: 982,
-        alt: SEO_TITLE,
-      },
-    ],
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: SEO_TITLE,
-    description: SEO_DESCRIPTION,
-    images: ['/opengraph.webp'],
-  },
-};
-
-export default function Page() {
-  return <UnlockPageClient />;
-}

package/src/app/privacy/page.tsx

@@ -1,63 +0,0 @@
-import Link from 'next/link';
-
-export default function PrivacyPage() {
-  return (
-    <div className="min-h-screen bg-[var(--color-background,#f4f4f5)] relative p-4 py-8">
-      <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
-        <div className="absolute inset-0 bg-grid-adaptive bg-[size:4rem_4rem] opacity-30" />
-        <div className="absolute inset-0 tyvek-texture opacity-40 mix-blend-multiply" />
-        <div className="absolute top-[5%] left-[5%] opacity-5 select-none">
-          <h1 className="text-[15vw] font-bold leading-none text-[var(--color-text,#0a0a0a)] font-mono tracking-tighter">
-            AURA
-          </h1>
-        </div>
-        <div className="absolute bottom-[5%] right-[5%] opacity-5 select-none">
-          <h1 className="text-[15vw] font-bold leading-none text-[var(--color-text,#0a0a0a)] font-mono tracking-tighter text-right">
-            PRIVACY
-          </h1>
-        </div>
-      </div>
-
-      <Link
-        href="/hello"
-        className="fixed top-6 left-6 z-50 flex items-center gap-3 hover:opacity-80 transition-opacity"
-      >
-        <div className="w-10 h-10">
-          <img src="/logo.webp" alt="AuraMaxx" className="w-full h-full object-contain" />
-        </div>
-        <div className="font-black text-xl tracking-tighter text-[var(--color-text,#0a0a0a)]">AURAMAXX</div>
-      </Link>
-
-      <div className="fixed top-7 right-6 z-50 flex items-center gap-3 font-mono text-[10px] tracking-widest">
-        <Link href="/terms" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">TERMS</Link>
-        <Link href="/docs" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">DOCS</Link>
-        <Link href="/" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">HOME</Link>
-      </div>
-
-      <main className="relative z-[5] max-w-[920px] mx-auto pt-16">
-        <article className="bg-[var(--color-surface,#f4f4f2)] border border-[var(--color-border,#d4d4d8)] shadow-lg overflow-hidden font-mono">
-          <header className="px-5 py-4 border-b border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)] flex items-center justify-between">
-            <h1 className="font-sans font-bold text-sm text-[var(--color-text,#0a0a0a)] uppercase tracking-tight">
-              Privacy Policy
-            </h1>
-            <span className="text-[9px] text-[var(--color-text-muted,#6b7280)] tracking-widest">LOCAL-FIRST</span>
-          </header>
-
-          <div className="p-6 space-y-5 text-[13px] leading-6 text-[var(--color-text,#0a0a0a)]">
-            <p>Zero personal data is collected.</p>
-            <p>No analytics, no tracking, and no telemetry are built into AuraWallet.</p>
-            <p>All agent data is stored locally on your machine.</p>
-            <p>Aura does not have access to your credentials.</p>
-            <p>
-              AuraWallet is fully open source, so you can inspect and audit the code yourself at any time.
-            </p>
-          </div>
-
-          <footer className="px-5 py-3 border-t border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)] text-[9px] tracking-widest text-[var(--color-text-faint,#9ca3af)] uppercase">
-            We never receive your secrets
-          </footer>
-        </article>
-      </main>
-    </div>
-  );
-}

package/src/app/providers.tsx

@@ -1,87 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import { PriceProvider } from '@/context/PriceContext';
-import { WebSocketProvider, useWebSocket } from '@/context/WebSocketContext';
-import { WorkspaceProvider } from '@/context/WorkspaceContext';
-import { AuthProvider, useAuth } from '@/context/AuthContext';
-
-function ServerRestartBanner() {
-  const { reconnected, dismissReconnected } = useWebSocket();
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    if (reconnected) {
-      timerRef.current = setTimeout(dismissReconnected, 30000);
-      return () => {
-        if (timerRef.current) clearTimeout(timerRef.current);
-      };
-    }
-  }, [reconnected, dismissReconnected]);
-
-  if (!reconnected) return null;
-
-  return (
-    <div
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        zIndex: 9999,
-        padding: '10px 16px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: '12px',
-        fontFamily: 'monospace',
-        fontSize: '11px',
-        background: 'var(--color-warning, #ff4d00)',
-        color: '#fff',
-      }}
-    >
-      <span>
-        Server restarted. All agent tokens have been invalidated. Agents will need to re-request access.
-      </span>
-      <button
-        onClick={dismissReconnected}
-        style={{
-          background: 'rgba(255,255,255,0.2)',
-          border: 'none',
-          color: '#fff',
-          padding: '4px 10px',
-          cursor: 'pointer',
-          fontFamily: 'monospace',
-          fontSize: '10px',
-          flexShrink: 0,
-        }}
-      >
-        DISMISS
-      </button>
-    </div>
-  );
-}
-
-// Inner component that uses the auth context
-function AuthenticatedProviders({ children }: { children: React.ReactNode }) {
-  const { token } = useAuth();
-
-  return (
-    <WebSocketProvider token={token}>
-      <PriceProvider>
-        <WorkspaceProvider>
-          <ServerRestartBanner />
-          {children}
-        </WorkspaceProvider>
-      </PriceProvider>
-    </WebSocketProvider>
-  );
-}
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <AuthProvider>
-      <AuthenticatedProviders>{children}</AuthenticatedProviders>
-    </AuthProvider>
-  );
-}

package/src/app/share/[token]/page.tsx

@@ -1,295 +0,0 @@
-'use client';
-
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { AlertTriangle, Eye, Link2, Loader2, Lock, ShieldCheck } from 'lucide-react';
-import { getWalletBaseUrl } from '@/lib/api';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useParams } from 'next/navigation';
-
-interface ShareMeta {
-  token: string;
-  credentialId: string;
-  credentialName: string;
-  credentialType: string;
-  expiresAt: number;
-  accessMode: 'anyone' | 'password';
-  passwordRequired: boolean;
-  oneTimeOnly: boolean;
-  viewCount: number;
-  maxViews: number | null;
-}
-
-interface SharedCredentialField {
-  key: string;
-  value: string;
-}
-
-interface SharedCredential {
-  id: string;
-  name: string;
-  type: string;
-  meta: Record<string, unknown>;
-  fields: SharedCredentialField[];
-  createdAt: string;
-  updatedAt: string;
-}
-
-export default function SharedCredentialPage() {
-  const params = useParams<{ token: string | string[] }>();
-  const [token, setToken] = useState('');
-  const [meta, setMeta] = useState<ShareMeta | null>(null);
-  const [credential, setCredential] = useState<SharedCredential | null>(null);
-  const [loadingMeta, setLoadingMeta] = useState(true);
-  const [reading, setReading] = useState(false);
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
-
-  const walletBaseUrl = useMemo(() => getWalletBaseUrl(), []);
-
-  const fetchMeta = useCallback(async (shareToken: string) => {
-    setLoadingMeta(true);
-    setError(null);
-    try {
-      const res = await fetch(`${walletBaseUrl}/credential-shares/${encodeURIComponent(shareToken)}`);
-      const data = await res.json().catch(() => ({ error: 'Invalid response' }));
-      if (!res.ok) {
-        setError(data.error || 'Failed to load share');
-        setMeta(null);
-        return;
-      }
-      setMeta(data.share as ShareMeta);
-    } catch {
-      setError('Failed to load share');
-      setMeta(null);
-    } finally {
-      setLoadingMeta(false);
-    }
-  }, [walletBaseUrl]);
-
-  const readShare = useCallback(async (shareToken: string, sharePassword?: string) => {
-    setReading(true);
-    setError(null);
-    try {
-      const res = await fetch(`${walletBaseUrl}/credential-shares/${encodeURIComponent(shareToken)}/read`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(sharePassword ? { password: sharePassword } : {}),
-      });
-      const data = await res.json().catch(() => ({ error: 'Invalid response' }));
-      if (!res.ok) {
-        setError(data.error || 'Failed to read shared credential');
-        return;
-      }
-      setCredential(data.credential as SharedCredential);
-    } catch {
-      setError('Failed to read shared credential');
-    } finally {
-      setReading(false);
-    }
-  }, [walletBaseUrl]);
-
-  useEffect(() => {
-    const rawToken = params?.token;
-    const shareToken = Array.isArray(rawToken) ? rawToken[0] : rawToken;
-    setToken(shareToken || '');
-    if (shareToken) {
-      void fetchMeta(shareToken);
-    } else {
-      setLoadingMeta(false);
-      setError('Invalid share link');
-    }
-  }, [fetchMeta, params]);
-
-  useEffect(() => {
-    if (!token || !meta || meta.passwordRequired || credential || reading) return;
-    void readShare(token);
-  }, [token, meta, credential, reading, readShare]);
-
-  const metaEntries = useMemo(() => {
-    if (!credential) return [];
-    return Object.entries(credential.meta || {}).filter(([, value]) =>
-      typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean',
-    );
-  }, [credential]);
-
-  return (
-    <div className="min-h-screen bg-tyvek relative flex items-center justify-center p-4 py-8">
-      <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
-        <div className="absolute inset-0 bg-grid-pattern bg-[size:4rem_4rem] opacity-30" />
-        <div className="absolute inset-0 tyvek-texture opacity-40 mix-blend-multiply" />
-
-        <div className="absolute top-[5%] left-[5%] opacity-5 select-none">
-          <h1 className="text-[15vw] font-bold leading-none text-void font-mono tracking-tighter">STERILE</h1>
-        </div>
-        <div className="absolute bottom-[5%] right-[5%] opacity-5 select-none">
-          <h1 className="text-[15vw] font-bold leading-none text-void font-mono tracking-tighter text-right">FIELD</h1>
-        </div>
-
-        <div className="absolute top-10 left-10 w-32 h-32 border-l-4 border-t-4 border-void opacity-10">
-          <div className="absolute top-2 left-2 w-4 h-4 bg-void" />
-        </div>
-        <div className="absolute bottom-10 right-10 w-32 h-32 border-r-4 border-b-4 border-void opacity-10 flex items-end justify-end">
-          <div className="absolute bottom-2 right-2 w-4 h-4 bg-void" />
-        </div>
-      </div>
-
-      <Link href="/" className="fixed top-6 left-6 z-50 flex items-center gap-3 hover:opacity-80 transition-opacity">
-        <div className="w-10 h-10">
-          <Image src="/logo.webp" alt="AuraMaxx" width={40} height={40} className="w-full h-full object-contain" priority />
-        </div>
-        <div className="font-black text-xl tracking-tighter text-black">AURAMAXX</div>
-      </Link>
-
-      <div className="relative z-10 w-full max-w-2xl">
-        <div className="bg-[#f4f4f2] border border-black/10 shadow-lg overflow-hidden font-mono">
-          <div className="px-4 py-3 border-b border-black/10 bg-white/50 flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Link2 size={15} className="text-black/70" />
-              <h1 className="text-[11px] font-bold uppercase tracking-[0.22em] text-black">SHARED CREDENTIAL</h1>
-            </div>
-            <span className="text-[9px] text-black/40 tracking-wider">
-              {credential ? 'ACCESS_GRANTED' : meta?.passwordRequired ? 'LOCKED' : 'PENDING'}
-            </span>
-          </div>
-
-          <div className="px-4 pb-4 pt-4 space-y-4">
-            {loadingMeta && (
-              <div className="flex items-center gap-2 text-[10px] text-black/60 uppercase tracking-widest">
-                <Loader2 size={12} className="animate-spin" />
-                LOADING SHARE
-              </div>
-            )}
-
-            {!loadingMeta && error && !credential && (
-              <div className="border border-red-300 bg-red-100/40 p-3">
-                <div className="flex items-center gap-2 text-[10px] text-red-700 uppercase tracking-wider">
-                  <AlertTriangle size={12} />
-                  {error}
-                </div>
-              </div>
-            )}
-
-            {!loadingMeta && meta && !credential && !meta.passwordRequired && reading && (
-              <div className="flex items-center gap-2 text-[10px] text-black/60 uppercase tracking-widest">
-                <Loader2 size={12} className="animate-spin" />
-                DECRYPTING PAYLOAD
-              </div>
-            )}
-
-            {!loadingMeta && meta && !credential && meta.passwordRequired && (
-              <div className="space-y-3">
-                <div className="text-[10px] text-black/60 uppercase tracking-wider">
-                  This shared credential is password protected.
-                </div>
-                <div className="space-y-1">
-                  <label htmlFor="share-password" className="block text-[8px] font-bold text-black/50 uppercase tracking-[0.14em]">
-                    SHARE PASSWORD
-                  </label>
-                  <input
-                    id="share-password"
-                    type="password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    placeholder="Enter password"
-                    className="w-full h-10 px-3 border border-black/20 bg-white text-[11px] text-black placeholder:text-black/35 outline-none focus:border-black transition-colors"
-                  />
-                </div>
-
-                <button
-                  type="button"
-                  onClick={() => { void readShare(token, password); }}
-                  disabled={!password || reading}
-                  className="h-9 px-4 flex items-center justify-center gap-2 border border-black/20 bg-white hover:border-black text-[10px] font-bold uppercase tracking-wider text-black transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-                >
-                  {reading ? <Loader2 size={12} className="animate-spin" /> : <Lock size={12} />}
-                  UNLOCK
-                </button>
-
-                {error && (
-                  <div className="text-[9px] text-red-700 uppercase tracking-wider">{error}</div>
-                )}
-              </div>
-            )}
-
-            {credential && (
-              <div className="space-y-4">
-                {meta && (
-                  <div className="flex items-center gap-2 px-3 py-2 bg-voltage/10 border border-voltage/20">
-                    <ShieldCheck size={13} className="text-green-600" />
-                    <span className="text-[10px] font-bold text-black uppercase tracking-wider">AUTHENTIC SHARE</span>
-                    <span className="text-[9px] text-black/50 ml-auto">
-                      {meta.oneTimeOnly ? 'ONE_TIME' : 'MULTI_VIEW'}
-                    </span>
-                  </div>
-                )}
-
-                <div>
-                  <div className="text-[14px] font-bold text-black uppercase tracking-tight">{credential.name}</div>
-                  <div className="text-[9px] uppercase tracking-widest text-black/60">
-                    {credential.type}
-                    {meta?.oneTimeOnly ? ' · One-time view' : ''}
-                  </div>
-                  {meta && (
-                    <div className="text-[9px] text-black/50 mt-1">Expires {new Date(meta.expiresAt).toLocaleString()}</div>
-                  )}
-                </div>
-
-                {metaEntries.length > 0 && (
-                  <div className="border border-dashed border-black/20 p-3 bg-white/40">
-                    <div className="flex justify-between items-center mb-2 border-b border-black/10 pb-1">
-                      <span className="text-[9px] font-bold uppercase tracking-widest text-black">METADATA</span>
-                      <span className="text-[8px] text-black/40 font-bold">
-                        QTY: {metaEntries.length.toString().padStart(2, '0')}
-                      </span>
-                    </div>
-                    <div className="space-y-1.5">
-                      {metaEntries.map(([key, value]) => (
-                        <div key={key} className="grid grid-cols-[140px_1fr] gap-2 py-1 border-b border-black/10">
-                          <div className="text-[9px] uppercase tracking-widest text-black/60">{key}</div>
-                          <div className="text-[10px] break-all text-black">{String(value)}</div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                <div className="border border-dashed border-black/20 p-3 bg-white/40">
-                  <div className="flex justify-between items-center mb-2 border-b border-black/10 pb-1">
-                    <span className="text-[9px] font-bold uppercase tracking-widest text-black">SHARED_FIELDS</span>
-                    <span className="text-[8px] text-black/40 font-bold">
-                      QTY: {credential.fields.length.toString().padStart(2, '0')}
-                    </span>
-                  </div>
-
-                  {credential.fields.length === 0 ? (
-                    <div className="text-[10px] text-black/60 uppercase tracking-wider">No sensitive fields.</div>
-                  ) : (
-                    <div className="space-y-1.5">
-                      {credential.fields.map((field) => (
-                        <div key={field.key} className="grid grid-cols-[140px_1fr] gap-2 py-1 border-b border-black/10">
-                          <div className="text-[9px] uppercase tracking-widest text-black/60">{field.key}</div>
-                          <div className="text-[10px] break-all flex items-start gap-1.5 text-black">
-                            <Eye size={10} className="mt-0.5 shrink-0" />
-                            <span>{field.value}</span>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-
-          {credential && (
-            <div className="px-4 py-2 border-t border-black/10 bg-white/30">
-              <div className="text-[8px] text-black/40 uppercase tracking-widest mb-1">SHARE TOKEN</div>
-              <div className="text-[9px] text-black font-bold break-all leading-relaxed">{token}</div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}