Merge pull request #390 from Teri-anric/fix/telegram-link-wallet

[Frontend] Refactor Telegram User Handling in App Component
djeck1432 · Dec 17, 2024 · 60e7dd0 · 60e7dd0
2 parents 2b3ad6b + 76956a9
commit 60e7dd0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 33 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -9,7 +9,7 @@ import Login from 'pages/Login';
 import Form from 'pages/forms/Form';
 import { createPortal } from 'react-dom';
 import { logout } from 'services/wallet';
-import { saveTelegramUser, getTelegramUserWalletId } from 'services/telegram';
+import { getTelegramUserWalletId } from 'services/telegram';
 import Documentation from 'pages/spotnet/documentation/Documentation';
 import Withdraw from 'pages/vault/withdraw/Withdraw';
 import { useWalletStore } from 'stores/useWalletStore';
@@ -18,38 +18,15 @@ import { useConnectWallet } from 'hooks/useConnectWallet';
 import OverviewPage from 'pages/spotnet/overview/Overview';
 import { ActionModal } from 'components/ui/ActionModal';
 import Stake from 'pages/vault/stake/Stake';
+import { notifyError } from 'utils/notification';
 
 function App() {
   const { walletId, setWalletId, removeWalletId } = useWalletStore();
-  const [tgUser, setTgUser] = useState(JSON.parse(localStorage.getItem('tg_user')));
   const [showModal, setShowModal] = useState(false);
   const navigate = useNavigate();
 
   const connectWalletMutation = useConnectWallet(setWalletId);
-  useEffect(() => {
-    if (tgUser) {
-      saveTelegramUser(tgUser, walletId)
-        .then(() => console.log('Telegram user saved successfully'))
-        .catch((error) => console.error('Error saving Telegram user:', error));
-    }
-  }, [walletId, tgUser]);
 
-  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, setWalletId]);
 
   const handleConnectWallet = () => {
     connectWalletMutation.mutate();
@@ -70,6 +47,19 @@ function App() {
     setShowModal(false);
   };
 
+  useEffect(() => {
+    if (window.Telegram?.WebApp?.initData) {
+      getTelegramUserWalletId(window.Telegram.WebApp.initDataUnsafe.user.id).then((linked_wallet_id) => {
+        setWalletId(linked_wallet_id);
+        window.Telegram.WebApp.ready();
+      }).catch((error) => {
+        console.error('Error getting Telegram user wallet ID:', error);
+        notifyError('Error loading wallet');
+        window.Telegram.WebApp.ready();
+      });
+    }
+  }, [window.Telegram?.WebApp?.initDataUnsafe]);
+
   return (
     <div className="App">
       <Notifier />
@@ -87,19 +77,17 @@ function App() {
           document.body
         )}
       <Header
-        tgUser={tgUser}
-        setTgUser={setTgUser}
         onConnectWallet={handleConnectWallet}
         onLogout={handleLogoutModal}
       />
       <main>
         <Routes>
           <Route index element={<SpotnetApp onConnectWallet={handleConnectWallet} onLogout={handleLogout} />} />
-          <Route
+          <Route  
             path="/login"
             element={walletId ? <Navigate to="/" /> : <Login onConnectWallet={handleConnectWallet} />}
           />
-          <Route path="/dashboard" element={<Dashboard telegramId={tgUser} />} />
+          <Route path="/dashboard" element={<Dashboard telegramId={window?.Telegram?.WebApp?.initData?.user?.id} />} />
           <Route path="/withdraw" element={<Withdraw />} />
           <Route path="/overview" element={<OverviewPage />} />
           <Route path="/form" element={<Form />} />

diff --git a/frontend/src/services/telegram.js b/frontend/src/services/telegram.js
@@ -17,11 +17,11 @@ export const saveTelegramUser = async (telegramUser, walletId) => {
   }
 };
 
-export const getTelegramUserWalletId = async (tg_user) => {
+export const getTelegramUserWalletId = async (telegram_id) => {
   try {
-    const response = await axiosInstance.post(`/api/telegram/get-wallet-id/${tg_user.id}`, {
-      raw: window.Telegram.initData || tg_user,
-      is_webapp: !!window.Telegram.initData
+    const response = await axiosInstance.post(`/api/telegram/get-wallet-id/${telegram_id}`, {
+      raw: window.Telegram.WebApp.initData,
+      is_webapp: !!window.Telegram.WebApp.initData
     });
     return response.data.wallet_id;
   } catch (error) {

diff --git a/web_app/telegram/handlers/command.py b/web_app/telegram/handlers/command.py
@@ -31,6 +31,7 @@ async def notification_allowed(message: Message, command: CommandObject):
     """
     user_id = command.args
     user = db_connector.get_object(User, user_id)
+    telegram_db.update_telegram_user(str(message.from_user.id), dict(wallet_id=user.wallet_id))
     telegram_db.set_allow_notification(str(message.from_user.id), user.wallet_id)
 
     return await message.answer(