Use JSX

MetaMask · May 14, 2024 · a88b1c3 · a88b1c3
1 parent d1471ed
commit a88b1c3
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 140 deletions.
diff --git a/packages/site/src/pages/index.tsx b/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 && (

diff --git a/packages/site/src/utils/metamask.ts b/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')) {

diff --git a/packages/snap/.eslintrc.js b/packages/snap/.eslintrc.js
@@ -11,6 +11,20 @@ module.exports = {
       extends: ['@metamask/eslint-config-nodejs'],
     },
 
+    {
+      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'],
       rules: {

diff --git a/packages/snap/package.json b/packages/snap/package.json
@@ -27,7 +27,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@metamask/snaps-sdk": "^4.0.0",
+    "@metamask/snaps-sdk": "^4.1.0",
     "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.0",
+    "@metamask/snaps-jest": "^8.0.0",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "eslint": "^8.45.0",

diff --git a/packages/snap/snap.config.ts b/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,
   },

diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/template-snap-monorepo.git"
   },
   "source": {
-    "shasum": "TwVBeJ/PL4uARBEFZmgJukYd3XWyTbilkOPhtdg+GvU=",
+    "shasum": "2OwZmIrZmVpVvpXkYreocpEeYEkeNjriRdSSjbqycCQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snap/src/index.ts → packages/snap/src/index.tsx b/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:

diff --git a/packages/snap/tsconfig.json b/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"]
 }