@tonconnect/ui-react 0.0.3 → 0.0.5

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;
@@ -7776,7 +7800,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$1(tonConnectUi.account.address);
     yield copyToClipboard(userFriendlyAddress);
     setIsCopiedShown(true);
@@ -8826,7 +8849,7 @@ function P(l2, u2, e2) {
 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;
@@ -8875,7 +8898,7 @@ const AccountButton = () => {
     get children() {
       return createComponent(AccountButtonStyled, {
         appearance: "flat",
-        onClick: () => tonConnectUI.connectWallet(),
+        onClick: () => tonConnectUI2.connectWallet(),
         get children() {
           return [createComponent(TonIcon, {}), createComponent(Text, {
             translationKey: "button.connectWallet",
@@ -11040,17 +11063,79 @@ 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
   } = 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);
@@ -11063,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({
@@ -11093,7 +11182,7 @@ const WalletsModal = () => {
         get children() {
           return [createComponent(Show, {
             get when() {
-              return walletsList.state !== "ready";
+              return !walletsList();
             },
             get children() {
               return [createComponent(H1Styled$1, {
@@ -11109,7 +11198,7 @@ const WalletsModal = () => {
             }
           }), createComponent(Show, {
             get when() {
-              return walletsList.state === "ready";
+              return walletsList();
             },
             get children() {
               return [createComponent(Show, {
@@ -11335,16 +11424,10 @@ const widgetController = {
   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");
@@ -11509,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."
@@ -11519,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 });
@@ -11558,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) {
@@ -11650,6 +11740,8 @@ class TonConnectUI {
           console.error(e2);
           throw new TonConnectUIError("Unhandled error:" + e2);
         }
+      } finally {
+        widgetController.clearAction();
       }
     });
   }
@@ -11690,23 +11782,26 @@ class TonConnectUI {
   }
 }
 const TonConnectUIContext = createContext$1(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 = memo$1(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);
@@ -11721,10 +11816,10 @@ function checkProvider(provider) {
   return true;
 }
 function useTonConnectUI() {
-  const tonConnectUI = useContext$1(TonConnectUIContext);
-  checkProvider(tonConnectUI);
-  const setOptions = (options) => void (tonConnectUI.uiOptions = options);
-  return [tonConnectUI, setOptions];
+  const tonConnectUI2 = useContext$1(TonConnectUIContext);
+  checkProvider(tonConnectUI2);
+  const setOptions = (options) => void (tonConnectUI2.uiOptions = options);
+  return [tonConnectUI2, setOptions];
 }
 const buttonRootId = "ton-connect-button";
 const TonConnectButton = ({ className: className2, style: style2 }) => {
@@ -11736,15 +11831,15 @@ const TonConnectButton = ({ className: className2, style: style2 }) => {
 };
 const TonConnectButton$1 = memo$1(TonConnectButton);
 function useTonWallet() {
-  const [tonConnectUI] = useTonConnectUI();
+  const [tonConnectUI2] = useTonConnectUI();
   const [wallet, setWallet] = useState(
-    () => tonConnectUI.wallet && __spreadValues2(__spreadValues2({}, tonConnectUI.wallet), tonConnectUI.walletInfo)
+    () => tonConnectUI2.wallet && __spreadValues2(__spreadValues2({}, tonConnectUI2.wallet), tonConnectUI2.walletInfo)
   );
   useEffect(
-    () => tonConnectUI.onStatusChange((value) => {
+    () => tonConnectUI2.onStatusChange((value) => {
       setWallet(value);
     }),
-    [tonConnectUI]
+    [tonConnectUI2]
   );
   return wallet;
 }
@@ -14613,7 +14708,7 @@ export {
   TonConnectUI,
   TonConnectUIError,
   TonConnectUIProvider$1 as TonConnectUIProvider,
-  TonConnectUiReactError,
+  TonConnectUIReactError,
   useTonAddress,
   useTonConnectUI,
   useTonWallet