Use JSX

packages/site/src/pages/index.tsx

@@ -120,7 +120,7 @@ const Index = () => {
         Welcome to <Span>template-snap</Span>
       </Heading>
       <Subtitle>
-        Get started by editing <code>src/index.ts</code>
+        Get started by editing <code>src/index.tsx</code>
       </Subtitle>
       <CardContainer>
         {error && (

packages/site/src/utils/metamask.ts

@@ -61,6 +61,10 @@ export async function getMetaMaskEIP6963Provider() {
      * @param event.detail - The details of the EIP6963 announceProvider event.
      */
     function onAnnounceProvider({ detail }: EIP6963AnnounceProviderEvent) {
+      if (!detail) {
+        return;
+      }
+
       const { info, provider } = detail;
 
       if (info.rdns.includes('io.metamask')) {

packages/snap/.eslintrc.js

@@ -12,7 +12,21 @@ module.exports = {
     },
 
     {
-      files: ['*.test.ts'],
+      files: ['**/*.ts', '**/*.tsx'],
+      extends: ['@metamask/eslint-config-typescript'],
+      rules: {
+        // This allows importing the `Text` JSX component.
+        '@typescript-eslint/no-shadow': [
+          'error',
+          {
+            allow: ['Text'],
+          },
+        ],
+      },
+    },
+
+    {
+      files: ['*.test.ts', '*.test.tsx'],
       rules: {
         '@typescript-eslint/unbound-method': 'off',
       },

packages/snap/package.json

@@ -27,7 +27,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@metamask/snaps-sdk": "^4.0.0",
+    "@metamask/snaps-sdk": "^6.1.1",
     "buffer": "^6.0.3"
   },
   "devDependencies": {
@@ -37,8 +37,8 @@
     "@metamask/eslint-config-jest": "^12.1.0",
     "@metamask/eslint-config-nodejs": "^12.1.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
-    "@metamask/snaps-cli": "^6.1.0",
-    "@metamask/snaps-jest": "^7.0.0",
+    "@metamask/snaps-cli": "^6.2.1",
+    "@metamask/snaps-jest": "^8.2.0",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "eslint": "^8.45.0",

packages/snap/snap.config.ts

@@ -3,7 +3,7 @@ import { resolve } from 'path';
 
 const config: SnapConfig = {
   bundler: 'webpack',
-  input: resolve(__dirname, 'src/index.ts'),
+  input: resolve(__dirname, 'src/index.tsx'),
   server: {
     port: 8080,
   },

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/template-snap-monorepo.git"
   },
   "source": {
-    "shasum": "TwVBeJ/PL4uARBEFZmgJukYd3XWyTbilkOPhtdg+GvU=",
+    "shasum": "ufQns74hTklAsDcCm5Yd3qVw4iMs82eARCnn6IARlYE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/index.test.ts → packages/snap/src/index.test.tsx

@@ -1,6 +1,6 @@
 import { expect } from '@jest/globals';
 import { installSnap } from '@metamask/snaps-jest';
-import { panel, text } from '@metamask/snaps-sdk';
+import { Box, Text, Bold } from '@metamask/snaps-sdk/jsx';
 
 describe('onRpcRequest', () => {
   describe('hello', () => {
@@ -16,13 +16,16 @@ describe('onRpcRequest', () => {
       const ui = await response.getInterface();
       expect(ui.type).toBe('confirmation');
       expect(ui).toRender(
-        panel([
-          text(`Hello, **${origin}**!`),
-          text('This custom confirmation is just for display purposes.'),
-          text(
-            'But you can edit the snap source code to make it do something, if you want to!',
-          ),
-        ]),
+        <Box>
+          <Text>
+            Hello, <Bold>{origin}</Bold>!
+          </Text>
+          <Text>This custom confirmation is just for display purposes.</Text>
+          <Text>
+            But you can edit the snap source code to make it do something, if
+            you want to!
+          </Text>
+        </Box>,
       );
 
       await ui.ok();

packages/snap/src/index.ts → packages/snap/src/index.tsx

@@ -1,5 +1,5 @@
 import type { OnRpcRequestHandler } from '@metamask/snaps-sdk';
-import { panel, text } from '@metamask/snaps-sdk';
+import { Box, Text, Bold } from '@metamask/snaps-sdk/jsx';
 
 /**
  * Handle incoming JSON-RPC requests, sent through `wallet_invokeSnap`.
@@ -21,13 +21,20 @@ export const onRpcRequest: OnRpcRequestHandler = async ({
         method: 'snap_dialog',
         params: {
           type: 'confirmation',
-          content: panel([
-            text(`Hello, **${origin}**!`),
-            text('This custom confirmation is just for display purposes.'),
-            text(
-              'But you can edit the snap source code to make it do something, if you want to!',
-            ),
-          ]),
+          content: (
+            <Box>
+              <Text>
+                Hello, <Bold>{origin}</Bold>!
+              </Text>
+              <Text>
+                This custom confirmation is just for display purposes.
+              </Text>
+              <Text>
+                But you can edit the snap source code to make it do something,
+                if you want to!
+              </Text>
+            </Box>
+          ),
         },
       });
     default:

packages/snap/tsconfig.json

@@ -1,7 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "./"
+    "baseUrl": "./",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@metamask/snaps-sdk"
   },
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts", "**/*.tsx"]
 }