@tonconnect/ui 2.0.10-beta.2 → 2.0.10-beta.3

package/lib/index.cjs

@@ -2066,12 +2066,12 @@ const walletModal$1 = {
   loading: "Loading wallets",
   wallets: "Wallets",
   mobileUniversalModal: {
-    connectYourWallet: "Connect your TON wallet",
+    connectYourWallet: "Connect your TON\xA0wallet",
     openWalletOnTelegramOrSelect: "Use Wallet in Telegram or choose other application",
     openWalletOnTelegram: "Connect Wallet in Telegram",
     chooseOtherApplication: "Choose other application",
     openLink: "Open Link",
-    scan: "Scan with your mobile wallet"
+    scan: "Scan with your mobile\xA0wallet"
   },
   desktopUniversalModal: {
     connectYourWallet: "Connect your TON wallet",
@@ -2123,7 +2123,7 @@ const en = {
 const common = {
   close: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C",
   openWallet: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043A\u043E\u0448\u0435\u043B\u0451\u043A",
-  copyLink: "\u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C",
+  copyLink: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C",
   linkCopied: "\u0421\u0441\u044B\u043B\u043A\u0430 \u0441\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u0430",
   copied: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E",
   yourWallet: "\u0412\u0430\u0448 \u043A\u043E\u0448\u0435\u043B\u0451\u043A",
@@ -2164,7 +2164,7 @@ const walletModal = {
   loading: "\u041A\u043E\u0448\u0435\u043B\u044C\u043A\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044E\u0442\u0441\u044F",
   wallets: "\u041A\u043E\u0448\u0435\u043B\u044C\u043A\u0438",
   mobileUniversalModal: {
-    connectYourWallet: "\u041F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u0435 \u043A\u043E\u0448\u0435\u043B\u0451\u043A",
+    connectYourWallet: "\u041F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u0435 TON\xA0\u043A\u043E\u0448\u0435\u043B\u0451\u043A",
     openWalletOnTelegramOrSelect: "\u041F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u0435 Wallet \u0432\xA0Telegram \u0438\u043B\u0438\xA0\u0432\u044B\u0431\u0435\u0440\u0435\u0442\u0435 \u0434\u0440\u0443\u0433\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435",
     openWalletOnTelegram: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C Wallet \u0432 Telegram",
     chooseOtherApplication: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435",
@@ -5828,7 +5828,6 @@ const ImageContainer = styled.div`
         left: 0;
         right: 0;
         border: 0.5px solid rgba(0, 0, 0, 0.08);
-
         border-radius: inherit;
     }
 `;
@@ -5843,11 +5842,11 @@ const WalletImage = (props) => {
       return props.class;
     },
     get children() {
-      return createComponent(ImageStyled$2, {
+      return [createComponent(ImageStyled$2, {
         get src() {
           return props.src;
         }
-      });
+      }), createMemo(() => props.badge)];
     }
   });
 };
@@ -5861,13 +5860,41 @@ const badgeBorders = {
   s: "6px",
   none: "0"
 };
+const WalletUlContainer = styled.ul`
+    display: flex;
+    gap: 0;
+    width: 100%;
+    overflow-x: auto;
+    padding: 8px 12px 16px 12px;
+    margin: 0;
+    list-style: none;
+    flex-wrap: nowrap;
+
+    &&::-webkit-scrollbar {
+        display: none;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    > li {
+        display: flex;
+        flex: 1;
+        min-width: 78px;
+        height: fit-content;
+    }
+
+    > li > button {
+        width: 100%;
+    }
+`;
 const WalletItemStyled = styled.button`
     position: relative;
     cursor: pointer;
     border: none;
     background-color: unset;
     padding: 8px 4px;
-    width: 92px;
+    width: 100%;
+    min-width: 78px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -5884,11 +5911,6 @@ const WalletItemStyled = styled.button`
         transform: scale(0.96);
     }
 
-    ${media("mobile")} {
-        padding: 8px 0;
-        width: 78px;
-    }
-
     ${mediaTouch} {
         &:active {
             transform: scale(0.92);
@@ -5899,13 +5921,13 @@ const ImageStyled$1 = styled(WalletImage)`
     width: 60px;
     height: 60px;
     border-radius: ${(props) => borders$3[props.theme.borderRadius]};
-
     margin-bottom: 8px;
+    position: relative;
 `;
 const BadgeStyled = styled(Image)`
     position: absolute;
-    right: 10px;
-    top: 50px;
+    right: -6px;
+    bottom: -6px;
     width: 24px;
     height: 24px;
     border-radius: ${(props) => badgeBorders[props.theme.borderRadius]};
@@ -5967,12 +5989,15 @@ const WalletItem = (props) => {
       return [createMemo(() => createMemo(() => typeof props.icon === "string")() ? createComponent(ImageStyled$1, {
         get src() {
           return props.icon;
+        },
+        get badge() {
+          return createMemo(() => !!props.badgeUrl)() && createComponent(BadgeStyled, {
+            get src() {
+              return props.badgeUrl;
+            }
+          });
         }
-      }) : props.icon), createMemo(() => createMemo(() => !!props.badgeUrl)() && createComponent(BadgeStyled, {
-        get src() {
-          return props.badgeUrl;
-        }
-      })), (() => {
+      }) : props.icon), (() => {
         const _el$ = _tmpl$$q.cloneNode(true);
         use((el) => ctxRef = el, _el$);
         insert(_el$, createComponent(StyledText, {
@@ -6682,7 +6707,7 @@ const AccountButtonDropdownStyled = styled.div`
            
     color: ${(props) => props.theme.colors.text.primary}
 `;
-const UlStyled$1 = styled.ul`
+const UlStyled = styled.ul`
     background-color: ${(props) => props.theme.colors.background.primary};
     padding: 8px;
 `;
@@ -6743,7 +6768,7 @@ const AccountButtonDropdown = (props) => {
     },
     "data-tc-dropdown": "true",
     get children() {
-      return createComponent(UlStyled$1, {
+      return createComponent(UlStyled, {
         get children() {
           return [(() => {
             const _el$ = _tmpl$$5.cloneNode(true);
@@ -8164,6 +8189,7 @@ const WalletsUl = styled.ul`
     align-self: flex-start;
     max-width: 400px;
     margin: 0 auto;
+    list-style: none;
 
     > li {
         display: block;
@@ -8171,7 +8197,20 @@ const WalletsUl = styled.ul`
     }
 
     ${media("mobile")} {
-        grid-template-columns: repeat(auto-fit, 82px);
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0;
+        padding: 8px 12px 16px;
+        max-width: none;
+
+        > li {
+            min-width: 78px;
+            display: flex;
+        }
+
+        > li > * {
+            width: 100%;
+        }
     }
 `;
 styled(Button)`
@@ -9583,29 +9622,6 @@ const tgBorders = {
   s: "6px",
   none: "0"
 };
-const UlStyled = styled.ul`
-    display: flex;
-    justify-content: space-between;
-    margin: 0 auto;
-    width: fit-content;
-    max-width: 100%;
-    min-width: 100%;
-    height: fit-content;
-    overflow-x: auto;
-    overflow-y: hidden;
-    padding: 8px 19px 16px 19px;
-
-    &&::-webkit-scrollbar {
-        display: none;
-    }
-
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-
-    > li {
-        height: fit-content;
-    }
-`;
 styled.li`
     width: 82px;
     min-width: 82px;
@@ -9636,27 +9652,6 @@ styled.li`
         }
     }
 `;
-styled.div`
-    width: 1px;
-    margin: 0 10px;
-    height: 24px;
-    position: relative;
-    top: 26px;
-
-    background-color: ${(props) => props.theme.colors.icon.secondary};
-    opacity: 0.2;
-`;
-styled.div`
-    width: 60px;
-    height: 60px;
-    border-radius: ${(props) => borders$1[props.theme.borderRadius]};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    background-color: ${(props) => props.theme.colors.background.tint};
-    margin-bottom: 8px;
-`;
 const H1Styled$2 = styled(H1)`
     margin-top: 38px;
     margin-bottom: 4px;
@@ -9694,6 +9689,11 @@ const TelegramButtonStyled = styled(Button)`
     font-weight: 500;
     font-size: 16px;
     line-height: 20px;
+
+    @media (max-width: 375px) {
+        margin: 0 16px 24px;
+        width: calc(100% - 32px);
+    }
 `;
 const TGImageStyled = styled(Image)`
     background-color: transparent;
@@ -9933,7 +9933,7 @@ const MobileUniversalModal = (props) => {
           padding: "0 24px 8px 24px",
           margin: "0",
           children: "Choose other application"
-        }), createComponent(UlStyled, {
+        }), createComponent(WalletUlContainer, {
           get children() {
             return [createComponent(For, {
               get each() {
@@ -11037,7 +11037,7 @@ class TonConnectUITracker {
     }
   }
 }
-const tonConnectUiVersion = "2.0.10-beta.2";
+const tonConnectUiVersion = "2.0.10-beta.3";
 class TonConnectUI {
   constructor(options) {
     __publicField(this, "walletInfoStorage", new WalletInfoStorage());