Front

client/src/screens/MainMenu/MainMenu.jsx

@@ -1,19 +1,19 @@
 import ProfileCard from './components/ProfileCard'
 import ActionButtons from './components/ActionButtons'
 import RoomList from './components/RoomList'
-import TonConnectButtonComponent from '../../components/TonConnectButton'
+import TonConnectButton from './components/TonConnectButton'
 import '../../styles/MainMenu.css'
 
 // Главное меню приложения
 const MainMenu = () => {
   return (
     <div className="main-menu">
       <div className="container">
-        <div className="ton-connect-header">
-          <TonConnectButtonComponent />
-        </div>
-
         <div className="menu-content">
+          {/* TonConnect кнопка над ProfileCard */}
+          <div className="flex justify-center mb-4">
+            <TonConnectButton />
+          </div>
           <ProfileCard />
           <ActionButtons />
           <RoomList />

client/src/screens/MainMenu/components/ActionButtons.jsx

@@ -1,19 +1,11 @@
 import '../../../styles/ActionButtons.css'
 
-// Кнопки управления игрой и балансом
+// Кнопки управления игрой
 const ActionButtons = () => {
   const handleCreateGame = () => {
     console.log('Создание новой игры')
   }
 
-  const handleDeposit = () => {
-    console.log('Пополнение баланса')
-  }
-
-  const handleWithdraw = () => {
-    console.log('Вывод средств')
-  }
-
   return (
     <div className="action-buttons">
       <button
@@ -22,24 +14,6 @@ const ActionButtons = () => {
       >
         CREATE GAME
       </button>
-
-      <div className="balance-buttons">
-        <button
-          onClick={handleDeposit}
-          className="balance-button deposit-button"
-        >
-          <span>♦</span>
-          <span>DEPOSIT</span>
-        </button>
-
-        <button
-          onClick={handleWithdraw}
-          className="balance-button withdraw-button"
-        >
-          <span>♦</span>
-          <span>WITHDRAW</span>
-        </button>
-      </div>
     </div>
   )
 }

client/src/screens/MainMenu/components/ProfileCard.jsx

@@ -3,7 +3,7 @@ import '../../../styles/ProfileCard.css'
 
 // Компонент профиля пользователя
 const ProfileCard = () => {
-  const { username, balance, level, winRate, totalGames, wins, losses } = mockProfile
+  const { username, balance, winRate, wins, losses } = mockProfile
 
   return (
     <div className="profile-card">
@@ -26,24 +26,20 @@ const ProfileCard = () => {
             </div>
           </div>
         </div>
-      </div>
-
-      <div className="stats-grid">
-        <div className="stat-item">
-          <div className="stat-value">{level}</div>
-          <div className="stat-label">Level</div>
-        </div>
-        <div className="stat-item">
-          <div className="stat-value">{winRate}</div>
-          <div className="stat-label">Win Rate</div>
-        </div>
-        <div className="stat-item">
-          <div className="stat-value">{wins}</div>
-          <div className="stat-label">Wins</div>
-        </div>
-        <div className="stat-item">
-          <div className="stat-value">{losses}</div>
-          <div className="stat-label">Losses</div>
+
+        <div className="stats-horizontal">
+          <div className="stat-item">
+            <div className="stat-value">{winRate}</div>
+            <div className="stat-label">Win Rate</div>
+          </div>
+          <div className="stat-item">
+            <div className="stat-value">{wins}</div>
+            <div className="stat-label">Wins</div>
+          </div>
+          <div className="stat-item">
+            <div className="stat-value">{losses}</div>
+            <div className="stat-label">Losses</div>
+          </div>
         </div>
       </div>
     </div>

client/src/screens/MainMenu/components/RoomCard.jsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
 import '../../../styles/RoomCard.css'
+import PropTypes from 'prop-types'
 
 // Карточка игровой комнаты с оппонентом и ставкой
 const RoomCard = ({ room, onEnter }) => {
@@ -55,4 +55,13 @@ const RoomCard = ({ room, onEnter }) => {
   )
 }
 
+RoomCard.propTypes = {
+  room: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    opponent: PropTypes.string.isRequired,
+    bet: PropTypes.number.isRequired
+  }).isRequired,
+  onEnter: PropTypes.func.isRequired
+}
+
 export default RoomCard

client/src/screens/MainMenu/components/TonConnectButton.jsx

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

client/src/screens/SplashScreen/SplashScreen.jsx

@@ -1,5 +1,6 @@
 import '../../styles/SplashScreen.css'
 import { useState } from 'react'
+import PropTypes from 'prop-types'
 
 // Экран приветствия приложения
 const SplashScreen = ({ onNewGame, onContinue }) => {
@@ -57,4 +58,9 @@ const SplashScreen = ({ onNewGame, onContinue }) => {
   )
 }
 
+SplashScreen.propTypes = {
+  onNewGame: PropTypes.func.isRequired,
+  onContinue: PropTypes.func.isRequired
+}
+
 export default SplashScreen

client/src/styles/ActionButtons.css

@@ -1,6 +1,6 @@
 .action-buttons {
-  margin-bottom: 40px;
-  padding: 20px 0;
+  margin-bottom: 20px;
+  padding: 10px 0;
 }
 
 .create-game-button {
@@ -16,74 +16,16 @@
   letter-spacing: 1px;
   text-transform: uppercase;
   transition: all 0.3s ease;
-  margin-bottom: 25px;
 }
 
 .create-game-button:hover {
   transform: translateY(-3px);
   box-shadow: 0 5px 20px rgba(0, 255, 85, 0.4);
 }
 
-.balance-buttons {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 15px;
-  margin-top: 15px;
-}
-
-.balance-button {
-  padding: 16px;
-  border-radius: 10px;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  letter-spacing: 0.5px;
-  transition: all 0.3s ease;
-}
-
-.balance-button:hover {
-  transform: translateY(-2px);
-}
-
-.deposit-button {
-  background: rgba(0, 255, 85, 0.1);
-  color: #00FF55;
-  border: 2px solid #00FF55;
-}
-
-.deposit-button:hover {
-  background: #00FF55;
-  color: #03142A;
-  box-shadow: 0 5px 15px rgba(0, 255, 85, 0.3);
-}
-
-.withdraw-button {
-  background: rgba(139, 0, 255, 0.1);
-  color: #8B00FF;
-  border: 2px solid #8B00FF;
-}
-
-.withdraw-button:hover {
-  background: #8B00FF;
-  color: #03142A;
-  box-shadow: 0 5px 15px rgba(139, 0, 255, 0.3);
-}
-
 @media (max-width: 768px) {
   .create-game-button {
     padding: 16px;
     font-size: 1.1rem;
   }
-
-  .balance-buttons {
-    grid-template-columns: 1fr;
-  }
-
-  .balance-button {
-    padding: 14px;
-  }
 }

client/src/styles/MainMenu.css

@@ -13,29 +13,12 @@
 .menu-content {
   display: flex;
   flex-direction: column;
-  gap: 30px;
-}
+  gap: 8px;
 
-.ton-connect-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px 0;
-  margin-bottom: 20px;
 }
 
 @media (max-width: 768px) {
   .main-menu {
     padding: 20px 15px;
   }
-
-  .ton-connect-header {
-    padding: 15px 0;
-    margin-bottom: 15px;
-  }
-
-  .hamburger-line {
-    width: 25px;
-    height: 2px;
-  }
 }