@swype-org/react-sdk 0.1.47 → 0.1.49

package/dist/index.d.cts

@@ -198,7 +198,7 @@ interface UserConfig {
 /** Theme mode */
 type ThemeMode = 'light' | 'dark';
 /** Steps in the payment flow */
-type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'wallet-picker' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
+type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'wallet-picker' | 'open-wallet' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
 /** User-selected advanced settings for chain/asset override */
 interface AdvancedSettings {
     /** Override asset (e.g. 'USDC', 'USDT'). Null = let backend decide. */
@@ -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

@@ -198,7 +198,7 @@ interface UserConfig {
 /** Theme mode */
 type ThemeMode = 'light' | 'dark';
 /** Steps in the payment flow */
-type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'wallet-picker' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
+type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'wallet-picker' | 'open-wallet' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
 /** User-selected advanced settings for chain/asset override */
 interface AdvancedSettings {
     /** Override asset (e.g. 'USDC', 'USDT'). Null = let backend decide. */
@@ -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",
@@ -2735,6 +2732,7 @@ function truncateAddress(address) {
 function WalletPickerScreen({
   providers,
   pendingConnections,
+  loading,
   onSelectProvider,
   onContinueConnection,
   onBack
@@ -2748,6 +2746,12 @@ function WalletPickerScreen({
     { id: "ora", name: "Ora" },
     { id: "phantom", name: "Phantom" }
   ];
+  if (loading) {
+    return /* @__PURE__ */ jsxs(ScreenLayout, { children: [
+      /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack }),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Connecting..." }) })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     ScreenLayout,
     {
@@ -3848,6 +3852,167 @@ var waitHintStyle = (color) => ({
   color,
   margin: 0
 });
+function OpenWalletScreen({
+  walletName,
+  deeplinkUri,
+  loading,
+  onLogout
+}) {
+  const { tokens } = useSwypeConfig();
+  const displayName = walletName ?? "your wallet";
+  const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
+  const handleOpen = useCallback(() => {
+    const opened = window.open(deeplinkUri, "_blank");
+    if (!opened) {
+      window.location.href = deeplinkUri;
+    }
+  }, [deeplinkUri]);
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        !loading && /* @__PURE__ */ jsxs(PrimaryButton, { onClick: handleOpen, children: [
+          "Open ",
+          displayName
+        ] }),
+        /* @__PURE__ */ jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : "Tap the button to authorize in your wallet app" })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
+          logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
+          !loading && /* @__PURE__ */ jsxs("div", { style: waitingBadgeStyle(tokens), children: [
+            /* @__PURE__ */ jsx(Spinner, { size: 14 }),
+            /* @__PURE__ */ jsx("span", { children: "Waiting for authorization..." })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var contentStyle6 = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  padding: "0 24px"
+};
+var logoStyle = {
+  width: 56,
+  height: 56,
+  borderRadius: 14,
+  objectFit: "contain"
+};
+var headingStyle8 = (color) => ({
+  fontSize: "1.45rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "20px 0 8px"
+});
+var subtitleStyle8 = (color) => ({
+  fontSize: "0.9rem",
+  color,
+  margin: "0 0 24px",
+  lineHeight: 1.5,
+  maxWidth: 280
+});
+var waitingBadgeStyle = (tokens) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "8px 16px",
+  borderRadius: 20,
+  background: tokens.bgInput,
+  border: `1px solid ${tokens.border}`,
+  color: tokens.textMuted,
+  fontSize: "0.82rem"
+});
+var hintStyle3 = (color) => ({
+  textAlign: "center",
+  fontSize: "0.82rem",
+  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;
+  } catch {
+    return true;
+  }
+}
 var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
 var MIN_SEND_AMOUNT_USD = 0.25;
 function computeSmartDefaults(accts, transferAmount) {
@@ -3918,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,
@@ -3968,6 +4140,7 @@ function SwypePayment({
   const [otpCode, setOtpCode] = useState("");
   const [oneTapLimit, setOneTapLimit] = useState(100);
   const [mobileFlow, setMobileFlow] = useState(false);
+  const [deeplinkUri, setDeeplinkUri] = useState(null);
   const pollingTransferIdRef = useRef(null);
   const mobileSigningTransferIdRef = useRef(null);
   const mobileSetupFlowRef = useRef(false);
@@ -4108,7 +4281,7 @@ function SwypePayment({
         }
         setStep("create-passkey");
       } catch {
-        if (!cancelled) setStep("deposit");
+        if (!cancelled) setStep("create-passkey");
       }
     };
     checkPasskey();
@@ -4215,6 +4388,7 @@ function SwypePayment({
     if (mobileSetupFlowRef.current) {
       mobileSetupFlowRef.current = false;
       setMobileFlow(false);
+      setDeeplinkUri(null);
       polling.stopPolling();
       setTransfer(polledTransfer);
       reloadAccounts().catch(() => {
@@ -4355,12 +4529,15 @@ function SwypePayment({
       return;
     }
     const isSetupRedirect = mobileSetupFlowRef.current;
-    if (!isSetupRedirect) {
+    if (isSetupRedirect) {
+      setStep("open-wallet");
+    } else {
       setStep("processing");
     }
     processingStartedAtRef.current = Date.now();
     setError(null);
     setCreatingTransfer(true);
+    setDeeplinkUri(null);
     setMobileFlow(false);
     try {
       if (transfer?.status === "AUTHORIZED") {
@@ -4384,7 +4561,7 @@ function SwypePayment({
       const isActiveWallet = effectiveSourceType === "walletId" && accounts.some(
         (a) => a.wallets.some((w) => w.id === effectiveSourceId && w.status === "ACTIVE")
       );
-      if (!isActiveWallet) {
+      if (!isActiveWallet && !isSetupRedirect) {
         let found = false;
         for (const acct of accounts) {
           for (const wallet of acct.wallets) {
@@ -4414,11 +4591,14 @@ function SwypePayment({
           userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
         });
         if (!shouldUseConnector) {
+          const uri = t.authorizationSessions[0].uri;
           setMobileFlow(true);
           pollingTransferIdRef.current = t.id;
           polling.startPolling(t.id);
-          if (!isActiveWallet) {
-            window.location.href = t.authorizationSessions[0].uri;
+          setDeeplinkUri(uri);
+          setStep("open-wallet");
+          if (!isInIframe()) {
+            window.location.href = uri;
           }
           return;
         } else {
@@ -4432,7 +4612,7 @@ function SwypePayment({
       const msg = err instanceof Error ? err.message : "Transfer failed";
       setError(msg);
       onError?.(msg);
-      setStep("deposit");
+      setStep(isSetupRedirect ? "wallet-picker" : "deposit");
     } finally {
       setCreatingTransfer(false);
     }
@@ -4481,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);
@@ -4523,6 +4693,7 @@ function SwypePayment({
     setError(null);
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
+    setDeeplinkUri(null);
     processingStartedAtRef.current = null;
     pollingTransferIdRef.current = null;
     mobileSigningTransferIdRef.current = null;
@@ -4554,6 +4725,7 @@ function SwypePayment({
     setConnectingNewAccount(false);
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
+    setDeeplinkUri(null);
     resetHeadlessLogin();
   }, [logout, polling, depositAmount, resetHeadlessLogin]);
   if (!ready) {
@@ -4604,8 +4776,7 @@ function SwypePayment({
       CreatePasskeyScreen,
       {
         onCreatePasskey: handleRegisterPasskey,
-        onSkip: handleSkipPasskey,
-        onBack: () => setStep("login"),
+        onBack: handleLogout,
         creating: registeringPasskey,
         error
       }
@@ -4617,9 +4788,22 @@ function SwypePayment({
       {
         providers,
         pendingConnections,
+        loading: creatingTransfer,
         onSelectProvider: handleSelectProvider,
         onContinueConnection: handleContinueConnection,
-        onBack: () => setStep("create-passkey")
+        onBack: () => setStep(activeCredentialId ? "deposit" : "create-passkey")
+      }
+    );
+  }
+  if (step === "open-wallet") {
+    const providerName = providers.find((p) => p.id === selectedProviderId)?.name ?? null;
+    return /* @__PURE__ */ jsx(
+      OpenWalletScreen,
+      {
+        walletName: providerName,
+        deeplinkUri: deeplinkUri ?? "",
+        loading: creatingTransfer || !deeplinkUri,
+        onLogout: handleLogout
       }
     );
   }