diff --git a/frontend/public/index.html b/frontend/public/index.html index f39b10b9..03f22420 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -9,6 +9,9 @@ + + + diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 2e0ace0b..1ba1e617 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -7,20 +7,44 @@ import SpotnetApp from './pages/spotnet/spotnet_app/SpotnetApp'; import Login from "./pages/Login"; import Form from "./pages/forms/Form"; import { connectWallet, logout } from './utils/wallet'; +import { saveTelegramUser, getTelegramUserWalletId} from './utils/telegram'; function App() { const [walletId, setWalletId] = useState(localStorage.getItem('wallet_id')); + const [tgUser, setTgUser] = useState(JSON.parse(localStorage.getItem('tg_user'))); const [error, setError] = useState(null); const navigate = useNavigate(); useEffect(() => { - if (walletId) { - localStorage.setItem('wallet_id', walletId); - } else { + if (tgUser) { + saveTelegramUser(tgUser, walletId) + .then(() => console.log('Telegram user saved successfully')) + .catch(error => console.error('Error saving Telegram user:', error)); + } + if (!walletId) { localStorage.removeItem('wallet_id'); + return; } + localStorage.setItem('wallet_id', walletId); }, [walletId]); + useEffect(() => { + if (!tgUser) { + localStorage.removeItem('tg_user'); + return + } + if (!walletId) { + getTelegramUserWalletId(tgUser) + .then(fetchedWalletId => { + if (fetchedWalletId) { + setWalletId(fetchedWalletId); + } + }) + .catch(error => console.error('Error fetching wallet ID:', error)); + localStorage.setItem('tg_user', JSON.stringify(tgUser)); + } + }, [tgUser, walletId]) + const handleConnectWallet = async () => { try { setError(null); @@ -41,25 +65,25 @@ function App() { }; return ( -
-
-
- {error &&
{error}
} - - } - /> - : } - /> - } /> - } /> - -
-
+
+
+
+ {error &&
{error}
} + + } + /> + : } + /> + } /> + } /> + +
+
); } diff --git a/frontend/src/components/Telegram/TelegramLogin.jsx b/frontend/src/components/Telegram/TelegramLogin.jsx new file mode 100644 index 00000000..f8866976 --- /dev/null +++ b/frontend/src/components/Telegram/TelegramLogin.jsx @@ -0,0 +1,51 @@ +import React, { useState, useEffect } from 'react'; +import './telegramLogin.css'; + +const TelegramLogin = ({ user, onLogin }) => { + useEffect(() => { + const initTelegramLogin = () => { + const tg = window.Telegram.WebApp; + tg.ready(); + + const user = tg.initDataUnsafe?.user; + if (user) { + onLogin(user); + } + }; + + initTelegramLogin(); + }, [onLogin]); + + const handleLogin = () => { + window.Telegram.Login.auth({ + bot_id: process.env.REACT_APP_BOT_ID, + request_access: 'write' + }, onLogin) + }; + + const handleLogout = () => { + localStorage.removeItem('tg_user'); + onLogin(null); + }; + + return ( +
+ {user ? ( +
+ {user.photo_url ? ( + {user.first_name} + ) : ( +
+ )} + {user.first_name} +
+ ) : ( + + )} +
+ ); +}; + +export default TelegramLogin; diff --git a/frontend/src/components/Telegram/telegramLogin.css b/frontend/src/components/Telegram/telegramLogin.css new file mode 100644 index 00000000..56244156 --- /dev/null +++ b/frontend/src/components/Telegram/telegramLogin.css @@ -0,0 +1,61 @@ +.telegram-login { + display: flex; + align-items: center; +} + +.user-info { + background: var(--gradient); + border-radius: 8px; + height: 52px; + width: 190px; + padding: 0 10px; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 10px; +} + +.user-photo { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; +} + +.user-name { + color: var(--black); + font-size: 16px; + font-family: var(--text-font); + font-weight: 700; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.btn-telegram { + background: var(--button-gradient); + color: var(--black); + border: none; + height: 52px; + padding: 0 20px; + border-radius: 8px; + cursor: pointer; + font-size: 20px; + font-family: var(--text-font); + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; +} + +.btn-telegram:hover { + background: var(--button-gradient-hover); +} + +.btn-telegram:active { + background: var(--button-gradient-active); +} + +/* div.user-photo-placeholder { + add style to user placeholder +} */ \ No newline at end of file diff --git a/frontend/src/components/header/Header.jsx b/frontend/src/components/header/Header.jsx index 030fc994..207cc94b 100644 --- a/frontend/src/components/header/Header.jsx +++ b/frontend/src/components/header/Header.jsx @@ -2,8 +2,9 @@ import React from 'react'; import './header.css' import { ReactComponent as Logo } from "../../assets/images/logo.svg"; import { NavLink } from 'react-router-dom'; +import TelegramLogin from '../Telegram/TelegramLogin'; -function Header({ walletId, onConnectWallet, onLogout }) { +function Header({ walletId, onConnectWallet, onLogout, tgUser, setTgUser }) { return (