GaslessTooltips.tsx

Обзор

Файл GaslessTooltips.tsx реализует набор React-компонентов для отображения пользовательских всплывающих подсказок (tooltips), связанных с особенностями "газлесс" (gasless) транзакций и игровых действий в контексте блокчейн-приложения или игры. Основной компонент GaslessTooltip отвечает за логику отображения и позиционирования всплывающей подсказки, а также за её содержимое, которое описывает преимущества и характеристики газлесс-транзакций, мгновенных действий, безопасности валидаторов и пакетной (batch) обработки транзакций.

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

Подробное описание компонентов и функций

Интерфейс TooltipContent

interface TooltipContent {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  details: string[];
}

• Назначение: Описывает структуру данных для содержимого каждой подсказки.

• Поля:

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

  • title — заголовок подсказки.

  • description — краткое описание.

  • icon — иконка, визуально сопровождающая заголовок.

  • details — список детализированных пунктов, раскрывающих тему.

Константа tooltipContents

Содержит массив объектов TooltipContent с предопределёнными подсказками для следующих тем:

• gasless — газлесс-транзакции (без оплаты газа).

• instant — мгновенные действия.

• secure — безопасность валидаторов.

• settlement — пакетная обработка транзакций.

Каждый элемент включает иконку из библиотеки lucide-react, заголовок, описание и список подробных пунктов.

Компонент GaslessTooltip

function GaslessTooltip({ id, children, className = '' }: GaslessTooltipProps)

• Назначение: Универсальный компонент всплывающей подсказки, отображающий контент, связанный с заданным id.

• Параметры:

  • id (string) — идентификатор подсказки, который выбирает содержимое из tooltipContents.

  • children (React.ReactNode) — элементы, вокруг которых отображается иконка подсказки и на которые можно кликнуть для вызова тултипа.

  • className (string, опционально) — дополнительные CSS-классы для кастомизации кнопки.

• Логика работы:

  • Сохраняет состояние видимости подсказки (isVisible) и позицию (position) для правильного позиционирования всплывающего окна.

  • При клике по кнопке происходит переключение видимости подсказки.

  • Подсказка позиционируется под кнопкой по центру её нижней грани с отступом в 8 пикселей.

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

  • При отсутствии содержимого для указанного id просто рендерит children без изменений.

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

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

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

<GaslessTooltip id="gasless">
  <span>Что такое газлесс транзакции?</span>
</GaslessTooltip>

Специализированные компоненты

Для удобства и переиспользования созданы специализированные обёртки над GaslessTooltip, которые автоматически подставляют нужный id:

• GaslessTransactionTooltip

• InstantActionTooltip

• ValidatorSecurityTooltip

• BatchSettlementTooltip

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

<GaslessTransactionTooltip>
  <button>Подробнее о газлесс транзакциях</button>
</GaslessTransactionTooltip>

Эти компоненты упрощают использование подсказок в разных частях приложения, гарантируя консистентность и удобство.

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

• Использование хуков React (useState, useRef, useEffect) для управления состоянием отображения подсказки и её позиционированием.

• Обработка кликов вне компонента для автоматического закрытия подсказки — улучшает UX.

• Позиционирование тултипа фиксированное (position: fixed) с вычислением координат относительно кнопки запуска.

• Управление стилями иконок и элементов через Tailwind CSS классы и библиотеку иконок lucide-react.

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

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

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

• Иконки импортируются из общего набора lucide-react, что стандартизирует внешний вид.

• Стилизация через Tailwind CSS предполагает, что проект уже использует эту систему.

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

Диаграмма компонентов

componentDiagram
    direction LR
    GaslessTooltip <|-- GaslessTransactionTooltip
    GaslessTooltip <|-- InstantActionTooltip
    GaslessTooltip <|-- ValidatorSecurityTooltip
    GaslessTooltip <|-- BatchSettlementTooltip

    GaslessTooltip : +props.id
    GaslessTooltip : +props.children
    GaslessTooltip : +props.className
    GaslessTooltip : +isVisible: boolean (state)
    GaslessTooltip : +position: {x, y} (state)
    GaslessTooltip : +handleToggle()
    GaslessTooltip : +handleClickOutside()

    GaslessTransactionTooltip : wraps GaslessTooltip with id="gasless"
    InstantActionTooltip : wraps GaslessTooltip with id="instant"
    ValidatorSecurityTooltip : wraps GaslessTooltip with id="secure"
    BatchSettlementTooltip : wraps GaslessTooltip with id="settlement"

Итог

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