@dubsdotapp/expo 0.3.0 → 0.3.2

package/src/ui/DeveloperDashboardSheet.tsx

@@ -1,353 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  ActivityIndicator,
-  Animated,
-  FlatList,
-  KeyboardAvoidingView,
-  Modal,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import type { DeveloperCommission, DeveloperCommissionsSummary } from '../types';
-import { useDubs } from '../provider';
-import { useDubsTheme } from './theme';
-
-export interface DeveloperDashboardSheetProps {
-  visible: boolean;
-  onDismiss: () => void;
-}
-
-export function DeveloperDashboardSheet({ visible, onDismiss }: DeveloperDashboardSheetProps) {
-  const t = useDubsTheme();
-  const { client } = useDubs();
-
-  const [summary, setSummary] = useState<DeveloperCommissionsSummary | null>(null);
-  const [commissions, setCommissions] = useState<DeveloperCommission[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const overlayOpacity = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.timing(overlayOpacity, {
-      toValue: visible ? 1 : 0,
-      duration: 250,
-      useNativeDriver: true,
-    }).start();
-  }, [visible, overlayOpacity]);
-
-  const fetchData = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await client.getCommissions({ limit: 50 });
-      setCommissions(result.commissions);
-      setSummary(result.summary);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load commissions');
-    } finally {
-      setLoading(false);
-    }
-  }, [client]);
-
-  useEffect(() => {
-    if (visible) fetchData();
-  }, [visible, fetchData]);
-
-  const formatSol = (sol: number) => {
-    if (sol === 0) return '0';
-    if (sol < 0.001) return '<0.001';
-    return sol.toFixed(3);
-  };
-
-  const renderCommission = ({ item }: { item: DeveloperCommission }) => (
-    <View style={[styles.row, { backgroundColor: t.surface, borderColor: t.border }]}>
-      <View style={styles.rowTop}>
-        <Text style={[styles.rowGameId, { color: t.text }]} numberOfLines={1}>
-          {item.gameId.slice(0, 16)}...
-        </Text>
-        <Text style={[styles.rowAmount, { color: t.success }]}>
-          +{formatSol(item.amountSol)} SOL
-        </Text>
-      </View>
-      <View style={styles.rowBottom}>
-        <Text style={[styles.rowMeta, { color: t.textMuted }]}>
-          {item.gameType || 'game'} | pot {formatSol(item.potSizeSol)} SOL
-        </Text>
-        <View style={[
-          styles.statusBadge,
-          { backgroundColor: item.status === 'paid' ? t.success + '22' : t.accent + '22' },
-        ]}>
-          <Text style={[
-            styles.statusText,
-            { color: item.status === 'paid' ? t.success : t.accent },
-          ]}>
-            {item.status}
-          </Text>
-        </View>
-      </View>
-      <Text style={[styles.rowDate, { color: t.textDim }]}>
-        {new Date(item.createdAt).toLocaleDateString()}
-      </Text>
-    </View>
-  );
-
-  return (
-    <Modal visible={visible} animationType="slide" transparent onRequestClose={onDismiss}>
-      <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]} />
-      <KeyboardAvoidingView
-        style={styles.flex}
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-      >
-        <View style={styles.flex} />
-        <View style={[styles.sheet, { backgroundColor: t.background }]}>
-          {/* Drag handle */}
-          <View style={styles.handleRow}>
-            <View style={[styles.handle, { backgroundColor: t.textMuted }]} />
-          </View>
-
-          {/* Header */}
-          <View style={styles.header}>
-            <Text style={[styles.headerTitle, { color: t.text }]}>Commission Earnings</Text>
-            <TouchableOpacity onPress={onDismiss} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}>
-              <Text style={[styles.closeButton, { color: t.textMuted }]}>{'\u2715'}</Text>
-            </TouchableOpacity>
-          </View>
-
-          {/* Summary cards */}
-          {summary && (
-            <View style={styles.summaryRow}>
-              <View style={[styles.summaryCard, { backgroundColor: t.surface }]}>
-                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Total Earned</Text>
-                <Text style={[styles.summaryValue, { color: t.success }]}>
-                  {formatSol(summary.totalEarnedSol)} SOL
-                </Text>
-              </View>
-              <View style={[styles.summaryCard, { backgroundColor: t.surface }]}>
-                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Games</Text>
-                <Text style={[styles.summaryValue, { color: t.text }]}>
-                  {summary.totalGames}
-                </Text>
-              </View>
-              <View style={[styles.summaryCard, { backgroundColor: t.surface }]}>
-                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Paid</Text>
-                <Text style={[styles.summaryValue, { color: t.accent }]}>
-                  {formatSol(summary.totalPaidSol)} SOL
-                </Text>
-              </View>
-            </View>
-          )}
-
-          {summary?.commissionWallet && (
-            <View style={[styles.walletRow, { backgroundColor: t.surface, borderColor: t.border }]}>
-              <Text style={[styles.walletLabel, { color: t.textMuted }]}>Commission Wallet</Text>
-              <Text style={[styles.walletAddress, { color: t.textSecondary }]} numberOfLines={1}>
-                {summary.commissionWallet}
-              </Text>
-            </View>
-          )}
-
-          {/* Content */}
-          {loading && !commissions.length ? (
-            <View style={styles.centered}>
-              <ActivityIndicator size="large" color={t.accent} />
-            </View>
-          ) : error ? (
-            <View style={[styles.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }]}>
-              <Text style={[styles.errorText, { color: t.errorText }]}>{error}</Text>
-              <TouchableOpacity onPress={fetchData} style={[styles.retryButton, { borderColor: t.errorBorder }]}>
-                <Text style={[styles.retryText, { color: t.errorText }]}>Retry</Text>
-              </TouchableOpacity>
-            </View>
-          ) : commissions.length === 0 ? (
-            <View style={styles.centered}>
-              <Text style={[styles.emptyTitle, { color: t.textMuted }]}>No commissions yet</Text>
-              <Text style={[styles.emptySubtitle, { color: t.textDim }]}>
-                When games created through your app are resolved, your 1% commission will appear here.
-              </Text>
-            </View>
-          ) : (
-            <FlatList
-              data={commissions}
-              keyExtractor={(item) => String(item.id)}
-              renderItem={renderCommission}
-              contentContainerStyle={styles.listContent}
-              showsVerticalScrollIndicator={false}
-            />
-          )}
-        </View>
-      </KeyboardAvoidingView>
-    </Modal>
-  );
-}
-
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  sheet: {
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    maxHeight: '85%',
-    minHeight: 400,
-    paddingBottom: 34,
-  },
-  handleRow: {
-    alignItems: 'center',
-    paddingTop: 10,
-    paddingBottom: 6,
-  },
-  handle: {
-    width: 36,
-    height: 4,
-    borderRadius: 2,
-    opacity: 0.4,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 20,
-    paddingVertical: 12,
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '700',
-  },
-  closeButton: {
-    fontSize: 18,
-    fontWeight: '600',
-  },
-  summaryRow: {
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    gap: 8,
-    marginBottom: 12,
-  },
-  summaryCard: {
-    flex: 1,
-    borderRadius: 12,
-    padding: 12,
-    alignItems: 'center',
-  },
-  summaryLabel: {
-    fontSize: 11,
-    fontWeight: '600',
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
-    marginBottom: 4,
-  },
-  summaryValue: {
-    fontSize: 16,
-    fontWeight: '700',
-  },
-  walletRow: {
-    marginHorizontal: 16,
-    borderRadius: 10,
-    borderWidth: 1,
-    padding: 10,
-    marginBottom: 12,
-  },
-  walletLabel: {
-    fontSize: 11,
-    fontWeight: '600',
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
-    marginBottom: 2,
-  },
-  walletAddress: {
-    fontSize: 12,
-    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 32,
-    paddingVertical: 48,
-  },
-  emptyTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 8,
-  },
-  emptySubtitle: {
-    fontSize: 13,
-    textAlign: 'center',
-    lineHeight: 18,
-  },
-  errorBox: {
-    margin: 16,
-    borderRadius: 10,
-    borderWidth: 1,
-    padding: 16,
-    alignItems: 'center',
-  },
-  errorText: {
-    fontSize: 14,
-    marginBottom: 12,
-  },
-  retryButton: {
-    borderWidth: 1,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 6,
-  },
-  retryText: {
-    fontSize: 13,
-    fontWeight: '600',
-  },
-  listContent: {
-    paddingHorizontal: 16,
-    paddingBottom: 16,
-  },
-  row: {
-    borderRadius: 12,
-    borderWidth: 1,
-    padding: 12,
-    marginBottom: 8,
-  },
-  rowTop: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 4,
-  },
-  rowGameId: {
-    fontSize: 14,
-    fontWeight: '600',
-    flex: 1,
-    marginRight: 8,
-  },
-  rowAmount: {
-    fontSize: 14,
-    fontWeight: '700',
-  },
-  rowBottom: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 2,
-  },
-  rowMeta: {
-    fontSize: 12,
-  },
-  statusBadge: {
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-  },
-  statusText: {
-    fontSize: 11,
-    fontWeight: '600',
-    textTransform: 'uppercase',
-  },
-  rowDate: {
-    fontSize: 11,
-  },
-});