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

package/lib/index.mjs

@@ -7048,7 +7048,7 @@ const DropdownButtonStyled = styled(AccountButtonStyled)`
     justify-content: center;
     background-color: ${(props) => props.theme.colors.background.primary};
 `;
-const LoaderButtonStyled = styled(Button)`
+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)`
+styled(LoaderIcon)`
     height: 18px;
     width: 18px;
 `;
@@ -7831,7 +7831,6 @@ const AccountButton = () => {
   const tonConnectUI = useContext(TonConnectUiContext);
   const [isOpened, setIsOpened] = createSignal(false);
   const [account, setAccount] = createSignal(connector.account);
-  const [restoringProcess, setRestoringProcess] = createSignal(true);
   let dropDownRef;
   const [floating, setFloating] = createSignal();
   const [anchor, setAnchor] = createSignal();
@@ -7847,7 +7846,6 @@ const AccountButton = () => {
     }
     return "";
   };
-  tonConnectUI.connectionRestored.then(() => setRestoringProcess(false));
   const unsubscribe = connector.onStatusChange((wallet) => {
     if (!wallet) {
       setIsOpened(false);
@@ -7878,143 +7876,123 @@ const AccountButton = () => {
     get children() {
       return [createComponent(Show, {
         get when() {
-          return restoringProcess();
+          return !account();
         },
         get children() {
-          return createComponent(LoaderButtonStyled, {
-            disabled: true,
-            "data-tc-connect-button-loading": "true",
+          return createComponent(AccountButtonStyled, {
+            onClick: () => tonConnectUI.openModal(),
+            "data-tc-connect-button": "true",
+            scale: "s",
             get children() {
-              return createComponent(LoaderIconStyled, {});
+              return [createComponent(TonIcon, {
+                get fill() {
+                  return theme.colors.connectButton.foreground;
+                }
+              }), createComponent(Text, {
+                translationKey: "button.connectWallet",
+                fontSize: "15px",
+                lineHeight: "18px",
+                fontWeight: "590",
+                get color() {
+                  return theme.colors.connectButton.foreground;
+                },
+                children: "Connect wallet"
+              })];
             }
           });
         }
       }), createComponent(Show, {
         get when() {
-          return !restoringProcess();
+          return account();
         },
         get children() {
-          return [createComponent(Show, {
-            get when() {
-              return !account();
-            },
+          return createComponent(DropdownContainerStyled, {
             get children() {
-              return createComponent(AccountButtonStyled, {
-                onClick: () => tonConnectUI.openModal(),
-                "data-tc-connect-button": "true",
+              return [createComponent(DropdownButtonStyled, {
+                onClick: () => setIsOpened((v) => !v),
+                ref: setAnchor,
+                "data-tc-dropdown-button": "true",
                 scale: "s",
                 get children() {
-                  return [createComponent(TonIcon, {
-                    get fill() {
-                      return theme.colors.connectButton.foreground;
-                    }
-                  }), createComponent(Text, {
-                    translationKey: "button.connectWallet",
+                  return [createComponent(Text, {
                     fontSize: "15px",
-                    lineHeight: "18px",
                     fontWeight: "590",
-                    get color() {
-                      return theme.colors.connectButton.foreground;
-                    },
-                    children: "Connect wallet"
+                    lineHeight: "18px",
+                    get children() {
+                      return normalizedAddress();
+                    }
+                  }), createComponent(ArrowIcon, {
+                    direction: "bottom"
                   })];
                 }
-              });
-            }
-          }), createComponent(Show, {
-            get when() {
-              return account();
-            },
-            get children() {
-              return createComponent(DropdownContainerStyled, {
+              }), createComponent(Portal, {
                 get children() {
-                  return [createComponent(DropdownButtonStyled, {
-                    onClick: () => setIsOpened((v) => !v),
-                    ref: setAnchor,
-                    "data-tc-dropdown-button": "true",
-                    scale: "s",
-                    get children() {
-                      return [createComponent(Text, {
-                        fontSize: "15px",
-                        fontWeight: "590",
-                        lineHeight: "18px",
-                        get children() {
-                          return normalizedAddress();
-                        }
-                      }), createComponent(ArrowIcon, {
-                        direction: "bottom"
-                      })];
-                    }
-                  }), createComponent(Portal, {
+                  const _el$ = untrack(() => document.importNode(_tmpl$$3, true));
+                  use(setFloating, _el$);
+                  _el$.style.setProperty("z-index", "999");
+                  _el$._$owner = getOwner();
+                  insert(_el$, createComponent(Transition, {
+                    onBeforeEnter: (el) => {
+                      animate(el, [{
+                        opacity: 0,
+                        transform: "translateY(-8px)"
+                      }, {
+                        opacity: 1,
+                        transform: "translateY(0)"
+                      }], {
+                        duration: 150
+                      });
+                    },
+                    onExit: (el, done) => {
+                      const a2 = animate(el, [{
+                        opacity: 1,
+                        transform: "translateY(0)"
+                      }, {
+                        opacity: 0,
+                        transform: "translateY(-8px)"
+                      }], {
+                        duration: 150
+                      });
+                      a2.finished.then(done);
+                    },
                     get children() {
-                      const _el$ = untrack(() => document.importNode(_tmpl$$3, true));
-                      use(setFloating, _el$);
-                      _el$.style.setProperty("z-index", "999");
-                      _el$._$owner = getOwner();
-                      insert(_el$, createComponent(Transition, {
-                        onBeforeEnter: (el) => {
-                          animate(el, [{
-                            opacity: 0,
-                            transform: "translateY(-8px)"
-                          }, {
-                            opacity: 1,
-                            transform: "translateY(0)"
-                          }], {
-                            duration: 150
-                          });
-                        },
-                        onExit: (el, done) => {
-                          const a2 = animate(el, [{
-                            opacity: 1,
-                            transform: "translateY(0)"
-                          }, {
-                            opacity: 0,
-                            transform: "translateY(-8px)"
-                          }], {
-                            duration: 150
-                          });
-                          a2.finished.then(done);
+                      return createComponent(Show, {
+                        get when() {
+                          return isOpened();
                         },
                         get children() {
-                          return createComponent(Show, {
-                            get when() {
-                              return isOpened();
+                          return createComponent(DropdownStyled, {
+                            get hidden() {
+                              return !isOpened();
                             },
-                            get children() {
-                              return createComponent(DropdownStyled, {
-                                get hidden() {
-                                  return !isOpened();
-                                },
-                                onClose: () => setIsOpened(false),
-                                ref(r$) {
-                                  const _ref$ = dropDownRef;
-                                  typeof _ref$ === "function" ? _ref$(r$) : dropDownRef = r$;
-                                }
-                              });
+                            onClose: () => setIsOpened(false),
+                            ref(r$) {
+                              const _ref$ = dropDownRef;
+                              typeof _ref$ === "function" ? _ref$(r$) : dropDownRef = r$;
                             }
                           });
                         }
-                      }), null);
-                      insert(_el$, createComponent(NotificationsStyled, {}), null);
-                      createRenderEffect((_p$) => {
-                        var _a2, _b2;
-                        const _v$ = position.strategy, _v$2 = `${(_a2 = position.y) != null ? _a2 : 0}px`, _v$3 = `${(_b2 = position.x) != null ? _b2 : 0}px`;
-                        _v$ !== _p$._v$ && _el$.style.setProperty("position", _p$._v$ = _v$);
-                        _v$2 !== _p$._v$2 && _el$.style.setProperty("top", _p$._v$2 = _v$2);
-                        _v$3 !== _p$._v$3 && _el$.style.setProperty("left", _p$._v$3 = _v$3);
-                        return _p$;
-                      }, {
-                        _v$: void 0,
-                        _v$2: void 0,
-                        _v$3: void 0
                       });
-                      return _el$;
                     }
-                  })];
+                  }), null);
+                  insert(_el$, createComponent(NotificationsStyled, {}), null);
+                  createRenderEffect((_p$) => {
+                    var _a2, _b2;
+                    const _v$ = position.strategy, _v$2 = `${(_a2 = position.y) != null ? _a2 : 0}px`, _v$3 = `${(_b2 = position.x) != null ? _b2 : 0}px`;
+                    _v$ !== _p$._v$ && _el$.style.setProperty("position", _p$._v$ = _v$);
+                    _v$2 !== _p$._v$2 && _el$.style.setProperty("top", _p$._v$2 = _v$2);
+                    _v$3 !== _p$._v$3 && _el$.style.setProperty("left", _p$._v$3 = _v$3);
+                    return _p$;
+                  }, {
+                    _v$: void 0,
+                    _v$2: void 0,
+                    _v$3: void 0
+                  });
+                  return _el$;
                 }
-              });
+              })];
             }
-          })];
+          });
         }
       })];
     }
@@ -10134,6 +10112,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 +10127,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 +10177,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 +10855,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 +10896,7 @@ class TonConnectUI {
         const result = yield this.waitForSendTransaction(
           {
             transaction: tx,
-            abortSignal: abortController.signal
+            signal: abortController.signal
           },
           onRequestSent
         );
@@ -10935,15 +10956,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 +10990,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 +11006,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 +11016,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 }
+        );
       });
     });
   }