@tonconnect/ui-react 0.0.4 → 0.0.5

package/lib/components/TonConnectUIProvider.d.ts

@@ -45,6 +45,10 @@ export interface TonConnectUIProviderPropsBase {
      * @default `div#tc-widget-root`.
      */
     widgetRootId: string;
+    /**
+     * @deprecated Don't use it
+     */
+    walletsListSource: string;
 }
 declare const _default: import("react").NamedExoticComponent<TonConnectUIProviderProps>;
 export default _default;

package/lib/index.js

@@ -4218,7 +4218,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;
@@ -4227,13 +4228,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) {
@@ -4248,23 +4250,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* () {
@@ -4272,10 +4259,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);
       }
     });
@@ -4289,7 +4278,7 @@ class InjectedProvider {
   disconnect() {
     this.closeAllListeners();
     this.injectedWallet.disconnect();
-    return Promise.resolve();
+    return this.connectionStorage.removeConnection();
   }
   closeAllListeners() {
     var _a;
@@ -4306,7 +4295,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));
@@ -4316,6 +4328,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) {
@@ -4400,9 +4418,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* () {
@@ -4416,11 +4437,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() {
@@ -4543,6 +4564,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");
     }
@@ -4637,7 +4659,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);
     }
@@ -4720,6 +4742,8 @@ class TonConnect {
   }
 }
 TonConnect.walletsList = new WalletsListManager();
+TonConnect.isWalletInjected = (walletJSKey) => InjectedProvider.isWalletInjected(walletJSKey);
+TonConnect.isInsideWalletBrowser = (walletJSKey) => InjectedProvider.isInsideWalletBrowser(walletJSKey);
 function toUserFriendlyAddress$1(hexAddress) {
   const { wc, hex } = parseHexAddress$1(hexAddress);
   const bounceableTag = 17;
@@ -11039,8 +11063,64 @@ const LoaderContainerStyled = styled.div`
 `;
 const [appState, setAppState] = createStore({
   buttonRootId: null,
-  language: "en"
+  language: "en",
+  buttonConfiguration: {},
+  widgetConfiguration: {}
 });
+class TonConnectUIError extends TonConnectError$1 {
+  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
@@ -11048,8 +11128,14 @@ const WalletsModal = () => {
   createEffect(() => locale(appState.language));
   const connector = useContext(ConnectorContext);
   const tonConnectUI2 = useContext(TonConnectUiContext);
-  const [walletsList] = createResource(() => tonConnectUI2.getWallets());
+  const [fetchedWalletsList] = createResource(() => tonConnectUI2.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);
@@ -11062,7 +11148,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({
@@ -11092,7 +11182,7 @@ const WalletsModal = () => {
         get children() {
           return [createComponent(Show, {
             get when() {
-              return walletsList.state !== "ready";
+              return !walletsList();
             },
             get children() {
               return [createComponent(H1Styled$1, {
@@ -11108,7 +11198,7 @@ const WalletsModal = () => {
             }
           }), createComponent(Show, {
             get when() {
-              return walletsList.state === "ready";
+              return walletsList();
             },
             get children() {
               return [createComponent(Show, {
@@ -11338,12 +11428,6 @@ const widgetController = {
     tonConnectUI: tonConnectUI2
   }), document.getElementById(root))
 };
-class TonConnectUIError extends TonConnectError$1 {
-  constructor(...args) {
-    super(...args);
-    Object.setPrototypeOf(this, TonConnectUIError.prototype);
-  }
-}
 class WalletInfoStorage {
   constructor() {
     __publicField(this, "localStorage");
@@ -11508,7 +11592,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."
@@ -11518,7 +11605,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 });
@@ -11557,11 +11648,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) {