@swype-org/react-sdk 0.1.47 → 0.1.48

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. */

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. */

package/dist/index.js

@@ -2735,6 +2735,7 @@ function truncateAddress(address) {
 function WalletPickerScreen({
   providers,
   pendingConnections,
+  loading,
   onSelectProvider,
   onContinueConnection,
   onBack
@@ -2748,6 +2749,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 +3855,99 @@ 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"
+});
+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) {
@@ -3968,6 +4068,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);
@@ -4215,6 +4316,7 @@ function SwypePayment({
     if (mobileSetupFlowRef.current) {
       mobileSetupFlowRef.current = false;
       setMobileFlow(false);
+      setDeeplinkUri(null);
       polling.stopPolling();
       setTransfer(polledTransfer);
       reloadAccounts().catch(() => {
@@ -4355,12 +4457,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 +4489,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 +4519,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 +4540,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);
     }
@@ -4523,6 +4631,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 +4663,7 @@ function SwypePayment({
     setConnectingNewAccount(false);
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
+    setDeeplinkUri(null);
     resetHeadlessLogin();
   }, [logout, polling, depositAmount, resetHeadlessLogin]);
   if (!ready) {
@@ -4617,12 +4727,25 @@ function SwypePayment({
       {
         providers,
         pendingConnections,
+        loading: creatingTransfer,
         onSelectProvider: handleSelectProvider,
         onContinueConnection: handleContinueConnection,
         onBack: () => setStep("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
+      }
+    );
+  }
   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..." }) }) });