@tonconnect/ui 0.0.6 → 0.0.8

package/README.md

@@ -32,8 +32,10 @@ const tonConnectUI = new TonConnectUI({
 ```
 
 See all available options:
-[TonConnectUiOptionsWithManifest](https://ton-connect.github.io/sdk/docs/interfaces/_tonconnect_ui.TonConnectUiOptionsWithManifest.html)
-[TonConnectUiOptionsWithConnector](https://ton-connect.github.io/sdk/docs/interfaces/_tonconnect_ui.TonConnectUiOptionsWithConnector.html)
+
+[TonConnectUiOptionsWithManifest](https://ton-connect.github.io/sdk/interfaces/_tonconnect_ui.TonConnectUiOptionsWithManifest.html)
+
+[TonConnectUiOptionsWithConnector](https://ton-connect.github.io/sdk/interfaces/_tonconnect_ui.TonConnectUiOptionsWithConnector.html)
 
 ## Change options if needed 
 ```ts
@@ -51,7 +53,7 @@ DON'T do this:
 tonConnectUI.uiOptions.language = 'ru'; // WRONG, WILL NOT WORK 
 ```
 
-[See all available options](https://ton-connect.github.io/sdk/docs/interfaces/_tonconnect_ui.TonConnectUiOptions.html)
+[See all available options](https://ton-connect.github.io/sdk/interfaces/_tonconnect_ui.TonConnectUiOptions.html)
 
 ## Fetch wallets list
 ```ts

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { WalletConnectionSource, ITonConnect, WalletInfo, Account, Wallet, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
+import { WalletInfoBase, WalletInfoInjected, WalletInfoRemote, ITonConnect, WalletInfo, Account, Wallet, TonConnectError, SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
 import { Property } from 'csstype';
 
 declare enum THEME {
@@ -21,24 +21,40 @@ interface ButtonConfiguration extends Partial<Themed> {
     appearance: ButtonAppearance;
 }
 
-interface UiWallet {
-    name: string;
-    iconUrl: string;
-    connectionSource: WalletConnectionSource;
-}
+declare type UIWallet = WalletInfoBase & (Omit<WalletInfoInjected, 'injected' | 'embedded'> | WalletInfoRemote);
 
 declare type WalletsListConfiguration = WalletsListConfigurationExplicit | WalletsListConfigurationImplicit;
+/**
+ * Configure whole list of wallets in the modal. Only passed wallets will be displayed.
+ */
 declare type WalletsListConfigurationExplicit = {
-    wallets: (string | UiWallet)[];
+    /**
+     * Allows to configure wallets order and add custom wallets. Must be an array of wallets names from WalletsList or custom wallets.
+     */
+    wallets: (string | UIWallet)[];
 };
+/**
+ * Add corrections to the default wallets list in the modal: exclude some wallets and add custom wallets.
+ */
 declare type WalletsListConfigurationImplicit = {
+    /**
+     * Allows to exclude wallets from wallets list in the modal by its names. Must be an array of wallet's names from WalletsList.
+     */
     excludeWallets?: string[];
-    includeWallets?: UiWallet[];
+    /**
+     * Allows to include extra wallets to the wallets list in the modal.
+     */
+    includeWallets?: UIWallet[];
+    /**
+     * Allows to specify order of the extra wallets in the wallets list in the modal. Cannot be applied if `includeWallets` is not specified.
+     * @default 'end'.
+     */
+    includeWalletsOrder?: 'start' | 'end';
 };
 
 declare type ModalSize = 'm' | 'l';
 interface WidgetConfiguration extends Partial<Themed> {
-    size: ModalSize;
+    size?: ModalSize;
     wallets?: WalletsListConfiguration;
 }
 
@@ -74,7 +90,11 @@ interface TonConnectUiOptions {
     /**
      * Configuration for the wallet connect modal and action modals.
      */
-    widgetConfiguration?: Partial<WidgetConfiguration>;
+    widgetConfiguration?: WidgetConfiguration;
+    /**
+     * @deprecated Don't use it
+     */
+    walletsListSource?: string;
 }
 
 declare type TonConnectUiCreateOptions = TonConnectUiOptionsWithConnector | TonConnectUiOptionsWithManifest;

package/lib/index.js

@@ -3241,7 +3241,8 @@ var __awaiter$3 = globalThis && globalThis.__awaiter || function(thisArg, _argum
   });
 };
 class InjectedProvider {
-  constructor(injectedWalletKey) {
+  constructor(storage, injectedWalletKey) {
+    this.injectedWalletKey = injectedWalletKey;
     this.type = "injected";
     this.unsubscribeCallback = null;
     this.listenSubscriptions = false;
@@ -3250,13 +3251,14 @@ class InjectedProvider {
     if (!InjectedProvider.isWindowContainsWallet(window2, injectedWalletKey)) {
       throw new WalletNotInjectedError();
     }
+    this.connectionStorage = new BridgeConnectionStorage(storage);
     this.injectedWallet = window2[injectedWalletKey].tonconnect;
   }
   static fromStorage(storage) {
     return __awaiter$3(this, void 0, void 0, function* () {
       const bridgeConnectionStorage = new BridgeConnectionStorage(storage);
       const connection = yield bridgeConnectionStorage.getInjectedConnection();
-      return new InjectedProvider(connection.jsBridgeKey);
+      return new InjectedProvider(storage, connection.jsBridgeKey);
     });
   }
   static isWalletInjected(injectedWalletKey) {
@@ -3271,23 +3273,8 @@ class InjectedProvider {
   static isWindowContainsWallet(window2, injectedWalletKey) {
     return !!window2 && injectedWalletKey in window2 && typeof window2[injectedWalletKey] === "object" && "tonconnect" in window2[injectedWalletKey];
   }
-  connect(message, auto = false) {
-    this.injectedWallet.connect(PROTOCOL_VERSION, message, auto).then((connectEvent) => {
-      if (connectEvent.event === "connect") {
-        this.makeSubscriptions();
-        this.listenSubscriptions = true;
-      }
-      this.listeners.forEach((listener) => listener(connectEvent));
-    }).catch((e2) => {
-      const connectEventError = {
-        event: "connect_error",
-        payload: {
-          code: 0,
-          message: e2 === null || e2 === void 0 ? void 0 : e2.toString()
-        }
-      };
-      this.listeners.forEach((listener) => listener(connectEventError));
-    });
+  connect(message) {
+    this._connect(PROTOCOL_VERSION, message);
   }
   restoreConnection() {
     return __awaiter$3(this, void 0, void 0, function* () {
@@ -3295,10 +3282,12 @@ class InjectedProvider {
         const connectEvent = yield this.injectedWallet.restoreConnection();
         if (connectEvent.event === "connect") {
           this.makeSubscriptions();
-          this.listenSubscriptions = true;
           this.listeners.forEach((listener) => listener(connectEvent));
+        } else {
+          yield this.connectionStorage.removeConnection();
         }
       } catch (e2) {
+        yield this.connectionStorage.removeConnection();
         console.error(e2);
       }
     });
@@ -3312,7 +3301,7 @@ class InjectedProvider {
   disconnect() {
     this.closeAllListeners();
     this.injectedWallet.disconnect();
-    return Promise.resolve();
+    return this.connectionStorage.removeConnection();
   }
   closeAllListeners() {
     var _a;
@@ -3329,7 +3318,30 @@ class InjectedProvider {
       return this.injectedWallet.send(Object.assign(Object.assign({}, request), { id: "0" }));
     });
   }
+  _connect(protocolVersion, message) {
+    return __awaiter$3(this, void 0, void 0, function* () {
+      try {
+        const connectEvent = yield this.injectedWallet.connect(protocolVersion, message);
+        if (connectEvent.event === "connect") {
+          yield this.updateSession();
+          this.makeSubscriptions();
+        }
+        this.listeners.forEach((listener) => listener(connectEvent));
+      } catch (e2) {
+        console.debug(e2);
+        const connectEventError = {
+          event: "connect_error",
+          payload: {
+            code: 0,
+            message: e2 === null || e2 === void 0 ? void 0 : e2.toString()
+          }
+        };
+        this.listeners.forEach((listener) => listener(connectEventError));
+      }
+    });
+  }
   makeSubscriptions() {
+    this.listenSubscriptions = true;
     this.unsubscribeCallback = this.injectedWallet.listen((e2) => {
       if (this.listenSubscriptions) {
         this.listeners.forEach((listener) => listener(e2));
@@ -3339,6 +3351,12 @@ class InjectedProvider {
       }
     });
   }
+  updateSession() {
+    return this.connectionStorage.storeConnection({
+      type: "injected",
+      jsBridgeKey: this.injectedWalletKey
+    });
+  }
 }
 InjectedProvider.window = getWindow$1();
 var __awaiter$2 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P2, generator) {
@@ -3423,9 +3441,12 @@ var __awaiter$1 = globalThis && globalThis.__awaiter || function(thisArg, _argum
   });
 };
 class WalletsListManager {
-  constructor() {
+  constructor(walletsListSource) {
     this.walletsListCache = null;
     this.walletsListSource = "https://raw.githubusercontent.com/ton-connect/wallets-list/main/wallets.json";
+    if (walletsListSource) {
+      this.walletsListSource = walletsListSource;
+    }
   }
   getWallets() {
     return __awaiter$1(this, void 0, void 0, function* () {
@@ -3439,11 +3460,11 @@ class WalletsListManager {
   getEmbeddedWallet() {
     return __awaiter$1(this, void 0, void 0, function* () {
       const walletsList = yield this.getWallets();
-      const injectedWallets = walletsList.filter(isWalletInfoInjected);
-      if (injectedWallets.length !== 1) {
+      const embeddedWallets = walletsList.filter((item) => isWalletInfoInjected(item) && item.embedded);
+      if (embeddedWallets.length !== 1) {
         return null;
       }
-      return injectedWallets[0].embedded ? injectedWallets[0] : null;
+      return embeddedWallets[0];
     });
   }
   fetchWalletsList() {
@@ -3566,6 +3587,7 @@ class TonConnect {
       manifestUrl: (options === null || options === void 0 ? void 0 : options.manifestUrl) || getWebPageManifest(),
       storage: (options === null || options === void 0 ? void 0 : options.storage) || new DefaultStorage()
     };
+    this.walletsList = new WalletsListManager(options === null || options === void 0 ? void 0 : options.walletsListSource);
     if (!this.dappSettings.manifestUrl) {
       throw new DappMetadataError("Dapp tonconnect-manifest.json must be specified if window.location.origin is undefined. See more https://github.com/ton-connect/docs/blob/main/requests-responses.md#app-manifest");
     }
@@ -3660,7 +3682,7 @@ class TonConnect {
   createProvider(wallet) {
     let provider;
     if (isWalletConnectionSourceJS(wallet)) {
-      provider = new InjectedProvider(wallet.jsBridgeKey);
+      provider = new InjectedProvider(this.dappSettings.storage, wallet.jsBridgeKey);
     } else {
       provider = new BridgeProvider(this.dappSettings.storage, wallet);
     }
@@ -3743,6 +3765,8 @@ class TonConnect {
   }
 }
 TonConnect.walletsList = new WalletsListManager();
+TonConnect.isWalletInjected = (walletJSKey) => InjectedProvider.isWalletInjected(walletJSKey);
+TonConnect.isInsideWalletBrowser = (walletJSKey) => InjectedProvider.isInsideWalletBrowser(walletJSKey);
 function toUserFriendlyAddress(hexAddress) {
   const { wc, hex } = parseHexAddress(hexAddress);
   const bounceableTag = 17;
@@ -6799,7 +6823,6 @@ const AccountButtonDropdown = (props) => {
   const connector = useContext(ConnectorContext);
   const [isCopiedShown, setIsCopiedShown] = createSignal(false);
   const onCopy = () => __async(void 0, null, function* () {
-    console.log(tonConnectUi.account.address);
     const userFriendlyAddress = toUserFriendlyAddress(tonConnectUi.account.address);
     yield copyToClipboard(userFriendlyAddress);
     setIsCopiedShown(true);
@@ -10063,8 +10086,64 @@ const LoaderContainerStyled = styled.div`
 `;
 const [appState, setAppState] = createStore({
   buttonRootId: null,
-  language: "en"
+  language: "en",
+  buttonConfiguration: {},
+  widgetConfiguration: {}
 });
+class TonConnectUIError extends TonConnectError {
+  constructor(...args) {
+    super(...args);
+    Object.setPrototypeOf(this, TonConnectUIError.prototype);
+  }
+}
+class WalletNotFoundError extends TonConnectUIError {
+  constructor(...args) {
+    super(...args);
+    Object.setPrototypeOf(this, WalletNotFoundError.prototype);
+  }
+}
+function uiWalletToWalletInfo(uiWallet) {
+  if ("jsBridgeKey" in uiWallet) {
+    return __spreadProps(__spreadValues({}, uiWallet), {
+      injected: TonConnect.isWalletInjected(uiWallet.jsBridgeKey),
+      embedded: TonConnect.isInsideWalletBrowser(uiWallet.jsBridgeKey)
+    });
+  }
+  return uiWallet;
+}
+function applyWalletsListConfiguration(walletsList, configuration) {
+  var _a;
+  if (!configuration) {
+    return walletsList;
+  }
+  if ("wallets" in configuration) {
+    return configuration.wallets.map((wallet) => {
+      if (typeof wallet === "string") {
+        const walletInfo = walletsList.find((item) => item.name === wallet);
+        if (!walletInfo) {
+          throw new WalletNotFoundError(
+            `Wallet with name === '${wallet}' wasn't found in the wallets list. Check ${wallet} correctness.`
+          );
+        }
+        return walletInfo;
+      }
+      return uiWalletToWalletInfo(wallet);
+    });
+  }
+  const filteredWalletsList = ((_a = configuration.excludeWallets) == null ? void 0 : _a.length) ? walletsList.filter(
+    (wallet) => {
+      var _a2;
+      return (_a2 = configuration.excludeWallets) == null ? void 0 : _a2.every((item) => item !== wallet.name);
+    }
+  ) : walletsList;
+  if (!configuration.includeWallets) {
+    return filteredWalletsList;
+  }
+  if (configuration.includeWalletsOrder === "start") {
+    return configuration.includeWallets.map(uiWalletToWalletInfo).concat(walletsList);
+  }
+  return walletsList.concat(configuration.includeWallets.map(uiWalletToWalletInfo));
+}
 const WalletsModal = () => {
   const {
     locale
@@ -10072,8 +10151,14 @@ const WalletsModal = () => {
   createEffect(() => locale(appState.language));
   const connector = useContext(ConnectorContext);
   const tonConnectUI = useContext(TonConnectUiContext);
-  const [walletsList] = createResource(() => tonConnectUI.getWallets());
+  const [fetchedWalletsList] = createResource(() => tonConnectUI.getWallets());
   const [selectedWalletInfo, setSelectedWalletInfo] = createSignal(null);
+  const walletsList = createMemo(() => {
+    if (fetchedWalletsList.state !== "ready") {
+      return null;
+    }
+    return applyWalletsListConfiguration(fetchedWalletsList(), appState.widgetConfiguration.wallets);
+  });
   const onClose = () => {
     setWalletsModalOpen(false);
     setSelectedWalletInfo(null);
@@ -10086,7 +10171,11 @@ const WalletsModal = () => {
     if (isWalletInfoInjected(walletInfo) && walletInfo.injected) {
       return onSelectIfInjected(walletInfo);
     }
-    setSelectedWalletInfo(walletInfo);
+    if ("bridgeUrl" in walletInfo) {
+      setSelectedWalletInfo(walletInfo);
+      return;
+    }
+    openLink(walletInfo.aboutUrl, "_blank");
   };
   const onSelectIfMobile = (walletInfo) => {
     const universalLink = connector.connect({
@@ -10116,7 +10205,7 @@ const WalletsModal = () => {
         get children() {
           return [createComponent(Show, {
             get when() {
-              return walletsList.state !== "ready";
+              return !walletsList();
             },
             get children() {
               return [createComponent(H1Styled$1, {
@@ -10132,7 +10221,7 @@ const WalletsModal = () => {
             }
           }), createComponent(Show, {
             get when() {
-              return walletsList.state === "ready";
+              return walletsList();
             },
             get children() {
               return [createComponent(Show, {
@@ -10362,12 +10451,6 @@ const widgetController = {
     tonConnectUI
   }), document.getElementById(root))
 };
-class TonConnectUIError extends TonConnectError {
-  constructor(...args) {
-    super(...args);
-    Object.setPrototypeOf(this, TonConnectUIError.prototype);
-  }
-}
 class WalletInfoStorage {
   constructor() {
     __publicField(this, "localStorage");
@@ -10532,7 +10615,10 @@ class TonConnectUI {
     if (options && "connector" in options && options.connector) {
       this.connector = options.connector;
     } else if (options && "manifestUrl" in options && options.manifestUrl) {
-      this.connector = new TonConnect({ manifestUrl: options.manifestUrl });
+      this.connector = new TonConnect({
+        manifestUrl: options.manifestUrl,
+        walletsListSource: options.walletsListSource
+      });
     } else {
       throw new TonConnectUIError(
         "You have to specify a `manifestUrl` or a `connector` in the options."
@@ -10542,7 +10628,11 @@ class TonConnectUI {
     const rootId = this.normalizeWidgetRoot(options == null ? void 0 : options.widgetRootId);
     this.subscribeToWalletChange();
     if ((options == null ? void 0 : options.restoreConnection) !== false) {
-      this.connector.restoreConnection();
+      this.connector.restoreConnection().then(() => {
+        if (!this.connector.connected) {
+          this.walletInfoStorage.removeWalletInfo();
+        }
+      });
     }
     this.uiOptions = options || {};
     setAppState({ connector: this.connector });
@@ -10581,11 +10671,11 @@ class TonConnectUI {
     }
     setAppState((state) => {
       const merged = mergeOptions(
-        {
-          language: options.language,
-          buttonConfiguration: options.buttonConfiguration,
+        __spreadValues(__spreadValues(__spreadValues({}, options.language && { language: options.language }), options.buttonConfiguration && {
+          buttonConfiguration: options.buttonConfiguration
+        }), options.widgetConfiguration && {
           widgetConfiguration: options.widgetConfiguration
-        },
+        }),
         unwrap(state)
       );
       if (options.buttonRootId !== void 0) {
@@ -10673,6 +10763,8 @@ class TonConnectUI {
           console.error(e2);
           throw new TonConnectUIError("Unhandled error:" + e2);
         }
+      } finally {
+        widgetController.clearAction();
       }
     });
   }