feat: add primary wallet selection feature in UI

README.md

@@ -47,6 +47,20 @@ LocalTunnel Documentation: [https://localtunnel.github.io/www/](https://localtun
 5. Select your bot from the list.
 6. Provide all the required information for your Mini App.
 
+### Setting Primary Wallet (Optional)
+
+To specify a primary wallet that will be shown by default in the wallet selection interface, use the `primaryWalletAppName` property in the TonConnectUIProvider configuration. Set it to the `appName` of your preferred wallet from the `walletsListConfiguration`. By default, it's set to "tonkeeper". Set it to `null` to disable the primary wallet feature.
+
+Here's an example configuration:
+
+```jsx
+<TonConnectUIProvider
+    manifestUrl="https://ton-connect.github.io/demo-dapp-with-wallet/tonconnect-manifest.json"
+    uiPreferences={{ theme: THEME.DARK }}
+    primaryWalletAppName="tonkeeper"  // Set to null to disable primary wallet
+>
+```
+
 
 ### Returning to the Application (Optional)
 

src/App.tsx

@@ -169,6 +169,7 @@ function App() {
           }
         ]
       }}
+      // primaryWalletAppName={'tonkeeper'}
       actionsConfiguration={{
         twaReturnUrl: 'https://t.me/tc_twa_demo_bot/start'
       }}

src/components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import {BorderRadius, Locales, ReturnStrategy, Theme, THEME, useTonConnectUI} from "@tonconnect/ui-react";
+import {BorderRadius, Locales, ReturnStrategy, Theme, THEME, useTonConnectUI, WalletInfo} from "@tonconnect/ui-react";
 import './footer.scss';
 import {useEffect, useState} from "react";
 import {ColorsModal} from "./ColorsModal/ColorsModal";
@@ -12,13 +12,18 @@ export const Footer = () => {
 
     const [returnStrategy, setReturnStrategy] = useState('back');
     const [skipRedirect, setSkipRedirect] = useState('ios');
+    const [wallets, setWallets] = useState<WalletInfo[]>([]);
 
-    const [_, setOptions] = useTonConnectUI();
+    const [tonConnectUI, setOptions] = useTonConnectUI();
 
     const onLangChange = (lang: string) => {
         setOptions({language: lang as Locales})
     }
 
+    const onPrimaryChange = (value: string) => {
+        setOptions({ primaryWalletAppName: value })
+    };
+
     const onThemeChange = (theme: string) => {
         setOptions({uiPreferences: {theme: theme as Theme}})
     }
@@ -59,7 +64,24 @@ export const Footer = () => {
         setOptions({ actionsConfiguration: { modals, notifications } })
     }, [checkboxes])
 
+    useEffect(() => {
+        tonConnectUI.getWallets().then(setWallets)
+    }, [])
+
     return <footer className="footer">
+        <div>
+            <label>primary wallet</label>
+            <select onChange={e => onPrimaryChange(e.target.value)}>
+                <option value="unset">unset</option>
+                <option value="disabled">disabled</option>
+                {wallets.map((wallet) => (
+                    <option key={wallet.appName} value={wallet.appName}>
+                        {wallet.name}
+                    </option>
+                ))}
+            </select>
+        </div>
+
         <div>
             <label>language</label>
             <select onChange={e => onLangChange(e.target.value)}>