From 4c666d5586b5258971ac7e95a9e29098deede2d8 Mon Sep 17 00:00:00 2001 From: thekiba Date: Tue, 10 Dec 2024 05:32:02 +0400 Subject: [PATCH] feat(ui): update mobile qr screens layout and wallet list view --- packages/ui/src/app/assets/i18n/en.json | 11 ++-- packages/ui/src/app/assets/i18n/ru.json | 13 +++-- .../app/components/icons/at-wallet-icon.tsx | 4 +- .../ui/src/app/components/qr-code/style.ts | 6 +- .../src/app/components/wallet-item/style.ts | 4 +- .../mobile-connection-modal/index.tsx | 23 +++++++- .../mobile-connection-qr/index.tsx | 23 +++++++- .../mobile-connection-qr/style.ts | 33 ++++++++++- .../mobile-universal-modal/index.tsx | 57 +++++++------------ .../mobile-universal-qr/index.tsx | 24 +++++++- .../mobile-universal-qr/style.ts | 32 ++++++++++- .../mobile-universal-modal/style.ts | 21 ++++--- 12 files changed, 178 insertions(+), 73 deletions(-) diff --git a/packages/ui/src/app/assets/i18n/en.json b/packages/ui/src/app/assets/i18n/en.json index e390d862c..47c89efbb 100644 --- a/packages/ui/src/app/assets/i18n/en.json +++ b/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": { diff --git a/packages/ui/src/app/assets/i18n/ru.json b/packages/ui/src/app/assets/i18n/ru.json index e7dd3ddce..5207b3c9a 100644 --- a/packages/ui/src/app/assets/i18n/ru.json +++ b/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": "Доступные кошельки" }, diff --git a/packages/ui/src/app/components/icons/at-wallet-icon.tsx b/packages/ui/src/app/components/icons/at-wallet-icon.tsx index 06891581d..dc9fc740f 100644 --- a/packages/ui/src/app/components/icons/at-wallet-icon.tsx +++ b/packages/ui/src/app/components/icons/at-wallet-icon.tsx @@ -15,8 +15,8 @@ export const AtWalletIcon: Component = props => { diff --git a/packages/ui/src/app/components/qr-code/style.ts b/packages/ui/src/app/components/qr-code/style.ts index aa7cf0421..fea3a3a8a 100644 --- a/packages/ui/src/app/components/qr-code/style.ts +++ b/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 { diff --git a/packages/ui/src/app/components/wallet-item/style.ts b/packages/ui/src/app/components/wallet-item/style.ts index 35ad17247..908a06db5 100644 --- a/packages/ui/src/app/components/wallet-item/style.ts +++ b/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} { diff --git a/packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/index.tsx b/packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/index.tsx index a071dc36f..f9270bded 100644 --- a/packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/index.tsx +++ b/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 = props => ); }; + const [isCopiedShown, setIsCopiedShown] = createSignal< + ReturnType | undefined + >(undefined); + + const onCopy = async (): Promise => { + 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 = props => - + {props.wallet.name} diff --git a/packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/mobile-connection-qr/index.tsx b/packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/mobile-connection-qr/index.tsx index e269d16b5..ee8c96c22 100644 --- a/packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/mobile-connection-qr/index.tsx +++ b/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; + onOpenLink?: () => void; + onCopy?: () => void; + isCopiedShown?: ReturnType | void; } export const MobileConnectionQR: Component = props => { @@ -27,6 +30,22 @@ export const MobileConnectionQR: Component = props => { disableCopy /> + + props.onOpenLink?.()}> + + Open Link + + + props.onCopy?.()}> + + {props.isCopiedShown !== undefined ? 'Copied' : 'Copy Link'} + + + ); }; diff --git a/packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/mobile-connection-qr/style.ts b/packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/mobile-connection-qr/style.ts index 2a5b9757c..5e83591e6 100644 --- a/packages/ui/src/app/views/modals/wallets-modal/mobile-connection-modal/mobile-connection-qr/style.ts +++ b/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; `; 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 index 741426e83..805501224 100644 --- 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 @@ -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 = props
- + } onClick={onOpenQR} /> - Connect your wallet + Connect your TON wallet - Open Wallet in Telegram or select your wallet to connect + Use Wallet in Telegram or choose other application } @@ -162,11 +160,19 @@ export const MobileUniversalModal: Component = props scale="s" > - Open Wallet in Telegram + Connect Wallet in Telegram + + Choose other application + - + {wallet => (
  • = props />
    • -   - - - - - - Open Link - - - - - {isCopiedShown() !== undefined ? : } - - - {isCopiedShown() !== undefined ? 'Copied' : 'Copy Link'} - -
    diff --git a/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/mobile-universal-qr/index.tsx b/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/mobile-universal-qr/index.tsx index 180e5085c..d3768f74e 100644 --- a/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/mobile-universal-qr/index.tsx +++ b/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 | void; } export const MobileUniversalQR: Component = props => { return ( <> - Connect your wallet + Connect your TON wallet Scan with your mobile wallet @@ -25,6 +29,22 @@ export const MobileUniversalQR: Component = props => { disableCopy /> + + props.onOpenLink()}> + + Open Link + + + props.onCopy()}> + + {props.isCopiedShown !== undefined ? 'Copied' : 'Copy Link'} + + + ); }; diff --git a/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/mobile-universal-qr/style.ts b/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/mobile-universal-qr/style.ts index 61b74b7db..5e83591e6 100644 --- a/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/mobile-universal-qr/style.ts +++ b/packages/ui/src/app/views/modals/wallets-modal/mobile-universal-modal/mobile-universal-qr/style.ts @@ -1,9 +1,17 @@ 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)` @@ -12,5 +20,25 @@ export const H2Styled = styled(H2)` `; 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; `; 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 index 59fe3f5b1..9286629bf 100644 --- 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 @@ -25,7 +25,7 @@ export const UlStyled = styled.ul` height: fit-content; overflow-x: auto; overflow-y: hidden; - padding: 0 13px 24px; + padding: 8px 19px 16px 19px; &&::-webkit-scrollbar { display: none; @@ -99,10 +99,15 @@ export const H1Styled = styled(H1)` padding: 0 24px; `; -export const H2Styled = styled(H2)<{ maxWidth?: number }>` - margin-bottom: 24px; - padding: 0 24px; - min-height: 44px; +export const H2Styled = styled(H2)<{ + maxWidth?: number; + minHeight?: string; + padding?: string; + margin?: string; +}>` + margin: ${props => props.margin ?? '0 0 28px 0'}; + padding: ${props => props.padding ?? '0 24px'}; + min-height: ${props => props.padding ?? '44px'}; max-width: ${props => props.maxWidth}px; margin-left: ${props => (props.maxWidth ? 'auto' : '0px')}; margin-right: ${props => (props.maxWidth ? 'auto' : '0px')}; @@ -114,14 +119,14 @@ export const ButtonStyled = styled(Button)` `; export const TelegramButtonStyled = styled(Button)` - margin: 0 24px 24px; - width: calc(100% - 48px); + margin: 0 28px 24px; + width: calc(100% - 56px); border-radius: ${props => borders[props.theme!.borderRadius]}; padding: 14px 16px 14px 14px; background-color: ${props => props.theme!.colors.telegramButton}; color: ${props => props.theme!.colors.constant.white}; - font-weight: 510; + font-weight: 500; font-size: 16px; line-height: 20px; `;