feat(ui): update mobile qr screens layout and wallet list view

packages/ui/src/app/assets/i18n/en.json

@@ -43,14 +43,15 @@
     "loading":  "Loading wallets",
     "wallets": "Wallets",
     "mobileUniversalModal": {
-      "connectYourWallet": "Connect your wallet",
-      "openWalletOnTelegramOrSelect": "Open Wallet in Telegram or select your wallet to connect",
-      "openWalletOnTelegram": "Open Wallet in Telegram",
+      "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"
     },
     "desktopUniversalModal": {
-      "connectYourWallet": "Connect your wallet",
+      "connectYourWallet": "Connect your TON wallet",
       "scan": "Scan with your mobile wallet",
       "availableWallets": "Available wallets"
     },
@@ -66,7 +67,7 @@
       "dontHaveExtension": "Seems you don't have installed {{ name }} browser extension",
       "getWallet": "Get {{ name }}",
       "continueOnDesktop": "Continue in {{ name }} on desktop…",
-      "openWalletOnTelegram": "Open Wallet in Telegram on desktop",
+      "openWalletOnTelegram": "Connect Wallet in Telegram on desktop",
       "connectionDeclined": "Connection declined"
     },
     "infoModal": {

packages/ui/src/app/assets/i18n/ru.json

@@ -2,9 +2,9 @@
   "common": {
     "close": "Закрыть",
     "openWallet": "Открыть кошелёк",
-    "copyLink": "Копировать ссылку",
+    "copyLink": "Копировать",
     "linkCopied": "Ссылка скопирована",
-    "copied": "Ссылка скопирована",
+    "copied": "Скопировано",
     "yourWallet": "Ваш кошелёк",
     "retry": "Повторить",
     "get": "Скачать",
@@ -40,17 +40,18 @@
     "popular": "Популярен"
   },
   "walletModal": {
-    "loading":  "Кошельки загружаются",
+    "loading": "Кошельки загружаются",
     "wallets": "Кошельки",
     "mobileUniversalModal": {
       "connectYourWallet": "Подключите кошелёк",
-      "openWalletOnTelegramOrSelect": "Подключите Wallet в Telegram или выберете кошелёк для подключения",
+      "openWalletOnTelegramOrSelect": "Подключите Wallet в Telegram или выберете другое приложение",
       "openWalletOnTelegram": "Открыть Wallet в Telegram",
-      "openLink": "Открыть ссылку",
+      "chooseOtherApplication": "Выберите другое приложение",
+      "openLink": "Открыть",
       "scan": "Отсканируйте камерой вашего телефона"
     },
     "desktopUniversalModal": {
-      "connectYourWallet": "Подключите кошелёк",
+      "connectYourWallet": "Подключите TON кошелёк",
       "scan": "Отсканируйте QR-код камерой вашего телефона",
       "availableWallets": "Доступные кошельки"
     },

packages/ui/src/app/components/icons/at-wallet-icon.tsx

@@ -15,8 +15,8 @@ export const AtWalletIcon: Component<AtWalletIconProps> = props => {
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="28"
-            height="29"
-            viewBox="0 0 28 29"
+            height="28"
+            viewBox="0 0 28 28"
             fill="none"
             class={props.class}
         >

packages/ui/src/app/components/qr-code/style.ts

@@ -40,6 +40,7 @@ export const CopyIconButton = styled.div`
 export const QrCodeBackground = styled.button`
     display: flex;
     align-items: center;
+    justify-content: center;
     position: relative;
     background-color: ${props => props.theme!.colors.background.qr};
     border-radius: ${props => backgroundBorders[props.theme!.borderRadius]};
@@ -76,8 +77,9 @@ export const QrCodeBackground = styled.button`
 
 export const QrCodeWrapper = styled.div`
     position: relative;
-
-    width: fit-content;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     margin: 0 auto;
 
     > div:first-child {

packages/ui/src/app/components/wallet-item/style.ts

@@ -41,8 +41,8 @@ export const WalletItemStyled = styled.button`
     }
 
     ${media('mobile')} {
-        padding: 8px 4px;
-        width: 82px;
+        padding: 8px 0;
+        width: 78px;
     }
 
     ${mediaTouch} {

packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/index.tsx

@@ -21,6 +21,7 @@ import { useTheme } from 'solid-styled-components';
 import { MobileConnectionQR } from 'src/app/views/modals/wallets-modal/mobile-connection-modal/mobile-connection-qr';
 import { Translation } from 'src/app/components/typography/Translation';
 import { redirectToTelegram, redirectToWallet } from 'src/app/utils/url-strategy-helpers';
+import { copyToClipboard } from 'src/app/utils/copy-to-clipboard';
 
 export interface MobileConnectionProps {
     additionalRequest?: ConnectAdditionalRequest;
@@ -93,6 +94,20 @@ export const MobileConnectionModal: Component<MobileConnectionProps> = props =>
         );
     };
 
+    const [isCopiedShown, setIsCopiedShown] = createSignal<
+        ReturnType<typeof setTimeout> | undefined
+    >(undefined);
+
+    const onCopy = async (): Promise<void> => {
+        if (isCopiedShown() !== undefined) {
+            clearTimeout(isCopiedShown());
+        }
+
+        await copyToClipboard(universalLink());
+        const timeoutId = setTimeout(() => setIsCopiedShown(undefined), 1500);
+        setIsCopiedShown(timeoutId);
+    };
+
     const onOpenQR = (): void => {
         setConnectionErrored(false);
         setShowQR(true);
@@ -127,7 +142,13 @@ export const MobileConnectionModal: Component<MobileConnectionProps> = props =>
                 <StyledIconButton icon="arrow" onClick={onBack} />
             </Show>
             <Show when={showQR()}>
-                <MobileConnectionQR universalLink={universalLink()} walletInfo={props.wallet} />
+                <MobileConnectionQR
+                    universalLink={universalLink()}
+                    walletInfo={props.wallet}
+                    onOpenLink={onRetry}
+                    onCopy={onCopy}
+                    isCopiedShown={isCopiedShown()}
+                />
             </Show>
             <Show when={!showQR()}>
                 <H1Styled>{props.wallet.name}</H1Styled>

packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/mobile-connection-qr/index.tsx

@@ -1,13 +1,16 @@
 import { Component } from 'solid-js';
-import { H1Styled, H2Styled, QrCodeWrapper } from './style';
+import { H1Styled, H2Styled, QrCodeWrapper, ButtonsWrapper, ActionButton } from './style';
 import { QRCode } from 'src/app/components';
 import { WalletInfo } from '@tonconnect/sdk';
-
 import { addReturnStrategy } from 'src/app/utils/url-strategy-helpers';
+import { Translation } from 'src/app/components/typography/Translation';
 
 interface MobileConnectionQRProps {
     universalLink: string;
     walletInfo: Pick<WalletInfo, 'name' | 'imageUrl'>;
+    onOpenLink?: () => void;
+    onCopy?: () => void;
+    isCopiedShown?: ReturnType<typeof setTimeout> | void;
 }
 
 export const MobileConnectionQR: Component<MobileConnectionQRProps> = props => {
@@ -27,6 +30,22 @@ export const MobileConnectionQR: Component<MobileConnectionQRProps> = props => {
                     disableCopy
                 />
             </QrCodeWrapper>
+            <ButtonsWrapper>
+                <ActionButton appearance="secondary" onClick={() => props.onOpenLink?.()}>
+                    <Translation translationKey="walletModal.mobileUniversalModal.openLink">
+                        Open Link
+                    </Translation>
+                </ActionButton>
+                <ActionButton appearance="secondary" onClick={() => props.onCopy?.()}>
+                    <Translation
+                        translationKey={
+                            props.isCopiedShown !== undefined ? 'common.copied' : 'common.copyLink'
+                        }
+                    >
+                        {props.isCopiedShown !== undefined ? 'Copied' : 'Copy Link'}
+                    </Translation>
+                </ActionButton>
+            </ButtonsWrapper>
         </>
     );
 };

packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/mobile-connection-qr/style.ts

@@ -1,17 +1,44 @@
 import { styled } from 'solid-styled-components';
-import { H1, H2 } from 'src/app/components';
+import { H1, H2, Button } from 'src/app/components';
+import { BorderRadiusConfig } from 'src/app/models/border-radius-config';
+import { rgba } from 'src/app/utils/css';
+
+const actionButtonBorderRadius: BorderRadiusConfig = {
+    m: '16px',
+    s: '8px',
+    none: '0'
+};
 
 export const H1Styled = styled(H1)`
     margin-bottom: 2px;
-    padding: 0 64px;
+    padding: 0 52px;
 `;
 
 export const H2Styled = styled(H2)`
     margin-bottom: 20px;
     padding: 0 64px;
-    min-height: 44px;
 `;
 
 export const QrCodeWrapper = styled.div`
+    padding: 0 24px 16px;
+`;
+
+export const ButtonsWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
     padding: 0 24px 24px;
+    margin-top: 0;
+`;
+
+export const ActionButton = styled(Button)`
+    width: 100%;
+    height: 56px;
+    border-radius: ${props => actionButtonBorderRadius[props.theme!.borderRadius]};
+    background-color: ${props => rgba(props.theme!.colors.accent, 0.12)};
+    color: ${props => props.theme!.colors.accent};
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 500;
+    padding: 17px 20px 19px 20px;
 `;

packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/index.tsx

@@ -2,20 +2,13 @@ import { ConnectAdditionalRequest, isWalletInfoRemote, WalletInfo } from '@tonco
 import { Component, createMemo, createSignal, For, Show } from 'solid-js';
 import {
     AtWalletIcon,
-    CopyLightIcon,
-    DoneIcon,
     FourWalletsItem,
-    LongArrowIcon,
     QRIcon,
-    Text,
     WalletItem
 } from 'src/app/components';
 import {
-    Divider,
     H1Styled,
     H2Styled,
-    IconContainer,
-    OtherOptionButton,
     StyledLeftActionButton,
     TelegramButtonStyled,
     TGImageStyled,
@@ -142,18 +135,23 @@ export const MobileUniversalModal: Component<MobileUniversalModalProps> = props
         <div data-tc-wallets-modal-universal-mobile="true">
             <Show when={showQR()}>
                 <StyledLeftActionButton icon="arrow" onClick={onCloseQR} />
-                <MobileUniversalQR universalLink={getUniversalLink()} />
+                <MobileUniversalQR
+                    universalLink={getUniversalLink()}
+                    isCopiedShown={isCopiedShown()}
+                    onOpenLink={onSelectUniversal}
+                    onCopy={onCopy}
+                />
             </Show>
             <Show when={!showQR()}>
                 <StyledLeftActionButton icon={<QRIcon />} onClick={onOpenQR} />
                 <H1Styled translationKey="walletModal.mobileUniversalModal.connectYourWallet">
-                    Connect your wallet
+                    Connect your TON wallet
                 </H1Styled>
                 <H2Styled
                     translationKey="walletModal.mobileUniversalModal.openWalletOnTelegramOrSelect"
-                    maxWidth={342}
+                    maxWidth={320}
                 >
-                    Open Wallet in Telegram or select your wallet to connect
+                    Use Wallet in Telegram or choose other application
                 </H2Styled>
                 <TelegramButtonStyled
                     leftIcon={<AtWalletIcon />}
@@ -162,11 +160,19 @@ export const MobileUniversalModal: Component<MobileUniversalModalProps> = props
                     scale="s"
                 >
                     <Translation translationKey="walletModal.mobileUniversalModal.openWalletOnTelegram">
-                        Open Wallet in Telegram
+                        Connect Wallet in Telegram
                     </Translation>
                 </TelegramButtonStyled>
+                <H2Styled
+                    translationKey="walletModal.mobileUniversalModal.chooseOtherApplication"
+                    maxWidth={342}
+                    padding={'0 24px 8px 24px'}
+                    margin={'0'}
+                >
+                    Choose other application
+                </H2Styled>
                 <UlStyled>
-                    <For each={shouldShowMoreButton() ? walletsList().slice(0, 4) : walletsList()}>
+                    <For each={shouldShowMoreButton() ? walletsList().slice(0, 3) : walletsList()}>
                         {wallet => (
                             <li>
                                 <WalletItem
@@ -189,31 +195,6 @@ export const MobileUniversalModal: Component<MobileUniversalModalProps> = props
                             />
                         </li>
                     </Show>
-                    <Divider>&nbsp;</Divider>
-                    <OtherOptionButton onClick={onSelectUniversal}>
-                        <IconContainer>
-                            <LongArrowIcon />
-                        </IconContainer>
-                        <Text
-                            fontWeight={590}
-                            translationKey="walletModal.mobileUniversalModal.openLink"
-                        >
-                            Open Link
-                        </Text>
-                    </OtherOptionButton>
-                    <OtherOptionButton onClick={onCopy}>
-                        <IconContainer>
-                            {isCopiedShown() !== undefined ? <DoneIcon /> : <CopyLightIcon />}
-                        </IconContainer>
-                        <Text
-                            fontWeight={590}
-                            translationKey={
-                                isCopiedShown() !== undefined ? 'common.copied' : 'common.copyLink'
-                            }
-                        >
-                            {isCopiedShown() !== undefined ? 'Copied' : 'Copy Link'}
-                        </Text>
-                    </OtherOptionButton>
                 </UlStyled>
             </Show>
         </div>

packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/mobile-universal-qr/index.tsx

@@ -1,19 +1,23 @@
 import { Component } from 'solid-js';
-import { H1Styled, H2Styled, QrCodeWrapper } from './style';
+import { H1Styled, H2Styled, QrCodeWrapper, ButtonsWrapper, ActionButton } from './style';
 import { QRCode } from 'src/app/components';
 import { IMG } from 'src/app/env/IMG';
 
 import { addReturnStrategy } from 'src/app/utils/url-strategy-helpers';
+import { Translation } from 'src/app/components/typography/Translation';
 
 interface MobileUniversalQRProps {
     universalLink: string;
+    onOpenLink: () => void;
+    onCopy: () => void;
+    isCopiedShown: ReturnType<typeof setTimeout> | void;
 }
 
 export const MobileUniversalQR: Component<MobileUniversalQRProps> = props => {
     return (
         <>
             <H1Styled translationKey="walletModal.mobileUniversalModal.connectYourWallet">
-                Connect your wallet
+                Connect your TON wallet
             </H1Styled>
             <H2Styled translationKey="walletModal.mobileUniversalModal.scan">
                 Scan with your mobile wallet
@@ -25,6 +29,22 @@ export const MobileUniversalQR: Component<MobileUniversalQRProps> = props => {
                     disableCopy
                 />
             </QrCodeWrapper>
+            <ButtonsWrapper>
+                <ActionButton appearance="secondary" onClick={() => props.onOpenLink()}>
+                    <Translation translationKey="walletModal.mobileUniversalModal.openLink">
+                        Open Link
+                    </Translation>
+                </ActionButton>
+                <ActionButton appearance="secondary" onClick={() => props.onCopy()}>
+                    <Translation
+                        translationKey={
+                            props.isCopiedShown !== undefined ? 'common.copied' : 'common.copyLink'
+                        }
+                    >
+                        {props.isCopiedShown !== undefined ? 'Copied' : 'Copy Link'}
+                    </Translation>
+                </ActionButton>
+            </ButtonsWrapper>
         </>
     );
 };