@tonconnect/ui 0.0.12 → 0.0.13

package/lib/index.umd.js

@@ -5304,9 +5304,7 @@ var __async = (__this, __arguments, generator) => {
     });
   }
   const [walletsModalOpen, setWalletsModalOpen] = createSignal(false);
-  const [lastSelectedWalletInfo, setLastSelectedWalletInfo] = createSignal(
-    null
-  );
+  const [lastSelectedWalletInfo, setLastSelectedWalletInfo] = createSignal(null);
   const [action, setAction] = createSignal(null);
   let e = { data: "" }, t = (t2) => "object" == typeof window ? ((t2 ? t2.querySelector("#_goober") : window._goober) || Object.assign((t2 || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : t2 || e, l = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, a = /\/\*[^]*?\*\/|  +/g, n = /\n+/g, o = (e2, t2) => {
     let r = "", l2 = "", a2 = "";
@@ -5827,8 +5825,7 @@ var __async = (__this, __arguments, generator) => {
     },
     text: {
       primary: "#0F0F0F",
-      secondary: "#7A8999",
-      subhead: "#6A7785"
+      secondary: "#7A8999"
     }
   };
   const defaultDarkColorsSet = {
@@ -5853,8 +5850,7 @@ var __async = (__this, __arguments, generator) => {
     },
     text: {
       primary: "#E5E5EA",
-      secondary: "#7D7D85",
-      subhead: "#8C8C93"
+      secondary: "#7D7D85"
     }
   };
   var isMergeableObject = function isMergeableObject2(value) {
@@ -6099,7 +6095,7 @@ var __async = (__this, __arguments, generator) => {
     padding: 9px 16px;
     border: none;
     border-radius: ${(props) => borders$3[props.theme.borderRadius]};
-    cursor: pointer;
+    cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
 
     font-size: 14px;
     font-weight: 590;
@@ -6109,11 +6105,11 @@ var __async = (__this, __arguments, generator) => {
     transition: transform 0.1s ease-in-out;
 
     &:hover {
-        transform: scale(1.04);
+        transform: ${(props) => props.disabled ? "unset" : "scale(1.04)"};
     }
 
     &:active {
-        transform: scale(0.96);
+        transform: ${(props) => props.disabled ? "unset" : "scale(0.96)"};
     }
 `;
   const Button = (props) => {
@@ -6124,11 +6120,17 @@ var __async = (__this, __arguments, generator) => {
       get id() {
         return props.id;
       },
-      onClick: () => props.onClick(),
+      onClick: () => {
+        var _a2;
+        return (_a2 = props.onClick) == null ? void 0 : _a2.call(props);
+      },
       ref(r$) {
         const _ref$ = props.ref;
         typeof _ref$ === "function" ? _ref$(r$) : props.ref = r$;
       },
+      get disabled() {
+        return props.disabled;
+      },
       get children() {
         return props.children;
       }
@@ -6916,38 +6918,42 @@ var __async = (__this, __arguments, generator) => {
       return _el$;
     })();
   };
-  const _tmpl$$b = /* @__PURE__ */ template$1(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="11"></circle><path d="M7.5 13L10 15.5L16.5 9" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>`);
+  const _tmpl$$b = /* @__PURE__ */ template$1(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="11"></circle><path d="M7.5 13L10 15.5L16.5 9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>`);
   const SuccessIcon = (props) => {
     const theme = useTheme();
     const fill = () => props.fill || theme.colors.icon.success;
     return (() => {
-      const _el$ = _tmpl$$b.cloneNode(true), _el$2 = _el$.firstChild;
+      const _el$ = _tmpl$$b.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
       createRenderEffect((_p$) => {
-        const _v$ = props.class, _v$2 = fill();
+        const _v$ = props.class, _v$2 = fill(), _v$3 = theme.colors.constant.white;
         _v$ !== _p$._v$ && setAttribute(_el$, "class", _p$._v$ = _v$);
         _v$2 !== _p$._v$2 && setAttribute(_el$2, "fill", _p$._v$2 = _v$2);
+        _v$3 !== _p$._v$3 && setAttribute(_el$3, "stroke", _p$._v$3 = _v$3);
         return _p$;
       }, {
         _v$: void 0,
-        _v$2: void 0
+        _v$2: void 0,
+        _v$3: void 0
       });
       return _el$;
     })();
   };
-  const _tmpl$$a = /* @__PURE__ */ template$1(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="11"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M7.86358 9.13637C7.51211 8.7849 7.51211 8.21505 7.86358 7.86358C8.21505 7.51211 8.7849 7.51211 9.13637 7.86358L12 10.7272L14.8636 7.86358C15.2151 7.51211 15.7849 7.51211 16.1364 7.86358C16.4878 8.21505 16.4878 8.7849 16.1364 9.13637L13.2728 12L16.1364 14.8636C16.4878 15.2151 16.4878 15.7849 16.1364 16.1364C15.7849 16.4878 15.2151 16.4878 14.8636 16.1364L12 13.2728L9.13637 16.1364C8.7849 16.4878 8.21505 16.4878 7.86358 16.1364C7.51211 15.7849 7.51211 15.2151 7.86358 14.8636L10.7272 12L7.86358 9.13637Z" fill="white"></path></svg>`);
+  const _tmpl$$a = /* @__PURE__ */ template$1(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="11"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M7.86358 9.13637C7.51211 8.7849 7.51211 8.21505 7.86358 7.86358C8.21505 7.51211 8.7849 7.51211 9.13637 7.86358L12 10.7272L14.8636 7.86358C15.2151 7.51211 15.7849 7.51211 16.1364 7.86358C16.4878 8.21505 16.4878 8.7849 16.1364 9.13637L13.2728 12L16.1364 14.8636C16.4878 15.2151 16.4878 15.7849 16.1364 16.1364C15.7849 16.4878 15.2151 16.4878 14.8636 16.1364L12 13.2728L9.13637 16.1364C8.7849 16.4878 8.21505 16.4878 7.86358 16.1364C7.51211 15.7849 7.51211 15.2151 7.86358 14.8636L10.7272 12L7.86358 9.13637Z"></path></svg>`);
   const ErrorIcon = (props) => {
     const theme = useTheme();
     const fill = () => props.fill || theme.colors.icon.secondary;
     return (() => {
-      const _el$ = _tmpl$$a.cloneNode(true), _el$2 = _el$.firstChild;
+      const _el$ = _tmpl$$a.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
       createRenderEffect((_p$) => {
-        const _v$ = props.class, _v$2 = fill();
+        const _v$ = props.class, _v$2 = fill(), _v$3 = theme.colors.constant.white;
         _v$ !== _p$._v$ && setAttribute(_el$, "class", _p$._v$ = _v$);
         _v$2 !== _p$._v$2 && setAttribute(_el$2, "fill", _p$._v$2 = _v$2);
+        _v$3 !== _p$._v$3 && setAttribute(_el$3, "fill", _p$._v$3 = _v$3);
         return _p$;
       }, {
         _v$: void 0,
-        _v$2: void 0
+        _v$2: void 0,
+        _v$3: void 0
       });
       return _el$;
     })();
@@ -7223,7 +7229,7 @@ var __async = (__this, __arguments, generator) => {
       }
     });
   };
-  const LoaderIconStyled$2 = styled(LoaderIcon)`
+  const LoaderIconStyled$3 = styled(LoaderIcon)`
     align-self: center;
     min-width: 22px;
     min-height: 22px;
@@ -7237,7 +7243,7 @@ var __async = (__this, __arguments, generator) => {
         return props.class;
       },
       get icon() {
-        return createComponent(LoaderIconStyled$2, {});
+        return createComponent(LoaderIconStyled$3, {});
       },
       children: "Confirm operation in your wallet"
     });
@@ -7402,7 +7408,25 @@ var __async = (__this, __arguments, generator) => {
     }
 `;
   const DropdownButtonStyled = styled(AccountButtonStyled)`
+    width: 140px;
+    gap: 11px;
+    justify-content: center;
     background-color: ${(props) => props.theme.colors.background.primary};
+`;
+  const LoaderButtonStyled = styled(Button)`
+    width: 140px;
+
+    background-color: ${(props) => props.theme.colors.background.primary};
+    color: ${(props) => props.theme.colors.connectButton.foreground};
+    box-shadow: ${(props) => `0 4px 24px ${rgba(props.theme.colors.constant.black, 0.16)}`};
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+  const LoaderIconStyled$2 = styled(LoaderIcon)`
+    height: 18px;
+    width: 18px;
 `;
   const DropdownContainerStyled = styled.div`
     display: flex;
@@ -8170,6 +8194,7 @@ var __async = (__this, __arguments, generator) => {
     const tonConnectUI = useContext(TonConnectUiContext);
     const [isOpened, setIsOpened] = createSignal(false);
     const [account, setAccount] = createSignal(null);
+    const [restoringProcess, setRestoringProcess] = createSignal(true);
     let dropDownRef;
     const [floating, setFloating] = createSignal();
     const [anchor, setAnchor] = createSignal();
@@ -8185,6 +8210,7 @@ var __async = (__this, __arguments, generator) => {
       }
       return "";
     };
+    tonConnectUI.connectionRestored.then(() => setRestoringProcess(false));
     const unsubscribe = connector.onStatusChange((wallet) => {
       if (!wallet) {
         setIsOpened(false);
@@ -8212,123 +8238,144 @@ var __async = (__this, __arguments, generator) => {
     });
     return [createComponent(Show, {
       get when() {
-        return !account();
+        return restoringProcess();
       },
       get children() {
-        return createComponent(AccountButtonStyled, {
-          onClick: () => tonConnectUI.connectWallet(),
-          id: "tc-connect-button",
+        return createComponent(LoaderButtonStyled, {
+          disabled: true,
+          id: "tc-connect-button-loading",
           get children() {
-            return [createComponent(TonIcon, {
-              get fill() {
-                return theme.colors.connectButton.foreground;
-              }
-            }), createComponent(Text, {
-              translationKey: "button.connectWallet",
-              fontSize: "15px",
-              letterSpacing: "-0.24px",
-              fontWeight: "590",
-              get color() {
-                return theme.colors.connectButton.foreground;
-              },
-              children: "Connect wallet"
-            })];
+            return createComponent(LoaderIconStyled$2, {});
           }
         });
       }
     }), 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,
-              id: "tc-dropdown-button",
+            return createComponent(AccountButtonStyled, {
+              onClick: () => tonConnectUI.connectWallet(),
+              id: "tc-connect-button",
               get children() {
-                return [createComponent(Text, {
+                return [createComponent(TonIcon, {
+                  get fill() {
+                    return theme.colors.connectButton.foreground;
+                  }
+                }), createComponent(Text, {
+                  translationKey: "button.connectWallet",
                   fontSize: "15px",
                   letterSpacing: "-0.24px",
                   fontWeight: "590",
-                  get children() {
-                    return normalizedAddress();
-                  }
-                }), createComponent(ArrowIcon, {
-                  direction: "bottom"
+                  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$ = _tmpl$$3.cloneNode(true);
-                use(setFloating, _el$);
-                _el$.style.setProperty("z-index", "999");
-                insert(_el$, createComponent(Transition, {
-                  onBeforeEnter: (el) => {
-                    el.animate([{
-                      opacity: 0,
-                      transform: "translateY(-8px)"
-                    }, {
-                      opacity: 1,
-                      transform: "translateY(0)"
-                    }], {
-                      duration: 150
-                    });
-                  },
-                  onExit: (el, done) => {
-                    const a2 = el.animate([{
-                      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,
+                  id: "tc-dropdown-button",
                   get children() {
-                    return createComponent(Show, {
-                      get when() {
-                        return isOpened();
+                    return [createComponent(Text, {
+                      fontSize: "15px",
+                      letterSpacing: "-0.24px",
+                      fontWeight: "590",
+                      lineHeight: "18px",
+                      get children() {
+                        return normalizedAddress();
+                      }
+                    }), createComponent(ArrowIcon, {
+                      direction: "bottom"
+                    })];
+                  }
+                }), createComponent(Portal, {
+                  get children() {
+                    const _el$ = _tmpl$$3.cloneNode(true);
+                    use(setFloating, _el$);
+                    _el$.style.setProperty("z-index", "999");
+                    insert(_el$, createComponent(Transition, {
+                      onBeforeEnter: (el) => {
+                        el.animate([{
+                          opacity: 0,
+                          transform: "translateY(-8px)"
+                        }, {
+                          opacity: 1,
+                          transform: "translateY(0)"
+                        }], {
+                          duration: 150
+                        });
+                      },
+                      onExit: (el, done) => {
+                        const a2 = el.animate([{
+                          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();
-                          },
-                          onClose: () => setIsOpened(false),
-                          ref(r$) {
-                            const _ref$ = dropDownRef;
-                            typeof _ref$ === "function" ? _ref$(r$) : dropDownRef = r$;
+                        return createComponent(Show, {
+                          get when() {
+                            return isOpened();
                           },
-                          id: "tc-dropdown"
+                          get children() {
+                            return createComponent(DropdownStyled, {
+                              get hidden() {
+                                return !isOpened();
+                              },
+                              onClose: () => setIsOpened(false),
+                              ref(r$) {
+                                const _ref$ = dropDownRef;
+                                typeof _ref$ === "function" ? _ref$(r$) : dropDownRef = r$;
+                              },
+                              id: "tc-dropdown"
+                            });
+                          }
                         });
                       }
+                    }), null);
+                    insert(_el$, createComponent(NotificationsStyled, {
+                      id: "tc-notifications"
+                    }), null);
+                    createRenderEffect((_p$) => {
+                      var _a2, _b;
+                      const _v$ = position.strategy, _v$2 = `${(_a2 = position.y) != null ? _a2 : 0}px`, _v$3 = `${(_b = position.x) != null ? _b : 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, {
-                  id: "tc-notifications"
-                }), null);
-                createRenderEffect((_p$) => {
-                  var _a2, _b;
-                  const _v$ = position.strategy, _v$2 = `${(_a2 = position.y) != null ? _a2 : 0}px`, _v$3 = `${(_b = position.x) != null ? _b : 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$;
+                })];
               }
-            })];
+            });
           }
-        });
+        })];
       }
     })];
   };
@@ -10161,7 +10208,12 @@ var __async = (__this, __arguments, generator) => {
         }), createComponent(ButtonsContainerStyled, {
           get children() {
             return [createComponent(ActionButtonStyled, {
-              onClick: () => openLink(universalLink),
+              onClick: () => {
+                setLastSelectedWalletInfo(__spreadProps(__spreadValues({}, props.wallet), {
+                  openMethod: "universal-link"
+                }));
+                openLink(universalLink);
+              },
               get children() {
                 return createComponent(Translation, {
                   translationKey: "walletModal.qrCodeModal.openWallet",
@@ -10181,9 +10233,12 @@ var __async = (__this, __arguments, generator) => {
               },
               get children() {
                 return createComponent(ActionButtonStyled, {
-                  onClick: () => connector.connect({
-                    jsBridgeKey: props.wallet.jsBridgeKey
-                  }, props.additionalRequest),
+                  onClick: () => {
+                    setLastSelectedWalletInfo(props.wallet);
+                    connector.connect({
+                      jsBridgeKey: props.wallet.jsBridgeKey
+                    }, props.additionalRequest);
+                  },
                   get children() {
                     return createComponent(Translation, {
                       translationKey: "walletModal.qrCodeModal.openExtension",
@@ -10488,14 +10543,20 @@ var __async = (__this, __arguments, generator) => {
       setSelectedWalletInfo(null);
     };
     const onSelect = (walletInfo) => {
-      setLastSelectedWalletInfo(walletInfo);
       if (isDevice("mobile") && "universalLink" in walletInfo) {
+        setLastSelectedWalletInfo(__spreadProps(__spreadValues({}, walletInfo), {
+          openMethod: "universal-link"
+        }));
         return onSelectIfMobile(walletInfo);
       }
       if (isWalletInfoInjected(walletInfo) && walletInfo.injected) {
+        setLastSelectedWalletInfo(walletInfo);
         return onSelectIfInjected(walletInfo);
       }
       if ("bridgeUrl" in walletInfo) {
+        setLastSelectedWalletInfo(__spreadProps(__spreadValues({}, walletInfo), {
+          openMethod: "qrcode"
+        }));
         setSelectedWalletInfo(walletInfo);
         return;
       }
@@ -10826,6 +10887,7 @@ var __async = (__this, __arguments, generator) => {
       __publicField(this, "_walletInfo", null);
       __publicField(this, "systemThemeChangeUnsubscribe", null);
       __publicField(this, "actionsConfiguration");
+      __publicField(this, "connectionRestored", Promise.resolve(false));
       if (options && "connector" in options && options.connector) {
         this.connector = options.connector;
       } else if (options && "manifestUrl" in options && options.manifestUrl) {
@@ -10842,11 +10904,13 @@ var __async = (__this, __arguments, generator) => {
       const rootId = this.normalizeWidgetRoot(options == null ? void 0 : options.widgetRootId);
       this.subscribeToWalletChange();
       if ((options == null ? void 0 : options.restoreConnection) !== false) {
-        this.connector.restoreConnection().then(() => {
+        this.connectionRestored = new Promise((resolve) => __async(this, null, function* () {
+          yield this.connector.restoreConnection();
           if (!this.connector.connected) {
             this.walletInfoStorage.removeWalletInfo();
           }
-        });
+          resolve(this.connector.connected);
+        }));
       }
       this.uiOptions = mergeOptions(options, { uiPreferences: { theme: "SYSTEM" } });
       setAppState({
@@ -10952,7 +11016,7 @@ var __async = (__this, __arguments, generator) => {
         if (!this.connected || !this.walletInfo) {
           throw new TonConnectUIError("Connect wallet to send a transaction.");
         }
-        if (!isDevice("desktop") && "universalLink" in this.walletInfo) {
+        if ("universalLink" in this.walletInfo && this.walletInfo.openMethod === "universal-link") {
           openLink(this.walletInfo.universalLink);
         }
         const { notifications: notifications2, modals } = this.getModalsAndNotificationsConfiguration(options);