@tonconnect/ui 2.2.0-beta.0 → 2.3.0-beta.0

package/lib/index.d.ts

@@ -465,12 +465,16 @@ declare class TonConnectUI {
      * @param tx transaction to send.
      * @param options modal and notifications behaviour settings. Default is show only 'before' modal and all notifications.
      */
-    sendTransaction(tx: SendTransactionRequest, options?: ActionConfiguration): Promise<SendTransactionResponse>;
+    sendTransaction(tx: SendTransactionRequest, options?: ActionConfiguration & {
+        onRequestSent?: (redirectToWallet: () => void) => void;
+    }): Promise<SendTransactionResponse>;
     /**
      * Signs the data and returns the signature.
      * @param data data to sign.
      */
-    signData(data: SignDataPayload): Promise<SignDataResponse>;
+    signData(data: SignDataPayload, options?: {
+        onRequestSent?: (redirectToWallet: () => void) => void;
+    }): Promise<SignDataResponse>;
     private redirectAfterRequestSent;
     /**
      * TODO: remove in the next major version.

package/lib/index.mjs

@@ -17,6 +17,18 @@ var __spreadValues = (a2, b) => {
   return a2;
 };
 var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -1820,8 +1832,10 @@ function fixMobileSafariActiveTransition() {
   }
 }
 function defineStylesRoot() {
-  customElements.define(globalStylesTag, class TcRootElement extends HTMLElement {
-  });
+  if (!customElements.get("tc-root")) {
+    customElements.define(globalStylesTag, class TcRootElement extends HTMLElement {
+    });
+  }
 }
 function createMacrotask(callback) {
   return __async(this, null, function* () {
@@ -3029,6 +3043,7 @@ function useDataAttributes(props) {
 const Button = (props) => {
   const dataAttrs = useDataAttributes(props);
   return createComponent(ButtonStyled$1, mergeProps({
+    type: "button",
     get appearance() {
       return props.appearance || "primary";
     },
@@ -4910,16 +4925,16 @@ var qrcode$1 = { exports: {} };
       };
       return _this;
     }();
-    function qrPolynomial(num, shift) {
+    function qrPolynomial(num, shift2) {
       if (typeof num.length == "undefined") {
-        throw num.length + "/" + shift;
+        throw num.length + "/" + shift2;
       }
       var _num = function() {
         var offset = 0;
         while (offset < num.length && num[offset] == 0) {
           offset += 1;
         }
-        var _num2 = new Array(num.length - offset + shift);
+        var _num2 = new Array(num.length - offset + shift2);
         for (var i2 = 0; i2 < num.length - offset; i2 += 1) {
           _num2[i2] = num[i2 + offset];
         }
@@ -7460,6 +7475,22 @@ const computePosition$1 = (reference, floating, config) => __async(void 0, null,
     middlewareData
   };
 });
+function expandPaddingObject(padding) {
+  return __spreadValues({
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  }, padding);
+}
+function getSideObjectFromPadding(padding) {
+  return typeof padding !== "number" ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
 function rectToClientRect(rect) {
   return __spreadProps(__spreadValues({}, rect), {
     top: rect.y,
@@ -7468,6 +7499,270 @@ function rectToClientRect(rect) {
     bottom: rect.y + rect.height
   });
 }
+function detectOverflow(middlewareArguments, options) {
+  return __async(this, null, function* () {
+    var _await$platform$isEle;
+    if (options === void 0) {
+      options = {};
+    }
+    const {
+      x,
+      y,
+      platform: platform2,
+      rects,
+      elements,
+      strategy
+    } = middlewareArguments;
+    const {
+      boundary = "clippingAncestors",
+      rootBoundary = "viewport",
+      elementContext = "floating",
+      altBoundary = false,
+      padding = 0
+    } = options;
+    const paddingObject = getSideObjectFromPadding(padding);
+    const altContext = elementContext === "floating" ? "reference" : "floating";
+    const element = elements[altBoundary ? altContext : elementContext];
+    const clippingClientRect = rectToClientRect(yield platform2.getClippingRect({
+      element: ((_await$platform$isEle = yield platform2.isElement == null ? void 0 : platform2.isElement(element)) != null ? _await$platform$isEle : true) ? element : element.contextElement || (yield platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
+      boundary,
+      rootBoundary,
+      strategy
+    }));
+    const rect = elementContext === "floating" ? __spreadProps(__spreadValues({}, rects.floating), {
+      x,
+      y
+    }) : rects.reference;
+    const offsetParent = yield platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating);
+    const offsetScale = (yield platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? (yield platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
+      x: 1,
+      y: 1
+    } : {
+      x: 1,
+      y: 1
+    };
+    const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? yield platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+      rect,
+      offsetParent,
+      strategy
+    }) : rect);
+    return {
+      top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+      bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+      left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+      right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+    };
+  });
+}
+const min$1 = Math.min;
+const max$1 = Math.max;
+function within(min$1$1, value, max$1$1) {
+  return max$1(min$1$1, min$1(value, max$1$1));
+}
+const hash$1 = {
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
+};
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, (matched) => hash$1[matched]);
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const mainAxis = getMainAxisFromPlacement(placement);
+  const length = getLengthFromAxis(mainAxis);
+  let mainAlignmentSide = mainAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return {
+    main: mainAlignmentSide,
+    cross: getOppositePlacement(mainAlignmentSide)
+  };
+}
+const hash = {
+  start: "end",
+  end: "start"
+};
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, (matched) => hash[matched]);
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+const flip = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "flip",
+    options,
+    fn(middlewareArguments) {
+      return __async(this, null, function* () {
+        var _middlewareData$flip;
+        const {
+          placement,
+          middlewareData,
+          rects,
+          initialPlacement,
+          platform: platform2,
+          elements
+        } = middlewareArguments;
+        const _a3 = options, {
+          mainAxis: checkMainAxis = true,
+          crossAxis: checkCrossAxis = true,
+          fallbackPlacements: specifiedFallbackPlacements,
+          fallbackStrategy = "bestFit",
+          flipAlignment = true
+        } = _a3, detectOverflowOptions = __objRest(_a3, [
+          "mainAxis",
+          "crossAxis",
+          "fallbackPlacements",
+          "fallbackStrategy",
+          "flipAlignment"
+        ]);
+        const side = getSide(placement);
+        const isBasePlacement = side === initialPlacement;
+        const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+        const placements = [initialPlacement, ...fallbackPlacements];
+        const overflow = yield detectOverflow(middlewareArguments, detectOverflowOptions);
+        const overflows = [];
+        let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+        if (checkMainAxis) {
+          overflows.push(overflow[side]);
+        }
+        if (checkCrossAxis) {
+          const {
+            main,
+            cross
+          } = getAlignmentSides(placement, rects, yield platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+          overflows.push(overflow[main], overflow[cross]);
+        }
+        overflowsData = [...overflowsData, {
+          placement,
+          overflows
+        }];
+        if (!overflows.every((side2) => side2 <= 0)) {
+          var _middlewareData$flip$, _middlewareData$flip2;
+          const nextIndex = ((_middlewareData$flip$ = (_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) != null ? _middlewareData$flip$ : 0) + 1;
+          const nextPlacement = placements[nextIndex];
+          if (nextPlacement) {
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
+          let resetPlacement = "bottom";
+          switch (fallbackStrategy) {
+            case "bestFit": {
+              var _overflowsData$map$so;
+              const placement2 = (_overflowsData$map$so = overflowsData.map((d) => [d, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a2, b) => a2[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0].placement;
+              if (placement2) {
+                resetPlacement = placement2;
+              }
+              break;
+            }
+            case "initialPlacement":
+              resetPlacement = initialPlacement;
+              break;
+          }
+          if (placement !== resetPlacement) {
+            return {
+              reset: {
+                placement: resetPlacement
+              }
+            };
+          }
+        }
+        return {};
+      });
+    }
+  };
+};
+function getCrossAxis(axis) {
+  return axis === "x" ? "y" : "x";
+}
+const shift = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "shift",
+    options,
+    fn(middlewareArguments) {
+      return __async(this, null, function* () {
+        const {
+          x,
+          y,
+          placement
+        } = middlewareArguments;
+        const _a3 = options, {
+          mainAxis: checkMainAxis = true,
+          crossAxis: checkCrossAxis = false,
+          limiter = {
+            fn: (_ref) => {
+              let {
+                x: x2,
+                y: y2
+              } = _ref;
+              return {
+                x: x2,
+                y: y2
+              };
+            }
+          }
+        } = _a3, detectOverflowOptions = __objRest(_a3, [
+          "mainAxis",
+          "crossAxis",
+          "limiter"
+        ]);
+        const coords = {
+          x,
+          y
+        };
+        const overflow = yield detectOverflow(middlewareArguments, detectOverflowOptions);
+        const mainAxis = getMainAxisFromPlacement(getSide(placement));
+        const crossAxis = getCrossAxis(mainAxis);
+        let mainAxisCoord = coords[mainAxis];
+        let crossAxisCoord = coords[crossAxis];
+        if (checkMainAxis) {
+          const minSide = mainAxis === "y" ? "top" : "left";
+          const maxSide = mainAxis === "y" ? "bottom" : "right";
+          const min2 = mainAxisCoord + overflow[minSide];
+          const max2 = mainAxisCoord - overflow[maxSide];
+          mainAxisCoord = within(min2, mainAxisCoord, max2);
+        }
+        if (checkCrossAxis) {
+          const minSide = crossAxis === "y" ? "top" : "left";
+          const maxSide = crossAxis === "y" ? "bottom" : "right";
+          const min2 = crossAxisCoord + overflow[minSide];
+          const max2 = crossAxisCoord - overflow[maxSide];
+          crossAxisCoord = within(min2, crossAxisCoord, max2);
+        }
+        const limitedCoords = limiter.fn(__spreadProps(__spreadValues({}, middlewareArguments), {
+          [mainAxis]: mainAxisCoord,
+          [crossAxis]: crossAxisCoord
+        }));
+        return __spreadProps(__spreadValues({}, limitedCoords), {
+          data: {
+            x: limitedCoords.x - x,
+            y: limitedCoords.y - y
+          }
+        });
+      });
+    }
+  };
+};
 function getWindow(node) {
   var _node$ownerDocument;
   return ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
@@ -8050,7 +8345,8 @@ const AccountButton = () => {
   const [anchor, setAnchor] = createSignal();
   const position = P(anchor, floating, {
     whileElementsMounted: autoUpdate,
-    placement: "bottom-end"
+    placement: "bottom-end",
+    middleware: [flip(), shift()]
   });
   const normalizedAddress = () => {
     const acc = account();
@@ -11365,9 +11661,13 @@ const ActionModal = (props) => {
   const tonConnectUI = useContext(TonConnectUiContext);
   const [firstClick, setFirstClick] = createSignal(true);
   const [sent, setSent] = createSignal(false);
+  const [signed, setSigned] = createSignal(false);
+  const [canceled, setCanceled] = createSignal(false);
   createEffect(() => {
     const currentAction = action();
-    setSent(!!currentAction && "sent" in currentAction && currentAction.sent);
+    setSent(!!currentAction && ("sent" in currentAction && currentAction.sent || currentAction.name === "transaction-sent"));
+    setSigned(!!currentAction && ("signed" in currentAction && currentAction.signed || currentAction.name === "data-signed"));
+    setCanceled(!!currentAction && (currentAction.name === "transaction-canceled" || currentAction.name === "sign-data-canceled"));
   });
   let universalLink;
   if ((tonConnectUI == null ? void 0 : tonConnectUI.wallet) && "universalLink" in tonConnectUI.wallet && (tonConnectUI.wallet.openMethod === "universal-link" || isTelegramUrl(tonConnectUI.wallet.universalLink) && isInTMA())) {
@@ -11414,7 +11714,7 @@ const ActionModal = (props) => {
         }
       }), createComponent(Show, {
         get when() {
-          return !sent() && (props.showButton === "open-wallet" && universalLink || props.showButton !== "open-wallet");
+          return !sent() && !signed() && !canceled() && (props.showButton === "open-wallet" && universalLink || props.showButton !== "open-wallet");
         },
         get children() {
           return createComponent(LoaderButtonStyled, {
@@ -11427,7 +11727,7 @@ const ActionModal = (props) => {
         }
       }), createComponent(Show, {
         get when() {
-          return sent();
+          return sent() || signed();
         },
         get children() {
           return [createComponent(Show, {
@@ -11510,6 +11810,7 @@ const TransactionSentModal = (props) => {
         size: "m"
       });
     },
+    showButton: "open-wallet",
     onClose: () => props.onClose(),
     "data-tc-transaction-sent-modal": "true"
   });
@@ -12147,7 +12448,7 @@ class TonConnectUITracker {
     }
   }
 }
-const tonConnectUiVersion = "2.2.0-beta.0";
+const tonConnectUiVersion = "2.3.0-beta.0";
 class TonConnectUI {
   constructor(options) {
     __publicField(this, "walletInfoStorage", new WalletInfoStorage());
@@ -12383,6 +12684,7 @@ class TonConnectUI {
       });
       const abortController = new AbortController();
       const onRequestSent = () => {
+        var _a2;
         if (abortController.signal.aborted) {
           return;
         }
@@ -12396,6 +12698,20 @@ class TonConnectUI {
           returnStrategy,
           twaReturnUrl
         });
+        let firstClick = true;
+        const redirectToWallet2 = () => {
+          if (abortController.signal.aborted) {
+            return;
+          }
+          const forceRedirect = !firstClick;
+          firstClick = false;
+          this.redirectAfterRequestSent({
+            returnStrategy,
+            twaReturnUrl,
+            forceRedirect
+          });
+        };
+        (_a2 = options == null ? void 0 : options.onRequestSent) == null ? void 0 : _a2.call(options, redirectToWallet2);
       };
       const unsubscribe = this.onTransactionModalStateChange((action2) => {
         if (action2 == null ? void 0 : action2.openModal) {
@@ -12443,7 +12759,7 @@ class TonConnectUI {
       }
     });
   }
-  signData(data) {
+  signData(data, options) {
     return __async(this, null, function* () {
       this.tracker.trackDataSentForSignature(this.wallet, data);
       if (!this.connected) {
@@ -12462,6 +12778,7 @@ class TonConnectUI {
       });
       const abortController = new AbortController();
       const onRequestSent = () => {
+        var _a2;
         if (abortController.signal.aborted) {
           return;
         }
@@ -12475,6 +12792,20 @@ class TonConnectUI {
           returnStrategy,
           twaReturnUrl
         });
+        let firstClick = true;
+        const redirectToWallet2 = () => {
+          if (abortController.signal.aborted) {
+            return;
+          }
+          const forceRedirect = !firstClick;
+          firstClick = false;
+          this.redirectAfterRequestSent({
+            returnStrategy,
+            twaReturnUrl,
+            forceRedirect
+          });
+        };
+        (_a2 = options == null ? void 0 : options.onRequestSent) == null ? void 0 : _a2.call(options, redirectToWallet2);
       };
       const unsubscribe = this.onTransactionModalStateChange((action2) => {
         if (action2 == null ? void 0 : action2.openModal) {
@@ -12524,14 +12855,15 @@ class TonConnectUI {
   }
   redirectAfterRequestSent({
     returnStrategy,
-    twaReturnUrl
+    twaReturnUrl,
+    forceRedirect
   }) {
     if (this.walletInfo && "universalLink" in this.walletInfo && (this.walletInfo.openMethod === "universal-link" || this.walletInfo.openMethod === "custom-deeplink")) {
       if (isTelegramUrl(this.walletInfo.universalLink)) {
         redirectToTelegram(this.walletInfo.universalLink, {
           returnStrategy,
           twaReturnUrl: twaReturnUrl || appState.twaReturnUrl,
-          forceRedirect: false
+          forceRedirect: forceRedirect || false
         });
       } else {
         redirectToWallet(
@@ -12539,7 +12871,7 @@ class TonConnectUI {
           this.walletInfo.deepLink,
           {
             returnStrategy,
-            forceRedirect: false
+            forceRedirect: forceRedirect || false
           },
           () => {
           }