RecentActivity.tsx

Обзор

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

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

Компонент RecentActivity

Назначение

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

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

• const { recentActions } = useGame(); — получение массива объектов с информацией о недавних действиях из провайдера GameProvider.

Вспомогательные функции внутри компонента

getStatusIcon(status: string): JSX.Element

Возвращает соответствующую иконку из библиотеки lucide-react в зависимости от статуса действия.

• Параметры:

  • status — строка, определяющая статус действия. Возможные значения:

    • 'PENDING'

    • 'PROCESSING'

    • 'CONFIRMED'

    • 'FAILED'

    • Любое другое (дефолт)

• Возвращаемое значение:

  • React-элемент иконки с соответствующим стилем и цветом.

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

  const icon = getStatusIcon('CONFIRMED'); // Вернёт иконку CheckCircle зелёного цвета
  

getStatusColor(status: string): string

Возвращает строку с классами цветов (текст и фон), соответствующую статусу действия, для стилизации элементов.

• Параметры:

  • status — строка со статусом (те же варианты, что и в getStatusIcon).

• Возвращаемое значение:

  • Строка с CSS-классами Tailwind для окрашивания текста и фона.

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

  const classes = getStatusColor('FAILED'); // Возвращает 'text-red-400 bg-red-500/10'
  

formatTime(timestamp: number): string

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

• Параметры:

  • timestamp — число, представляющее время события в формате Unix timestamp (миллисекунды).

• Возвращаемое значение:

  • Строка с описанием времени, например:

    • 'Just now' — если прошло менее минуты

    • '5m ago' — если до часа

    • '2h ago' — если до суток

    • '3d ago' — если больше суток

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

  const timeLabel = formatTime(Date.now() - 300000); // '5m ago'
  

Рендеринг компонента

• Заголовок с иконкой активности и текстом "Recent Activity".

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

• Если есть действия:

  • Каждое действие выводится в отдельном блоке с:

    • Иконкой статуса (цвет и анимация в зависимости от статуса)

    • Описанием действия с обрезкой текста при переполнении

    • Статусом с цветовым оформлением

    • Относительным временем с момента совершения действия

    • Отображением суммы MANA (положительной или отрицательной) с цветом, зависящим от типа действия

    • При подтверждённом статусе и наличии хеша транзакции — ссылкой на Etherscan с сокращённым отображением хеша и иконкой внешней ссылки.

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

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

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

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

• Форматирование времени сделано вручную с простым сравнением временных промежутков.

• Для ссылок на блокчейн-эксплорер (Etherscan) используется усечение хеша транзакции, что улучшает читаемость.

• Визуальная стилизация построена с помощью Tailwind CSS.

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

• Компонент напрямую использует контекст GameProvider через хук useGame для получения массива recentActions. Это означает, что для корректной работы RecentActivity необходимо, чтобы выше в иерархии React-компонентов был установлен GameProvider.

• Визуальная часть опирается на иконки из lucide-react.

• Ссылки на транзакции ведут на внешний сервис Etherscan, что предполагает работу с Ethereum-блокчейном.

• Компонент является клиентским ('use client'), что важно для Next.js-приложений с разделением на серверный и клиентский рендеринг.

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

import { RecentActivity } from './RecentActivity';

function Dashboard() {
  return (
    <div>
      {/* Другие компоненты */}
      <RecentActivity />
    </div>
  );
}

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

componentDiagram
    component RecentActivity {
      +getStatusIcon(status: string): JSX.Element
      +getStatusColor(status: string): string
      +formatTime(timestamp: number): string
      +render(): JSX.Element
    }
    RecentActivity -- uses --> useGame
    RecentActivity -- uses --> lucide-react Icons
    RecentActivity -- links to --> Etherscan URL

Итог

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