CrossChainTransfer.tsx

Обзор

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

Основной функционал:

Выбор исходной и целевой цепочки из списка поддерживаемых.
Ввод суммы перевода и адреса получателя.
Инициация трансфера с имитацией процесса подтверждения (валидирования) и завершения.
Отображение истории трансферов с текущим статусом, временем, прогрессом валидации и ссылками на блокчейн-эксплореры.

Основные сущности

Интерфейсы

`CrossChainTransfer`

Описание одного кросс-чейн трансфера.

Свойство	Тип	Описание
`id`	`string`	Уникальный идентификатор трансфера
`from`	`string`	Адрес отправителя
`to`	`string`	Адрес получателя
`amount`	`number`	Сумма перевода в MANA
`sourceChain`	`ChainInfo`	Информация об исходной цепочке
`targetChain`	`ChainInfo`	Информация о целевой цепочке
`status`	`'INITIATED'	'VALIDATING'
`timestamp`	`number`	Временная метка создания трансфера
`txHash?`	`string`	Хеш транзакции (если есть)
`validatorCount`	`number`	Количество валидаторов, подтвердивших трансфер
`requiredValidators`	`number`	Требуемое количество валидаторов
`estimatedTime?`	`number`	Оценочное время, оставшееся до завершения (секунды)

`ChainInfo`

Описание блокчейн-сети.

Свойство	Тип	Описание
`id`	`number`	Идентификатор цепочки
`name`	`string`	Название цепочки
`symbol`	`string`	Символ валюты (токена)
`color`	`string`	Цвет для UI
`rpcUrl`	`string`	URL RPC-узла для взаимодействия
`explorerUrl`	`string`	URL блокчейн-эксплорера

Константа

SUPPORTED_CHAINS — массив поддерживаемых цепочек с их параметрами.

Компонент `CrossChainTransfer`

Функциональный React-компонент, реализующий UI и логику трансфера токенов между цепочками.

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

sourceChain и targetChain: выбранные цепочки отправления и получения.
amount: строка с суммой перевода.
recipient: адрес получателя.
isTransferring: индикатор процесса перевода.
transfers: массив текущих кросс-чейн трансферов (история).
showAdvanced: показывать или скрывать расширенные опции.

Логика и методы

`handleSwapChains()`

Меняет местами исходную и целевую цепочки.

`handleTransfer()`

Запускает процесс трансфера:

Проверяет валидность введенных данных.
Создает новый объект трансфера с статусом INITIATED.
Добавляет новый трансфер в историю.
Вызывает метод performAction из useGame для выполнения операции.
Симулирует изменение статусов:
- Через 2 секунды переводится в статус VALIDATING с прогрессом.
- Через 8 секунд переводится в статус COMPLETED с хешем транзакции.
Очищает форму ввода.
Обрабатывает ошибки и отключает индикатор загрузки.

`getStatusIcon(status)`

Возвращает JSX-иконку, соответствующую статусу трансфера.

`getStatusColor(status)`

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

`formatTimeAgo(timestamp)`

Форматирует метку времени в удобочитаемый формат времени, прошедшего с момента события (например, "5m ago" или "1h 20m ago").

`formatEstimatedTime(seconds)`

Форматирует оставшееся время из секунд в минуты и секунды.

UI Компоненты

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

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

import { CrossChainTransfer } from './CrossChainTransfer';

function App() {
  return (
    <div>
      <CrossChainTransfer />
    </div>
  );
}

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

Используется хук useGame из ../providers/GameProvider для доступа к данным игрока (player) и метода performAction для инициирования трансфера.
Интеграция с UI-библиотекой иконок lucide-react для отображения статусов и действий.
Поддерживает ссылки на внешние блокчейн-эксплореры для просмотра транзакций.
Работает с глобальным состоянием игрока, управляемым через GameProvider.

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

Компонент использует моковые данные в useEffect для демонстрации истории трансферов.
Симуляция процесса трансфера с задержками setTimeout для имитации изменения статусов.
Валидация данных формы с ограничением суммы на балансе игрока.
Отображение прогресса валидации с визуальным прогресс-баром.
Гибкая работа с множеством цепочек, исключая выбор одинаковых цепочек для отправки и получения.

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

classDiagram
    class CrossChainTransfer {
        -sourceChain: ChainInfo
        -targetChain: ChainInfo
        -amount: string
        -recipient: string
        -isTransferring: boolean
        -transfers: CrossChainTransfer[]
        -showAdvanced: boolean
        +handleSwapChains()
        +handleTransfer()
        +getStatusIcon(status)
        +getStatusColor(status)
        +formatTimeAgo(timestamp)
        +formatEstimatedTime(seconds)
        +render()
    }

    class ChainInfo {
        +id: number
        +name: string
        +symbol: string
        +color: string
        +rpcUrl: string
        +explorerUrl: string
    }

    class CrossChainTransferInterface {
        +id: string
        +from: string
        +to: string
        +amount: number
        +sourceChain: ChainInfo
        +targetChain: ChainInfo
        +status: string
        +timestamp: number
        +txHash?: string
        +validatorCount: number
        +requiredValidators: number
        +estimatedTime?: number
    }

    CrossChainTransfer o-- ChainInfo : uses
    CrossChainTransfer "1" *-- "many" CrossChainTransferInterface : manages

Заключение

CrossChainTransfer.tsx — это UI-компонент для кросс-чейн перевода токенов с логикой симуляции процесса трансфера и удобным визуальным представлением текущих и прошлых операций. Он играет важную роль в интерфейсе пользователя системы, связанной с мультицепочечными финансовыми операциями и интегрируется с игровым контекстом через GameProvider.