feat: add TonConnect button integration

client/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tonconnect/ui-react": "^2.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -26,4 +27,4 @@
     "tailwindcss": "^3.4.1",
     "vite": "^5.0.8"
   }
-}
+}

client/src/App.jsx

@@ -1,10 +1,10 @@
 import SplashScreen from './screens/SplashScreen/SplashScreen'
 import MainMenu from './screens/MainMenu/MainMenu'
 import { useState } from 'react'
+import { TonConnectUIProvider } from '@tonconnect/ui-react'
 
 // Основной компонент приложения
 function App() {
-  const test = 'lint-test';
   const [currentScreen, setCurrentScreen] = useState('splash')
 
   const handleNewGame = () => {
@@ -16,10 +16,12 @@ function App() {
   }
 
   return (
-    <div className="min-h-screen bg-dark-bg">
-      {currentScreen === 'splash' && <SplashScreen onNewGame={handleNewGame} onContinue={handleContinue} />}
-      {currentScreen === 'main-menu' && <MainMenu />}
-    </div>
+    <TonConnectUIProvider manifestUrl="https://ton-connect.github.io/demo-dapp-with-react-ui/tonconnect-manifest.json">
+      <div className="min-h-screen bg-dark-bg">
+        {currentScreen === 'splash' && <SplashScreen onNewGame={handleNewGame} onContinue={handleContinue} />}
+        {currentScreen === 'main-menu' && <MainMenu />}
+      </div>
+    </TonConnectUIProvider>
   )
 }
 

client/src/components/TonConnectButton.css

@@ -0,0 +1,20 @@
+.ton-connect-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+}
+
+.wallet-info {
+  background: #f5f5f5;
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+
+.wallet-info p {
+  margin: 4px 0;
+  font-family: monospace;
+  word-break: break-all;
+}

client/src/components/TonConnectButton.jsx

@@ -0,0 +1,21 @@
+import './TonConnectButton.css';
+import { TonConnectButton, useTonWallet } from '@tonconnect/ui-react';
+
+function TonConnectButtonComponent() {
+  const wallet = useTonWallet();
+
+  return (
+    <div className="ton-connect-container">
+      <TonConnectButton />
+
+      {wallet && (
+        <div className="wallet-info">
+          <p>Connected: {wallet.account.address}</p>
+          <p>Chain: {wallet.account.chain}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default TonConnectButtonComponent;

client/src/screens/MainMenu/MainMenu.jsx

@@ -1,19 +1,16 @@
 import ProfileCard from './components/ProfileCard'
 import ActionButtons from './components/ActionButtons'
 import RoomList from './components/RoomList'
+import TonConnectButtonComponent from '../../components/TonConnectButton'
 import '../../styles/MainMenu.css'
 
 // Главное меню приложения
 const MainMenu = () => {
   return (
     <div className="main-menu">
       <div className="container">
-        <div className="hamburger-placeholder">
-          <div className="hamburger-button">
-            <span className="hamburger-line"></span>
-            <span className="hamburger-line"></span>
-            <span className="hamburger-line"></span>
-          </div>
+        <div className="ton-connect-header">
+          <TonConnectButtonComponent />
         </div>
 
         <div className="menu-content">

client/src/styles/MainMenu.css

@@ -16,38 +16,22 @@
   gap: 30px;
 }
 
-.hamburger-placeholder {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  z-index: 10;
-}
-
-.hamburger-button {
-  background: transparent;
-  border: none;
-  padding: 10px;
+.ton-connect-header {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  cursor: default;
-}
-
-.hamburger-line {
-  width: 30px;
-  height: 3px;
-  background-color: #00FF55;
-  border-radius: 2px;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0;
+  margin-bottom: 20px;
 }
 
 @media (max-width: 768px) {
   .main-menu {
     padding: 20px 15px;
   }
 
-  .hamburger-placeholder {
-    top: 15px;
-    right: 15px;
+  .ton-connect-header {
+    padding: 15px 0;
+    margin-bottom: 15px;
   }
 
   .hamburger-line {