JSX migration guide

[Montoya]

Snaps UI is moving to a new UI library that uses JSX! Here's a guide to migrating for anyone using the old function-based UI components.

1. Update dependencies

Make sure to update the following dependencies in your package.json:

"dependencies": {
  "@metamask/snaps-sdk": "^5.0.0",
  ...
},
"devDependencies": {
  "@metamask/snaps-cli": "^6.2.0",
  ...
}

2. Use .jsx or .tsx

Any file that uses JSX UI components will need to be updated to the jsx or tsx format.

If you end up changing the input file (the entry point for your Snap, which is usually index.js or index.ts) then you will also need to update this in a couple files:

• in snap.config.ts, update SnapConfig.input to be resolve(__dirname, 'src/index.tsx')
• in tsconfig.json, update "include" to also allow jsx and/or tsx files: [..., "**/*.jsx", "**/*.tsx"]

3. Add jsx to the compiler options

In tsconfig.json, add the jsx compiler option:

"compilerOptions": {
  "jsx": "react-jsxdev",
}

4. Update dependencies with yarn

Run yarn on the command line to update the dependencies

5. Import JSX components from @metamask/snaps-sdk/jsx

Replace your components import with something like this:

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

The components mostly match 1:1, except that now instead of panel() you can use <Box>!

6. Return JSX for UI instead of an array of function-based components

An example of JSX being used in snap_createInterface:

const interfaceId = await snap.request({
  method: "snap_createInterface",
  params: {
    ui: (
      <Box>
        <Button name="btn">Say hello</Button>
      </Box>
    )
  },
}); 

Make sure to wrap the JSX in parens ( ) when using multiple lines.

---

Here is a video showing the Hello World Snap being migrated to JSX. It took about 10 minutes!

https://youtu.be/SgKTIYwmgfA

You can find the code changes in this PR: https://github.com/Montoya/hello-world-snap/pull/28/files

[mmednik-noves]

Hey guys!
What is the estimated deadline to have these changes ready?

[Montoya]

You do not have to change anything. While the old UI library is deprecated, it is still supported. But if you can migrate to JSX, you should :)

[mmednik-noves]

thanks!