page.tsx

Обзор файла

Данный файл содержит React-компонент CrossChainPage, реализующий пользовательский интерфейс для управления и мониторинга кроссчейн-моста токенов MANA. Компонент предоставляет несколько вкладок с разной функциональностью: перевод токенов между блокчейнами, переключение и статус сетей, синхронизация цепочек, аналитика и мультичейн-синхронизация.

Основная цель — облегчить пользователю работу с несколькими блокчейнами одновременно, предоставляя данные о состоянии сети, статистику переводов и статус валидаторов, а также обеспечить удобство управления через вкладки и интерактивные элементы.

Подробное описание

Интерфейсы

• CrossChainStats

  Описывает основные статистические данные по кроссчейн-переводам.

  Свойство	Тип	Описание
  totalTransfers	number	Общее количество переводов
  totalVolume	number	Общий объем переведённого MANA
  activeChains	number	Количество активных блокчейнов
  avgConfirmationTime	number	Среднее время подтверждения (в секундах)
  successRate	number	Процент успешных переводов
  validatorCount	number	Количество активных валидаторов

• ChainSyncStatus

  Отражает статус синхронизации конкретной цепочки.

  Свойство	Тип	Описание
  chainId	number	Идентификатор цепочки
  chainName	string	Название цепочки
  lastSync	number	Время последней синхронизации (timestamp)
  blockHeight	number	Текущая высота блока в цепочке
  status	'synced' \	'syncing' \
  syncProgress?	number (опционально)	Прогресс синхронизации в процентах (для 'syncing')

Компонент CrossChainPage

Описание

Главный React-компонент страницы, отвечающий за отображение и управление интерфейсом кроссчейн-моста.

Внутренние состояния

• activeTab — текущая активная вкладка интерфейса ('transfer', 'networks', 'sync', 'analytics', 'multichain').

• stats — статистика по переводам и сети, типа CrossChainStats.

• chainSyncStatus — массив статусов синхронизации для разных цепочек, типа ChainSyncStatus[].

Используемые хуки

• useGame() — кастомный хук для работы с игровой провайдером, откуда получаем методы и состояния подключения игрока (connectPlayer, isConnected).

• useState — для управления состояниями.

• useEffect — для авто подключения игрока и симуляции обновления статистики и статусов цепочек в реальном времени (каждые 5 секунд).

Основные функции внутри компонента

• formatTimeAgo(timestamp: number): string
  Преобразует отметку времени в строку с указанием прошедшего времени (минуты или секунды назад).
  Пример: formatTimeAgo(Date.now() - 60000) // '1m ago'

• getStatusIcon(status: ChainSyncStatus['status'])
  Возвращает иконку из библиотеки lucide-react в зависимости от статуса цепочки:

  • synced — зелёная галочка

  • syncing — синяя иконка часов с анимацией вращения

  • behind — жёлтый треугольник предупреждения

  • error — красный треугольник предупреждения

  • по умолчанию — серый значок часов

• getStatusColor(status: ChainSyncStatus['status'])
  Возвращает класс цветового оформления текста для статуса.

Визуальная структура

• Хедер с названием и описанием моста.

• Краткая статистика с иконками (число активных цепочек, валидаторов, безопасность).

• Основная панель с навигацией по вкладкам.

• Контент вкладок:

  • Transfer: компонент <CrossChainTransfer />

  • Networks: компонент и описание функций сети

  • Multi-Chain Sync: компонент <MultiChainSync />

  • Sync: отображение статусов синхронизации цепочек с прогресс-барами

  • Analytics: статистика объёмов переводов и производительности валидаторов

• Блок с описанием преимуществ мультичейн-экономики.

Пример использования

import CrossChainPage from './page';

function App() {
  return <CrossChainPage />;
}

Важные детали реализации

• Автоматическое подключение демо-пользователя для демонстрационных целей.

• Симуляция динамического обновления статистики и статусов цепочек с помощью интервала.

• Использование иконок из библиотеки lucide-react для визуализации статусов и элементов интерфейса.

• Выделение цветовых схем для индикации разных состояний (успешно, синхронизируется, отстаёт, ошибка).

• Интерфейс адаптивен и использует Tailwind CSS для стилизации.

• Используются вспомогательные компоненты из других частей приложения: CrossChainTransfer, MultiChainSync, NetworkSwitcher.

• Компонент не содержит класса, реализован как функциональный React-компонент с хуками.

Взаимодействие с другими частями системы

• Использует контекст GameProvider через хук useGame() для управления состоянием подключения пользователя.

• Импортирует и отображает дочерние компоненты:

  • CrossChainTransfer — интерфейс перевода токенов

  • MultiChainSync — мультичейн синхронизация

  • NetworkSwitcher — переключение между сетями

• Использует иконки из внешней библиотеки lucide-react для UI.

• Предполагается, что данные статистики и статусов синхронизации могут получаться и обновляться через провайдеры/серверы, здесь же реализована их базовая симуляция.

• Стилизация построена на Tailwind CSS.

Диаграмма структуры компонента

componentDiagram
    component CrossChainPage {
        +activeTab: 'transfer' | 'networks' | 'sync' | 'analytics' | 'multichain'
        +stats: CrossChainStats
        +chainSyncStatus: ChainSyncStatus[]
        +formatTimeAgo(timestamp: number): string
        +getStatusIcon(status: string): JSX.Element
        +getStatusColor(status: string): string
    }

    CrossChainPage --> CrossChainTransfer : отображает при activeTab = 'transfer'
    CrossChainPage --> NetworkSwitcher : отображает при activeTab = 'networks'
    CrossChainPage --> MultiChainSync : отображает при activeTab = 'multichain'
    CrossChainPage --> lucide-react Icons : использует для UI
    CrossChainPage --> useGame Hook : использует для подключения игрока

Резюме

Файл page.tsx реализует комплексный React-компонент для кроссчейн-моста MANA, предоставляя пользователю удобный интерфейс для управления переводами, мониторинга сетей и аналитики. Используются современные React-подходы с хуками, компонентная архитектура и динамическое обновление данных. Взаимодействие с другими модулями приложения реализовано через импорт дочерних компонентов и контекст провайдера.

Это ключевой элемент пользовательского интерфейса, обеспечивающий функциональность мультичейн-экосистемы MANA с упором на визуализацию статусов, статистики и упрощение кроссчейн-операций.