@swype-org/react-sdk 0.1.84 → 0.1.85

package/dist/index.d.cts

@@ -199,7 +199,7 @@ interface UserConfig {
 /** Theme mode */
 type ThemeMode = 'light' | 'dark';
 /** Steps in the payment flow */
-type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'wallet-picker' | 'open-wallet' | 'confirm-sign' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
+type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'verify-passkey' | 'wallet-picker' | 'open-wallet' | 'confirm-sign' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
 /** User-selected advanced settings for chain/asset override */
 interface AdvancedSettings {
     /** Override asset (e.g. 'USDC', 'USDT'). Null = let backend decide. */
@@ -453,8 +453,30 @@ declare function createPasskeyViaPopup(options: PasskeyPopupOptions, existingCre
     credentialId: string;
     publicKey: string;
 }>;
+interface PasskeyVerifyPopupOptions {
+    credentialIds: string[];
+    rpId: string;
+    /** Populated by `findDevicePasskeyViaPopup`; not set by callers. */
+    channelId?: string;
+}
+/**
+ * Opens a same-origin pop-up window on the Swype domain to check whether
+ * any of the given passkey credential IDs exist on this device.
+ *
+ * Used as a fallback when Safari blocks `navigator.credentials.get()`
+ * inside a cross-origin iframe. The popup runs on the Swype domain where
+ * the rpId matches, so WebAuthn works.
+ *
+ * Must be called from a user-gesture handler (e.g. button click) to
+ * avoid the browser's pop-up blocker.
+ *
+ * @returns The matching credential ID, or `null` if none matched or the
+ *   popup was closed before completing.
+ */
+declare function findDevicePasskeyViaPopup(options: PasskeyVerifyPopupOptions): Promise<string | null>;
 
 type AccessTokenGetter = () => Promise<string | null | undefined>;
+declare function resolvePasskeyRpId(): string;
 /**
  * Creates a WebAuthn passkey credential.
  * Used for upfront passkey registration before the authorization flow.
@@ -726,4 +748,4 @@ interface AdvancedSourceScreenProps {
 }
 declare function AdvancedSourceScreen({ choices, selectedChainName, selectedTokenSymbol, onSelectSource, onBack, }: AdvancedSourceScreenProps): react_jsx_runtime.JSX.Element;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, AdvancedSourceScreen, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, CreatePasskeyScreen, type Destination, type ErrorResponse, IconCircle, InfoBanner, 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 };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, AdvancedSourceScreen, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, CreatePasskeyScreen, type Destination, type ErrorResponse, IconCircle, InfoBanner, 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, findDevicePasskeyViaPopup, getTheme, lightTheme, resolvePasskeyRpId, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.d.ts

@@ -199,7 +199,7 @@ interface UserConfig {
 /** Theme mode */
 type ThemeMode = 'light' | 'dark';
 /** Steps in the payment flow */
-type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'wallet-picker' | 'open-wallet' | 'confirm-sign' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
+type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'verify-passkey' | 'wallet-picker' | 'open-wallet' | 'confirm-sign' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
 /** User-selected advanced settings for chain/asset override */
 interface AdvancedSettings {
     /** Override asset (e.g. 'USDC', 'USDT'). Null = let backend decide. */
@@ -453,8 +453,30 @@ declare function createPasskeyViaPopup(options: PasskeyPopupOptions, existingCre
     credentialId: string;
     publicKey: string;
 }>;
+interface PasskeyVerifyPopupOptions {
+    credentialIds: string[];
+    rpId: string;
+    /** Populated by `findDevicePasskeyViaPopup`; not set by callers. */
+    channelId?: string;
+}
+/**
+ * Opens a same-origin pop-up window on the Swype domain to check whether
+ * any of the given passkey credential IDs exist on this device.
+ *
+ * Used as a fallback when Safari blocks `navigator.credentials.get()`
+ * inside a cross-origin iframe. The popup runs on the Swype domain where
+ * the rpId matches, so WebAuthn works.
+ *
+ * Must be called from a user-gesture handler (e.g. button click) to
+ * avoid the browser's pop-up blocker.
+ *
+ * @returns The matching credential ID, or `null` if none matched or the
+ *   popup was closed before completing.
+ */
+declare function findDevicePasskeyViaPopup(options: PasskeyVerifyPopupOptions): Promise<string | null>;
 
 type AccessTokenGetter = () => Promise<string | null | undefined>;
+declare function resolvePasskeyRpId(): string;
 /**
  * Creates a WebAuthn passkey credential.
  * Used for upfront passkey registration before the authorization flow.
@@ -726,4 +748,4 @@ interface AdvancedSourceScreenProps {
 }
 declare function AdvancedSourceScreen({ choices, selectedChainName, selectedTokenSymbol, onSelectSource, onBack, }: AdvancedSourceScreenProps): react_jsx_runtime.JSX.Element;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, AdvancedSourceScreen, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, CreatePasskeyScreen, type Destination, type ErrorResponse, IconCircle, InfoBanner, 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 };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, AdvancedSourceScreen, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, CreatePasskeyScreen, type Destination, type ErrorResponse, IconCircle, InfoBanner, 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, findDevicePasskeyViaPopup, getTheme, lightTheme, resolvePasskeyRpId, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.js

@@ -785,6 +785,66 @@ function createPasskeyViaPopup(options, existingCredentialIds = []) {
     }
   });
 }
+var VERIFY_POPUP_TIMEOUT_MS = 6e4;
+function findDevicePasskeyViaPopup(options) {
+  return new Promise((resolve, reject) => {
+    const channelId = `swype-pv-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const payload = { ...options, channelId };
+    const encoded = btoa(JSON.stringify(payload));
+    const popupUrl = `${window.location.origin}/passkey-verify#${encoded}`;
+    const popup = window.open(popupUrl, "swype-passkey-verify");
+    if (!popup) {
+      reject(new Error("Pop-up blocked. Please allow pop-ups for this site and try again."));
+      return;
+    }
+    let settled = false;
+    const channel = typeof BroadcastChannel !== "undefined" ? new BroadcastChannel(channelId) : null;
+    const timer = setTimeout(() => {
+      cleanup();
+      resolve(null);
+    }, VERIFY_POPUP_TIMEOUT_MS);
+    const closedPoll = setInterval(() => {
+      if (popup.closed && !settled) {
+        clearInterval(closedPoll);
+        setTimeout(() => {
+          if (!settled) {
+            cleanup();
+            resolve(null);
+          }
+        }, POPUP_CLOSED_GRACE_MS);
+      }
+    }, POPUP_CLOSED_POLL_MS);
+    function handleResult(data) {
+      if (settled) return;
+      if (!data || typeof data !== "object") return;
+      if (data.type !== "swype:passkey-verify-result") return;
+      settled = true;
+      cleanup();
+      if (data.error) {
+        resolve(null);
+      } else if (data.result && typeof data.result === "object") {
+        const result = data.result;
+        resolve(result.credentialId ?? null);
+      } else {
+        resolve(null);
+      }
+    }
+    if (channel) {
+      channel.onmessage = (event) => handleResult(event.data);
+    }
+    const postMessageHandler = (event) => {
+      if (event.source !== popup) return;
+      handleResult(event.data);
+    };
+    window.addEventListener("message", postMessageHandler);
+    function cleanup() {
+      clearTimeout(timer);
+      clearInterval(closedPoll);
+      window.removeEventListener("message", postMessageHandler);
+      channel?.close();
+    }
+  });
+}
 async function checkServerForNewPasskey(authToken, apiBaseUrl, existingCredentialIds) {
   if (!authToken || !apiBaseUrl) return null;
   const res = await fetch(`${apiBaseUrl}/v1/users/config`, {
@@ -2770,6 +2830,72 @@ var errorBannerStyle2 = (tokens) => ({
   width: "100%",
   textAlign: "left"
 });
+function VerifyPasskeyScreen({
+  onVerify,
+  onBack,
+  verifying,
+  error
+}) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onVerify, disabled: verifying, loading: verifying, children: "Verify passkey" }),
+        /* @__PURE__ */ jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
+          /* @__PURE__ */ jsx(IconCircle, { variant: "accent", size: 64, children: /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
+            /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "3", stroke: tokens.accent, strokeWidth: "1.5", strokeDasharray: "3 2" }),
+            /* @__PURE__ */ jsx("circle", { cx: "9", cy: "10", r: "1", fill: tokens.accent }),
+            /* @__PURE__ */ jsx("circle", { cx: "15", cy: "10", r: "1", fill: tokens.accent }),
+            /* @__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: headingStyle4(tokens.text), children: "Verify your passkey" }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Your browser requires a separate window to verify your passkey. Tap the button below to continue." }),
+          error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
+          /* @__PURE__ */ jsx(InfoBanner, { children: "Your passkey is stored securely on your device. Swype never sees your biometric data." })
+        ] })
+      ]
+    }
+  );
+}
+var contentStyle4 = {
+  textAlign: "center",
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  paddingTop: 32
+};
+var headingStyle4 = (color) => ({
+  fontSize: "1.45rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "24px 0 8px"
+});
+var subtitleStyle4 = (color) => ({
+  fontSize: "0.9rem",
+  color,
+  margin: "0 0 28px",
+  lineHeight: 1.5,
+  maxWidth: 280
+});
+var errorBannerStyle3 = (tokens) => ({
+  background: tokens.errorBg,
+  border: `1px solid ${tokens.error}66`,
+  borderRadius: 16,
+  padding: "11px 14px",
+  color: tokens.error,
+  fontSize: "0.84rem",
+  marginBottom: 14,
+  lineHeight: 1.5,
+  width: "100%",
+  textAlign: "left"
+});
 var WALLET_EMOJIS = {
   rabby: "\u{1F430}",
   ora: "\u2666\uFE0F",
@@ -2812,8 +2938,8 @@ function WalletPickerScreen({
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack }),
         hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Continue where you left off" }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
           /* @__PURE__ */ jsx("div", { style: pendingListStyle, children: pendingConnections.map((acct) => {
             const wallet = acct.wallets[0];
             const address = wallet ? truncateAddress(wallet.name) : void 0;
@@ -2853,8 +2979,8 @@ function WalletPickerScreen({
           /* @__PURE__ */ jsx("div", { style: dividerStyle2(tokens.border), children: /* @__PURE__ */ jsx("span", { style: dividerTextStyle(tokens.textMuted), children: "Or connect a new wallet" }) })
         ] }),
         !hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Where are your stablecoins?" }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Select the wallet you want to deposit from" })
+          /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Where are your stablecoins?" }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Select the wallet you want to deposit from" })
         ] }),
         /* @__PURE__ */ jsxs("div", { style: gridStyle, children: [
           displayProviders.map((p) => {
@@ -2907,14 +3033,14 @@ function WalletPickerScreen({
     }
   );
 }
-var headingStyle4 = (color) => ({
+var headingStyle5 = (color) => ({
   fontSize: "1.35rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle4 = (color) => ({
+var subtitleStyle5 = (color) => ({
   fontSize: "0.88rem",
   color,
   margin: "0 0 24px"
@@ -3090,9 +3216,9 @@ function SetupScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { title: "Swype Setup", onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
-        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
+        /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Set up One-Tap deposits" }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
+        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle4(tokens), children: error }),
         /* @__PURE__ */ jsxs("div", { style: balanceRowStyle, children: [
           /* @__PURE__ */ jsxs("div", { style: balanceLeftStyle, children: [
             /* @__PURE__ */ jsx("div", { style: coinIconStyle(tokens.accent), children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
@@ -3170,20 +3296,20 @@ function SetupScreen({
     }
   );
 }
-var headingStyle5 = (color) => ({
+var headingStyle6 = (color) => ({
   fontSize: "1.3rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle5 = (color) => ({
+var subtitleStyle6 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 24px",
   lineHeight: 1.5
 });
-var errorBannerStyle3 = (tokens) => ({
+var errorBannerStyle4 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -3451,7 +3577,7 @@ function DepositScreen({
             "%)"
           ] }) : /* @__PURE__ */ jsx("div", { style: detailRowStyle(tokens.textMuted), children: "Fees calculated at time of transfer" })
         ] }),
-        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle4(tokens), children: error })
+        error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error })
       ]
     }
   );
@@ -3519,7 +3645,7 @@ var detailRowStyle = (color) => ({
   color,
   marginBottom: 4
 });
-var errorBannerStyle4 = (tokens) => ({
+var errorBannerStyle5 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -3618,22 +3744,22 @@ function SuccessScreen({
             right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout })
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
           succeeded ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
-            /* @__PURE__ */ jsxs("h2", { style: headingStyle6(tokens.text), children: [
+            /* @__PURE__ */ jsxs("h2", { style: headingStyle7(tokens.text), children: [
               "$",
               amount.toFixed(2),
               " deposited"
             ] }),
-            merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle6(tokens.textSecondary), children: [
+            merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle7(tokens.textSecondary), children: [
               "to ",
               merchantName
             ] })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(IconCircle, { variant: "error", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z", fill: tokens.error }) }) }),
-            /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Transfer failed" }),
-            error && /* @__PURE__ */ jsx("p", { style: subtitleStyle6(tokens.error), children: error })
+            /* @__PURE__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Transfer failed" }),
+            error && /* @__PURE__ */ jsx("p", { style: subtitleStyle7(tokens.error), children: error })
           ] }),
           /* @__PURE__ */ jsxs("div", { style: summaryCardStyle(tokens), children: [
             sourceName && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
@@ -3665,21 +3791,21 @@ function SuccessScreen({
     }
   );
 }
-var contentStyle4 = {
+var contentStyle5 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   paddingTop: 16
 };
-var headingStyle6 = (color) => ({
+var headingStyle7 = (color) => ({
   fontSize: "1.5rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 4px"
 });
-var subtitleStyle6 = (color) => ({
+var subtitleStyle7 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 20px"
@@ -3785,7 +3911,7 @@ function SelectSourceScreen({
             right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout })
           }
         ),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle7(tokens.textMuted), children: "Choose which chain and token to pay from." }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textMuted), children: "Choose which chain and token to pay from." }),
         /* @__PURE__ */ jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Chain" }),
         /* @__PURE__ */ jsx("div", { style: optionListStyle, children: choices.map((chain) => {
           const isSelected = chain.chainName === selectedChainName;
@@ -3842,7 +3968,7 @@ function SelectSourceScreen({
     }
   );
 }
-var subtitleStyle7 = (color) => ({
+var subtitleStyle8 = (color) => ({
   fontSize: "0.85rem",
   color,
   margin: "0 0 20px",
@@ -3957,8 +4083,8 @@ function AdvancedSourceScreen({
             right: /* @__PURE__ */ jsx("span", { style: advancedBadgeStyle(tokens.accent), children: "Advanced" })
           }
         ),
-        /* @__PURE__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
+        /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
+        /* @__PURE__ */ jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
         /* @__PURE__ */ jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Select tokens to approve" }),
         /* @__PURE__ */ jsx("div", { style: chainListStyle, children: choices.map((chain) => {
           const isExpanded = expandedChain === chain.chainName;
@@ -4021,14 +4147,14 @@ var advancedBadgeStyle = (color) => ({
   padding: "3px 10px",
   letterSpacing: "0.02em"
 });
-var headingStyle7 = (color) => ({
+var headingStyle8 = (color) => ({
   fontSize: "1.3rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle8 = (color) => ({
+var subtitleStyle9 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 20px",
@@ -4156,16 +4282,16 @@ function TransferStatusScreen({
   const steps = buildSteps(phase);
   return /* @__PURE__ */ jsxs(ScreenLayout, { children: [
     /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
-    /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
+    /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
       /* @__PURE__ */ jsx(Spinner, { size: 48 }),
-      /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
-      error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error }),
+      /* @__PURE__ */ jsx("h2", { style: headingStyle9(tokens.text), children: "Processing Transfer..." }),
+      error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle6(tokens), children: error }),
       /* @__PURE__ */ jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsx(StepList, { steps }) }),
       /* @__PURE__ */ jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
     ] })
   ] });
 }
-var contentStyle5 = {
+var contentStyle6 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4174,14 +4300,14 @@ var contentStyle5 = {
   textAlign: "center",
   padding: "0 24px"
 };
-var headingStyle8 = (color) => ({
+var headingStyle9 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 16px"
 });
-var errorBannerStyle5 = (tokens) => ({
+var errorBannerStyle6 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -4241,10 +4367,10 @@ function OpenWalletScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
           logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsx("h2", { style: headingStyle9(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle10(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
           !loading && /* @__PURE__ */ jsxs("div", { style: waitingBadgeStyle(tokens), children: [
             /* @__PURE__ */ jsx(Spinner, { size: 14 }),
             /* @__PURE__ */ jsx("span", { children: "Waiting for authorization..." })
@@ -4254,7 +4380,7 @@ function OpenWalletScreen({
     }
   );
 }
-var contentStyle6 = {
+var contentStyle7 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4274,14 +4400,14 @@ var logoStyle = {
   borderRadius: 14,
   objectFit: "contain"
 };
-var headingStyle9 = (color) => ({
+var headingStyle10 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle9 = (color) => ({
+var subtitleStyle10 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -4325,10 +4451,10 @@ function ConfirmSignScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
+        /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
           logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: "Wallet authorized" }),
-          /* @__PURE__ */ jsxs("p", { style: subtitleStyle10(tokens.textSecondary), children: [
+          /* @__PURE__ */ jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
+          /* @__PURE__ */ jsxs("p", { style: subtitleStyle11(tokens.textSecondary), children: [
             displayName,
             " approved the connection. Tap below to confirm your payment."
           ] }),
@@ -4341,7 +4467,7 @@ function ConfirmSignScreen({
     }
   );
 }
-var contentStyle7 = {
+var contentStyle8 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4356,14 +4482,14 @@ var logoStyle2 = {
   borderRadius: 14,
   objectFit: "contain"
 };
-var headingStyle10 = (color) => ({
+var headingStyle11 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle10 = (color) => ({
+var subtitleStyle11 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -4422,7 +4548,7 @@ var PaymentErrorBoundary = class extends Component {
         /* @__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: headingStyle11, children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("h2", { style: headingStyle12, 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" })
     ] });
@@ -4442,7 +4568,7 @@ var containerStyle8 = {
 var iconStyle4 = {
   marginBottom: 20
 };
-var headingStyle11 = {
+var headingStyle12 = {
   fontSize: "1.25rem",
   fontWeight: 700,
   color: "#1a1a1a",
@@ -4605,6 +4731,7 @@ function SwypePaymentInner({
   const [transfer, setTransfer] = useState(null);
   const [creatingTransfer, setCreatingTransfer] = useState(false);
   const [registeringPasskey, setRegisteringPasskey] = useState(false);
+  const [verifyingPasskeyPopup, setVerifyingPasskeyPopup] = useState(false);
   const [passkeyPopupNeeded, setPasskeyPopupNeeded] = useState(
     () => isSafari() && isInCrossOriginIframe()
   );
@@ -4913,6 +5040,10 @@ function SwypePaymentInner({
         }
         if (cancelled) return;
         const credentialIds = allPasskeys.map((p) => p.credentialId);
+        if (isSafari() && isInCrossOriginIframe()) {
+          setStep("verify-passkey");
+          return;
+        }
         const matched = await findDevicePasskey(credentialIds);
         if (cancelled) return;
         if (matched) {
@@ -5439,6 +5570,27 @@ function SwypePaymentInner({
       setRegisteringPasskey(false);
     }
   }, [user, completePasskeyRegistration, getAccessToken, apiBaseUrl, knownCredentialIds]);
+  const handleVerifyPasskeyViaPopup = useCallback(async () => {
+    setVerifyingPasskeyPopup(true);
+    setError(null);
+    try {
+      const matched = await findDevicePasskeyViaPopup({
+        credentialIds: knownCredentialIds,
+        rpId: resolvePasskeyRpId()
+      });
+      if (matched) {
+        setActiveCredentialId(matched);
+        window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, matched);
+        setStep("login");
+      } else {
+        setStep("create-passkey");
+      }
+    } catch {
+      setStep("create-passkey");
+    } finally {
+      setVerifyingPasskeyPopup(false);
+    }
+  }, [knownCredentialIds]);
   const handleSelectProvider = useCallback((providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
@@ -5570,6 +5722,17 @@ function SwypePaymentInner({
   if ((step === "login" || step === "otp-verify") && authenticated) {
     return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Verifying your passkey..." }) }) });
   }
+  if (step === "verify-passkey") {
+    return /* @__PURE__ */ jsx(
+      VerifyPasskeyScreen,
+      {
+        onVerify: handleVerifyPasskeyViaPopup,
+        onBack: handleLogout,
+        verifying: verifyingPasskeyPopup,
+        error
+      }
+    );
+  }
   if (step === "create-passkey") {
     return /* @__PURE__ */ jsx(
       CreatePasskeyScreen,
@@ -5731,6 +5894,6 @@ function SwypePaymentInner({
   return null;
 }
 
-export { AdvancedSourceScreen, CreatePasskeyScreen, IconCircle, InfoBanner, 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 };
+export { AdvancedSourceScreen, CreatePasskeyScreen, IconCircle, InfoBanner, OutlineButton, PasskeyIframeBlockedError, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypePayment, SwypeProvider, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, findDevicePasskeyViaPopup, getTheme, lightTheme, resolvePasskeyRpId, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map