Présentation de la nouvelle bibliothèque de composants UI Snaps basée sur JSX

Nous avons introduit un système d'interface utilisateur basé sur JSX, conforme aux standards du secteur et plus facile à utiliser, qui permet aux développeurs de créer des interfaces Snap plus aisément et de les personnaliser davantage qu'auparavant. Ce système remplace l'ancien système de composants basé sur des fonctions, qui offrait peu de flexibilité. Grâce à cette nouvelle bibliothèque d'interface utilisateur, les développeurs peuvent créer des interfaces avec des props personnalisées et même concevoir leurs propres composants de template.

De plus, ce nouveau système inclut des composants UX permettant divers cas d'utilisation interactifs, tels que le positionnement, les variantes de boutons, les menus déroulants, et bien plus encore. Il offre une meilleure expérience de développement pour la définition de styles en ligne, éliminant ainsi les difficultés rencontrées avec Markdown.

L'ancienne bibliothèque d'interface utilisateur est toujours prise en charge, mais est considérée comme obsolète. Nous la supprimerons à un moment donné dans le futur. Nous encourageons vivement les développeurs Snaps à migrer leur code d'interface vers le nouveau système basé sur JSX dès que possible.

Nouveaux composants

En plus de simplifier la création d'interfaces personnalisées, nous avons livré deux nouveaux composants JSX interactifs qui n'ont pas d'équivalents dans le système basé sur des fonctions : Dropdown et Field. Ces composants vous permettront d'apporter plus d'interactivité et de meilleures expériences utilisateur à vos interfaces personnalisées.

Le nouveau composant Box remplace le composant panel et ajoute des options de positionnement et de direction. Cela vous permet de créer des interfaces plus riches, mieux adaptées à vos cas d'utilisation. Markdown a été remplacé par les composants Bold, Italic et Link. Ceux-ci facilitent le travail avec du texte mis en forme.

Nous continuerons d'ajouter de nouveaux composants à l'API JSX.

Créez vos propres composants

L'API JSX vous permet de créer vos propres composants, tout comme dans React. Vous pouvez soit importer des composants existants depuis @metamask/snaps-sdk/jsx, soit composer vos propres composants personnalisés. Voici un exemple simple :

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

Mettre à niveau un projet Snap existant

Voici un aperçu des étapes nécessaires pour mettre à niveau un projet Snap existant vers JSX :

1. Mettez à jour les dépendances du package Snap.

2. Modifiez les règles de linting pour autoriser l'utilisation complète des composants JSX.

3. Renommez le fichier source du Snap en index.tsx s'il contient du JSX.

4. Ajustez la configuration du CLI Snap pour pointer vers index.tsx.

5. Modifiez le fichier tsconfig.json du Snap pour activer JSX.

Ces étapes sont détaillées dans notre documentation sur la mise à niveau d'un projet Snap pour utiliser JSX.

Premiers pas

Notre monorepo de template Snap est déjà configuré pour vous permettre de démarrer. Vous pouvez créer un nouveau projet Snap à partir du monorepo en utilisant la commande :

Le fichier snap/src/index.tsx fournit un exemple d'utilisation d'une interface personnalisée avec JSX. Vous pouvez importer des composants depuis @metamask/snaps-sdk/jsx et les utiliser pour construire votre interface.

Consultez notre documentation sur les interfaces personnalisées avec JSX pour en savoir plus sur tous les composants et leurs props, et explorez cet exemple de Snap avec JSX.