@swype-org/react-sdk 0.1.45 → 0.1.46

package/dist/index.cjs

@@ -657,6 +657,59 @@ function normalizeSignature(sig) {
   );
 }
 
+// src/passkey-delegation.ts
+function isInCrossOriginIframe() {
+  if (typeof window === "undefined") return false;
+  if (window.parent === window) return false;
+  try {
+    void window.parent.location.origin;
+    return false;
+  } catch {
+    return true;
+  }
+}
+var delegationCounter = 0;
+function delegatePasskeyCreate(options) {
+  return new Promise((resolve, reject) => {
+    const id = `pc-${++delegationCounter}-${Date.now()}`;
+    const handler = (event) => {
+      const data = event.data;
+      if (!data || typeof data !== "object") return;
+      if (data.type !== "swype:passkey-create-response" || data.id !== id) return;
+      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."));
+      }
+    };
+    window.addEventListener("message", handler);
+    window.parent.postMessage({ type: "swype:passkey-create-request", id, options }, "*");
+  });
+}
+function delegatePasskeyGet(options) {
+  return new Promise((resolve, reject) => {
+    const id = `pg-${++delegationCounter}-${Date.now()}`;
+    const handler = (event) => {
+      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.error) {
+        reject(new Error(data.error));
+      } else if (data.result) {
+        resolve(data.result);
+      } else {
+        reject(new Error("Invalid passkey get response."));
+      }
+    };
+    window.addEventListener("message", handler);
+    window.parent.postMessage({ type: "swype:passkey-get-request", id, options }, "*");
+  });
+}
+
 // src/hooks.ts
 var WALLET_CLIENT_MAX_ATTEMPTS = 15;
 var WALLET_CLIENT_POLL_MS = 200;
@@ -778,6 +831,26 @@ async function createPasskeyCredential(params) {
   const challenge = new Uint8Array(32);
   crypto.getRandomValues(challenge);
   const rpId = resolvePasskeyRpId();
+  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
+    });
+  }
   await waitForDocumentFocus();
   const credential = await navigator.credentials.create({
     publicKey: {
@@ -821,6 +894,16 @@ async function findDevicePasskey(credentialIds) {
   try {
     const challenge = new Uint8Array(32);
     crypto.getRandomValues(challenge);
+    if (isInCrossOriginIframe()) {
+      const result = await delegatePasskeyGet({
+        challenge: toBase64(challenge),
+        rpId: resolvePasskeyRpId(),
+        allowCredentials: credentialIds.map((id) => ({ type: "public-key", id })),
+        userVerification: "discouraged",
+        timeout: 3e4
+      });
+      return result.credentialId;
+    }
     await waitForDocumentFocus();
     const assertion = await navigator.credentials.get({
       publicKey: {
@@ -1318,31 +1401,49 @@ function useTransferSigning(pollIntervalMs = 2e3, options) {
           throw new Error("Timed out waiting for sign payload. Please try again.");
         }
         const hashBytes = hexToBytes(payload.userOpHash);
-        const allowCredentials = payload.passkeyCredentialId ? [{
-          type: "public-key",
-          id: base64ToBytes(payload.passkeyCredentialId)
-        }] : void 0;
-        await waitForDocumentFocus();
-        const assertion = await navigator.credentials.get({
-          publicKey: {
-            challenge: hashBytes,
+        let signedUserOp;
+        if (isInCrossOriginIframe()) {
+          const delegatedResult = await delegatePasskeyGet({
+            challenge: toBase64(hashBytes),
             rpId: resolvePasskeyRpId(),
-            allowCredentials,
+            allowCredentials: payload.passkeyCredentialId ? [{ type: "public-key", id: payload.passkeyCredentialId }] : void 0,
             userVerification: "required",
             timeout: 6e4
+          });
+          signedUserOp = {
+            ...payload.userOp,
+            credentialId: delegatedResult.credentialId,
+            signature: delegatedResult.signature,
+            authenticatorData: delegatedResult.authenticatorData,
+            clientDataJSON: delegatedResult.clientDataJSON
+          };
+        } else {
+          const allowCredentials = payload.passkeyCredentialId ? [{
+            type: "public-key",
+            id: base64ToBytes(payload.passkeyCredentialId)
+          }] : void 0;
+          await waitForDocumentFocus();
+          const assertion = await navigator.credentials.get({
+            publicKey: {
+              challenge: hashBytes,
+              rpId: resolvePasskeyRpId(),
+              allowCredentials,
+              userVerification: "required",
+              timeout: 6e4
+            }
+          });
+          if (!assertion) {
+            throw new Error("Passkey authentication was cancelled.");
           }
-        });
-        if (!assertion) {
-          throw new Error("Passkey authentication was cancelled.");
+          const response = assertion.response;
+          signedUserOp = {
+            ...payload.userOp,
+            credentialId: toBase64(assertion.rawId),
+            signature: toBase64(response.signature),
+            authenticatorData: toBase64(response.authenticatorData),
+            clientDataJSON: toBase64(response.clientDataJSON)
+          };
         }
-        const response = assertion.response;
-        const signedUserOp = {
-          ...payload.userOp,
-          credentialId: toBase64(assertion.rawId),
-          signature: toBase64(response.signature),
-          authenticatorData: toBase64(response.authenticatorData),
-          clientDataJSON: toBase64(response.clientDataJSON)
-        };
         return await signTransfer(
           apiBaseUrl,
           token ?? "",
@@ -3872,6 +3973,7 @@ function SwypePayment({
   const [mobileFlow, setMobileFlow] = react.useState(false);
   const pollingTransferIdRef = react.useRef(null);
   const mobileSigningTransferIdRef = react.useRef(null);
+  const mobileSetupFlowRef = react.useRef(false);
   const processingStartedAtRef = react.useRef(null);
   const [selectSourceChainName, setSelectSourceChainName] = react.useState("");
   const [selectSourceTokenSymbol, setSelectSourceTokenSymbol] = react.useState("");
@@ -3882,7 +3984,7 @@ function SwypePayment({
   const transferSigning = useTransferSigning();
   const sourceType = connectingNewAccount ? "providerId" : selectedWalletId ? "walletId" : selectedAccountId ? "accountId" : "providerId";
   const sourceId = connectingNewAccount ? selectedProviderId ?? "" : selectedWalletId ? selectedWalletId : selectedAccountId ? selectedAccountId : selectedProviderId ?? "";
-  react.useCallback(async () => {
+  const reloadAccounts = react.useCallback(async () => {
     const token = await getAccessToken();
     if (!token || !activeCredentialId) return;
     const [accts, prov] = await Promise.all([
@@ -4113,6 +4215,16 @@ function SwypePayment({
     if (!mobileFlow) return;
     const polledTransfer = polling.transfer;
     if (!polledTransfer || polledTransfer.status !== "AUTHORIZED") return;
+    if (mobileSetupFlowRef.current) {
+      mobileSetupFlowRef.current = false;
+      setMobileFlow(false);
+      polling.stopPolling();
+      setTransfer(polledTransfer);
+      reloadAccounts().catch(() => {
+      });
+      setStep("deposit");
+      return;
+    }
     if (transferSigning.signing) return;
     if (mobileSigningTransferIdRef.current === polledTransfer.id) return;
     mobileSigningTransferIdRef.current = polledTransfer.id;
@@ -4128,7 +4240,7 @@ function SwypePayment({
       }
     };
     void sign();
-  }, [mobileFlow, polling.transfer, transferSigning, onError]);
+  }, [mobileFlow, polling.transfer, polling.stopPolling, transferSigning, onError, reloadAccounts]);
   react.useEffect(() => {
     if (!mobileFlow) return;
     const transferIdToResume = pollingTransferIdRef.current ?? transfer?.id;
@@ -4230,13 +4342,13 @@ function SwypePayment({
     }
     return count;
   }, [accounts]);
-  const handlePay = react.useCallback(async (depositAmount2) => {
+  const handlePay = react.useCallback(async (depositAmount2, sourceOverrides) => {
     const parsedAmount = depositAmount2;
     if (isNaN(parsedAmount) || parsedAmount < MIN_SEND_AMOUNT_USD) {
       setError(`Minimum amount is $${MIN_SEND_AMOUNT_USD.toFixed(2)}.`);
       return;
     }
-    if (!sourceId) {
+    if (!sourceOverrides?.sourceId && !sourceId) {
       setError("No account or provider selected.");
       return;
     }
@@ -4251,10 +4363,16 @@ function SwypePayment({
     setCreatingTransfer(true);
     setMobileFlow(false);
     try {
+      if (transfer?.status === "AUTHORIZED") {
+        const signedTransfer2 = await transferSigning.signTransfer(transfer.id);
+        setTransfer(signedTransfer2);
+        polling.startPolling(transfer.id);
+        return;
+      }
       const token = await getAccessToken();
       if (!token) throw new Error("Not authenticated");
-      let effectiveSourceType = sourceType;
-      let effectiveSourceId = sourceId;
+      let effectiveSourceType = sourceOverrides?.sourceType ?? sourceType;
+      let effectiveSourceId = sourceOverrides?.sourceId ?? sourceId;
       if (effectiveSourceType === "accountId") {
         const acct = accounts.find((a) => a.id === effectiveSourceId);
         const activeWallet = acct?.wallets.find((w) => w.status === "ACTIVE");
@@ -4332,7 +4450,8 @@ function SwypePayment({
     onError,
     useWalletConnector,
     idempotencyKey,
-    merchantAuthorization
+    merchantAuthorization,
+    transfer
   ]);
   const handleRegisterPasskey = react.useCallback(async () => {
     setRegisteringPasskey(true);
@@ -4376,8 +4495,18 @@ function SwypePayment({
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
     setConnectingNewAccount(true);
-    setStep("deposit");
-  }, []);
+    const isMobile = !shouldUseWalletConnector({
+      useWalletConnector,
+      userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
+    });
+    if (isMobile) {
+      mobileSetupFlowRef.current = true;
+      const amount2 = depositAmount ?? 5;
+      handlePay(amount2, { sourceType: "providerId", sourceId: providerId });
+    } else {
+      setStep("deposit");
+    }
+  }, [useWalletConnector, depositAmount, handlePay]);
   const handleContinueConnection = react.useCallback(
     (accountId) => {
       const acct = accounts.find((a) => a.id === accountId);