@dubsdotapp/expo 0.1.1 → 0.1.3

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AuthGate: () => AuthGate,
   ConnectWalletScreen: () => ConnectWalletScreen,
   DEFAULT_BASE_URL: () => DEFAULT_BASE_URL,
   DEFAULT_RPC_URL: () => DEFAULT_RPC_URL,
@@ -908,7 +909,7 @@ function useAuth() {
       setStatus("error");
     }
   }, [client, wallet]);
-  const register = (0, import_react9.useCallback)(async (username, referralCode) => {
+  const register = (0, import_react9.useCallback)(async (username, referralCode, avatarUrl) => {
     try {
       const pending = pendingAuth.current;
       if (!pending) {
@@ -921,7 +922,8 @@ function useAuth() {
         signature: pending.signature,
         nonce: pending.nonce,
         username,
-        referralCode
+        referralCode,
+        avatarUrl
       });
       pendingAuth.current = null;
       setUser(result.user);
@@ -973,7 +975,8 @@ function useAuth() {
   };
 }
 
-// src/ui/ConnectWalletScreen.tsx
+// src/ui/AuthGate.tsx
+var import_react10 = __toESM(require("react"));
 var import_react_native2 = require("react-native");
 
 // src/ui/theme.ts
@@ -1015,8 +1018,503 @@ function useDubsTheme() {
   return scheme === "light" ? light : dark;
 }
 
-// src/ui/ConnectWalletScreen.tsx
+// src/ui/AuthGate.tsx
 var import_jsx_runtime2 = require("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] = (0, import_react10.useState)("init");
+  const [registrationPhase, setRegistrationPhase] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
+    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;
+    };
+  }, []);
+  (0, import_react10.useEffect)(() => {
+    if (auth.status === "needsRegistration") setRegistrationPhase(true);
+  }, [auth.status]);
+  (0, import_react10.useEffect)(() => {
+    if (auth.token) onSaveToken(auth.token);
+  }, [auth.token]);
+  const retry = (0, import_react10.useCallback)(() => {
+    setRegistrationPhase(false);
+    auth.reset();
+    auth.authenticate();
+  }, [auth]);
+  const handleRegister = (0, import_react10.useCallback)(
+    (username, referralCode, avatarUrl) => {
+      auth.register(username, referralCode, avatarUrl);
+    },
+    [auth]
+  );
+  if (phase === "init") {
+    if (renderLoading) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderLoading("authenticating") });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultLoadingScreen, { status: "authenticating", appName });
+  }
+  if (auth.status === "authenticated") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+  if (registrationPhase) {
+    const isRegistering = auth.status === "registering";
+    const regError = auth.status === "error" ? auth.error : null;
+    if (renderRegistration) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderRegistration({ onRegister: handleRegister, registering: isRegistering, error: regError, client }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      DefaultRegistrationScreen,
+      {
+        onRegister: handleRegister,
+        registering: isRegistering,
+        error: regError,
+        client,
+        appName
+      }
+    );
+  }
+  if (auth.status === "error" && auth.error) {
+    if (renderError) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderError(auth.error, retry) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultErrorScreen, { error: auth.error, onRetry: retry, appName });
+  }
+  if (renderLoading) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderLoading(auth.status) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [s.container, { backgroundColor: t.background }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.centerContent, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.brandingSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [s.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: s.logoText, children: "D" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.appNameText, { color: t.text }], children: appName })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.loadingSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.ActivityIndicator, { size: "large", color: t.accent }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.statusText, { color: t.textMuted }], children: statusText[status] || "Loading..." })
+    ] })
+  ] }) });
+}
+function DefaultErrorScreen({ error, onRetry, appName }) {
+  const t = useDubsTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [s.container, { backgroundColor: t.background }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.spreadContent, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.brandingSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [s.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: s.logoText, children: "D" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.appNameText, { color: t.text }], children: appName })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: { gap: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [s.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.errorText, { color: t.errorText }], children: error.message }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.TouchableOpacity, { style: [s.primaryBtn, { backgroundColor: t.accent }], onPress: onRetry, activeOpacity: 0.8, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: s.primaryBtnText, children: "Try Again" }) })
+    ] })
+  ] }) });
+}
+function StepIndicator({ currentStep }) {
+  const t = useDubsTheme();
+  const steps = [0, 1, 2, 3];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: s.stepRow, children: steps.map((i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react10.default.Fragment, { children: [
+    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [s.stepLine, { backgroundColor: i <= currentStep ? t.success : t.border }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native2.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__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: s.stepCheck, children: "\u2713" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.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] = (0, import_react10.useState)(0);
+  const [avatarSeed, setAvatarSeed] = (0, import_react10.useState)(generateSeed);
+  const [avatarStyle, setAvatarStyle] = (0, import_react10.useState)("adventurer");
+  const [showStyles, setShowStyles] = (0, import_react10.useState)(false);
+  const [username, setUsername] = (0, import_react10.useState)("");
+  const [referralCode, setReferralCode] = (0, import_react10.useState)("");
+  const [checking, setChecking] = (0, import_react10.useState)(false);
+  const [availability, setAvailability] = (0, import_react10.useState)(null);
+  const debounceRef = (0, import_react10.useRef)(null);
+  const fadeAnim = (0, import_react10.useRef)(new import_react_native2.Animated.Value(1)).current;
+  const slideAnim = (0, import_react10.useRef)(new import_react_native2.Animated.Value(0)).current;
+  const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed);
+  (0, import_react10.useEffect)(() => {
+    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 = (0, import_react10.useCallback)((newStep) => {
+    const dir = newStep > step ? 1 : -1;
+    import_react_native2.Keyboard.dismiss();
+    import_react_native2.Animated.parallel([
+      import_react_native2.Animated.timing(fadeAnim, { toValue: 0, duration: 120, useNativeDriver: true }),
+      import_react_native2.Animated.timing(slideAnim, { toValue: -dir * 40, duration: 120, useNativeDriver: true })
+    ]).start(() => {
+      setStep(newStep);
+      slideAnim.setValue(dir * 40);
+      import_react_native2.Animated.parallel([
+        import_react_native2.Animated.timing(fadeAnim, { toValue: 1, duration: 200, useNativeDriver: true }),
+        import_react_native2.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 = () => {
+    import_react_native2.Keyboard.dismiss();
+    onRegister(username.trim(), referralCode.trim() || void 0, avatarUrl);
+  };
+  const renderAvatarStep = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.stepContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.stepTop, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.title, { color: t.text }], children: "Choose Your Avatar" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.subtitle, { color: t.textMuted }], children: "Pick a look that represents you" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StepIndicator, { currentStep: 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: s.avatarCenter, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [s.avatarFrame, { borderColor: t.accent }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Image, { source: { uri: avatarUrl }, style: s.avatarLarge }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [s.checkBadge, { backgroundColor: t.success }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: s.checkBadgeText, children: "\u2713" }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.avatarActions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_native2.TouchableOpacity,
+          {
+            style: [s.outlineBtn, { borderColor: t.border }],
+            onPress: () => setAvatarSeed(generateSeed()),
+            activeOpacity: 0.7,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.outlineBtnText, { color: t.text }], children: "\u21BB  Shuffle" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_native2.TouchableOpacity,
+          {
+            style: [s.outlineBtn, { borderColor: t.accent, backgroundColor: t.accent + "15" }],
+            onPress: () => setShowStyles(!showStyles),
+            activeOpacity: 0.7,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.outlineBtnText, { color: t.accent }], children: "\u263A  Customize" })
+          }
+        )
+      ] }),
+      showStyles && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: s.styleScroll, children: DICEBEAR_STYLES.map((st) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native2.TouchableOpacity,
+        {
+          onPress: () => setAvatarStyle(st),
+          style: [s.styleThumbWrap, { borderColor: st === avatarStyle ? t.accent : t.border }],
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Image, { source: { uri: getAvatarUrl(st, avatarSeed, 80) }, style: s.styleThumb })
+        },
+        st
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: s.bottomRow, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native2.TouchableOpacity,
+      {
+        style: [s.primaryBtn, { backgroundColor: t.accent, flex: 1 }],
+        onPress: () => animateToStep(1),
+        activeOpacity: 0.8,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: s.primaryBtnText, children: "Continue  \u203A" })
+      }
+    ) })
+  ] });
+  const renderUsernameStep = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.stepContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.stepTop, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.headerRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.TouchableOpacity, { onPress: () => animateToStep(0), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.backChevron, { color: t.text }], children: "\u2039" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.titleInline, { color: t.text }], children: "Pick a Username" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.subtitle, { color: t.textMuted }], children: "This is how others will see you" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StepIndicator, { currentStep: 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: s.avatarCenter, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [s.avatarFrameSmall, { borderColor: t.accent }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Image, { source: { uri: avatarUrl }, style: s.avatarSmall }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [s.checkBadgeSm, { backgroundColor: t.success }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: s.checkBadgeTextSm, children: "\u2713" }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.inputGroup, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.Text, { style: [s.inputLabel, { color: t.text }], children: [
+          "Username ",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: { color: t.errorText }, children: "*" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_native2.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__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.hint, { color: t.textDim }], children: "Checking..." }) : availability ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.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__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.hint, { color: t.textDim }], children: "At least 3 characters" }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.bottomRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native2.TouchableOpacity,
+        {
+          style: [s.secondaryBtn, { borderColor: t.border }],
+          onPress: () => animateToStep(0),
+          activeOpacity: 0.7,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.secondaryBtnText, { color: t.text }], children: "\u2039  Back" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native2.TouchableOpacity,
+        {
+          style: [s.primaryBtn, { backgroundColor: t.accent, flex: 1, opacity: canContinueUsername ? 1 : 0.4 }],
+          onPress: () => animateToStep(2),
+          disabled: !canContinueUsername,
+          activeOpacity: 0.8,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: s.primaryBtnText, children: "Continue  \u203A" })
+        }
+      )
+    ] })
+  ] });
+  const renderReferralStep = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.stepContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.stepTop, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.headerRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.TouchableOpacity, { onPress: () => animateToStep(1), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.backChevron, { color: t.text }], children: "\u2039" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.titleInline, { color: t.text }], children: "Almost There!" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.subtitle, { color: t.textMuted }], children: "Got a referral code? (optional)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StepIndicator, { currentStep: 2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [s.profileCard, { borderColor: t.border }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.profileLabel, { color: t.textMuted }], children: "Your Profile" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.profileRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Image, { source: { uri: avatarUrl }, style: s.profileAvatar }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: { gap: 4 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.Text, { style: [s.profileUsername, { color: t.text }], children: [
+              "@",
+              username
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.Text, { style: [s.profileReady, { color: t.success }], children: [
+              "\u2713",
+              " Ready to go!"
+            ] })
+          ] })
+        ] })
+      ] }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [s.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.errorText, { color: t.errorText }], children: error.message }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.inputGroup, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.Text, { style: [s.inputLabel, { color: t.text }], children: [
+          "Referral Code ",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: { color: t.textMuted }, children: "(optional)" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_native2.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__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.Text, { style: [s.hint, { color: t.textMuted }], children: [
+          "\u{1F381}",
+          " If a friend invited you, enter their code to give them credit!"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: s.bottomRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native2.TouchableOpacity,
+        {
+          style: [s.secondaryBtn, { borderColor: t.border }],
+          onPress: () => animateToStep(1),
+          disabled: registering,
+          activeOpacity: 0.7,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [s.secondaryBtnText, { color: t.text }], children: "\u2039  Back" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native2.TouchableOpacity,
+        {
+          style: [s.primaryBtn, { backgroundColor: t.accent, flex: 1, opacity: registering ? 0.7 : 1 }],
+          onPress: handleSubmit,
+          disabled: registering,
+          activeOpacity: 0.8,
+          children: registering ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.ActivityIndicator, { color: "#FFFFFF", size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.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__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.KeyboardAvoidingView,
+    {
+      style: [s.container, { backgroundColor: t.background }],
+      behavior: import_react_native2.Platform.OS === "ios" ? "padding" : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native2.ScrollView,
+        {
+          contentContainerStyle: { flexGrow: 1 },
+          keyboardShouldPersistTaps: "handled",
+          bounces: false,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_react_native2.Animated.View,
+            {
+              style: [
+                { flex: 1 },
+                { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
+              ],
+              children: renderStep()
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var s = import_react_native2.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
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function ConnectWalletScreen({
   onConnect,
   connecting = false,
@@ -1024,38 +1522,38 @@ function ConnectWalletScreen({
   appName = "Dubs"
 }) {
   const t = useDubsTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles.container, { backgroundColor: t.background }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.content, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.brandingSection, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles.logoText, children: "D" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [styles.appName, { color: t.text }], children: appName }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [styles.subtitle, { color: t.textMuted }], children: "Connect your Solana wallet to get started" })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles.container, { backgroundColor: t.background }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles.content, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles.brandingSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: styles.logoText, children: "D" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [styles.appName, { color: t.text }], children: appName }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [styles.subtitle, { color: t.textMuted }], children: "Connect your Solana wallet to get started" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.actionSection, children: [
-      error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_native2.View,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles.actionSection, children: [
+      error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native3.View,
         {
           style: [
             styles.errorBox,
             { backgroundColor: t.errorBg, borderColor: t.errorBorder }
           ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [styles.errorText, { color: t.errorText }], children: error })
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [styles.errorText, { color: t.errorText }], children: error })
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_native2.TouchableOpacity,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native3.TouchableOpacity,
         {
           style: [styles.connectButton, { backgroundColor: t.accent }],
           onPress: onConnect,
           disabled: connecting,
           activeOpacity: 0.8,
-          children: connecting ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.ActivityIndicator, { color: "#FFFFFF", size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles.connectButtonText, children: "Connect Wallet" })
+          children: connecting ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.ActivityIndicator, { color: "#FFFFFF", size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: styles.connectButtonText, children: "Connect Wallet" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [styles.hint, { color: t.textDim }], children: "Phantom, Solflare, or any Solana wallet" })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [styles.hint, { color: t.textDim }], children: "Phantom, Solflare, or any Solana wallet" })
     ] })
   ] }) });
 }
-var styles = import_react_native2.StyleSheet.create({
+var styles = import_react_native3.StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center"
@@ -1124,9 +1622,9 @@ var styles = import_react_native2.StyleSheet.create({
 });
 
 // src/ui/UserProfileCard.tsx
-var import_react10 = require("react");
-var import_react_native3 = require("react-native");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_react_native4 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function truncateAddress(address, chars = 4) {
   if (address.length <= chars * 2 + 3) return address;
   return `${address.slice(0, chars)}...${address.slice(-chars)}`;
@@ -1144,20 +1642,20 @@ function UserProfileCard({
   memberSince
 }) {
   const t = useDubsTheme();
-  const imageUri = (0, import_react10.useMemo)(
+  const imageUri = (0, import_react11.useMemo)(
     () => avatarUrl || `https://api.dicebear.com/9.x/avataaars/png?seed=${walletAddress}&size=128`,
     [avatarUrl, walletAddress]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles2.card, { backgroundColor: t.surface, borderColor: t.border }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Image, { source: { uri: imageUri }, style: styles2.avatar }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles2.info, children: [
-      username ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [styles2.username, { color: t.text }], children: username }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [styles2.address, { color: t.textMuted }], children: truncateAddress(walletAddress) }),
-      memberSince ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [styles2.memberSince, { color: t.textDim }], children: formatMemberSince(memberSince) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [styles2.card, { backgroundColor: t.surface, borderColor: t.border }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Image, { source: { uri: imageUri }, style: styles2.avatar }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles2.info, children: [
+      username ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles2.username, { color: t.text }], children: username }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles2.address, { color: t.textMuted }], children: truncateAddress(walletAddress) }),
+      memberSince ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles2.memberSince, { color: t.textDim }], children: formatMemberSince(memberSince) }) : null
     ] })
   ] });
 }
-var styles2 = import_react_native3.StyleSheet.create({
+var styles2 = import_react_native4.StyleSheet.create({
   card: {
     flexDirection: "row",
     alignItems: "center",
@@ -1191,8 +1689,8 @@ var styles2 = import_react_native3.StyleSheet.create({
 });
 
 // src/ui/SettingsSheet.tsx
-var import_react_native4 = require("react-native");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react_native5 = require("react-native");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function truncateAddress2(address, chars = 4) {
   if (address.length <= chars * 2 + 3) return address;
   return `${address.slice(0, chars)}...${address.slice(-chars)}`;
@@ -1209,13 +1707,13 @@ function SettingsSheet({
   loggingOut = false
 }) {
   const t = useDubsTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    import_react_native4.ScrollView,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_react_native5.ScrollView,
     {
       style: [styles3.container, { backgroundColor: t.background }],
       contentContainerStyle: styles3.content,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           UserProfileCard,
           {
             walletAddress,
@@ -1224,49 +1722,49 @@ function SettingsSheet({
             memberSince
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [styles3.actionsCard, { backgroundColor: t.surface, borderColor: t.border }], children: [
-          onCopyAddress ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            import_react_native4.TouchableOpacity,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [styles3.actionsCard, { backgroundColor: t.surface, borderColor: t.border }], children: [
+          onCopyAddress ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            import_react_native5.TouchableOpacity,
             {
               style: styles3.actionRow,
               onPress: onCopyAddress,
               activeOpacity: 0.7,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles3.actionRowLeft, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles3.actionLabel, { color: t.text }], children: "Wallet Address" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles3.actionValue, { color: t.textMuted }], children: truncateAddress2(walletAddress) })
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: styles3.actionRowLeft, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles3.actionLabel, { color: t.text }], children: "Wallet Address" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles3.actionValue, { color: t.textMuted }], children: truncateAddress2(walletAddress) })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles3.copyLabel, { color: t.accent }], children: "Copy" })
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles3.copyLabel, { color: t.accent }], children: "Copy" })
               ]
             }
           ) : null,
-          onSupport ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-            onCopyAddress ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [styles3.separator, { backgroundColor: t.border }] }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-              import_react_native4.TouchableOpacity,
+          onSupport ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+            onCopyAddress ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: [styles3.separator, { backgroundColor: t.border }] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              import_react_native5.TouchableOpacity,
               {
                 style: styles3.actionRow,
                 onPress: onSupport,
                 activeOpacity: 0.7,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles3.actionLabel, { color: t.text }], children: "Help & Support" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles3.chevron, { color: t.textMuted }], children: "\u203A" })
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles3.actionLabel, { color: t.text }], children: "Help & Support" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles3.chevron, { color: t.textMuted }], children: "\u203A" })
                 ]
               }
             )
           ] }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_react_native4.TouchableOpacity,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react_native5.TouchableOpacity,
           {
             style: [styles3.logoutButton, { borderColor: t.live }],
             onPress: onLogout,
             disabled: loggingOut,
             activeOpacity: 0.7,
-            children: loggingOut ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.ActivityIndicator, { color: t.live, size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles3.logoutText, { color: t.live }], children: "Log Out" })
+            children: loggingOut ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.ActivityIndicator, { color: t.live, size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles3.logoutText, { color: t.live }], children: "Log Out" })
           }
         ),
-        appVersion ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.Text, { style: [styles3.version, { color: t.textDim }], children: [
+        appVersion ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.Text, { style: [styles3.version, { color: t.textDim }], children: [
           "v",
           appVersion
         ] }) : null
@@ -1274,7 +1772,7 @@ function SettingsSheet({
     }
   );
 }
-var styles3 = import_react_native4.StyleSheet.create({
+var styles3 = import_react_native5.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -1337,6 +1835,7 @@ var styles3 = import_react_native4.StyleSheet.create({
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AuthGate,
   ConnectWalletScreen,
   DEFAULT_BASE_URL,
   DEFAULT_RPC_URL,