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

package/lib/index.cjs

@@ -6853,7 +6853,7 @@ const Notification = (props) => {
     }
   }));
 };
-const LoaderIconStyled$1 = styled(LoaderIcon)`
+const LoaderIconStyled$2 = styled(LoaderIcon)`
     align-self: center;
 `;
 const ConfirmOperationNotification = (props) => {
@@ -6873,7 +6873,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"
@@ -7053,7 +7053,7 @@ const DropdownButtonStyled = styled(AccountButtonStyled)`
     justify-content: center;
     background-color: ${(props) => props.theme.colors.background.primary};
 `;
-styled(Button)`
+const LoaderButtonStyled$1 = styled(Button)`
     min-width: 148px;
     height: 40px;
 
@@ -7065,7 +7065,7 @@ styled(Button)`
     align-items: center;
     justify-content: center;
 `;
-styled(LoaderIcon)`
+const LoaderIconStyled$1 = styled(LoaderIcon)`
     height: 18px;
     width: 18px;
 `;
@@ -7836,6 +7836,7 @@ 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();
@@ -7851,13 +7852,16 @@ const AccountButton = () => {
     }
     return "";
   };
+  tonConnectUI.connectionRestored.then(() => setRestoringProcess(false));
   const unsubscribe = connector.onStatusChange((wallet) => {
     if (!wallet) {
       setIsOpened(false);
       setAccount(null);
+      setRestoringProcess(false);
       return;
     }
     setAccount(wallet.account);
+    setRestoringProcess(false);
   });
   const onClick = (e2) => {
     if (!account() || !isOpened()) {
@@ -7881,123 +7885,143 @@ const AccountButton = () => {
     get children() {
       return [createComponent(Show, {
         get when() {
-          return !account();
+          return restoringProcess();
         },
         get children() {
-          return createComponent(AccountButtonStyled, {
-            onClick: () => tonConnectUI.openModal(),
-            "data-tc-connect-button": "true",
-            scale: "s",
+          return createComponent(LoaderButtonStyled$1, {
+            disabled: true,
+            "data-tc-connect-button-loading": "true",
             get children() {
-              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"
-              })];
+              return createComponent(LoaderIconStyled$1, {});
             }
           });
         }
       }), createComponent(Show, {
         get when() {
-          return account();
+          return !restoringProcess();
         },
         get children() {
-          return createComponent(DropdownContainerStyled, {
+          return [createComponent(Show, {
+            get when() {
+              return !account();
+            },
             get children() {
-              return [createComponent(DropdownButtonStyled, {
-                onClick: () => setIsOpened((v) => !v),
-                ref: setAnchor,
-                "data-tc-dropdown-button": "true",
+              return createComponent(AccountButtonStyled, {
+                onClick: () => tonConnectUI.openModal(),
+                "data-tc-connect-button": "true",
                 scale: "s",
                 get children() {
-                  return [createComponent(Text, {
+                  return [createComponent(TonIcon, {
+                    get fill() {
+                      return theme.colors.connectButton.foreground;
+                    }
+                  }), createComponent(Text, {
+                    translationKey: "button.connectWallet",
                     fontSize: "15px",
-                    fontWeight: "590",
                     lineHeight: "18px",
-                    get children() {
-                      return normalizedAddress();
-                    }
-                  }), createComponent(ArrowIcon, {
-                    direction: "bottom"
+                    fontWeight: "590",
+                    get color() {
+                      return theme.colors.connectButton.foreground;
+                    },
+                    children: "Connect wallet"
                   })];
                 }
-              }), createComponent(Portal, {
+              });
+            }
+          }), createComponent(Show, {
+            get when() {
+              return account();
+            },
+            get children() {
+              return createComponent(DropdownContainerStyled, {
                 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(DropdownButtonStyled, {
+                    onClick: () => setIsOpened((v) => !v),
+                    ref: setAnchor,
+                    "data-tc-dropdown-button": "true",
+                    scale: "s",
                     get children() {
-                      return createComponent(Show, {
-                        get when() {
-                          return isOpened();
+                      return [createComponent(Text, {
+                        fontSize: "15px",
+                        fontWeight: "590",
+                        lineHeight: "18px",
+                        get children() {
+                          return normalizedAddress();
+                        }
+                      }), createComponent(ArrowIcon, {
+                        direction: "bottom"
+                      })];
+                    }
+                  }), createComponent(Portal, {
+                    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);
                         },
                         get children() {
-                          return createComponent(DropdownStyled, {
-                            get hidden() {
-                              return !isOpened();
+                          return createComponent(Show, {
+                            get when() {
+                              return isOpened();
                             },
-                            onClose: () => setIsOpened(false),
-                            ref(r$) {
-                              const _ref$ = dropDownRef;
-                              typeof _ref$ === "function" ? _ref$(r$) : dropDownRef = r$;
+                            get children() {
+                              return createComponent(DropdownStyled, {
+                                get hidden() {
+                                  return !isOpened();
+                                },
+                                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$;
+                  })];
                 }
-              })];
+              });
             }
-          });
+          })];
         }
       })];
     }