Einführung der neuen JSX-basierten Snaps UI Component Library

Wir haben ein branchenübliches, einfacher zu handhabendes JSX-basiertes UI-System eingeführt, das es Entwicklern ermöglicht, Snap-UIs einfacher zu erstellen und ihre Snaps-UI noch stärker anzupassen als bisher möglich. Es ersetzt das bisherige funktionsbasierte Komponenten-System, das wenig Flexibilität bot. Mit dieser neuen UI-Bibliothek können Entwickler Interfaces mit benutzerdefinierten Props erstellen und sogar eigene Template-Komponenten entwickeln.

Darüber hinaus enthält dieses neue System UX-Komponenten, die verschiedene interaktive Anwendungsfälle ermöglichen, wie z. B. Positionierung, Button-Varianten, Dropdowns und mehr. Es bietet eine bessere Developer Experience für die Definition von Inline-Styling und beseitigt die Herausforderungen, auf die wir bei der Verwendung von Markdown gestoßen sind.

Die bisherige UI-Bibliothek wird weiterhin unterstützt, gilt jedoch als veraltet. Wir werden sie zu einem späteren Zeitpunkt entfernen. Wir empfehlen Snaps-Entwicklern dringend, ihren UI-Code so bald wie möglich auf das neue JSX-basierte System zu migrieren.

Neue Komponenten

Neben der Vereinfachung der Erstellung von Custom UIs haben wir zwei neue interaktive JSX-Komponenten eingeführt, für die es keine entsprechenden funktionsbasierten Komponenten gibt: Dropdown und Field. Diese Komponenten ermöglichen es Ihnen, Ihren Custom UIs mehr Interaktivität und bessere User Experiences zu verleihen.

Die neue Box-Komponente ersetzt die Panel-Komponente und fügt Positionierungs- und Ausrichtungsoptionen hinzu. Dadurch können Sie reichhaltigere UIs erstellen, die besser zu Ihren Anwendungsfällen passen. Markdown wurde durch die Komponenten Bold, Italic und Link ersetzt. Diese erleichtern die Arbeit mit formatiertem Text.

Wir werden der JSX-API weiterhin neue Komponenten hinzufügen.

Eigene Komponenten erstellen

Die JSX-API ermöglicht es Ihnen, wie in React eigene Komponenten zu erstellen. Sie können entweder vorhandene Komponenten aus @metamask/snaps-sdk/jsx importieren oder eigene benutzerdefinierte Komponenten zusammenstellen. Hier ist ein einfaches Beispiel:

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

Ein bestehendes Snap-Projekt upgraden

Hier ist eine Übersicht der Schritte, die erforderlich sind, um ein bestehendes Snap-Projekt auf JSX upzugraden:

1. Die Abhängigkeiten des Snap-Pakets aktualisieren.

2. Die Linting-Regeln anpassen, um die vollständige Nutzung von JSX-Komponenten zu ermöglichen.

3. Die Quelldatei des Snaps in index.tsx umbenennen, wenn sie JSX enthält.

4. Die Konfiguration der Snap-CLI so anpassen, dass sie auf index.tsx verweist.

5. Die Datei tsconfig.json des Snaps bearbeiten, um JSX zu aktivieren.

Diese Schritte werden in unserer Dokumentation zum Upgraden eines Snap-Projekts zur Verwendung von JSX ausführlich beschrieben.

Erste Schritte

Unser Template-Snap-Monorepo ist bereits eingerichtet, um Ihnen den Einstieg zu erleichtern. Sie können mit dem folgenden Befehl ein neues Snap-Projekt aus dem Monorepo erstellen:

Die Datei snap/src/index.tsx enthält ein Beispiel für die Verwendung von Custom UI mit JSX. Sie können Komponenten aus @metamask/snaps-sdk/jsx importieren und damit Ihre UI erstellen.

Lesen Sie unsere Custom-UI-Dokumentation mit JSX, um mehr über alle Komponenten und ihre Props zu erfahren, und erkunden Sie dieses Beispiel-Snap mit JSX.