@tonconnect/ui-react 0.0.11 → 0.0.13

package/README.md

@@ -153,9 +153,9 @@ You can use it to detect when connection restoring process if finished.
 import { useIsConnectionRestored } from '@tonconnect/ui-react';
 
 export const EntrypointPage = () => {
-    const connectionRestoring = useIsConnectionRestored();
+    const connectionRestored = useIsConnectionRestored();
 
-    if (connectionRestoring) {
+    if (!connectionRestored) {
         return <Loader>Please wait...</Loader>;
     }
 

package/lib/components/TonConnectUIProvider.d.ts

@@ -42,7 +42,7 @@ export interface TonConnectUIProviderPropsBase {
      */
     walletsList?: WalletsListConfiguration;
     /**
-     * Configuration for action-period (e.g. sendTransaction) UI elements: modals and notifications.
+     * Configuration for action-period (e.g. sendTransaction) UI elements: modals and notifications and wallet behaviour (return strategy).
      */
     actionsConfiguration?: ActionConfiguration;
     /**

package/lib/index.js

@@ -4053,10 +4053,12 @@ class BridgeProvider {
     this.storage = storage;
     this.walletConnectionSource = walletConnectionSource;
     this.type = "http";
+    this.standardUniversalLink = "https://connect.ton.org";
     this.pendingRequests = /* @__PURE__ */ new Map();
     this.nextRequestId = 0;
     this.session = null;
     this.bridge = null;
+    this.pendingBridges = [];
     this.listeners = [];
     this.connectionStorage = new BridgeConnectionStorage(storage);
   }
@@ -4068,21 +4070,32 @@ class BridgeProvider {
     });
   }
   connect(message) {
-    var _a;
-    (_a = this.bridge) === null || _a === void 0 ? void 0 : _a.close();
+    this.closeBridges();
     const sessionCrypto = new SessionCrypto();
+    let walletConnectionSource = {
+      universalLink: this.standardUniversalLink,
+      bridgeUrl: ""
+    };
+    if (Array.isArray(this.walletConnectionSource)) {
+      this.pendingBridges = this.walletConnectionSource.map((source) => new BridgeGateway(this.storage, source, sessionCrypto.sessionId, this.gatewayListener.bind(this), this.gatewayErrorsListener.bind(this)));
+      this.pendingBridges.forEach((bridge) => bridge.registerSession());
+    } else {
+      walletConnectionSource = this.walletConnectionSource;
+      this.bridge = new BridgeGateway(this.storage, this.walletConnectionSource.bridgeUrl, sessionCrypto.sessionId, this.gatewayListener.bind(this), this.gatewayErrorsListener.bind(this));
+      this.bridge.registerSession();
+    }
     this.session = {
       sessionCrypto,
-      walletConnectionSource: this.walletConnectionSource
+      walletConnectionSource
     };
-    this.bridge = new BridgeGateway(this.storage, this.walletConnectionSource.bridgeUrl, sessionCrypto.sessionId, this.gatewayListener.bind(this), this.gatewayErrorsListener.bind(this));
-    this.bridge.registerSession();
-    return this.generateUniversalLink(message);
+    return this.generateUniversalLink(walletConnectionSource.universalLink, message);
   }
   restoreConnection() {
-    var _a;
     return __awaiter$4(this, void 0, void 0, function* () {
-      (_a = this.bridge) === null || _a === void 0 ? void 0 : _a.close();
+      if (Array.isArray(this.walletConnectionSource)) {
+        throw new TonConnectError$1("Internal error. Connection source is array while WalletConnectionSourceHTTP was expected.");
+      }
+      this.closeBridges();
       const storedConnection = yield this.connectionStorage.getHttpConnection();
       if (!storedConnection) {
         return;
@@ -4106,15 +4119,13 @@ class BridgeProvider {
     });
   }
   closeConnection() {
-    var _a;
-    (_a = this.bridge) === null || _a === void 0 ? void 0 : _a.close();
+    this.closeBridges();
     this.listeners = [];
     this.session = null;
     this.bridge = null;
   }
   disconnect() {
-    var _a;
-    (_a = this.bridge) === null || _a === void 0 ? void 0 : _a.close();
+    this.closeBridges();
     this.listeners = [];
     return this.removeBridgeAndSession();
   }
@@ -4122,6 +4133,18 @@ class BridgeProvider {
     this.listeners.push(callback);
     return () => this.listeners = this.listeners.filter((listener) => listener !== callback);
   }
+  pendingGatewaysListener(gateway, bridgeIncomingMessage) {
+    return __awaiter$4(this, void 0, void 0, function* () {
+      if (!this.pendingBridges.includes(gateway)) {
+        gateway.close();
+        return;
+      }
+      this.closeBridges();
+      this.session.walletConnectionSource.bridgeUrl = gateway.bridgeUrl;
+      this.bridge = gateway;
+      return this.gatewayListener(bridgeIncomingMessage);
+    });
+  }
   gatewayListener(bridgeIncomingMessage) {
     return __awaiter$4(this, void 0, void 0, function* () {
       const walletMessage = JSON.parse(this.session.sessionCrypto.decrypt(Base64$1.decode(bridgeIncomingMessage.message).toUint8Array(), hexToByteArray(bridgeIncomingMessage.from)));
@@ -4168,13 +4191,19 @@ class BridgeProvider {
       yield this.connectionStorage.removeConnection();
     });
   }
-  generateUniversalLink(message) {
-    const url = new URL(this.walletConnectionSource.universalLink);
+  generateUniversalLink(universalLink, message) {
+    const url = new URL(universalLink);
     url.searchParams.append("v", PROTOCOL_VERSION.toString());
     url.searchParams.append("id", this.session.sessionCrypto.sessionId);
     url.searchParams.append("r", JSON.stringify(message));
     return url.toString();
   }
+  closeBridges(except) {
+    var _a;
+    (_a = this.bridge) === null || _a === void 0 ? void 0 : _a.close();
+    this.pendingBridges.filter((item) => item !== except).forEach((bridge) => bridge.close());
+    this.pendingBridges = [];
+  }
 }
 function getWindow$1() {
   if (typeof window === "undefined") {
@@ -4658,7 +4687,7 @@ class TonConnect {
   }
   createProvider(wallet) {
     let provider;
-    if (isWalletConnectionSourceJS(wallet)) {
+    if (!Array.isArray(wallet) && isWalletConnectionSourceJS(wallet)) {
       provider = new InjectedProvider(this.dappSettings.storage, wallet.jsBridgeKey);
     } else {
       provider = new BridgeProvider(this.dappSettings.storage, wallet);
@@ -5853,6 +5882,9 @@ function render(code, element, init, options = {}) {
   };
 }
 function template$1(html, check, isSVG) {
+  if (typeof window === "undefined") {
+    return null;
+  }
   const t2 = document.createElement("template");
   t2.innerHTML = html;
   let node = t2.content.firstChild;
@@ -11135,6 +11167,20 @@ function subscribeToThemeChange(callback) {
   window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", handler);
   return () => window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", handler);
 }
+function addQueryParameter(url, key, value) {
+  const parsed = new URL(url);
+  parsed.searchParams.append(key, value);
+  return parsed.toString();
+}
+function addReturnStrategy(url, returnStrategy) {
+  return addQueryParameter(url, "ret", returnStrategy);
+}
+const [appState, setAppState] = createStore({
+  buttonRootId: null,
+  language: "en",
+  returnStrategy: "back",
+  walletsList: {}
+});
 const QrCodeModal = (props) => {
   const connector = useContext(ConnectorContext);
   const universalLink = connector.connect({
@@ -11185,7 +11231,7 @@ const QrCodeModal = (props) => {
               setLastSelectedWalletInfo(__spreadProps(__spreadValues({}, props.wallet), {
                 openMethod: "universal-link"
               }));
-              openLink(universalLink);
+              openLink(addReturnStrategy(universalLink, appState.returnStrategy));
             },
             get children() {
               return createComponent(Translation, {
@@ -11425,11 +11471,6 @@ const LoaderContainerStyled = styled.div`
         align-items: center;
     }
 `;
-const [appState, setAppState] = createStore({
-  buttonRootId: null,
-  language: "en",
-  walletsList: {}
-});
 function uiWalletToWalletInfo(uiWallet) {
   if ("jsBridgeKey" in uiWallet) {
     return __spreadProps(__spreadValues({}, uiWallet), {
@@ -11533,14 +11574,14 @@ const WalletsModal = () => {
       setSelectedWalletInfo(walletInfo);
       return;
     }
-    openLink(walletInfo.aboutUrl, "_blank");
+    openLinkBlank(walletInfo.aboutUrl);
   };
   const onSelectIfMobile = (walletInfo) => {
     const universalLink = connector.connect({
       universalLink: walletInfo.universalLink,
       bridgeUrl: walletInfo.bridgeUrl
     }, additionalRequest());
-    openLink(universalLink);
+    openLink(addReturnStrategy(universalLink, appState.returnStrategy));
   };
   const onSelectIfInjected = (walletInfo) => {
     connector.connect({
@@ -11832,7 +11873,7 @@ class WalletInfoStorage {
   constructor() {
     __publicField(this, "localStorage");
     __publicField(this, "storageKey", "ton-connect-ui_wallet-info");
-    if (!localStorage) {
+    if (typeof localStorage === "undefined") {
       throw new TonConnectUIError(
         "window.localStorage is undefined. localStorage is required for TonConnectUI"
       );
@@ -11930,8 +11971,11 @@ class TonConnectUI {
       setBorderRadius(options.uiPreferences.borderRadius);
     }
     setAppState((state) => {
+      var _a2;
       const merged = mergeOptions(
-        __spreadValues(__spreadValues({}, options.language && { language: options.language }), !!options.walletsList && { walletsList: options.walletsList }),
+        __spreadValues(__spreadValues(__spreadValues({}, options.language && { language: options.language }), !!((_a2 = options.actionsConfiguration) == null ? void 0 : _a2.returnStrategy) && {
+          returnStrategy: options.actionsConfiguration.returnStrategy
+        }), !!options.walletsList && { walletsList: options.walletsList }),
         unwrap(state)
       );
       if (options.buttonRootId !== void 0) {
@@ -11991,10 +12035,10 @@ class TonConnectUI {
       if (!this.connected || !this.walletInfo) {
         throw new TonConnectUIError("Connect wallet to send a transaction.");
       }
+      const { notifications: notifications2, modals, returnStrategy } = this.getModalsAndNotificationsConfiguration(options);
       if ("universalLink" in this.walletInfo && this.walletInfo.openMethod === "universal-link") {
-        openLink(this.walletInfo.universalLink);
+        openLink(addReturnStrategy(this.walletInfo.universalLink, returnStrategy));
       }
-      const { notifications: notifications2, modals } = this.getModalsAndNotificationsConfiguration(options);
       widgetController.setAction({
         name: "confirm-transaction",
         showNotification: notifications2.includes("before"),
@@ -12093,10 +12137,17 @@ class TonConnectUI {
     }
     return {
       notifications: notifications2,
-      modals
+      modals,
+      returnStrategy: (options == null ? void 0 : options.returnStrategy) || "back"
     };
   }
 }
+function isClientSide() {
+  return typeof window !== "undefined";
+}
+function isServerSide() {
+  return !isClientSide();
+}
 const TonConnectUIContext = createContext$1(null);
 let tonConnectUI = null;
 const TonConnectUIProvider = (_a) => {
@@ -12105,7 +12156,7 @@ const TonConnectUIProvider = (_a) => {
   } = _b, options = __objRest(_b, [
     "children"
   ]);
-  if (!tonConnectUI) {
+  if (isClientSide() && !tonConnectUI) {
     tonConnectUI = new TonConnectUI(options);
   }
   return /* @__PURE__ */ jsx(TonConnectUIContext.Provider, { value: tonConnectUI, children: children2 });
@@ -12132,6 +12183,10 @@ function checkProvider(provider) {
   return true;
 }
 function useTonConnectUI() {
+  if (isServerSide()) {
+    return [null, () => {
+    }];
+  }
   const tonConnectUI2 = useContext$1(TonConnectUIContext);
   checkProvider(tonConnectUI2);
   const setOptions = (options) => void (tonConnectUI2.uiOptions = options);
@@ -12147,6 +12202,9 @@ const TonConnectButton = ({ className: className2, style: style2 }) => {
 };
 const TonConnectButton$1 = memo(TonConnectButton);
 function useTonWallet() {
+  if (isServerSide()) {
+    return null;
+  }
   const [tonConnectUI2] = useTonConnectUI();
   const [wallet, setWallet] = useState(
     () => tonConnectUI2.wallet && __spreadValues2(__spreadValues2({}, tonConnectUI2.wallet), tonConnectUI2.walletInfo)
@@ -15023,6 +15081,9 @@ function useTonAddress(userFriendly = true) {
   }
 }
 function useIsConnectionRestored() {
+  if (isServerSide()) {
+    return false;
+  }
   const [restored, setRestored] = useState(false);
   const [tonConnectUI2] = useTonConnectUI();
   tonConnectUI2.connectionRestored.then(() => setRestored(true));