@tonconnect/ui 2.0.0-beta.1 → 2.0.0-beta.3

package/lib/index.d.ts

@@ -205,16 +205,81 @@ declare type LoadableReady<T> = {
     value: T;
 };
 
+interface WalletsModal {
+    /**
+     * Open the modal.
+     */
+    open: () => void;
+    /**
+     * Close the modal.
+     */
+    close: () => void;
+    /**
+     * Subscribe to the modal window status changes.
+     */
+    onStateChange: (callback: (state: WalletsModalState) => void) => () => void;
+    /**
+     * Current modal window state.
+     */
+    state: WalletsModalState;
+}
+/**
+ * Opened modal window state.
+ */
+declare type WalletModalOpened = {
+    /**
+     * Modal window status.
+     */
+    status: 'opened';
+    /**
+     * Always `null` for opened modal window.
+     */
+    closeReason: null;
+};
+/**
+ * Closed modal window state.
+ */
+declare type WalletModalClosed = {
+    /**
+     * Modal window status.
+     */
+    status: 'closed';
+    /**
+     * Close reason, if the modal window was closed.
+     */
+    closeReason: WalletsModalCloseReason | null;
+};
+/**
+ * Modal window state.
+ */
+declare type WalletsModalState = WalletModalOpened | WalletModalClosed;
+/**
+ * Modal window close reason.
+ */
+declare type WalletsModalCloseReason = 'action-cancelled' | 'wallet-selected';
+
 declare class TonConnectUI {
     static getWallets(): Promise<WalletInfo[]>;
     private readonly walletInfoStorage;
     private readonly preferredWalletStorage;
-    readonly connector: ITonConnect;
     private walletInfo;
     private systemThemeChangeUnsubscribe;
     private actionsConfiguration?;
     private readonly walletsList;
     private connectRequestParametersCallback?;
+    /**
+     * TonConnect instance.
+     */
+    readonly connector: ITonConnect;
+    /**
+     * Manages the modal window state.
+     */
+    readonly modal: WalletsModal;
+    /**
+     * Manages the transaction modal window state.
+     * TODO: make it public when interface will be ready for external usage.
+     */
+    private readonly transactionModal;
     /**
      * Promise that resolves after end of th connection restoring process (promise will fire after `onStatusChange`, so you can get actual information about wallet and session after when promise resolved).
      * Resolved value `true`/`false` indicates if the session was restored successfully.
@@ -255,7 +320,26 @@ declare class TonConnectUI {
      */
     onStatusChange(callback: (wallet: ConnectedWallet | null) => void, errorsHandler?: (err: TonConnectError) => void): ReturnType<ITonConnect['onStatusChange']>;
     /**
+     * Opens the modal window, returns a promise that resolves after the modal window is opened.
+     */
+    openModal(): Promise<void>;
+    /**
+     * Closes the modal window.
+     */
+    closeModal(): void;
+    /**
+     * Subscribe to the modal window state changes, returns a function which has to be called to unsubscribe.
+     */
+    onModalStateChange(onChange: (state: WalletsModalState) => void): () => void;
+    /**
+     * Returns current modal window state.
+     */
+    get modalState(): WalletsModalState;
+    /**
+     * @deprecated Use `tonConnectUI.openModal()` instead. Will be removed in the next major version.
      * Opens the modal window and handles a wallet connection.
+     * @return Connected wallet.
+     * @throws TonConnectUIError if connection was aborted.
      */
     connectWallet(): Promise<ConnectedWallet>;
     /**
@@ -268,6 +352,47 @@ declare class TonConnectUI {
      * @param options modal and notifications behaviour settings. Default is show only 'before' modal and all notifications.
      */
     sendTransaction(tx: SendTransactionRequest, options?: ActionConfiguration): Promise<SendTransactionResponse>;
+    /**
+     * TODO: remove in the next major version.
+     * Initiates a connection with an embedded wallet, awaits its completion, and returns the connected wallet information.
+     * @param embeddedWallet - Information about the embedded wallet to connect to.
+     * @throws Error if the connection process fails.
+     * @internal
+     */
+    private connectEmbeddedWallet;
+    /**
+     * TODO: remove in the next major version.
+     * Initiates the connection process for an external wallet by opening the wallet modal
+     * and returns the connected wallet information upon successful connection.
+     * @throws Error if the user cancels the connection process or if the connection process fails.
+     * @internal
+     */
+    private connectExternalWallet;
+    /**
+     * TODO: remove in the next major version.
+     * Waits for a wallet connection based on provided options, returning connected wallet information.
+     * @param options - Configuration for connection statuses and errors handling.
+     * @options.ignoreErrors - If true, ignores errors during waiting, waiting continues until a valid wallet connects. Default is false.
+     * @options.abortSignal - Optional AbortSignal for external cancellation. Throws TonConnectUIError if aborted.
+     * @throws TonConnectUIError if waiting is aborted or no valid wallet connection is received and ignoreErrors is false.
+     * @internal
+     */
+    private waitForWalletConnection;
+    /**
+     * Waits for a transaction to be sent based on provided options, returning the transaction response.
+     * @param options - Configuration for transaction statuses and errors handling.
+     * @options.transaction - Transaction to send.
+     * @options.ignoreErrors - If true, ignores errors during waiting, waiting continues until a valid transaction is sent. Default is false.
+     * @options.abortSignal - Optional AbortSignal for external cancellation. Throws TonConnectUIError if aborted.
+     * @throws TonConnectUIError if waiting is aborted or no valid transaction response is received and ignoreErrors is false.
+     * @internal
+     */
+    private waitForSendTransaction;
+    /**
+     * Subscribe to the transaction modal window state changes, returns a function which has to be called to unsubscribe.
+     * @internal
+     */
+    private onTransactionModalStateChange;
     private subscribeToWalletChange;
     private setPreferredWalletAppName;
     private getSelectedWalletInfo;
@@ -283,4 +408,4 @@ declare class TonConnectUIError extends TonConnectError {
     constructor(...args: ConstructorParameters<typeof Error>);
 }
 
-export { ActionConfiguration, BorderRadius, Color, ColorsSet, ConnectedWallet, Loadable, LoadableLoading, LoadableReady, Locales, PartialColorsSet, ReturnStrategy, THEME, Theme, TonConnectUI, TonConnectUIError, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, UIPreferences, UIWallet, WalletInfoRemoteWithOpenMethod, WalletInfoWithOpenMethod, WalletOpenMethod, WalletsListConfiguration };
+export { ActionConfiguration, BorderRadius, Color, ColorsSet, ConnectedWallet, Loadable, LoadableLoading, LoadableReady, Locales, PartialColorsSet, ReturnStrategy, THEME, Theme, TonConnectUI, TonConnectUIError, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, UIPreferences, UIWallet, WalletInfoRemoteWithOpenMethod, WalletInfoWithOpenMethod, WalletModalClosed, WalletModalOpened, WalletOpenMethod, WalletsListConfiguration, WalletsModal, WalletsModalCloseReason, WalletsModalState };

package/lib/index.js

@@ -1766,9 +1766,7 @@ function fixMobileSafariActiveTransition() {
   }
 }
 function defineStylesRoot() {
-  customElements.define(globalStylesTag, class TcRootElement extends HTMLDivElement {
-  }, {
-    extends: "div"
+  customElements.define(globalStylesTag, class TcRootElement extends HTMLElement {
   });
 }
 function preloadImages(images) {
@@ -1895,10 +1893,17 @@ class LastSelectedWalletInfoStorage {
     this.localStorage.removeItem(this.storageKey);
   }
 }
-const [walletsModalOpen, setWalletsModalOpen] = createSignal(false);
-const lastSelectedWalletInfoStorage = new LastSelectedWalletInfoStorage();
-const [lastSelectedWalletInfo, _setLastSelectedWalletInfo] = createSignal(lastSelectedWalletInfoStorage.getLastSelectedWalletInfo());
+const [walletsModalState, setWalletsModalState] = createSignal({
+  status: "closed",
+  closeReason: null
+});
+const getWalletsModalIsOpened = createMemo(() => walletsModalState().status === "opened");
+let lastSelectedWalletInfoStorage = typeof window !== "undefined" ? new LastSelectedWalletInfoStorage() : void 0;
+const [lastSelectedWalletInfo, _setLastSelectedWalletInfo] = createSignal((lastSelectedWalletInfoStorage == null ? void 0 : lastSelectedWalletInfoStorage.getLastSelectedWalletInfo()) || null);
 const setLastSelectedWalletInfo = (walletInfo) => {
+  if (!lastSelectedWalletInfoStorage) {
+    lastSelectedWalletInfoStorage = new LastSelectedWalletInfoStorage();
+  }
   if (walletInfo) {
     lastSelectedWalletInfoStorage.setLastSelectedWalletInfo(walletInfo);
   } else {
@@ -2994,6 +2999,30 @@ function escPressed(_, accessor) {
   document.body.addEventListener("keydown", onKeyPress);
   onCleanup(() => document.body.removeEventListener("keydown", onKeyPress));
 }
+function androidBackHandler$1(_, accessor) {
+  const userOSIsAndroid = getUserAgent().os === "android";
+  if (!userOSIsAndroid) {
+    return;
+  }
+  let historyEntryAdded = true;
+  window.history.pushState({}, "");
+  const popstateHandler = (event) => {
+    var _a2;
+    historyEntryAdded = false;
+    event.preventDefault();
+    (_a2 = accessor()) == null ? void 0 : _a2();
+  };
+  window.addEventListener("popstate", popstateHandler, {
+    once: true
+  });
+  onCleanup(() => {
+    window.removeEventListener("popstate", popstateHandler);
+    if (historyEntryAdded) {
+      historyEntryAdded = false;
+      window.history.back();
+    }
+  });
+}
 const _tmpl$$v = /* @__PURE__ */ template$1(`<svg><path fill-rule="evenodd" clip-rule="evenodd" d="M10.2122 14.3407C10.5384 14.0854 10.5959 13.614 10.3406 13.2878L6.20237 8.00003L10.3406 2.71227C10.5959 2.38607 10.5384 1.91469 10.2122 1.6594C9.88604 1.40412 9.41465 1.46161 9.15937 1.7878L4.65937 7.5378C4.44688 7.80932 4.44688 8.19074 4.65937 8.46226L9.15937 14.2123C9.41465 14.5385 9.88604 14.5959 10.2122 14.3407Z"></path></svg>`, 4, true);
 const rotationDegrees = {
   left: 0,
@@ -3204,6 +3233,7 @@ const QuestionButtonStyled = styled(IconButton)`
 const _tmpl$$t = /* @__PURE__ */ template$1(`<div></div>`);
 const clickOutside = clickOutside$1;
 const keyPressed = escPressed;
+const androidBackHandler = androidBackHandler$1;
 const Modal = (props) => {
   const theme = useTheme();
   const dataAttrs = useDataAttributes(props);
@@ -3267,6 +3297,7 @@ const Modal = (props) => {
           }, dataAttrs, {
             get children() {
               const _el$ = _tmpl$$t.cloneNode(true);
+              use(androidBackHandler, _el$, () => () => props.onClose());
               use(keyPressed, _el$, () => () => props.onClose());
               use(clickOutside, _el$, () => () => props.onClose());
               insert(_el$, createComponent(ModalBodyStyled, {
@@ -3300,6 +3331,7 @@ const Modal = (props) => {
               createRenderEffect(() => className(_el$, cn(ModalWrapperClass, u`
                                 border-radius: ${borders$4[theme.borderRadius]};
                                 background-color: ${theme.colors.background.tint};
+
                                 ${media("mobile")} {
                                     border-radius: ${borders$4[theme.borderRadius]}
                                         ${borders$4[theme.borderRadius]} 0 0;
@@ -6549,26 +6581,45 @@ const NotificationClass = u`
     transform: translateY(-8px);
     margin-bottom: 12px;
 `;
-const _tmpl$$4 = /* @__PURE__ */ template$1(`<div data-tc-list-notifications="true"></div>`);
-const Notifications = (props) => {
-  const timeouts = [];
+const defaultConfig = {
+  timeout: 4500
+};
+const [latestAction, setLatestAction] = createSignal(null);
+function useOpenedNotifications(config) {
+  const { timeout } = __spreadValues(__spreadValues({}, defaultConfig), config);
   const [openedNotifications, setOpenedNotifications] = createSignal([]);
-  let lastId = -1;
-  const liveTimeoutMs = 4500;
-  createEffect(on(action, (action2) => {
-    if (action2 && action2.showNotification) {
-      lastId++;
-      const id = lastId;
-      setOpenedNotifications((notifications2) => notifications2.filter((notification) => notification.action !== "confirm-transaction").concat({
-        id,
-        action: action2.name
-      }));
-      timeouts.push(setTimeout(() => setOpenedNotifications((notifications2) => notifications2.filter((notification) => notification.id !== id)), liveTimeoutMs));
-    }
-  }));
+  const [timeoutIds, setTimeoutIds] = createSignal([]);
+  createEffect(
+    on(action, (action2) => {
+      if (!action2 || !action2.showNotification) {
+        return;
+      }
+      if (latestAction() === action2) {
+        return;
+      }
+      setLatestAction(action2);
+      setOpenedNotifications(
+        (openedNotifications2) => openedNotifications2.filter((n2) => n2.action !== "confirm-transaction")
+      );
+      const notification = { action: action2.name };
+      setOpenedNotifications((openedNotifications2) => [...openedNotifications2, notification]);
+      const timeoutId = setTimeout(() => {
+        setOpenedNotifications(
+          (openedNotifications2) => openedNotifications2.filter((n2) => n2 !== notification)
+        );
+        setTimeoutIds((timeoutIds2) => timeoutIds2.filter((id) => id !== timeoutId));
+      }, timeout);
+      setTimeoutIds((timeoutIds2) => [...timeoutIds2, timeoutId]);
+    })
+  );
   onCleanup(() => {
-    timeouts.forEach(clearTimeout);
+    timeoutIds().forEach((id) => clearTimeout(id));
   });
+  return openedNotifications;
+}
+const _tmpl$$4 = /* @__PURE__ */ template$1(`<div data-tc-list-notifications="true"></div>`);
+const Notifications = (props) => {
+  const openedNotifications = useOpenedNotifications();
   return (() => {
     const _el$ = _tmpl$$4.cloneNode(true);
     insert(_el$, createComponent(TransitionGroup, {
@@ -9239,22 +9290,25 @@ const WalletsModal = () => {
     }
     return (_a2 = appState.connectRequestParameters) == null ? void 0 : _a2.value;
   });
-  const onClose = () => {
-    setWalletsModalOpen(false);
+  const onClose = (closeReason) => {
+    setWalletsModalState({
+      status: "closed",
+      closeReason
+    });
     setSelectedWalletInfo(null);
     setInfoTab(false);
   };
   const unsubscribe = connector.onStatusChange((wallet) => {
     if (wallet) {
-      onClose();
+      onClose("wallet-selected");
     }
   });
   onCleanup(unsubscribe);
   return createComponent(StyledModal, {
     get opened() {
-      return walletsModalOpen();
+      return getWalletsModalIsOpened();
     },
-    onClose,
+    onClose: () => onClose("action-cancelled"),
     onClickQuestion: () => setInfoTab((v) => !v),
     "data-tc-wallets-modal-container": "true",
     get children() {
@@ -9587,8 +9641,14 @@ const App = (props) => {
   });
 };
 const widgetController = {
-  openWalletsModal: () => void setTimeout(() => setWalletsModalOpen(true)),
-  closeWalletsModal: () => void setTimeout(() => setWalletsModalOpen(false)),
+  openWalletsModal: () => void setTimeout(() => setWalletsModalState({
+    status: "opened",
+    closeReason: null
+  })),
+  closeWalletsModal: (reason) => void setTimeout(() => setWalletsModalState({
+    status: "closed",
+    closeReason: reason
+  })),
   setAction: (action2) => void setTimeout(() => setAction(action2)),
   clearAction: () => void setTimeout(() => setAction(null)),
   getSelectedWalletInfo: () => lastSelectedWalletInfo(),
@@ -9597,16 +9657,96 @@ const widgetController = {
     tonConnectUI
   }), document.getElementById(root))
 };
+class WalletsModalManager {
+  constructor(options) {
+    __publicField(this, "connector");
+    __publicField(this, "setConnectRequestParametersCallback");
+    __publicField(this, "consumers", []);
+    __publicField(this, "state", walletsModalState());
+    this.connector = options.connector;
+    this.setConnectRequestParametersCallback = options.setConnectRequestParametersCallback;
+    createEffect(() => {
+      const state = walletsModalState();
+      this.state = state;
+      this.consumers.forEach((consumer) => consumer(state));
+    });
+  }
+  open() {
+    return __async(this, null, function* () {
+      const walletsList = yield this.connector.getWallets();
+      const embeddedWallet = walletsList.find(isWalletInfoCurrentlyEmbedded);
+      if (embeddedWallet) {
+        return this.connectEmbeddedWallet(embeddedWallet);
+      } else {
+        return this.connectExternalWallet();
+      }
+    });
+  }
+  close() {
+    widgetController.closeWalletsModal("action-cancelled");
+  }
+  onStateChange(onChange) {
+    this.consumers.push(onChange);
+    return () => {
+      this.consumers = this.consumers.filter((consumer) => consumer !== onChange);
+    };
+  }
+  connectEmbeddedWallet(embeddedWallet) {
+    const connect = (parameters) => {
+      setLastSelectedWalletInfo(embeddedWallet);
+      this.connector.connect({ jsBridgeKey: embeddedWallet.jsBridgeKey }, parameters);
+    };
+    const additionalRequest = appState.connectRequestParameters;
+    if ((additionalRequest == null ? void 0 : additionalRequest.state) === "loading") {
+      this.setConnectRequestParametersCallback(connect);
+    } else {
+      connect(additionalRequest == null ? void 0 : additionalRequest.value);
+    }
+  }
+  connectExternalWallet() {
+    return __async(this, null, function* () {
+      widgetController.openWalletsModal();
+      return new Promise((resolve) => {
+        const unsubscribe = this.onStateChange((state) => {
+          const { status } = state;
+          if (status === "opened") {
+            unsubscribe();
+            resolve();
+          }
+        });
+      });
+    });
+  }
+}
+class TransactionModalManager {
+  constructor(options) {
+    __publicField(this, "connector");
+    __publicField(this, "consumers", []);
+    this.connector = options.connector;
+    createEffect(() => {
+      const _ = action();
+      this.consumers.forEach((consumer) => consumer(_));
+    });
+  }
+  onStateChange(consumer) {
+    this.consumers.push(consumer);
+    return () => {
+      this.consumers = this.consumers.filter((c2) => c2 !== consumer);
+    };
+  }
+}
 class TonConnectUI {
   constructor(options) {
     __publicField(this, "walletInfoStorage", new WalletInfoStorage());
     __publicField(this, "preferredWalletStorage", new PreferredWalletStorage());
-    __publicField(this, "connector");
     __publicField(this, "walletInfo", null);
     __publicField(this, "systemThemeChangeUnsubscribe", null);
     __publicField(this, "actionsConfiguration");
     __publicField(this, "walletsList");
     __publicField(this, "connectRequestParametersCallback");
+    __publicField(this, "connector");
+    __publicField(this, "modal");
+    __publicField(this, "transactionModal");
     __publicField(this, "connectionRestored", Promise.resolve(false));
     if (options && "connector" in options && options.connector) {
       this.connector = options.connector;
@@ -9617,6 +9757,15 @@ class TonConnectUI {
         "You have to specify a `manifestUrl` or a `connector` in the options."
       );
     }
+    this.modal = new WalletsModalManager({
+      connector: this.connector,
+      setConnectRequestParametersCallback: (callback) => {
+        this.connectRequestParametersCallback = callback;
+      }
+    });
+    this.transactionModal = new TransactionModalManager({
+      connector: this.connector
+    });
     this.walletsList = this.getWallets();
     this.walletsList.then((list) => preloadImages(uniq(list.map((item) => item.imageUrl))));
     const rootId = this.normalizeWidgetRoot(options == null ? void 0 : options.widgetRootId);
@@ -9715,35 +9864,29 @@ class TonConnectUI {
       }
     }), errorsHandler);
   }
+  openModal() {
+    return __async(this, null, function* () {
+      return this.modal.open();
+    });
+  }
+  closeModal() {
+    this.modal.close();
+  }
+  onModalStateChange(onChange) {
+    return this.modal.onStateChange(onChange);
+  }
+  get modalState() {
+    return this.modal.state;
+  }
   connectWallet() {
     return __async(this, null, function* () {
       const walletsList = yield this.getWallets();
       const embeddedWallet = walletsList.find(isWalletInfoCurrentlyEmbedded);
       if (embeddedWallet) {
-        const connect = (parameters) => {
-          setLastSelectedWalletInfo(embeddedWallet);
-          this.connector.connect({ jsBridgeKey: embeddedWallet.jsBridgeKey }, parameters);
-        };
-        const additionalRequest = appState.connectRequestParameters;
-        if ((additionalRequest == null ? void 0 : additionalRequest.state) === "loading") {
-          this.connectRequestParametersCallback = connect;
-        } else {
-          connect(additionalRequest == null ? void 0 : additionalRequest.value);
-        }
+        return yield this.connectEmbeddedWallet(embeddedWallet);
       } else {
-        widgetController.openWalletsModal();
+        return yield this.connectExternalWallet();
       }
-      return new Promise((resolve, reject) => {
-        const unsubscribe = this.connector.onStatusChange((wallet) => __async(this, null, function* () {
-          unsubscribe();
-          if (wallet) {
-            const lastSelectedWalletInfo2 = yield this.getSelectedWalletInfo(wallet);
-            resolve(__spreadValues(__spreadValues({}, wallet), lastSelectedWalletInfo2 || this.walletInfoStorage.getWalletInfo()));
-          } else {
-            reject(new TonConnectUIError("Wallet was not connected"));
-          }
-        }), reject);
-      });
     });
   }
   disconnect() {
@@ -9772,8 +9915,21 @@ class TonConnectUI {
         showNotification: notifications2.includes("before"),
         openModal: modals.includes("before")
       });
+      const abortController = new AbortController();
+      const unsubscribe = this.onTransactionModalStateChange((action2) => {
+        if (action2 == null ? void 0 : action2.openModal) {
+          return;
+        }
+        unsubscribe();
+        if (!action2) {
+          abortController.abort();
+        }
+      });
       try {
-        const result = yield this.connector.sendTransaction(tx);
+        const result = yield this.waitForSendTransaction({
+          transaction: tx,
+          abortSignal: abortController.signal
+        });
         widgetController.setAction({
           name: "transaction-sent",
           showNotification: notifications2.includes("success"),
@@ -9792,9 +9948,110 @@ class TonConnectUI {
           console.error(e2);
           throw new TonConnectUIError("Unhandled error:" + e2);
         }
+      } finally {
+        unsubscribe();
+      }
+    });
+  }
+  connectEmbeddedWallet(embeddedWallet) {
+    return __async(this, null, function* () {
+      const connect = (parameters) => {
+        setLastSelectedWalletInfo(embeddedWallet);
+        this.connector.connect({ jsBridgeKey: embeddedWallet.jsBridgeKey }, parameters);
+      };
+      const additionalRequest = appState.connectRequestParameters;
+      if ((additionalRequest == null ? void 0 : additionalRequest.state) === "loading") {
+        this.connectRequestParametersCallback = connect;
+      } else {
+        connect(additionalRequest == null ? void 0 : additionalRequest.value);
       }
+      return yield this.waitForWalletConnection({
+        ignoreErrors: false
+      });
+    });
+  }
+  connectExternalWallet() {
+    return __async(this, null, function* () {
+      const abortController = new AbortController();
+      widgetController.openWalletsModal();
+      const unsubscribe = this.onModalStateChange((state) => {
+        const { status, closeReason } = state;
+        if (status === "opened") {
+          return;
+        }
+        unsubscribe();
+        if (closeReason === "action-cancelled") {
+          abortController.abort();
+        }
+      });
+      return yield this.waitForWalletConnection({
+        ignoreErrors: true,
+        abortSignal: abortController.signal
+      });
+    });
+  }
+  waitForWalletConnection(options) {
+    return __async(this, null, function* () {
+      return new Promise((resolve, reject) => {
+        const { ignoreErrors = false, abortSignal = null } = options;
+        if (abortSignal && abortSignal.aborted) {
+          return reject(new TonConnectUIError("Wallet was not connected"));
+        }
+        const onStatusChangeHandler = (wallet) => __async(this, null, function* () {
+          if (!wallet) {
+            if (ignoreErrors) {
+              return;
+            }
+            unsubscribe();
+            reject(new TonConnectUIError("Wallet was not connected"));
+          } else {
+            unsubscribe();
+            resolve(wallet);
+          }
+        });
+        const onErrorsHandler = (reason) => {
+          if (ignoreErrors) {
+            return;
+          }
+          unsubscribe();
+          reject(reason);
+        };
+        const unsubscribe = this.onStatusChange(
+          (wallet) => onStatusChangeHandler(wallet),
+          (reason) => onErrorsHandler(reason)
+        );
+        if (abortSignal) {
+          abortSignal.addEventListener("abort", () => {
+            unsubscribe();
+            reject(new TonConnectUIError("Wallet was not connected"));
+          });
+        }
+      });
+    });
+  }
+  waitForSendTransaction(options) {
+    return __async(this, null, function* () {
+      return new Promise((resolve, reject) => {
+        const { transaction, abortSignal } = options;
+        if (abortSignal.aborted) {
+          return reject(new TonConnectUIError("Transaction was not sent"));
+        }
+        const onTransactionHandler = (transaction2) => __async(this, null, function* () {
+          resolve(transaction2);
+        });
+        const onErrorsHandler = (reason) => {
+          reject(reason);
+        };
+        this.connector.sendTransaction(transaction).then((result) => onTransactionHandler(result)).catch((reason) => onErrorsHandler(reason));
+        abortSignal.addEventListener("abort", () => {
+          reject(new TonConnectUIError("Transaction was not sent"));
+        });
+      });
     });
   }
+  onTransactionModalStateChange(onChange) {
+    return this.transactionModal.onStateChange(onChange);
+  }
   subscribeToWalletChange() {
     this.connector.onStatusChange((wallet) => __async(this, null, function* () {
       var _a2;