@swype-org/react-sdk 0.1.48 → 0.1.49

package/dist/index.d.cts

@@ -377,7 +377,7 @@ 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;
 
 type AccessTokenGetter = () => Promise<string | null | undefined>;
 /**

package/dist/index.d.ts

@@ -377,7 +377,7 @@ 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;
 
 type AccessTokenGetter = () => Promise<string | null | undefined>;
 /**

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';
@@ -666,13 +666,20 @@ function isInCrossOriginIframe() {
   }
 }
 var delegationCounter = 0;
+var DELEGATION_CREATE_TIMEOUT_MS = 6e4;
+var DELEGATION_GET_TIMEOUT_MS = 3e4;
 function delegatePasskeyCreate(options) {
   return new Promise((resolve, reject) => {
     const id = `pc-${++delegationCounter}-${Date.now()}`;
+    const timer = setTimeout(() => {
+      window.removeEventListener("message", handler);
+      reject(new Error("Passkey creation timed out. Please try again."));
+    }, DELEGATION_CREATE_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;
+      clearTimeout(timer);
       window.removeEventListener("message", handler);
       if (data.error) {
         reject(new Error(data.error));
@@ -689,10 +696,15 @@ function delegatePasskeyCreate(options) {
 function delegatePasskeyGet(options) {
   return new Promise((resolve, reject) => {
     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-get-response" || data.id !== id) return;
+      clearTimeout(timer);
       window.removeEventListener("message", handler);
       if (data.error) {
         reject(new Error(data.error));
@@ -2644,7 +2656,6 @@ var hintStyle = (color) => ({
 });
 function CreatePasskeyScreen({
   onCreatePasskey,
-  onSkip,
   onBack,
   creating,
   error
@@ -2655,7 +2666,6 @@ function CreatePasskeyScreen({
     {
       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(PoweredByFooter, {})
       ] }),
       children: [
@@ -2710,19 +2720,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 +3938,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 +4083,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,
@@ -4209,7 +4281,7 @@ function SwypePayment({
         }
         setStep("create-passkey");
       } catch {
-        if (!cancelled) setStep("deposit");
+        if (!cancelled) setStep("create-passkey");
       }
     };
     checkPasskey();
@@ -4589,16 +4661,6 @@ function SwypePayment({
       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]);
   const handleSelectProvider = useCallback((providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
@@ -4714,8 +4776,7 @@ function SwypePayment({
       CreatePasskeyScreen,
       {
         onCreatePasskey: handleRegisterPasskey,
-        onSkip: handleSkipPasskey,
-        onBack: () => setStep("login"),
+        onBack: handleLogout,
         creating: registeringPasskey,
         error
       }
@@ -4730,7 +4791,7 @@ function SwypePayment({
         loading: creatingTransfer,
         onSelectProvider: handleSelectProvider,
         onContinueConnection: handleContinueConnection,
-        onBack: () => setStep("create-passkey")
+        onBack: () => setStep(activeCredentialId ? "deposit" : "create-passkey")
       }
     );
   }