@tonconnect/ui 2.0.6 → 2.0.7-beta.0

package/lib/index.cjs

@@ -2886,7 +2886,7 @@ const ButtonStyled$1 = styled.button`
     cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
 
     font-size: 14px;
-    font-weight: 590;
+    font-weight: 510;
     line-height: 18px;
 
     transition: transform 0.125s ease-in-out;
@@ -3302,7 +3302,7 @@ const ROUTE_STATE_KEY = "androidBackHandler";
 const ROUTE_STATE = {
   [ROUTE_STATE_KEY]: true
 };
-const _tmpl$$v = /* @__PURE__ */ template$1(`<svg><path fill-rule="evenodd" clip-rule="evenodd" d="M10.2122 14.3407C10.5384 14.0854 10.5959 13.614 10.3406 13.2878L6.20237 8.00003L10.3406 2.71227C10.5959 2.38607 10.5384 1.91469 10.2122 1.6594C9.88604 1.40412 9.41465 1.46161 9.15937 1.7878L4.65937 7.5378C4.44688 7.80932 4.44688 8.19074 4.65937 8.46226L9.15937 14.2123C9.41465 14.5385 9.88604 14.5959 10.2122 14.3407Z"></path></svg>`, 4, true);
+const _tmpl$$w = /* @__PURE__ */ template$1(`<svg><path fill-rule="evenodd" clip-rule="evenodd" d="M10.2122 14.3407C10.5384 14.0854 10.5959 13.614 10.3406 13.2878L6.20237 8.00003L10.3406 2.71227C10.5959 2.38607 10.5384 1.91469 10.2122 1.6594C9.88604 1.40412 9.41465 1.46161 9.15937 1.7878L4.65937 7.5378C4.44688 7.80932 4.44688 8.19074 4.65937 8.46226L9.15937 14.2123C9.41465 14.5385 9.88604 14.5959 10.2122 14.3407Z"></path></svg>`, 4, true);
 const rotationDegrees = {
   left: 0,
   top: 90,
@@ -3327,18 +3327,18 @@ const ArrowIcon = (props) => {
       return direction();
     },
     get children() {
-      const _el$ = _tmpl$$v.cloneNode(true);
+      const _el$ = _tmpl$$w.cloneNode(true);
       createRenderEffect(() => setAttribute(_el$, "fill", fill()));
       return _el$;
     }
   });
 };
-const _tmpl$$u = /* @__PURE__ */ template$1(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.71966 2.71968C3.01255 2.42678 3.48743 2.42677 3.78032 2.71966L8.00002 6.93925L12.2197 2.71967C12.5126 2.42677 12.9874 2.42678 13.2803 2.71967C13.5732 3.01257 13.5732 3.48744 13.2803 3.78033L9.06068 7.99991L13.2803 12.2197C13.5732 12.5126 13.5732 12.9874 13.2803 13.2803C12.9874 13.5732 12.5126 13.5732 12.2197 13.2803L8.00002 9.06057L3.78033 13.2803C3.48744 13.5732 3.01257 13.5732 2.71967 13.2803C2.42678 12.9874 2.42677 12.5126 2.71967 12.2197L6.93936 7.99991L2.71968 3.78034C2.42678 3.48745 2.42677 3.01257 2.71966 2.71968Z"></path></svg>`);
+const _tmpl$$v = /* @__PURE__ */ template$1(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.71966 2.71968C3.01255 2.42678 3.48743 2.42677 3.78032 2.71966L8.00002 6.93925L12.2197 2.71967C12.5126 2.42677 12.9874 2.42678 13.2803 2.71967C13.5732 3.01257 13.5732 3.48744 13.2803 3.78033L9.06068 7.99991L13.2803 12.2197C13.5732 12.5126 13.5732 12.9874 13.2803 13.2803C12.9874 13.5732 12.5126 13.5732 12.2197 13.2803L8.00002 9.06057L3.78033 13.2803C3.48744 13.5732 3.01257 13.5732 2.71967 13.2803C2.42678 12.9874 2.42677 12.5126 2.71967 12.2197L6.93936 7.99991L2.71968 3.78034C2.42678 3.48745 2.42677 3.01257 2.71966 2.71968Z"></path></svg>`);
 const CloseIcon = (props) => {
   const theme = useTheme();
   const fill = () => props.fill || theme.colors.icon.secondary;
   return (() => {
-    const _el$ = _tmpl$$u.cloneNode(true), _el$2 = _el$.firstChild;
+    const _el$ = _tmpl$$v.cloneNode(true), _el$2 = _el$.firstChild;
     createRenderEffect(() => setAttribute(_el$2, "fill", fill()));
     return _el$;
   })();
@@ -3572,7 +3572,7 @@ function animate(element, keyframes, options) {
   }
   return AnimationNoop.create();
 }
-const _tmpl$$t = /* @__PURE__ */ template$1(`<div></div>`);
+const _tmpl$$u = /* @__PURE__ */ template$1(`<div></div>`);
 const clickOutside = clickOutside$1;
 const keyPressed = escPressed;
 const androidBackHandler = androidBackHandler$1;
@@ -3638,7 +3638,7 @@ const Modal = (props) => {
             "data-tc-modal": "true"
           }, dataAttrs, {
             get children() {
-              const _el$ = _tmpl$$t.cloneNode(true);
+              const _el$ = _tmpl$$u.cloneNode(true);
               use(androidBackHandler, _el$, () => ({
                 isEnabled: props.enableAndroidBackHandler,
                 onClose: () => props.onClose()
@@ -5585,7 +5585,7 @@ function fallbackCopyTextToClipboard(text) {
     document.body.removeChild(textArea);
   }
 }
-const _tmpl$$s = /* @__PURE__ */ template$1(`<div></div>`);
+const _tmpl$$t = /* @__PURE__ */ template$1(`<div></div>`);
 const QRCode = (props) => {
   let qrCodeCanvasRef;
   let qrCodeWrapperRef;
@@ -5634,7 +5634,7 @@ const QRCode = (props) => {
         },
         get children() {
           return [(() => {
-            const _el$ = _tmpl$$s.cloneNode(true);
+            const _el$ = _tmpl$$t.cloneNode(true);
             const _ref$2 = qrCodeCanvasRef;
             typeof _ref$2 === "function" ? use(_ref$2, _el$) : qrCodeCanvasRef = _el$;
             return _el$;
@@ -5904,7 +5904,7 @@ const BadgeStyled = styled(Image)`
 `;
 const StyledText = styled(Text)`
     max-width: 90px;
-    font-weight: 590;
+    font-weight: 510;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -5914,7 +5914,7 @@ const StyledText = styled(Text)`
     }
 `;
 const StyledSecondLine = styled(Text)`
-    font-weight: 510;
+    font-weight: ${(props) => props.colorPrimary ? "510" : "400"};
     max-width: 90px;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -5925,7 +5925,29 @@ const StyledSecondLine = styled(Text)`
         max-width: 80px;
     }
 `;
+const _tmpl$$s = /* @__PURE__ */ template$1(`<div></div>`);
 const WalletItem = (props) => {
+  let ctxRef = null;
+  const adjustLetterSpacing = () => {
+    const name = ctxRef == null ? void 0 : ctxRef.querySelector("div");
+    if (name && name.scrollWidth > name.clientWidth) {
+      let spacing = 0;
+      const minSpacing = -0.4;
+      const step = 0.05;
+      while (name.scrollWidth > name.clientWidth && spacing >= minSpacing) {
+        spacing -= step;
+        name.style.letterSpacing = `${spacing}px`;
+      }
+      if (spacing !== 0) {
+        spacing -= step;
+        name.style.letterSpacing = `${spacing}px`;
+      }
+    }
+  };
+  onMount(() => adjustLetterSpacing());
+  createEffect(() => {
+    adjustLetterSpacing();
+  });
   return createComponent(WalletItemStyled, {
     get ["class"]() {
       return props.class;
@@ -5941,11 +5963,16 @@ const WalletItem = (props) => {
         get src() {
           return props.badgeUrl;
         }
-      })), createComponent(StyledText, {
-        get children() {
-          return props.name;
-        }
-      }), createMemo(() => createMemo(() => !!props.secondLine)() && createComponent(StyledSecondLine, {
+      })), (() => {
+        const _el$ = _tmpl$$s.cloneNode(true);
+        use((el) => ctxRef = el, _el$);
+        insert(_el$, createComponent(StyledText, {
+          get children() {
+            return props.name;
+          }
+        }));
+        return _el$;
+      })(), createMemo(() => createMemo(() => !!props.secondLine)() && createComponent(StyledSecondLine, {
         get colorPrimary() {
           var _a2;
           return (_a2 = props.secondLineColorPrimary) != null ? _a2 : true;
@@ -5959,7 +5986,7 @@ const WalletItem = (props) => {
 };
 const H1Styled$9 = styled.h1`
     font-style: normal;
-    font-weight: 700;
+    font-weight: 590;
     font-size: 20px;
     line-height: 28px;
 
@@ -5987,7 +6014,7 @@ const H1 = (props) => {
 };
 const H2Styled$5 = styled.h2`
     font-style: normal;
-    font-weight: 510;
+    font-weight: 400;
     font-size: 16px;
     line-height: 22px;
 
@@ -6015,7 +6042,7 @@ const H2 = (props) => {
 };
 const H3Styled$1 = styled.h3`
     font-style: normal;
-    font-weight: 590;
+    font-weight: 510;
     font-size: 16px;
     line-height: 20px;
 
@@ -9582,6 +9609,9 @@ const H2Styled$2 = styled(H2)`
     margin-bottom: 24px;
     padding: 0 24px;
     min-height: 44px;
+    max-width: ${(props) => props.maxWidth}px;
+    margin-left: ${(props) => props.maxWidth ? "auto" : "0px"};
+    margin-right: ${(props) => props.maxWidth ? "auto" : "0px"};
 `;
 styled(Button)`
     display: block;
@@ -9595,11 +9625,12 @@ const TelegramButtonStyled = styled(Button)`
     background-color: ${(props) => props.theme.colors.telegramButton};
 
     color: ${(props) => props.theme.colors.constant.white};
-    font-weight: 590;
+    font-weight: 510;
     font-size: 16px;
     line-height: 20px;
 `;
 const TGImageStyled = styled(Image)`
+    background-color: transparent;
     border-radius: ${(props) => tgBorders[props.theme.borderRadius]};
     width: 24px;
     height: 24px;
@@ -9755,6 +9786,7 @@ const MobileUniversalModal = (props) => {
           children: "Connect your wallet"
         }), createComponent(H2Styled$2, {
           translationKey: "walletModal.mobileUniversalModal.openWalletOnTelegramOrSelect",
+          maxWidth: 342,
           children: "Open Wallet in Telegram or select your wallet to connect"
         }), createComponent(TelegramButtonStyled, {
           get leftIcon() {
@@ -10911,7 +10943,7 @@ class TonConnectUITracker {
     }
   }
 }
-const tonConnectUiVersion = "2.0.5";
+const tonConnectUiVersion = "2.0.7-beta.0";
 class TonConnectUI {
   constructor(options) {
     __publicField(this, "walletInfoStorage", new WalletInfoStorage());