@dubsdotapp/expo 0.2.76 → 0.2.77

package/dist/index.js

@@ -2536,11 +2536,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,
@@ -2720,6 +2732,7 @@ function DefaultRegistrationScreen({
   const [step, setStep] = (0, import_react17.useState)(0);
   const [avatarSeed, setAvatarSeed] = (0, import_react17.useState)(generateSeed);
   const [avatarStyle, setAvatarStyle] = (0, import_react17.useState)("adventurer");
+  const [avatarBg, setAvatarBg] = (0, import_react17.useState)("1a1a2e");
   const [showStyles, setShowStyles] = (0, import_react17.useState)(false);
   const [username, setUsername] = (0, import_react17.useState)("");
   const [referralCode, setReferralCode] = (0, import_react17.useState)("");
@@ -2728,7 +2741,7 @@ function DefaultRegistrationScreen({
   const debounceRef = (0, import_react17.useRef)(null);
   const fadeAnim = (0, import_react17.useRef)(new import_react_native7.Animated.Value(1)).current;
   const slideAnim = (0, import_react17.useRef)(new import_react_native7.Animated.Value(0)).current;
-  const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed);
+  const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed, avatarBg);
   (0, import_react17.useEffect)(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     const trimmed = username.trim();
@@ -2801,15 +2814,30 @@ function DefaultRegistrationScreen({
           }
         )
       ] }),
-      showStyles && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: s.styleScroll, children: DICEBEAR_STYLES.map((st) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_native7.TouchableOpacity,
-        {
-          onPress: () => setAvatarStyle(st),
-          style: [s.styleThumbWrap, { borderColor: st === avatarStyle ? accent : t.border }],
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.Image, { source: { uri: getAvatarUrl(st, avatarSeed, 80) }, style: s.styleThumb })
-        },
-        st
-      )) })
+      showStyles && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: s.styleScroll, children: DICEBEAR_STYLES.map((st) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_native7.TouchableOpacity,
+          {
+            onPress: () => setAvatarStyle(st),
+            style: [s.styleThumbWrap, { borderColor: st === avatarStyle ? accent : t.border }],
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.Image, { source: { uri: getAvatarUrl(st, avatarSeed, avatarBg, 80) }, style: s.styleThumb })
+          },
+          st
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.Text, { style: [s.subtitle, { color: t.textMuted, marginTop: 8 }], children: "Background Color" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: s.styleScroll, children: BG_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_native7.TouchableOpacity,
+          {
+            onPress: () => setAvatarBg(color),
+            style: [
+              s.colorSwatch,
+              { backgroundColor: `#${color}` },
+              color === avatarBg && { borderColor: accent, borderWidth: 2.5 }
+            ]
+          },
+          color
+        )) })
+      ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: s.bottomRow, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_react_native7.TouchableOpacity,
@@ -3120,6 +3148,7 @@ var s = import_react_native7.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" },
@@ -3568,20 +3597,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;
@@ -3601,12 +3645,14 @@ function UserProfileSheet({
   const parsed = (0, import_react20.useMemo)(() => parseAvatarUrl(user.avatar), [user.avatar]);
   const [avatarStyle, setAvatarStyle] = (0, import_react20.useState)(parsed.style);
   const [avatarSeed, setAvatarSeed] = (0, import_react20.useState)(parsed.seed);
+  const [bgColor, setBgColor] = (0, import_react20.useState)(parsed.bg);
   const [saving, setSaving] = (0, import_react20.useState)(false);
   const [error, setError] = (0, import_react20.useState)(null);
   (0, import_react20.useEffect)(() => {
     const p = parseAvatarUrl(user.avatar);
     setAvatarStyle(p.style);
     setAvatarSeed(p.seed);
+    setBgColor(p.bg);
   }, [user.avatar]);
   (0, import_react20.useEffect)(() => {
     import_react_native10.Animated.timing(overlayOpacity, {
@@ -3618,28 +3664,8 @@ function UserProfileSheet({
   (0, import_react20.useEffect)(() => {
     if (visible) setError(null);
   }, [visible]);
-  const currentAvatarUrl = getAvatarUrl2(avatarStyle, avatarSeed);
-  const handleSelectStyle = (0, import_react20.useCallback)(
-    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 = (0, import_react20.useCallback)(async () => {
-    const newSeed = generateSeed2();
-    const newUrl = getAvatarUrl2(avatarStyle, newSeed);
-    setAvatarSeed(newSeed);
+  const currentAvatarUrl = getAvatarUrl2(avatarStyle, avatarSeed, bgColor);
+  const saveAvatar = (0, import_react20.useCallback)(async (newUrl) => {
     setSaving(true);
     setError(null);
     try {
@@ -3650,7 +3676,26 @@ function UserProfileSheet({
     } finally {
       setSaving(false);
     }
-  }, [avatarStyle, client, onAvatarUpdated]);
+  }, [client, onAvatarUpdated]);
+  const handleSelectStyle = (0, import_react20.useCallback)(
+    (style) => {
+      setAvatarStyle(style);
+      saveAvatar(getAvatarUrl2(style, avatarSeed, bgColor));
+    },
+    [avatarSeed, bgColor, saveAvatar]
+  );
+  const handleShuffle = (0, import_react20.useCallback)(() => {
+    const newSeed = generateSeed2();
+    setAvatarSeed(newSeed);
+    saveAvatar(getAvatarUrl2(avatarStyle, newSeed, bgColor));
+  }, [avatarStyle, bgColor, saveAvatar]);
+  const handleSelectBgColor = (0, import_react20.useCallback)(
+    (color) => {
+      setBgColor(color);
+      saveAvatar(getAvatarUrl2(avatarStyle, avatarSeed, color));
+    },
+    [avatarStyle, avatarSeed, saveAvatar]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     import_react_native10.Modal,
     {
@@ -3731,7 +3776,7 @@ function UserProfileSheet({
                                 children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                                   import_react_native10.Image,
                                   {
-                                    source: { uri: getAvatarUrl2(style, avatarSeed, 80) },
+                                    source: { uri: getAvatarUrl2(style, avatarSeed, bgColor, 80) },
                                     style: styles4.styleTileImage
                                   }
                                 )
@@ -3740,6 +3785,32 @@ function UserProfileSheet({
                             );
                           })
                         }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native10.Text, { style: [styles4.sectionLabel, { color: t.textSecondary, marginTop: 4 }], children: "Background Color" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        import_react_native10.ScrollView,
+                        {
+                          horizontal: true,
+                          showsHorizontalScrollIndicator: false,
+                          contentContainerStyle: styles4.colorPickerContent,
+                          children: BG_COLORS2.map((color) => {
+                            const isSelected = color === bgColor;
+                            return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              import_react_native10.TouchableOpacity,
+                              {
+                                onPress: () => handleSelectBgColor(color),
+                                activeOpacity: 0.7,
+                                disabled: saving,
+                                style: [
+                                  styles4.colorSwatch,
+                                  { backgroundColor: `#${color}` },
+                                  isSelected && { borderColor: t.accent, borderWidth: 2.5 }
+                                ]
+                              },
+                              color
+                            );
+                          })
+                        }
                       )
                     ] }),
                     error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native10.View, { style: [styles4.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native10.Text, { style: [styles4.errorText, { color: t.errorText }], children: error }) }) : null,
@@ -3901,6 +3972,16 @@ var styles4 = import_react_native10.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,