@swype-org/react-sdk 0.1.84 → 0.1.85

package/dist/index.cjs

@@ -788,6 +788,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`, {
@@ -2773,6 +2833,72 @@ var errorBannerStyle2 = (tokens) => ({
   width: "100%",
   textAlign: "left"
 });
+function VerifyPasskeyScreen({
+  onVerify,
+  onBack,
+  verifying,
+  error
+}) {
+  const { tokens } = useSwypeConfig();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onVerify, disabled: verifying, loading: verifying, children: "Verify passkey" }),
+        /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "accent", size: 64, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "3", stroke: tokens.accent, strokeWidth: "1.5", strokeDasharray: "3 2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "10", r: "1", fill: tokens.accent }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "10", r: "1", fill: tokens.accent }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Verify your passkey" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: errorBannerStyle3(tokens), children: error }),
+          /* @__PURE__ */ jsxRuntime.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",
@@ -2815,8 +2941,8 @@ function WalletPickerScreen({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Set up Swype", onBack }),
         hasPending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Continue where you left off" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: pendingListStyle, children: pendingConnections.map((acct) => {
             const wallet = acct.wallets[0];
             const address = wallet ? truncateAddress(wallet.name) : void 0;
@@ -2856,8 +2982,8 @@ function WalletPickerScreen({
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerStyle2(tokens.border), children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: dividerTextStyle(tokens.textMuted), children: "Or connect a new wallet" }) })
         ] }),
         !hasPending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Where are your stablecoins?" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Select the wallet you want to deposit from" })
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Where are your stablecoins?" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Select the wallet you want to deposit from" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: gridStyle, children: [
           displayProviders.map((p) => {
@@ -2910,14 +3036,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"
@@ -3093,9 +3219,9 @@ function SetupScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Swype Setup", onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
-        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle3(tokens), children: error }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Set up One-Tap deposits" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceRowStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceLeftStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: coinIconStyle(tokens.accent), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
@@ -3173,20 +3299,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,
@@ -3454,7 +3580,7 @@ function DepositScreen({
             "%)"
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: detailRowStyle(tokens.textMuted), children: "Fees calculated at time of transfer" })
         ] }),
-        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error })
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error })
       ]
     }
   );
@@ -3522,7 +3648,7 @@ var detailRowStyle = (color) => ({
   color,
   marginBottom: 4
 });
-var errorBannerStyle4 = (tokens) => ({
+var errorBannerStyle5 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -3621,22 +3747,22 @@ function SuccessScreen({
             right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
           succeeded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("h2", { style: headingStyle6(tokens.text), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle7(tokens.text), children: [
               "$",
               amount.toFixed(2),
               " deposited"
             ] }),
-            merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle6(tokens.textSecondary), children: [
+            merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle7(tokens.textSecondary), children: [
               "to ",
               merchantName
             ] })
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "error", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Transfer failed" }),
-            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.error), children: error })
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Transfer failed" }),
+            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.error), children: error })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryCardStyle(tokens), children: [
             sourceName && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
@@ -3668,21 +3794,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"
@@ -3788,7 +3914,7 @@ function SelectSourceScreen({
             right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textMuted), children: "Choose which chain and token to pay from." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textMuted), children: "Choose which chain and token to pay from." }),
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Chain" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: choices.map((chain) => {
           const isSelected = chain.chainName === selectedChainName;
@@ -3845,7 +3971,7 @@ function SelectSourceScreen({
     }
   );
 }
-var subtitleStyle7 = (color) => ({
+var subtitleStyle8 = (color) => ({
   fontSize: "0.85rem",
   color,
   margin: "0 0 20px",
@@ -3960,8 +4086,8 @@ function AdvancedSourceScreen({
             right: /* @__PURE__ */ jsxRuntime.jsx("span", { style: advancedBadgeStyle(tokens.accent), children: "Advanced" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Select tokens to approve" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle, children: choices.map((chain) => {
           const isExpanded = expandedChain === chain.chainName;
@@ -4024,14 +4150,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",
@@ -4159,16 +4285,16 @@ function TransferStatusScreen({
   const steps = buildSteps(phase);
   return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: "Processing Transfer..." }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle6(tokens), children: error }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
     ] })
   ] });
 }
-var contentStyle5 = {
+var contentStyle6 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4177,14 +4303,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,
@@ -4244,10 +4370,10 @@ function OpenWalletScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
           logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle10(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
           !loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
             /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
@@ -4257,7 +4383,7 @@ function OpenWalletScreen({
     }
   );
 }
-var contentStyle6 = {
+var contentStyle7 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4277,14 +4403,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",
@@ -4328,10 +4454,10 @@ function ConfirmSignScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
           logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: "Wallet authorized" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle10(tokens.textSecondary), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle11(tokens.textSecondary), children: [
             displayName,
             " approved the connection. Tap below to confirm your payment."
           ] }),
@@ -4344,7 +4470,7 @@ function ConfirmSignScreen({
     }
   );
 }
-var contentStyle7 = {
+var contentStyle8 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4359,14 +4485,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",
@@ -4425,7 +4551,7 @@ var PaymentErrorBoundary = class extends react.Component {
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11, children: "Something went wrong" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle12, children: "Something went wrong" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: messageStyle, children: "An unexpected error occurred. Please try again." }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: this.handleReset, style: buttonStyle3, children: "Try again" })
     ] });
@@ -4445,7 +4571,7 @@ var containerStyle8 = {
 var iconStyle4 = {
   marginBottom: 20
 };
-var headingStyle11 = {
+var headingStyle12 = {
   fontSize: "1.25rem",
   fontWeight: 700,
   color: "#1a1a1a",
@@ -4608,6 +4734,7 @@ function SwypePaymentInner({
   const [transfer, setTransfer] = react.useState(null);
   const [creatingTransfer, setCreatingTransfer] = react.useState(false);
   const [registeringPasskey, setRegisteringPasskey] = react.useState(false);
+  const [verifyingPasskeyPopup, setVerifyingPasskeyPopup] = react.useState(false);
   const [passkeyPopupNeeded, setPasskeyPopupNeeded] = react.useState(
     () => isSafari() && isInCrossOriginIframe()
   );
@@ -4916,6 +5043,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) {
@@ -5442,6 +5573,27 @@ function SwypePaymentInner({
       setRegisteringPasskey(false);
     }
   }, [user, completePasskeyRegistration, getAccessToken, apiBaseUrl, knownCredentialIds]);
+  const handleVerifyPasskeyViaPopup = react.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 = react.useCallback((providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
@@ -5573,6 +5725,17 @@ function SwypePaymentInner({
   if ((step === "login" || step === "otp-verify") && authenticated) {
     return /* @__PURE__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Verifying your passkey..." }) }) });
   }
+  if (step === "verify-passkey") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      VerifyPasskeyScreen,
+      {
+        onVerify: handleVerifyPasskeyViaPopup,
+        onBack: handleLogout,
+        verifying: verifyingPasskeyPopup,
+        error
+      }
+    );
+  }
   if (step === "create-passkey") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       CreatePasskeyScreen,
@@ -5757,8 +5920,10 @@ exports.createPasskeyViaPopup = createPasskeyViaPopup;
 exports.darkTheme = darkTheme;
 exports.deviceHasPasskey = deviceHasPasskey;
 exports.findDevicePasskey = findDevicePasskey;
+exports.findDevicePasskeyViaPopup = findDevicePasskeyViaPopup;
 exports.getTheme = getTheme;
 exports.lightTheme = lightTheme;
+exports.resolvePasskeyRpId = resolvePasskeyRpId;
 exports.swypeApi = api_exports;
 exports.useAuthorizationExecutor = useAuthorizationExecutor;
 exports.useSwypeConfig = useSwypeConfig;