@tonconnect/ui 2.0.0 → 2.0.1-beta.1

package/lib/index.cjs

@@ -1956,6 +1956,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) => {
@@ -2800,7 +2814,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) {
@@ -8300,7 +8314,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";
@@ -8429,9 +8443,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;
@@ -8969,7 +8990,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 (sdk.isTelegramUrl(currentUniversalLink)) {
+      return onClickTelegram();
+    }
     setConnectionErrored(false);
     setLastSelectedWalletInfo(__spreadProps(__spreadValues({}, props.wallet), {
       openMethod: "universal-link"
@@ -9001,9 +9037,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();
@@ -10013,6 +10056,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();
@@ -10050,7 +10196,7 @@ const App = (props) => {
                   }), createComponent(Dynamic, {
                     component: globalStylesTag,
                     get children() {
-                      return [createComponent(WalletsModal, {}), createComponent(ActionsModal, {})];
+                      return [createComponent(WalletsModal, {}), createComponent(SingleWalletModal, {}), createComponent(ActionsModal, {})];
                     }
                   })];
                 }
@@ -10071,6 +10217,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(),
@@ -10100,7 +10257,7 @@ class WalletsModalManager {
       if (embeddedWallet) {
         return this.connectEmbeddedWallet(embeddedWallet);
       } else {
-        return this.connectExternalWallet();
+        return this.openWalletsModal();
       }
     });
   }
@@ -10125,7 +10282,7 @@ class WalletsModalManager {
       connect(additionalRequest == null ? void 0 : additionalRequest.value);
     }
   }
-  connectExternalWallet() {
+  openWalletsModal() {
     return __async(this, null, function* () {
       if (isInTMA()) {
         sendExpand();
@@ -10160,6 +10317,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(sdk.isWalletInfoCurrentlyEmbedded);
+      const isEmbeddedWalletExist = !!embeddedWallet;
+      if (isEmbeddedWalletExist) {
+        return this.connectEmbeddedWallet(embeddedWallet);
+      }
+      const externalWallets = walletsList.filter(sdk.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());
@@ -10171,6 +10402,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) {
@@ -10188,6 +10420,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
     });
@@ -10306,6 +10544,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();