Update app.py

app.py

@@ -156,8 +156,11 @@ TEMPLATE = """
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, user-scalable=no, viewport-fit=cover">
     <title>Morshen Group</title>
+    <!-- Telegram WebApp script MUST be loaded first -->
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
-    <script src="https://unpkg.com/@tonconnect/[email protected]/dist/tonconnect-sdk.min.js"></script>
+    <!-- TON Connect SDK script with defer to avoid blocking -->
+    <script src="https://unpkg.com/@tonconnect/[email protected]/dist/tonconnect-sdk.min.js" defer></script>
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -596,6 +599,7 @@ TEMPLATE = """
         }
 
         async function fetchTonBalance(address) {
+             // Using public RPC endpoint provided by TON Center
              const rpcUrl = 'https://rpc.toncenter.com/api/v2/jsonRPC';
              try {
                  const response = await fetch(rpcUrl, {
@@ -605,7 +609,7 @@ TEMPLATE = """
                      },
                      body: JSON.stringify({
                          jsonrpc: '2.0',
-                         id: 1,
+                         id: 1, // Request ID, can be anything
                          method: 'getBalance',
                          params: {
                              address: address
@@ -616,32 +620,36 @@ TEMPLATE = """
                  const data = await response.json();
                  if (data.error) throw new Error(`RPC error: ${data.error.message}`);
                  const balanceNanoTon = parseInt(data.result);
-                 const balanceTon = balanceNanoTon / 1e9;
-                 return balanceTon.toFixed(4);
+                 const balanceTon = balanceNanoTon / 1e9; // Convert NanoTON to TON
+                 return balanceTon.toFixed(4); // Format to 4 decimal places
              } catch (error) {
                  console.error('Error fetching TON balance:', error);
                  document.getElementById('ton-error').textContent = `Ошибка получения баланса: ${error.message}`;
                  document.getElementById('ton-error').style.display = 'block';
-                 return 'N/A';
+                 return 'N/A'; // Return N/A on error
              }
          }
 
 
         function initializeWebApp() {
+            // Check if Telegram WebApp is ready
             if (!tg || !tg.initData) {
                  console.error("Telegram WebApp script not loaded or initData is missing.");
                  const greetingElement = document.getElementById('greeting');
                  if(greetingElement) greetingElement.textContent = 'Не удалось связаться с Telegram.';
-                 document.body.style.visibility = 'visible';
+                 document.body.style.visibility = 'visible'; // Show body even on error
                  return;
              }
 
+            // Initialize Telegram WebApp features
             tg.ready();
             tg.expand();
 
+            // Apply theme based on Telegram app theme
             applyTheme(tg.themeParams);
             tg.onEvent('themeChanged', () => applyTheme(tg.themeParams));
 
+            // Send initData to backend for verification and logging
              fetch('/verify', {
                  method: 'POST',
                  headers: {
@@ -665,6 +673,7 @@ TEMPLATE = """
                  console.error('Error sending initData for verification:', error);
              });
 
+             // Display user greeting
              const user = tg.initDataUnsafe?.user;
              const greetingElement = document.getElementById('greeting');
              if (user) {
@@ -674,14 +683,17 @@ TEMPLATE = """
                  greetingElement.textContent = 'Добро пожаловать!';
              }
 
+             // Setup Contact Links to open Telegram chat
              const contactButtons = document.querySelectorAll('.contact-link');
              contactButtons.forEach(button => {
                  button.addEventListener('click', (e) => {
                      e.preventDefault();
+                     // Replace 'morshenkhan' with the actual Telegram username
                      tg.openTelegramLink('https://t.me/morshenkhan');
                  });
              });
 
+             // Setup Save Card Modal
              const modal = document.getElementById("saveModal");
              const saveCardBtn = document.getElementById("save-card-btn");
              const closeBtn = document.getElementById("modal-close-btn");
@@ -706,8 +718,10 @@ TEMPLATE = """
                  });
              }
 
+             // Show body after initial setup is complete
              document.body.style.visibility = 'visible';
 
+
              // --- TON Connect Integration ---
              const connectTonBtn = document.getElementById('connect-ton-btn');
              const disconnectTonBtn = document.getElementById('disconnect-ton-btn');
@@ -717,39 +731,45 @@ TEMPLATE = """
              const tonInfoDiv = document.getElementById('ton-info');
              const tonErrorDiv = document.getElementById('ton-error');
 
+             // Check if TON Connect elements exist and TON Connect SDK is loaded
              if (connectTonBtn && disconnectTonBtn && tonWalletStatus && tonWalletAddress && tonBalance && tonInfoDiv && tonErrorDiv) {
-                 // Ensure TonConnectSDK is available globally
                  if (!window.TonConnectSDK) {
-                     console.error("TON Connect SDK script not loaded correctly.");
+                     console.error("TON Connect SDK script not loaded correctly or window.TonConnectSDK is not defined.");
                      tonErrorDiv.textContent = 'Ошибка: TON Connect SDK не загружен.';
                      tonErrorDiv.style.display = 'block';
-                     connectTonBtn.disabled = true;
-                     return;
+                     connectTonBtn.disabled = true; // Disable connect button
+                     return; // Stop TON Connect initialization
                  }
 
                  try {
+                     // Initialize TON Connect SDK
                      tonConnectSDK = new window.TonConnectSDK.TonConnectSDK({
                          manifestUrl: window.location.origin + '/tonconnect-manifest.json',
                          actionsConfiguration: {
-                              twaReturnUrl: 'https://t.me/YOUR_BOT_USERNAME/YOUR_MINIAPP_SHORTNAME'
+                             // !!! IMPORTANT: Replace with your actual bot username and Mini App shortname
+                             // Example: 'https://t.me/MyAwesomeBot/MyMiniApp'
+                             twaReturnUrl: 'https://t.me/YOUR_BOT_USERNAME/YOUR_MINIAPP_SHORTNAME'
                          }
                      });
 
+                     // Subscribe to wallet status changes
                      tonConnectSDK.onStatusChange(async wallet => {
                          tonErrorDiv.style.display = 'none'; // Clear previous errors
                          if (wallet) {
+                             // Wallet is connected
                              tonWalletStatus.textContent = 'Статус: Подключен ✅';
                              tonWalletAddress.textContent = wallet.account.address;
                              tonInfoDiv.style.display = 'block';
                              connectTonBtn.style.display = 'none';
                              disconnectTonBtn.style.display = 'inline-flex';
-                             tonBalance.textContent = 'Загрузка...';
+                             tonBalance.textContent = 'Загрузка...'; // Show loading state for balance
                              const balance = await fetchTonBalance(wallet.account.address);
                              tonBalance.textContent = balance;
                              if (tg.HapticFeedback) {
                                 tg.HapticFeedback.notificationOccurred('success');
                              }
                          } else {
+                             // Wallet is disconnected
                              tonWalletStatus.textContent = 'Статус: Не подключен';
                              tonWalletAddress.textContent = '';
                              tonBalance.textContent = '';
@@ -760,37 +780,41 @@ TEMPLATE = """
                                  tg.HapticFeedback.notificationOccurred('warning');
                              }
                          }
-                         // tg.MainButton.hide(); // Hide main button if shown by SDK (optional)
+                         // Hide Telegram's MainButton if it might be interfering
+                         // tg.MainButton.hide();
                      });
 
+                     // Add event listeners for connect/disconnect buttons
                      connectTonBtn.addEventListener('click', () => {
                          tonErrorDiv.style.display = 'none'; // Clear error on button click
-                         tonConnectSDK.connectWallet();
+                         tonConnectSDK.connectWallet(); // Trigger wallet connection flow
                      });
 
                      disconnectTonBtn.addEventListener('click', () => {
                          tonErrorDiv.style.display = 'none'; // Clear error on button click
-                         tonConnectSDK.disconnect();
+                         tonConnectSDK.disconnect(); // Trigger wallet disconnection
                      });
 
+                     // Attempt to restore previous connection on startup
                      tonConnectSDK.restoreConnection();
 
                  } catch (e) {
+                      // Catch errors specifically during SDK instantiation
                       console.error("Error initializing TON Connect SDK:", e);
                       tonErrorDiv.textContent = `Ошибка инициализации TON Connect: ${e.message}`;
                       tonErrorDiv.style.display = 'block';
-                      connectTonBtn.disabled = true; // Disable button on error
+                      connectTonBtn.disabled = true; // Disable button on initialization error
                  }
              } else {
-                  console.error("TON Wallet section elements not found!");
+                  console.error("TON Wallet section HTML elements not found!");
              }
              // --- End TON Connect Integration ---
          }
 
-        // Wait for the window to fully load (including external scripts like TonConnectSDK)
+        // Wait for the window to fully load all resources (including deferred scripts)
         window.addEventListener('load', initializeWebApp);
 
-         // Fallback/timeout if Telegram WebApp script doesn't load or something goes wrong
+         // Fallback timeout in case something prevents 'load' or Telegram script
          setTimeout(() => {
              if (document.body.style.visibility !== 'visible') {
                   console.error("WebApp initialization fallback timeout triggered.");
@@ -798,7 +822,7 @@ TEMPLATE = """
                   if(greetingElement) greetingElement.textContent = 'Ошибка загрузки интерфейса.';
                   document.body.style.visibility = 'visible';
               }
-         }, 5000); // Increased timeout slightly
+         }, 5000); // Increased timeout slightly to 5 seconds
     </script>
 </body>
 </html>
@@ -1064,10 +1088,13 @@ def verify_data():
 
 @app.route('/tonconnect-manifest.json')
 def tonconnect_manifest():
+    # You need to serve your icon file, e.g., place morshengroup.png in a 'static' folder
+    icon_url = request.url_root.rstrip('/') + "/static/morshengroup.png"
     manifest = {
         "url": request.url_root.rstrip('/') + "/tonconnect-manifest.json",
         "name": "Morshen Group Mini App",
-        "iconUrl": request.url_root.rstrip('/') + "/static/morshengroup.png",
+        "iconUrl": icon_url,
+        # !!! IMPORTANT: Replace with actual URLs for your terms of use and privacy policy
         "termsOfUseUrl": "https://example.com/terms",
         "privacyPolicyUrl": "https://example.com/privacy"
     }
@@ -1096,16 +1123,23 @@ def admin_trigger_upload():
 
 @app.route('/static/<path:filename>')
 def static_files(filename):
-     if filename == 'morshengroup.png':
-          try:
-               # Serve morshengroup.jpg as png for the manifest icon
-               return Response(open('morshengroup.jpg', 'rb').read(), mimetype='image/png')
-          except FileNotFoundError:
-               return Response("Icon file not found", status=404)
-     return Response("File not found", status=404)
+     # Assuming you place your icon file (e.g., morshengroup.png) in a 'static' folder
+     # relative to your app.py file.
+     # For the manifest, a PNG is usually required, but the original code used JPG.
+     # Let's assume you have a morshengroup.png in a static folder.
+     static_dir = os.path.join(app.root_path, 'static')
+     return send_from_directory(static_dir, filename)
+
+# Import send_from_directory for the static route
+from flask import send_from_directory
 
 
 if __name__ == '__main__':
+    # Ensure the static directory exists if you're using it for icons
+    if not os.path.exists('static'):
+        os.makedirs('static')
+        # You should place your morshengroup.png file inside the new 'static' folder
+
     download_data_from_hf()
     load_visitor_data()