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 (
-
- {currentScreen === 'splash' && }
- {currentScreen === 'main-menu' && }
-
+
+
+ {currentScreen === 'splash' && }
+ {currentScreen === 'main-menu' && }
+
+
)
}
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 (
+
+
+
+ {wallet && (
+
+
Connected: {wallet.account.address}
+
Chain: {wallet.account.chain}
+
+ )}
+
+ );
+}
+
+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 (
-
-
-
-
-
-
+
+
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 {