@swype-org/react-sdk 0.1.48 → 0.1.50

package/dist/index.d.cts

@@ -377,7 +377,60 @@ interface SwypePaymentProps {
     /** Seconds to count down on the success screen before auto-dismissing. */
     autoCloseSeconds?: number;
 }
-declare function SwypePayment({ destination, onComplete, onError, useWalletConnector, idempotencyKey, merchantAuthorization, merchantName, onBack, onDismiss, autoCloseSeconds, }: SwypePaymentProps): react_jsx_runtime.JSX.Element | null;
+declare function SwypePayment(props: SwypePaymentProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Cross-origin iframe passkey delegation via postMessage.
+ *
+ * When the webview-app runs inside a cross-origin iframe, WebAuthn
+ * ceremonies cannot execute from within the iframe on Safari. For passkey
+ * creation, we first attempt a direct `navigator.credentials.create()`
+ * call (works in Chrome/Firefox with the iframe permissions policy). If
+ * that fails (Safari), we open a same-origin pop-up window on the Swype
+ * domain to perform the ceremony, then relay the result back via
+ * `postMessage`.
+ *
+ * Passkey *assertion* (`navigator.credentials.get`) still delegates to
+ * the parent page via postMessage as before.
+ */
+/**
+ * Thrown when `navigator.credentials.create()` fails inside a
+ * cross-origin iframe (Safari). The UI layer should catch this and
+ * offer the user a button that opens the Swype passkey pop-up.
+ */
+declare class PasskeyIframeBlockedError extends Error {
+    constructor(message?: string);
+}
+interface PasskeyPopupOptions {
+    challenge: string;
+    rpId: string;
+    rpName: string;
+    userId: string;
+    userName: string;
+    userDisplayName: string;
+    pubKeyCredParams: Array<{
+        alg: number;
+        type: string;
+    }>;
+    authenticatorSelection?: {
+        authenticatorAttachment?: string;
+        residentKey?: string;
+        userVerification?: string;
+    };
+    timeout?: number;
+}
+/**
+ * Opens a same-origin pop-up window on the Swype domain to perform
+ * passkey creation. Used as a fallback when Safari blocks
+ * `navigator.credentials.create()` inside a cross-origin iframe.
+ *
+ * Must be called from a user-gesture handler (e.g. button click) to
+ * avoid the browser's pop-up blocker.
+ */
+declare function createPasskeyViaPopup(options: PasskeyPopupOptions): Promise<{
+    credentialId: string;
+    publicKey: string;
+}>;
 
 type AccessTokenGetter = () => Promise<string | null | undefined>;
 /**
@@ -398,6 +451,15 @@ declare function createPasskeyCredential(params: {
     credentialId: string;
     publicKey: string;
 }>;
+/**
+ * Builds the {@link PasskeyPopupOptions} for a user. Called by the UI
+ * layer when it needs to open the passkey creation pop-up after
+ * `createPasskeyCredential` throws {@link PasskeyIframeBlockedError}.
+ */
+declare function buildPasskeyPopupOptions(params: {
+    userId: string;
+    displayName: string;
+}): PasskeyPopupOptions;
 /**
  * @deprecated Use {@link findDevicePasskey} instead, which checks all
  * credentials in a single WebAuthn call.
@@ -596,4 +658,4 @@ interface SelectSourceScreenProps {
 }
 declare function SelectSourceScreen({ choices, selectedChainName, selectedTokenSymbol, recommended, onChainChange, onTokenChange, onConfirm, onLogout, }: SelectSourceScreenProps): react_jsx_runtime.JSX.Element;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.d.ts

@@ -377,7 +377,60 @@ interface SwypePaymentProps {
     /** Seconds to count down on the success screen before auto-dismissing. */
     autoCloseSeconds?: number;
 }
-declare function SwypePayment({ destination, onComplete, onError, useWalletConnector, idempotencyKey, merchantAuthorization, merchantName, onBack, onDismiss, autoCloseSeconds, }: SwypePaymentProps): react_jsx_runtime.JSX.Element | null;
+declare function SwypePayment(props: SwypePaymentProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Cross-origin iframe passkey delegation via postMessage.
+ *
+ * When the webview-app runs inside a cross-origin iframe, WebAuthn
+ * ceremonies cannot execute from within the iframe on Safari. For passkey
+ * creation, we first attempt a direct `navigator.credentials.create()`
+ * call (works in Chrome/Firefox with the iframe permissions policy). If
+ * that fails (Safari), we open a same-origin pop-up window on the Swype
+ * domain to perform the ceremony, then relay the result back via
+ * `postMessage`.
+ *
+ * Passkey *assertion* (`navigator.credentials.get`) still delegates to
+ * the parent page via postMessage as before.
+ */
+/**
+ * Thrown when `navigator.credentials.create()` fails inside a
+ * cross-origin iframe (Safari). The UI layer should catch this and
+ * offer the user a button that opens the Swype passkey pop-up.
+ */
+declare class PasskeyIframeBlockedError extends Error {
+    constructor(message?: string);
+}
+interface PasskeyPopupOptions {
+    challenge: string;
+    rpId: string;
+    rpName: string;
+    userId: string;
+    userName: string;
+    userDisplayName: string;
+    pubKeyCredParams: Array<{
+        alg: number;
+        type: string;
+    }>;
+    authenticatorSelection?: {
+        authenticatorAttachment?: string;
+        residentKey?: string;
+        userVerification?: string;
+    };
+    timeout?: number;
+}
+/**
+ * Opens a same-origin pop-up window on the Swype domain to perform
+ * passkey creation. Used as a fallback when Safari blocks
+ * `navigator.credentials.create()` inside a cross-origin iframe.
+ *
+ * Must be called from a user-gesture handler (e.g. button click) to
+ * avoid the browser's pop-up blocker.
+ */
+declare function createPasskeyViaPopup(options: PasskeyPopupOptions): Promise<{
+    credentialId: string;
+    publicKey: string;
+}>;
 
 type AccessTokenGetter = () => Promise<string | null | undefined>;
 /**
@@ -398,6 +451,15 @@ declare function createPasskeyCredential(params: {
     credentialId: string;
     publicKey: string;
 }>;
+/**
+ * Builds the {@link PasskeyPopupOptions} for a user. Called by the UI
+ * layer when it needs to open the passkey creation pop-up after
+ * `createPasskeyCredential` throws {@link PasskeyIframeBlockedError}.
+ */
+declare function buildPasskeyPopupOptions(params: {
+    userId: string;
+    displayName: string;
+}): PasskeyPopupOptions;
 /**
  * @deprecated Use {@link findDevicePasskey} instead, which checks all
  * credentials in a single WebAuthn call.
@@ -596,4 +658,4 @@ interface SelectSourceScreenProps {
 }
 declare function SelectSourceScreen({ choices, selectedChainName, selectedTokenSymbol, recommended, onChainChange, onTokenChange, onConfirm, onLogout, }: SelectSourceScreenProps): react_jsx_runtime.JSX.Element;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect } from 'react';
+import { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect, Component } from 'react';
 import { PrivyProvider, usePrivy, useLoginWithEmail, useLoginWithSms, useLoginWithOAuth } from '@privy-io/react-auth';
 import { createConfig, http, WagmiProvider, useConfig, useConnect, useSwitchChain } from 'wagmi';
 import { mainnet, arbitrum, base } from 'wagmi/chains';
@@ -655,6 +655,12 @@ function normalizeSignature(sig) {
 }
 
 // src/passkey-delegation.ts
+var PasskeyIframeBlockedError = class extends Error {
+  constructor(message = "Passkey creation is not supported in this browser context.") {
+    super(message);
+    this.name = "PasskeyIframeBlockedError";
+  }
+};
 function isInCrossOriginIframe() {
   if (typeof window === "undefined") return false;
   if (window.parent === window) return false;
@@ -666,44 +672,73 @@ function isInCrossOriginIframe() {
   }
 }
 var delegationCounter = 0;
-function delegatePasskeyCreate(options) {
+var DELEGATION_GET_TIMEOUT_MS = 3e4;
+function delegatePasskeyGet(options) {
   return new Promise((resolve, reject) => {
-    const id = `pc-${++delegationCounter}-${Date.now()}`;
+    const id = `pg-${++delegationCounter}-${Date.now()}`;
+    const timer = setTimeout(() => {
+      window.removeEventListener("message", handler);
+      reject(new Error("Passkey verification timed out. Please try again."));
+    }, DELEGATION_GET_TIMEOUT_MS);
     const handler = (event) => {
       const data = event.data;
       if (!data || typeof data !== "object") return;
-      if (data.type !== "swype:passkey-create-response" || data.id !== id) return;
+      if (data.type !== "swype:passkey-get-response" || data.id !== id) return;
+      clearTimeout(timer);
       window.removeEventListener("message", handler);
       if (data.error) {
         reject(new Error(data.error));
       } else if (data.result) {
         resolve(data.result);
       } else {
-        reject(new Error("Invalid passkey create response."));
+        reject(new Error("Invalid passkey get response."));
       }
     };
     window.addEventListener("message", handler);
-    window.parent.postMessage({ type: "swype:passkey-create-request", id, options }, "*");
+    window.parent.postMessage({ type: "swype:passkey-get-request", id, options }, "*");
   });
 }
-function delegatePasskeyGet(options) {
+var POPUP_RESULT_TIMEOUT_MS = 12e4;
+var POPUP_CLOSED_POLL_MS = 500;
+function createPasskeyViaPopup(options) {
   return new Promise((resolve, reject) => {
-    const id = `pg-${++delegationCounter}-${Date.now()}`;
+    const encoded = btoa(JSON.stringify(options));
+    const popupUrl = `${window.location.origin}/passkey-register#${encoded}`;
+    const popup = window.open(popupUrl, "swype-passkey", "width=460,height=600");
+    if (!popup) {
+      reject(new Error("Pop-up blocked. Please allow pop-ups for this site and try again."));
+      return;
+    }
+    const timer = setTimeout(() => {
+      cleanup();
+      reject(new Error("Passkey creation timed out. Please try again."));
+    }, POPUP_RESULT_TIMEOUT_MS);
+    const closedPoll = setInterval(() => {
+      if (popup.closed) {
+        cleanup();
+        reject(new Error("Passkey setup window was closed before completing."));
+      }
+    }, POPUP_CLOSED_POLL_MS);
     const handler = (event) => {
+      if (event.source !== popup) return;
       const data = event.data;
       if (!data || typeof data !== "object") return;
-      if (data.type !== "swype:passkey-get-response" || data.id !== id) return;
-      window.removeEventListener("message", handler);
+      if (data.type !== "swype:passkey-popup-result") return;
+      cleanup();
       if (data.error) {
         reject(new Error(data.error));
       } else if (data.result) {
         resolve(data.result);
       } else {
-        reject(new Error("Invalid passkey get response."));
+        reject(new Error("Invalid passkey popup response."));
       }
     };
+    function cleanup() {
+      clearTimeout(timer);
+      clearInterval(closedPoll);
+      window.removeEventListener("message", handler);
+    }
     window.addEventListener("message", handler);
-    window.parent.postMessage({ type: "swype:passkey-get-request", id, options }, "*");
   });
 }
 
@@ -828,53 +863,51 @@ async function createPasskeyCredential(params) {
   const challenge = new Uint8Array(32);
   crypto.getRandomValues(challenge);
   const rpId = resolvePasskeyRpId();
+  const publicKeyOptions = {
+    challenge,
+    rp: { name: "Swype", id: rpId },
+    user: {
+      id: new TextEncoder().encode(params.userId),
+      name: params.displayName,
+      displayName: params.displayName
+    },
+    pubKeyCredParams: [
+      { alg: -7, type: "public-key" },
+      { alg: -257, type: "public-key" }
+    ],
+    authenticatorSelection: {
+      authenticatorAttachment: "platform",
+      residentKey: "preferred",
+      userVerification: "required"
+    },
+    timeout: 6e4
+  };
   if (isInCrossOriginIframe()) {
-    return delegatePasskeyCreate({
-      challenge: toBase64(challenge),
-      rpId,
-      rpName: "Swype",
-      userId: toBase64(new TextEncoder().encode(params.userId)),
-      userName: params.displayName,
-      userDisplayName: params.displayName,
-      pubKeyCredParams: [
-        { alg: -7, type: "public-key" },
-        { alg: -257, type: "public-key" }
-      ],
-      authenticatorSelection: {
-        authenticatorAttachment: "platform",
-        residentKey: "preferred",
-        userVerification: "required"
-      },
-      timeout: 6e4
-    });
+    try {
+      await waitForDocumentFocus();
+      const credential2 = await navigator.credentials.create({
+        publicKey: publicKeyOptions
+      });
+      if (!credential2) {
+        throw new Error("Passkey creation was cancelled.");
+      }
+      return extractPasskeyResult(credential2);
+    } catch (err) {
+      if (err instanceof PasskeyIframeBlockedError) throw err;
+      if (err instanceof Error && err.message === "Passkey creation was cancelled.") throw err;
+      throw new PasskeyIframeBlockedError();
+    }
   }
   await waitForDocumentFocus();
   const credential = await navigator.credentials.create({
-    publicKey: {
-      challenge,
-      rp: { name: "Swype", id: rpId },
-      user: {
-        id: new TextEncoder().encode(params.userId),
-        name: params.displayName,
-        displayName: params.displayName
-      },
-      pubKeyCredParams: [
-        { alg: -7, type: "public-key" },
-        // ES256 (P-256)
-        { alg: -257, type: "public-key" }
-        // RS256
-      ],
-      authenticatorSelection: {
-        authenticatorAttachment: "platform",
-        residentKey: "preferred",
-        userVerification: "required"
-      },
-      timeout: 6e4
-    }
+    publicKey: publicKeyOptions
   });
   if (!credential) {
     throw new Error("Passkey creation was cancelled.");
   }
+  return extractPasskeyResult(credential);
+}
+function extractPasskeyResult(credential) {
   const response = credential.response;
   const publicKeyBytes = response.getPublicKey?.();
   return {
@@ -882,6 +915,29 @@ async function createPasskeyCredential(params) {
     publicKey: publicKeyBytes ? toBase64(publicKeyBytes) : ""
   };
 }
+function buildPasskeyPopupOptions(params) {
+  const challenge = new Uint8Array(32);
+  crypto.getRandomValues(challenge);
+  const rpId = resolvePasskeyRpId();
+  return {
+    challenge: toBase64(challenge),
+    rpId,
+    rpName: "Swype",
+    userId: toBase64(new TextEncoder().encode(params.userId)),
+    userName: params.displayName,
+    userDisplayName: params.displayName,
+    pubKeyCredParams: [
+      { alg: -7, type: "public-key" },
+      { alg: -257, type: "public-key" }
+    ],
+    authenticatorSelection: {
+      authenticatorAttachment: "platform",
+      residentKey: "preferred",
+      userVerification: "required"
+    },
+    timeout: 6e4
+  };
+}
 async function deviceHasPasskey(credentialId) {
   const found = await findDevicePasskey([credentialId]);
   return found != null;
@@ -2644,18 +2700,20 @@ var hintStyle = (color) => ({
 });
 function CreatePasskeyScreen({
   onCreatePasskey,
-  onSkip,
   onBack,
   creating,
-  error
+  error,
+  popupFallback = false,
+  onCreatePasskeyViaPopup
 }) {
   const { tokens } = useSwypeConfig();
+  const handleCreate = popupFallback && onCreatePasskeyViaPopup ? onCreatePasskeyViaPopup : onCreatePasskey;
+  const buttonLabel = popupFallback ? "Open passkey setup" : "Create passkey";
   return /* @__PURE__ */ jsxs(
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onCreatePasskey, disabled: creating, loading: creating, children: "Create passkey" }),
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: onSkip, style: skipStyle(tokens.textMuted), disabled: creating, children: "Skip for now" }),
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: handleCreate, disabled: creating, loading: creating, children: buttonLabel }),
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
@@ -2668,7 +2726,7 @@ function CreatePasskeyScreen({
             /* @__PURE__ */ jsx("path", { d: "M9 14c0 1.5 1.34 2.5 3 2.5s3-1 3-2.5", stroke: tokens.accent, strokeWidth: "1.2", strokeLinecap: "round" })
           ] }) }),
           /* @__PURE__ */ jsx("h2", { style: headingStyle3(tokens.text), children: "Create your passkey" }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Use Face ID to sign in instantly \u2014 no passwords, no codes." }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: popupFallback ? "Your browser requires a separate window for passkey setup. Tap the button below to continue." : "Use Face ID to sign in instantly \u2014 no passwords, no codes." }),
           error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle2(tokens), children: error }),
           /* @__PURE__ */ jsx(InfoBanner, { children: "Your passkey is stored securely on your device. Swype never sees your biometric data." })
         ] })
@@ -2710,19 +2768,6 @@ var errorBannerStyle2 = (tokens) => ({
   width: "100%",
   textAlign: "left"
 });
-var skipStyle = (color) => ({
-  background: "transparent",
-  border: "none",
-  color,
-  cursor: "pointer",
-  fontFamily: "inherit",
-  fontSize: "0.88rem",
-  fontWeight: 500,
-  display: "block",
-  width: "100%",
-  textAlign: "center",
-  padding: "12px 0 0"
-});
 var WALLET_EMOJIS = {
   rabby: "\u{1F430}",
   ora: "\u2666\uFE0F",
@@ -3941,6 +3986,74 @@ var hintStyle3 = (color) => ({
   color,
   margin: "8px 0 0"
 });
+var PaymentErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, info) {
+    console.error("[SwypePayment] Uncaught error:", error, info.componentStack);
+  }
+  handleReset = () => {
+    this.setState({ hasError: false });
+    this.props.onReset();
+  };
+  render() {
+    if (!this.state.hasError) {
+      return this.props.children;
+    }
+    return /* @__PURE__ */ jsxs("div", { style: containerStyle8, children: [
+      /* @__PURE__ */ jsx("div", { style: iconStyle4, children: /* @__PURE__ */ jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#ef4444", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
+      ] }) }),
+      /* @__PURE__ */ jsx("h2", { style: headingStyle9, children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("p", { style: messageStyle, children: "An unexpected error occurred. Please try again." }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: this.handleReset, style: buttonStyle3, children: "Try again" })
+    ] });
+  }
+};
+var containerStyle8 = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  padding: "48px 24px",
+  minHeight: "100%",
+  maxWidth: 420,
+  margin: "0 auto"
+};
+var iconStyle4 = {
+  marginBottom: 20
+};
+var headingStyle9 = {
+  fontSize: "1.25rem",
+  fontWeight: 700,
+  color: "#1a1a1a",
+  margin: "0 0 8px"
+};
+var messageStyle = {
+  fontSize: "0.9rem",
+  color: "#666",
+  margin: "0 0 28px",
+  lineHeight: 1.5
+};
+var buttonStyle3 = {
+  background: "#1a1a1a",
+  color: "#fff",
+  border: "none",
+  borderRadius: 12,
+  padding: "12px 32px",
+  fontSize: "0.95rem",
+  fontWeight: 600,
+  fontFamily: "inherit",
+  cursor: "pointer"
+};
 function isInIframe() {
   try {
     return typeof window !== "undefined" && window !== window.top;
@@ -4018,7 +4131,14 @@ function buildSelectSourceChoices(options) {
   }
   return chainChoices;
 }
-function SwypePayment({
+function SwypePayment(props) {
+  const resetKey = useRef(0);
+  const handleBoundaryReset = useCallback(() => {
+    resetKey.current += 1;
+  }, []);
+  return /* @__PURE__ */ jsx(PaymentErrorBoundary, { onReset: handleBoundaryReset, children: /* @__PURE__ */ jsx(SwypePaymentInner, { ...props }) }, resetKey.current);
+}
+function SwypePaymentInner({
   destination,
   onComplete,
   onError,
@@ -4059,6 +4179,7 @@ function SwypePayment({
   const [transfer, setTransfer] = useState(null);
   const [creatingTransfer, setCreatingTransfer] = useState(false);
   const [registeringPasskey, setRegisteringPasskey] = useState(false);
+  const [passkeyPopupNeeded, setPasskeyPopupNeeded] = useState(false);
   const [activeCredentialId, setActiveCredentialId] = useState(() => {
     if (typeof window === "undefined") return null;
     return window.localStorage.getItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
@@ -4209,7 +4330,7 @@ function SwypePayment({
         }
         setStep("create-passkey");
       } catch {
-        if (!cancelled) setStep("deposit");
+        if (!cancelled) setStep("create-passkey");
       }
     };
     checkPasskey();
@@ -4561,44 +4682,59 @@ function SwypePayment({
     merchantAuthorization,
     transfer
   ]);
+  const completePasskeyRegistration = useCallback(async (credentialId, publicKey) => {
+    const token = await getAccessToken();
+    if (!token) throw new Error("Not authenticated");
+    await registerPasskey(apiBaseUrl, token, credentialId, publicKey);
+    setActiveCredentialId(credentialId);
+    window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
+    setPasskeyPopupNeeded(false);
+    const hasActiveWallet = accounts.some(
+      (a) => a.wallets.some((w) => w.status === "ACTIVE")
+    );
+    if (accounts.length === 0 || !hasActiveWallet) {
+      setStep("wallet-picker");
+    } else {
+      setStep("deposit");
+    }
+  }, [getAccessToken, apiBaseUrl, accounts]);
   const handleRegisterPasskey = useCallback(async () => {
     setRegisteringPasskey(true);
     setError(null);
     try {
-      const token = await getAccessToken();
-      if (!token) throw new Error("Not authenticated");
       const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Swype User";
       const { credentialId, publicKey } = await createPasskeyCredential({
         userId: user?.id ?? "unknown",
         displayName: passkeyDisplayName
       });
-      await registerPasskey(apiBaseUrl, token, credentialId, publicKey);
-      setActiveCredentialId(credentialId);
-      window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
-      const hasActiveWallet = accounts.some(
-        (a) => a.wallets.some((w) => w.status === "ACTIVE")
-      );
-      if (accounts.length === 0 || !hasActiveWallet) {
-        setStep("wallet-picker");
+      await completePasskeyRegistration(credentialId, publicKey);
+    } catch (err) {
+      if (err instanceof PasskeyIframeBlockedError) {
+        setPasskeyPopupNeeded(true);
       } else {
-        setStep("deposit");
+        setError(err instanceof Error ? err.message : "Failed to register passkey");
       }
+    } finally {
+      setRegisteringPasskey(false);
+    }
+  }, [user, completePasskeyRegistration]);
+  const handleCreatePasskeyViaPopup = useCallback(async () => {
+    setRegisteringPasskey(true);
+    setError(null);
+    try {
+      const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Swype User";
+      const popupOptions = buildPasskeyPopupOptions({
+        userId: user?.id ?? "unknown",
+        displayName: passkeyDisplayName
+      });
+      const { credentialId, publicKey } = await createPasskeyViaPopup(popupOptions);
+      await completePasskeyRegistration(credentialId, publicKey);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to register passkey");
     } finally {
       setRegisteringPasskey(false);
     }
-  }, [getAccessToken, user, apiBaseUrl, accounts]);
-  const handleSkipPasskey = useCallback(() => {
-    const hasActiveWallet = accounts.some(
-      (a) => a.wallets.some((w) => w.status === "ACTIVE")
-    );
-    if (accounts.length === 0 || !hasActiveWallet) {
-      setStep("wallet-picker");
-    } else {
-      setStep("deposit");
-    }
-  }, [accounts]);
+  }, [user, completePasskeyRegistration]);
   const handleSelectProvider = useCallback((providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
@@ -4714,10 +4850,11 @@ function SwypePayment({
       CreatePasskeyScreen,
       {
         onCreatePasskey: handleRegisterPasskey,
-        onSkip: handleSkipPasskey,
-        onBack: () => setStep("login"),
+        onBack: handleLogout,
         creating: registeringPasskey,
-        error
+        error,
+        popupFallback: passkeyPopupNeeded,
+        onCreatePasskeyViaPopup: handleCreatePasskeyViaPopup
       }
     );
   }
@@ -4730,7 +4867,7 @@ function SwypePayment({
         loading: creatingTransfer,
         onSelectProvider: handleSelectProvider,
         onContinueConnection: handleContinueConnection,
-        onBack: () => setStep("create-passkey")
+        onBack: () => setStep(activeCredentialId ? "deposit" : "create-passkey")
       }
     );
   }
@@ -4850,6 +4987,6 @@ function SwypePayment({
   return null;
 }
 
-export { IconCircle, OutlineButton, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypePayment, SwypeProvider, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { IconCircle, OutlineButton, PasskeyIframeBlockedError, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypePayment, SwypeProvider, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map