fix(ui): adjust mobile layout for wallet icons, text, and wallet button

ton-connect · Dec 10, 2024 · 44e92dd · 44e92dd
1 parent 8fb2cf7
commit 44e92dd
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 78 deletions.
diff --git a/packages/ui/src/app/assets/i18n/en.json b/packages/ui/src/app/assets/i18n/en.json
@@ -40,15 +40,15 @@
     "popular": "Popular"
   },
   "walletModal": {
-    "loading":  "Loading wallets",
+    "loading": "Loading wallets",
     "wallets": "Wallets",
     "mobileUniversalModal": {
-      "connectYourWallet": "Connect your TON wallet",
+      "connectYourWallet": "Connect your TON wallet",
       "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 wallet"
     },
     "desktopUniversalModal": {
       "connectYourWallet": "Connect your TON wallet",
@@ -89,4 +89,4 @@
     "transactionSent": "$notifications.transactionSent",
     "transactionCanceled": "$notifications.transactionCanceled"
   }
-}
+}
diff --git a/packages/ui/src/app/assets/i18n/ru.json b/packages/ui/src/app/assets/i18n/ru.json
@@ -2,7 +2,7 @@
   "common": {
     "close": "Закрыть",
     "openWallet": "Открыть кошелёк",
-    "copyLink": "Копировать",
+    "copyLink": "Скопировать",
     "linkCopied": "Ссылка скопирована",
     "copied": "Скопировано",
     "yourWallet": "Ваш кошелёк",
@@ -43,7 +43,7 @@
     "loading": "Кошельки загружаются",
     "wallets": "Кошельки",
     "mobileUniversalModal": {
-      "connectYourWallet": "Подключите кошелёк",
+      "connectYourWallet": "Подключите TON кошелёк",
       "openWalletOnTelegramOrSelect": "Подключите Wallet в Telegram или выберете другое приложение",
       "openWalletOnTelegram": "Открыть Wallet в Telegram",
       "chooseOtherApplication": "Выберите другое приложение",
@@ -89,4 +89,4 @@
     "transactionSent": "$notifications.transactionSent",
     "transactionCanceled": "$notifications.transactionCanceled"
   }
-}
+}
diff --git a/packages/ui/src/app/components/wallet-item/index.tsx b/packages/ui/src/app/components/wallet-item/index.tsx
@@ -47,8 +47,14 @@ export const WalletItem: Component<WalletItemProps> = props => {
             onClick={() => props.onClick()}
             data-tc-wallet-item="true"
         >
-            {typeof props.icon === 'string' ? <ImageStyled src={props.icon} /> : props.icon}
-            {props.badgeUrl && <BadgeStyled src={props.badgeUrl} />}
+            {typeof props.icon === 'string' ? (
+                <ImageStyled
+                    src={props.icon}
+                    badge={props.badgeUrl && <BadgeStyled src={props.badgeUrl} />}
+                />
+            ) : (
+                props.icon
+            )}
             <div ref={el => (ctxRef = el)}>
                 <StyledText>{props.name}</StyledText>
             </div>

diff --git a/packages/ui/src/app/components/wallet-item/style.ts b/packages/ui/src/app/components/wallet-item/style.ts
@@ -17,13 +17,42 @@ const badgeBorders: BorderRadiusConfig = {
     none: '0'
 };
 
+export 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%;
+    }
+`;
+
 export 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;
@@ -40,11 +69,6 @@ export const WalletItemStyled = styled.button`
         transform: scale(0.96);
     }
 
-    ${media('mobile')} {
-        padding: 8px 0;
-        width: 78px;
-    }
-
     ${mediaTouch} {
         &:active {
             transform: scale(0.92);
@@ -56,14 +80,14 @@ export const ImageStyled = styled(WalletImage)`
     width: 60px;
     height: 60px;
     border-radius: ${props => borders[props.theme!.borderRadius]};
-
     margin-bottom: 8px;
+    position: relative;
 `;
 
 export 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]};

diff --git a/packages/ui/src/app/components/wallet-item/wallet-image.tsx b/packages/ui/src/app/components/wallet-item/wallet-image.tsx
@@ -1,10 +1,11 @@
-import { Component } from 'solid-js';
+import { Component, JSXElement } from 'solid-js';
 import { Image } from 'src/app/components';
 import { styled } from 'solid-styled-components';
 import { Styleable } from 'src/app/models/styleable';
 
 export interface WalletImageProps extends Styleable {
     src: string;
+    badge?: JSXElement;
 }
 
 const ImageContainer = styled.div`
@@ -19,7 +20,6 @@ const ImageContainer = styled.div`
         left: 0;
         right: 0;
         border: 0.5px solid rgba(0, 0, 0, 0.08);
-
         border-radius: inherit;
     }
 `;
@@ -34,6 +34,7 @@ export const WalletImage: Component<WalletImageProps> = props => {
     return (
         <ImageContainer class={props.class}>
             <ImageStyled src={props.src} />
+            {props.badge}
         </ImageContainer>
     );
 };
diff --git a/packages/ui/src/app/views/modals/wallets-modal/all-wallets-list-modal/style.ts b/packages/ui/src/app/views/modals/wallets-modal/all-wallets-list-modal/style.ts
@@ -37,14 +37,28 @@ export const WalletsUl = styled.ul`
     align-self: flex-start;
     max-width: 400px;
     margin: 0 auto;
+    list-style: none;
 
     > li {
         display: block;
         height: fit-content;
     }
 
     ${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%;
+        }
     }
 `;
 

diff --git a/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/index.tsx b/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/index.tsx
@@ -1,18 +1,12 @@
 import { ConnectAdditionalRequest, isWalletInfoRemote, WalletInfo } from '@tonconnect/sdk';
 import { Component, createMemo, createSignal, For, Show } from 'solid-js';
-import {
-    AtWalletIcon,
-    FourWalletsItem,
-    QRIcon,
-    WalletItem
-} from 'src/app/components';
+import { AtWalletIcon, FourWalletsItem, QRIcon, WalletItem } from 'src/app/components';
 import {
     H1Styled,
     H2Styled,
     StyledLeftActionButton,
     TelegramButtonStyled,
-    TGImageStyled,
-    UlStyled
+    TGImageStyled
 } from './style';
 import { setLastSelectedWalletInfo } from 'src/app/state/modals-state';
 import { appState } from 'src/app/state/app.state';
@@ -25,6 +19,7 @@ import { MobileUniversalQR } from './mobile-universal-qr';
 import { Translation } from 'src/app/components/typography/Translation';
 import { redirectToTelegram, redirectToWallet } from 'src/app/utils/url-strategy-helpers';
 import { bridgesIsEqual, getUniqueBridges } from 'src/app/utils/bridge';
+import { WalletUlContainer } from 'src/app/components/wallet-item/style';
 
 interface MobileUniversalModalProps {
     walletsList: WalletInfo[];
@@ -171,7 +166,7 @@ export const MobileUniversalModal: Component<MobileUniversalModalProps> = props
                 >
                     Choose other application
                 </H2Styled>
-                <UlStyled>
+                <WalletUlContainer>
                     <For each={shouldShowMoreButton() ? walletsList().slice(0, 3) : walletsList()}>
                         {wallet => (
                             <li>
@@ -195,7 +190,7 @@ export const MobileUniversalModal: Component<MobileUniversalModalProps> = props
                             />
                         </li>
                     </Show>
-                </UlStyled>
+                </WalletUlContainer>
             </Show>
         </div>
     );

diff --git a/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/style.ts b/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/style.ts
@@ -15,30 +15,6 @@ const tgBorders: BorderRadiusConfig = {
     none: '0'
 };
 
-export 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;
-    }
-`;
-
 export const OtherOptionButton = styled.li`
     width: 82px;
     min-width: 82px;
@@ -70,29 +46,6 @@ export const OtherOptionButton = styled.li`
     }
 `;
 
-export const Divider = styled.div`
-    width: 1px;
-    margin: 0 10px;
-    height: 24px;
-    position: relative;
-    top: 26px;
-
-    background-color: ${props => props.theme!.colors.icon.secondary};
-    opacity: 0.2;
-`;
-
-export const IconContainer = styled.div`
-    width: 60px;
-    height: 60px;
-    border-radius: ${props => borders[props.theme!.borderRadius]};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    background-color: ${props => props.theme!.colors.background.tint};
-    margin-bottom: 8px;
-`;
-
 export const H1Styled = styled(H1)`
     margin-top: 38px;
     margin-bottom: 4px;
@@ -129,6 +82,11 @@ export 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);
+    }
 `;
 
 export const TGImageStyled = styled(Image)`