From d1786f8b78b2f841d069c0684138a936ca75298b Mon Sep 17 00:00:00 2001
From: Anna Mukhacheva <amuhaceva3@gmail.com>
Date: Sat, 13 Sep 2025 22:15:14 +0300
Subject: [PATCH] feat: add TonConnect button integration

---
 client/package.json                        |  3 +-
 client/src/App.jsx                         | 12 ++++----
 client/src/components/TonConnectButton.css | 20 ++++++++++++++
 client/src/components/TonConnectButton.jsx | 21 ++++++++++++++
 client/src/screens/MainMenu/MainMenu.jsx   |  9 ++----
 client/src/styles/MainMenu.css             | 32 ++++++----------------
 6 files changed, 61 insertions(+), 36 deletions(-)
 create mode 100644 client/src/components/TonConnectButton.css
 create mode 100644 client/src/components/TonConnectButton.jsx

diff --git a/client/package.json b/client/package.json
index b7fdc42..fb2b06a 100644
--- a/client/package.json
+++ b/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"
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 56a6e7e..162525f 100644
--- a/client/src/App.jsx
+++ b/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>
   )
 }
 
diff --git a/client/src/components/TonConnectButton.css b/client/src/components/TonConnectButton.css
new file mode 100644
index 0000000..40f2ee0
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/src/components/TonConnectButton.jsx b/client/src/components/TonConnectButton.jsx
new file mode 100644
index 0000000..177af20
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/client/src/screens/MainMenu/MainMenu.jsx b/client/src/screens/MainMenu/MainMenu.jsx
index 24fdcef..627df0f 100644
--- a/client/src/screens/MainMenu/MainMenu.jsx
+++ b/client/src/screens/MainMenu/MainMenu.jsx
@@ -1,6 +1,7 @@
 import ProfileCard from './components/ProfileCard'
 import ActionButtons from './components/ActionButtons'
 import RoomList from './components/RoomList'
+import TonConnectButtonComponent from '../../components/TonConnectButton'
 import '../../styles/MainMenu.css'
 
 // Главное меню приложения
@@ -8,12 +9,8 @@ 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">
diff --git a/client/src/styles/MainMenu.css b/client/src/styles/MainMenu.css
index fa76c7e..ae5b094 100644
--- a/client/src/styles/MainMenu.css
+++ b/client/src/styles/MainMenu.css
@@ -16,28 +16,12 @@
   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) {
@@ -45,9 +29,9 @@
     padding: 20px 15px;
   }
 
-  .hamburger-placeholder {
-    top: 15px;
-    right: 15px;
+  .ton-connect-header {
+    padding: 15px 0;
+    margin-bottom: 15px;
   }
 
   .hamburger-line {