Crypto Dashboard UI

Das Crypto-Modul bietet ein modernes, SaaS-ähnliches Dashboard mit Echtzeit-Datenvisualisierung.

🎨 Design System

Color Palette

Element	Farbe	Verwendung
Hintergrund	Dunkles Schiefergrau (#0f172a)	Haupt-Hintergrund
Karten	Glassmorphic	Inhaltscontainer
Akzent	Cyan (#22d3ee)	Hervorhebungen, Animationen
Trust Score	Farbverlauf	Score-Anzeige

Risk Level Colors

Stufe	Farbe	Hex
NIEDRIG	Grün	#22c55e
MITTEL	Gelb	#eab308
HOCH	Orange	#f97316
KRITISCH	Rot	#ef4444

---

🏠 Main Components

1. Animated Logo

Benutzerdefiniertes SVG-Logo mit Animationen:

• Schildform mit dem Buchstaben "S"
• Rotierender Radar-Scan (360°-Schleife)
• Pulsierende Ringe (Cyan-Leuchten)
• Farbverlaufsfüllung (Blau-Violett)

2. Project Header

Anzeige von:

• Projektname und Symbol (z.B. "Aave (AAVE)")
• Aktueller Preis mit 24h-Änderung
• Trust Score-Abzeichen
• Aktualisieren-Schaltfläche

3. Trust Score Card

Große Anzeige des Trust Score:

• Score-Zahl (0-100) mit Farbverlauf
• Risikostufen-Abzeichen (farbcodiert)
• 4-Säulen-Radar-Chart (@nivo/radar)

4. Financial Health Card

Wichtige Kennzahlen:

• Preis USD
• Marktkapitalisierung
• Fully Diluted Valuation (FDV)
• MCap/FDV Ratio

5. Dev Activity Card

GitHub-Kennzahlen:

• Repository-Organisation
• Commits (letzte 30 Tage)
• Aktive Entwickler
• Datum des letzten Commits

6. TVL Card (DeFi projects)

DefiLlama-Daten:

• Total Value Locked
• Aufschlüsselung der Kettenverteilung
• MCap/TVL Ratio

---

🔍 Search Component

Features

• Debounced input (300ms Verzögerung)
• Autocomplete-Dropdown mit Trust Scores
• Klick außerhalb zum Schließen
• Tastatur-Navigation (Pfeiltasten, Enter)

Implementation

const CryptoSearch = ({ onSelect }) => {
  const [query, setQuery] = useState('');
  const [isOpen, setIsOpen] = useState(false);
  
  const { data: results } = useQuery({
    queryKey: ['cryptoSearch', query],
    queryFn: () => searchProjects(query),
    enabled: query.length >= 2,
  });
  
  return (
    <div className="relative">
      <input 
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search projects..."
      />
      {isOpen && results && (
        <Dropdown items={results} onSelect={onSelect} />
      )}
    </div>
  );
};

---

📊 Radar Chart

4-Säulen-Visualisierung mit @nivo/radar:

Configuration

const radarData = [
  { pillar: 'Treasury', score: 80 },
  { pillar: 'Dev Activity', score: 55 },
  { pillar: 'Financials', score: 80 },
  { pillar: 'Community', score: 65 },
];

<ResponsiveRadar
  data={radarData}
  keys={['score']}
  indexBy="pillar"
  maxValue={100}
  margin={{ top: 40, right: 60, bottom: 40, left: 60 }}
  colors={['#22d3ee']}
  fillOpacity={0.3}
  borderColor="#22d3ee"
  gridLevels={5}
  theme={darkTheme}
/>

---

🚀 Coming Soon Sections

Platzhalterkarten für zukünftige Funktionen:

Tokenomics (Phase 3.3)

• Visualisierung des Vesting-Plans
• Anstehende Token-Entsperrungen
• Insider-Allokation %

Team Credibility (Phase 3.4)

• Gründerprofile
• LinkedIn-Integration
• Analyse der Erfolgsbilanz

Community Health (Phase 3.5)

• Qualität der Twitter-Follower
• Discord/Telegram-Aktivität
• Sentiment-Analyse

---

📱 Responsive Design

Breakpoint	Layout
Desktop (1024px+)	2-Spalten-Raster
Tablet (768-1023px)	Einspaltig, Karten in voller Breite
Mobile (unter 768px)	Gestapelte Karten, kompakte Ansicht

---

⚡ Performance

Metrik	Ziel	Ist
Initialer Ladevorgang	unter 1s	0.8s
Suchantwort	unter 500ms	300ms
Diagramm-Rendering	unter 100ms	80ms

---

Die Crypto-UI teilt sich das gleiche Designsystem mit dem Corporate-Modul für ein einheitliches Erlebnis.