@dubsdotapp/expo 0.2.79 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.2.79",
+  "version": "0.3.0",
   "description": "React Native SDK for the Dubs betting platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/client.ts

@@ -37,6 +37,8 @@ import type {
   UiConfig,
   UFCEvent,
   UFCFighterDetail,
+  DeveloperCommissionsResult,
+  DeveloperCommissionsSummary,
 } from './types';
 
 export interface DubsClientConfig {
@@ -482,4 +484,32 @@ export class DubsClient {
     }
     return config;
   }
+
+  // ── Developer Commissions ──
+
+  /** Fetch paginated list of commission earnings for this app */
+  async getCommissions(params?: { limit?: number; offset?: number }): Promise<DeveloperCommissionsResult> {
+    const qs = new URLSearchParams();
+    if (params?.limit != null) qs.set('limit', String(params.limit));
+    if (params?.offset != null) qs.set('offset', String(params.offset));
+    const query = qs.toString();
+    const res = await this.request<{ success: true } & DeveloperCommissionsResult>(
+      'GET',
+      `/commissions${query ? `?${query}` : ''}`,
+    );
+    return {
+      commissions: res.commissions,
+      summary: res.summary,
+      pagination: res.pagination,
+    };
+  }
+
+  /** Fetch a quick summary of commission earnings for this app */
+  async getCommissionsSummary(): Promise<DeveloperCommissionsSummary> {
+    const res = await this.request<{ success: true; summary: DeveloperCommissionsSummary }>(
+      'GET',
+      '/commissions/summary',
+    );
+    return res.summary;
+  }
 }

package/src/index.ts

@@ -67,6 +67,9 @@ export type {
   UFCData,
   UFCFight,
   UFCEvent,
+  DeveloperCommission,
+  DeveloperCommissionsSummary,
+  DeveloperCommissionsResult,
 } from './types';
 
 // Provider
@@ -107,8 +110,8 @@ export type {
 } from './hooks';
 
 // UI
-export { AuthGate, ConnectWalletScreen, UserProfileCard, SettingsSheet, UserProfileSheet, useDubsTheme, mergeTheme } from './ui';
-export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, UserProfileCardProps, SettingsSheetProps, UserProfileSheetProps, DubsTheme } from './ui';
+export { AuthGate, ConnectWalletScreen, UserProfileCard, SettingsSheet, UserProfileSheet, DeveloperDashboardSheet, useDubsTheme, mergeTheme } from './ui';
+export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, UserProfileCardProps, SettingsSheetProps, UserProfileSheetProps, DeveloperDashboardSheetProps, DubsTheme } from './ui';
 
 // Game widgets
 export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton } from './ui';

package/src/types.ts

@@ -481,6 +481,59 @@ export interface UFCEvent {
   fights: UFCFight[];
 }
 
+// ── Developer Commissions ──
+
+export interface DeveloperCommission {
+  id: number;
+  gameId: string;
+  /** Commission amount in lamports */
+  amount: number;
+  /** Commission amount in SOL */
+  amountSol: number;
+  status: 'pending' | 'paid' | 'cancelled';
+  createdAt: string;
+  paidAt: string | null;
+  txSignature: string | null;
+  gameType: string;
+  /** Total pot size in lamports */
+  potSize: number;
+  /** Total pot size in SOL */
+  potSizeSol: number;
+  appId?: number;
+  appName?: string;
+}
+
+export interface DeveloperCommissionsSummary {
+  totalEarned: number;
+  totalEarnedSol: number;
+  totalPaid: number;
+  totalPaidSol: number;
+  totalPending: number;
+  totalPendingSol: number;
+  totalGames: number;
+  last7Days?: {
+    games: number;
+    earned: number;
+    earnedSol: number;
+  };
+  last30Days?: {
+    games: number;
+    earned: number;
+    earnedSol: number;
+  };
+  commissionWallet?: string;
+}
+
+export interface DeveloperCommissionsResult {
+  commissions: DeveloperCommission[];
+  summary: DeveloperCommissionsSummary;
+  pagination: {
+    total: number;
+    limit: number;
+    offset: number;
+  };
+}
+
 // ── UI Config (developer branding) ──
 
 export interface UiConfig {

package/src/ui/DeveloperDashboardSheet.tsx

@@ -0,0 +1,353 @@
+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,
+  },
+});

package/src/ui/index.ts

@@ -8,6 +8,8 @@ export { SettingsSheet } from './SettingsSheet';
 export type { SettingsSheetProps } from './SettingsSheet';
 export { UserProfileSheet } from './UserProfileSheet';
 export type { UserProfileSheetProps } from './UserProfileSheet';
+export { DeveloperDashboardSheet } from './DeveloperDashboardSheet';
+export type { DeveloperDashboardSheetProps } from './DeveloperDashboardSheet';
 export { useDubsTheme, mergeTheme } from './theme';
 export type { DubsTheme } from './theme';