OnChainNotifications.tsx

Обзор

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

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

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

Интерфейс Notification

interface Notification {
  id: string;
  type: 'confirmation' | 'batch_processed';
  title: string;
  message: string;
  txHash?: string;
  blockNumber?: number;
  timestamp: number;
  dismissed: boolean;
}

• id — уникальный идентификатор уведомления.

• type — тип уведомления (в данном компоненте используется 'confirmation').

• title — заголовок уведомления.

• message — основное сообщение/описание.

• txHash — хэш транзакции в блокчейне (необязательный).

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

• timestamp — время создания уведомления (в миллисекундах).

• dismissed — флаг, указывающий, что уведомление было скрыто (для анимации исчезновения).

Функция-компонент OnChainNotifications

export function OnChainNotifications()

Описание

Основной React-компонент, отвечающий за:

• Получение списка последних действий из контекста игры (useGame).

• Отслеживание подтверждённых действий с транзакциями.

• Формирование уведомлений для новых подтверждённых действий.

• Автоматическое скрытие уведомлений через 10 секунд.

• Ручное закрытие уведомлений пользователем.

• Визуальное отображение уведомлений с анимацией.

Внутренние состояния и переменные

• notifications — массив уведомлений, отображаемых в интерфейсе.

• setNotifications — функция для обновления состояния уведомлений.

• recentActions — список последних действий из контекста игры.

Основные блоки

1. useEffect для отслеживания confirmedActions

   • Фильтрует действия, у которых статус CONFIRMED и есть txHash.

   • Для каждого такого действия проверяет, существует ли уже уведомление.

   • Если нет — создаёт новое уведомление, добавляет его в состояние.

   • Запускает таймер на 10 секунд для автоматического скрытия уведомления.

2. useEffect для удаления скрытых уведомлений

   • Каждые 500 мс удаляет из состояния уведомления с флагом dismissed = true.

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

3. dismissNotification

   • Функция для ручного скрытия уведомления по id.

   • Устанавливает dismissed: true для уведомления, что запускает анимацию.

4. formatAddress

   • Утилита для сокращённого отображения длинных хэшей (txHash).

   • Формат: первые 6 символов + "..." + последние 4 символа.

5. JSX-разметка

   • Отображает контейнер с уведомлениями в правом верхнем углу экрана.

   • Каждое уведомление отображается с иконкой подтверждения, заголовком, сообщением.

   • Если есть txHash — отображается ссылка на Etherscan для транзакции.

   • Если есть blockNumber — отображается ссылка на блок.

   • Кнопка закрытия уведомления (X).

   • Анимация появления и скрытия реализована с помощью CSS классов translate-x-full opacity-0 и translate-x-0 opacity-100.

Параметры и возвращаемые значения

Компонент не принимает пропсы и возвращает JSX-элемент или null, если уведомлений нет.

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

import { OnChainNotifications } from './OnChainNotifications';

function App() {
  return (
    <>
      {/* Другие компоненты приложения */}
      <OnChainNotifications />
    </>
  );
}

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

• Компонент использует хук useGame для доступа к состоянию последних действий, что предполагает наличие контекста GameProvider в родительских компонентах.

• Уведомления автоматически скрываются через 10 секунд после появления.

• После анимации скрытия уведомления полностью удаляются из состояния.

• Каждое уведомление связано с уникальным id в формате confirm_${action.id}, что предотвращает дублирование.

• Ссылки на Etherscan открываются в новой вкладке с атрибутами безопасности rel="noopener noreferrer".

• Визуальные элементы используют иконки из библиотеки lucide-react.

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

• useGame (GameProvider): Компонент зависит от провайдера GameProvider, который предоставляет массив recentActions. Этот массив содержит все последние действия игрока, включая их статус, описание, хэш транзакции и номер блока.

• Etherscan: Внешний сервис для просмотра деталей транзакций и блоков. Компонент формирует URL-адреса для перехода на Etherscan.

• UI и стили: Используются Tailwind CSS классы для стилизации и анимации уведомлений.

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

componentDiagram
    component OnChainNotifications {
        +notifications: Notification[]
        +setNotifications()
        +dismissNotification(id: string)
        +formatAddress(address: string): string
    }
    OnChainNotifications <.. useGame : получает recentActions
    OnChainNotifications --> Etherscan : формирует ссылки tx/block
    Notification --> OnChainNotifications : отображается в UI

Итог

OnChainNotifications.tsx — это специализированный React-компонент для отображения кратких уведомлений об успешных on-chain действиях пользователя в приложении. Он обеспечивает автоматическое и ручное скрытие уведомлений, интеграцию с внешним блокчейн-эксплорером и плавную анимацию появления/исчезновения. Компонент тесно связан с контекстом игры и помогает пользователю отслеживать подтверждение его транзакций в блокчейне в реальном времени.