ваше сообщение коммита

2025-09-30 00:23:37 +03:00
parent ca718e3178
commit 4b03951b31
77 changed files with 17161 additions and 7255 deletions
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -53,6 +53,7 @@ import { ref, onMounted, watch, onBeforeUnmount, defineProps, defineEmits, provi
 import { useAuthContext } from '../composables/useAuth';
 import { useAuthFlow } from '../composables/useAuthFlow';
 import { useNotifications } from '../composables/useNotifications';
+import { useTokenBalancesWebSocket } from '../composables/useTokenBalancesWebSocket';
 import { getFromStorage, setToStorage, removeFromStorage } from '../utils/storage';
 import { connectWithWallet } from '../services/wallet';
 import api from '../api/axios';
@@ -68,7 +69,10 @@ import NotificationDisplay from './NotificationDisplay.vue';
 const auth = useAuthContext();
 const { notifications, showSuccessMessage, showErrorMessage } = useNotifications();

-// Определяем props, которые будут приходить от родительского View
+// Используем useTokenBalancesWebSocket для получения актуального состояния загрузки
+const { isLoadingTokens: wsIsLoadingTokens } = useTokenBalancesWebSocket();
+
+// Определяем props, которые будут приходить от родительского View (оставляем для совместимости)
 const props = defineProps({
  isAuthenticated: Boolean,
  identities: Array,
@@ -79,17 +83,26 @@ const props = defineProps({
 // Определяем emits
 const emit = defineEmits(['auth-action-completed']);

+// Используем useAuth напрямую для получения актуальных данных
+const isAuthenticated = computed(() => auth.isAuthenticated.value);
+const identities = computed(() => auth.identities.value);
+const tokenBalances = computed(() => auth.tokenBalances.value);
+const isLoadingTokens = computed(() => {
+  // Приоритет: WebSocket состояние > пропс > false
+  return wsIsLoadingTokens.value || (props.isLoadingTokens !== undefined ? props.isLoadingTokens : false);
+});
+
 // Предоставляем данные дочерним компонентам через provide/inject
-provide('isAuthenticated', computed(() => props.isAuthenticated));
-provide('identities', computed(() => props.identities));
-provide('tokenBalances', computed(() => props.tokenBalances));
-provide('isLoadingTokens', computed(() => props.isLoadingTokens));
+provide('isAuthenticated', isAuthenticated);
+provide('identities', identities);
+provide('tokenBalances', tokenBalances);
+provide('isLoadingTokens', isLoadingTokens);

 // Отладочная информация
-console.log('[BaseLayout] Props received:', {
-  isAuthenticated: props.isAuthenticated,
-  tokenBalances: props.tokenBalances,
-  isLoadingTokens: props.isLoadingTokens
+console.log('[BaseLayout] Auth state:', {
+  isAuthenticated: isAuthenticated.value,
+  tokenBalances: tokenBalances.value,
+  isLoadingTokens: isLoadingTokens.value
 });

 // Callback после успешной аутентификации/привязки через Email/Telegram
@@ -168,6 +181,12 @@ const handleWalletAuth = async () => {
      errorMessage = 'Не удалось подключиться к MetaMask. Проверьте, что расширение установлено и активно.';
    } else if (error.message && error.message.includes('Браузерный кошелек не установлен')) {
      errorMessage = 'Браузерный кошелек не установлен. Пожалуйста, установите MetaMask.';
+    } else if (error.message && error.message.includes('Не удалось получить nonce')) {
+      errorMessage = 'Ошибка получения nonce. Попробуйте обновить страницу и повторить попытку.';
+    } else if (error.message && error.message.includes('Invalid nonce')) {
+      errorMessage = 'Ошибка аутентификации. Попробуйте обновить страницу и повторить попытку.';
+    } else if (error.message && error.message.includes('Nonce expired')) {
+      errorMessage = 'Время сессии истекло. Попробуйте обновить страницу и повторить попытку.';
    } else if (error.message) {
      errorMessage = error.message;
    }
--- a/frontend/src/components/NetworkSwitchNotification.vue
+++ b/frontend/src/components/NetworkSwitchNotification.vue
@@ -0,0 +1,223 @@
+<!--
+  Network Switch Notification Component
+  Компонент для уведомления о необходимости переключения сети
+  
+  Author: HB3 Accelerator
+  For licensing inquiries: info@hb3-accelerator.com
+  Website: https://hb3-accelerator.com
+  GitHub: https://github.com/HB3-ACCELERATOR
+-->
+
+<template>
+  <div v-if="showNotification" class="network-notification">
+    <div class="notification-content">
+      <div class="notification-icon">⚠️</div>
+      <div class="notification-text">
+        <h4>Требуется переключение сети</h4>
+        <p>Для голосования по этому предложению необходимо переключиться на сеть <strong>{{ targetNetworkName }}</strong></p>
+        <p>Текущая сеть: <strong>{{ currentNetworkName }}</strong></p>
+      </div>
+      <div class="notification-actions">
+        <button @click="switchNetwork" class="btn btn-primary" :disabled="isSwitching">
+          {{ isSwitching ? 'Переключение...' : 'Переключить сеть' }}
+        </button>
+        <button @click="dismiss" class="btn btn-secondary">Позже</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed } from 'vue';
+import { switchNetwork, getCurrentNetwork } from '@/utils/networkSwitcher';
+
+export default {
+  name: 'NetworkSwitchNotification',
+  props: {
+    targetChainId: {
+      type: Number,
+      required: true
+    },
+    currentChainId: {
+      type: Number,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['network-switched', 'dismissed'],
+  setup(props, { emit }) {
+    const isSwitching = ref(false);
+    const showNotification = computed(() => props.visible && props.targetChainId !== props.currentChainId);
+
+    const targetNetworkName = computed(() => {
+      const networkNames = {
+        1: 'Ethereum Mainnet',
+        11155111: 'Sepolia',
+        17000: 'Holesky',
+        421614: 'Arbitrum Sepolia',
+        84532: 'Base Sepolia',
+        8453: 'Base'
+      };
+      return networkNames[props.targetChainId] || `Сеть ${props.targetChainId}`;
+    });
+
+    const currentNetworkName = computed(() => {
+      const networkNames = {
+        1: 'Ethereum Mainnet',
+        11155111: 'Sepolia',
+        17000: 'Holesky',
+        421614: 'Arbitrum Sepolia',
+        84532: 'Base Sepolia',
+        8453: 'Base'
+      };
+      return networkNames[props.currentChainId] || `Сеть ${props.currentChainId}`;
+    });
+
+    const switchNetworkHandler = async () => {
+      try {
+        isSwitching.value = true;
+        console.log(`🔄 [Network Switch] Переключаемся на сеть ${props.targetChainId}...`);
+        
+        const result = await switchNetwork(props.targetChainId);
+        
+        if (result.success) {
+          console.log('✅ [Network Switch] Сеть переключена успешно');
+          emit('network-switched', result);
+        } else {
+          console.error('❌ [Network Switch] Ошибка переключения:', result.error);
+          alert(`Ошибка переключения сети: ${result.error}`);
+        }
+      } catch (error) {
+        console.error('❌ [Network Switch] Ошибка:', error);
+        alert(`Ошибка переключения сети: ${error.message}`);
+      } finally {
+        isSwitching.value = false;
+      }
+    };
+
+    const dismiss = () => {
+      emit('dismissed');
+    };
+
+    return {
+      showNotification,
+      targetNetworkName,
+      currentNetworkName,
+      isSwitching,
+      switchNetwork: switchNetworkHandler,
+      dismiss
+    };
+  }
+};
+</script>
+
+<style scoped>
+.network-notification {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  max-width: 400px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ddd;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.notification-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.notification-icon {
+  font-size: 24px;
+  text-align: center;
+}
+
+.notification-text h4 {
+  margin: 0 0 10px 0;
+  color: #333;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.notification-text p {
+  margin: 0 0 8px 0;
+  color: #666;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.notification-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 5px;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: #007bff;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #0056b3;
+}
+
+.btn-secondary {
+  background: #6c757d;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #545b62;
+}
+
+@media (max-width: 768px) {
+  .network-notification {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    max-width: none;
+  }
+  
+  .notification-actions {
+    flex-direction: column;
+  }
+  
+  .btn {
+    width: 100%;
+  }
+}
+</style>
--- a/frontend/src/components/WebSshForm.vue
+++ b/frontend/src/components/WebSshForm.vue
@@ -192,5 +192,275 @@ const formatTime = (timestamp) => {
 </script>

 <style scoped>
-/* Ваши стили для формы */
+/* Статус подключения */
+.connection-status {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+}
+
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  transition: background-color 0.3s ease;
+}
+
+.status-indicator.active {
+  background-color: #28a745;
+  box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
+}
+
+.status-indicator.inactive {
+  background-color: #dc3545;
+}
+
+.status-text {
+  font-weight: 600;
+  color: #333;
+}
+
+.disconnect-btn {
+  background: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: background-color 0.2s;
+}
+
+.disconnect-btn:hover {
+  background: #c82333;
+}
+
+/* Форма */
+.tunnel-form {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.form-section {
+  background: white;
+  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.form-section h3 {
+  margin: 0 0 1.5rem 0;
+  color: var(--color-primary);
+  font-size: 1.25rem;
+  font-weight: 600;
+  border-bottom: 2px solid #f0f0f0;
+  padding-bottom: 0.5rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  background: white;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+}
+
+.form-group input:disabled,
+.form-group textarea:disabled {
+  background: #f8f9fa;
+  color: #6c757d;
+  cursor: not-allowed;
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 120px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+}
+
+/* Дополнительные настройки */
+.advanced-section {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+/* Кнопки */
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-start;
+  margin-top: 1rem;
+}
+
+.publish-btn {
+  background: linear-gradient(135deg, var(--color-primary), #20c997);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 0.75rem 2rem;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  min-width: 140px;
+}
+
+.publish-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, #0056b3, #1ea085);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+}
+
+.publish-btn:disabled {
+  background: #6c757d;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.reset-btn {
+  background: #6c757d;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.reset-btn:hover:not(:disabled) {
+  background: #5a6268;
+  transform: translateY(-1px);
+}
+
+.reset-btn:disabled {
+  background: #adb5bd;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Лог операций */
+.operation-log {
+  margin-top: 2rem;
+  background: white;
+  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.operation-log h3 {
+  margin: 0 0 1rem 0;
+  color: var(--color-primary);
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.log-container {
+  max-height: 300px;
+  overflow-y: auto;
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.log-entry {
+  display: flex;
+  gap: 1rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid #e9ecef;
+  font-size: 0.9rem;
+}
+
+.log-entry:last-child {
+  border-bottom: none;
+}
+
+.log-time {
+  color: #6c757d;
+  font-weight: 600;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.log-message {
+  flex: 1;
+}
+
+.log-entry.success .log-message {
+  color: #28a745;
+  font-weight: 600;
+}
+
+.log-entry.error .log-message {
+  color: #dc3545;
+  font-weight: 600;
+}
+
+.log-entry.info .log-message {
+  color: #17a2b8;
+  font-weight: 600;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+  }
+  
+  .publish-btn,
+  .reset-btn {
+    width: 100%;
+  }
+  
+  .connection-status {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+}
 </style>