@dubsdotapp/expo 0.2.75 → 0.2.77

package/package.json

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

package/src/hooks/useAuth.ts

@@ -5,6 +5,7 @@ import { AuthContext } from '../auth-context';
 import { useDisconnect } from '../managed-wallet';
 import { getDeviceInfo } from '../utils/device';
 import type { AuthStatus, DubsUser } from '../types';
+import { ensurePngAvatar } from '../utils/avatarUrl';
 
 export interface UseAuthResult {
   /** Current auth status */
@@ -66,6 +67,11 @@ export function useAuth(): UseAuthResult {
     deviceInfo?: import('../utils/device').DeviceInfo;
   } | null>(null);
 
+  const normalizeUser = (u: DubsUser): DubsUser => ({
+    ...u,
+    avatar: ensurePngAvatar(u.avatar) ?? u.avatar,
+  });
+
   const reset = useCallback(() => {
     setStatus('idle');
     setUser(null);
@@ -115,7 +121,7 @@ export function useAuth(): UseAuthResult {
       }
 
       // Existing user — fully authenticated
-      setUser(result.user!);
+      setUser(normalizeUser(result.user!));
       setToken(result.token!);
       setStatus('authenticated');
     } catch (err) {
@@ -158,7 +164,7 @@ export function useAuth(): UseAuthResult {
       const user = avatarUrl && !result.user.avatar
         ? { ...result.user, avatar: avatarUrl }
         : result.user;
-      setUser(user);
+      setUser(normalizeUser(user));
       setToken(result.token);
       setStatus('authenticated');
     } catch (err) {
@@ -184,7 +190,7 @@ export function useAuth(): UseAuthResult {
     try {
       client.setToken(savedToken);
       const me = await client.getMe();
-      setUser(me);
+      setUser(normalizeUser(me));
       setToken(savedToken);
       setStatus('authenticated');
       return true;
@@ -200,7 +206,7 @@ export function useAuth(): UseAuthResult {
   const refreshUser = useCallback(async () => {
     try {
       const me = await client.getMe();
-      setUser(me);
+      setUser(normalizeUser(me));
     } catch {
       // Silent failure — keep existing user state
     }

package/src/ui/AuthGate.tsx

@@ -32,12 +32,17 @@ const DICEBEAR_STYLES = [
   'thumbs',
 ];
 
+const BG_COLORS = [
+  '1a1a2e', 'f43f5e', 'f97316', 'eab308', '22c55e',
+  '3b82f6', '8b5cf6', 'ec4899', '06b6d4', '64748b',
+];
+
 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}`;
+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}`;
 }
 
 // ── Public Types ──
@@ -295,6 +300,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 +312,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 +389,33 @@ 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>
+          <>
+            <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, avatarBg, 80) }} style={s.styleThumb} />
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+            <Text style={[s.subtitle, { color: t.textMuted, marginTop: 8 }]}>Background Color</Text>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} style={s.styleScroll}>
+              {BG_COLORS.map((color) => (
+                <TouchableOpacity
+                  key={color}
+                  onPress={() => setAvatarBg(color)}
+                  style={[
+                    s.colorSwatch,
+                    { backgroundColor: `#${color}` },
+                    color === avatarBg && { borderColor: accent, borderWidth: 2.5 },
+                  ]}
+                />
+              ))}
+            </ScrollView>
+          </>
         )}
       </View>
 
@@ -755,6 +777,7 @@ const s = StyleSheet.create({
   styleScroll: { paddingHorizontal: 24, marginTop: 4 },
   styleThumbWrap: { borderWidth: 2, borderRadius: 12, padding: 3, marginRight: 10 },
   styleThumb: { width: 52, height: 52, borderRadius: 10, backgroundColor: '#E5E5EA' },
+  colorSwatch: { width: 32, height: 32, borderRadius: 16, borderWidth: 1.5, borderColor: 'rgba(255,255,255,0.15)', marginRight: 10 },
   // Input
   inputGroup: { paddingHorizontal: 24, gap: 6 },
   inputLabel: { fontSize: 15, fontWeight: '600' },

package/src/ui/UserProfileSheet.tsx

@@ -29,23 +29,30 @@ const DICEBEAR_STYLES = [
   'thumbs',
 ];
 
+const BG_COLORS = [
+  '1a1a2e', 'f43f5e', 'f97316', 'eab308', '22c55e',
+  '3b82f6', '8b5cf6', 'ec4899', '06b6d4', '64748b',
+];
+
 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}`;
+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}`;
 }
 
-/** 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() };
+/** Parse style, seed, and backgroundColor from a DiceBear URL, or return defaults. */
+function parseAvatarUrl(url?: string | null): { style: string; seed: string; bg: string } {
+  if (!url) return { style: 'adventurer', seed: generateSeed(), bg: '1a1a2e' };
   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] };
+    if (match) {
+      const bgMatch = url.match(/backgroundColor=([^&]+)/);
+      return { style: match[1], seed: match[2], bg: bgMatch?.[1] || '1a1a2e' };
+    }
   } catch {}
-  return { style: 'adventurer', seed: generateSeed() };
+  return { style: 'adventurer', seed: generateSeed(), bg: '1a1a2e' };
 }
 
 function truncateAddress(address: string, chars = 4): string {
@@ -84,6 +91,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 +100,7 @@ export function UserProfileSheet({
     const p = parseAvatarUrl(user.avatar);
     setAvatarStyle(p.style);
     setAvatarSeed(p.seed);
+    setBgColor(p.bg);
   }, [user.avatar]);
 
   // Animate overlay
@@ -108,30 +117,9 @@ export function UserProfileSheet({
     if (visible) setError(null);
   }, [visible]);
 
-  const currentAvatarUrl = getAvatarUrl(avatarStyle, avatarSeed);
+  const currentAvatarUrl = getAvatarUrl(avatarStyle, avatarSeed, bgColor);
 
-  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);
+  const saveAvatar = useCallback(async (newUrl: string) => {
     setSaving(true);
     setError(null);
     try {
@@ -142,7 +130,29 @@ export function UserProfileSheet({
     } finally {
       setSaving(false);
     }
-  }, [avatarStyle, client, onAvatarUpdated]);
+  }, [client, onAvatarUpdated]);
+
+  const handleSelectStyle = 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 handleSelectBgColor = useCallback(
+    (color: string) => {
+      setBgColor(color);
+      saveAvatar(getAvatarUrl(avatarStyle, avatarSeed, color));
+    },
+    [avatarStyle, avatarSeed, saveAvatar],
+  );
 
   return (
     <Modal
@@ -238,13 +248,40 @@ export function UserProfileSheet({
                         ]}
                       >
                         <Image
-                          source={{ uri: getAvatarUrl(style, avatarSeed, 80) }}
+                          source={{ uri: getAvatarUrl(style, avatarSeed, bgColor, 80) }}
                           style={styles.styleTileImage}
                         />
                       </TouchableOpacity>
                     );
                   })}
                 </ScrollView>
+
+                {/* Background color picker */}
+                <Text style={[styles.sectionLabel, { color: t.textSecondary, marginTop: 4 }]}>
+                  Background Color
+                </Text>
+                <ScrollView
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  contentContainerStyle={styles.colorPickerContent}
+                >
+                  {BG_COLORS.map((color) => {
+                    const isSelected = color === bgColor;
+                    return (
+                      <TouchableOpacity
+                        key={color}
+                        onPress={() => handleSelectBgColor(color)}
+                        activeOpacity={0.7}
+                        disabled={saving}
+                        style={[
+                          styles.colorSwatch,
+                          { backgroundColor: `#${color}` },
+                          isSelected && { borderColor: t.accent, borderWidth: 2.5 },
+                        ]}
+                      />
+                    );
+                  })}
+                </ScrollView>
               </View>
 
               {/* Error */}
@@ -423,6 +460,16 @@ const styles = StyleSheet.create({
   stylePickerContent: {
     gap: 10,
   },
+  colorPickerContent: {
+    gap: 8,
+  },
+  colorSwatch: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    borderWidth: 1.5,
+    borderColor: 'rgba(255,255,255,0.15)',
+  },
   styleTile: {
     width: 72,
     height: 72,