@dubsdotapp/expo 0.2.55 → 0.2.56

package/package.json

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

package/src/client.ts

@@ -428,6 +428,17 @@ export class DubsClient {
     );
   }
 
+  // ── Profile ──
+
+  async updateProfile(params: { avatar?: string }): Promise<DubsUser> {
+    const res = await this.request<{ success: true; data: { user: DubsUser } }>(
+      'PATCH',
+      '/auth/profile',
+      params,
+    );
+    return res.data.user;
+  }
+
   // ── Error Utilities ──
 
   async parseError(error: unknown): Promise<ParsedError> {

package/src/index.ts

@@ -107,8 +107,8 @@ export type {
 } from './hooks';
 
 // UI
-export { AuthGate, ConnectWalletScreen, UserProfileCard, SettingsSheet, useDubsTheme, mergeTheme } from './ui';
-export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, UserProfileCardProps, SettingsSheetProps, DubsTheme } from './ui';
+export { AuthGate, ConnectWalletScreen, UserProfileCard, SettingsSheet, UserProfileSheet, useDubsTheme, mergeTheme } from './ui';
+export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, UserProfileCardProps, SettingsSheetProps, UserProfileSheetProps, DubsTheme } from './ui';
 
 // Game widgets
 export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton } from './ui';

package/src/ui/UserProfileSheet.tsx

@@ -0,0 +1,478 @@
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ActivityIndicator,
+  Modal,
+  Animated,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  Image,
+  ScrollView,
+} from 'react-native';
+import { useDubsTheme } from './theme';
+import { useDubs } from '../provider';
+import { usePushNotifications } from '../hooks/usePushNotifications';
+
+// ── Avatar Helpers ──
+
+const DICEBEAR_STYLES = [
+  'adventurer',
+  'avataaars',
+  'fun-emoji',
+  'bottts',
+  'big-smile',
+  'thumbs',
+];
+
+function generateSeed(): string {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+function getAvatarUrl(style: string, seed: string, size = 256): string {
+  return `https://api.dicebear.com/9.x/${style}/png?seed=${seed}&size=${size}`;
+}
+
+/** Parse style and seed from a DiceBear URL, or return defaults. */
+function parseAvatarUrl(url?: string | null): { style: string; seed: string } {
+  if (!url) return { style: 'adventurer', seed: generateSeed() };
+  try {
+    // URL format: https://api.dicebear.com/9.x/{style}/png?seed={seed}&size=...
+    const match = url.match(/\/9\.x\/([^/]+)\/png\?seed=([^&]+)/);
+    if (match) return { style: match[1], seed: match[2] };
+  } catch {}
+  return { style: 'adventurer', seed: generateSeed() };
+}
+
+function truncateAddress(address: string, chars = 4): string {
+  if (address.length <= chars * 2 + 3) return address;
+  return `${address.slice(0, chars)}...${address.slice(-chars)}`;
+}
+
+// ── Props ──
+
+export interface UserProfileSheetProps {
+  visible: boolean;
+  onDismiss: () => void;
+  user: {
+    walletAddress: string;
+    username?: string;
+    avatar?: string | null;
+    createdAt?: string;
+  };
+  onAvatarUpdated?: (newAvatarUrl: string) => void;
+  onDisconnect?: () => void;
+}
+
+export function UserProfileSheet({
+  visible,
+  onDismiss,
+  user,
+  onAvatarUpdated,
+  onDisconnect,
+}: UserProfileSheetProps) {
+  const t = useDubsTheme();
+  const { client } = useDubs();
+  const push = usePushNotifications();
+
+  const overlayOpacity = useRef(new Animated.Value(0)).current;
+
+  const parsed = useMemo(() => parseAvatarUrl(user.avatar), [user.avatar]);
+  const [avatarStyle, setAvatarStyle] = useState(parsed.style);
+  const [avatarSeed, setAvatarSeed] = useState(parsed.seed);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Re-sync when user prop changes
+  useEffect(() => {
+    const p = parseAvatarUrl(user.avatar);
+    setAvatarStyle(p.style);
+    setAvatarSeed(p.seed);
+  }, [user.avatar]);
+
+  // Animate overlay
+  useEffect(() => {
+    Animated.timing(overlayOpacity, {
+      toValue: visible ? 1 : 0,
+      duration: 250,
+      useNativeDriver: true,
+    }).start();
+  }, [visible, overlayOpacity]);
+
+  // Reset error when sheet opens
+  useEffect(() => {
+    if (visible) setError(null);
+  }, [visible]);
+
+  const currentAvatarUrl = getAvatarUrl(avatarStyle, avatarSeed);
+
+  const handleSelectStyle = useCallback(
+    async (style: string) => {
+      const newUrl = getAvatarUrl(style, avatarSeed);
+      setAvatarStyle(style);
+      setSaving(true);
+      setError(null);
+      try {
+        await client.updateProfile({ avatar: newUrl });
+        onAvatarUpdated?.(newUrl);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to update avatar');
+      } finally {
+        setSaving(false);
+      }
+    },
+    [avatarSeed, client, onAvatarUpdated],
+  );
+
+  const handleShuffle = useCallback(async () => {
+    const newSeed = generateSeed();
+    const newUrl = getAvatarUrl(avatarStyle, newSeed);
+    setAvatarSeed(newSeed);
+    setSaving(true);
+    setError(null);
+    try {
+      await client.updateProfile({ avatar: newUrl });
+      onAvatarUpdated?.(newUrl);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update avatar');
+    } finally {
+      setSaving(false);
+    }
+  }, [avatarStyle, client, onAvatarUpdated]);
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      transparent
+      onRequestClose={onDismiss}
+    >
+      <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
+        <TouchableOpacity style={styles.overlayTap} activeOpacity={1} onPress={onDismiss} />
+      </Animated.View>
+
+      <KeyboardAvoidingView
+        style={styles.keyboardView}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <View style={styles.sheetPositioner}>
+          <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 }]}>Profile</Text>
+              <TouchableOpacity onPress={onDismiss} activeOpacity={0.8}>
+                <Text style={[styles.closeButton, { color: t.textMuted }]}>{'\u2715'}</Text>
+              </TouchableOpacity>
+            </View>
+
+            <ScrollView
+              style={styles.scrollContent}
+              contentContainerStyle={styles.scrollContentInner}
+              showsVerticalScrollIndicator={false}
+              bounces={false}
+            >
+              {/* Avatar section */}
+              <View style={styles.avatarSection}>
+                <View style={[styles.avatarContainer, { borderColor: t.border }]}>
+                  <Image
+                    source={{ uri: currentAvatarUrl }}
+                    style={styles.avatar}
+                  />
+                  {saving && (
+                    <View style={styles.avatarLoading}>
+                      <ActivityIndicator size="small" color="#FFFFFF" />
+                    </View>
+                  )}
+                </View>
+                {user.username ? (
+                  <Text style={[styles.username, { color: t.text }]}>{user.username}</Text>
+                ) : null}
+                <Text style={[styles.walletAddress, { color: t.textMuted }]}>
+                  {truncateAddress(user.walletAddress, 6)}
+                </Text>
+              </View>
+
+              {/* Change Avatar */}
+              <View style={styles.section}>
+                <View style={styles.sectionHeaderRow}>
+                  <Text style={[styles.sectionLabel, { color: t.textSecondary }]}>
+                    Change Avatar
+                  </Text>
+                  <TouchableOpacity
+                    style={[styles.shuffleButton, { borderColor: t.border }]}
+                    onPress={handleShuffle}
+                    activeOpacity={0.7}
+                    disabled={saving}
+                  >
+                    <Text style={[styles.shuffleText, { color: t.accent }]}>Shuffle</Text>
+                  </TouchableOpacity>
+                </View>
+                <ScrollView
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  contentContainerStyle={styles.stylePickerContent}
+                >
+                  {DICEBEAR_STYLES.map((style) => {
+                    const isSelected = style === avatarStyle;
+                    return (
+                      <TouchableOpacity
+                        key={style}
+                        onPress={() => handleSelectStyle(style)}
+                        activeOpacity={0.7}
+                        disabled={saving}
+                        style={[
+                          styles.styleTile,
+                          {
+                            borderColor: isSelected ? t.accent : t.border,
+                            borderWidth: isSelected ? 2 : 1,
+                          },
+                        ]}
+                      >
+                        <Image
+                          source={{ uri: getAvatarUrl(style, avatarSeed, 80) }}
+                          style={styles.styleTileImage}
+                        />
+                      </TouchableOpacity>
+                    );
+                  })}
+                </ScrollView>
+              </View>
+
+              {/* Error */}
+              {error ? (
+                <View style={[styles.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }]}>
+                  <Text style={[styles.errorText, { color: t.errorText }]}>{error}</Text>
+                </View>
+              ) : null}
+
+              {/* Push Notifications */}
+              <View style={[styles.notifRow, { backgroundColor: t.surface, borderColor: t.border }]}>
+                <View style={styles.notifLeft}>
+                  <Text style={[styles.notifLabel, { color: t.text }]}>Push Notifications</Text>
+                  <Text
+                    style={[
+                      styles.notifStatus,
+                      { color: push.hasPermission ? t.success : t.textMuted },
+                    ]}
+                  >
+                    {push.hasPermission ? 'Enabled' : 'Disabled'}
+                  </Text>
+                </View>
+                {!push.hasPermission && (
+                  <TouchableOpacity
+                    style={[styles.enableButton, { backgroundColor: t.accent }]}
+                    onPress={push.register}
+                    disabled={push.loading}
+                    activeOpacity={0.8}
+                  >
+                    {push.loading ? (
+                      <ActivityIndicator size="small" color="#FFFFFF" />
+                    ) : (
+                      <Text style={styles.enableText}>Enable</Text>
+                    )}
+                  </TouchableOpacity>
+                )}
+              </View>
+
+              {/* Disconnect */}
+              {onDisconnect ? (
+                <TouchableOpacity
+                  style={[styles.disconnectButton, { borderColor: t.live }]}
+                  onPress={onDisconnect}
+                  activeOpacity={0.7}
+                >
+                  <Text style={[styles.disconnectText, { color: t.live }]}>Disconnect Wallet</Text>
+                </TouchableOpacity>
+              ) : null}
+            </ScrollView>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  overlayTap: {
+    flex: 1,
+  },
+  keyboardView: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  sheetPositioner: {
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    paddingHorizontal: 20,
+    paddingBottom: 40,
+    maxHeight: '85%',
+  },
+  handleRow: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingBottom: 8,
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    opacity: 0.4,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  closeButton: {
+    fontSize: 20,
+    padding: 4,
+  },
+  scrollContent: {
+    flexGrow: 0,
+  },
+  scrollContentInner: {
+    paddingBottom: 8,
+  },
+  // Avatar
+  avatarSection: {
+    alignItems: 'center',
+    paddingTop: 8,
+    paddingBottom: 20,
+    gap: 8,
+  },
+  avatarContainer: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    borderWidth: 2,
+    overflow: 'hidden',
+  },
+  avatar: {
+    width: '100%',
+    height: '100%',
+  },
+  avatarLoading: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  username: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  walletAddress: {
+    fontSize: 13,
+    fontFamily: 'monospace',
+  },
+  // Change Avatar
+  section: {
+    marginBottom: 20,
+    gap: 12,
+  },
+  sectionHeaderRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  sectionLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  shuffleButton: {
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  shuffleText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  stylePickerContent: {
+    gap: 10,
+  },
+  styleTile: {
+    width: 72,
+    height: 72,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  styleTileImage: {
+    width: '100%',
+    height: '100%',
+  },
+  // Error
+  errorBox: {
+    marginBottom: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 12,
+  },
+  errorText: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  // Push Notifications
+  notifRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: 16,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    marginBottom: 16,
+  },
+  notifLeft: {
+    gap: 2,
+  },
+  notifLabel: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  notifStatus: {
+    fontSize: 13,
+  },
+  enableButton: {
+    paddingHorizontal: 18,
+    paddingVertical: 10,
+    borderRadius: 12,
+  },
+  enableText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  // Disconnect
+  disconnectButton: {
+    height: 52,
+    borderRadius: 16,
+    borderWidth: 1.5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  disconnectText: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});

package/src/ui/index.ts

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