@swype-org/react-sdk 0.1.79 → 0.1.81

package/dist/index.d.cts

@@ -389,7 +389,8 @@ declare function SwypePayment(props: SwypePaymentProps): react_jsx_runtime.JSX.E
  * 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`.
+ * `BroadcastChannel` (Safari strips `window.opener` from popups opened
+ * by cross-origin iframes, so `postMessage` via opener doesn't work).
  *
  * Passkey *assertion* (`navigator.credentials.get`) still delegates to
  * the parent page via postMessage as before.
@@ -419,12 +420,19 @@ interface PasskeyPopupOptions {
         userVerification?: string;
     };
     timeout?: number;
+    /** Populated by `createPasskeyViaPopup`; not set by callers. */
+    channelId?: string;
 }
 /**
  * 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.
  *
+ * Communication uses `BroadcastChannel` because Safari strips
+ * `window.opener` from popups opened by cross-origin iframes.
+ * Falls back to `window.postMessage` for browsers that preserve the
+ * opener reference.
+ *
  * Must be called from a user-gesture handler (e.g. button click) to
  * avoid the browser's pop-up blocker.
  */

package/dist/index.d.ts

@@ -389,7 +389,8 @@ declare function SwypePayment(props: SwypePaymentProps): react_jsx_runtime.JSX.E
  * 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`.
+ * `BroadcastChannel` (Safari strips `window.opener` from popups opened
+ * by cross-origin iframes, so `postMessage` via opener doesn't work).
  *
  * Passkey *assertion* (`navigator.credentials.get`) still delegates to
  * the parent page via postMessage as before.
@@ -419,12 +420,19 @@ interface PasskeyPopupOptions {
         userVerification?: string;
     };
     timeout?: number;
+    /** Populated by `createPasskeyViaPopup`; not set by callers. */
+    channelId?: string;
 }
 /**
  * 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.
  *
+ * Communication uses `BroadcastChannel` because Safari strips
+ * `window.opener` from popups opened by cross-origin iframes.
+ * Falls back to `window.postMessage` for browsers that preserve the
+ * opener reference.
+ *
  * Must be called from a user-gesture handler (e.g. button click) to
  * avoid the browser's pop-up blocker.
  */

package/dist/index.js

@@ -698,13 +698,17 @@ var POPUP_RESULT_TIMEOUT_MS = 12e4;
 var POPUP_CLOSED_POLL_MS = 500;
 function createPasskeyViaPopup(options) {
   return new Promise((resolve, reject) => {
-    const encoded = btoa(JSON.stringify(options));
+    const channelId = `swype-pk-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const payload = { ...options, channelId };
+    const encoded = btoa(JSON.stringify(payload));
     const popupUrl = `${window.location.origin}/passkey-register#${encoded}`;
     const popup = window.open(popupUrl, "swype-passkey");
     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();
       reject(new Error("Passkey creation timed out. Please try again."));
@@ -715,11 +719,11 @@ function createPasskeyViaPopup(options) {
         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;
+    function handleResult(data) {
+      if (settled) return;
       if (!data || typeof data !== "object") return;
       if (data.type !== "swype:passkey-popup-result") return;
+      settled = true;
       cleanup();
       if (data.error) {
         reject(new Error(data.error));
@@ -728,13 +732,21 @@ function createPasskeyViaPopup(options) {
       } else {
         reject(new Error("Invalid passkey popup response."));
       }
+    }
+    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", handler);
+      window.removeEventListener("message", postMessageHandler);
+      channel?.close();
     }
-    window.addEventListener("message", handler);
   });
 }
 
@@ -3244,12 +3256,15 @@ function DepositScreen({
   onChangeSource,
   onSwitchWallet,
   onBack,
-  onLogout
+  onLogout,
+  onIncreaseLimit,
+  increasingLimit
 }) {
   const { tokens } = useSwypeConfig();
   const amount = initialAmount;
   const isLowBalance = availableBalance < MIN_DEPOSIT;
-  const canDeposit = amount >= MIN_DEPOSIT && amount <= remainingLimit && !isLowBalance && !processing;
+  const exceedsLimit = amount > remainingLimit && !isLowBalance;
+  const canDeposit = amount >= MIN_DEPOSIT && !exceedsLimit && !isLowBalance && !processing;
   const headerTitle = merchantName ? `Deposit to ${merchantName}` : "Deposit";
   if (isLowBalance) {
     return /* @__PURE__ */ jsxs(
@@ -3307,11 +3322,22 @@ function DepositScreen({
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: [
-          "Deposit $",
-          amount.toFixed(2)
+        exceedsLimit && onIncreaseLimit ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(PrimaryButton, { onClick: onIncreaseLimit, loading: increasingLimit, children: "Increase limit" }),
+          /* @__PURE__ */ jsxs("p", { style: limitExceededHintStyle(tokens.warning), children: [
+            "Your deposit of $",
+            amount.toFixed(2),
+            " exceeds your One-Tap limit of $",
+            remainingLimit.toFixed(2),
+            ". Increase your limit to continue."
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: [
+            "Deposit $",
+            amount.toFixed(2)
+          ] }),
+          /* @__PURE__ */ jsx("p", { style: noApprovalStyle(tokens.textMuted), children: "No approval needed \xB7 within your One-Tap limit" })
         ] }),
-        /* @__PURE__ */ jsx("p", { style: noApprovalStyle(tokens.textMuted), children: "No approval needed \xB7 within your One-Tap limit" }),
         /* @__PURE__ */ jsxs("p", { style: routeStyle(tokens.textMuted), children: [
           "From ",
           sourceName,
@@ -3459,6 +3485,13 @@ var noApprovalStyle = (color) => ({
   color,
   margin: "12px 0 2px"
 });
+var limitExceededHintStyle = (color) => ({
+  textAlign: "center",
+  fontSize: "0.78rem",
+  color,
+  margin: "12px 0 2px",
+  lineHeight: 1.5
+});
 var routeStyle = (color) => ({
   textAlign: "center",
   fontSize: "0.75rem",
@@ -5207,6 +5240,81 @@ function SwypePaymentInner({
     merchantAuthorization,
     transfer
   ]);
+  const [increasingLimit, setIncreasingLimit] = useState(false);
+  const handleIncreaseLimit = useCallback(async () => {
+    const parsedAmount = depositAmount ?? 5;
+    if (!sourceId) {
+      setError("No account or provider selected.");
+      return;
+    }
+    if (!activeCredentialId) {
+      setError("Create a passkey on this device before continuing.");
+      setStep("create-passkey");
+      return;
+    }
+    setError(null);
+    setIncreasingLimit(true);
+    try {
+      const token = await getAccessToken();
+      if (!token) throw new Error("Not authenticated");
+      let effectiveSourceType = sourceType;
+      let effectiveSourceId = sourceId;
+      if (effectiveSourceType === "accountId") {
+        const acct = accounts.find((a) => a.id === effectiveSourceId);
+        const activeWallet = acct?.wallets.find((w) => w.status === "ACTIVE");
+        if (activeWallet) {
+          effectiveSourceType = "walletId";
+          effectiveSourceId = activeWallet.id;
+        }
+      }
+      const t = await createTransfer(apiBaseUrl, token, {
+        id: idempotencyKey,
+        credentialId: activeCredentialId,
+        merchantAuthorization,
+        sourceType: effectiveSourceType,
+        sourceId: effectiveSourceId,
+        destination,
+        amount: parsedAmount
+      });
+      setTransfer(t);
+      if (t.authorizationSessions && t.authorizationSessions.length > 0) {
+        const uri = t.authorizationSessions[0].uri;
+        setMobileFlow(true);
+        pollingTransferIdRef.current = t.id;
+        mobileSetupFlowRef.current = true;
+        handlingMobileReturnRef.current = false;
+        polling.startPolling(t.id);
+        setDeeplinkUri(uri);
+        persistMobileFlowState({
+          transferId: t.id,
+          deeplinkUri: uri,
+          providerId: selectedProviderId,
+          isSetup: true
+        });
+        triggerDeeplink(uri);
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to increase limit";
+      setError(msg);
+      onError?.(msg);
+    } finally {
+      setIncreasingLimit(false);
+    }
+  }, [
+    depositAmount,
+    sourceId,
+    sourceType,
+    activeCredentialId,
+    apiBaseUrl,
+    getAccessToken,
+    accounts,
+    polling,
+    onError,
+    idempotencyKey,
+    merchantAuthorization,
+    destination,
+    selectedProviderId
+  ]);
   const completePasskeyRegistration = useCallback(async (credentialId, publicKey) => {
     const token = await getAccessToken();
     if (!token) throw new Error("Not authenticated");
@@ -5468,7 +5576,9 @@ function SwypePaymentInner({
         onChangeSource: () => setStep("wallet-picker"),
         onSwitchWallet: () => setStep("wallet-picker"),
         onBack: onBack ?? (() => handleLogout()),
-        onLogout: handleLogout
+        onLogout: handleLogout,
+        onIncreaseLimit: handleIncreaseLimit,
+        increasingLimit
       }
     );
   }