@dubsdotapp/expo 0.2.77 → 0.2.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.2.77",
+  "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,33 +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',
-];
-
-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, bg = '1a1a2e', size = 256): string {
-  return `https://api.dicebear.com/9.x/${style}/png?seed=${seed}&backgroundColor=${bg}&size=${size}`;
-}
-
 // ── Public Types ──
 
 export interface RegistrationScreenProps {
@@ -389,33 +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, 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 style={s.styleScroll}>
+            <AvatarEditor
+              style={avatarStyle}
+              seed={avatarSeed}
+              bg={avatarBg}
+              onStyleChange={setAvatarStyle}
+              onSeedChange={setAvatarSeed}
+              onBgChange={setAvatarBg}
+              accentColor={accent}
+            />
+          </View>
         )}
       </View>
 
@@ -777,7 +738,6 @@ 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/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,44 +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',
-];
-
-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, bg = '1a1a2e', size = 256): string {
-  return `https://api.dicebear.com/9.x/${style}/png?seed=${seed}&backgroundColor=${bg}&size=${size}`;
-}
-
-/** 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 {
-    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' };
-}
+import { AvatarEditor, getAvatarUrl, generateSeed, parseAvatarUrl } from './AvatarEditor';
 
 function truncateAddress(address: string, chars = 4): string {
   if (address.length <= chars * 2 + 3) return address;
@@ -132,13 +95,10 @@ export function UserProfileSheet({
     }
   }, [client, onAvatarUpdated]);
 
-  const handleSelectStyle = useCallback(
-    (style: string) => {
-      setAvatarStyle(style);
-      saveAvatar(getAvatarUrl(style, avatarSeed, bgColor));
-    },
-    [avatarSeed, bgColor, saveAvatar],
-  );
+  const handleStyleChange = useCallback((style: string) => {
+    setAvatarStyle(style);
+    saveAvatar(getAvatarUrl(style, avatarSeed, bgColor));
+  }, [avatarSeed, bgColor, saveAvatar]);
 
   const handleShuffle = useCallback(() => {
     const newSeed = generateSeed();
@@ -146,13 +106,10 @@ export function UserProfileSheet({
     saveAvatar(getAvatarUrl(avatarStyle, newSeed, bgColor));
   }, [avatarStyle, bgColor, saveAvatar]);
 
-  const handleSelectBgColor = useCallback(
-    (color: string) => {
-      setBgColor(color);
-      saveAvatar(getAvatarUrl(avatarStyle, avatarSeed, color));
-    },
-    [avatarStyle, avatarSeed, saveAvatar],
-  );
+  const handleBgChange = useCallback((color: string) => {
+    setBgColor(color);
+    saveAvatar(getAvatarUrl(avatarStyle, avatarSeed, color));
+  }, [avatarStyle, avatarSeed, saveAvatar]);
 
   return (
     <Modal
@@ -226,62 +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, 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>
+                <AvatarEditor
+                  style={avatarStyle}
+                  seed={avatarSeed}
+                  bg={bgColor}
+                  onStyleChange={handleStyleChange}
+                  onSeedChange={setAvatarSeed}
+                  onBgChange={handleBgChange}
+                  disabled={saving}
+                />
               </View>
 
               {/* Error */}
@@ -400,7 +310,6 @@ const styles = StyleSheet.create({
   scrollContentInner: {
     paddingBottom: 8,
   },
-  // Avatar
   avatarSection: {
     alignItems: 'center',
     paddingTop: 8,
@@ -417,7 +326,6 @@ const styles = StyleSheet.create({
   avatar: {
     width: '100%',
     height: '100%',
-    backgroundColor: '#1a1a2e',
   },
   avatarLoading: {
     ...StyleSheet.absoluteFillObject,
@@ -433,7 +341,6 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontFamily: 'monospace',
   },
-  // Change Avatar
   section: {
     marginBottom: 20,
     gap: 12,
@@ -457,31 +364,6 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '600',
   },
-  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,
-    borderRadius: 16,
-    overflow: 'hidden',
-  },
-  styleTileImage: {
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#1a1a2e',
-  },
-  // Error
   errorBox: {
     marginBottom: 16,
     borderRadius: 12,
@@ -492,7 +374,6 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '500',
   },
-  // Push Notifications
   notifRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -523,7 +404,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '700',
   },
-  // Disconnect
   disconnectButton: {
     height: 52,
     borderRadius: 16,