@loafmarkets/ui 0.1.375 → 0.1.376

package/dist/index.js

@@ -6626,6 +6626,14 @@ PropertySubheader.displayName = "PropertySubheader";
 var DEFAULT_LOGO_SRC = Loaf_logo_Banner_default;
 var DEFAULT_LOGO_ALT = "Loaf";
 var OTP_INPUT_LENGTH = 6;
+var friendlyError = (err, fallback) => {
+  const data = err?.response?.data;
+  if (typeof data?.error === "string" && data.error.trim()) return data.error;
+  if (typeof data?.message === "string" && data.message.trim()) return data.message;
+  const msg = err instanceof Error ? err.message : "";
+  if (msg && !/request failed with status code/i.test(msg) && !/network error/i.test(msg)) return msg;
+  return fallback;
+};
 var LoginPopup = ({
   onClose,
   onOpenEarlyAccess,
@@ -6647,7 +6655,9 @@ var LoginPopup = ({
   kycStatus: kycStatusProp,
   walletAddress,
   onSubmitReferralCode,
-  onJoinWaitlist
+  onValidateCode,
+  onCheckAccess,
+  gate
 }) => {
   const [view, setView] = React5.useState(() => initialView ?? "main");
   const [email, setEmail] = React5.useState("");
@@ -6658,8 +6668,10 @@ var LoginPopup = ({
   const [referralCode, setReferralCode] = React5.useState("");
   const [referralLoading, setReferralLoading] = React5.useState(false);
   const [referralError, setReferralError] = React5.useState("");
-  const [waitlistLoading, setWaitlistLoading] = React5.useState(false);
-  const [waitlistMessage, setWaitlistMessage] = React5.useState("");
+  const [codeStatus, setCodeStatus] = React5.useState("idle");
+  const [signInRevealed, setSignInRevealed] = React5.useState(false);
+  const [otpStatus, setOtpStatus] = React5.useState("idle");
+  const [signInMode, setSignInMode] = React5.useState(false);
   const [loading, setLoading] = React5.useState(false);
   const [isSignUp, setIsSignUp] = React5.useState(false);
   const [fundingAmount] = React5.useState("");
@@ -6671,6 +6683,33 @@ var LoginPopup = ({
   const [fundingError, setFundingError] = React5.useState("");
   const [transakWidgetUrl, setTransakWidgetUrl] = React5.useState(null);
   const suppressAutoCloseRef = React5__namespace.default.useRef(false);
+  const validatedCodeRef = React5__namespace.default.useRef(null);
+  const finishGate = React5__namespace.default.useCallback(async () => {
+    if (!gate) return true;
+    const code = validatedCodeRef.current;
+    if (code) {
+      try {
+        await onSubmitReferralCode?.(code);
+        window.dispatchEvent(new CustomEvent("loaf:onboarding-start"));
+        return true;
+      } catch {
+      }
+    }
+    const hasAccess = onCheckAccess ? await onCheckAccess() : true;
+    if (hasAccess) return true;
+    suppressAutoCloseRef.current = true;
+    validatedCodeRef.current = null;
+    setOtp(Array(OTP_INPUT_LENGTH).fill(""));
+    setOtpStatus("idle");
+    setSignInMode(false);
+    setSignInRevealed(false);
+    setCodeStatus(code ? "invalid" : "idle");
+    setView("referral");
+    setError(
+      code ? "That code can't be redeemed anymore. Enter a different access code." : "Enter your access code to continue."
+    );
+    return false;
+  }, [gate, onSubmitReferralCode, onCheckAccess]);
   React5.useEffect(() => {
     if (typeof initialView === "string") {
       setView(initialView);
@@ -6725,11 +6764,11 @@ var LoginPopup = ({
   }, [autoCloseOnAuth, currentUser, isAuthenticated, onClose, view]);
   React5.useEffect(() => {
     const handleEsc = (e) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape" && !gate) onClose();
     };
     window.addEventListener("keydown", handleEsc);
     return () => window.removeEventListener("keydown", handleEsc);
-  }, [onClose]);
+  }, [onClose, gate]);
   const handleWalletLogin = async () => {
     if (onWalletLogin) {
       suppressAutoCloseRef.current = true;
@@ -6741,12 +6780,16 @@ var LoginPopup = ({
           setView("wallet-handle");
           return;
         }
-        suppressAutoCloseRef.current = false;
-        onClose();
+        if (await finishGate()) {
+          suppressAutoCloseRef.current = false;
+          onClose();
+        }
         return;
       } catch (err) {
         console.error("[LoginTrace][Popup] Wallet login failed", err);
         suppressAutoCloseRef.current = false;
+        setError(friendlyError(err, "Wallet login failed. Please try again."));
+        return;
       }
     }
     onClose();
@@ -6768,6 +6811,13 @@ var LoginPopup = ({
     setError("");
     try {
       await onWalletSignup(handle.trim());
+      if (gate) {
+        if (await finishGate()) {
+          suppressAutoCloseRef.current = false;
+          onClose();
+        }
+        return;
+      }
       if (onSubmitReferralCode) {
         setView("referral");
       } else {
@@ -6796,6 +6846,7 @@ var LoginPopup = ({
     }
     setLoading(true);
     setError("");
+    setOtpStatus("idle");
     const normalizedHandle = isSignUp && handle.trim() ? handle.trim() : void 0;
     try {
       const demoResult = await onDemoLogin?.(email, normalizedHandle ?? null);
@@ -6816,9 +6867,14 @@ var LoginPopup = ({
       setView("otp");
       setOtp(Array(OTP_INPUT_LENGTH).fill(""));
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to send verification code";
+      const message = friendlyError(err, "We couldn't send a code to that email. Please double-check it and try again.");
       console.error("[LoginTrace][Popup] onSendEmailCode threw", err);
       if (!isSignUp && message.includes("No account found")) {
+        if (signInMode) {
+          setError("No account found for this email. Go back and enter your access code to create one.");
+          setLoading(false);
+          return;
+        }
         setIsSignUp(true);
         setError("");
         setLoading(false);
@@ -6831,7 +6887,7 @@ var LoginPopup = ({
           setView("otp");
           setOtp(Array(OTP_INPUT_LENGTH).fill(""));
         } catch (retryErr) {
-          setError(retryErr instanceof Error ? retryErr.message : "Failed to send verification code");
+          setError(friendlyError(retryErr, "We couldn't send a code to that email. Please try again."));
         }
         setLoading(false);
         return;
@@ -6925,6 +6981,30 @@ var LoginPopup = ({
       setLoading(false);
     }
   };
+  const runGateOtpVerify = React5__namespace.default.useCallback(async (code) => {
+    if (!onVerifyEmailCode) return;
+    setOtpStatus("checking");
+    setError("");
+    suppressAutoCloseRef.current = true;
+    try {
+      await onVerifyEmailCode({ code, email });
+      if (await finishGate()) {
+        setOtpStatus("valid");
+        setTimeout(() => onClose(), 750);
+      }
+    } catch {
+      suppressAutoCloseRef.current = false;
+      setOtpStatus("invalid");
+    }
+  }, [onVerifyEmailCode, email, finishGate, onClose]);
+  React5.useEffect(() => {
+    if (!gate || view !== "otp") return;
+    if (otp.join("").length < OTP_INPUT_LENGTH) {
+      if (otpStatus === "invalid") setOtpStatus("idle");
+      return;
+    }
+    if (otpStatus === "idle") void runGateOtpVerify(otp.join(""));
+  }, [gate, view, otp, otpStatus, runGateOtpVerify]);
   const handleKycWidgetResult = (result) => {
     setShowKycWidget(false);
     if (result.passed) {
@@ -7021,7 +7101,7 @@ var LoginPopup = ({
     setError("");
   };
   if (view === "main") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(LogoContainer3, { children: [
@@ -7050,7 +7130,7 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "email") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(BackButton, { onClick: handleBack, children: [
         /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
@@ -7089,7 +7169,7 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "wallet-handle") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       !loading && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
@@ -7114,7 +7194,71 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "otp") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    if (gate) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(GateShell, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(GateTint, { $reveal: otpStatus === "valid" ? 3 : 2 }),
+        /* @__PURE__ */ jsxRuntime.jsxs(GateForm, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(GateBrand, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(GateLogoLink, { href: "https://loafmarkets.com", "aria-label": "Go to loafmarkets.com", children: /* @__PURE__ */ jsxRuntime.jsx(GateLogo, { src: logoSrc, alt: logoAlt }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(GateBrandDivider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(GateBetaTag, { children: "Private Beta" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(GateOtpText, { children: [
+            "We sent a code to",
+            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: email })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(OTPContainer, { children: otp.map((digit, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            OTPInput,
+            {
+              id: `otp-${index}`,
+              type: "text",
+              inputMode: "numeric",
+              maxLength: 1,
+              $status: otpStatus,
+              readOnly: otpStatus === "valid" || otpStatus === "checking",
+              value: digit,
+              onChange: (event) => handleOTPChange(index, event.target.value),
+              onKeyDown: (event) => handleOTPKeyDown(index, event),
+              onInput: (event) => handleOTPInput(index, event),
+              onPaste: handleOTPPaste,
+              autoComplete: index === 0 ? "one-time-code" : "off",
+              autoFocus: index === 0
+            },
+            index
+          )) }),
+          otpStatus === "invalid" && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: "That code isn't right. Try again." }),
+          /* @__PURE__ */ jsxRuntime.jsxs(GateResendText, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (event) => {
+                  event.preventDefault();
+                  void handleSendCode(event);
+                },
+                children: "Resend code"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setOtp(Array(OTP_INPUT_LENGTH).fill(""));
+                  setOtpStatus("idle");
+                  setError("");
+                  setView("referral");
+                },
+                children: "Back"
+              }
+            )
+          ] })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       !loading && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       loading ? /* @__PURE__ */ jsxRuntime.jsxs(AccountCreationLoader, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(SpinnerRing, {}),
@@ -7334,84 +7478,186 @@ var LoginPopup = ({
         setReferralLoading(false);
       }
     };
-    const handleJoinWaitlistSkip = async () => {
-      if (!onJoinWaitlist || !email) {
-        onClose();
-        return;
+    const CODE_PREFIX = "LOAF-";
+    const codeSuffix = referralCode.startsWith(CODE_PREFIX) ? referralCode.slice(CODE_PREFIX.length) : referralCode.replace(/^LOAF-?/i, "");
+    const runCodeValidation = async (fullCode) => {
+      setCodeStatus("checking");
+      setError("");
+      try {
+        const ok = onValidateCode ? await onValidateCode(fullCode) : true;
+        if (!ok) {
+          validatedCodeRef.current = null;
+          setCodeStatus("invalid");
+          return;
+        }
+        validatedCodeRef.current = fullCode;
+        setCodeStatus("valid");
+        if (isAuthenticated) {
+          if (await finishGate()) setTimeout(() => onClose(), 500);
+          return;
+        }
+        setIsSignUp(true);
+        setSignInRevealed(true);
+      } catch {
+        validatedCodeRef.current = null;
+        setCodeStatus("invalid");
       }
+    };
+    const setCodeSuffix = (suffix) => {
+      setReferralCode(CODE_PREFIX + suffix);
       setReferralError("");
-      setWaitlistLoading(true);
-      try {
-        const message = await onJoinWaitlist(email);
-        setWaitlistMessage(message || "You're on the waitlist.");
-        setTimeout(() => onClose(), 1400);
-      } catch (err) {
-        setReferralError(err instanceof Error ? err.message : "Couldn't join the waitlist. Please try again.");
-        setWaitlistLoading(false);
+      setError("");
+      if (gate) {
+        if (suffix.length === 5) void runCodeValidation(CODE_PREFIX + suffix);
+        else {
+          validatedCodeRef.current = null;
+          setCodeStatus("idle");
+        }
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-          width: 52,
-          height: 52,
-          borderRadius: 14,
-          background: "linear-gradient(135deg, rgba(230,200,126,0.15) 0%, rgba(230,200,126,0.08) 100%)",
-          border: "1px solid rgba(230,200,126,0.25)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          marginBottom: "1.1rem"
-        }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#e6c87e", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "Enter code to access Private Beta trading" }),
-        /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { style: { marginBottom: "1.5rem" }, children: "Enter code to trade 100k in USDC, or skip to continue." }),
-        /* @__PURE__ */ jsxRuntime.jsxs(EmailFormContainer, { style: { width: "100%", marginBottom: 0 }, children: [
+    const handleCodeChange = (e) => {
+      setCodeSuffix(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 5));
+    };
+    const handleCodePaste = (e) => {
+      e.preventDefault();
+      const text = (e.clipboardData.getData("text") || "").toUpperCase();
+      setCodeSuffix(text.replace(/^LOAF-?/, "").replace(/[^A-Z0-9]/g, "").slice(0, 5));
+    };
+    const codeComplete = codeSuffix.length === 5;
+    const codeInput = /* @__PURE__ */ jsxRuntime.jsx(
+      CodeSuffixInput,
+      {
+        type: "text",
+        inputMode: "text",
+        autoComplete: "off",
+        autoCapitalize: "characters",
+        spellCheck: false,
+        maxLength: 5,
+        "aria-label": "Access code",
+        readOnly: codeStatus === "valid",
+        value: codeSuffix,
+        onChange: handleCodeChange,
+        onPaste: handleCodePaste,
+        onKeyDown: (e) => {
+          if (e.key !== "Enter" || !codeComplete) return;
+          if (gate) void runCodeValidation(referralCode);
+          else void handleReferralSubmit();
+        },
+        autoFocus: true
+      }
+    );
+    const signInStep = /* @__PURE__ */ jsxRuntime.jsxs(GateReveal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSendCode, style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CodeInputWrapper, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            EmailInput,
+            GateEmailInput,
             {
-              type: "text",
-              placeholder: "e.g. LOAF-XXXX",
-              value: referralCode,
-              onChange: (e) => {
-                setReferralCode(e.target.value.toUpperCase());
-                setReferralError("");
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter") void handleReferralSubmit();
-              },
+              type: "email",
+              inputMode: "email",
+              autoComplete: "email",
+              placeholder: "Enter your email",
+              value: email,
+              onChange: (event) => setEmail(event.target.value),
               autoFocus: true
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SubmitButton,
-            {
-              type: "button",
-              onClick: () => void handleReferralSubmit(),
-              disabled: referralLoading || !referralCode.trim(),
-              children: referralLoading ? "Verifying\u2026" : "Apply Code"
-            }
-          ),
-          referralError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: referralError })
+          /* @__PURE__ */ jsxRuntime.jsx(GateSubmit, { type: "submit", "aria-label": "Continue", disabled: loading || !email, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(GateSpinner, {}) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14M13 6l6 6-6 6" }) }) })
         ] }),
-        waitlistMessage ? /* @__PURE__ */ jsxRuntime.jsxs(StatusMessage, { style: { marginTop: "0.75rem" }, children: [
-          "\u2713 ",
-          waitlistMessage
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-          OnboardingSkipButton,
+        error && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(GateOr, { children: "or" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(GateWalletButton, { type: "button", onClick: handleWalletLogin, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }),
+          signInMode ? "Sign in with Wallet" : "Connect Wallet"
+        ] })
+      ] })
+    ] });
+    if (gate) {
+      const codeAccepted = codeStatus === "valid";
+      const showSignIn = signInMode || signInRevealed;
+      return /* @__PURE__ */ jsxRuntime.jsxs(GateShell, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(GateTint, { $reveal: showSignIn ? 1 : 0 }),
+        /* @__PURE__ */ jsxRuntime.jsxs(GateForm, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(GateBrand, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(GateLogoLink, { href: "https://loafmarkets.com", "aria-label": "Go to loafmarkets.com", children: /* @__PURE__ */ jsxRuntime.jsx(GateLogo, { src: logoSrc, alt: logoAlt }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(GateBrandDivider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(GateBetaTag, { children: "Private Beta" })
+          ] }),
+          signInMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            signInStep,
+            /* @__PURE__ */ jsxRuntime.jsx(GateResendText, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setError("");
+                  setSignInMode(false);
+                },
+                children: "\u2190 Enter access code instead"
+              }
+            ) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(CodeInputWrapper, { $status: codeStatus, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CodePrefix, { children: CODE_PREFIX }),
+              codeInput,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                GateSubmit,
+                {
+                  type: "button",
+                  "aria-label": "Submit access code",
+                  $status: codeStatus,
+                  disabled: codeStatus === "checking" || !codeComplete,
+                  onClick: () => void runCodeValidation(referralCode),
+                  children: codeAccepted ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5" }) }) : codeStatus === "checking" ? /* @__PURE__ */ jsxRuntime.jsx(GateSpinner, {}) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14M13 6l6 6-6 6" }) })
+                }
+              )
+            ] }),
+            (codeStatus === "invalid" || error && !signInRevealed) && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error || "That code isn't valid. Double-check and try again." }),
+            signInRevealed ? signInStep : /* @__PURE__ */ jsxRuntime.jsxs(GateResendText, { children: [
+              "Already have an account?",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setError("");
+                    setIsSignUp(false);
+                    setSignInMode(true);
+                  },
+                  children: "Sign in"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(LogoContainer3, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }),
+          /* @__PURE__ */ jsxRuntime.jsx(LogoBeta, { children: "Private Beta" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(TitleText, { children: "Enter your access code" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(EmailFormContainer, { style: { width: "100%", marginTop: "1.5rem", marginBottom: 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CodeInputWrapper, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CodePrefix, { children: CODE_PREFIX }),
+          codeInput
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SubmitButton,
           {
             type: "button",
-            onClick: () => void handleJoinWaitlistSkip(),
-            disabled: waitlistLoading,
-            style: { marginTop: "0.75rem" },
-            children: waitlistLoading ? "Joining\u2026" : email ? "Skip for now & join Waitlist" : "Skip for now"
+            onClick: () => void handleReferralSubmit(),
+            disabled: referralLoading || !codeComplete,
+            children: referralLoading ? "Verifying\u2026" : "Continue"
           }
-        )
+        ),
+        referralError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: referralError })
       ] })
     ] }) });
   }
@@ -7531,8 +7777,9 @@ var Overlay2 = styled10__default.default.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(4px);
+  background-color: ${(props) => props.$gate ? "var(--color-background, #0a0a0a)" : props.$transparent ? "rgba(0, 0, 0, 0.45)" : "rgba(0, 0, 0, 0.8)"};
+  backdrop-filter: ${(props) => props.$gate ? "none" : props.$transparent ? "blur(2px)" : "blur(4px)"};
+  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -7549,15 +7796,15 @@ var Overlay2 = styled10__default.default.div`
   }
 `;
 var PopupContainer = styled10__default.default.div`
-  background-color: var(--color-background, #0a0a0a);
-  border: 1px solid rgba(230, 198, 86, 0.3);
+  background-color: ${(props) => props.$gate ? "transparent" : "var(--color-background, #0a0a0a)"};
+  border: ${(props) => props.$gate ? "none" : "1px solid rgba(230, 198, 86, 0.3)"};
   border-radius: var(--border-radius, 12px);
   padding: 2.5rem;
   max-width: 440px;
   width: 90%;
   position: relative;
   animation: slideUp 0.3s ease-out;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  box-shadow: ${(props) => props.$gate ? "none" : "0 10px 30px rgba(0, 0, 0, 0.3)"};
 
   @keyframes slideUp {
     from {
@@ -7858,6 +8105,268 @@ var EmailInput = styled10__default.default.input`
     color: var(--color-text-secondary, #848e9c);
   }
 `;
+var codeBorderColor = (status, focused) => {
+  if (status === "valid") return "var(--color-positive, #00C076)";
+  if (status === "invalid") return "var(--color-negative, #FF5757)";
+  return focused ? "var(--color-accent, #E6C87E)" : "rgba(230, 198, 86, 0.2)";
+};
+var CodeInputWrapper = styled10__default.default.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 1rem 1.25rem;
+  background-color: var(--color-background-light, #1a1a1a);
+  border: 1px solid ${(props) => codeBorderColor(props.$status, false)};
+  border-radius: var(--border-radius, 8px);
+  box-shadow: ${(props) => props.$status === "valid" ? "0 0 0 1px var(--color-positive, #00C076)" : props.$status === "invalid" ? "0 0 0 1px var(--color-negative, #FF5757)" : "none"};
+  transition: all 0.2s ease;
+
+  &:focus-within {
+    border-color: ${(props) => codeBorderColor(props.$status, true)};
+  }
+`;
+var CodePrefix = styled10__default.default.span`
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  font-family: 'Space Grotesk', monospace;
+  user-select: none;
+`;
+var CodeSuffixInput = styled10__default.default.input`
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text, #eaecef);
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  font-family: 'Space Grotesk', monospace;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: rgba(132, 142, 156, 0.45);
+    letter-spacing: 0.22em;
+  }
+`;
+var GateBrand = styled10__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.7rem;
+  margin-bottom: 0.6rem;
+`;
+var GateLogoLink = styled10__default.default.a`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+
+  &:hover {
+    opacity: 0.85;
+  }
+`;
+var GateLogo = styled10__default.default.img`
+  height: 44px;
+  display: block;
+`;
+var GateBrandDivider = styled10__default.default.span`
+  width: 1px;
+  height: 26px;
+  background: rgba(255, 255, 255, 0.18);
+`;
+var GateBetaTag = styled10__default.default.span`
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+`;
+var GateForm = styled10__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.9rem;
+  width: 100%;
+  max-width: 360px;
+  position: relative;
+  z-index: 1;
+`;
+var GateShell = styled10__default.default.div`
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  background-color: rgba(10, 10, 12, 0.66);
+  animation: gateFade 0.25s ease-in-out;
+
+  @keyframes gateFade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`;
+var GateTint = styled10__default.default.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: calc(${(props) => (3 - Math.max(0, Math.min(3, props.$reveal))) / 3 * 100}% + 90px);
+  background: linear-gradient(
+    to top,
+    var(--color-background, #0a0a0c) calc(100% - 90px),
+    rgba(10, 10, 12, 0) 100%
+  );
+  transition: height 0.65s ease;
+  pointer-events: none;
+`;
+var GateOtpText = styled10__default.default.p`
+  margin: 0;
+  text-align: center;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary, #848e9c);
+
+  strong {
+    color: var(--color-text, #eaecef);
+    font-weight: 600;
+  }
+`;
+var GateResendText = styled10__default.default.p`
+  margin: 0.2rem 0 0;
+  font-size: 0.85rem;
+  color: var(--color-text-secondary, #848e9c);
+
+  button {
+    background: none;
+    border: none;
+    color: var(--color-accent, #E6C87E);
+    cursor: pointer;
+    text-decoration: underline;
+    font-size: inherit;
+  }
+`;
+var GateSubmit = styled10__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  margin-left: 0.5rem;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: ${(props) => props.$status === "valid" ? "var(--color-positive, #00C076)" : props.$status === "invalid" ? "var(--color-negative, #FF5757)" : "var(--color-accent, #E6C87E)"};
+  transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
+
+  &:not(:disabled):hover {
+    transform: translateX(2px);
+  }
+
+  &:disabled {
+    opacity: ${(props) => props.$status === "valid" ? 1 : 0.35};
+    color: ${(props) => props.$status === "valid" ? "var(--color-positive, #00C076)" : "var(--color-text-secondary, #848e9c)"};
+    cursor: default;
+  }
+`;
+var GateEmailInput = styled10__default.default.input`
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text, #eaecef);
+  font-size: 1rem;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: rgba(132, 142, 156, 0.5);
+  }
+`;
+var GateSpinner = styled10__default.default.span`
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(230, 198, 86, 0.3);
+  border-top-color: var(--color-accent, #E6C87E);
+  border-radius: 50%;
+  animation: gateSpin 0.7s linear infinite;
+
+  @keyframes gateSpin {
+    to { transform: rotate(360deg); }
+  }
+`;
+var GateOr = styled10__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 0.78rem;
+  text-transform: lowercase;
+
+  &::before,
+  &::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+`;
+var GateWalletButton = styled10__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.1rem;
+  padding: 0.55rem 1.1rem;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: var(--border-radius, 8px);
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover {
+    border-color: rgba(230, 198, 86, 0.4);
+    color: var(--color-text, #eaecef);
+  }
+`;
+var GateReveal = styled10__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.9rem;
+  width: 100%;
+  animation: gateReveal 0.3s ease-out;
+
+  @keyframes gateReveal {
+    from {
+      opacity: 0;
+      transform: translateY(-6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
 var OTPContainer = styled10__default.default.div`
   display: flex;
   gap: 0.5rem;
@@ -7870,15 +8379,17 @@ var OTPInput = styled10__default.default.input`
   font-size: 1.5rem;
   font-weight: 600;
   background-color: var(--color-background-light, #1a1a1a);
-  border: 1px solid rgba(230, 198, 86, 0.2);
+  border: 1px solid ${(props) => codeBorderColor(props.$status, false)};
   border-radius: var(--border-radius, 8px);
-  color: var(--color-accent, #E6C87E);
+  color: ${(props) => props.$status === "valid" ? "var(--color-positive, #00C076)" : props.$status === "invalid" ? "var(--color-negative, #FF5757)" : "var(--color-accent, #E6C87E)"};
+  box-shadow: ${(props) => props.$status === "valid" ? "0 0 0 1px var(--color-positive, #00C076)" : props.$status === "invalid" ? "0 0 0 1px var(--color-negative, #FF5757)" : "none"};
+  opacity: ${(props) => props.$status === "checking" ? 0.6 : 1};
   transition: all 0.2s ease;
 
   &:focus {
     outline: none;
-    border-color: var(--color-accent, #E6C87E);
-    box-shadow: 0 0 0 2px rgba(230, 198, 86, 0.2);
+    border-color: ${(props) => codeBorderColor(props.$status, true)};
+    box-shadow: 0 0 0 2px ${(props) => props.$status === "valid" ? "rgba(0, 192, 118, 0.25)" : props.$status === "invalid" ? "rgba(255, 87, 87, 0.25)" : "rgba(230, 198, 86, 0.2)"};
   }
 `;
 var SubmitButton = styled10__default.default.button`