@tonconnect/ui 2.4.0-beta.1 → 2.4.0-beta.2

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { WalletInfoInjectable, WalletInfoRemote, RequiredFeatures, VersionEvent, ConnectionEvent, ConnectionRestoringEvent, DisconnectionEvent, TransactionSigningEvent, DataSigningEvent, WalletModalOpenedEvent, SelectedWalletEvent, EventDispatcher, SdkActionEvent, ITonConnect, Wallet, OptionalTraceable, FeatureName, WalletInfo, Account, ConnectAdditionalRequest, ChainId, TonConnectError, SendTransactionRequest, SendTransactionResponse, SignDataPayload, SignDataResponse } from '@tonconnect/sdk';
+import { WalletInfoInjectable, WalletInfoRemote, RequiredFeatures, VersionEvent, ConnectionEvent, ConnectionRestoringEvent, DisconnectionEvent, TransactionSigningEvent, DataSigningEvent, WalletModalOpenedEvent, SelectedWalletEvent, EventDispatcher, SdkActionEvent, ITonConnect, WalletInfoBase, Wallet, OptionalTraceable, FeatureName, WalletInfo, Account, ConnectAdditionalRequest, ChainId, TonConnectError, SendTransactionRequest, SendTransactionResponse, SignDataPayload, SignDataResponse } from '@tonconnect/sdk';
 export * from '@tonconnect/sdk';
 import { Property } from 'csstype';
 
@@ -214,10 +214,13 @@ interface TonConnectUiCreateOptionsBase extends TonConnectUiOptions {
 }
 
 type WalletOpenMethod = 'qrcode' | 'universal-link' | 'custom-deeplink';
-type WalletInfoWithOpenMethod = WalletInfoInjectable | WalletInfoRemoteWithOpenMethod | (WalletInfoInjectable & WalletInfoRemoteWithOpenMethod);
+type WalletInfoWithOpenMethod = WalletInfoInjectable | WalletInfoRemoteWithOpenMethod | WalletInfoWalletConnect | (WalletInfoInjectable & WalletInfoRemoteWithOpenMethod);
 type WalletInfoRemoteWithOpenMethod = WalletInfoRemote & {
     openMethod?: WalletOpenMethod;
 };
+type WalletInfoWalletConnect = WalletInfoBase & {
+    type: 'wallet-connect';
+};
 type ConnectedWallet = Wallet & WalletInfoWithOpenMethod;
 
 type Loadable<T> = LoadableLoading | LoadableReady<T>;
@@ -556,4 +559,4 @@ declare class TonConnectUIError extends TonConnectError {
 }
 
 export { THEME, TonConnectUI, TonConnectUIError };
-export type { ActionConfiguration, BorderRadius, Color, ColorsSet, ConnectedWallet, Loadable, LoadableLoading, LoadableReady, Locales, PartialColorsSet, ReturnStrategy, Theme, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, UIPreferences, UIWallet, UserActionEvent, WalletInfoRemoteWithOpenMethod, WalletInfoWithOpenMethod, WalletModalClosed, WalletModalOpened, WalletOpenMethod, WalletsListConfiguration, WalletsModal, WalletsModalCloseReason, WalletsModalState };
+export type { ActionConfiguration, BorderRadius, Color, ColorsSet, ConnectedWallet, Loadable, LoadableLoading, LoadableReady, Locales, PartialColorsSet, ReturnStrategy, Theme, TonConnectUiCreateOptions, TonConnectUiCreateOptionsBase, TonConnectUiOptions, TonConnectUiOptionsWithConnector, TonConnectUiOptionsWithManifest, UIPreferences, UIWallet, UserActionEvent, WalletInfoRemoteWithOpenMethod, WalletInfoWalletConnect, WalletInfoWithOpenMethod, WalletModalClosed, WalletModalOpened, WalletOpenMethod, WalletsListConfiguration, WalletsModal, WalletsModalCloseReason, WalletsModalState };

package/lib/index.mjs

@@ -50,7 +50,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 var _a, _b, _c, _d, _e, _f, _g, _h;
-import { TonConnectError, isWalletInfoCurrentlyInjected, toUserFriendlyAddress, CHAIN, TonConnect, isTelegramUrl, decodeTelegramUrlParameters, encodeTelegramUrlParameters, WalletMissingRequiredFeaturesError, WalletWrongNetworkError, isWalletInfoRemote, checkRequiredWalletFeatures, isConnectUrl, UUIDv7, isWalletInfoCurrentlyEmbedded, createVersionInfo, createResponseVersionEvent, createRequestVersionEvent, createWalletModalOpenedEvent, createSelectedWalletEvent, createConnectionStartedEvent, createConnectionCompletedEvent, createConnectionErrorEvent, createConnectionRestoringStartedEvent, createConnectionRestoringCompletedEvent, createConnectionRestoringErrorEvent, createDisconnectionEvent, createTransactionSentForSignatureEvent, createTransactionSignedEvent, createTransactionSigningFailedEvent, createDataSentForSignatureEvent, createDataSignedEvent, createDataSigningFailedEvent, BrowserEventDispatcher, WalletNotSupportFeatureError, SessionCrypto } from "@tonconnect/sdk";
+import { TonConnectError, isWalletInfoCurrentlyInjected, toUserFriendlyAddress, CHAIN, TonConnect, isWalletConnectInitialized, isTelegramUrl, decodeTelegramUrlParameters, encodeTelegramUrlParameters, WalletMissingRequiredFeaturesError, WalletWrongNetworkError, isWalletInfoRemote, checkRequiredWalletFeatures, isConnectUrl, UUIDv7, isWalletInfoCurrentlyEmbedded, createVersionInfo, createResponseVersionEvent, createRequestVersionEvent, createWalletModalOpenedEvent, createSelectedWalletEvent, createConnectionStartedEvent, createConnectionCompletedEvent, createConnectionErrorEvent, createConnectionRestoringStartedEvent, createConnectionRestoringCompletedEvent, createConnectionRestoringErrorEvent, createDisconnectionEvent, createTransactionSentForSignatureEvent, createTransactionSignedEvent, createTransactionSigningFailedEvent, createDataSentForSignatureEvent, createDataSignedEvent, createDataSigningFailedEvent, BrowserEventDispatcher, WalletNotSupportFeatureError, SessionCrypto } from "@tonconnect/sdk";
 export * from "@tonconnect/sdk";
 import UAParser from "ua-parser-js";
 import deepmerge from "deepmerge";
@@ -6314,8 +6314,12 @@ const FourWalletsItem = (props) => {
 const AT_WALLET_APP_NAME = "telegram-wallet";
 const IMG = {
   TON: "https://raw.githubusercontent.com/ton-connect/sdk/main/assets/ton-icon-48.png",
-  TG: "https://raw.githubusercontent.com/ton-connect/sdk/main/assets/tg.png"
+  TG: "https://raw.githubusercontent.com/ton-connect/sdk/main/assets/tg.png",
+  WALLET_CONNECT: "https://raw.githubusercontent.com/ton-connect/sdk/main/assets/walletconnect-icon-288.png"
 };
+function isWalletUi(wallet) {
+  return !("type" in wallet) || wallet.type !== "wallet-connect";
+}
 const WalletLabeledItem = (props) => {
   const [t2] = useI18n();
   const walletsSecondLine = () => {
@@ -6325,12 +6329,12 @@ const WalletLabeledItem = (props) => {
     if ("isPreferred" in props.wallet && props.wallet.isPreferred) {
       return t2("walletItem.recent", {}, "Recent");
     }
-    if (isWalletInfoCurrentlyInjected(props.wallet)) {
-      return t2("walletItem.installed", {}, "Installed");
-    }
     if (props.wallet.name === "Tonkeeper") {
       return t2("walletItem.popular", {}, "Popular");
     }
+    if (isWalletUi(props.wallet) && isWalletInfoCurrentlyInjected(props.wallet)) {
+      return t2("walletItem.installed", {}, "Installed");
+    }
     return void 0;
   };
   return memo(() => memo(() => props.wallet.appName === AT_WALLET_APP_NAME)() ? createComponent(WalletItem, {
@@ -8720,9 +8724,19 @@ const ExclamationIcon = (props) => {
     return _el$9;
   })() : null);
 };
+const WALLET_CONNECT_APP_NAME = "wallet_connect";
+const WALLET_CONNECT_WALLET_NAME = "WalletConnect";
+const WALLET_CONNECT_ABOUT_URL = "https://reown.com/";
 var _tmpl$$2 = /* @__PURE__ */ template$1(`<li>`);
 const AllWalletsListModal = (props) => {
   const maxHeight = () => isMobile() ? void 0 : 510;
+  const connector = appState.connector;
+  const additionalRequest = appState.connectRequestParameters;
+  const connectWalletConnect = () => {
+    connector.connect({
+      type: "wallet-connect"
+    }, (additionalRequest == null ? void 0 : additionalRequest.state) === "ready" ? additionalRequest.value : void 0);
+  };
   const [errorSupportOpened, setErrorSupportOpened] = createSignal(null);
   let timeoutId = null;
   const onErrorClick = (wallet) => {
@@ -8762,7 +8776,7 @@ const AllWalletsListModal = (props) => {
         get children() {
           return [createComponent(WalletsUl, {
             get children() {
-              return createComponent(For, {
+              return [createComponent(For, {
                 get each() {
                   return supportedWallets();
                 },
@@ -8774,7 +8788,24 @@ const AllWalletsListModal = (props) => {
                   }));
                   return _el$;
                 })()
-              });
+              }), createComponent(Show, {
+                get when() {
+                  return memo(() => !!!isInTMA())() && isWalletConnectInitialized();
+                },
+                get children() {
+                  return createComponent(WalletLabeledItemStyled, {
+                    get wallet() {
+                      return {
+                        type: "wallet-connect",
+                        name: WALLET_CONNECT_WALLET_NAME,
+                        appName: WALLET_CONNECT_APP_NAME,
+                        imageUrl: IMG.WALLET_CONNECT
+                      };
+                    },
+                    onClick: connectWalletConnect
+                  });
+                }
+              })];
             }
           }), createComponent(Show, {
             get when() {
@@ -12740,7 +12771,7 @@ class TonConnectUITracker {
     }
   }
 }
-const tonConnectUiVersion = "2.4.0-beta.1";
+const tonConnectUiVersion = "2.4.0-beta.2";
 class TonConnectEnvironment {
   constructor() {
     this.userAgent = getUserAgent();
@@ -13572,8 +13603,18 @@ class TonConnectUI {
       if (!lastSelectedWalletInfo2) {
         return null;
       }
-      let fullLastSelectedWalletInfo;
       if (!("name" in lastSelectedWalletInfo2)) {
+        if (wallet.device.appName === WALLET_CONNECT_APP_NAME) {
+          return {
+            type: "wallet-connect",
+            name: WALLET_CONNECT_WALLET_NAME,
+            appName: WALLET_CONNECT_APP_NAME,
+            imageUrl: IMG.WALLET_CONNECT,
+            aboutUrl: WALLET_CONNECT_ABOUT_URL,
+            features: wallet.device.features,
+            platforms: []
+          };
+        }
         const walletsList = applyWalletsListConfiguration(
           yield this.walletsList,
           appState.walletsListConfiguration
@@ -13584,11 +13625,9 @@ class TonConnectUI {
             `Cannot find WalletInfo for the '${wallet.device.appName}' wallet`
           );
         }
-        fullLastSelectedWalletInfo = __spreadValues(__spreadValues({}, walletInfo), lastSelectedWalletInfo2);
-      } else {
-        fullLastSelectedWalletInfo = lastSelectedWalletInfo2;
+        return __spreadValues(__spreadValues({}, walletInfo), lastSelectedWalletInfo2);
       }
-      return fullLastSelectedWalletInfo;
+      return lastSelectedWalletInfo2;
     });
   }
   updateWalletInfo(wallet) {