NetworkSwitcher.tsx

Обзор

NetworkSwitcher.tsx — это React-компонент, предназначенный для отображения и управления переключением между различными блокчейн-сетями в приложении. Компонент позволяет пользователю просматривать список поддерживаемых сетей, видеть их статус подключения, текущие параметры (такие как задержка, баланс токенов MANA и цена газа), а также переключаться между ними. Визуально реализован выпадающий список с подробной информацией и таблица сравнения сетей. Компонент интегрируется с игровым провайдером (GameProvider), чтобы выполнять действия переключения сети в рамках игрового процесса.

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

Интерфейсы и типы

NetworkInfo

Определяет структуру объекта, описывающего параметры сети.

Константы

SUPPORTED_NETWORKS

Массив объектов NetworkInfo, представляющий список поддерживаемых сетей с предзаполненными значениями параметров. Включает основные сети Ethereum, Polygon, Arbitrum, Optimism, Base и тестовую сеть Sepolia.

Компонент: NetworkSwitcher

Описание

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

Пропсы

Хуки состояния

• networks (NetworkInfo[]): локальное состояние с актуальным списком сетей и их статусов.

• currentNetwork (NetworkInfo): выбранная в данный момент сеть.

• isDropdownOpen (boolean): открыто ли выпадающее меню выбора сети.

• isSwitching (boolean): идет процесс переключения сети.

• switchingTo (number | null): id сети, в которую в данный момент происходит переключение.

Взаимодействие с провайдером

Используется хук useGame() для получения объекта player и метода performAction. При переключении сети вызывается performAction с типом действия 'NETWORK_SWITCH', что позволяет интегрировать смену сети в игровой процесс.

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

handleNetworkSwitch(network: NetworkInfo): Promise<void>

Асинхронная функция, обрабатывающая логику переключения на выбранную сеть.

• Параметры:

  • network: объект NetworkInfo, выбранная сеть для подключения.

• Логика:

  1. Отмена, если выбранная сеть совпадает с текущей.

  2. Установка состояния переключения (запуск индикатора загрузки).

  3. Если сеть в статусе 'disconnected', имитируется процесс подключения с задержкой:

     • Переход в статус 'connecting'.

     • Задержка 2 секунды.

     • Обновление статуса на 'connected' с рандомной задержкой и балансом MANA.

  4. Вызов performAction для фиксации переключения в игровом контексте.

  5. Обновление текущей сети и вызов коллбека onNetworkSwitch.

  6. Отображение уведомления об успешном переключении.

  7. Обработка ошибок с установкой статуса 'error' и уведомлением пользователя.

  8. Завершение процесса переключения (сброс состояний).

• Использование:

await handleNetworkSwitch(selectedNetwork);

getStatusIcon(network: NetworkInfo): JSX.Element

Возвращает иконку статуса сети в зависимости от текущего статуса и процесса переключения.

• Используемые иконки:

  • Wifi — подключена

  • Loader2 с анимацией — подключение или переключение

  • WifiOff — отключена

  • AlertCircle — ошибка

getStatusColor(status: NetworkInfo['status']): string

Возвращает CSS-класс с цветом текста для отображения статуса.

UI компоненты

• Отображение текущей сети:

  • Название, цветной индикатор, статус с иконкой.

  • Выпадающий список для выбора другой сети.

  • Основные параметры: статус, баланс MANA, задержка, цена газа.

  • Ссылка на обозреватель блоков.

• Таблица сравнения сетей:

  • Отображение всех (или без тестовых) сетей вместе с их статусами и параметрами.

  • Кнопка переключения сети для каждой записи.

• Блок с преимуществами сети:

  • Описание преимуществ переключения сетей.

  • Визуальные иконки и краткие описания.

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

• Используется периодическое обновление параметров сети (например, высоты блока и задержки) с помощью setInterval внутри useEffect, имитируя динамическую смену данных.

• Переключение сети симулируется с задержкой и меняет статус сети в локальном состоянии.

• Обработка ошибок переключения включает визуальное уведомление и установку статуса 'error'.

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

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

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

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

• GameProvider: Компонент использует контекст игры через хук useGame(). Это позволяет интегрировать переключение сети как игровое действие (performAction('NETWORK_SWITCH', ...)).

• Иконки из lucide-react: Для отображения статусов и элементов UI.

• Внешние RPC и обозреватели: Используются URL для подключения к сетям и просмотра блоков.

• Вероятно, компонент является частью интерфейса пользователя в игровом приложении, где управление сетью критично для функционала.

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

import { NetworkSwitcher } from './NetworkSwitcher';

function App() {
  const handleNetworkChange = (network) => {
    console.log('Выбранная сеть:', network.name);
  };

  return (
    <div>
      <NetworkSwitcher onNetworkSwitch={handleNetworkChange} showTestnets={true} />
    </div>
  );
}

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

componentDiagram
    component NetworkSwitcher {
      +props: { onNetworkSwitch?: (NetworkInfo) => void, showTestnets?: boolean }
      -state: networks: NetworkInfo[]
      -state: currentNetwork: NetworkInfo
      -state: isDropdownOpen: boolean
      -state: isSwitching: boolean
      -state: switchingTo: number | null
      +handleNetworkSwitch(network: NetworkInfo): Promise<void>
      +getStatusIcon(network: NetworkInfo): JSX.Element
      +getStatusColor(status: string): string
      +render()
    }
    component GameProvider
    component lucide-react Icons
    NetworkSwitcher --> GameProvider : useGame()
    NetworkSwitcher --> "lucide-react Icons" : Status icons

Итог

NetworkSwitcher.tsx — мощный и удобный React-компонент для управления сетями блокчейна в игровом приложении. Он предоставляет пользователю подробную информацию о доступных сетях, позволяет переключаться между ними с имитацией процесса подключения и интегрируется с игровым контекстом для отражения изменений в игровой логике. Компонент обеспечивает интуитивный интерфейс с визуальными индикаторами и таблицей сравнения, а также гибко настраивается через пропсы (например, для отображения тестовых сетей).