Presentamos la nueva biblioteca de componentes de UI para Snaps basada en JSX

Hemos introducido un sistema de UI basado en JSX estándar en la industria y más fácil de usar, que permite a los desarrolladores crear interfaces de usuario para Snaps con mayor facilidad y personalizar su UI incluso más de lo que era posible anteriormente. Este sistema reemplaza el anterior sistema de componentes basado en funciones, que ofrecía poca flexibilidad. Con esta nueva biblioteca de UI, los desarrolladores pueden crear interfaces con props personalizados e incluso diseñar sus propios componentes de plantilla.

Además, este nuevo sistema incluye componentes de UX que habilitan diversos casos de uso interactivos, como posicionamiento, variantes de botones, menús desplegables y más. Ofrece una mejor experiencia para los desarrolladores al definir estilos en línea, eliminando los inconvenientes que encontrábamos al usar Markdown.

La biblioteca de UI anterior sigue siendo compatible, pero se considera obsoleta. La eliminaremos en algún momento en el futuro. Instamos a los desarrolladores de Snaps a migrar su código de UI al nuevo sistema basado en JSX lo antes posible.

Nuevos componentes

Además de simplificar la creación de interfaces de usuario personalizadas, hemos lanzado dos nuevos componentes JSX interactivos que no tienen equivalentes en el sistema basado en funciones: Dropdown y Field. Estos componentes te permitirán añadir mayor interactividad y mejores experiencias de usuario a tus interfaces personalizadas.

El nuevo componente Box reemplaza al componente panel y añade opciones de posicionamiento y dirección. Esto te permite crear interfaces más ricas que se adapten mejor a tus casos de uso. Markdown ha sido reemplazado por los componentes Bold, Italic y Link, que facilitan el trabajo con texto formateado.

Continuaremos añadiendo nuevos componentes a la API de JSX.

Crea tus propios componentes

La API de JSX te permite crear tus propios componentes, igual que en React. Puedes importar componentes existentes desde @metamask/snaps-sdk/jsx o componer tus propios componentes personalizados. Aquí tienes un ejemplo sencillo:

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>
);
Copiar

Actualiza un proyecto Snap existente

A continuación se presenta un resumen de los pasos necesarios para actualizar un proyecto Snap existente a JSX:

1. Actualiza las dependencias del paquete Snap.

2. Modifica las reglas de linting para permitir el uso completo de los componentes JSX.

3. Renombra el archivo fuente del Snap a index.tsx si contiene JSX.

4. Ajusta la configuración del CLI de Snap para que apunte a index.tsx.

5. Edita el archivo tsconfig.json del Snap para habilitar JSX.

Estos pasos se detallan en nuestra documentación sobre cómo actualizar un proyecto Snap para usar JSX.

Primeros pasos

Nuestro monorepo de plantilla para Snaps ya está configurado para que puedas comenzar. Puedes crear un nuevo proyecto Snap desde el monorepo usando el siguiente comando:

El archivo snap/src/index.tsx ofrece un ejemplo del uso de interfaces de usuario personalizadas con JSX. Puedes importar componentes desde @metamask/snaps-sdk/jsx y utilizarlos para construir tu UI.

Consulta nuestra documentación sobre Custom UI con JSX para conocer todos los componentes y sus props, y explora también este Snap de ejemplo con JSX.