@dubsdotapp/expo 0.2.76 → 0.2.77

package/dist/index.mjs

@@ -2481,11 +2481,23 @@ var DICEBEAR_STYLES = [
   "big-smile",
   "thumbs"
 ];
+var BG_COLORS = [
+  "1a1a2e",
+  "f43f5e",
+  "f97316",
+  "eab308",
+  "22c55e",
+  "3b82f6",
+  "8b5cf6",
+  "ec4899",
+  "06b6d4",
+  "64748b"
+];
 function generateSeed() {
   return Math.random().toString(36).slice(2, 10);
 }
-function getAvatarUrl(style, seed, size = 256) {
-  return `https://api.dicebear.com/9.x/${style}/png?seed=${seed}&size=${size}`;
+function getAvatarUrl(style, seed, bg = "1a1a2e", size = 256) {
+  return `https://api.dicebear.com/9.x/${style}/png?seed=${seed}&backgroundColor=${bg}&size=${size}`;
 }
 function AuthGate({
   children,
@@ -2665,6 +2677,7 @@ function DefaultRegistrationScreen({
   const [step, setStep] = useState15(0);
   const [avatarSeed, setAvatarSeed] = useState15(generateSeed);
   const [avatarStyle, setAvatarStyle] = useState15("adventurer");
+  const [avatarBg, setAvatarBg] = useState15("1a1a2e");
   const [showStyles, setShowStyles] = useState15(false);
   const [username, setUsername] = useState15("");
   const [referralCode, setReferralCode] = useState15("");
@@ -2673,7 +2686,7 @@ function DefaultRegistrationScreen({
   const debounceRef = useRef4(null);
   const fadeAnim = useRef4(new Animated.Value(1)).current;
   const slideAnim = useRef4(new Animated.Value(0)).current;
-  const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed);
+  const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed, avatarBg);
   useEffect10(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     const trimmed = username.trim();
@@ -2746,15 +2759,30 @@ function DefaultRegistrationScreen({
           }
         )
       ] }),
-      showStyles && /* @__PURE__ */ jsx3(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: s.styleScroll, children: DICEBEAR_STYLES.map((st) => /* @__PURE__ */ jsx3(
-        TouchableOpacity2,
-        {
-          onPress: () => setAvatarStyle(st),
-          style: [s.styleThumbWrap, { borderColor: st === avatarStyle ? accent : t.border }],
-          children: /* @__PURE__ */ jsx3(Image2, { source: { uri: getAvatarUrl(st, avatarSeed, 80) }, style: s.styleThumb })
-        },
-        st
-      )) })
+      showStyles && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: s.styleScroll, children: DICEBEAR_STYLES.map((st) => /* @__PURE__ */ jsx3(
+          TouchableOpacity2,
+          {
+            onPress: () => setAvatarStyle(st),
+            style: [s.styleThumbWrap, { borderColor: st === avatarStyle ? accent : t.border }],
+            children: /* @__PURE__ */ jsx3(Image2, { source: { uri: getAvatarUrl(st, avatarSeed, avatarBg, 80) }, style: s.styleThumb })
+          },
+          st
+        )) }),
+        /* @__PURE__ */ jsx3(Text2, { style: [s.subtitle, { color: t.textMuted, marginTop: 8 }], children: "Background Color" }),
+        /* @__PURE__ */ jsx3(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: s.styleScroll, children: BG_COLORS.map((color) => /* @__PURE__ */ jsx3(
+          TouchableOpacity2,
+          {
+            onPress: () => setAvatarBg(color),
+            style: [
+              s.colorSwatch,
+              { backgroundColor: `#${color}` },
+              color === avatarBg && { borderColor: accent, borderWidth: 2.5 }
+            ]
+          },
+          color
+        )) })
+      ] })
     ] }),
     /* @__PURE__ */ jsx3(View2, { style: s.bottomRow, children: /* @__PURE__ */ jsx3(
       TouchableOpacity2,
@@ -3065,6 +3093,7 @@ var s = StyleSheet2.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" },
@@ -3533,20 +3562,35 @@ var DICEBEAR_STYLES2 = [
   "big-smile",
   "thumbs"
 ];
+var BG_COLORS2 = [
+  "1a1a2e",
+  "f43f5e",
+  "f97316",
+  "eab308",
+  "22c55e",
+  "3b82f6",
+  "8b5cf6",
+  "ec4899",
+  "06b6d4",
+  "64748b"
+];
 function generateSeed2() {
   return Math.random().toString(36).slice(2, 10);
 }
-function getAvatarUrl2(style, seed, size = 256) {
-  return `https://api.dicebear.com/9.x/${style}/png?seed=${seed}&size=${size}`;
+function getAvatarUrl2(style, seed, bg = "1a1a2e", size = 256) {
+  return `https://api.dicebear.com/9.x/${style}/png?seed=${seed}&backgroundColor=${bg}&size=${size}`;
 }
 function parseAvatarUrl(url) {
-  if (!url) return { style: "adventurer", seed: generateSeed2() };
+  if (!url) return { style: "adventurer", seed: generateSeed2(), bg: "1a1a2e" };
   try {
     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: generateSeed2() };
+  return { style: "adventurer", seed: generateSeed2(), bg: "1a1a2e" };
 }
 function truncateAddress3(address, chars = 4) {
   if (address.length <= chars * 2 + 3) return address;
@@ -3566,12 +3610,14 @@ function UserProfileSheet({
   const parsed = useMemo4(() => parseAvatarUrl(user.avatar), [user.avatar]);
   const [avatarStyle, setAvatarStyle] = useState17(parsed.style);
   const [avatarSeed, setAvatarSeed] = useState17(parsed.seed);
+  const [bgColor, setBgColor] = useState17(parsed.bg);
   const [saving, setSaving] = useState17(false);
   const [error, setError] = useState17(null);
   useEffect12(() => {
     const p = parseAvatarUrl(user.avatar);
     setAvatarStyle(p.style);
     setAvatarSeed(p.seed);
+    setBgColor(p.bg);
   }, [user.avatar]);
   useEffect12(() => {
     Animated2.timing(overlayOpacity, {
@@ -3583,28 +3629,8 @@ function UserProfileSheet({
   useEffect12(() => {
     if (visible) setError(null);
   }, [visible]);
-  const currentAvatarUrl = getAvatarUrl2(avatarStyle, avatarSeed);
-  const handleSelectStyle = useCallback16(
-    async (style) => {
-      const newUrl = getAvatarUrl2(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 = useCallback16(async () => {
-    const newSeed = generateSeed2();
-    const newUrl = getAvatarUrl2(avatarStyle, newSeed);
-    setAvatarSeed(newSeed);
+  const currentAvatarUrl = getAvatarUrl2(avatarStyle, avatarSeed, bgColor);
+  const saveAvatar = useCallback16(async (newUrl) => {
     setSaving(true);
     setError(null);
     try {
@@ -3615,7 +3641,26 @@ function UserProfileSheet({
     } finally {
       setSaving(false);
     }
-  }, [avatarStyle, client, onAvatarUpdated]);
+  }, [client, onAvatarUpdated]);
+  const handleSelectStyle = useCallback16(
+    (style) => {
+      setAvatarStyle(style);
+      saveAvatar(getAvatarUrl2(style, avatarSeed, bgColor));
+    },
+    [avatarSeed, bgColor, saveAvatar]
+  );
+  const handleShuffle = useCallback16(() => {
+    const newSeed = generateSeed2();
+    setAvatarSeed(newSeed);
+    saveAvatar(getAvatarUrl2(avatarStyle, newSeed, bgColor));
+  }, [avatarStyle, bgColor, saveAvatar]);
+  const handleSelectBgColor = useCallback16(
+    (color) => {
+      setBgColor(color);
+      saveAvatar(getAvatarUrl2(avatarStyle, avatarSeed, color));
+    },
+    [avatarStyle, avatarSeed, saveAvatar]
+  );
   return /* @__PURE__ */ jsxs5(
     Modal,
     {
@@ -3696,7 +3741,7 @@ function UserProfileSheet({
                                 children: /* @__PURE__ */ jsx7(
                                   Image4,
                                   {
-                                    source: { uri: getAvatarUrl2(style, avatarSeed, 80) },
+                                    source: { uri: getAvatarUrl2(style, avatarSeed, bgColor, 80) },
                                     style: styles4.styleTileImage
                                   }
                                 )
@@ -3705,6 +3750,32 @@ function UserProfileSheet({
                             );
                           })
                         }
+                      ),
+                      /* @__PURE__ */ jsx7(Text5, { style: [styles4.sectionLabel, { color: t.textSecondary, marginTop: 4 }], children: "Background Color" }),
+                      /* @__PURE__ */ jsx7(
+                        ScrollView3,
+                        {
+                          horizontal: true,
+                          showsHorizontalScrollIndicator: false,
+                          contentContainerStyle: styles4.colorPickerContent,
+                          children: BG_COLORS2.map((color) => {
+                            const isSelected = color === bgColor;
+                            return /* @__PURE__ */ jsx7(
+                              TouchableOpacity4,
+                              {
+                                onPress: () => handleSelectBgColor(color),
+                                activeOpacity: 0.7,
+                                disabled: saving,
+                                style: [
+                                  styles4.colorSwatch,
+                                  { backgroundColor: `#${color}` },
+                                  isSelected && { borderColor: t.accent, borderWidth: 2.5 }
+                                ]
+                              },
+                              color
+                            );
+                          })
+                        }
                       )
                     ] }),
                     error ? /* @__PURE__ */ jsx7(View5, { style: [styles4.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ jsx7(Text5, { style: [styles4.errorText, { color: t.errorText }], children: error }) }) : null,
@@ -3866,6 +3937,16 @@ var styles4 = StyleSheet5.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,