09 - UI-Komponenten¶
Dokument: Komponentenbibliothek Stand: 28.02.2026 Scope: Alle 28 React-Komponenten Status: Audit-ready
Übersicht¶
| Kategorie | Anzahl | Beschreibung |
|---|---|---|
| Layout | 4 | App-Container, Navigation |
| Spiel | 4 | Zahlenauswahl, Tier, Tips |
| Transaktion | 2 | Kauf-Flow-Modal, Ergebnis |
| Bonus | 3 | Bonus-Anzeige, Benachrichtigung |
| Daten | 2 | Ticket-History, Gewinner |
| Modals & Banner | 4 | Profil, PWA, Offline, Maintenance |
| System | 3 | Notification Queue, Skeleton, KYC |
| Website | 4 | Marketing, Header, Footer, Desktop |
Barrel Export: app/components/index.ts
1. Layout-Komponenten¶
MobileFrame¶
Datei: app/components/MobileFrame.tsx
Zweck: Mobile App-Layout-Wrapper
| Teil | Beschreibung |
|---|---|
| MobileHeader | Sticky Top-Bar mit Navigation und Titel |
| MobileContent | Scrollbarer Inhaltsbereich |
| MobileFooter | Sticky Bottom-Button-Area |
Features: Safe-Area-Padding, Navbar-Integration
Navbar¶
Datei: app/components/Navbar.tsx
Zweck: Navigationsleiste
| Element | Beschreibung |
|---|---|
| Logo/Brand | ChainBETs Logo |
| Wallet-Adresse | Gekürzt (0x1234...5678) |
| Balance | USDT-Guthaben |
| Menu-Button | Mobile Hamburger |
| Nav-Links | Seiten-Navigation |
LanguageSelector¶
Datei: app/components/LanguageSelector.tsx
Zweck: Sprachumschaltung (EN/DE)
PlayContent¶
Datei: app/components/PlayContent.tsx
Zweck: Hauptspiel-Interface
| Feature | Beschreibung |
|---|---|
| NumberGrid | 6 Zahlen aus 1-40 wählen |
| TierSelector | Pool-Auswahl mit Jackpots |
| Tip-Verwaltung | Add/Remove Tips |
| Kostenübersicht | Gesamtkosten inkl. Gas |
| Buy-Button | Startet Kauf-Flow |
| History-Tab | Letzte Tickets |
| BonusBadge | Verfügbare Bonus-Tips |
2. Spiel-Komponenten¶
NumberGrid¶
Datei: app/components/NumberGrid.tsx
Zweck: Interaktiver 6-Zahlen-Selector
| Feature | Beschreibung |
|---|---|
| Grid-Buttons | Zahlen 1-40 |
| Selektion | Exakt 6 Zahlen pro Tip |
| Visuelles Feedback | Accent-Farbe für gewählte Zahlen |
| Clear-Funktion | Alle Zahlen zurücksetzen |
TierSelector¶
Datei: app/components/TierSelector.tsx
Zweck: Pool/Tier-Auswahl-Tabs
| Pool | Preis | Beschreibung |
|---|---|---|
| MICRO | 0,25 USDT | Einstiegs-Pool |
| MINI | 0,50 USDT | Kleiner Pool |
| STANDARD | 1,00 USDT | Standard-Pool |
| MAXI | 5,00 USDT | Großer Pool |
Props: onTierChange(poolId) Callback
TippCard¶
Datei: app/components/TippCard.tsx
Zweck: Einzelne Tip-Anzeige
| Element | Beschreibung |
|---|---|
| 6 Zahlen | Gewählte Nummern |
| Bonus-Indikator | Markierung für Bonus-Tips |
| Status | Gewonnen/Verloren |
| Treffer | Anzahl Matches |
| Gewinn | Preisamount falls gewonnen |
RevealScreen¶
Datei: app/components/RevealScreen.tsx
Zweck: Animierte Ergebnis-Enthüllung
| Feature | Beschreibung |
|---|---|
| Zahlen-Animation | Nummern erscheinen einzeln |
| Match-Highlight | Treffer werden hervorgehoben |
| Confetti | Animationen bei Gewinnen |
3. Transaktions-Komponenten¶
TxModal¶
Datei: app/components/TxModal.tsx
Zweck: Mehrstufiger Kauf-Flow-Dialog
States (10+):
idle → creating_intent → signing → signed → approving →
approve_confirmed → submitting → tx_pending → confirming → confirmed
Error-States: error_balance, error_rejected, error_timeout, error_network, etc.
| Element | Beschreibung |
|---|---|
| Step-Indikator | Aktueller Schritt |
| Status-Text | Beschreibung der Aktion |
| Spinner/Progress | Ladeindikator |
| Fehler-Anzeige | Fehlermeldung + Retry |
| Ergebnis | TX-Hash, Ticket-ID |
WinCongratulation¶
Datei: app/components/WinCongratulation.tsx
Zweck: Gewinn-Feier-Animation
| Element | Beschreibung |
|---|---|
| Confetti | 3-stufige Animation (4er/5er/6er) |
| Betrag | Gewinnhöhe |
| Treffer | Match-Visualisierung |
| Sound | Synthesisierte Audio-Effekte (optional) |
4. Bonus-Komponenten¶
BonusBadge¶
Datei: app/components/BonusBadge.tsx
Zweck: Kleines Badge mit Bonus-Tip-Zähler
Styling: Gold Accent, kompakt
BonusBalance¶
Datei: app/components/BonusBalance.tsx
Zweck: Bonus-Guthaben-Anzeige
API: GET /api/bonus-balance
Features: Laden, Anzeige, Refresh
BonusNotification¶
Datei: app/components/BonusNotification.tsx
Zweck: Benachrichtigung bei Bonus-Tip-Erhalt
Features: Slide-in-Animation, Gold-Styling, Bonus-Quelle anzeigen
5. Daten-Komponenten¶
TicketHistory¶
Datei: app/components/TicketHistory.tsx
Zweck: Liste der Benutzer-Tickets
| Feld | Beschreibung |
|---|---|
| Ticket-ID | Eindeutige Nummer |
| Datum | Erstellungszeitpunkt |
| Pool | Pool-Name |
| Tips | Bezahlt + Bonus |
| Bester Treffer | Falls settled |
| Kosten | Gesamtkosten |
| Status | Pending/Won/Lost |
Interaktion: Klick für Ticket-Details Pagination: "Load More"-Button
YesterdayWinnersModal¶
Datei: app/components/YesterdayWinnersModal.tsx
Zweck: Gestrige Gewinner anzeigen
| Element | Beschreibung |
|---|---|
| Spieler-Adresse | Gekürzt |
| Treffer | Match-Anzahl |
| Gewinn | Preisamount |
| Pool | Pool-Name |
YesterdayWinnersRegistrar¶
Datei: app/components/YesterdayWinnersRegistrar.tsx
Zweck: Service-Komponente zum Laden der gestrigen Gewinner
API: GET /api/winners/yesterday
6. Modals & Banner¶
ProfileIncompleteModal¶
Datei: app/components/ProfileIncompleteModal.tsx
Zweck: Aufforderung zur Profilvervollständigung
Trigger: Automatisch wenn Pflichtfelder fehlen Aktion: Öffnet Profil-Bearbeitungs-Modal oder Account-Seite Pflichtfelder: firstName, lastName, email, dateOfBirth, country
AddToHomeScreenBanner¶
Datei: app/components/AddToHomeScreenBanner.tsx
Zweck: PWA-Installationshinweis
Trigger: Mobile Browser, App nicht installiert Features: Dismiss-Button, Installationsanleitung
OfflineBanner¶
Datei: app/components/OfflineBanner.tsx
Zweck: Offline-Warnung
Integration: useOnlineStatus Hook
Verhalten: Auto-Hide bei Reconnect
MaintenanceBanner¶
Datei: app/components/MaintenanceBanner.tsx
Zweck: Wartungsmodus-Hinweis
Integration: useMaintenanceStatus Hook
Polling: Alle 30 Sekunden
7. System-Komponenten¶
NotificationQueue¶
Datei: app/components/NotificationQueue.tsx
Zweck: Toast-Benachrichtigungssystem
| Feature | Beschreibung |
|---|---|
| Queue | FIFO-Verwaltung |
| Auto-Dismiss | Timeout |
| Typen | Success, Error, Info |
| Stacking | Gestapelte Anzeige |
Skeleton¶
Datei: app/components/Skeleton.tsx
Zweck: Loading-Platzhalter
| Feature | Beschreibung |
|---|---|
| Shimmer | Animierter Gradient |
| Dimensionen | Konfigurierbar |
| Varianten | Zeilen, Blöcke, Kreise |
KycVerification¶
Datei: app/components/KycVerification.tsx
Zweck: KYC-Verifizierungs-Integration
| Feature | Beschreibung |
|---|---|
| Provider | Sumsub WebSDK |
| Status-Tracking | none → pending → verified/rejected |
| Level-Anzeige | KYC-Verifizierungslevel |
API: POST /api/kyc/token
8. Website-Komponenten¶
MarketingHomepageV2¶
Datei: app/components/website/MarketingHomepageV2.tsx
Zweck: Landing Page Hero
| Sektion | Beschreibung |
|---|---|
| Hero | CTA-Button, Branding |
| Features | Feature-Liste |
| How it Works | Ablauf-Erklärung |
| FAQ | Häufige Fragen |
WebsiteHeader¶
Datei: app/components/website/WebsiteHeader.tsx
Zweck: Marketing-Navigation
| Element | Beschreibung |
|---|---|
| Logo | ChainBETs |
| Nav-Menu | Desktop-Links |
| Burger-Menu | Mobile-Toggle |
| Login/Play | CTA-Button |
WebsiteFooter¶
Datei: app/components/website/WebsiteFooter.tsx
Zweck: Footer
| Element | Beschreibung |
|---|---|
| Company | Unternehmensinformation |
| Navigation | Seitenlinks |
| Legal | AGB, Datenschutz |
| Social | Social-Media-Links |
| Copyright | Rechtehinweis |
DesktopLayout¶
Datei: app/components/website/DesktopLayout.tsx
Zweck: Multi-Pane Desktop-Layout
| Bereich | Beschreibung |
|---|---|
| Links | Navigation/Stats |
| Mitte | Seiteninhalt |
| Rechts | Persistentes Play-Sidebar |
9. Confetti-Effekte¶
Datei: lib/confettiEffects.ts
| Tier | Trigger | Effekt |
|---|---|---|
| smallWin | 4er Treffer | Grüner Burst + Jingle |
| bigWin | 5er Treffer | Multi-Color Bursts + Drum Fill |
| superJackpot | 6er Treffer | Gold-Explosion + Casino-Fanfare |
Audio: Web Audio API synthetisiert (keine externen Dateien)
Mobile-Skalierung: 50% reduzierte Partikel auf kleinen Screens
Toggle: setSound(enabled) → localStorage persistent
Weiterführende Dokumente: - 03 - Seitenstruktur - 04 - State Management - 12 - I18N