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

frontend/src/views/CrmView.vue

@@ -0,0 +1,118 @@
+<template>
+  <BaseLayout>
+    <div class="crm-view-container">
+      <h1>CRM Система</h1>
+      <div v-if="isLoading">Загрузка данных пользователя...</div>
+      <div v-else-if="!auth.isAuthenticated.value">
+        <p>Для доступа к CRM необходимо <button @click="goToHomeAndShowSidebar">войти</button>.</p>
+      </div>
+      <div v-else>
+        <p>Добро пожаловать в CRM!</p>
+        <div v-if="auth.isAdmin.value">
+          <p><strong>У вас полный доступ (Администратор).</strong></p>
+          <!-- Сюда будет добавляться полный функционал CRM -->
+          <p>Здесь будет управление контактами, сделками, задачами и т.д.</p>
+        </div>
+        <div v-else>
+          <p><strong>У вас ограниченный доступ.</strong></p>
+          <!-- Сюда будет добавляться ограниченный функционал CRM -->
+          <p>Здесь будет просмотр ваших контактов и задач.</p>
+        </div>
+         <!-- Демонстрационный блок -->
+         <div class="demo-block">
+            <h3>Демонстрация CRM</h3>
+            <p>Этот раздел будет содержать компоненты CRM...</p>
+         </div>
+      </div>
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useAuth } from '../composables/useAuth';
+import { useRouter } from 'vue-router';
+import { setToStorage } from '../utils/storage';
+import BaseLayout from '../components/BaseLayout.vue';
+import eventBus from '../utils/eventBus';
+
+const auth = useAuth();
+const router = useRouter();
+const isLoading = ref(true);
+
+// Функция для перехода на домашнюю страницу и открытия боковой панели
+const goToHomeAndShowSidebar = () => {
+  setToStorage('showWalletSidebar', true);
+  router.push({ name: 'home' });
+};
+
+// Обработчик события изменения авторизации
+const handleAuthEvent = (eventData) => {
+  console.log('[CrmView] Получено событие изменения авторизации:', eventData);
+  // Можно обновить данные или состояние, если нужно
+  isLoading.value = false;
+};
+
+// Регистрация и очистка обработчика событий
+let unsubscribe = null;
+
+onMounted(() => {
+  console.log('[CrmView] Компонент загружен');
+  isLoading.value = false;
+  
+  // Подписка на события авторизации
+  unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
+});
+
+onBeforeUnmount(() => {
+  // Отписка от события при удалении компонента
+  if (unsubscribe) {
+    unsubscribe();
+  }
+});
+</script>
+
+<style scoped>
+.crm-view-container {
+  max-width: 1150px;
+  margin: 20px auto;
+  padding: 20px;
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  color: var(--color-dark);
+  margin-bottom: 20px;
+}
+
+p {
+  line-height: 1.6;
+  margin-bottom: 10px;
+}
+
+strong {
+ color: var(--color-primary);
+}
+
+.demo-block {
+    margin-top: 30px;
+    padding: 20px;
+    border: 1px dashed var(--color-grey);
+    border-radius: var(--radius-md);
+}
+
+button {
+  padding: 5px 10px;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  margin-left: 5px;
+}
+button:hover {
+  opacity: 0.9;
+}
+</style> 

frontend/src/views/HomeView.vue

@@ -1,245 +1,88 @@
 <template>
-  <div class="app-container">
-    <!-- Основной контент -->
-    <div class="main-content" :class="{ 'no-right-sidebar': !showWalletSidebar }">
-      <div class="header">
-        <div class="header-content">
-          <div class="header-text">
-            <h1 class="title">✌️HB3 - Accelerator DLE</h1>
-            <p class="subtitle">Венчурный фонд и поставщик программного обеспечения</p>
-          </div>
-          <button
-            class="header-wallet-btn"
-            :class="{ active: showWalletSidebar }"
-            @click="toggleWalletSidebar"
-          >
-            <div class="hamburger-line" />
-            <div class="nav-btn-text">
-              {{ showWalletSidebar ? 'Скрыть панель' : 'Подключиться' }}
-            </div>
-          </button>
-        </div>
-      </div>
-
-      <ChatInterface 
-        :messages="messages" 
-        :is-loading="isLoading || isConnectingWallet"
-        :has-more-messages="messageLoading.hasMoreMessages"
-        v-model:newMessage="newMessage"
-        v-model:attachments="attachments"
-        @send-message="handleSendMessage"
-        @load-more="loadMessages"
-      />
-
-            </div>
-
-    <!-- Правая панель с информацией о кошельке -->
-    <Sidebar 
-      v-model="showWalletSidebar" 
-      :is-authenticated="auth.isAuthenticated.value"
-      :telegram-auth="telegramAuth"
-      :email-auth="emailAuth"
-      :token-balances="tokenBalances.value"
-      :identities="auth.identities?.value"
-      @wallet-auth="handleWalletAuth"
-      @disconnect-wallet="disconnectWallet"
-      @telegram-auth="handleTelegramAuth"
-      @cancel-telegram-auth="cancelTelegramAuth"
-      @email-auth="showEmailForm"
-      @send-email-verification="sendEmailVerification"
-      @verify-email-code="verifyEmailCode"
-      @cancel-email-auth="cancelEmailAuth"
+  <BaseLayout>
+    <ChatInterface 
+      :messages="messages" 
+      :is-loading="isLoading || isConnectingWallet"
+      :has-more-messages="messageLoading.hasMoreMessages"
+      v-model:newMessage="newMessage"
+      v-model:attachments="attachments"
+      @send-message="handleSendMessage"
+      @load-more="loadMessages"
     />
-
-    <!-- Компонент для отображения уведомлений -->
-    <NotificationDisplay :notifications="notifications.value" />
-  </div>
+  </BaseLayout>
 </template>
 
 <script setup>
-  import { ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
+  import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
   import { useAuth } from '../composables/useAuth';
   import { useChat } from '../composables/useChat';
-  import { useTokenBalances } from '../composables/useTokenBalances';
-  import { useAuthFlow } from '../composables/useAuthFlow';
-  import { useNotifications } from '../composables/useNotifications';
-  import { getFromStorage, setToStorage, removeFromStorage } from '../utils/storage';
   import { connectWithWallet } from '../services/wallet';
-  import api from '../api/axios';
+  import eventBus from '../utils/eventBus';
   import '../assets/styles/home.css';
-  import Sidebar from '../components/Sidebar.vue';
+  import BaseLayout from '../components/BaseLayout.vue';
   import ChatInterface from '../components/ChatInterface.vue';
-  import NotificationDisplay from '../components/NotificationDisplay.vue';
 
-  console.log('HomeView.vue: Refactored version');
+  console.log('HomeView.vue: Using BaseLayout');
 
   // =====================================================================
   // 1. ИСПОЛЬЗОВАНИЕ COMPOSABLES
   // =====================================================================
 
   const auth = useAuth();
-  const { notifications, showSuccessMessage, showErrorMessage } = useNotifications();
-  const { tokenBalances } = useTokenBalances();
 
-  // Callback после успешной аутентификации/привязки через Email/Telegram
-  const handleAuthFlowSuccess = (authType) => {
-    console.log(`[HomeView] Auth flow success: ${authType}`);
-    // Загружаем сообщения после успешной аутентификации/привязки
-    // useChat должен сам обработать изменение auth.isAuthenticated, но можем вызвать явно для гарантии
-    loadMessages({ initial: true, authType });
-    // useTokenBalances сам следит за auth состоянием для обновления балансов
-  };
+  // =====================================================================
+  // 2. СОСТОЯНИЯ КОМПОНЕНТА
+  // =====================================================================
 
-  const {
-    telegramAuth,
-    handleTelegramAuth,
-    cancelTelegramAuth,
-    emailAuth,
-    showEmailForm,
-    sendEmailVerification,
-    verifyEmailCode,
-    cancelEmailAuth,
-  } = useAuthFlow({ onAuthSuccess: handleAuthFlowSuccess });
+  const isConnectingWallet = ref(false); // Флаг для процесса подключения кошелька
+
+  // =====================================================================
+  // 3. ИСПОЛЬЗОВАНИЕ ЧАТА
+  // =====================================================================
 
   const {
     messages,
     newMessage,
     attachments,
-    isLoading, // Переименовано из isLoadingChat
+    isLoading,
     messageLoading,
     loadMessages,
     handleSendMessage,
   } = useChat(auth);
 
-  // =====================================================================
-  // 2. СОСТОЯНИЯ КОМПОНЕНТА (Оставшиеся)
-  // =====================================================================
-
-  const showWalletSidebar = ref(false);
-  const isConnectingWallet = ref(false); // Отдельный флаг для процесса подключения кошелька
-
-  // =====================================================================
-  // 3. ФУНКЦИИ (Оставшиеся или обертки для composables)
-  // =====================================================================
-
-  /**
-   * Обрабатывает аутентификацию через кошелек
-   */
-  const handleWalletAuth = async () => {
-    if (isConnectingWallet.value) return;
-    isConnectingWallet.value = true;
-    try {
-      const result = await connectWithWallet();
-      console.log('[HomeView] Результат подключения кошелька:', result);
-
-      if (result.success) {
-        if (auth.isAuthenticated.value) {
-          // Связывание кошелька с существующим аккаунтом
-          console.log('[HomeView] Связывание кошелька с существующим аккаунтом:', result.address);
-          const linkResult = await auth.linkIdentity('wallet', result.address);
-          if (linkResult.success) {
-            showSuccessMessage('Кошелек успешно подключен к вашему аккаунту!');
-            await auth.checkAuth(); // Обновить identities
-            // useTokenBalances обновит балансы автоматически через watch
-          } else {
-            showErrorMessage(linkResult.error || 'Не удалось подключить кошелек');
-          }
-        } else {
-          // Новая аутентификация через кошелек
-          const authResponse = await auth.checkAuth();
-          if (authResponse.authenticated && authResponse.authType === 'wallet') {
-            console.log('[HomeView] Кошелёк успешно подключен и аутентифицирован');
-            showSuccessMessage('Кошелёк успешно подключен!');
-            // Загрузка сообщений произойдет через watch в useChat
-            // Обновление балансов произойдет через watch в useTokenBalances
-            loadMessages({ initial: true, authType: 'wallet' }); // Принудительно перезагрузим историю
-          } else {
-             showErrorMessage('Не удалось завершить аутентификацию через кошелек.');
-          }
-        }
-      } else {
-        console.error('[HomeView] Не удалось подключить кошелёк:', result.error);
-        showErrorMessage(result.error || 'Не удалось подключить кошелёк');
-      }
-    } catch (error) {
-      console.error('[HomeView] Ошибка при подключении кошелька:', error);
-      showErrorMessage('Произошла ошибка при подключении кошелька');
-    } finally {
-      isConnectingWallet.value = false;
-    }
-  };
-
-  /**
-   * Выполняет выход из аккаунта
-   */
-  const disconnectWallet = async () => {
-    console.log('[HomeView] Выполняется выход из системы...');
-    try {
-      // useTokenBalances остановит обновление балансов через watch
-      await api.post('/api/auth/logout');
-      // Вызываем checkAuth(), чтобы useAuth обновил состояние на основе ответа сервера (не аутентифицирован)
-      await auth.checkAuth(); 
-      showSuccessMessage('Вы успешно вышли из системы');
-      // useChat сбросит сообщения через watch
-      removeFromStorage('guestMessages'); // Доп. очистка
-      removeFromStorage('hasUserSentMessage');
-    } catch (error) {
-      console.error('[HomeView] Ошибка при выходе из системы:', error);
-      showErrorMessage('Произошла ошибка при выходе из системы');
-      // Может потребоваться принудительная очистка состояния auth
-      // await auth.checkAuth(); // Попробовать еще раз в catch, если необходимо
-    }
-  };
-
-  /**
-   * Переключает отображение боковой панели
-   */
-  const toggleWalletSidebar = () => {
-    showWalletSidebar.value = !showWalletSidebar.value;
-    setToStorage('showWalletSidebar', showWalletSidebar.value);
-  };
-
   // =====================================================================
   // 4. ЖИЗНЕННЫЙ ЦИКЛ
   // =====================================================================
 
+  let unsubscribe = null;
+
   onMounted(() => {
-    console.log('[HomeView] Компонент загружен (refactored)');
-
-    // Загружаем сохраненное состояние боковой панели
-    const savedSidebarState = getFromStorage('showWalletSidebar');
-    if (savedSidebarState !== null) {
-      showWalletSidebar.value = savedSidebarState; // getFromStorage теперь парсит JSON
-    } else {
-      showWalletSidebar.value = true;
-      setToStorage('showWalletSidebar', true);
-    }
-
-    // Начальная проверка аутентификации (useAuth делает это при инициализации)
-    // Начальная загрузка сообщений (useChat делает это в onMounted)
-    // Начальное обновление балансов (useTokenBalances делает это при инициализации/watch)
-
-    // Пример добавления слушателя (если все еще нужен)
-    // window.addEventListener('load-chat-history', () => loadMessages({ initial: true }));
+    console.log('[HomeView] Компонент загружен (обновленная версия)');
+    
+    // Подписка на события авторизации
+    unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
   });
 
   onBeforeUnmount(() => {
-    // Очистка интервалов происходит внутри composables (useTokenBalances, useAuthFlow)
-    // window.removeEventListener('load-chat-history', () => loadMessages({ initial: true }));
+    // Отписка от события при удалении компонента
+    if (unsubscribe) {
+      unsubscribe();
+    }
   });
 
   // =====================================================================
-  // 5. WATCHERS (Если нужны специфичные для View)
+  // 5. ОБРАБОТКА СОБЫТИЙ АВТОРИЗАЦИИ
   // =====================================================================
 
-  // Пример: показать панель гостю после первого сообщения
-  watch(messages, (currentMessages, prevMessages) => {
-    if (!auth.isAuthenticated.value && 
-        currentMessages.length > (prevMessages?.length || 0) &&
-        currentMessages[currentMessages.length - 1]?.sender_type === 'user' &&
-        !showWalletSidebar.value) {
-      console.log('[HomeView] Показываем панель гостю после первого сообщения.');
-      toggleWalletSidebar();
+  // Функция обновления сообщений после авторизации
+  const handleAuthEvent = (eventData) => {
+    console.log('[HomeView] Получено событие изменения авторизации:', eventData);
+    if (eventData.isAuthenticated) {
+      // Пользователь только что авторизовался - загрузим сообщения
+      loadMessages({ initial: true, authType: eventData.authType || 'wallet' });
+    } else {
+      // Пользователь вышел из системы - можно очистить или обновить данные
+      loadMessages({ initial: true });
     }
-  }, { deep: false });
+  };
 </script>

frontend/src/views/SettingsView.vue

@@ -0,0 +1,374 @@
+<template>
+  <BaseLayout>
+    <div class="settings-view-container">
+      <h1>Настройки</h1>
+      
+      <!-- Блок информации о пользователе (всегда виден) -->
+      <div class="user-info-section">
+        <h3>Ваши идентификаторы:</h3>
+        <div v-if="!auth.isAuthenticated.value" class="user-info-empty">
+          Войдите, чтобы увидеть идентификаторы
+        </div>
+        <div v-else class="user-info-item">
+          <span class="user-info-label">Кошелек:</span>
+          <span v-if="hasIdentityType('wallet')" class="user-info-value">
+            {{ truncateAddress(getIdentityValue('wallet')) }}
+          </span>
+          <span v-else class="user-info-value">Не подключен</span>
+        </div>
+      </div>
+      
+      <!-- Блок баланса токенов (всегда виден) -->
+      <div class="token-balances-section">
+        <h3>Баланс токенов:</h3>
+        <div v-if="!auth.isAuthenticated.value" class="token-no-data">
+          Войдите, чтобы увидеть баланс токенов
+        </div>
+        <div v-else-if="isLoadingTokens" class="token-loading">
+          Загрузка балансов...
+        </div>
+        <div v-else-if="!hasTokenBalances" class="token-no-data">
+          Информация о балансе не доступна
+        </div>
+        <div v-else>
+          <div v-if="tokenBalances.eth" class="token-balance">
+            <span class="token-name">ETH:</span>
+            <span class="token-amount">{{ Number(tokenBalances.eth).toLocaleString() }}</span>
+            <span class="token-symbol">{{ TOKEN_CONTRACTS.eth.symbol }}</span>
+          </div>
+          <div v-if="tokenBalances.bsc" class="token-balance">
+            <span class="token-name">BSC:</span>
+            <span class="token-amount">{{ Number(tokenBalances.bsc).toLocaleString() }}</span>
+            <span class="token-symbol">{{ TOKEN_CONTRACTS.bsc.symbol }}</span>
+          </div>
+          <div v-if="tokenBalances.arbitrum" class="token-balance">
+            <span class="token-name">ARB:</span>
+            <span class="token-amount">{{ Number(tokenBalances.arbitrum).toLocaleString() }}</span>
+            <span class="token-symbol">{{ TOKEN_CONTRACTS.arbitrum.symbol }}</span>
+          </div>
+          <div v-if="tokenBalances.polygon" class="token-balance">
+            <span class="token-name">POL:</span>
+            <span class="token-amount">{{ Number(tokenBalances.polygon).toLocaleString() }}</span>
+            <span class="token-symbol">{{ TOKEN_CONTRACTS.polygon.symbol }}</span>
+          </div>
+        </div>
+      </div>
+      
+      <div v-if="isLoading">Загрузка данных пользователя...</div>
+      <div v-else-if="!auth.isAuthenticated.value">
+        <p>Для доступа к настройкам необходимо <button @click="goToHomeAndShowSidebar">войти</button>.</p>
+      </div>
+      <div v-else>
+        <p>Добро пожаловать в Настройки!</p>
+        
+        <div v-if="auth.isAdmin.value">
+          <p><strong>У вас полный доступ (Администратор).</strong></p>
+          <!-- Сюда будут добавляться полные настройки -->
+          <p>Здесь будут настройки системы, управление пользователями и т.д.</p>
+        </div>
+        <div v-else>
+          <p><strong>У вас ограниченный доступ.</strong></p>
+          <!-- Сюда будут добавляться ограниченные настройки -->
+          <p>Здесь будут настройки профиля, уведомлений и т.д.</p>
+        </div>
+        <!-- Общие настройки для всех авторизованных -->
+        <div class="general-settings">
+          <h3>Общие настройки</h3>
+          <label>
+            Язык интерфейса: 
+            <select v-model="selectedLanguage">
+              <option value="ru">Русский</option>
+              <option value="en">English</option> 
+            </select>
+          </label>
+        </div>
+      </div>
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onBeforeUnmount, computed } from 'vue';
+import { useAuth } from '../composables/useAuth';
+import { useRouter } from 'vue-router';
+import { getFromStorage, setToStorage } from '../utils/storage';
+import BaseLayout from '../components/BaseLayout.vue';
+import eventBus from '../utils/eventBus';
+import { TOKEN_CONTRACTS } from '../services/tokens';
+import { fetchTokenBalances } from '../services/tokens';
+
+const auth = useAuth();
+const router = useRouter();
+const isLoading = ref(true);
+const selectedLanguage = ref(getFromStorage('userLanguage', 'ru'));
+
+// Состояние для токенов
+const tokenBalances = ref({});
+const isLoadingTokens = ref(false);
+const hasTokenBalances = computed(() => {
+  return tokenBalances.value && 
+    Object.keys(tokenBalances.value).length > 0 && 
+    Object.values(tokenBalances.value).some(value => parseInt(value) > 0);
+});
+
+// Получаем данные об идентификаторах пользователя
+const identities = computed(() => auth.identities.value);
+
+// Вспомогательные функции
+const truncateAddress = (address) => {
+  if (!address) return '';
+  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
+};
+
+const hasIdentityType = (type) => {
+  if (!identities.value) return false;
+  return identities.value.some((identity) => identity.provider === type);
+};
+
+const getIdentityValue = (type) => {
+  if (!identities.value) return null;
+  const identity = identities.value.find((identity) => identity.provider === type);
+  return identity ? identity.provider_id : null;
+};
+
+// Обновление балансов токенов
+const refreshTokenBalances = async () => {
+  if (!hasIdentityType('wallet')) return;
+  
+  isLoadingTokens.value = true;
+  try {
+    const walletAddress = getIdentityValue('wallet');
+    console.log('[SettingsView] Обновление балансов для адреса:', walletAddress);
+    
+    const balances = await fetchTokenBalances(walletAddress);
+    console.log('[SettingsView] Полученные балансы:', balances);
+    
+    tokenBalances.value = balances || {};
+  } catch (error) {
+    console.error('[SettingsView] Ошибка при получении балансов:', error);
+    tokenBalances.value = {};
+  } finally {
+    isLoadingTokens.value = false;
+  }
+};
+
+// Следим за изменениями в идентификаторах
+watch(() => identities.value, (newIdentities, oldIdentities) => {
+  if (hasIdentityType('wallet')) {
+    // Проверяем, появился ли новый идентификатор кошелька или изменился существующий
+    const newWalletId = getIdentityValue('wallet');
+    const oldWalletIdentity = oldIdentities ? oldIdentities.find(id => id.provider === 'wallet') : null;
+    const oldWalletId = oldWalletIdentity ? oldWalletIdentity.provider_id : null;
+    
+    if (newWalletId !== oldWalletId) {
+      console.log('[SettingsView] Обнаружено изменение идентификатора кошелька, обновляем балансы');
+      refreshTokenBalances();
+    }
+  }
+}, { deep: true });
+
+// Обработчик события изменения авторизации
+const handleAuthEvent = (eventData) => {
+  console.log('[SettingsView] Получено событие изменения авторизации:', eventData);
+  isLoading.value = false;
+  
+  // При изменении авторизации обновляем балансы
+  if (eventData.isAuthenticated) {
+    setTimeout(() => {
+      refreshTokenBalances(); // Небольшая задержка для обновления идентификаторов
+    }, 500);
+  }
+};
+
+// Сохраняем язык при изменении
+watch(selectedLanguage, (newLang) => {
+  setToStorage('userLanguage', newLang);
+  // TODO: Добавить логику для реальной смены языка интерфейса (например, через i18n)
+  console.log(`[Settings] Язык изменен на: ${newLang}`);
+});
+
+const goToHomeAndShowSidebar = () => {
+  setToStorage('showWalletSidebar', true);
+  router.push({ name: 'home' });
+};
+
+// Регистрация и очистка обработчика событий
+let unsubscribe = null;
+
+onMounted(() => {
+  console.log('[SettingsView] Компонент загружен');
+  isLoading.value = false;
+  
+  // Подписка на события авторизации
+  unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
+  
+  // Обновляем данные о балансе токенов при загрузке
+  if (auth.isAuthenticated.value && hasIdentityType('wallet')) {
+    refreshTokenBalances();
+  }
+});
+
+onBeforeUnmount(() => {
+  // Отписка от события при удалении компонента
+  if (unsubscribe) {
+    unsubscribe();
+  }
+});
+
+// Следим за состоянием авторизации для очистки данных при выходе
+watch(() => auth.isAuthenticated.value, (isAuth) => {
+  if (!isAuth) {
+    // Очищаем данные при выходе из системы
+    tokenBalances.value = {};
+  }
+});
+</script>
+
+<style scoped>
+.settings-view-container {
+  max-width: 1150px;
+  margin: 20px auto;
+  padding: 20px;
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  color: var(--color-dark);
+  margin-bottom: 20px;
+}
+
+p {
+  line-height: 1.6;
+  margin-bottom: 10px;
+}
+
+strong {
+ color: var(--color-primary);
+}
+
+.general-settings {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid var(--color-grey-light);
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+select {
+    padding: 8px;
+    border: 1px solid var(--color-grey);
+    border-radius: var(--radius-md);
+    margin-left: 10px;
+}
+
+button {
+  padding: 5px 10px;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  margin-left: 5px;
+}
+button:hover {
+  opacity: 0.9;
+}
+button:disabled {
+  background-color: var(--color-grey);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* Стили для блока информации о пользователе */
+.user-info-section {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: var(--color-light);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-grey-light);
+}
+
+.user-info-item {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.user-info-label {
+  min-width: 100px;
+  font-weight: 500;
+}
+
+.user-info-value {
+  font-family: monospace;
+  padding: 5px 10px;
+  background-color: var(--color-white);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-grey-light);
+}
+
+/* Стили для блока баланса токенов */
+.token-balances-section {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: var(--color-light);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-grey-light);
+}
+
+.token-balance {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.token-name {
+  min-width: 60px;
+  font-weight: 500;
+}
+
+.token-amount {
+  font-family: monospace;
+  padding: 5px 10px;
+  background-color: var(--color-white);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-grey-light);
+  margin-right: 10px;
+}
+
+.token-symbol {
+  color: var(--color-primary);
+  font-weight: 500;
+}
+
+.token-loading,
+.token-no-data {
+  margin: 15px 0;
+  padding: 10px;
+  text-align: center;
+  color: var(--color-grey-dark);
+  font-style: italic;
+}
+
+/* Удаляем стили для кнопки обновления баланса, поскольку больше не нужны */
+.token-action,
+.refresh-btn {
+  display: none;
+}
+
+.user-info-empty,
+.token-no-data {
+  margin: 15px 0;
+  padding: 10px;
+  text-align: center;
+  color: var(--color-grey-dark);
+  font-style: italic;
+}
+</style>