@swype-org/react-sdk 0.1.55 → 0.1.59

package/dist/index.cjs

@@ -1895,6 +1895,7 @@ var containerStyle5 = {
   width: "100%"
 };
 var inputStyle = (tokens, filled) => ({
+  boxSizing: "border-box",
   width: 44,
   maxWidth: "calc((100% - 40px) / 6)",
   height: 52,
@@ -3857,6 +3858,15 @@ function OpenWalletScreen({
   const { tokens } = useSwypeConfig();
   const displayName = walletName ?? "your wallet";
   const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
+  const autoOpenedRef = react.useRef(null);
+  react.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 = react.useCallback(() => {
     const opened = window.open(deeplinkUri, "_blank");
     if (!opened && window === window.parent) {
@@ -3871,7 +3881,7 @@ function OpenWalletScreen({
           "Open ",
           displayName
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : "Tap the button to authorize in your wallet app" })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : "If your wallet didn't open automatically, tap the button above" })
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
@@ -3934,6 +3944,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__ */ jsxRuntime.jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onSign, disabled: signing, children: signing ? "Confirming..." : "Confirm payment" }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: errorStyle2(tokens.textMuted), children: error }),
+        !error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle4(tokens.textMuted), children: "You may be prompted for biometric verification" })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
+          logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: "Wallet authorized" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle9(tokens.textSecondary), children: [
+            displayName,
+            " approved the connection. Tap below to confirm your payment."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: successBadgeStyle(tokens), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: checkmarkStyle, children: "\u2713" }),
+            /* @__PURE__ */ jsxRuntime.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 react.Component {
   constructor(props) {
     super(props);
@@ -3959,7 +4061,7 @@ var PaymentErrorBoundary = class extends react.Component {
         /* @__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("h2", { style: headingStyle10, 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" })
     ] });
@@ -3979,7 +4081,7 @@ var containerStyle8 = {
 var iconStyle4 = {
   marginBottom: 20
 };
-var headingStyle9 = {
+var headingStyle10 = {
   fontSize: "1.25rem",
   fontWeight: 700,
   color: "#1a1a1a",
@@ -4428,32 +4530,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]);
   react.useEffect(() => {
     if (!mobileFlow) return;
@@ -4804,6 +4892,20 @@ function SwypePaymentInner({
     setDeeplinkUri(null);
     resetHeadlessLogin();
   }, [logout, polling, depositAmount, resetHeadlessLogin]);
+  const handleConfirmSign = react.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__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Initializing..." }) }) });
   }
@@ -4885,6 +4987,19 @@ function SwypePaymentInner({
       }
     );
   }
+  if (step === "confirm-sign") {
+    const providerName = providers.find((p) => p.id === selectedProviderId)?.name ?? null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmSignScreen,
+      {
+        walletName: providerName,
+        signing: transferSigning.signing,
+        error: error || transferSigning.error,
+        onSign: handleConfirmSign,
+        onLogout: handleLogout
+      }
+    );
+  }
   if (step === "deposit") {
     if (loadingData) {
       return /* @__PURE__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Loading..." }) }) });
@@ -4989,6 +5104,7 @@ function SwypePaymentInner({
   return null;
 }
 
+exports.CreatePasskeyScreen = CreatePasskeyScreen;
 exports.IconCircle = IconCircle;
 exports.OutlineButton = OutlineButton;
 exports.PasskeyIframeBlockedError = PasskeyIframeBlockedError;