feat(ui): primary wallet

.eslintrc.js

@@ -33,7 +33,11 @@ module.exports = {
                             },
                             {
                                 "sourceTag": "scope:ui",
-                                "onlyDependOnLibsWithTags": ["scope:core"]
+                                "onlyDependOnLibsWithTags": ["scope:sdk"]
+                            },
+                            {
+                                "sourceTag": "scope:ui-react",
+                                "onlyDependOnLibsWithTags": ["scope:ui"]
                             }
                         ]
                     }

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 dist
 .idea
+.vscode
+.DS_Store

packages/sdk/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-    extends: ["../../.eslintrc.js"],
+    extends: ['../../.eslintrc.js'],
     overrides: [
         {
             files: './vite.config.ts',
@@ -9,6 +9,12 @@ module.exports = {
                 tsconfigRootDir: __dirname,
                 createDefaultProgram: true
             },
+            '@nx/enforce-module-boundaries': [
+                'error',
+                {
+                    allow: ['scope:protocol']
+                }
+            ]
         }
     ]
 };

packages/ui-react/src/components/TonConnectUIProvider.tsx

@@ -60,6 +60,11 @@ export interface TonConnectUIProviderPropsBase {
      */
     walletsListConfiguration?: WalletsListConfiguration;
 
+    /**
+     * App name of the wallet to display prominently in the wallets list.
+     */
+    primaryWalletAppName?: string;
+
     /**
      * Configuration for action-period (e.g. sendTransaction) UI elements: modals and notifications and wallet behaviour (return strategy).
      */

packages/ui/README.md

@@ -43,7 +43,7 @@ You can find `TonConnectUI` in global variable `TON_CONNECT_UI`, e.g.
 
 ## Create TonConnectUI instance
 ```ts
-import TonConnectUI from '@tonconnect/ui'
+import { TonConnectUI } from '@tonconnect/ui'
 
 const tonConnectUI = new TonConnectUI({
     manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',

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

@@ -40,20 +40,23 @@
     "popular": "Popular"
   },
   "walletModal": {
-    "loading": "Loading wallets",
+    "loading": "Loading Wallets",
     "wallets": "Wallets",
     "mobileUniversalModal": {
       "connectYourWallet": "Connect your TON wallet",
+      "openPrimaryWalletOrSelect": "Open {{ name }} or select your wallet to connect",
       "openWalletOnTelegramOrSelect": "Use Wallet in Telegram or choose other application",
       "openWalletOnTelegram": "Connect Wallet in Telegram",
+      "openWallet": "Open {{ name }}",
       "chooseOtherApplication": "Choose other application",
+      "chooseOtherWallet": "Choose other Wallet",
       "openLink": "Open Link",
       "scan": "Scan with your mobile wallet"
     },
     "desktopUniversalModal": {
       "connectYourWallet": "Connect your TON wallet",
       "scan": "Scan with your mobile wallet",
-      "availableWallets": "Available wallets"
+      "availableWallets": "Available Wallets"
     },
     "mobileConnectionModal": {
       "showQR": "Show QR Code",
@@ -62,6 +65,7 @@
       "connectionDeclined": "Connection declined"
     },
     "desktopConnectionModal": {
+      "chooseOtherWallet": "Choose other Wallet",
       "scanQR": "Scan the QR code below with your phone’s or {{ name }}’s camera",
       "continueInExtension": "Continue in {{ name }} browser extension…",
       "dontHaveExtension": "Seems you don't have installed {{ name }} browser extension",

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

@@ -44,16 +44,19 @@
     "wallets": "Кошельки",
     "mobileUniversalModal": {
       "connectYourWallet": "Подключите TON кошелёк",
+      "openPrimaryWalletOrSelect": "Открыть {{ name }} или выберете ваш кошелек для соединения",
       "openWalletOnTelegramOrSelect": "Подключите Wallet в Telegram или выберете другое приложение",
       "openWalletOnTelegram": "Открыть Wallet в Telegram",
+      "openWallet": "Открыть {{ name }}",
       "chooseOtherApplication": "Выберите другое приложение",
+      "chooseOtherWallet": "Выбрать другой Кошелёк",
       "openLink": "Открыть",
       "scan": "Отсканируйте камерой вашего телефона"
     },
     "desktopUniversalModal": {
       "connectYourWallet": "Подключите TON кошелёк",
       "scan": "Отсканируйте QR-код камерой вашего телефона",
-      "availableWallets": "Доступные кошельки"
+      "availableWallets": "Доступные Кошельки"
     },
     "mobileConnectionModal": {
       "showQR": "Показать QR-код",
@@ -62,6 +65,7 @@
       "connectionDeclined": "Подключение отклонено"
     },
     "desktopConnectionModal": {
+      "chooseOtherWallet": "Выбрать другой Кошелёк",
       "scanQR": "Отсканируйте QR-код ниже камерой в приложении {{ name }}, или камерой телефона",
       "continueInExtension": "Откройте браузерное расширение {{ name }}",
       "dontHaveExtension": "Похоже, у вас не установлено браузерное расширение {{ name }}",

packages/ui/src/app/state/app.state.ts

@@ -15,6 +15,7 @@ export type AppState = {
     twaReturnUrl: `${string}://${string}` | undefined;
     preferredWalletAppName: string | undefined;
     enableAndroidBackHandler: boolean;
+    primaryWalletAppName: string | undefined;
 };
 
 export const [appState, setAppState] = createStore<AppState>({

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

@@ -17,6 +17,7 @@ import {
     useContext
 } from 'solid-js';
 import {
+    AllWalletsButton,
     BodyStyled,
     BodyTextStyled,
     BottomButtonsContainerStyled,
@@ -34,6 +35,7 @@ import {
 } from './style';
 import { ConnectorContext } from 'src/app/state/connector.context';
 import {
+    ArrowIcon,
     BrowserIcon,
     Button,
     DesktopIcon,
@@ -59,6 +61,7 @@ export interface DesktopConnectionProps {
     additionalRequest?: ConnectAdditionalRequest;
     wallet: WalletInfoRemote | (WalletInfoRemote & WalletInfoInjectable);
     onBackClick: () => void;
+    onAllWalletsClick?: () => void;
     backDisabled?: boolean;
 }
 
@@ -329,6 +332,17 @@ export const DesktopConnectionModal: Component<DesktopConnectionProps> = props =
                     </Show>
                 </BottomButtonsContainerStyled>
             </Show>
+            <Show when={props.onAllWalletsClick}>
+                <AllWalletsButton
+                    appearance="flat"
+                    onClick={() => props.onAllWalletsClick?.()}
+                    rightIcon={<ArrowIcon direction="right" />}
+                >
+                    <Translation translationKey="walletModal.desktopConnectionModal.chooseOtherWallet">
+                        Choose other Wallet
+                    </Translation>
+                </AllWalletsButton>
+            </Show>
         </DesktopConnectionModalStyled>
     );
 };

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

@@ -1,5 +1,14 @@
 import { styled } from 'solid-styled-components';
-import {Button, ErrorIcon, H1, H2, IconButton, LoaderIcon, Image, QRCode} from 'src/app/components';
+import {
+    Button,
+    ErrorIcon,
+    H1,
+    H2,
+    IconButton,
+    LoaderIcon,
+    Image,
+    QRCode
+} from 'src/app/components';
 import { BorderRadiusConfig } from 'src/app/models/border-radius-config';
 
 const tgButtonBorders: BorderRadiusConfig = {
@@ -33,6 +42,16 @@ export const QRCodeStyled = styled(QRCode)`
     margin-bottom: 24px;
 `;
 
+export const AllWalletsButton = styled(Button)`
+    padding-bottom: 24px;
+    display: flex;
+    justify-content: center;
+    font-weight: 400;
+    font-size: 16px;
+    margin: 0 auto;
+    color: ${props => props.theme!.colors.text.secondary};
+`;
+
 export const H1Styled = styled(H1)`
     max-width: 288px;
     margin: 0 auto 2px;

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

@@ -6,7 +6,7 @@ import {
     QRCodeStyled,
     WalletsContainerStyled
 } from './style';
-import { ConnectAdditionalRequest, isWalletInfoRemote, WalletInfo } from '@tonconnect/sdk';
+import { ConnectAdditionalRequest, WalletInfo } from '@tonconnect/sdk';
 import { appState } from 'src/app/state/app.state';
 import { setLastSelectedWalletInfo } from 'src/app/state/modals-state';
 import { FourWalletsItem, H1, WalletLabeledItem } from 'src/app/components';
@@ -24,6 +24,8 @@ interface DesktopUniversalModalProps {
     onSelect: (walletInfo: WalletInfo) => void;
 
     onSelectAllWallets: () => void;
+
+    primaryWalletAppName?: string;
 }
 
 export const DesktopUniversalModal: Component<DesktopUniversalModalProps> = props => {
@@ -35,6 +37,7 @@ export const DesktopUniversalModal: Component<DesktopUniversalModalProps> = prop
     });
 
     setLastSelectedWalletInfo({ openMethod: 'qrcode' });
+
     const request = createMemo(() => connector.connect(walletsBridges(), props.additionalRequest));
 
     return (
@@ -54,7 +57,7 @@ export const DesktopUniversalModal: Component<DesktopUniversalModalProps> = prop
                 imageUrl={IMG.TON}
             />
             <H2AvailableWalletsStyled translationKey="walletModal.desktopUniversalModal.availableWallets">
-                Available wallets
+                Available Wallets
             </H2AvailableWalletsStyled>
             <WalletsContainerStyled>
                 <For each={props.walletsList.slice(0, 3)}>