@tonconnect/ui 2.0.0-beta.6 → 2.0.0-beta.8

package/lib/index.d.ts

@@ -131,6 +131,7 @@ interface ActionConfiguration {
      */
     twaReturnUrl?: `${string}://${string}`;
     /**
+     * @deprecated Shouldn't be used anymore, SDK will automatically detect return strategy for TWA-TWA connections.
      * Specifies whether the method should redirect user to the connected wallet
      * @default 'ios'
      */
@@ -389,6 +390,7 @@ declare class TonConnectUI {
      * @options.transaction - Transaction to send.
      * @options.ignoreErrors - If true, ignores errors during waiting, waiting continues until a valid transaction is sent. Default is false.
      * @options.abortSignal - Optional AbortSignal for external cancellation. Throws TonConnectUIError if aborted.
+     * @param onRequestSent (optional) will be called after the transaction is sent to the wallet.
      * @throws TonConnectUIError if waiting is aborted or no valid transaction response is received and ignoreErrors is false.
      * @internal
      */

package/lib/index.mjs

@@ -1749,12 +1749,167 @@ class TonConnectUIError extends TonConnectError {
     Object.setPrototypeOf(this, TonConnectUIError.prototype);
   }
 }
+function logError(...args) {
+  {
+    try {
+      console.error("[TON_CONNECT_UI]", ...args);
+    } catch (e2) {
+    }
+  }
+}
+function logWarning(...args) {
+  {
+    try {
+      console.warn("[TON_CONNECT_UI]", ...args);
+    } catch (e2) {
+    }
+  }
+}
+let initParams = {};
+try {
+  let locationHash = location.hash.toString();
+  initParams = urlParseHashParams(locationHash);
+} catch (e2) {
+}
+let tmaPlatform = "unknown";
+if (initParams.tgWebAppPlatform) {
+  tmaPlatform = initParams.tgWebAppPlatform;
+}
+let webAppVersion = "6.0";
+if (initParams.tgWebAppVersion) {
+  webAppVersion = initParams.tgWebAppVersion;
+}
+function isTmaPlatform(...platforms) {
+  return platforms.includes(tmaPlatform);
+}
+function isInTMA() {
+  var _a2;
+  return tmaPlatform !== "unknown" || !!((_a2 = getWindow$1()) == null ? void 0 : _a2.TelegramWebviewProxy);
+}
+function sendExpand() {
+  postEvent("web_app_expand", {});
+}
+function sendOpenTelegramLink(link) {
+  const url = new URL(link);
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    throw new TonConnectUIError(`Url protocol is not supported: ${url}`);
+  }
+  if (url.hostname !== "t.me") {
+    throw new TonConnectUIError(`Url host is not supported: ${url}`);
+  }
+  const pathFull = url.pathname + url.search;
+  if (isIframe() || versionAtLeast("6.1")) {
+    postEvent("web_app_open_tg_link", { path_full: pathFull });
+  } else {
+    window.open("https://t.me" + pathFull, "_blank", "noreferrer noopener");
+  }
+}
+function isIframe() {
+  try {
+    return window.parent != null && window !== window.parent;
+  } catch (e2) {
+    return false;
+  }
+}
+function postEvent(eventType, eventData) {
+  try {
+    if (window.TelegramWebviewProxy !== void 0) {
+      window.TelegramWebviewProxy.postEvent(eventType, JSON.stringify(eventData));
+    } else if (window.external && "notify" in window.external) {
+      window.external.notify(JSON.stringify({ eventType, eventData }));
+    } else if (isIframe()) {
+      const trustedTarget = "*";
+      const message = JSON.stringify({ eventType, eventData });
+      window.parent.postMessage(message, trustedTarget);
+    }
+    throw new TonConnectUIError(`Can't post event to TMA`);
+  } catch (e2) {
+    logError(`Can't post event to parent window: ${e2}`);
+  }
+}
+function urlParseHashParams(locationHash) {
+  locationHash = locationHash.replace(/^#/, "");
+  let params = {};
+  if (!locationHash.length) {
+    return params;
+  }
+  if (locationHash.indexOf("=") < 0 && locationHash.indexOf("?") < 0) {
+    params._path = urlSafeDecode(locationHash);
+    return params;
+  }
+  let qIndex = locationHash.indexOf("?");
+  if (qIndex >= 0) {
+    let pathParam = locationHash.substr(0, qIndex);
+    params._path = urlSafeDecode(pathParam);
+    locationHash = locationHash.substr(qIndex + 1);
+  }
+  let query_params = urlParseQueryString(locationHash);
+  for (let k in query_params) {
+    params[k] = query_params[k];
+  }
+  return params;
+}
+function urlSafeDecode(urlencoded) {
+  try {
+    urlencoded = urlencoded.replace(/\+/g, "%20");
+    return decodeURIComponent(urlencoded);
+  } catch (e2) {
+    return urlencoded;
+  }
+}
+function urlParseQueryString(queryString) {
+  let params = {};
+  if (!queryString.length) {
+    return params;
+  }
+  let queryStringParams = queryString.split("&");
+  let i2, param, paramName, paramValue;
+  for (i2 = 0; i2 < queryStringParams.length; i2++) {
+    param = queryStringParams[i2].split("=");
+    paramName = urlSafeDecode(param[0]);
+    paramValue = param[1] == null ? null : urlSafeDecode(param[1]);
+    params[paramName] = paramValue;
+  }
+  return params;
+}
+function versionCompare(v1, v2) {
+  if (typeof v1 !== "string")
+    v1 = "";
+  if (typeof v2 !== "string")
+    v2 = "";
+  let v1List = v1.replace(/^\s+|\s+$/g, "").split(".");
+  let v2List = v2.replace(/^\s+|\s+$/g, "").split(".");
+  let a2, i2, p1, p2;
+  a2 = Math.max(v1List.length, v2List.length);
+  for (i2 = 0; i2 < a2; i2++) {
+    p1 = parseInt(v1List[i2]) || 0;
+    p2 = parseInt(v2List[i2]) || 0;
+    if (p1 === p2)
+      continue;
+    if (p1 > p2)
+      return 1;
+    return -1;
+  }
+  return 0;
+}
+function versionAtLeast(ver) {
+  return versionCompare(webAppVersion, ver) >= 0;
+}
 function openLink(href, target = "_self") {
-  return window.open(href, target, "noreferrer noopener");
+  window.open(href, target, "noopener noreferrer");
 }
 function openLinkBlank(href) {
   openLink(href, "_blank");
 }
+function openIframeLink(href, fallback) {
+  const iframe = document.createElement("iframe");
+  iframe.style.display = "none";
+  iframe.src = href;
+  document.body.appendChild(iframe);
+  const fallbackTimeout = setTimeout(() => fallback(), 1e3);
+  window.addEventListener("blur", () => clearTimeout(fallbackTimeout), { once: true });
+  setTimeout(() => document.body.removeChild(iframe), 1e3);
+}
 function getSystemTheme() {
   if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
     return THEME.LIGHT;
@@ -1776,7 +1931,7 @@ function addReturnStrategy(url, strategy) {
   if (typeof strategy === "string") {
     returnStrategy = strategy;
   } else {
-    returnStrategy = isInTWA() ? strategy.twaReturnUrl || strategy.returnStrategy : "none";
+    returnStrategy = isInTMA() ? strategy.twaReturnUrl || strategy.returnStrategy : "none";
   }
   const newUrl = addQueryParameter(url, "ret", returnStrategy);
   if (!isTelegramUrl(url)) {
@@ -1806,9 +1961,17 @@ function defineStylesRoot() {
   customElements.define(globalStylesTag, class TcRootElement extends HTMLElement {
   });
 }
+function createMacrotask(callback) {
+  return __async(this, null, function* () {
+    yield new Promise((resolve) => requestAnimationFrame(resolve));
+    callback();
+  });
+}
 function preloadImages(images) {
   if (document.readyState !== "complete") {
-    window.addEventListener("load", () => preloadImages(images), { once: true });
+    window.addEventListener("load", () => createMacrotask(() => preloadImages(images)), {
+      once: true
+    });
   } else {
     images.forEach((img) => {
       const node = new window.Image();
@@ -1883,14 +2046,67 @@ function getUserAgent() {
     browser
   };
 }
+function isOS(...os) {
+  return os.includes(getUserAgent().os);
+}
 function redirectToTelegram(universalLink, options) {
+  options = __spreadValues({}, options);
+  const directLink = convertToDirectLink(universalLink);
+  const directLinkUrl = new URL(directLink);
+  if (!directLinkUrl.searchParams.has("startapp")) {
+    directLinkUrl.searchParams.append("startapp", "tonconnect");
+  }
+  if (isInTMA()) {
+    if (isTmaPlatform("ios", "android")) {
+      options.returnStrategy = "none";
+      options.twaReturnUrl = void 0;
+      sendOpenTelegramLink(addReturnStrategy(directLinkUrl.toString(), options));
+    } else if (isTmaPlatform("macos", "tdesktop")) {
+      if (!options.twaReturnUrl) {
+        throw new TonConnectUIError("`twaReturnUrl` is required for this platform");
+      }
+      sendOpenTelegramLink(addReturnStrategy(directLinkUrl.toString(), options));
+    } else if (isTmaPlatform("weba")) {
+      sendOpenTelegramLink(addReturnStrategy(directLinkUrl.toString(), options));
+    } else if (isTmaPlatform("web")) {
+      options.returnStrategy = "none";
+      options.twaReturnUrl = void 0;
+      sendOpenTelegramLink(addReturnStrategy(directLinkUrl.toString(), options));
+    } else {
+      openLinkBlank(addReturnStrategy(directLinkUrl.toString(), options));
+    }
+  } else {
+    if (isOS("ios", "android")) {
+      options.returnStrategy = "back";
+      openLinkBlank(addReturnStrategy(directLinkUrl.toString(), options.returnStrategy));
+    } else if (isOS("macos", "windows", "linux")) {
+      options.returnStrategy = "none";
+      options.twaReturnUrl = void 0;
+      if (options.forceRedirect) {
+        openLinkBlank(addReturnStrategy(directLinkUrl.toString(), options));
+      } else {
+        const link = addReturnStrategy(directLinkUrl.toString(), options);
+        const deepLink = convertToDeepLink(link);
+        openIframeLink(deepLink, () => openLinkBlank(link));
+      }
+    } else {
+      openLinkBlank(addReturnStrategy(directLinkUrl.toString(), options));
+    }
+  }
+}
+function convertToDirectLink(universalLink) {
   const url = new URL(universalLink);
-  url.searchParams.append("startattach", "tonconnect");
-  openLinkBlank(addReturnStrategy(url.toString(), options));
+  if (url.searchParams.has("attach")) {
+    url.searchParams.delete("attach");
+    url.pathname += "/start";
+  }
+  return url.toString();
 }
-function isInTWA() {
-  var _a2;
-  return !!((_a2 = getWindow$1()) == null ? void 0 : _a2.TelegramWebviewProxy);
+function convertToDeepLink(directLink) {
+  const parsed = new URL(directLink);
+  const [, domain, appname] = parsed.pathname.split("/");
+  const startapp = parsed.searchParams.get("startapp");
+  return `tg://resolve?domain=${domain}&appname=${appname}&startapp=${startapp}`;
 }
 class WalletInfoStorage {
   constructor() {
@@ -2009,8 +2225,8 @@ const walletModal$1 = {
   wallets: "Wallets",
   mobileUniversalModal: {
     connectYourWallet: "Connect your wallet",
-    openWalletOnTelegramOrSelect: "Open Wallet on Telegram or\xA0select your\xA0wallet\xA0to\xA0connect",
-    openWalletOnTelegram: "Open Wallet on Telegram",
+    openWalletOnTelegramOrSelect: "Open Wallet in Telegram or select your wallet to connect",
+    openWalletOnTelegram: "Open Wallet in Telegram",
     openLink: "Open Link",
     scan: "Scan with your mobile wallet"
   },
@@ -2031,7 +2247,7 @@ const walletModal$1 = {
     dontHaveExtension: "Seems you don't have installed {{ name }}\xA0browser\xA0extension",
     getWallet: "Get {{ name }}",
     continueOnDesktop: "Continue in\xA0{{ name }} on desktop\u2026",
-    openWalletOnTelegram: "Open Wallet on Telegram on desktop",
+    openWalletOnTelegram: "Open Wallet in Telegram on desktop",
     connectionDeclined: "Connection declined"
   },
   infoModal: {
@@ -2620,6 +2836,9 @@ function isDevice(device) {
   if (!window2) {
     return device === "desktop";
   }
+  if (isTmaPlatform("weba")) {
+    return true;
+  }
   const width = window2.innerWidth;
   switch (device) {
     case "desktop":
@@ -3073,7 +3292,7 @@ function androidBackHandler$1(_, config) {
   });
   onCleanup(() => {
     window.removeEventListener("popstate", popstateHandler);
-    new Promise((resolve) => requestAnimationFrame(resolve)).then(() => {
+    createMacrotask(() => {
       var _a2;
       if (((_a2 = window.history.state) == null ? void 0 : _a2[ROUTE_STATE_KEY]) === true) {
         window.history.back();
@@ -3292,14 +3511,6 @@ const ModalFooterStyled = styled.div`
 const QuestionButtonStyled = styled(IconButton)`
     background-color: ${(props) => rgba(props.theme.colors.icon.secondary, 0.12)};
 `;
-function logWarning(...args) {
-  {
-    try {
-      console.warn("[TON_CONNECT_UI]", ...args);
-    } catch (e2) {
-    }
-  }
-}
 class AnimationTimelineNoop {
   constructor() {
     __publicField(this, "currentTime", 0);
@@ -5350,11 +5561,16 @@ var qrcode$1 = { exports: {} };
 })(qrcode$1);
 const qrcode = qrcode$1.exports;
 function copyToClipboard(text) {
-  if (navigator == null ? void 0 : navigator.clipboard) {
-    return navigator.clipboard.writeText(text);
-  }
-  fallbackCopyTextToClipboard(text);
-  return Promise.resolve();
+  return __async(this, null, function* () {
+    try {
+      if (!(navigator == null ? void 0 : navigator.clipboard)) {
+        throw new TonConnectUIError("Clipboard API not available");
+      }
+      return yield navigator.clipboard.writeText(text);
+    } catch (e2) {
+    }
+    fallbackCopyTextToClipboard(text);
+  });
 }
 function fallbackCopyTextToClipboard(text) {
   const textArea = document.createElement("textarea");
@@ -8096,6 +8312,7 @@ const DesktopConnectionModal = (props) => {
   const [mode, setMode] = createSignal("mobile");
   const [connectionErrored, setConnectionErrored] = createSignal(false);
   const [universalLink, setUniversalLink] = createSignal();
+  const [firstClick, setFirstClick] = createSignal(true);
   const connector = useContext(ConnectorContext);
   const unsubscribe = connector.onStatusChange(() => {
   }, () => {
@@ -8137,13 +8354,16 @@ const DesktopConnectionModal = (props) => {
     openLinkBlank(addReturnStrategy(universalLink(), appState.returnStrategy));
   };
   const onClickTelegram = () => {
+    const forceRedirect = !firstClick();
+    setFirstClick(false);
     setLastSelectedWalletInfo(__spreadProps(__spreadValues({}, props.wallet), {
       openMethod: "universal-link"
     }));
-    openLinkBlank(addReturnStrategy(universalLink(), {
+    redirectToTelegram(universalLink(), {
       returnStrategy: appState.returnStrategy,
-      twaReturnUrl: appState.twaReturnUrl
-    }));
+      twaReturnUrl: appState.twaReturnUrl,
+      forceRedirect
+    });
   };
   const onClickExtension = () => {
     setConnectionErrored(false);
@@ -8409,7 +8629,7 @@ const DesktopConnectionModal = (props) => {
             get children() {
               return createComponent(Translation, {
                 translationKey: "walletModal.desktopConnectionModal.openWalletOnTelegram",
-                children: "Open Wallet on Telegram on desktop"
+                children: "Open Wallet in Telegram on desktop"
               });
             }
           });
@@ -9046,6 +9266,7 @@ const MobileUniversalQR = (props) => {
 const _tmpl$$1 = /* @__PURE__ */ template$1(`<li></li>`), _tmpl$2 = /* @__PURE__ */ template$1(`<div data-tc-wallets-modal-universal-mobile="true"></div>`);
 const MobileUniversalModal = (props) => {
   const [showQR, setShowQR] = createSignal(false);
+  const [firstClick, setFirstClick] = createSignal(true);
   const connector = appState.connector;
   const walletsList = () => props.walletsList.filter((w) => supportsMobile(w) && w.appName !== AT_WALLET_APP_NAME);
   const shouldShowMoreButton = () => walletsList().length > 7;
@@ -9077,10 +9298,13 @@ const MobileUniversalModal = (props) => {
       bridgeUrl: atWallet.bridgeUrl,
       universalLink: atWallet.universalLink
     }, props.additionalRequest);
-    openLinkBlank(addReturnStrategy(walletLink, {
+    const forceRedirect = !firstClick();
+    setFirstClick(false);
+    redirectToTelegram(walletLink, {
       returnStrategy: appState.returnStrategy,
-      twaReturnUrl: appState.twaReturnUrl
-    }));
+      twaReturnUrl: appState.twaReturnUrl,
+      forceRedirect
+    });
   };
   const onOpenQR = () => {
     setShowQR(true);
@@ -9126,7 +9350,7 @@ const MobileUniversalModal = (props) => {
           children: "Connect your wallet"
         }), createComponent(H2Styled$2, {
           translationKey: "walletModal.mobileUniversalModal.openWalletOnTelegramOrSelect",
-          children: "Open Wallet on Telegram or select your wallet to connect"
+          children: "Open Wallet in Telegram or select your wallet to connect"
         }), createComponent(TelegramButtonStyled, {
           get leftIcon() {
             return createComponent(AtWalletIcon, {});
@@ -9143,7 +9367,7 @@ const MobileUniversalModal = (props) => {
           get children() {
             return createComponent(Translation, {
               translationKey: "walletModal.mobileUniversalModal.openWalletOnTelegram",
-              children: "Open Wallet on Telegram"
+              children: "Open Wallet in Telegram"
             });
           }
         }), createComponent(UlStyled, {
@@ -9580,17 +9804,21 @@ const ButtonStyled = styled(Button)`
 const ActionModal = (props) => {
   const dataAttrs = useDataAttributes(props);
   const tonConnectUI = useContext(TonConnectUiContext);
+  const [firstClick, setFirstClick] = createSignal(true);
   let universalLink;
-  if ((tonConnectUI == null ? void 0 : tonConnectUI.wallet) && "universalLink" in tonConnectUI.wallet && (tonConnectUI.wallet.openMethod === "universal-link" || isTelegramUrl(tonConnectUI.wallet.universalLink) && isInTWA())) {
+  if ((tonConnectUI == null ? void 0 : tonConnectUI.wallet) && "universalLink" in tonConnectUI.wallet && (tonConnectUI.wallet.openMethod === "universal-link" || isTelegramUrl(tonConnectUI.wallet.universalLink) && isInTMA())) {
     universalLink = tonConnectUI.wallet.universalLink;
   }
   const onOpenWallet = () => {
     const currentAction = action();
     const returnStrategy = "returnStrategy" in currentAction ? currentAction.returnStrategy : appState.returnStrategy;
     if (isTelegramUrl(universalLink)) {
+      const forceRedirect = !firstClick();
+      setFirstClick(false);
       redirectToTelegram(universalLink, {
         returnStrategy,
-        twaReturnUrl: "twaReturnUrl" in currentAction ? currentAction.twaReturnUrl : appState.twaReturnUrl
+        twaReturnUrl: "twaReturnUrl" in currentAction ? currentAction.twaReturnUrl : appState.twaReturnUrl,
+        forceRedirect
       });
     } else {
       openLinkBlank(addReturnStrategy(universalLink, returnStrategy));
@@ -9855,6 +10083,9 @@ class WalletsModalManager {
   }
   connectExternalWallet() {
     return __async(this, null, function* () {
+      if (isInTMA()) {
+        sendExpand();
+      }
       widgetController.openWalletsModal();
       return new Promise((resolve) => {
         const unsubscribe = this.onStateChange((state) => {
@@ -10053,21 +10284,30 @@ class TonConnectUI {
       if (!this.connected) {
         throw new TonConnectUIError("Connect wallet to send a transaction.");
       }
-      const { notifications: notifications2, modals, returnStrategy, twaReturnUrl, skipRedirectToWallet } = this.getModalsAndNotificationsConfiguration(options);
-      const userOSIsIos = getUserAgent().os === "ios";
-      const shouldSkipRedirectToWallet = skipRedirectToWallet === "ios" && userOSIsIos || skipRedirectToWallet === "always";
-      if (this.walletInfo && "universalLink" in this.walletInfo && this.walletInfo.openMethod === "universal-link" && !shouldSkipRedirectToWallet) {
-        if (isTelegramUrl(this.walletInfo.universalLink)) {
-          redirectToTelegram(this.walletInfo.universalLink, { returnStrategy, twaReturnUrl });
-        } else {
-          openLinkBlank(addReturnStrategy(this.walletInfo.universalLink, returnStrategy));
-        }
+      if (isInTMA()) {
+        sendExpand();
       }
+      const { notifications: notifications2, modals, returnStrategy, twaReturnUrl, skipRedirectToWallet } = this.getModalsAndNotificationsConfiguration(options);
       widgetController.setAction({
         name: "confirm-transaction",
         showNotification: notifications2.includes("before"),
         openModal: modals.includes("before")
       });
+      const onRequestSent = () => {
+        const userOSIsIos = getUserAgent().os === "ios";
+        const shouldSkipRedirectToWallet = skipRedirectToWallet === "ios" && userOSIsIos || skipRedirectToWallet === "always";
+        if (this.walletInfo && "universalLink" in this.walletInfo && this.walletInfo.openMethod === "universal-link" && !shouldSkipRedirectToWallet) {
+          if (isTelegramUrl(this.walletInfo.universalLink)) {
+            redirectToTelegram(this.walletInfo.universalLink, {
+              returnStrategy,
+              twaReturnUrl: twaReturnUrl || appState.twaReturnUrl,
+              forceRedirect: false
+            });
+          } else {
+            openLinkBlank(addReturnStrategy(this.walletInfo.universalLink, returnStrategy));
+          }
+        }
+      };
       const abortController = new AbortController();
       const unsubscribe = this.onTransactionModalStateChange((action2) => {
         if (action2 == null ? void 0 : action2.openModal) {
@@ -10079,10 +10319,13 @@ class TonConnectUI {
         }
       });
       try {
-        const result = yield this.waitForSendTransaction({
-          transaction: tx,
-          abortSignal: abortController.signal
-        });
+        const result = yield this.waitForSendTransaction(
+          {
+            transaction: tx,
+            abortSignal: abortController.signal
+          },
+          onRequestSent
+        );
         widgetController.setAction({
           name: "transaction-sent",
           showNotification: notifications2.includes("success"),
@@ -10182,7 +10425,7 @@ class TonConnectUI {
       });
     });
   }
-  waitForSendTransaction(options) {
+  waitForSendTransaction(options, onRequestSent) {
     return __async(this, null, function* () {
       return new Promise((resolve, reject) => {
         const { transaction, abortSignal } = options;
@@ -10195,7 +10438,7 @@ class TonConnectUI {
         const onErrorsHandler = (reason) => {
           reject(reason);
         };
-        this.connector.sendTransaction(transaction).then((result) => onTransactionHandler(result)).catch((reason) => onErrorsHandler(reason));
+        this.connector.sendTransaction(transaction, onRequestSent).then((result) => onTransactionHandler(result)).catch((reason) => onErrorsHandler(reason));
         abortSignal.addEventListener("abort", () => {
           reject(new TonConnectUIError("Transaction was not sent"));
         });
@@ -10315,7 +10558,10 @@ class TonConnectUI {
     }
     const returnStrategy = (options == null ? void 0 : options.returnStrategy) || ((_d = this.actionsConfiguration) == null ? void 0 : _d.returnStrategy) || "back";
     const twaReturnUrl = (options == null ? void 0 : options.twaReturnUrl) || ((_e = this.actionsConfiguration) == null ? void 0 : _e.twaReturnUrl);
-    const skipRedirectToWallet = (options == null ? void 0 : options.skipRedirectToWallet) || ((_f = this.actionsConfiguration) == null ? void 0 : _f.skipRedirectToWallet) || "ios";
+    let skipRedirectToWallet = (options == null ? void 0 : options.skipRedirectToWallet) || ((_f = this.actionsConfiguration) == null ? void 0 : _f.skipRedirectToWallet) || "ios";
+    if (isInTMA()) {
+      skipRedirectToWallet = "never";
+    }
     return {
       notifications: notifications2,
       modals,