@swype-org/react-sdk 0.1.48 → 0.1.49

package/dist/index.cjs

@@ -669,13 +669,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));
@@ -692,10 +699,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));
@@ -2647,7 +2659,6 @@ var hintStyle = (color) => ({
 });
 function CreatePasskeyScreen({
   onCreatePasskey,
-  onSkip,
   onBack,
   creating,
   error
@@ -2658,7 +2669,6 @@ function CreatePasskeyScreen({
     {
       footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onCreatePasskey, disabled: creating, loading: creating, children: "Create passkey" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onSkip, style: skipStyle(tokens.textMuted), disabled: creating, children: "Skip for now" }),
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
@@ -2713,19 +2723,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",
@@ -3944,6 +3941,74 @@ var hintStyle3 = (color) => ({
   color,
   margin: "8px 0 0"
 });
+var PaymentErrorBoundary = class extends react.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__ */ jsxRuntime.jsxs("div", { style: containerStyle8, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle4, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#ef4444", strokeWidth: "1.5" }),
+        /* @__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: headingStyle9, 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" })
+    ] });
+  }
+};
+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;
@@ -4021,7 +4086,14 @@ function buildSelectSourceChoices(options) {
   }
   return chainChoices;
 }
-function SwypePayment({
+function SwypePayment(props) {
+  const resetKey = react.useRef(0);
+  const handleBoundaryReset = react.useCallback(() => {
+    resetKey.current += 1;
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(PaymentErrorBoundary, { onReset: handleBoundaryReset, children: /* @__PURE__ */ jsxRuntime.jsx(SwypePaymentInner, { ...props }) }, resetKey.current);
+}
+function SwypePaymentInner({
   destination,
   onComplete,
   onError,
@@ -4212,7 +4284,7 @@ function SwypePayment({
         }
         setStep("create-passkey");
       } catch {
-        if (!cancelled) setStep("deposit");
+        if (!cancelled) setStep("create-passkey");
       }
     };
     checkPasskey();
@@ -4592,16 +4664,6 @@ function SwypePayment({
       setRegisteringPasskey(false);
     }
   }, [getAccessToken, user, apiBaseUrl, accounts]);
-  const handleSkipPasskey = react.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 = react.useCallback((providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
@@ -4717,8 +4779,7 @@ function SwypePayment({
       CreatePasskeyScreen,
       {
         onCreatePasskey: handleRegisterPasskey,
-        onSkip: handleSkipPasskey,
-        onBack: () => setStep("login"),
+        onBack: handleLogout,
         creating: registeringPasskey,
         error
       }
@@ -4733,7 +4794,7 @@ function SwypePayment({
         loading: creatingTransfer,
         onSelectProvider: handleSelectProvider,
         onContinueConnection: handleContinueConnection,
-        onBack: () => setStep("create-passkey")
+        onBack: () => setStep(activeCredentialId ? "deposit" : "create-passkey")
       }
     );
   }