Представляем новую библиотеку компонентов Snaps UI на основе JSX

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

Кроме того, новая система включает UX-компоненты, обеспечивающие различные интерактивные сценарии использования: позиционирование, варианты кнопок, выпадающие списки и многое другое. Она предлагает более удобный опыт разработки при определении встроенных стилей, устраняя трудности, с которыми мы сталкивались при использовании Markdown.

Предыдущая библиотека UI по-прежнему поддерживается, однако считается устаревшей. В какой-то момент в будущем мы её удалим. Мы настоятельно рекомендуем разработчикам Snaps как можно скорее перенести код пользовательского интерфейса на новую систему на основе JSX.

Новые компоненты

Помимо упрощения создания пользовательских интерфейсов, мы выпустили два новых интерактивных JSX-компонента, не имеющих аналогов среди компонентов на основе функций: Dropdown и Field. Эти компоненты позволят вам добавить больше интерактивности и улучшить пользовательский опыт в ваших пользовательских интерфейсах.

Новый компонент Box заменяет компонент panel и добавляет параметры позиционирования и направления. Это позволяет создавать более насыщенные интерфейсы, лучше соответствующие вашим сценариям использования. Markdown заменён компонентами Bold, Italic и Link, которые упрощают работу с форматированным текстом.

Мы продолжим добавлять новые компоненты в JSX API.

Создайте собственные компоненты

JSX API позволяет создавать собственные компоненты — так же, как в React. Вы можете либо импортировать существующие компоненты из @metamask/snaps-sdk/jsx, либо создавать собственные пользовательские компоненты. Вот простой пример:

import {Box, Form, Input, Button} from '@metamask/snaps-sdk/jsx'

export const MyCustomForm = (props) => (
<Box>
  <Form name="form-to-fill">
    <Input name="user-name" placeholder="Your name" />
    <Box direction="horizontal">
      <Button type="submit">Submit</Button>
      {props.isCancellable && <Button type="button" name="cancel">Cancel</Button>}
    </Box>
  </Form>
</Box>
);
Копировать

Обновление существующего проекта Snap

Ниже приведён обзор шагов, необходимых для перевода существующего проекта Snap на JSX:

1. Обновите зависимости пакета Snap.

2. Измените правила линтинга, чтобы обеспечить полноценное использование JSX-компонентов.

3. Переименуйте исходный файл Snap в index.tsx, если он содержит JSX.

4. Настройте конфигурацию Snap CLI так, чтобы она указывала на index.tsx.

5. Отредактируйте файл tsconfig.json Snap для включения поддержки JSX.

Подробное описание этих шагов приведено в нашей документации по обновлению проекта Snap для использования JSX.

Начало работы

Наш шаблонный монорепозиторий Snap уже настроен и готов к работе. Вы можете создать новый проект Snap из монорепозитория с помощью команды:

Файл snap/src/index.tsx содержит пример использования пользовательского интерфейса с JSX. Вы можете импортировать компоненты из @metamask/snaps-sdk/jsx и использовать их для построения интерфейса.

Обратитесь к нашей документации по пользовательскому интерфейсу с JSX, чтобы узнать обо всех компонентах и их props, а также изучите этот пример Snap с JSX.