@tonconnect/ui-react 0.0.12 → 0.0.14

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,7 +4053,7 @@ class BridgeProvider {
     this.storage = storage;
     this.walletConnectionSource = walletConnectionSource;
     this.type = "http";
-    this.standardUniversalLink = "https://connect.ton.org";
+    this.standardUniversalLink = "tc://";
     this.pendingRequests = /* @__PURE__ */ new Map();
     this.nextRequestId = 0;
     this.session = null;
@@ -6822,7 +6822,8 @@ const defaultLightColorsSet = {
     primary: "#0F0F0F",
     secondary: "#7A8999",
     tertiary: "#C1CAD2",
-    success: "#29CC6A"
+    success: "#29CC6A",
+    error: "#F5A73B"
   },
   background: {
     primary: "#FFFFFF",
@@ -6847,7 +6848,8 @@ const defaultDarkColorsSet = {
     primary: "#E5E5EA",
     secondary: "#909099",
     tertiary: "#434347",
-    success: "#29CC6A"
+    success: "#29CC6A",
+    error: "#F5A73B"
   },
   background: {
     primary: "#121214",
@@ -7946,7 +7948,7 @@ const SuccessIcon = (props) => {
 const _tmpl$$a = /* @__PURE__ */ template$1(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="11"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M7.86358 9.13637C7.51211 8.7849 7.51211 8.21505 7.86358 7.86358C8.21505 7.51211 8.7849 7.51211 9.13637 7.86358L12 10.7272L14.8636 7.86358C15.2151 7.51211 15.7849 7.51211 16.1364 7.86358C16.4878 8.21505 16.4878 8.7849 16.1364 9.13637L13.2728 12L16.1364 14.8636C16.4878 15.2151 16.4878 15.7849 16.1364 16.1364C15.7849 16.4878 15.2151 16.4878 14.8636 16.1364L12 13.2728L9.13637 16.1364C8.7849 16.4878 8.21505 16.4878 7.86358 16.1364C7.51211 15.7849 7.51211 15.2151 7.86358 14.8636L10.7272 12L7.86358 9.13637Z"></path></svg>`);
 const ErrorIcon = (props) => {
   const theme = useTheme();
-  const fill = () => props.fill || theme.colors.icon.secondary;
+  const fill = () => props.fill || theme.colors.icon.error;
   return (() => {
     const _el$ = _tmpl$$a.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     createRenderEffect((_p$) => {
@@ -8111,6 +8113,7 @@ const AccountButtonDropdown = (props) => {
     setTimeout(() => setIsCopiedShown(false), 1e3);
   });
   const onDisconnect = () => {
+    setAction(null);
     connector.disconnect();
     props.onClose();
   };
@@ -8301,9 +8304,10 @@ const NotificationClass = u`
 `;
 const _tmpl$$4 = /* @__PURE__ */ template$1(`<div></div>`);
 const Notifications = (props) => {
+  const timeouts = [];
+  const [openedNotifications, setOpenedNotifications] = createSignal([]);
   let lastId = -1;
   const liveTimeoutMs = 4500;
-  const [openedNotifications, setOpenedNotifications] = createSignal([]);
   createEffect(on(action, (action2) => {
     if (action2 && action2.showNotification) {
       lastId++;
@@ -8312,9 +8316,12 @@ const Notifications = (props) => {
         id,
         action: action2.name
       }));
-      setTimeout(() => setOpenedNotifications((notifications2) => notifications2.filter((notification) => notification.id !== id)), liveTimeoutMs);
+      timeouts.push(setTimeout(() => setOpenedNotifications((notifications2) => notifications2.filter((notification) => notification.id !== id)), liveTimeoutMs));
     }
   }));
+  onCleanup(() => {
+    timeouts.forEach(clearTimeout);
+  });
   return (() => {
     const _el$ = _tmpl$$4.cloneNode(true);
     insert(_el$, createComponent(TransitionGroup, {
@@ -11167,6 +11174,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({
@@ -11217,7 +11238,7 @@ const QrCodeModal = (props) => {
               setLastSelectedWalletInfo(__spreadProps(__spreadValues({}, props.wallet), {
                 openMethod: "universal-link"
               }));
-              openLink(universalLink);
+              openLink(addReturnStrategy(universalLink, appState.returnStrategy));
             },
             get children() {
               return createComponent(Translation, {
@@ -11457,11 +11478,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), {
@@ -11565,14 +11581,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({
@@ -11962,8 +11978,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) {
@@ -12015,6 +12034,7 @@ class TonConnectUI {
     });
   }
   disconnect() {
+    widgetController.clearAction();
     this.walletInfoStorage.removeWalletInfo();
     return this.connector.disconnect();
   }
@@ -12023,10 +12043,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"),
@@ -12125,7 +12145,8 @@ class TonConnectUI {
     }
     return {
       notifications: notifications2,
-      modals
+      modals,
+      returnStrategy: (options == null ? void 0 : options.returnStrategy) || "back"
     };
   }
 }