Apresentando a Nova Biblioteca de Componentes de UI Snaps Baseada em JSX

Introduzimos um sistema de UI baseado em JSX seguindo os padrões da indústria e mais fácil de usar, que permite aos desenvolvedores criar UIs de Snap com mais facilidade e personalizar a UI dos seus Snaps ainda mais do que era possível anteriormente. Isso substitui o sistema anterior baseado em funções, que oferecia pouca flexibilidade. Com essa nova biblioteca de UI, os desenvolvedores podem criar interfaces com props personalizadas e até mesmo criar seus próprios componentes de template.

Além disso, esse novo sistema inclui componentes de UX que habilitam diversos casos de uso interativos, como posicionamento, variantes de botões, dropdowns e muito mais. Ele oferece uma experiência de desenvolvimento melhor para definir estilos inline, eliminando os desafios que encontrávamos ao usar Markdown.

A biblioteca de UI anterior ainda é compatível, mas é considerada obsoleta. Vamos removê-la em algum momento no futuro. Recomendamos que os desenvolvedores de Snaps migrem o código de UI para o novo sistema baseado em JSX o quanto antes.

Novos componentes

Além de simplificar a criação de UIs personalizadas, lançamos dois novos componentes JSX interativos que não possuem componentes equivalentes baseados em funções: Dropdown e Field. Esses componentes permitirão que você adicione mais interatividade e melhores experiências de usuário às suas UIs personalizadas.

O novo componente Box substitui o componente panel e adiciona opções de posicionamento e direção. Isso permite criar UIs mais ricas que se adaptam melhor aos seus casos de uso. O Markdown foi substituído pelos componentes Bold, Italic e Link. Eles facilitam o trabalho com texto formatado.

Continuaremos adicionando novos componentes à API JSX.

Crie seus próprios componentes

A API JSX permite que você crie seus próprios componentes, assim como no React. Você pode importar componentes existentes de @metamask/snaps-sdk/jsx ou criar seus próprios componentes personalizados. Veja um exemplo simples:

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

Atualize um projeto Snap existente

Aqui está uma visão geral das etapas necessárias para atualizar um projeto Snap existente para JSX:

1. Atualize as dependências do pacote Snap.

2. Modifique as regras de linting para permitir o uso completo dos componentes JSX.

3. Renomeie o arquivo-fonte do Snap para index.tsx se ele contiver JSX.

4. Ajuste a configuração do Snap CLI para apontar para index.tsx.

5. Edite o arquivo tsconfig.json do Snap para habilitar o JSX.

Essas etapas estão detalhadas em nossa documentação sobre como atualizar um projeto Snap para usar JSX.

Primeiros passos

Nosso template Snap monorepo já está configurado para você começar. Você pode criar um novo projeto Snap a partir do monorepo usando o comando:

O arquivo snap/src/index.tsx fornece um exemplo de uso de UI personalizada com JSX. Você pode importar componentes de @metamask/snaps-sdk/jsx e usá-los para construir sua UI.

Consulte nossa documentação de UI personalizada com JSX para conhecer todos os componentes e suas props, além de explorar este Snap de exemplo com JSX.