@tonconnect/ui-react 0.0.8 → 0.0.10

package/lib/index.umd.js

@@ -6280,9 +6280,7 @@ var __objRest = (source, exclude) => {
     });
   }
   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 = "";
@@ -6803,8 +6801,7 @@ var __objRest = (source, exclude) => {
     },
     text: {
       primary: "#0F0F0F",
-      secondary: "#7A8999",
-      subhead: "#6A7785"
+      secondary: "#7A8999"
     }
   };
   const defaultDarkColorsSet = {
@@ -6829,8 +6826,7 @@ var __objRest = (source, exclude) => {
     },
     text: {
       primary: "#E5E5EA",
-      secondary: "#7D7D85",
-      subhead: "#8C8C93"
+      secondary: "#7D7D85"
     }
   };
   var isMergeableObject = function isMergeableObject2(value) {
@@ -7075,7 +7071,7 @@ var __objRest = (source, exclude) => {
     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;
@@ -7085,11 +7081,11 @@ var __objRest = (source, exclude) => {
     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) => {
@@ -7100,11 +7096,17 @@ var __objRest = (source, exclude) => {
       get id() {
         return props.id;
       },
-      onClick: () => props.onClick(),
+      onClick: () => {
+        var _a;
+        return (_a = props.onClick) == null ? void 0 : _a.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;
       }
@@ -7892,38 +7894,42 @@ var __objRest = (source, exclude) => {
       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$;
     })();
@@ -8199,7 +8205,7 @@ var __objRest = (source, exclude) => {
       }
     });
   };
-  const LoaderIconStyled$2 = styled(LoaderIcon)`
+  const LoaderIconStyled$3 = styled(LoaderIcon)`
     align-self: center;
     min-width: 22px;
     min-height: 22px;
@@ -8213,7 +8219,7 @@ var __objRest = (source, exclude) => {
         return props.class;
       },
       get icon() {
-        return createComponent(LoaderIconStyled$2, {});
+        return createComponent(LoaderIconStyled$3, {});
       },
       children: "Confirm operation in your wallet"
     });
@@ -8378,7 +8384,25 @@ var __objRest = (source, exclude) => {
     }
 `;
   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;
@@ -9146,6 +9170,7 @@ var __objRest = (source, exclude) => {
     const tonConnectUI2 = 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();
@@ -9161,6 +9186,7 @@ var __objRest = (source, exclude) => {
       }
       return "";
     };
+    tonConnectUI2.connectionRestored.then(() => setRestoringProcess(false));
     const unsubscribe = connector.onStatusChange((wallet) => {
       if (!wallet) {
         setIsOpened(false);
@@ -9188,123 +9214,144 @@ var __objRest = (source, exclude) => {
     });
     return [createComponent(Show, {
       get when() {
-        return !account();
+        return restoringProcess();
       },
       get children() {
-        return createComponent(AccountButtonStyled, {
-          onClick: () => tonConnectUI2.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: () => tonConnectUI2.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();
+                        return createComponent(Show, {
+                          get when() {
+                            return isOpened();
                           },
-                          onClose: () => setIsOpened(false),
-                          ref(r$) {
-                            const _ref$ = dropDownRef;
-                            typeof _ref$ === "function" ? _ref$(r$) : dropDownRef = r$;
-                          },
-                          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 _a, _b;
+                      const _v$ = position.strategy, _v$2 = `${(_a = position.y) != null ? _a : 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 _a, _b;
-                  const _v$ = position.strategy, _v$2 = `${(_a = position.y) != null ? _a : 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$;
+                })];
               }
-            })];
+            });
           }
-        });
+        })];
       }
     })];
   };
@@ -11137,7 +11184,12 @@ var __objRest = (source, exclude) => {
         }), 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",
@@ -11157,9 +11209,12 @@ var __objRest = (source, exclude) => {
               },
               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",
@@ -11464,14 +11519,20 @@ var __objRest = (source, exclude) => {
       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;
       }
@@ -11802,6 +11863,7 @@ var __objRest = (source, exclude) => {
       __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) {
@@ -11818,11 +11880,13 @@ var __objRest = (source, exclude) => {
       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({
@@ -11928,7 +11992,7 @@ var __objRest = (source, exclude) => {
         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);
@@ -14959,6 +15023,12 @@ var __objRest = (source, exclude) => {
       return "";
     }
   }
+  function useIsConnectionRestored() {
+    const [restored, setRestored] = require$$0$2.useState(false);
+    const [tonConnectUI2] = useTonConnectUI();
+    tonConnectUI2.connectionRestored.then(() => setRestored(true));
+    return restored;
+  }
   exports.THEME = THEME;
   exports.TonConnectButton = TonConnectButton$1;
   exports.TonConnectProviderNotSetError = TonConnectProviderNotSetError;
@@ -14967,6 +15037,7 @@ var __objRest = (source, exclude) => {
   exports.TonConnectUIError = TonConnectUIError;
   exports.TonConnectUIProvider = TonConnectUIProvider$1;
   exports.TonConnectUIReactError = TonConnectUIReactError;
+  exports.useIsConnectionRestored = useIsConnectionRestored;
   exports.useTonAddress = useTonAddress;
   exports.useTonConnectUI = useTonConnectUI;
   exports.useTonWallet = useTonWallet;