@tonconnect/ui 2.0.1-beta.4 → 2.0.1-beta.6

package/lib/index.d.ts

@@ -331,7 +331,8 @@ declare class TonConnectUI {
      */
     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).
+     * 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.
      */
     readonly connectionRestored: Promise<boolean>;

package/lib/index.mjs

@@ -6848,7 +6848,7 @@ const Notification = (props) => {
     }
   }));
 };
-const LoaderIconStyled$1 = styled(LoaderIcon)`
+const LoaderIconStyled$2 = styled(LoaderIcon)`
     align-self: center;
 `;
 const ConfirmOperationNotification = (props) => {
@@ -6868,7 +6868,7 @@ const ConfirmOperationNotification = (props) => {
       return props.class;
     },
     get icon() {
-      return createComponent(LoaderIconStyled$1, {});
+      return createComponent(LoaderIconStyled$2, {});
     },
     "data-tc-notification-confirm": "true",
     children: "Confirm operation in your wallet"
@@ -7048,7 +7048,7 @@ const DropdownButtonStyled = styled(AccountButtonStyled)`
     justify-content: center;
     background-color: ${(props) => props.theme.colors.background.primary};
 `;
-const LoaderButtonStyled = styled(Button)`
+const LoaderButtonStyled$1 = styled(Button)`
     min-width: 148px;
     height: 40px;
 
@@ -7060,7 +7060,7 @@ const LoaderButtonStyled = styled(Button)`
     align-items: center;
     justify-content: center;
 `;
-const LoaderIconStyled = styled(LoaderIcon)`
+const LoaderIconStyled$1 = styled(LoaderIcon)`
     height: 18px;
     width: 18px;
 `;
@@ -7852,9 +7852,11 @@ const AccountButton = () => {
     if (!wallet) {
       setIsOpened(false);
       setAccount(null);
+      setRestoringProcess(false);
       return;
     }
     setAccount(wallet.account);
+    setRestoringProcess(false);
   });
   const onClick = (e2) => {
     if (!account() || !isOpened()) {
@@ -7881,11 +7883,11 @@ const AccountButton = () => {
           return restoringProcess();
         },
         get children() {
-          return createComponent(LoaderButtonStyled, {
+          return createComponent(LoaderButtonStyled$1, {
             disabled: true,
             "data-tc-connect-button-loading": "true",
             get children() {
-              return createComponent(LoaderIconStyled, {});
+              return createComponent(LoaderIconStyled$1, {});
             }
           });
         }
@@ -10134,6 +10136,14 @@ const TextStyled = styled(Text)`
 
     color: ${(props) => props.theme.colors.text.secondary};
 `;
+const LoaderButtonStyled = styled(Button)`
+    min-width: 112px;
+    margin-top: 32px;
+`;
+const LoaderIconStyled = styled(LoaderIcon)`
+    height: 16px;
+    width: 16px;
+`;
 const ButtonStyled = styled(Button)`
     margin-top: 32px;
 `;
@@ -10141,6 +10151,11 @@ const ActionModal = (props) => {
   const dataAttrs = useDataAttributes(props);
   const tonConnectUI = useContext(TonConnectUiContext);
   const [firstClick, setFirstClick] = createSignal(true);
+  const [sent, setSent] = createSignal(false);
+  createEffect(() => {
+    const currentAction = action();
+    setSent(!!currentAction && "sent" in currentAction && currentAction.sent);
+  });
   let universalLink;
   if ((tonConnectUI == null ? void 0 : tonConnectUI.wallet) && "universalLink" in tonConnectUI.wallet && (tonConnectUI.wallet.openMethod === "universal-link" || isTelegramUrl(tonConnectUI.wallet.universalLink) && isInTMA())) {
     universalLink = tonConnectUI.wallet.universalLink;
@@ -10186,33 +10201,53 @@ const ActionModal = (props) => {
         }
       }), createComponent(Show, {
         get when() {
-          return props.showButton !== "open-wallet";
+          return !sent();
         },
         get children() {
-          return createComponent(ButtonStyled, {
-            onClick: () => props.onClose(),
+          return createComponent(LoaderButtonStyled, {
+            disabled: true,
+            "data-tc-connect-button-loading": "true",
             get children() {
-              return createComponent(Translation, {
-                translationKey: "common.close",
-                children: "Close"
-              });
+              return createComponent(LoaderIconStyled, {});
             }
           });
         }
       }), createComponent(Show, {
         get when() {
-          return props.showButton === "open-wallet" && universalLink;
+          return sent();
         },
         get children() {
-          return createComponent(ButtonStyled, {
-            onClick: onOpenWallet,
+          return [createComponent(Show, {
+            get when() {
+              return props.showButton !== "open-wallet";
+            },
             get children() {
-              return createComponent(Translation, {
-                translationKey: "common.openWallet",
-                children: "Open wallet"
+              return createComponent(ButtonStyled, {
+                onClick: () => props.onClose(),
+                get children() {
+                  return createComponent(Translation, {
+                    translationKey: "common.close",
+                    children: "Close"
+                  });
+                }
               });
             }
-          });
+          }), createComponent(Show, {
+            get when() {
+              return props.showButton === "open-wallet" && universalLink;
+            },
+            get children() {
+              return createComponent(ButtonStyled, {
+                onClick: onOpenWallet,
+                get children() {
+                  return createComponent(Translation, {
+                    translationKey: "common.openWallet",
+                    children: "Open wallet"
+                  });
+                }
+              });
+            }
+          })];
         }
       })];
     }
@@ -10844,9 +10879,19 @@ class TonConnectUI {
       widgetController.setAction({
         name: "confirm-transaction",
         showNotification: notifications2.includes("before"),
-        openModal: modals.includes("before")
+        openModal: modals.includes("before"),
+        sent: false
       });
       const onRequestSent = () => {
+        if (abortController.signal.aborted) {
+          return;
+        }
+        widgetController.setAction({
+          name: "confirm-transaction",
+          showNotification: notifications2.includes("before"),
+          openModal: modals.includes("before"),
+          sent: true
+        });
         const userOSIsIos = getUserAgent().os === "ios";
         const shouldSkipRedirectToWallet = skipRedirectToWallet === "ios" && userOSIsIos || skipRedirectToWallet === "always";
         if (this.walletInfo && "universalLink" in this.walletInfo && this.walletInfo.openMethod === "universal-link" && !shouldSkipRedirectToWallet) {
@@ -10875,7 +10920,7 @@ class TonConnectUI {
         const result = yield this.waitForSendTransaction(
           {
             transaction: tx,
-            abortSignal: abortController.signal
+            signal: abortController.signal
           },
           onRequestSent
         );
@@ -10935,15 +10980,15 @@ class TonConnectUI {
       });
       return yield this.waitForWalletConnection({
         ignoreErrors: true,
-        abortSignal: abortController.signal
+        signal: abortController.signal
       });
     });
   }
   waitForWalletConnection(options) {
     return __async(this, null, function* () {
       return new Promise((resolve, reject) => {
-        const { ignoreErrors = false, abortSignal = null } = options;
-        if (abortSignal && abortSignal.aborted) {
+        const { ignoreErrors = false, signal = null } = options;
+        if (signal && signal.aborted) {
           return reject(new TonConnectUIError("Wallet was not connected"));
         }
         const onStatusChangeHandler = (wallet) => __async(this, null, function* () {
@@ -10969,11 +11014,15 @@ class TonConnectUI {
           (wallet) => onStatusChangeHandler(wallet),
           (reason) => onErrorsHandler(reason)
         );
-        if (abortSignal) {
-          abortSignal.addEventListener("abort", () => {
-            unsubscribe();
-            reject(new TonConnectUIError("Wallet was not connected"));
-          });
+        if (signal) {
+          signal.addEventListener(
+            "abort",
+            () => {
+              unsubscribe();
+              reject(new TonConnectUIError("Wallet was not connected"));
+            },
+            { once: true }
+          );
         }
       });
     });
@@ -10981,8 +11030,8 @@ class TonConnectUI {
   waitForSendTransaction(options, onRequestSent) {
     return __async(this, null, function* () {
       return new Promise((resolve, reject) => {
-        const { transaction, abortSignal } = options;
-        if (abortSignal.aborted) {
+        const { transaction, signal } = options;
+        if (signal.aborted) {
           return reject(new TonConnectUIError("Transaction was not sent"));
         }
         const onTransactionHandler = (transaction2) => __async(this, null, function* () {
@@ -10991,10 +11040,14 @@ class TonConnectUI {
         const onErrorsHandler = (reason) => {
           reject(reason);
         };
-        this.connector.sendTransaction(transaction, onRequestSent).then((result) => onTransactionHandler(result)).catch((reason) => onErrorsHandler(reason));
-        abortSignal.addEventListener("abort", () => {
-          reject(new TonConnectUIError("Transaction was not sent"));
-        });
+        this.connector.sendTransaction(transaction, { onRequestSent, signal }).then((result) => onTransactionHandler(result)).catch((reason) => onErrorsHandler(reason));
+        signal.addEventListener(
+          "abort",
+          () => {
+            reject(new TonConnectUIError("Transaction was not sent"));
+          },
+          { once: true }
+        );
       });
     });
   }