@tonconnect/ui 2.0.0 → 2.0.1-beta.1

package/lib/index.d.ts

@@ -264,6 +264,45 @@ declare type WalletsModalState = WalletModalOpened | WalletModalClosed;
  */
 declare type WalletsModalCloseReason = 'action-cancelled' | 'wallet-selected';
 
+/**
+ * Opened modal window state.
+ */
+declare type SingleWalletModalOpened = {
+    /**
+     * Modal window status.
+     */
+    status: 'opened';
+    /**
+     * Wallet info.
+     */
+    walletInfo: WalletInfoRemote;
+    /**
+     * Always `null` for opened modal window.
+     */
+    closeReason: null;
+};
+/**
+ * Closed modal window state.
+ */
+declare type SingleWalletModalClosed = {
+    /**
+     * Modal window status.
+     */
+    status: 'closed';
+    /**
+     * Close reason, if the modal window was closed.
+     */
+    closeReason: SingleWalletModalCloseReason | null;
+};
+/**
+ * Modal window state.
+ */
+declare type SingleWalletModalState = SingleWalletModalOpened | SingleWalletModalClosed;
+/**
+ * Modal window close reason.
+ */
+declare type SingleWalletModalCloseReason = 'action-cancelled' | 'wallet-selected';
+
 declare class TonConnectUI {
     static getWallets(): Promise<WalletInfo[]>;
     private readonly walletInfoStorage;
@@ -281,6 +320,11 @@ declare class TonConnectUI {
      * Manages the modal window state.
      */
     readonly modal: WalletsModal;
+    /**
+     * Manages the single wallet modal window state.
+     * TODO: make it public when interface will be ready for external usage.
+     */
+    private readonly singleWalletModal;
     /**
      * Manages the transaction modal window state.
      * TODO: make it public when interface will be ready for external usage.
@@ -341,6 +385,26 @@ declare class TonConnectUI {
      * Returns current modal window state.
      */
     get modalState(): WalletsModalState;
+    /**
+     * Opens the single wallet modal window, returns a promise that resolves after the modal window is opened.
+     * @experimental
+     */
+    openSingleWalletModal(wallet: string): Promise<void>;
+    /**
+     * Close the single wallet modal window.
+     * @experimental
+     */
+    closeSingleWalletModal(): void;
+    /**
+     * Subscribe to the single wallet modal window state changes, returns a function which has to be called to unsubscribe.
+     * @experimental
+     */
+    onSingleWalletModalStateChange(onChange: (state: SingleWalletModalState) => void): () => void;
+    /**
+     * Returns current single wallet modal window state.
+     * @experimental
+     */
+    get singleWalletModalState(): SingleWalletModalState;
     /**
      * @deprecated Use `tonConnectUI.openModal()` instead. Will be removed in the next major version.
      * Opens the modal window and handles a wallet connection.

package/lib/index.mjs

@@ -1951,6 +1951,20 @@ const [walletsModalState, setWalletsModalState] = createSignal({
   closeReason: null
 });
 const getWalletsModalIsOpened = createMemo(() => walletsModalState().status === "opened");
+const [singleWalletModalState, setSingleWalletModalState] = createSignal({
+  status: "closed",
+  closeReason: null
+});
+const getSingleWalletModalIsOpened = createMemo(
+  () => singleWalletModalState().status === "opened"
+);
+const getSingleWalletModalWalletInfo = createMemo(() => {
+  const state = singleWalletModalState();
+  if (state.status === "opened") {
+    return state.walletInfo;
+  }
+  return null;
+});
 let lastSelectedWalletInfoStorage = typeof window !== "undefined" ? new LastSelectedWalletInfoStorage() : void 0;
 const [lastSelectedWalletInfo, _setLastSelectedWalletInfo] = createSignal((lastSelectedWalletInfoStorage == null ? void 0 : lastSelectedWalletInfoStorage.getLastSelectedWalletInfo()) || null);
 const setLastSelectedWalletInfo = (walletInfo) => {
@@ -2795,7 +2809,7 @@ function isDevice(device) {
       return width > maxWidth.mobile;
     default:
     case "mobile":
-      return width <= maxWidth.mobile;
+      return width <= maxWidth.mobile || isOS("ios", "android");
   }
 }
 function media(device) {
@@ -8295,7 +8309,7 @@ function redirectToTelegram(universalLink, options) {
     }
   } else {
     if (isOS("ios", "android")) {
-      options.returnStrategy = "none";
+      options.returnStrategy = location.href;
       openLinkBlank(addReturnStrategy(directLinkUrl.toString(), options.returnStrategy));
     } else if (isOS("macos", "windows", "linux")) {
       options.returnStrategy = "none";
@@ -8424,9 +8438,16 @@ const DesktopConnectionModal = (props) => {
   return createComponent(DesktopConnectionModalStyled, {
     "data-tc-wallets-modal-connection-desktop": "true",
     get children() {
-      return [createComponent(StyledIconButton$2, {
-        icon: "arrow",
-        onClick: () => props.onBackClick()
+      return [createComponent(Show, {
+        get when() {
+          return !props.backDisabled;
+        },
+        get children() {
+          return createComponent(StyledIconButton$2, {
+            icon: "arrow",
+            onClick: () => props.onBackClick()
+          });
+        }
       }), createComponent(H1Styled$6, {
         get children() {
           return props.wallet.name;
@@ -8964,7 +8985,22 @@ const MobileConnectionModal = (props) => {
     universalLink: props.wallet.universalLink,
     bridgeUrl: props.wallet.bridgeUrl
   }, props.additionalRequest));
+  const onClickTelegram = () => {
+    const alwaysForceRedirect = true;
+    setLastSelectedWalletInfo(__spreadProps(__spreadValues({}, props.wallet), {
+      openMethod: "universal-link"
+    }));
+    redirectToTelegram(universalLink(), {
+      returnStrategy: appState.returnStrategy,
+      twaReturnUrl: appState.twaReturnUrl,
+      forceRedirect: alwaysForceRedirect
+    });
+  };
   const onRetry = () => {
+    const currentUniversalLink = universalLink();
+    if (isTelegramUrl(currentUniversalLink)) {
+      return onClickTelegram();
+    }
     setConnectionErrored(false);
     setLastSelectedWalletInfo(__spreadProps(__spreadValues({}, props.wallet), {
       openMethod: "universal-link"
@@ -8996,9 +9032,16 @@ const MobileConnectionModal = (props) => {
   return createComponent(MobileConnectionModalStyled, {
     "data-tc-wallets-modal-connection-mobile": "true",
     get children() {
-      return [createComponent(StyledIconButton, {
-        icon: "arrow",
-        onClick: onBack
+      return [createComponent(Show, {
+        get when() {
+          return !props.backDisabled || showQR();
+        },
+        get children() {
+          return createComponent(StyledIconButton, {
+            icon: "arrow",
+            onClick: onBack
+          });
+        }
       }), createComponent(Show, {
         get when() {
           return showQR();
@@ -10008,6 +10051,109 @@ const ActionsModal = () => {
     }
   });
 };
+const SingleWalletModal = () => {
+  const {
+    locale
+  } = useI18n()[1];
+  createEffect(() => locale(appState.language));
+  createEffect(() => {
+    if (getSingleWalletModalIsOpened()) {
+      updateIsMobile();
+    }
+  });
+  const connector = useContext(ConnectorContext);
+  const [infoTab, setInfoTab] = createSignal(false);
+  const additionalRequestLoading = () => {
+    var _a2;
+    return ((_a2 = appState.connectRequestParameters) == null ? void 0 : _a2.state) === "loading";
+  };
+  const additionalRequest = createMemo(() => {
+    var _a2;
+    if (additionalRequestLoading()) {
+      return void 0;
+    }
+    return (_a2 = appState.connectRequestParameters) == null ? void 0 : _a2.value;
+  });
+  const onClose = (closeReason) => {
+    setSingleWalletModalState({
+      status: "closed",
+      closeReason
+    });
+    setInfoTab(false);
+  };
+  const unsubscribe = connector.onStatusChange((wallet) => {
+    if (wallet) {
+      onClose("wallet-selected");
+    }
+  });
+  onCleanup(unsubscribe);
+  return createComponent(StyledModal, {
+    get opened() {
+      return getSingleWalletModalIsOpened();
+    },
+    get enableAndroidBackHandler() {
+      return appState.enableAndroidBackHandler;
+    },
+    onClose: () => onClose("action-cancelled"),
+    onClickQuestion: () => setInfoTab((v) => !v),
+    "data-tc-wallets-modal-container": "true",
+    get children() {
+      return [createComponent(Show, {
+        get when() {
+          return infoTab();
+        },
+        get children() {
+          return createComponent(InfoModal, {
+            onBackClick: () => setInfoTab(false)
+          });
+        }
+      }), createComponent(Show, {
+        get when() {
+          return !infoTab();
+        },
+        get children() {
+          return [createComponent(Show, {
+            get when() {
+              return additionalRequestLoading();
+            },
+            get children() {
+              return [createComponent(H1Styled$8, {
+                translationKey: "walletModal.loading",
+                children: "Wallets list is loading"
+              }), createComponent(LoaderContainerStyled, {
+                get children() {
+                  return createComponent(LoaderIcon, {
+                    size: "m"
+                  });
+                }
+              })];
+            }
+          }), createComponent(Show, {
+            get when() {
+              return !additionalRequestLoading();
+            },
+            get children() {
+              return createComponent(Dynamic, {
+                get component() {
+                  return isMobile() ? MobileConnectionModal : DesktopConnectionModal;
+                },
+                get wallet() {
+                  return getSingleWalletModalWalletInfo();
+                },
+                get additionalRequest() {
+                  return additionalRequest();
+                },
+                onBackClick: () => {
+                },
+                backDisabled: true
+              });
+            }
+          })];
+        }
+      })];
+    }
+  });
+};
 const App = (props) => {
   const translations = createI18nContext(i18nDictionary, appState.language);
   defineStylesRoot();
@@ -10045,7 +10191,7 @@ const App = (props) => {
                   }), createComponent(Dynamic, {
                     component: globalStylesTag,
                     get children() {
-                      return [createComponent(WalletsModal, {}), createComponent(ActionsModal, {})];
+                      return [createComponent(WalletsModal, {}), createComponent(SingleWalletModal, {}), createComponent(ActionsModal, {})];
                     }
                   })];
                 }
@@ -10066,6 +10212,17 @@ const widgetController = {
     status: "closed",
     closeReason: reason
   })),
+  openSingleWalletModal: (walletInfo) => {
+    void setTimeout(() => setSingleWalletModalState({
+      status: "opened",
+      closeReason: null,
+      walletInfo
+    }));
+  },
+  closeSingleWalletModal: (reason) => void setTimeout(() => setSingleWalletModalState({
+    status: "closed",
+    closeReason: reason
+  })),
   setAction: (action2) => void setTimeout(() => setAction(action2)),
   clearAction: () => void setTimeout(() => setAction(null)),
   getSelectedWalletInfo: () => lastSelectedWalletInfo(),
@@ -10095,7 +10252,7 @@ class WalletsModalManager {
       if (embeddedWallet) {
         return this.connectEmbeddedWallet(embeddedWallet);
       } else {
-        return this.connectExternalWallet();
+        return this.openWalletsModal();
       }
     });
   }
@@ -10120,7 +10277,7 @@ class WalletsModalManager {
       connect(additionalRequest == null ? void 0 : additionalRequest.value);
     }
   }
-  connectExternalWallet() {
+  openWalletsModal() {
     return __async(this, null, function* () {
       if (isInTMA()) {
         sendExpand();
@@ -10155,6 +10312,80 @@ class TransactionModalManager {
     };
   }
 }
+class SingleWalletModalManager {
+  constructor(options) {
+    __publicField(this, "connector");
+    __publicField(this, "setConnectRequestParametersCallback");
+    __publicField(this, "consumers", []);
+    __publicField(this, "state", singleWalletModalState());
+    this.connector = options.connector;
+    this.setConnectRequestParametersCallback = options.setConnectRequestParametersCallback;
+    createEffect(() => {
+      const state = singleWalletModalState();
+      this.state = state;
+      this.consumers.forEach((consumer) => consumer(state));
+    });
+  }
+  open(wallet) {
+    return __async(this, null, function* () {
+      const fetchedWalletsList = yield this.connector.getWallets();
+      const walletsList = applyWalletsListConfiguration(
+        fetchedWalletsList,
+        appState.walletsListConfiguration
+      );
+      const embeddedWallet = walletsList.find(isWalletInfoCurrentlyEmbedded);
+      const isEmbeddedWalletExist = !!embeddedWallet;
+      if (isEmbeddedWalletExist) {
+        return this.connectEmbeddedWallet(embeddedWallet);
+      }
+      const externalWallets = walletsList.filter(isWalletInfoRemote);
+      const externalWallet = externalWallets.find((walletInfo) => eqWalletName(walletInfo, wallet));
+      const isExternalWalletExist = !!externalWallet;
+      if (isExternalWalletExist) {
+        return this.openSingleWalletModal(externalWallet);
+      }
+      throw new TonConnectUIError(`Trying to open modal window with unknown wallet "${wallet}".`);
+    });
+  }
+  close() {
+    widgetController.closeSingleWalletModal("action-cancelled");
+  }
+  onStateChange(onChange) {
+    this.consumers.push(onChange);
+    return () => {
+      this.consumers = this.consumers.filter((consumer) => consumer !== onChange);
+    };
+  }
+  connectEmbeddedWallet(embeddedWallet) {
+    const connect = (parameters) => {
+      setLastSelectedWalletInfo(embeddedWallet);
+      this.connector.connect({ jsBridgeKey: embeddedWallet.jsBridgeKey }, parameters);
+    };
+    const additionalRequest = appState.connectRequestParameters;
+    if ((additionalRequest == null ? void 0 : additionalRequest.state) === "loading") {
+      this.setConnectRequestParametersCallback(connect);
+    } else {
+      connect(additionalRequest == null ? void 0 : additionalRequest.value);
+    }
+  }
+  openSingleWalletModal(wallet) {
+    return __async(this, null, function* () {
+      if (isInTMA()) {
+        sendExpand();
+      }
+      widgetController.openSingleWalletModal(wallet);
+      return new Promise((resolve) => {
+        const unsubscribe = this.onStateChange((state) => {
+          const { status } = state;
+          if (status === "opened") {
+            unsubscribe();
+            resolve();
+          }
+        });
+      });
+    });
+  }
+}
 class TonConnectUI {
   constructor(options) {
     __publicField(this, "walletInfoStorage", new WalletInfoStorage());
@@ -10166,6 +10397,7 @@ class TonConnectUI {
     __publicField(this, "connectRequestParametersCallback");
     __publicField(this, "connector");
     __publicField(this, "modal");
+    __publicField(this, "singleWalletModal");
     __publicField(this, "transactionModal");
     __publicField(this, "connectionRestored", Promise.resolve(false));
     if (options && "connector" in options && options.connector) {
@@ -10183,6 +10415,12 @@ class TonConnectUI {
         this.connectRequestParametersCallback = callback;
       }
     });
+    this.singleWalletModal = new SingleWalletModalManager({
+      connector: this.connector,
+      setConnectRequestParametersCallback: (callback) => {
+        this.connectRequestParametersCallback = callback;
+      }
+    });
     this.transactionModal = new TransactionModalManager({
       connector: this.connector
     });
@@ -10301,6 +10539,20 @@ class TonConnectUI {
   get modalState() {
     return this.modal.state;
   }
+  openSingleWalletModal(wallet) {
+    return __async(this, null, function* () {
+      return this.singleWalletModal.open(wallet);
+    });
+  }
+  closeSingleWalletModal() {
+    this.singleWalletModal.close();
+  }
+  onSingleWalletModalStateChange(onChange) {
+    return this.singleWalletModal.onStateChange(onChange);
+  }
+  get singleWalletModalState() {
+    return this.singleWalletModal.state;
+  }
   connectWallet() {
     return __async(this, null, function* () {
       const walletsList = yield this.getWallets();