@dubsdotapp/expo 0.2.76 → 0.2.78

package/package.json

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

package/src/ui/AuthGate.tsx

@@ -18,28 +18,10 @@ import { usePushNotifications } from '../hooks/usePushNotifications';
 import { useDubs } from '../provider';
 import { AuthContext } from '../auth-context';
 import { useDubsTheme } from './theme';
+import { AvatarEditor, generateSeed, getAvatarUrl } from './AvatarEditor';
 import type { AuthStatus } from '../types';
 import type { DubsClient } from '../client';
 
-// ── 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}`;
-}
-
 // ── Public Types ──
 
 export interface RegistrationScreenProps {
@@ -295,6 +277,7 @@ function DefaultRegistrationScreen({
   const [step, setStep] = useState(0);
   const [avatarSeed, setAvatarSeed] = useState(generateSeed);
   const [avatarStyle, setAvatarStyle] = useState('adventurer');
+  const [avatarBg, setAvatarBg] = useState('1a1a2e');
   const [showStyles, setShowStyles] = useState(false);
   const [username, setUsername] = useState('');
   const [referralCode, setReferralCode] = useState('');
@@ -306,7 +289,7 @@ function DefaultRegistrationScreen({
   const fadeAnim = useRef(new Animated.Value(1)).current;
   const slideAnim = useRef(new Animated.Value(0)).current;
 
-  const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed);
+  const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed, avatarBg);
 
   // Debounced username check
   useEffect(() => {
@@ -383,17 +366,17 @@ function DefaultRegistrationScreen({
         </View>
 
         {showStyles && (
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={s.styleScroll}>
-            {DICEBEAR_STYLES.map((st) => (
-              <TouchableOpacity
-                key={st}
-                onPress={() => setAvatarStyle(st)}
-                style={[s.styleThumbWrap, { borderColor: st === avatarStyle ? accent : t.border }]}
-              >
-                <Image source={{ uri: getAvatarUrl(st, avatarSeed, 80) }} style={s.styleThumb} />
-              </TouchableOpacity>
-            ))}
-          </ScrollView>
+          <View style={s.styleScroll}>
+            <AvatarEditor
+              style={avatarStyle}
+              seed={avatarSeed}
+              bg={avatarBg}
+              onStyleChange={setAvatarStyle}
+              onSeedChange={setAvatarSeed}
+              onBgChange={setAvatarBg}
+              accentColor={accent}
+            />
+          </View>
         )}
       </View>
 

package/src/ui/AvatarEditor.tsx

@@ -0,0 +1,159 @@
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+  StyleSheet,
+} from 'react-native';
+import { useDubsTheme } from './theme';
+
+const DICEBEAR_STYLES = [
+  'adventurer',
+  'avataaars',
+  'fun-emoji',
+  'bottts',
+  'big-smile',
+  'thumbs',
+];
+
+const BG_COLORS = [
+  '1a1a2e', 'f43f5e', 'f97316', 'eab308', '22c55e',
+  '3b82f6', '8b5cf6', 'ec4899', '06b6d4', '64748b',
+];
+
+export function generateSeed(): string {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+export function getAvatarUrl(style: string, seed: string, bg = '1a1a2e', size = 256): string {
+  return `https://api.dicebear.com/9.x/${style}/png?seed=${seed}&backgroundColor=${bg}&size=${size}`;
+}
+
+export function parseAvatarUrl(url?: string | null): { style: string; seed: string; bg: string } {
+  if (!url) return { style: 'adventurer', seed: generateSeed(), bg: '1a1a2e' };
+  try {
+    const match = url.match(/\/\d+\.x\/([^/]+)\/(?:png|svg)\?seed=([^&]+)/);
+    if (match) {
+      const bgMatch = url.match(/backgroundColor=([^&]+)/);
+      return { style: match[1], seed: match[2], bg: bgMatch?.[1] || '1a1a2e' };
+    }
+  } catch {}
+  return { style: 'adventurer', seed: generateSeed(), bg: '1a1a2e' };
+}
+
+export interface AvatarEditorProps {
+  style: string;
+  seed: string;
+  bg: string;
+  onStyleChange: (style: string) => void;
+  onSeedChange: (seed: string) => void;
+  onBgChange: (bg: string) => void;
+  disabled?: boolean;
+  accentColor?: string;
+}
+
+export function AvatarEditor({
+  style: avatarStyle,
+  seed: avatarSeed,
+  bg: bgColor,
+  onStyleChange,
+  onSeedChange,
+  onBgChange,
+  disabled = false,
+  accentColor,
+}: AvatarEditorProps) {
+  const t = useDubsTheme();
+  const accent = accentColor || t.accent;
+
+  return (
+    <View style={styles.container}>
+      {/* Style picker */}
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.row}
+      >
+        {DICEBEAR_STYLES.map((st) => {
+          const isSelected = st === avatarStyle;
+          return (
+            <TouchableOpacity
+              key={st}
+              onPress={() => onStyleChange(st)}
+              activeOpacity={0.7}
+              disabled={disabled}
+              style={[
+                styles.styleTile,
+                {
+                  borderColor: isSelected ? accent : t.border,
+                  borderWidth: isSelected ? 2 : 1,
+                },
+              ]}
+            >
+              <Image
+                source={{ uri: getAvatarUrl(st, avatarSeed, bgColor, 80) }}
+                style={styles.styleTileImage}
+              />
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+
+      {/* Background color picker */}
+      <Text style={[styles.label, { color: t.textSecondary }]}>Background Color</Text>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.row}
+      >
+        {BG_COLORS.map((color) => {
+          const isSelected = color === bgColor;
+          return (
+            <TouchableOpacity
+              key={color}
+              onPress={() => onBgChange(color)}
+              activeOpacity={0.7}
+              disabled={disabled}
+              style={[
+                styles.colorSwatch,
+                { backgroundColor: `#${color}` },
+                isSelected && { borderColor: accent, borderWidth: 2.5 },
+              ]}
+            />
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 10,
+  },
+  row: {
+    gap: 10,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  styleTile: {
+    width: 72,
+    height: 72,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  styleTileImage: {
+    width: '100%',
+    height: '100%',
+  },
+  colorSwatch: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    borderWidth: 1.5,
+    borderColor: 'rgba(255,255,255,0.15)',
+  },
+});

package/src/ui/UserProfileSheet.tsx

@@ -16,37 +16,7 @@ import {
 import { useDubsTheme } from './theme';
 import { useDubs } from '../provider';
 import { usePushNotifications } from '../hooks/usePushNotifications';
-import { ensurePngAvatar } from '../utils/avatarUrl';
-
-// ── 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 {
-    // Match both png and svg formats, any API version (7.x, 9.x, etc.)
-    const match = url.match(/\/\d+\.x\/([^/]+)\/(?:png|svg)\?seed=([^&]+)/);
-    if (match) return { style: match[1], seed: match[2] };
-  } catch {}
-  return { style: 'adventurer', seed: generateSeed() };
-}
+import { AvatarEditor, getAvatarUrl, generateSeed, parseAvatarUrl } from './AvatarEditor';
 
 function truncateAddress(address: string, chars = 4): string {
   if (address.length <= chars * 2 + 3) return address;
@@ -84,6 +54,7 @@ export function UserProfileSheet({
   const parsed = useMemo(() => parseAvatarUrl(user.avatar), [user.avatar]);
   const [avatarStyle, setAvatarStyle] = useState(parsed.style);
   const [avatarSeed, setAvatarSeed] = useState(parsed.seed);
+  const [bgColor, setBgColor] = useState(parsed.bg);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -92,6 +63,7 @@ export function UserProfileSheet({
     const p = parseAvatarUrl(user.avatar);
     setAvatarStyle(p.style);
     setAvatarSeed(p.seed);
+    setBgColor(p.bg);
   }, [user.avatar]);
 
   // Animate overlay
@@ -108,30 +80,9 @@ export function UserProfileSheet({
     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 currentAvatarUrl = getAvatarUrl(avatarStyle, avatarSeed, bgColor);
 
-  const handleShuffle = useCallback(async () => {
-    const newSeed = generateSeed();
-    const newUrl = getAvatarUrl(avatarStyle, newSeed);
-    setAvatarSeed(newSeed);
+  const saveAvatar = useCallback(async (newUrl: string) => {
     setSaving(true);
     setError(null);
     try {
@@ -142,7 +93,23 @@ export function UserProfileSheet({
     } finally {
       setSaving(false);
     }
-  }, [avatarStyle, client, onAvatarUpdated]);
+  }, [client, onAvatarUpdated]);
+
+  const handleStyleChange = useCallback((style: string) => {
+    setAvatarStyle(style);
+    saveAvatar(getAvatarUrl(style, avatarSeed, bgColor));
+  }, [avatarSeed, bgColor, saveAvatar]);
+
+  const handleShuffle = useCallback(() => {
+    const newSeed = generateSeed();
+    setAvatarSeed(newSeed);
+    saveAvatar(getAvatarUrl(avatarStyle, newSeed, bgColor));
+  }, [avatarStyle, bgColor, saveAvatar]);
+
+  const handleBgChange = useCallback((color: string) => {
+    setBgColor(color);
+    saveAvatar(getAvatarUrl(avatarStyle, avatarSeed, color));
+  }, [avatarStyle, avatarSeed, saveAvatar]);
 
   return (
     <Modal
@@ -216,35 +183,15 @@ export function UserProfileSheet({
                     <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>
+                <AvatarEditor
+                  style={avatarStyle}
+                  seed={avatarSeed}
+                  bg={bgColor}
+                  onStyleChange={handleStyleChange}
+                  onSeedChange={setAvatarSeed}
+                  onBgChange={handleBgChange}
+                  disabled={saving}
+                />
               </View>
 
               {/* Error */}
@@ -363,7 +310,6 @@ const styles = StyleSheet.create({
   scrollContentInner: {
     paddingBottom: 8,
   },
-  // Avatar
   avatarSection: {
     alignItems: 'center',
     paddingTop: 8,
@@ -380,7 +326,6 @@ const styles = StyleSheet.create({
   avatar: {
     width: '100%',
     height: '100%',
-    backgroundColor: '#1a1a2e',
   },
   avatarLoading: {
     ...StyleSheet.absoluteFillObject,
@@ -396,7 +341,6 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontFamily: 'monospace',
   },
-  // Change Avatar
   section: {
     marginBottom: 20,
     gap: 12,
@@ -420,21 +364,6 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '600',
   },
-  stylePickerContent: {
-    gap: 10,
-  },
-  styleTile: {
-    width: 72,
-    height: 72,
-    borderRadius: 16,
-    overflow: 'hidden',
-  },
-  styleTileImage: {
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#1a1a2e',
-  },
-  // Error
   errorBox: {
     marginBottom: 16,
     borderRadius: 12,
@@ -445,7 +374,6 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '500',
   },
-  // Push Notifications
   notifRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -476,7 +404,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '700',
   },
-  // Disconnect
   disconnectButton: {
     height: 52,
     borderRadius: 16,