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

package/lib/index.umd.js

@@ -1769,9 +1769,7 @@ var __async = (__this, __arguments, generator) => {
     }
   }
   function defineStylesRoot() {
-    customElements.define(globalStylesTag, class TcRootElement extends HTMLDivElement {
-    }, {
-      extends: "div"
+    customElements.define(globalStylesTag, class TcRootElement extends HTMLElement {
     });
   }
   function preloadImages(images) {
@@ -1898,10 +1896,17 @@ var __async = (__this, __arguments, generator) => {
       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 {
@@ -2997,6 +3002,30 @@ var __async = (__this, __arguments, generator) => {
     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,
@@ -3207,6 +3236,7 @@ var __async = (__this, __arguments, generator) => {
   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);
@@ -3270,6 +3300,7 @@ var __async = (__this, __arguments, generator) => {
             }, 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, {
@@ -3303,6 +3334,7 @@ var __async = (__this, __arguments, generator) => {
                 createRenderEffect(() => className(_el$, cn__default.default(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;
@@ -6552,26 +6584,45 @@ var __async = (__this, __arguments, generator) => {
     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, {
@@ -9242,22 +9293,25 @@ var __async = (__this, __arguments, generator) => {
       }
       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() {
@@ -9590,8 +9644,14 @@ var __async = (__this, __arguments, generator) => {
     });
   };
   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(),
@@ -9600,16 +9660,96 @@ var __async = (__this, __arguments, generator) => {
       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(sdk.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;
@@ -9620,6 +9760,15 @@ var __async = (__this, __arguments, generator) => {
           "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);
@@ -9718,35 +9867,29 @@ var __async = (__this, __arguments, generator) => {
         }
       }), 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(sdk.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() {
@@ -9775,8 +9918,21 @@ var __async = (__this, __arguments, generator) => {
           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"),
@@ -9795,9 +9951,110 @@ var __async = (__this, __arguments, generator) => {
             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;