@tonconnect/ui 2.0.0-beta.4 → 2.0.0-beta.5

package/lib/index.d.ts

@@ -160,6 +160,11 @@ interface TonConnectUiOptions {
      * Configuration for action-period (e.g. sendTransaction) UI elements: modals and notifications and wallet behaviour (return strategy).
      */
     actionsConfiguration?: ActionConfiguration;
+    /**
+     * Specifies whether the Android back button should be used to close modals and notifications on Android devices.
+     * @default true
+     */
+    enableAndroidBackHandler?: boolean;
 }
 
 declare type TonConnectUiCreateOptions = TonConnectUiOptionsWithConnector | TonConnectUiOptionsWithManifest;

package/lib/{index.js → index.mjs}

@@ -1706,6 +1706,43 @@ function rgba(color, opacity) {
 function toPx(value) {
   return value.toString() + "px";
 }
+const _InMemoryStorage = class {
+  constructor() {
+    __publicField(this, "storage", {});
+  }
+  static getInstance() {
+    if (!_InMemoryStorage.instance) {
+      _InMemoryStorage.instance = new _InMemoryStorage();
+    }
+    return _InMemoryStorage.instance;
+  }
+  get length() {
+    return Object.keys(this.storage).length;
+  }
+  clear() {
+    this.storage = {};
+  }
+  getItem(key) {
+    var _a2;
+    return (_a2 = this.storage[key]) != null ? _a2 : null;
+  }
+  key(index) {
+    var _a2;
+    const keys = Object.keys(this.storage);
+    if (index < 0 || index >= keys.length) {
+      return null;
+    }
+    return (_a2 = keys[index]) != null ? _a2 : null;
+  }
+  removeItem(key) {
+    delete this.storage[key];
+  }
+  setItem(key, value) {
+    this.storage[key] = value;
+  }
+};
+let InMemoryStorage = _InMemoryStorage;
+__publicField(InMemoryStorage, "instance");
 class TonConnectUIError extends TonConnectError {
   constructor(...args) {
     super(...args);
@@ -1770,16 +1807,13 @@ function defineStylesRoot() {
   });
 }
 function preloadImages(images) {
-  images.forEach((img) => {
-    const node = new window.Image();
-    node.src = img;
-  });
-}
-function checkLocalStorageExists() {
-  if (typeof localStorage === "undefined") {
-    throw new TonConnectUIError(
-      "window.localStorage is undefined. localStorage is required for TonConnectUI"
-    );
+  if (document.readyState !== "complete") {
+    window.addEventListener("load", () => preloadImages(images), { once: true });
+  } else {
+    images.forEach((img) => {
+      const node = new window.Image();
+      node.src = img;
+    });
   }
 }
 function getWindow$1() {
@@ -1788,6 +1822,27 @@ function getWindow$1() {
   }
   return void 0;
 }
+function tryGetLocalStorage() {
+  if (isLocalStorageAvailable()) {
+    return localStorage;
+  }
+  if (isNodeJs()) {
+    throw new TonConnectUIError(
+      "`localStorage` is unavailable, but it is required for TonConnect. For more details, see https://github.com/ton-connect/sdk/tree/main/packages/sdk#init-connector"
+    );
+  }
+  return InMemoryStorage.getInstance();
+}
+function isLocalStorageAvailable() {
+  try {
+    return typeof localStorage !== "undefined";
+  } catch (e2) {
+    return false;
+  }
+}
+function isNodeJs() {
+  return typeof process !== "undefined" && process.versions != null && process.versions.node != null;
+}
 function getUserAgent() {
   var _a2, _b;
   const results = new UAParser().getResult();
@@ -1841,8 +1896,7 @@ class WalletInfoStorage {
   constructor() {
     __publicField(this, "localStorage");
     __publicField(this, "storageKey", "ton-connect-ui_wallet-info");
-    checkLocalStorageExists();
-    this.localStorage = localStorage;
+    this.localStorage = tryGetLocalStorage();
   }
   setWalletInfo(walletInfo) {
     this.localStorage.setItem(this.storageKey, JSON.stringify(walletInfo));
@@ -1862,8 +1916,7 @@ class PreferredWalletStorage {
   constructor() {
     __publicField(this, "localStorage");
     __publicField(this, "storageKey", "ton-connect-ui_preferred-wallet");
-    checkLocalStorageExists();
-    this.localStorage = localStorage;
+    this.localStorage = tryGetLocalStorage();
   }
   setPreferredWalletAppName(name) {
     this.localStorage.setItem(this.storageKey, name);
@@ -1876,8 +1929,7 @@ class LastSelectedWalletInfoStorage {
   constructor() {
     __publicField(this, "localStorage");
     __publicField(this, "storageKey", "ton-connect-ui_last-selected-wallet-info");
-    checkLocalStorageExists();
-    this.localStorage = localStorage;
+    this.localStorage = tryGetLocalStorage();
   }
   setLastSelectedWalletInfo(walletInfo) {
     this.localStorage.setItem(this.storageKey, JSON.stringify(walletInfo));
@@ -2999,30 +3051,40 @@ function escPressed(_, accessor) {
   document.body.addEventListener("keydown", onKeyPress);
   onCleanup(() => document.body.removeEventListener("keydown", onKeyPress));
 }
-function androidBackHandler$1(_, accessor) {
+function androidBackHandler$1(_, config) {
+  const {
+    isEnabled,
+    onClose
+  } = config();
+  if (!isEnabled) {
+    return;
+  }
   const userOSIsAndroid = getUserAgent().os === "android";
   if (!userOSIsAndroid) {
     return;
   }
-  let historyEntryAdded = true;
-  window.history.pushState({}, "");
+  window.history.pushState(ROUTE_STATE, "");
   const popstateHandler = (event) => {
-    var _a2;
-    historyEntryAdded = false;
     event.preventDefault();
-    (_a2 = accessor()) == null ? void 0 : _a2();
+    onClose();
   };
   window.addEventListener("popstate", popstateHandler, {
     once: true
   });
   onCleanup(() => {
     window.removeEventListener("popstate", popstateHandler);
-    if (historyEntryAdded) {
-      historyEntryAdded = false;
-      window.history.back();
-    }
+    new Promise((resolve) => requestAnimationFrame(resolve)).then(() => {
+      var _a2;
+      if (((_a2 = window.history.state) == null ? void 0 : _a2[ROUTE_STATE_KEY]) === true) {
+        window.history.back();
+      }
+    });
   });
 }
+const ROUTE_STATE_KEY = "androidBackHandler";
+const ROUTE_STATE = {
+  [ROUTE_STATE_KEY]: true
+};
 const _tmpl$$v = /* @__PURE__ */ template$1(`<svg><path fill-rule="evenodd" clip-rule="evenodd" d="M10.2122 14.3407C10.5384 14.0854 10.5959 13.614 10.3406 13.2878L6.20237 8.00003L10.3406 2.71227C10.5959 2.38607 10.5384 1.91469 10.2122 1.6594C9.88604 1.40412 9.41465 1.46161 9.15937 1.7878L4.65937 7.5378C4.44688 7.80932 4.44688 8.19074 4.65937 8.46226L9.15937 14.2123C9.41465 14.5385 9.88604 14.5959 10.2122 14.3407Z"></path></svg>`, 4, true);
 const rotationDegrees = {
   left: 0,
@@ -3230,6 +3292,77 @@ 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);
+  }
+}
+const _AnimationNoop = class {
+  constructor() {
+    __publicField(this, "currentTime", 0);
+    __publicField(this, "playbackRate", 1);
+    __publicField(this, "startTime", null);
+    __publicField(this, "timeline", new AnimationTimelineNoop());
+    __publicField(this, "finished", Promise.resolve(this));
+    __publicField(this, "effect", null);
+    __publicField(this, "id", "");
+    __publicField(this, "pending", false);
+    __publicField(this, "playState", "finished");
+    __publicField(this, "replaceState", "active");
+    __publicField(this, "ready", Promise.resolve(this));
+    __publicField(this, "oncancel", null);
+    __publicField(this, "onfinish", null);
+    __publicField(this, "onremove", null);
+  }
+  static create() {
+    if (!_AnimationNoop._instance) {
+      logWarning(
+        "Animation is not supported in this environment: please consider using the `web-animations-js` polyfill to provide a fallback implementation of the Web Animations API."
+      );
+      _AnimationNoop._instance = new _AnimationNoop();
+    }
+    return _AnimationNoop._instance;
+  }
+  cancel() {
+  }
+  finish() {
+  }
+  pause() {
+  }
+  play() {
+  }
+  reverse() {
+  }
+  addEventListener(_type, _listener, _options) {
+  }
+  dispatchEvent(_event) {
+    return false;
+  }
+  removeEventListener(_type, _callback, _options) {
+  }
+  updatePlaybackRate(_playbackRate) {
+  }
+  commitStyles() {
+  }
+  persist() {
+  }
+};
+let AnimationNoop = _AnimationNoop;
+__publicField(AnimationNoop, "_instance", null);
+function animate(element, keyframes, options) {
+  if ("animate" in element) {
+    return element.animate(keyframes, options);
+  }
+  return AnimationNoop.create();
+}
 const _tmpl$$t = /* @__PURE__ */ template$1(`<div></div>`);
 const clickOutside = clickOutside$1;
 const keyPressed = escPressed;
@@ -3247,7 +3380,7 @@ const Modal = (props) => {
   return createComponent(Transition, {
     onBeforeEnter: (el) => {
       const duration = isDevice("mobile") ? 200 : 100;
-      el.animate([{
+      animate(el, [{
         opacity: 0
       }, {
         opacity: 1
@@ -3255,7 +3388,7 @@ const Modal = (props) => {
         duration
       });
       if (isDevice("mobile")) {
-        el.firstElementChild.animate([{
+        animate(el.firstElementChild, [{
           transform: "translateY(390px)"
         }, {
           transform: "translateY(0)"
@@ -3266,7 +3399,7 @@ const Modal = (props) => {
     },
     onExit: (el, done) => {
       const duration = isDevice("mobile") ? 200 : 100;
-      const backgroundAnimation = el.animate([{
+      const backgroundAnimation = animate(el, [{
         opacity: 1
       }, {
         opacity: 0
@@ -3274,7 +3407,7 @@ const Modal = (props) => {
         duration
       });
       if (isDevice("mobile")) {
-        const contentAnimation = el.firstElementChild.animate([{
+        const contentAnimation = animate(el.firstElementChild, [{
           transform: "translateY(0)"
         }, {
           transform: "translateY(390px)"
@@ -3297,7 +3430,10 @@ const Modal = (props) => {
           }, dataAttrs, {
             get children() {
               const _el$ = _tmpl$$t.cloneNode(true);
-              use(androidBackHandler, _el$, () => () => props.onClose());
+              use(androidBackHandler, _el$, () => ({
+                isEnabled: props.enableAndroidBackHandler,
+                onClose: () => props.onClose()
+              }));
               use(keyPressed, _el$, () => () => props.onClose());
               use(clickOutside, _el$, () => () => props.onClose());
               insert(_el$, createComponent(ModalBodyStyled, {
@@ -5315,7 +5451,7 @@ const QRCode = (props) => {
         }
       }), createComponent(Transition, {
         onBeforeEnter: (el) => {
-          el.animate([{
+          animate(el, [{
             opacity: 0,
             transform: "translate(-50%, 44px)"
           }, {
@@ -5327,7 +5463,7 @@ const QRCode = (props) => {
           });
         },
         onExit: (el, done) => {
-          el.animate([{
+          animate(el, [{
             opacity: 1,
             transform: "translate(-50%, 0)"
           }, {
@@ -6223,8 +6359,10 @@ if (getWindow$1()) {
   window.addEventListener("resize", () => setWindowHeight(window.innerHeight));
 }
 const [isMobile, setIsMobile] = createSignal(isDevice("mobile"));
+const updateIsMobile = () => setIsMobile(isDevice("mobile"));
 if (getWindow$1()) {
-  window.addEventListener("resize", () => setIsMobile(isDevice("mobile")));
+  window.addEventListener("resize", () => updateIsMobile());
+  window.addEventListener("load", () => updateIsMobile(), { once: true });
 }
 const ScrollContainer = (props) => {
   const [scrolled, setScrolled] = createSignal(false);
@@ -6624,7 +6762,7 @@ const Notifications = (props) => {
     const _el$ = _tmpl$$4.cloneNode(true);
     insert(_el$, createComponent(TransitionGroup, {
       onBeforeEnter: (el) => {
-        el.animate([{
+        animate(el, [{
           opacity: 0,
           transform: "translateY(0)"
         }, {
@@ -6635,7 +6773,7 @@ const Notifications = (props) => {
         });
       },
       onExit: (el, done) => {
-        const a2 = el.animate([{
+        const a2 = animate(el, [{
           opacity: 1,
           transform: "translateY(-8px)"
         }, {
@@ -7559,7 +7697,7 @@ const AccountButton = () => {
             },
             get children() {
               return createComponent(AccountButtonStyled, {
-                onClick: () => tonConnectUI.connectWallet(),
+                onClick: () => tonConnectUI.openModal(),
                 "data-tc-connect-button": "true",
                 scale: "s",
                 get children() {
@@ -7612,7 +7750,7 @@ const AccountButton = () => {
                       _el$._$owner = getOwner();
                       insert(_el$, createComponent(Transition, {
                         onBeforeEnter: (el) => {
-                          el.animate([{
+                          animate(el, [{
                             opacity: 0,
                             transform: "translateY(-8px)"
                           }, {
@@ -7623,7 +7761,7 @@ const AccountButton = () => {
                           });
                         },
                         onExit: (el, done) => {
-                          const a2 = el.animate([{
+                          const a2 = animate(el, [{
                             opacity: 1,
                             transform: "translateY(0)"
                           }, {
@@ -7723,7 +7861,8 @@ const [appState, setAppState] = createStore({
   language: "en",
   returnStrategy: "back",
   twaReturnUrl: void 0,
-  walletsListConfiguration: {}
+  walletsListConfiguration: {},
+  enableAndroidBackHandler: true
 });
 function uniq(array) {
   return [...new Set(array)];
@@ -8913,7 +9052,7 @@ const MobileUniversalModal = (props) => {
   const walletsBridges = () => [...new Set(props.walletsList.filter(isWalletInfoRemote).map((item) => item.bridgeUrl)).values()].map((bridgeUrl) => ({
     bridgeUrl
   }));
-  const universalLink = createMemo(() => connector.connect(walletsBridges(), props.additionalRequest));
+  const getUniversalLink = () => connector.connect(walletsBridges(), props.additionalRequest);
   setLastSelectedWalletInfo({
     openMethod: "universal-link"
   });
@@ -8922,12 +9061,12 @@ const MobileUniversalModal = (props) => {
     if (isCopiedShown() !== void 0) {
       clearTimeout(isCopiedShown());
     }
-    yield copyToClipboard(universalLink());
+    yield copyToClipboard(getUniversalLink());
     const timeoutId = setTimeout(() => setIsCopiedShown(void 0), 1500);
     setIsCopiedShown(timeoutId);
   });
   const onSelectUniversal = () => {
-    openLinkBlank(addReturnStrategy(universalLink(), appState.returnStrategy));
+    openLinkBlank(addReturnStrategy(getUniversalLink(), appState.returnStrategy));
   };
   const onSelectTelegram = () => {
     const atWallet = props.walletsList.find((wallet) => wallet.appName === AT_WALLET_APP_NAME);
@@ -8967,7 +9106,7 @@ const MobileUniversalModal = (props) => {
           onClick: onCloseQR
         }), createComponent(MobileUniversalQR, {
           get universalLink() {
-            return universalLink();
+            return getUniversalLink();
           }
         })];
       }
@@ -9251,6 +9390,11 @@ const WalletsModal = () => {
     locale
   } = useI18n()[1];
   createEffect(() => locale(appState.language));
+  createEffect(() => {
+    if (getWalletsModalIsOpened()) {
+      updateIsMobile();
+    }
+  });
   const connector = useContext(ConnectorContext);
   const tonConnectUI = useContext(TonConnectUiContext);
   const [fetchedWalletsList] = createResource(() => tonConnectUI.getWallets());
@@ -9308,6 +9452,9 @@ const WalletsModal = () => {
     get opened() {
       return getWalletsModalIsOpened();
     },
+    get enableAndroidBackHandler() {
+      return appState.enableAndroidBackHandler;
+    },
     onClose: () => onClose("action-cancelled"),
     onClickQuestion: () => setInfoTab((v) => !v),
     "data-tc-wallets-modal-container": "true",
@@ -9553,6 +9700,9 @@ const ActionsModal = () => {
       var _a2;
       return createMemo(() => action() !== null)() && ((_a2 = action()) == null ? void 0 : _a2.openModal) === true;
     },
+    get enableAndroidBackHandler() {
+      return appState.enableAndroidBackHandler;
+    },
     onClose: () => setAction(null),
     "data-tc-actions-modal-container": "true",
     get children() {
@@ -9839,6 +9989,9 @@ class TonConnectUI {
       if (options.buttonRootId !== void 0) {
         merged.buttonRootId = options.buttonRootId;
       }
+      if (options.enableAndroidBackHandler !== void 0) {
+        merged.enableAndroidBackHandler = options.enableAndroidBackHandler;
+      }
       return merged;
     });
   }
@@ -10177,4 +10330,4 @@ export {
   TonConnectUI,
   TonConnectUIError
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map