NetworkSelector.tsx

Обзор

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

Компонент поддерживает два режима отображения: компактный (compact) и расширенный, что позволяет интегрировать его как в ограниченный интерфейс (например, панель инструментов), так и в полноценное окно выбора.

Описание содержимого файла

Интерфейс NetworkInfo

interface NetworkInfo {
  id: number;
  name: string;
  symbol: string;
  color: string;
  rpcUrl: string;
  explorerUrl: string;
  status: 'connected' | 'connecting' | 'disconnected' | 'error';
  blockHeight?: number;
  latency?: number;
  manaBalance?: number;
}

Определяет структуру данных для одной сети блокчейна.

• id — уникальный идентификатор сети

• name — название сети

• symbol — символ (тикер) токена сети

• color — цвет для визуального отображения сети

• rpcUrl — URL RPC-сервера для взаимодействия с сетью

• explorerUrl — URL блок-эксплорера сети

• status — статус подключения (connected, connecting, disconnected, error)

• blockHeight — текущая высота блока (опционально)

• latency — задержка сети в миллисекундах (опционально)

• manaBalance — баланс токенов MANA в сети (опционально)

Константа SUPPORTED_NETWORKS

Массив из нескольких объектов типа NetworkInfo, содержащий предопределённый список популярных сетей:

• Ethereum Mainnet

• Polygon

• Arbitrum One

• Optimism

• Base

Каждая сеть имеет предустановленные параметры и начальный статус подключения.

Интерфейс NetworkSelectorProps

interface NetworkSelectorProps {
  selectedNetwork?: NetworkInfo;
  onNetworkChange?: (network: NetworkInfo) => void;
  showBalances?: boolean;
  compact?: boolean;
}

Параметры компонента NetworkSelector:

• selectedNetwork — текущая выбранная сеть (по умолчанию первая из списка)

• onNetworkChange — callback при смене сети, принимает выбранный объект сети

• showBalances — флаг отображения баланса MANA и статуса (по умолчанию true)

• compact — флаг включения компактного режима отображения (по умолчанию false)

Компонент NetworkSelector

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

Состояния (useState)

• networks — список сетей с актуальными параметрами и статусами

• isOpen — флаг открытия выпадающего списка сетей (для компактного режима)

• currentNetwork — текущая выбранная сеть

Эффект (useEffect)

• Запускает интервал обновления параметров сети каждые 5 секунд.

• Имитация изменения высоты блока и задержки (latency) для каждой сети.

• Задержка изменяется только для сетей со статусом connected.

Основные функции

• handleNetworkSelect(network: NetworkInfo): void

  Обрабатывает выбор сети пользователем.

  • Если сеть была отключена (disconnected), имитирует процесс подключения (connecting) с задержкой в 2 секунды, после чего устанавливает статус connected с рандомной задержкой и балансом.

  • Обновляет выбранную сеть currentNetwork, закрывает список и вызывает callback onNetworkChange.

• getStatusIcon(status: NetworkInfo['status']): JSX.Element

  Возвращает иконку из библиотеки lucide-react, соответствующую статусу сети:

  • connected — Wifi (зелёный)

  • connecting — Loader2 (желтый, анимация)

  • disconnected — WifiOff (серый)

  • error — AlertCircle (красный)

  • По умолчанию — WifiOff (серый)

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

  Возвращает CSS-класс цвета текста для статуса, совпадающий с цветом иконки.

Рендеринг

Компонент рендерит два варианта интерфейса:

Компактный режим (compact === true)

• Кнопка с названием и цветом текущей сети, иконкой статуса и стрелкой выпадающего списка.

• При нажатии открывается выпадающий список с кнопками для выбора сети.

• В списке отображается цвет, имя, задержка (если подключена) и иконка статуса.

Расширенный режим (compact === false)

• Заголовок с иконкой сети и надписью "Network Selection".

• Список карточек сетей:

  • Каждая карточка выделяется, если это текущая сеть.

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

  • Дополнительно отображаются:

    • Высота блока

    • Задержка

    • Баланс MANA (если showBalances == true)

    • Текстовый статус ("Synced", "Syncing...", "Offline")

  • Если статус сети connecting, отображается индикатор прогресса.

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

import { NetworkSelector } from './NetworkSelector';

function App() {
  const handleChange = (network) => {
    console.log('Selected network:', network.name);
  };

  return (
    <div>
      <NetworkSelector 
        onNetworkChange={handleChange} 
        showBalances={true} 
        compact={false} 
      />
    </div>
  );
}

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

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

• Симуляция сетевых изменений реализована через setInterval и setTimeout.

• Для визуализации статуса используются иконки из lucide-react.

• Поддерживается кастомизация отображения (показ баланса, компактный режим).

• Используются Tailwind CSS классы для стилизации.

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

Взаимодействие с остальной системой

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

• Внешним компонентам можно передать callback onNetworkChange для получения уведомления о смене сети.

• rpcUrl и explorerUrl сетей могут использоваться в других частях приложения для запросов и переходов.

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

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

componentDiagram
    component NetworkSelector {
      +props: NetworkSelectorProps
      +state: networks: NetworkInfo[]
      +state: isOpen: boolean
      +state: currentNetwork: NetworkInfo
      +useEffect: обновление параметров сетей
      +handleNetworkSelect(network: NetworkInfo): void
      +getStatusIcon(status): JSX.Element
      +getStatusColor(status): string
      +render(): JSX.Element
    }
    NetworkSelector --> NetworkInfo
    NetworkSelector ..> lucide-react-icons

Итог

Файл NetworkSelector.tsx — это полностью функциональный React-компонент для выбора и мониторинга состояния нескольких блокчейн-сетей с поддержкой имитации динамики их параметров. Он легко интегрируется в различные интерфейсы и предоставляет гибкие настройки отображения.