@tonconnect/ui 2.3.0-beta.2 → 2.3.0-beta.4

package/lib/index.cjs

@@ -1754,6 +1754,9 @@ function disableScroll() {
   document.body.classList.add(disableScrollClass);
 }
 function enableScroll() {
+  if (!document.body.classList.contains(disableScrollClass)) {
+    return;
+  }
   document.body.classList.remove(disableScrollClass);
   document.documentElement.scrollTo({ top: -parseFloat(getComputedStyle(document.body).top) });
   document.body.style.top = "auto";
@@ -5680,7 +5683,6 @@ const WalletItemStyled = styled.button`
     border: none;
     background-color: unset;
     padding: 8px 4px;
-    width: 100%;
     min-width: 78px;
     display: flex;
     flex-direction: column;
@@ -8943,16 +8945,19 @@ function redirectToTelegram(universalLink, options) {
   }
   if (isInTelegramBrowser()) {
     options.returnStrategy = "back";
-    const linkWitStrategy = addReturnStrategy(directLinkUrl.toString(), options.returnStrategy);
-    openLinkBlank(linkWitStrategy);
+    const linkWithStrategy = addReturnStrategy(
+      directLinkUrl.toString(),
+      options.returnStrategy
+    );
+    openLinkBlank(linkWithStrategy);
   } else if (isInTMA()) {
     if (isTmaPlatform("ios", "android", "macos", "tdesktop", "web")) {
       options.returnStrategy = "back";
-      const linkWitStrategy = addReturnStrategy(
+      const linkWithStrategy = addReturnStrategy(
         directLinkUrl.toString(),
         options.returnStrategy
       );
-      sendOpenTelegramLink(linkWitStrategy);
+      sendOpenTelegramLink(linkWithStrategy);
     } else if (isTmaPlatform("weba")) {
       sendOpenTelegramLink(addReturnStrategy(directLinkUrl.toString(), options));
     } else {
@@ -9065,8 +9070,8 @@ function redirectToWallet(universalLink, deepLink, options, setOpenMethod) {
       openLink(addReturnStrategy(universalLink, options.returnStrategy), "_self");
     } else {
       setOpenMethod("universal-link");
-      const linkWitStrategy = addReturnStrategy(universalLink, options.returnStrategy);
-      openLinkBlank(linkWitStrategy);
+      const linkWithStrategy = addReturnStrategy(universalLink, options.returnStrategy);
+      openLinkBlank(linkWithStrategy);
     }
   } else if (isInTMA()) {
     if (isTmaPlatform("ios", "android")) {
@@ -9074,26 +9079,26 @@ function redirectToWallet(universalLink, deepLink, options, setOpenMethod) {
         options.returnStrategy = "tg://resolve";
       }
       setOpenMethod("universal-link");
-      const linkWitStrategy = addReturnStrategy(universalLink, options.returnStrategy);
-      sendOpenTelegramLink(linkWitStrategy, () => {
+      const linkWithStrategy = addReturnStrategy(universalLink, options.returnStrategy);
+      sendOpenTelegramLink(linkWithStrategy, () => {
         setOpenMethod("universal-link");
-        openLinkBlank(linkWitStrategy);
+        openLinkBlank(linkWithStrategy);
       });
     } else if (isTmaPlatform("macos", "tdesktop")) {
       if (options.returnStrategy === "back") {
         options.returnStrategy = "tg://resolve";
       }
-      const linkWitStrategy = addReturnStrategy(universalLink, options.returnStrategy);
+      const linkWithStrategy = addReturnStrategy(universalLink, options.returnStrategy);
       const useDeepLink = !!deepLink && !options.forceRedirect;
       if (useDeepLink) {
         setOpenMethod("custom-deeplink");
-        openDeeplinkWithFallback(toDeeplink(linkWitStrategy, deepLink), () => {
+        openDeeplinkWithFallback(toDeeplink(linkWithStrategy, deepLink), () => {
           setOpenMethod("universal-link");
-          openLinkBlank(linkWitStrategy);
+          openLinkBlank(linkWithStrategy);
         });
       } else {
         setOpenMethod("universal-link");
-        openLinkBlank(linkWitStrategy);
+        openLinkBlank(linkWithStrategy);
       }
     } else if (isTmaPlatform("weba")) {
       if (options.returnStrategy === "back") {
@@ -9109,17 +9114,17 @@ function redirectToWallet(universalLink, deepLink, options, setOpenMethod) {
           options.returnStrategy = location.href;
         }
       }
-      const linkWitStrategy = addReturnStrategy(universalLink, options.returnStrategy);
+      const linkWithStrategy = addReturnStrategy(universalLink, options.returnStrategy);
       const useDeepLink = !!deepLink && !options.forceRedirect;
       if (useDeepLink) {
         setOpenMethod("custom-deeplink");
-        openDeeplinkWithFallback(toDeeplink(linkWitStrategy, deepLink), () => {
+        openDeeplinkWithFallback(toDeeplink(linkWithStrategy, deepLink), () => {
           setOpenMethod("universal-link");
-          openLinkBlank(linkWitStrategy);
+          openLinkBlank(linkWithStrategy);
         });
       } else {
         setOpenMethod("universal-link");
-        openLinkBlank(linkWitStrategy);
+        openLinkBlank(linkWithStrategy);
       }
     } else if (isTmaPlatform("web")) {
       if (options.returnStrategy === "back") {
@@ -9135,22 +9140,22 @@ function redirectToWallet(universalLink, deepLink, options, setOpenMethod) {
           options.returnStrategy = location.href;
         }
       }
-      const linkWitStrategy = addReturnStrategy(universalLink, options.returnStrategy);
+      const linkWithStrategy = addReturnStrategy(universalLink, options.returnStrategy);
       const useDeepLink = !!deepLink && !options.forceRedirect;
       if (useDeepLink) {
         setOpenMethod("custom-deeplink");
-        openDeeplinkWithFallback(toDeeplink(linkWitStrategy, deepLink), () => {
+        openDeeplinkWithFallback(toDeeplink(linkWithStrategy, deepLink), () => {
           setOpenMethod("universal-link");
-          openLinkBlank(linkWitStrategy);
+          openLinkBlank(linkWithStrategy);
         });
       } else {
         setOpenMethod("universal-link");
-        openLinkBlank(linkWitStrategy);
+        openLinkBlank(linkWithStrategy);
       }
     } else {
       setOpenMethod("universal-link");
-      const linkWitStrategy = addReturnStrategy(universalLink, options.returnStrategy);
-      openLinkBlank(linkWitStrategy);
+      const linkWithStrategy = addReturnStrategy(universalLink, options.returnStrategy);
+      openLinkBlank(linkWithStrategy);
     }
   } else {
     if (isOS("ios")) {
@@ -9223,17 +9228,17 @@ function redirectToWallet(universalLink, deepLink, options, setOpenMethod) {
           options.returnStrategy = "none";
         }
       }
-      const linkWitStrategy = addReturnStrategy(universalLink, options.returnStrategy);
+      const linkWithStrategy = addReturnStrategy(universalLink, options.returnStrategy);
       const useDeepLink = !!deepLink && !options.forceRedirect;
       if (useDeepLink) {
         setOpenMethod("custom-deeplink");
-        openDeeplinkWithFallback(toDeeplink(linkWitStrategy, deepLink), () => {
+        openDeeplinkWithFallback(toDeeplink(linkWithStrategy, deepLink), () => {
           setOpenMethod("universal-link");
-          openLinkBlank(linkWitStrategy);
+          openLinkBlank(linkWithStrategy);
         });
       } else {
         setOpenMethod("universal-link");
-        openLinkBlank(linkWitStrategy);
+        openLinkBlank(linkWithStrategy);
       }
     } else {
       setOpenMethod("universal-link");
@@ -9241,6 +9246,23 @@ function redirectToWallet(universalLink, deepLink, options, setOpenMethod) {
     }
   }
 }
+function addSessionIdToUniversalLink(universalLink, sessionId) {
+  if (!sessionId) {
+    return universalLink;
+  }
+  if (!sdk.isTelegramUrl(universalLink)) {
+    const newUrl2 = addQueryParameter(universalLink, "id", sessionId);
+    return newUrl2;
+  }
+  const directLink = convertToTGDirectLink(universalLink);
+  const directLinkUrl = new URL(directLink);
+  if (!directLinkUrl.searchParams.has("startapp")) {
+    directLinkUrl.searchParams.append("startapp", "tonconnect");
+  }
+  const newUrl = addQueryParameter(directLinkUrl.toString(), "id", sessionId);
+  const lastParam = newUrl.slice(newUrl.lastIndexOf("&") + 1);
+  return newUrl.slice(0, newUrl.lastIndexOf("&")) + "-v__2-" + sdk.encodeTelegramUrlParameters(lastParam);
+}
 function addQueryParameter(url, key, value) {
   const parsed = new URL(url);
   parsed.searchParams.append(key, value);
@@ -11308,6 +11330,7 @@ const WalletsModal = () => {
   createEffect(() => {
     if (getWalletsModalIsOpened()) {
       updateIsMobile();
+      refetchWallets();
     } else {
       setSelectedWalletInfo(null);
       setSelectedTab("universal");
@@ -11316,7 +11339,11 @@ const WalletsModal = () => {
   });
   const connector = useContext(ConnectorContext);
   const tonConnectUI = useContext(TonConnectUiContext);
-  const [fetchedWalletsList] = createResource(() => tonConnectUI.getWallets());
+  const [fetchedWalletsList, {
+    refetch: refetchWallets
+  }] = createResource(() => {
+    return tonConnectUI.getWallets();
+  });
   const [selectedWalletInfo, setSelectedWalletInfo] = createSignal(null);
   const [selectedWalletError, setSelectedWalletError] = createSignal(null);
   const [selectedTab, setSelectedTab] = createSignal("universal");
@@ -11599,14 +11626,15 @@ const ActionModal = (props) => {
     const returnStrategy = "returnStrategy" in currentAction ? currentAction.returnStrategy : appState.returnStrategy;
     const forceRedirect = !firstClick();
     setFirstClick(false);
+    const linkWithSessionId = addSessionIdToUniversalLink(universalLink, currentAction.sessionId);
     if (sdk.isTelegramUrl(universalLink)) {
-      redirectToTelegram(universalLink, {
+      redirectToTelegram(linkWithSessionId, {
         returnStrategy,
         twaReturnUrl: "twaReturnUrl" in currentAction ? currentAction.twaReturnUrl : appState.twaReturnUrl,
         forceRedirect
       });
     } else {
-      redirectToWallet(universalLink, deepLink, {
+      redirectToWallet(linkWithSessionId, deepLink, {
         returnStrategy,
         forceRedirect
       }, () => {
@@ -12469,7 +12497,7 @@ class TonConnectUITracker {
     }
   }
 }
-const tonConnectUiVersion = "2.3.0-beta.2";
+const tonConnectUiVersion = "2.3.0-beta.4";
 class TonConnectUI {
   // TODO: `actionsConfiguration.twaReturnUrl` is used only in `connectWallet` method, but it's not used in `sendTransaction` method, NEED TO FIX IT
   constructor(options) {
@@ -12756,11 +12784,13 @@ class TonConnectUI {
         sendExpand();
       }
       const { notifications: notifications2, modals, returnStrategy, twaReturnUrl } = this.getModalsAndNotificationsConfiguration(options);
+      const sessionId = yield this.getSessionId();
       widgetController.setAction({
         name: "confirm-transaction",
         showNotification: notifications2.includes("before"),
         openModal: modals.includes("before"),
-        sent: false
+        sent: false,
+        sessionId: sessionId || void 0
       });
       const abortController = new AbortController();
       const onRequestSent = () => {
@@ -12772,25 +12802,28 @@ class TonConnectUI {
           name: "confirm-transaction",
           showNotification: notifications2.includes("before"),
           openModal: modals.includes("before"),
-          sent: true
+          sent: true,
+          sessionId: sessionId || void 0
         });
         this.redirectAfterRequestSent({
           returnStrategy,
-          twaReturnUrl
+          twaReturnUrl,
+          sessionId: sessionId || void 0
         });
         let firstClick = true;
-        const redirectToWallet2 = () => {
+        const redirectToWallet2 = () => __async(this, null, function* () {
           if (abortController.signal.aborted) {
             return;
           }
           const forceRedirect = !firstClick;
           firstClick = false;
-          this.redirectAfterRequestSent({
+          yield this.redirectAfterRequestSent({
             returnStrategy,
             twaReturnUrl,
-            forceRedirect
+            forceRedirect,
+            sessionId: sessionId || void 0
           });
-        };
+        });
         (_a2 = options == null ? void 0 : options.onRequestSent) == null ? void 0 : _a2.call(options, redirectToWallet2);
       };
       const unsubscribe = this.onTransactionModalStateChange((action2) => {
@@ -12854,11 +12887,13 @@ class TonConnectUI {
         sendExpand();
       }
       const { notifications: notifications2, modals, returnStrategy, twaReturnUrl } = this.getModalsAndNotificationsConfiguration();
+      const sessionId = yield this.getSessionId();
       widgetController.setAction({
         name: "confirm-sign-data",
         showNotification: notifications2.includes("before"),
         openModal: modals.includes("before"),
-        signed: false
+        signed: false,
+        sessionId: sessionId || void 0
       });
       const abortController = new AbortController();
       const onRequestSent = () => {
@@ -12870,11 +12905,13 @@ class TonConnectUI {
           name: "confirm-sign-data",
           showNotification: notifications2.includes("before"),
           openModal: modals.includes("before"),
-          signed: true
+          signed: true,
+          sessionId: sessionId || void 0
         });
         this.redirectAfterRequestSent({
           returnStrategy,
-          twaReturnUrl
+          twaReturnUrl,
+          sessionId: sessionId || void 0
         });
         let firstClick = true;
         const redirectToWallet2 = () => {
@@ -12886,7 +12923,8 @@ class TonConnectUI {
           this.redirectAfterRequestSent({
             returnStrategy,
             twaReturnUrl,
-            forceRedirect
+            forceRedirect,
+            sessionId: sessionId || void 0
           });
         };
         (_a2 = options == null ? void 0 : options.onRequestSent) == null ? void 0 : _a2.call(options, redirectToWallet2);
@@ -12937,21 +12975,58 @@ class TonConnectUI {
       }
     });
   }
+  /**
+   * Gets the current session ID if available.
+   * @returns session ID string or null if not available.
+   */
+  getSessionId() {
+    return __async(this, null, function* () {
+      var _a2, _b2;
+      if (!this.connected) {
+        return null;
+      }
+      try {
+        const storage = (_a2 = this.connector.dappSettings) == null ? void 0 : _a2.storage;
+        if (storage) {
+          const stored = yield storage.getItem("ton-connect-storage_bridge-connection");
+          if (stored) {
+            const connection = JSON.parse(stored);
+            if (connection.type === "http" && connection.sessionCrypto) {
+              const sessionCrypto = new sdk.SessionCrypto(connection.sessionCrypto);
+              const sessionId = sessionCrypto.sessionId;
+              return sessionId;
+            } else if (connection.type === "http" && ((_b2 = connection.session) == null ? void 0 : _b2.sessionKeyPair)) {
+              const sessionCrypto = new sdk.SessionCrypto(connection.session.sessionKeyPair);
+              const sessionId = sessionCrypto.sessionId;
+              return sessionId;
+            }
+          }
+        }
+      } catch (e2) {
+      }
+      return null;
+    });
+  }
   redirectAfterRequestSent({
     returnStrategy,
     twaReturnUrl,
-    forceRedirect
+    forceRedirect,
+    sessionId
   }) {
     if (this.walletInfo && "universalLink" in this.walletInfo && (this.walletInfo.openMethod === "universal-link" || this.walletInfo.openMethod === "custom-deeplink")) {
+      const linkWithSessionId = addSessionIdToUniversalLink(
+        this.walletInfo.universalLink,
+        sessionId
+      );
       if (sdk.isTelegramUrl(this.walletInfo.universalLink)) {
-        redirectToTelegram(this.walletInfo.universalLink, {
+        redirectToTelegram(linkWithSessionId, {
           returnStrategy,
           twaReturnUrl: twaReturnUrl || appState.twaReturnUrl,
           forceRedirect: forceRedirect || false
         });
       } else {
         redirectToWallet(
-          this.walletInfo.universalLink,
+          linkWithSessionId,
           this.walletInfo.deepLink,
           {
             returnStrategy,