@dubsdotapp/expo 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -850,7 +850,7 @@ function useAuth() {
       setStatus("error");
     }
   }, [client, wallet]);
-  const register = useCallback8(async (username, referralCode) => {
+  const register = useCallback8(async (username, referralCode, avatarUrl) => {
     try {
       const pending = pendingAuth.current;
       if (!pending) {
@@ -863,7 +863,8 @@ function useAuth() {
         signature: pending.signature,
         nonce: pending.nonce,
         username,
-        referralCode
+        referralCode,
+        avatarUrl
       });
       pendingAuth.current = null;
       setUser(result.user);
@@ -915,13 +916,21 @@ function useAuth() {
   };
 }
 
-// src/ui/ConnectWalletScreen.tsx
+// src/ui/AuthGate.tsx
+import React2, { useState as useState9, useEffect as useEffect5, useRef as useRef2, useCallback as useCallback9 } from "react";
 import {
   View,
   Text,
+  TextInput,
   TouchableOpacity,
   ActivityIndicator,
-  StyleSheet
+  StyleSheet,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  Image,
+  Animated,
+  ScrollView
 } from "react-native";
 
 // src/ui/theme.ts
@@ -963,8 +972,509 @@ function useDubsTheme() {
   return scheme === "light" ? light : dark;
 }
 
+// src/ui/AuthGate.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DICEBEAR_STYLES = [
+  "adventurer",
+  "avataaars",
+  "fun-emoji",
+  "bottts",
+  "big-smile",
+  "thumbs"
+];
+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 AuthGate({
+  children,
+  onSaveToken,
+  onLoadToken,
+  renderLoading,
+  renderError,
+  renderRegistration,
+  appName = "Dubs"
+}) {
+  const { client } = useDubs();
+  const auth = useAuth();
+  const [phase, setPhase] = useState9("init");
+  const [registrationPhase, setRegistrationPhase] = useState9(false);
+  useEffect5(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const savedToken = await onLoadToken();
+        if (cancelled) return;
+        if (savedToken) {
+          const restored = await auth.restoreSession(savedToken);
+          if (cancelled) return;
+          if (restored) {
+            setPhase("active");
+            return;
+          }
+          await onSaveToken(null);
+        }
+        if (cancelled) return;
+        setPhase("active");
+        await auth.authenticate();
+      } catch {
+        if (!cancelled) setPhase("active");
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect5(() => {
+    if (auth.status === "needsRegistration") setRegistrationPhase(true);
+  }, [auth.status]);
+  useEffect5(() => {
+    if (auth.token) onSaveToken(auth.token);
+  }, [auth.token]);
+  const retry = useCallback9(() => {
+    setRegistrationPhase(false);
+    auth.reset();
+    auth.authenticate();
+  }, [auth]);
+  const handleRegister = useCallback9(
+    (username, referralCode, avatarUrl) => {
+      auth.register(username, referralCode, avatarUrl);
+    },
+    [auth]
+  );
+  if (phase === "init") {
+    if (renderLoading) return /* @__PURE__ */ jsx2(Fragment, { children: renderLoading("authenticating") });
+    return /* @__PURE__ */ jsx2(DefaultLoadingScreen, { status: "authenticating", appName });
+  }
+  if (auth.status === "authenticated") return /* @__PURE__ */ jsx2(Fragment, { children });
+  if (registrationPhase) {
+    const isRegistering = auth.status === "registering";
+    const regError = auth.status === "error" ? auth.error : null;
+    if (renderRegistration) {
+      return /* @__PURE__ */ jsx2(Fragment, { children: renderRegistration({ onRegister: handleRegister, registering: isRegistering, error: regError, client }) });
+    }
+    return /* @__PURE__ */ jsx2(
+      DefaultRegistrationScreen,
+      {
+        onRegister: handleRegister,
+        registering: isRegistering,
+        error: regError,
+        client,
+        appName
+      }
+    );
+  }
+  if (auth.status === "error" && auth.error) {
+    if (renderError) return /* @__PURE__ */ jsx2(Fragment, { children: renderError(auth.error, retry) });
+    return /* @__PURE__ */ jsx2(DefaultErrorScreen, { error: auth.error, onRetry: retry, appName });
+  }
+  if (renderLoading) return /* @__PURE__ */ jsx2(Fragment, { children: renderLoading(auth.status) });
+  return /* @__PURE__ */ jsx2(DefaultLoadingScreen, { status: auth.status, appName });
+}
+function DefaultLoadingScreen({ status, appName }) {
+  const t = useDubsTheme();
+  const statusText = {
+    idle: "Initializing...",
+    authenticating: "Connecting...",
+    signing: "Approve in your wallet...",
+    verifying: "Verifying...",
+    registering: "Creating account...",
+    needsRegistration: "Almost there...",
+    authenticated: "Ready!",
+    error: "Something went wrong"
+  };
+  return /* @__PURE__ */ jsx2(View, { style: [s.container, { backgroundColor: t.background }], children: /* @__PURE__ */ jsxs(View, { style: s.centerContent, children: [
+    /* @__PURE__ */ jsxs(View, { style: s.brandingSection, children: [
+      /* @__PURE__ */ jsx2(View, { style: [s.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx2(Text, { style: s.logoText, children: "D" }) }),
+      /* @__PURE__ */ jsx2(Text, { style: [s.appNameText, { color: t.text }], children: appName })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: s.loadingSection, children: [
+      /* @__PURE__ */ jsx2(ActivityIndicator, { size: "large", color: t.accent }),
+      /* @__PURE__ */ jsx2(Text, { style: [s.statusText, { color: t.textMuted }], children: statusText[status] || "Loading..." })
+    ] })
+  ] }) });
+}
+function DefaultErrorScreen({ error, onRetry, appName }) {
+  const t = useDubsTheme();
+  return /* @__PURE__ */ jsx2(View, { style: [s.container, { backgroundColor: t.background }], children: /* @__PURE__ */ jsxs(View, { style: s.spreadContent, children: [
+    /* @__PURE__ */ jsxs(View, { style: s.brandingSection, children: [
+      /* @__PURE__ */ jsx2(View, { style: [s.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx2(Text, { style: s.logoText, children: "D" }) }),
+      /* @__PURE__ */ jsx2(Text, { style: [s.appNameText, { color: t.text }], children: appName })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: { gap: 16 }, children: [
+      /* @__PURE__ */ jsx2(View, { style: [s.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ jsx2(Text, { style: [s.errorText, { color: t.errorText }], children: error.message }) }),
+      /* @__PURE__ */ jsx2(TouchableOpacity, { style: [s.primaryBtn, { backgroundColor: t.accent }], onPress: onRetry, activeOpacity: 0.8, children: /* @__PURE__ */ jsx2(Text, { style: s.primaryBtnText, children: "Try Again" }) })
+    ] })
+  ] }) });
+}
+function StepIndicator({ currentStep }) {
+  const t = useDubsTheme();
+  const steps = [0, 1, 2, 3];
+  return /* @__PURE__ */ jsx2(View, { style: s.stepRow, children: steps.map((i) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+    i > 0 && /* @__PURE__ */ jsx2(View, { style: [s.stepLine, { backgroundColor: i <= currentStep ? t.success : t.border }] }),
+    /* @__PURE__ */ jsx2(
+      View,
+      {
+        style: [
+          s.stepCircle,
+          i < currentStep ? { backgroundColor: t.success } : i === currentStep ? { backgroundColor: t.accent } : { backgroundColor: "transparent", borderWidth: 2, borderColor: t.border }
+        ],
+        children: i < currentStep ? /* @__PURE__ */ jsx2(Text, { style: s.stepCheck, children: "\u2713" }) : /* @__PURE__ */ jsx2(Text, { style: [s.stepNum, { color: i === currentStep ? "#FFF" : t.textMuted }], children: i + 1 })
+      }
+    )
+  ] }, i)) });
+}
+function DefaultRegistrationScreen({
+  onRegister,
+  registering,
+  error,
+  client,
+  appName
+}) {
+  const t = useDubsTheme();
+  const [step, setStep] = useState9(0);
+  const [avatarSeed, setAvatarSeed] = useState9(generateSeed);
+  const [avatarStyle, setAvatarStyle] = useState9("adventurer");
+  const [showStyles, setShowStyles] = useState9(false);
+  const [username, setUsername] = useState9("");
+  const [referralCode, setReferralCode] = useState9("");
+  const [checking, setChecking] = useState9(false);
+  const [availability, setAvailability] = useState9(null);
+  const debounceRef = useRef2(null);
+  const fadeAnim = useRef2(new Animated.Value(1)).current;
+  const slideAnim = useRef2(new Animated.Value(0)).current;
+  const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed);
+  useEffect5(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    const trimmed = username.trim();
+    if (trimmed.length < 3) {
+      setAvailability(null);
+      setChecking(false);
+      return;
+    }
+    setChecking(true);
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const result = await client.checkUsername(trimmed);
+        setAvailability(result);
+      } catch {
+        setAvailability(null);
+      } finally {
+        setChecking(false);
+      }
+    }, 500);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [username, client]);
+  const animateToStep = useCallback9((newStep) => {
+    const dir = newStep > step ? 1 : -1;
+    Keyboard.dismiss();
+    Animated.parallel([
+      Animated.timing(fadeAnim, { toValue: 0, duration: 120, useNativeDriver: true }),
+      Animated.timing(slideAnim, { toValue: -dir * 40, duration: 120, useNativeDriver: true })
+    ]).start(() => {
+      setStep(newStep);
+      slideAnim.setValue(dir * 40);
+      Animated.parallel([
+        Animated.timing(fadeAnim, { toValue: 1, duration: 200, useNativeDriver: true }),
+        Animated.timing(slideAnim, { toValue: 0, duration: 200, useNativeDriver: true })
+      ]).start();
+    });
+  }, [step, fadeAnim, slideAnim]);
+  const canContinueUsername = username.trim().length >= 3 && availability?.available === true && !checking;
+  const handleSubmit = () => {
+    Keyboard.dismiss();
+    onRegister(username.trim(), referralCode.trim() || void 0, avatarUrl);
+  };
+  const renderAvatarStep = () => /* @__PURE__ */ jsxs(View, { style: s.stepContainer, children: [
+    /* @__PURE__ */ jsxs(View, { style: s.stepTop, children: [
+      /* @__PURE__ */ jsx2(Text, { style: [s.title, { color: t.text }], children: "Choose Your Avatar" }),
+      /* @__PURE__ */ jsx2(Text, { style: [s.subtitle, { color: t.textMuted }], children: "Pick a look that represents you" }),
+      /* @__PURE__ */ jsx2(StepIndicator, { currentStep: 0 }),
+      /* @__PURE__ */ jsx2(View, { style: s.avatarCenter, children: /* @__PURE__ */ jsxs(View, { style: [s.avatarFrame, { borderColor: t.accent }], children: [
+        /* @__PURE__ */ jsx2(Image, { source: { uri: avatarUrl }, style: s.avatarLarge }),
+        /* @__PURE__ */ jsx2(View, { style: [s.checkBadge, { backgroundColor: t.success }], children: /* @__PURE__ */ jsx2(Text, { style: s.checkBadgeText, children: "\u2713" }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs(View, { style: s.avatarActions, children: [
+        /* @__PURE__ */ jsx2(
+          TouchableOpacity,
+          {
+            style: [s.outlineBtn, { borderColor: t.border }],
+            onPress: () => setAvatarSeed(generateSeed()),
+            activeOpacity: 0.7,
+            children: /* @__PURE__ */ jsx2(Text, { style: [s.outlineBtnText, { color: t.text }], children: "\u21BB  Shuffle" })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          TouchableOpacity,
+          {
+            style: [s.outlineBtn, { borderColor: t.accent, backgroundColor: t.accent + "15" }],
+            onPress: () => setShowStyles(!showStyles),
+            activeOpacity: 0.7,
+            children: /* @__PURE__ */ jsx2(Text, { style: [s.outlineBtnText, { color: t.accent }], children: "\u263A  Customize" })
+          }
+        )
+      ] }),
+      showStyles && /* @__PURE__ */ jsx2(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: s.styleScroll, children: DICEBEAR_STYLES.map((st) => /* @__PURE__ */ jsx2(
+        TouchableOpacity,
+        {
+          onPress: () => setAvatarStyle(st),
+          style: [s.styleThumbWrap, { borderColor: st === avatarStyle ? t.accent : t.border }],
+          children: /* @__PURE__ */ jsx2(Image, { source: { uri: getAvatarUrl(st, avatarSeed, 80) }, style: s.styleThumb })
+        },
+        st
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx2(View, { style: s.bottomRow, children: /* @__PURE__ */ jsx2(
+      TouchableOpacity,
+      {
+        style: [s.primaryBtn, { backgroundColor: t.accent, flex: 1 }],
+        onPress: () => animateToStep(1),
+        activeOpacity: 0.8,
+        children: /* @__PURE__ */ jsx2(Text, { style: s.primaryBtnText, children: "Continue  \u203A" })
+      }
+    ) })
+  ] });
+  const renderUsernameStep = () => /* @__PURE__ */ jsxs(View, { style: s.stepContainer, children: [
+    /* @__PURE__ */ jsxs(View, { style: s.stepTop, children: [
+      /* @__PURE__ */ jsxs(View, { style: s.headerRow, children: [
+        /* @__PURE__ */ jsx2(TouchableOpacity, { onPress: () => animateToStep(0), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, children: /* @__PURE__ */ jsx2(Text, { style: [s.backChevron, { color: t.text }], children: "\u2039" }) }),
+        /* @__PURE__ */ jsx2(Text, { style: [s.titleInline, { color: t.text }], children: "Pick a Username" })
+      ] }),
+      /* @__PURE__ */ jsx2(Text, { style: [s.subtitle, { color: t.textMuted }], children: "This is how others will see you" }),
+      /* @__PURE__ */ jsx2(StepIndicator, { currentStep: 1 }),
+      /* @__PURE__ */ jsx2(View, { style: s.avatarCenter, children: /* @__PURE__ */ jsxs(View, { style: [s.avatarFrameSmall, { borderColor: t.accent }], children: [
+        /* @__PURE__ */ jsx2(Image, { source: { uri: avatarUrl }, style: s.avatarSmall }),
+        /* @__PURE__ */ jsx2(View, { style: [s.checkBadgeSm, { backgroundColor: t.success }], children: /* @__PURE__ */ jsx2(Text, { style: s.checkBadgeTextSm, children: "\u2713" }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs(View, { style: s.inputGroup, children: [
+        /* @__PURE__ */ jsxs(Text, { style: [s.inputLabel, { color: t.text }], children: [
+          "Username ",
+          /* @__PURE__ */ jsx2(Text, { style: { color: t.errorText }, children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          TextInput,
+          {
+            style: [s.input, { backgroundColor: t.surface, color: t.text, borderColor: t.accent }],
+            placeholder: "Enter username",
+            placeholderTextColor: t.textDim,
+            value: username,
+            onChangeText: setUsername,
+            autoCapitalize: "none",
+            autoCorrect: false,
+            autoFocus: true
+          }
+        ),
+        checking ? /* @__PURE__ */ jsx2(Text, { style: [s.hint, { color: t.textDim }], children: "Checking..." }) : availability ? /* @__PURE__ */ jsx2(Text, { style: [s.hint, { color: availability.available ? t.success : t.errorText }], children: availability.available ? "\u2713 Available!" : availability.reason || "Username taken" }) : username.trim().length > 0 && username.trim().length < 3 ? /* @__PURE__ */ jsx2(Text, { style: [s.hint, { color: t.textDim }], children: "At least 3 characters" }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: s.bottomRow, children: [
+      /* @__PURE__ */ jsx2(
+        TouchableOpacity,
+        {
+          style: [s.secondaryBtn, { borderColor: t.border }],
+          onPress: () => animateToStep(0),
+          activeOpacity: 0.7,
+          children: /* @__PURE__ */ jsx2(Text, { style: [s.secondaryBtnText, { color: t.text }], children: "\u2039  Back" })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        TouchableOpacity,
+        {
+          style: [s.primaryBtn, { backgroundColor: t.accent, flex: 1, opacity: canContinueUsername ? 1 : 0.4 }],
+          onPress: () => animateToStep(2),
+          disabled: !canContinueUsername,
+          activeOpacity: 0.8,
+          children: /* @__PURE__ */ jsx2(Text, { style: s.primaryBtnText, children: "Continue  \u203A" })
+        }
+      )
+    ] })
+  ] });
+  const renderReferralStep = () => /* @__PURE__ */ jsxs(View, { style: s.stepContainer, children: [
+    /* @__PURE__ */ jsxs(View, { style: s.stepTop, children: [
+      /* @__PURE__ */ jsxs(View, { style: s.headerRow, children: [
+        /* @__PURE__ */ jsx2(TouchableOpacity, { onPress: () => animateToStep(1), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, children: /* @__PURE__ */ jsx2(Text, { style: [s.backChevron, { color: t.text }], children: "\u2039" }) }),
+        /* @__PURE__ */ jsx2(Text, { style: [s.titleInline, { color: t.text }], children: "Almost There!" })
+      ] }),
+      /* @__PURE__ */ jsx2(Text, { style: [s.subtitle, { color: t.textMuted }], children: "Got a referral code? (optional)" }),
+      /* @__PURE__ */ jsx2(StepIndicator, { currentStep: 2 }),
+      /* @__PURE__ */ jsxs(View, { style: [s.profileCard, { borderColor: t.border }], children: [
+        /* @__PURE__ */ jsx2(Text, { style: [s.profileLabel, { color: t.textMuted }], children: "Your Profile" }),
+        /* @__PURE__ */ jsxs(View, { style: s.profileRow, children: [
+          /* @__PURE__ */ jsx2(Image, { source: { uri: avatarUrl }, style: s.profileAvatar }),
+          /* @__PURE__ */ jsxs(View, { style: { gap: 4 }, children: [
+            /* @__PURE__ */ jsxs(Text, { style: [s.profileUsername, { color: t.text }], children: [
+              "@",
+              username
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { style: [s.profileReady, { color: t.success }], children: [
+              "\u2713",
+              " Ready to go!"
+            ] })
+          ] })
+        ] })
+      ] }),
+      error ? /* @__PURE__ */ jsx2(View, { style: [s.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ jsx2(Text, { style: [s.errorText, { color: t.errorText }], children: error.message }) }) : null,
+      /* @__PURE__ */ jsxs(View, { style: s.inputGroup, children: [
+        /* @__PURE__ */ jsxs(Text, { style: [s.inputLabel, { color: t.text }], children: [
+          "Referral Code ",
+          /* @__PURE__ */ jsx2(Text, { style: { color: t.textMuted }, children: "(optional)" })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          TextInput,
+          {
+            style: [s.input, { backgroundColor: t.surface, color: t.text, borderColor: t.border }],
+            placeholder: "Enter referral code",
+            placeholderTextColor: t.textDim,
+            value: referralCode,
+            onChangeText: setReferralCode,
+            autoCapitalize: "none",
+            autoCorrect: false,
+            editable: !registering
+          }
+        ),
+        /* @__PURE__ */ jsxs(Text, { style: [s.hint, { color: t.textMuted }], children: [
+          "\u{1F381}",
+          " If a friend invited you, enter their code to give them credit!"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: s.bottomRow, children: [
+      /* @__PURE__ */ jsx2(
+        TouchableOpacity,
+        {
+          style: [s.secondaryBtn, { borderColor: t.border }],
+          onPress: () => animateToStep(1),
+          disabled: registering,
+          activeOpacity: 0.7,
+          children: /* @__PURE__ */ jsx2(Text, { style: [s.secondaryBtnText, { color: t.text }], children: "\u2039  Back" })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        TouchableOpacity,
+        {
+          style: [s.primaryBtn, { backgroundColor: t.accent, flex: 1, opacity: registering ? 0.7 : 1 }],
+          onPress: handleSubmit,
+          disabled: registering,
+          activeOpacity: 0.8,
+          children: registering ? /* @__PURE__ */ jsx2(ActivityIndicator, { color: "#FFFFFF", size: "small" }) : /* @__PURE__ */ jsx2(Text, { style: s.primaryBtnText, children: "Create Account" })
+        }
+      )
+    ] })
+  ] });
+  const renderStep = () => {
+    switch (step) {
+      case 0:
+        return renderAvatarStep();
+      case 1:
+        return renderUsernameStep();
+      case 2:
+        return renderReferralStep();
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx2(
+    KeyboardAvoidingView,
+    {
+      style: [s.container, { backgroundColor: t.background }],
+      behavior: Platform.OS === "ios" ? "padding" : void 0,
+      children: /* @__PURE__ */ jsx2(
+        ScrollView,
+        {
+          contentContainerStyle: { flexGrow: 1 },
+          keyboardShouldPersistTaps: "handled",
+          bounces: false,
+          children: /* @__PURE__ */ jsx2(
+            Animated.View,
+            {
+              style: [
+                { flex: 1 },
+                { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
+              ],
+              children: renderStep()
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var s = StyleSheet.create({
+  container: { flex: 1 },
+  // Loading / Error
+  centerContent: { flex: 1, justifyContent: "center", alignItems: "center", paddingHorizontal: 32, gap: 48 },
+  spreadContent: { flex: 1, justifyContent: "space-between", paddingHorizontal: 32, paddingTop: 120, paddingBottom: 80 },
+  brandingSection: { alignItems: "center", gap: 12 },
+  logoCircle: { width: 80, height: 80, borderRadius: 40, justifyContent: "center", alignItems: "center", marginBottom: 8 },
+  logoText: { fontSize: 36, fontWeight: "800", color: "#FFFFFF" },
+  appNameText: { fontSize: 32, fontWeight: "800" },
+  loadingSection: { alignItems: "center", gap: 16 },
+  statusText: { fontSize: 16, textAlign: "center" },
+  errorBox: { borderWidth: 1, borderRadius: 12, paddingHorizontal: 16, paddingVertical: 12 },
+  errorText: { fontSize: 14, textAlign: "center" },
+  // Step indicator
+  stepRow: { flexDirection: "row", alignItems: "center", paddingHorizontal: 24, marginVertical: 16 },
+  stepLine: { flex: 1, height: 2 },
+  stepCircle: { width: 36, height: 36, borderRadius: 18, justifyContent: "center", alignItems: "center" },
+  stepCheck: { color: "#FFF", fontSize: 16, fontWeight: "700" },
+  stepNum: { fontSize: 14, fontWeight: "700" },
+  // Onboarding layout
+  stepContainer: { flex: 1, justifyContent: "space-between", paddingBottom: 40 },
+  stepTop: { gap: 8, paddingTop: 64 },
+  headerRow: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 24 },
+  backChevron: { fontSize: 32, fontWeight: "300", lineHeight: 36, marginTop: -2 },
+  title: { fontSize: 28, fontWeight: "800", paddingHorizontal: 24 },
+  titleInline: { fontSize: 28, fontWeight: "800" },
+  subtitle: { fontSize: 15, paddingHorizontal: 24, lineHeight: 20 },
+  // Avatar
+  avatarCenter: { alignItems: "center", marginVertical: 12 },
+  avatarFrame: { borderWidth: 3, borderRadius: 20, padding: 4 },
+  avatarLarge: { width: 160, height: 160, borderRadius: 16, backgroundColor: "#E5E5EA" },
+  checkBadge: { position: "absolute", bottom: -6, right: -6, width: 28, height: 28, borderRadius: 14, justifyContent: "center", alignItems: "center" },
+  checkBadgeText: { color: "#FFF", fontSize: 15, fontWeight: "700" },
+  avatarFrameSmall: { borderWidth: 3, borderRadius: 14, padding: 3 },
+  avatarSmall: { width: 100, height: 100, borderRadius: 12, backgroundColor: "#E5E5EA" },
+  checkBadgeSm: { position: "absolute", bottom: -4, right: -4, width: 22, height: 22, borderRadius: 11, justifyContent: "center", alignItems: "center" },
+  checkBadgeTextSm: { color: "#FFF", fontSize: 12, fontWeight: "700" },
+  avatarActions: { flexDirection: "row", justifyContent: "center", gap: 12, paddingHorizontal: 24 },
+  outlineBtn: { borderWidth: 1.5, borderRadius: 12, paddingHorizontal: 20, paddingVertical: 12 },
+  outlineBtnText: { fontSize: 15, fontWeight: "600" },
+  styleScroll: { paddingHorizontal: 24, marginTop: 4 },
+  styleThumbWrap: { borderWidth: 2, borderRadius: 12, padding: 3, marginRight: 10 },
+  styleThumb: { width: 52, height: 52, borderRadius: 10, backgroundColor: "#E5E5EA" },
+  // Input
+  inputGroup: { paddingHorizontal: 24, gap: 6 },
+  inputLabel: { fontSize: 15, fontWeight: "600" },
+  input: { height: 56, borderRadius: 16, borderWidth: 1.5, paddingHorizontal: 16, fontSize: 16 },
+  hint: { fontSize: 13, paddingLeft: 4 },
+  // Profile card
+  profileCard: { marginHorizontal: 24, borderWidth: 1, borderRadius: 16, padding: 16, gap: 12 },
+  profileLabel: { fontSize: 13 },
+  profileRow: { flexDirection: "row", alignItems: "center", gap: 14 },
+  profileAvatar: { width: 56, height: 56, borderRadius: 12, backgroundColor: "#E5E5EA" },
+  profileUsername: { fontSize: 20, fontWeight: "800" },
+  profileReady: { fontSize: 14, fontWeight: "600" },
+  // Buttons
+  bottomRow: { flexDirection: "row", gap: 12, paddingHorizontal: 24 },
+  primaryBtn: { height: 56, borderRadius: 16, justifyContent: "center", alignItems: "center" },
+  primaryBtnText: { color: "#FFFFFF", fontSize: 18, fontWeight: "700" },
+  secondaryBtn: { height: 56, borderRadius: 16, borderWidth: 1.5, justifyContent: "center", alignItems: "center", paddingHorizontal: 24 },
+  secondaryBtnText: { fontSize: 16, fontWeight: "600" }
+});
+
 // src/ui/ConnectWalletScreen.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import {
+  View as View2,
+  Text as Text2,
+  TouchableOpacity as TouchableOpacity2,
+  ActivityIndicator as ActivityIndicator2,
+  StyleSheet as StyleSheet2
+} from "react-native";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ConnectWalletScreen({
   onConnect,
   connecting = false,
@@ -972,38 +1482,38 @@ function ConnectWalletScreen({
   appName = "Dubs"
 }) {
   const t = useDubsTheme();
-  return /* @__PURE__ */ jsx2(View, { style: [styles.container, { backgroundColor: t.background }], children: /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.brandingSection, children: [
-      /* @__PURE__ */ jsx2(View, { style: [styles.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx2(Text, { style: styles.logoText, children: "D" }) }),
-      /* @__PURE__ */ jsx2(Text, { style: [styles.appName, { color: t.text }], children: appName }),
-      /* @__PURE__ */ jsx2(Text, { style: [styles.subtitle, { color: t.textMuted }], children: "Connect your Solana wallet to get started" })
+  return /* @__PURE__ */ jsx3(View2, { style: [styles.container, { backgroundColor: t.background }], children: /* @__PURE__ */ jsxs2(View2, { style: styles.content, children: [
+    /* @__PURE__ */ jsxs2(View2, { style: styles.brandingSection, children: [
+      /* @__PURE__ */ jsx3(View2, { style: [styles.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx3(Text2, { style: styles.logoText, children: "D" }) }),
+      /* @__PURE__ */ jsx3(Text2, { style: [styles.appName, { color: t.text }], children: appName }),
+      /* @__PURE__ */ jsx3(Text2, { style: [styles.subtitle, { color: t.textMuted }], children: "Connect your Solana wallet to get started" })
     ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles.actionSection, children: [
-      error ? /* @__PURE__ */ jsx2(
-        View,
+    /* @__PURE__ */ jsxs2(View2, { style: styles.actionSection, children: [
+      error ? /* @__PURE__ */ jsx3(
+        View2,
         {
           style: [
             styles.errorBox,
             { backgroundColor: t.errorBg, borderColor: t.errorBorder }
           ],
-          children: /* @__PURE__ */ jsx2(Text, { style: [styles.errorText, { color: t.errorText }], children: error })
+          children: /* @__PURE__ */ jsx3(Text2, { style: [styles.errorText, { color: t.errorText }], children: error })
         }
       ) : null,
-      /* @__PURE__ */ jsx2(
-        TouchableOpacity,
+      /* @__PURE__ */ jsx3(
+        TouchableOpacity2,
         {
           style: [styles.connectButton, { backgroundColor: t.accent }],
           onPress: onConnect,
           disabled: connecting,
           activeOpacity: 0.8,
-          children: connecting ? /* @__PURE__ */ jsx2(ActivityIndicator, { color: "#FFFFFF", size: "small" }) : /* @__PURE__ */ jsx2(Text, { style: styles.connectButtonText, children: "Connect Wallet" })
+          children: connecting ? /* @__PURE__ */ jsx3(ActivityIndicator2, { color: "#FFFFFF", size: "small" }) : /* @__PURE__ */ jsx3(Text2, { style: styles.connectButtonText, children: "Connect Wallet" })
         }
       ),
-      /* @__PURE__ */ jsx2(Text, { style: [styles.hint, { color: t.textDim }], children: "Phantom, Solflare, or any Solana wallet" })
+      /* @__PURE__ */ jsx3(Text2, { style: [styles.hint, { color: t.textDim }], children: "Phantom, Solflare, or any Solana wallet" })
     ] })
   ] }) });
 }
-var styles = StyleSheet.create({
+var styles = StyleSheet2.create({
   container: {
     flex: 1,
     justifyContent: "center"
@@ -1073,8 +1583,8 @@ var styles = StyleSheet.create({
 
 // src/ui/UserProfileCard.tsx
 import { useMemo as useMemo2 } from "react";
-import { View as View2, Text as Text2, Image, StyleSheet as StyleSheet2 } from "react-native";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { View as View3, Text as Text3, Image as Image2, StyleSheet as StyleSheet3 } from "react-native";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function truncateAddress(address, chars = 4) {
   if (address.length <= chars * 2 + 3) return address;
   return `${address.slice(0, chars)}...${address.slice(-chars)}`;
@@ -1096,16 +1606,16 @@ function UserProfileCard({
     () => avatarUrl || `https://api.dicebear.com/9.x/avataaars/png?seed=${walletAddress}&size=128`,
     [avatarUrl, walletAddress]
   );
-  return /* @__PURE__ */ jsxs2(View2, { style: [styles2.card, { backgroundColor: t.surface, borderColor: t.border }], children: [
-    /* @__PURE__ */ jsx3(Image, { source: { uri: imageUri }, style: styles2.avatar }),
-    /* @__PURE__ */ jsxs2(View2, { style: styles2.info, children: [
-      username ? /* @__PURE__ */ jsx3(Text2, { style: [styles2.username, { color: t.text }], children: username }) : null,
-      /* @__PURE__ */ jsx3(Text2, { style: [styles2.address, { color: t.textMuted }], children: truncateAddress(walletAddress) }),
-      memberSince ? /* @__PURE__ */ jsx3(Text2, { style: [styles2.memberSince, { color: t.textDim }], children: formatMemberSince(memberSince) }) : null
+  return /* @__PURE__ */ jsxs3(View3, { style: [styles2.card, { backgroundColor: t.surface, borderColor: t.border }], children: [
+    /* @__PURE__ */ jsx4(Image2, { source: { uri: imageUri }, style: styles2.avatar }),
+    /* @__PURE__ */ jsxs3(View3, { style: styles2.info, children: [
+      username ? /* @__PURE__ */ jsx4(Text3, { style: [styles2.username, { color: t.text }], children: username }) : null,
+      /* @__PURE__ */ jsx4(Text3, { style: [styles2.address, { color: t.textMuted }], children: truncateAddress(walletAddress) }),
+      memberSince ? /* @__PURE__ */ jsx4(Text3, { style: [styles2.memberSince, { color: t.textDim }], children: formatMemberSince(memberSince) }) : null
     ] })
   ] });
 }
-var styles2 = StyleSheet2.create({
+var styles2 = StyleSheet3.create({
   card: {
     flexDirection: "row",
     alignItems: "center",
@@ -1140,14 +1650,14 @@ var styles2 = StyleSheet2.create({
 
 // src/ui/SettingsSheet.tsx
 import {
-  View as View3,
-  Text as Text3,
-  ScrollView,
-  TouchableOpacity as TouchableOpacity2,
-  ActivityIndicator as ActivityIndicator2,
-  StyleSheet as StyleSheet3
+  View as View4,
+  Text as Text4,
+  ScrollView as ScrollView2,
+  TouchableOpacity as TouchableOpacity3,
+  ActivityIndicator as ActivityIndicator3,
+  StyleSheet as StyleSheet4
 } from "react-native";
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function truncateAddress2(address, chars = 4) {
   if (address.length <= chars * 2 + 3) return address;
   return `${address.slice(0, chars)}...${address.slice(-chars)}`;
@@ -1164,13 +1674,13 @@ function SettingsSheet({
   loggingOut = false
 }) {
   const t = useDubsTheme();
-  return /* @__PURE__ */ jsxs3(
-    ScrollView,
+  return /* @__PURE__ */ jsxs4(
+    ScrollView2,
     {
       style: [styles3.container, { backgroundColor: t.background }],
       contentContainerStyle: styles3.content,
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           UserProfileCard,
           {
             walletAddress,
@@ -1179,49 +1689,49 @@ function SettingsSheet({
             memberSince
           }
         ),
-        /* @__PURE__ */ jsxs3(View3, { style: [styles3.actionsCard, { backgroundColor: t.surface, borderColor: t.border }], children: [
-          onCopyAddress ? /* @__PURE__ */ jsxs3(
-            TouchableOpacity2,
+        /* @__PURE__ */ jsxs4(View4, { style: [styles3.actionsCard, { backgroundColor: t.surface, borderColor: t.border }], children: [
+          onCopyAddress ? /* @__PURE__ */ jsxs4(
+            TouchableOpacity3,
             {
               style: styles3.actionRow,
               onPress: onCopyAddress,
               activeOpacity: 0.7,
               children: [
-                /* @__PURE__ */ jsxs3(View3, { style: styles3.actionRowLeft, children: [
-                  /* @__PURE__ */ jsx4(Text3, { style: [styles3.actionLabel, { color: t.text }], children: "Wallet Address" }),
-                  /* @__PURE__ */ jsx4(Text3, { style: [styles3.actionValue, { color: t.textMuted }], children: truncateAddress2(walletAddress) })
+                /* @__PURE__ */ jsxs4(View4, { style: styles3.actionRowLeft, children: [
+                  /* @__PURE__ */ jsx5(Text4, { style: [styles3.actionLabel, { color: t.text }], children: "Wallet Address" }),
+                  /* @__PURE__ */ jsx5(Text4, { style: [styles3.actionValue, { color: t.textMuted }], children: truncateAddress2(walletAddress) })
                 ] }),
-                /* @__PURE__ */ jsx4(Text3, { style: [styles3.copyLabel, { color: t.accent }], children: "Copy" })
+                /* @__PURE__ */ jsx5(Text4, { style: [styles3.copyLabel, { color: t.accent }], children: "Copy" })
               ]
             }
           ) : null,
-          onSupport ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-            onCopyAddress ? /* @__PURE__ */ jsx4(View3, { style: [styles3.separator, { backgroundColor: t.border }] }) : null,
-            /* @__PURE__ */ jsxs3(
-              TouchableOpacity2,
+          onSupport ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+            onCopyAddress ? /* @__PURE__ */ jsx5(View4, { style: [styles3.separator, { backgroundColor: t.border }] }) : null,
+            /* @__PURE__ */ jsxs4(
+              TouchableOpacity3,
               {
                 style: styles3.actionRow,
                 onPress: onSupport,
                 activeOpacity: 0.7,
                 children: [
-                  /* @__PURE__ */ jsx4(Text3, { style: [styles3.actionLabel, { color: t.text }], children: "Help & Support" }),
-                  /* @__PURE__ */ jsx4(Text3, { style: [styles3.chevron, { color: t.textMuted }], children: "\u203A" })
+                  /* @__PURE__ */ jsx5(Text4, { style: [styles3.actionLabel, { color: t.text }], children: "Help & Support" }),
+                  /* @__PURE__ */ jsx5(Text4, { style: [styles3.chevron, { color: t.textMuted }], children: "\u203A" })
                 ]
               }
             )
           ] }) : null
         ] }),
-        /* @__PURE__ */ jsx4(
-          TouchableOpacity2,
+        /* @__PURE__ */ jsx5(
+          TouchableOpacity3,
           {
             style: [styles3.logoutButton, { borderColor: t.live }],
             onPress: onLogout,
             disabled: loggingOut,
             activeOpacity: 0.7,
-            children: loggingOut ? /* @__PURE__ */ jsx4(ActivityIndicator2, { color: t.live, size: "small" }) : /* @__PURE__ */ jsx4(Text3, { style: [styles3.logoutText, { color: t.live }], children: "Log Out" })
+            children: loggingOut ? /* @__PURE__ */ jsx5(ActivityIndicator3, { color: t.live, size: "small" }) : /* @__PURE__ */ jsx5(Text4, { style: [styles3.logoutText, { color: t.live }], children: "Log Out" })
           }
         ),
-        appVersion ? /* @__PURE__ */ jsxs3(Text3, { style: [styles3.version, { color: t.textDim }], children: [
+        appVersion ? /* @__PURE__ */ jsxs4(Text4, { style: [styles3.version, { color: t.textDim }], children: [
           "v",
           appVersion
         ] }) : null
@@ -1229,7 +1739,7 @@ function SettingsSheet({
     }
   );
 }
-var styles3 = StyleSheet3.create({
+var styles3 = StyleSheet4.create({
   container: {
     flex: 1
   },
@@ -1291,6 +1801,7 @@ var styles3 = StyleSheet3.create({
   }
 });
 export {
+  AuthGate,
   ConnectWalletScreen,
   DEFAULT_BASE_URL,
   DEFAULT_RPC_URL,