@swype-org/react-sdk 0.1.55 → 0.1.59

package/dist/index.d.cts

@@ -199,7 +199,7 @@ interface UserConfig {
 /** Theme mode */
 type ThemeMode = 'light' | 'dark';
 /** Steps in the payment flow */
-type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'wallet-picker' | 'open-wallet' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
+type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'wallet-picker' | 'open-wallet' | 'confirm-sign' | '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. */
@@ -622,6 +622,18 @@ interface SpinnerProps {
 }
 declare function Spinner({ size, label }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
+interface CreatePasskeyScreenProps {
+    onCreatePasskey: () => void;
+    onBack: () => void;
+    creating: boolean;
+    error: string | null;
+    /** When true, direct passkey creation failed (Safari iframe restriction). */
+    popupFallback?: boolean;
+    /** Opens a pop-up window on the Swype domain for passkey registration. */
+    onCreatePasskeyViaPopup?: () => void;
+}
+declare function CreatePasskeyScreen({ onCreatePasskey, onBack, creating, error, popupFallback, onCreatePasskeyViaPopup, }: CreatePasskeyScreenProps): react_jsx_runtime.JSX.Element;
+
 interface SetupScreenProps {
     availableBalance: number;
     /** Number of tokens/chains available */
@@ -659,4 +671,4 @@ interface SelectSourceScreenProps {
 }
 declare function SelectSourceScreen({ choices, selectedChainName, selectedTokenSymbol, recommended, onChainChange, onTokenChange, onConfirm, onLogout, }: SelectSourceScreenProps): react_jsx_runtime.JSX.Element;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, CreatePasskeyScreen, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.d.ts

@@ -199,7 +199,7 @@ interface UserConfig {
 /** Theme mode */
 type ThemeMode = 'light' | 'dark';
 /** Steps in the payment flow */
-type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'wallet-picker' | 'open-wallet' | 'deposit' | 'low-balance' | 'processing' | 'select-source' | 'success';
+type PaymentStep = 'login' | 'otp-verify' | 'create-passkey' | 'wallet-picker' | 'open-wallet' | 'confirm-sign' | '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. */
@@ -622,6 +622,18 @@ interface SpinnerProps {
 }
 declare function Spinner({ size, label }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
+interface CreatePasskeyScreenProps {
+    onCreatePasskey: () => void;
+    onBack: () => void;
+    creating: boolean;
+    error: string | null;
+    /** When true, direct passkey creation failed (Safari iframe restriction). */
+    popupFallback?: boolean;
+    /** Opens a pop-up window on the Swype domain for passkey registration. */
+    onCreatePasskeyViaPopup?: () => void;
+}
+declare function CreatePasskeyScreen({ onCreatePasskey, onBack, creating, error, popupFallback, onCreatePasskeyViaPopup, }: CreatePasskeyScreenProps): react_jsx_runtime.JSX.Element;
+
 interface SetupScreenProps {
     availableBalance: number;
     /** Number of tokens/chains available */
@@ -659,4 +671,4 @@ interface SelectSourceScreenProps {
 }
 declare function SelectSourceScreen({ choices, selectedChainName, selectedTokenSymbol, recommended, onChainChange, onTokenChange, onConfirm, onLogout, }: SelectSourceScreenProps): react_jsx_runtime.JSX.Element;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, CreatePasskeyScreen, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.js

@@ -1892,6 +1892,7 @@ var containerStyle5 = {
   width: "100%"
 };
 var inputStyle = (tokens, filled) => ({
+  boxSizing: "border-box",
   width: 44,
   maxWidth: "calc((100% - 40px) / 6)",
   height: 52,
@@ -3854,6 +3855,15 @@ function OpenWalletScreen({
   const { tokens } = useSwypeConfig();
   const displayName = walletName ?? "your wallet";
   const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
+  const autoOpenedRef = useRef(null);
+  useEffect(() => {
+    if (loading || !deeplinkUri || autoOpenedRef.current === deeplinkUri) return;
+    autoOpenedRef.current = deeplinkUri;
+    const opened = window.open(deeplinkUri, "_blank");
+    if (!opened && window === window.parent) {
+      window.location.href = deeplinkUri;
+    }
+  }, [loading, deeplinkUri]);
   const handleOpen = useCallback(() => {
     const opened = window.open(deeplinkUri, "_blank");
     if (!opened && window === window.parent) {
@@ -3868,7 +3878,7 @@ function OpenWalletScreen({
           "Open ",
           displayName
         ] }),
-        /* @__PURE__ */ jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : "Tap the button to authorize in your wallet app" })
+        /* @__PURE__ */ jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : "If your wallet didn't open automatically, tap the button above" })
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
@@ -3931,6 +3941,98 @@ var hintStyle3 = (color) => ({
   color,
   margin: "8px 0 0"
 });
+function ConfirmSignScreen({
+  walletName,
+  signing,
+  error,
+  onSign,
+  onLogout
+}) {
+  const { tokens } = useSwypeConfig();
+  const displayName = walletName ?? "your wallet";
+  const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
+  return /* @__PURE__ */ jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSign, disabled: signing, children: signing ? "Confirming..." : "Confirm payment" }),
+        error && /* @__PURE__ */ jsx("p", { style: errorStyle2(tokens.textMuted), children: error }),
+        !error && /* @__PURE__ */ jsx("p", { style: hintStyle4(tokens.textMuted), children: "You may be prompted for biometric verification" })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
+          logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
+          /* @__PURE__ */ jsx("h2", { style: headingStyle9(tokens.text), children: "Wallet authorized" }),
+          /* @__PURE__ */ jsxs("p", { style: subtitleStyle9(tokens.textSecondary), children: [
+            displayName,
+            " approved the connection. Tap below to confirm your payment."
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: successBadgeStyle(tokens), children: [
+            /* @__PURE__ */ jsx("span", { style: checkmarkStyle, children: "\u2713" }),
+            /* @__PURE__ */ jsx("span", { children: "Authorization complete" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var contentStyle7 = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  padding: "0 24px"
+};
+var logoStyle2 = {
+  width: 56,
+  height: 56,
+  borderRadius: 14,
+  objectFit: "contain"
+};
+var headingStyle9 = (color) => ({
+  fontSize: "1.45rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "20px 0 8px"
+});
+var subtitleStyle9 = (color) => ({
+  fontSize: "0.9rem",
+  color,
+  margin: "0 0 24px",
+  lineHeight: 1.5,
+  maxWidth: 280
+});
+var successBadgeStyle = (tokens) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "8px 16px",
+  borderRadius: 20,
+  background: tokens.bgInput,
+  border: `1px solid ${tokens.border}`,
+  color: "#22c55e",
+  fontSize: "0.82rem"
+});
+var checkmarkStyle = {
+  fontWeight: 700,
+  fontSize: "0.9rem"
+};
+var hintStyle4 = (color) => ({
+  textAlign: "center",
+  fontSize: "0.82rem",
+  color,
+  margin: "8px 0 0"
+});
+var errorStyle2 = (color) => ({
+  textAlign: "center",
+  fontSize: "0.82rem",
+  color: "#ef4444",
+  margin: "8px 0 0"
+});
 var PaymentErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -3956,7 +4058,7 @@ var PaymentErrorBoundary = class extends Component {
         /* @__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("h2", { style: headingStyle10, 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" })
     ] });
@@ -3976,7 +4078,7 @@ var containerStyle8 = {
 var iconStyle4 = {
   marginBottom: 20
 };
-var headingStyle9 = {
+var headingStyle10 = {
   fontSize: "1.25rem",
   fontWeight: 700,
   color: "#1a1a1a",
@@ -4425,32 +4527,18 @@ function SwypePaymentInner({
     if (mobileSetupFlowRef.current) {
       mobileSetupFlowRef.current = false;
       clearMobileFlowState();
-      setMobileFlow(false);
       setDeeplinkUri(null);
       polling.stopPolling();
       setTransfer(polledTransfer);
       reloadAccounts().catch(() => {
+      }).then(() => {
+        setMobileFlow(false);
+        setStep("deposit");
       });
-      setStep("deposit");
       return;
     }
-    if (transferSigning.signing) return;
-    if (mobileSigningTransferIdRef.current === polledTransfer.id) return;
-    mobileSigningTransferIdRef.current = polledTransfer.id;
-    const sign = async () => {
-      try {
-        const signedTransfer = await transferSigning.signTransfer(polledTransfer.id);
-        setTransfer(signedTransfer);
-        clearMobileFlowState();
-        setStep("processing");
-      } catch (err) {
-        mobileSigningTransferIdRef.current = null;
-        const msg = err instanceof Error ? err.message : "Failed to sign transfer";
-        setError(msg);
-        onError?.(msg);
-      }
-    };
-    void sign();
+    setTransfer(polledTransfer);
+    setStep("confirm-sign");
   }, [mobileFlow, polling.transfer, polling.stopPolling, transferSigning, onError, reloadAccounts]);
   useEffect(() => {
     if (!mobileFlow) return;
@@ -4801,6 +4889,20 @@ function SwypePaymentInner({
     setDeeplinkUri(null);
     resetHeadlessLogin();
   }, [logout, polling, depositAmount, resetHeadlessLogin]);
+  const handleConfirmSign = useCallback(async () => {
+    const t = transfer ?? polling.transfer;
+    if (!t) return;
+    try {
+      const signedTransfer = await transferSigning.signTransfer(t.id);
+      setTransfer(signedTransfer);
+      clearMobileFlowState();
+      setStep("processing");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to sign transfer";
+      setError(msg);
+      onError?.(msg);
+    }
+  }, [transfer, polling.transfer, transferSigning, onError]);
   if (!ready) {
     return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Initializing..." }) }) });
   }
@@ -4882,6 +4984,19 @@ function SwypePaymentInner({
       }
     );
   }
+  if (step === "confirm-sign") {
+    const providerName = providers.find((p) => p.id === selectedProviderId)?.name ?? null;
+    return /* @__PURE__ */ jsx(
+      ConfirmSignScreen,
+      {
+        walletName: providerName,
+        signing: transferSigning.signing,
+        error: error || transferSigning.error,
+        onSign: handleConfirmSign,
+        onLogout: handleLogout
+      }
+    );
+  }
   if (step === "deposit") {
     if (loadingData) {
       return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Loading..." }) }) });
@@ -4986,6 +5101,6 @@ function SwypePaymentInner({
   return null;
 }
 
-export { IconCircle, OutlineButton, PasskeyIframeBlockedError, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypePayment, SwypeProvider, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { CreatePasskeyScreen, IconCircle, OutlineButton, PasskeyIframeBlockedError, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypePayment, SwypeProvider, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map