Krypto-Dashboard-UI

Das Krypto-Modul bietet ein modernes, SaaS-Grade Dashboard mit Echtzeit-Datenvisualisierung.

🎨 Designsystem

Farbpalette

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

Farben für Risikostufen

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

---

🏠 Hauptkomponenten

1. Animiertes Logo

Benutzerdefiniertes SVG-Logo mit Animationen:

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

2. Projekt-Header

Anzeigen von:

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

3. Trust Score Karte

Große Anzeige des Trust Score:

• Score-Nummer (0-100) mit Verlauf
• Risikostufen-Abzeichen (farbcodiert)
• 6-Säulen-Radardiagramm (@nivo/radar)

4. Finanzielle Gesundheitskarte

Schlüsselmetriken:

• Preis USD
• Market Cap
• Fully Diluted Valuation (FDV)
• MCap/FDV-Verhältnis

5. Entwickleraktivitätskarte

GitHub-Metriken:

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

6. TVL Karte (DeFi Projekte)

DefiLlama-Daten:

• Total Value Locked
• Aufschlüsselung der Kettenverteilung
• MCap/TVL-Verhältnis

---

🔍 Suchkomponente

Funktionen

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

Implementierung

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>
  );
};

---

📊 Radardiagramm

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

Konfiguration

const radarData = [
  { pillar: "Security", score: 95 },
  { pillar: "Treasury", score: 80 },
  { pillar: "Dev Activity", score: 55 },
  { pillar: "Financials", score: 85 },
  { pillar: "Tokenomics", 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}
/>;

---

🚀 Demnächst Verfügbare Bereiche

Platzhalterkarten für zukünftige Funktionen:

Tokenomics (Phase 3.3)

• Visualisierung des Vesting-Zeitplans
• Bevorstehende Token-Freischaltungen
• Insider-Zuteilung %

Team-Glaubwürdigkeit (Phase 3.4)

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

Community-Gesundheit (Phase 3.5)

• Twitter-Follower-Qualität
• Discord/Telegram-Aktivität
• Stimmungsanalyse

---

📱 Responsives Design

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

---

⚡ Performance

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

---

Die Krypto-UI teilt sich dasselbe Designsystem wie das Unternehmensmodul für ein einheitliches Erlebnis.