@tonconnect/ui-react 0.0.3 → 0.0.5

package/lib/index.umd.js

@@ -4221,7 +4221,8 @@ var __objRest = (source, exclude) => {
     });
   };
   class InjectedProvider {
-    constructor(injectedWalletKey) {
+    constructor(storage, injectedWalletKey) {
+      this.injectedWalletKey = injectedWalletKey;
       this.type = "injected";
       this.unsubscribeCallback = null;
       this.listenSubscriptions = false;
@@ -4230,13 +4231,14 @@ var __objRest = (source, exclude) => {
       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) {
@@ -4251,23 +4253,8 @@ var __objRest = (source, exclude) => {
     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* () {
@@ -4275,10 +4262,12 @@ var __objRest = (source, exclude) => {
           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);
         }
       });
@@ -4292,7 +4281,7 @@ var __objRest = (source, exclude) => {
     disconnect() {
       this.closeAllListeners();
       this.injectedWallet.disconnect();
-      return Promise.resolve();
+      return this.connectionStorage.removeConnection();
     }
     closeAllListeners() {
       var _a;
@@ -4309,7 +4298,30 @@ var __objRest = (source, exclude) => {
         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));
@@ -4319,6 +4331,12 @@ var __objRest = (source, exclude) => {
         }
       });
     }
+    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) {
@@ -4403,9 +4421,12 @@ var __objRest = (source, exclude) => {
     });
   };
   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* () {
@@ -4419,11 +4440,11 @@ var __objRest = (source, exclude) => {
     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() {
@@ -4546,6 +4567,7 @@ var __objRest = (source, exclude) => {
         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");
       }
@@ -4640,7 +4662,7 @@ var __objRest = (source, exclude) => {
     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);
       }
@@ -4723,6 +4745,8 @@ var __objRest = (source, exclude) => {
     }
   }
   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;
@@ -7779,7 +7803,6 @@ var __objRest = (source, exclude) => {
     const connector = useContext(ConnectorContext);
     const [isCopiedShown, setIsCopiedShown] = createSignal(false);
     const onCopy = () => __async(void 0, null, function* () {
-      console.log(tonConnectUi.account.address);
       const userFriendlyAddress = toUserFriendlyAddress$1(tonConnectUi.account.address);
       yield copyToClipboard(userFriendlyAddress);
       setIsCopiedShown(true);
@@ -8829,7 +8852,7 @@ var __objRest = (source, exclude) => {
   const _tmpl$$3 = /* @__PURE__ */ template$1(`<div></div>`);
   const AccountButton = () => {
     const connector = useContext(ConnectorContext);
-    const tonConnectUI = useContext(TonConnectUiContext);
+    const tonConnectUI2 = useContext(TonConnectUiContext);
     const [isOpened, setIsOpened] = createSignal(false);
     const [address, setAddress] = createSignal("");
     let dropDownRef;
@@ -8878,7 +8901,7 @@ var __objRest = (source, exclude) => {
       get children() {
         return createComponent(AccountButtonStyled, {
           appearance: "flat",
-          onClick: () => tonConnectUI.connectWallet(),
+          onClick: () => tonConnectUI2.connectWallet(),
           get children() {
             return [createComponent(TonIcon, {}), createComponent(Text, {
               translationKey: "button.connectWallet",
@@ -11043,17 +11066,79 @@ var __objRest = (source, exclude) => {
 `;
   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
     } = useI18n()[1];
     createEffect(() => locale(appState.language));
     const connector = useContext(ConnectorContext);
-    const tonConnectUI = useContext(TonConnectUiContext);
-    const [walletsList] = createResource(() => tonConnectUI.getWallets());
+    const tonConnectUI2 = useContext(TonConnectUiContext);
+    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);
@@ -11066,7 +11151,11 @@ var __objRest = (source, exclude) => {
       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({
@@ -11096,7 +11185,7 @@ var __objRest = (source, exclude) => {
           get children() {
             return [createComponent(Show, {
               get when() {
-                return walletsList.state !== "ready";
+                return !walletsList();
               },
               get children() {
                 return [createComponent(H1Styled$1, {
@@ -11112,7 +11201,7 @@ var __objRest = (source, exclude) => {
               }
             }), createComponent(Show, {
               get when() {
-                return walletsList.state === "ready";
+                return walletsList();
               },
               get children() {
                 return [createComponent(Show, {
@@ -11338,16 +11427,10 @@ var __objRest = (source, exclude) => {
     setAction: (action2) => void setTimeout(() => setAction(action2)),
     clearAction: () => void setTimeout(() => setAction(null)),
     getSelectedWalletInfo: () => lastSelectedWalletInfo(),
-    renderApp: (root, tonConnectUI) => render(() => createComponent(App, {
-      tonConnectUI
+    renderApp: (root, tonConnectUI2) => render(() => createComponent(App, {
+      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");
@@ -11512,7 +11595,10 @@ var __objRest = (source, exclude) => {
       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."
@@ -11522,7 +11608,11 @@ var __objRest = (source, exclude) => {
       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 });
@@ -11561,11 +11651,11 @@ var __objRest = (source, exclude) => {
       }
       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) {
@@ -11653,6 +11743,8 @@ var __objRest = (source, exclude) => {
             console.error(e2);
             throw new TonConnectUIError("Unhandled error:" + e2);
           }
+        } finally {
+          widgetController.clearAction();
         }
       });
     }
@@ -11693,23 +11785,26 @@ var __objRest = (source, exclude) => {
     }
   }
   const TonConnectUIContext = require$$0$2.createContext(null);
+  let tonConnectUI = null;
   const TonConnectUIProvider = (_a) => {
     var _b = _a, {
       children: children2
     } = _b, options = __objRest(_b, [
       "children"
     ]);
-    const tonConnectUI = new TonConnectUI(options);
+    if (!tonConnectUI) {
+      tonConnectUI = new TonConnectUI(options);
+    }
     return /* @__PURE__ */ jsx(TonConnectUIContext.Provider, { value: tonConnectUI, children: children2 });
   };
   const TonConnectUIProvider$1 = require$$0$2.memo(TonConnectUIProvider);
-  class TonConnectUiReactError extends TonConnectUIError {
+  class TonConnectUIReactError extends TonConnectUIError {
     constructor(...args) {
       super(...args);
-      Object.setPrototypeOf(this, TonConnectUiReactError.prototype);
+      Object.setPrototypeOf(this, TonConnectUIReactError.prototype);
     }
   }
-  class TonConnectProviderNotSetError extends TonConnectUiReactError {
+  class TonConnectProviderNotSetError extends TonConnectUIReactError {
     constructor(...args) {
       super(...args);
       Object.setPrototypeOf(this, TonConnectProviderNotSetError.prototype);
@@ -11724,10 +11819,10 @@ var __objRest = (source, exclude) => {
     return true;
   }
   function useTonConnectUI() {
-    const tonConnectUI = require$$0$2.useContext(TonConnectUIContext);
-    checkProvider(tonConnectUI);
-    const setOptions = (options) => void (tonConnectUI.uiOptions = options);
-    return [tonConnectUI, setOptions];
+    const tonConnectUI2 = require$$0$2.useContext(TonConnectUIContext);
+    checkProvider(tonConnectUI2);
+    const setOptions = (options) => void (tonConnectUI2.uiOptions = options);
+    return [tonConnectUI2, setOptions];
   }
   const buttonRootId = "ton-connect-button";
   const TonConnectButton = ({ className: className2, style: style2 }) => {
@@ -11739,15 +11834,15 @@ var __objRest = (source, exclude) => {
   };
   const TonConnectButton$1 = require$$0$2.memo(TonConnectButton);
   function useTonWallet() {
-    const [tonConnectUI] = useTonConnectUI();
+    const [tonConnectUI2] = useTonConnectUI();
     const [wallet, setWallet] = require$$0$2.useState(
-      () => tonConnectUI.wallet && __spreadValues2(__spreadValues2({}, tonConnectUI.wallet), tonConnectUI.walletInfo)
+      () => tonConnectUI2.wallet && __spreadValues2(__spreadValues2({}, tonConnectUI2.wallet), tonConnectUI2.walletInfo)
     );
     require$$0$2.useEffect(
-      () => tonConnectUI.onStatusChange((value) => {
+      () => tonConnectUI2.onStatusChange((value) => {
         setWallet(value);
       }),
-      [tonConnectUI]
+      [tonConnectUI2]
     );
     return wallet;
   }
@@ -14615,7 +14710,7 @@ var __objRest = (source, exclude) => {
   exports.TonConnectUI = TonConnectUI;
   exports.TonConnectUIError = TonConnectUIError;
   exports.TonConnectUIProvider = TonConnectUIProvider$1;
-  exports.TonConnectUiReactError = TonConnectUiReactError;
+  exports.TonConnectUIReactError = TonConnectUIReactError;
   exports.useTonAddress = useTonAddress;
   exports.useTonConnectUI = useTonConnectUI;
   exports.useTonWallet = useTonWallet;