@tonconnect/ui-react 0.0.9 → 0.0.11

package/README.md

@@ -145,6 +145,23 @@ export const Settings = () => {
 };
 ```
 
+### useIsConnectionRestored
+Indicates current status of the connection restoring process.
+You can use it to detect when connection restoring process if finished.
+
+```tsx
+import { useIsConnectionRestored } from '@tonconnect/ui-react';
+
+export const EntrypointPage = () => {
+    const connectionRestoring = useIsConnectionRestored();
+
+    if (connectionRestoring) {
+        return <Loader>Please wait...</Loader>;
+    }
+
+    return <MainPage />;
+};
+```
 
 ## Add connect request parameters (ton_proof)
 Pass `getConnectParameters` async function to the `TonConnectUIProvider`. This callback will be called after `connectWallet` method call or `Connect Button` click before wallets list render.

package/lib/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useTonAddress } from './useTonAddress';
 export { useTonConnectUI } from './useTonConnectUI';
 export { useTonWallet } from './useTonWallet';
+export { useIsConnectionRestored } from './useIsConnectionRestored';

package/lib/hooks/useIsConnectionRestored.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Indicates current status of the connection restoring process.
+ */
+export declare function useIsConnectionRestored(): boolean;

package/lib/index.js

@@ -6277,9 +6277,7 @@ function Dynamic(props) {
   });
 }
 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 = "";
@@ -6800,8 +6798,7 @@ const defaultLightColorsSet = {
   },
   text: {
     primary: "#0F0F0F",
-    secondary: "#7A8999",
-    subhead: "#6A7785"
+    secondary: "#7A8999"
   }
 };
 const defaultDarkColorsSet = {
@@ -6826,8 +6823,7 @@ const defaultDarkColorsSet = {
   },
   text: {
     primary: "#E5E5EA",
-    secondary: "#7D7D85",
-    subhead: "#8C8C93"
+    secondary: "#7D7D85"
   }
 };
 var isMergeableObject = function isMergeableObject2(value) {
@@ -7072,7 +7068,7 @@ const ButtonStyled$2 = styled.button`
     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;
@@ -7082,11 +7078,11 @@ const ButtonStyled$2 = styled.button`
     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) => {
@@ -7097,11 +7093,17 @@ const Button = (props) => {
     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;
     }
@@ -7889,38 +7891,42 @@ const TonIcon = (props) => {
     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$;
   })();
@@ -8196,7 +8202,7 @@ const Notification = (props) => {
     }
   });
 };
-const LoaderIconStyled$2 = styled(LoaderIcon)`
+const LoaderIconStyled$3 = styled(LoaderIcon)`
     align-self: center;
     min-width: 22px;
     min-height: 22px;
@@ -8210,7 +8216,7 @@ const ConfirmOperationNotification = (props) => {
       return props.class;
     },
     get icon() {
-      return createComponent(LoaderIconStyled$2, {});
+      return createComponent(LoaderIconStyled$3, {});
     },
     children: "Confirm operation in your wallet"
   });
@@ -8375,7 +8381,25 @@ const AccountButtonStyled = styled(Button)`
     }
 `;
 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;
@@ -9143,6 +9167,7 @@ const AccountButton = () => {
   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();
@@ -9158,6 +9183,7 @@ const AccountButton = () => {
     }
     return "";
   };
+  tonConnectUI2.connectionRestored.then(() => setRestoringProcess(false));
   const unsubscribe = connector.onStatusChange((wallet) => {
     if (!wallet) {
       setIsOpened(false);
@@ -9185,123 +9211,144 @@ const AccountButton = () => {
   });
   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$;
+              })];
             }
-          })];
+          });
         }
-      });
+      })];
     }
   })];
 };
@@ -11134,7 +11181,12 @@ const QrCodeModal = (props) => {
       }), 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",
@@ -11154,9 +11206,12 @@ const QrCodeModal = (props) => {
             },
             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",
@@ -11461,14 +11516,20 @@ const WalletsModal = () => {
     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;
     }
@@ -11799,6 +11860,7 @@ class TonConnectUI {
     __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) {
@@ -11815,11 +11877,13 @@ class TonConnectUI {
     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({
@@ -11893,13 +11957,15 @@ class TonConnectUI {
   }
   connectWallet() {
     return __async(this, null, function* () {
+      var _a;
       const walletsList = yield this.getWallets();
       const embeddedWallet = walletsList.find(
         (wallet) => "embedded" in wallet && wallet.embedded
       );
       if (embeddedWallet) {
+        const additionalRequest = yield (_a = appState.getConnectParameters) == null ? void 0 : _a.call(appState);
         setLastSelectedWalletInfo(embeddedWallet);
-        this.connector.connect({ jsBridgeKey: embeddedWallet.jsBridgeKey });
+        this.connector.connect({ jsBridgeKey: embeddedWallet.jsBridgeKey }, additionalRequest);
       } else {
         widgetController.openWalletsModal();
       }
@@ -11925,7 +11991,7 @@ class TonConnectUI {
       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);
@@ -14956,6 +15022,12 @@ function useTonAddress(userFriendly = true) {
     return "";
   }
 }
+function useIsConnectionRestored() {
+  const [restored, setRestored] = useState(false);
+  const [tonConnectUI2] = useTonConnectUI();
+  tonConnectUI2.connectionRestored.then(() => setRestored(true));
+  return restored;
+}
 export {
   THEME,
   TonConnectButton$1 as TonConnectButton,
@@ -14965,6 +15037,7 @@ export {
   TonConnectUIError,
   TonConnectUIProvider$1 as TonConnectUIProvider,
   TonConnectUIReactError,
+  useIsConnectionRestored,
   useTonAddress,
   useTonConnectUI,
   useTonWallet