MetaMask · Mrtenz · Jun 25, 2024 · Jun 20, 2024 · Jun 20, 2024 · Jun 25, 2024
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "7AJkQic0kErNfOuBozGOUaJ5U5Z24yOV28zHL+WEPz0=",
+    "shasum": "Paw1MvcKp4fAIaHD7wOjms0TM6v0+9UrSindsKiIT2U=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "R/jtwKJg/6gTCuMrphuKHZkTtUlggfwnNgKiOXx11GU=",
+    "shasum": "TdU+l8244ylKZfMGvU4zVxcsjNneDaOcGlsksIzbVxI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "u7x/swxx6XHT7G0BDY8mJkwcY/mP/i4YmdYaRQ/QKZY=",
+    "shasum": "WyGF29tepKkbA72BLSay+O0HmuBKeX6xVls18XGUPJ0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "105XsceecyaQZ+reC6ZNusiOJVUMBoNSYK4PHvREPQw=",
+    "shasum": "jhy7YR2US99yHnczuyLNq7wfXffFsXN+McgE7i+HtQw=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "9Ttl+TbR7gufQzhQx4o/keKeINCjio65rjLWOlP36NM=",
+    "shasum": "h5z+EGOVyd8FjthPUfK+8KndCsHVd/dJWQbEV5HV7Pk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "0NNqpKgq/+zNokLs67+6vrA+kZxvDnDe9PWrX6X8Goc=",
+    "shasum": "ZPu4DoRwnCQNfpTF005B0AvJ5NPCPyV1GGtKRUpm5x8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "tDbsxyvQUz2VoKmIzIXbLr3mtJfNewiHzoEjW7X6c8k=",
+    "shasum": "ea8+eIv5lXEiUUr/jhYv4O5zTAEHHkFgP1dvE0FjqyY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "8/P91GreWpqGOWLGAntmd3Kyu6A3WMelRIWUuxKcsGI=",
+    "shasum": "LC5iXkcfN/MGtp2xYrlVceu1Bk/t8+Q9A4hmcn1n4DI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "1bLwZCxQusG/VCAswAJ5ohHF6fBgiQtTLhQG1Mby4HI=",
+    "shasum": "qjKEBv3E1LSeoe6b8ea45bvyC38xxA9O+m19++WQHAc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "9m0//6LmoFrxb/Mpkjlr7eNRe9HK92iKJgtqtijlkFw=",
+    "shasum": "IVgoNs8h1fS3imREb3FdCLB5Zf9qmyVwFcILUK9Xt7E=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "sKg86tSHApZz49OdruONj63Yhts7zDlyLF2lpf6sguw=",
+    "shasum": "vTdjnqfw1FFAu/GdTETN6naPNZLvBKQveKb5SfgarRM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "0vuiA3xbMMPYDMcE7ytDmXM0B4wwc+b90Ncy114JU24=",
+    "shasum": "FzazaYSj1m1eJbWO3x4CVkrZj95VfbnzbO7P8mfJnNI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "I2MgHF7MuMKoGGKMSJTB2TAdRNt3ThuAs7N5QLqsFwc=",
+    "shasum": "8AKxcoo/a6Xxfj6TUhcEs2aEXMwxibJLcWPRiXI9mig=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "F+ZTNm0I7LeuhiRfFLz34sEn1nQrHEmZ4vbl4V1buiU=",
+    "shasum": "HiZjEop93vH1rfFXz4k7SPgxiaUeGzXPvpjeMAcb0NU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "LSk+GmGMP8byzHX013+Fnj8hPWxFD1ctKE7FwmXwUZ4=",
+    "shasum": "sZTDQUyjc2KheUbOG0H/CIVYRLiCHAj9LRwaE8GIooM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "gRoujvXbGzclQmIEgWQQvuKxeeTXt4jt8Kv+SggT5I8=",
+    "shasum": "xwnHVWihUs6GD1HCciN89gkTzKcMqISeBROgEUN4wgk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "pgKvkVBqtJ4sPb6shDMNXiDc1C8apmV4+WfN6ciavKg=",
+    "shasum": "K+/ZeTU0gQlrcwy0oCKaxjpxpv8f8GLYbkAv6ZLZhls=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "MDjrpUYVTAW1NxWp544Gn4DcF0t6GoDBQIR3F+zeqtI=",
+    "shasum": "IN1A0Mn2HzGMv+1DskqAOdGq7Z/VswhldNMetQFn7WY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "G9fNyPGqUsjlqzMskFKEkdy04ny6eZDBBlXSajmQcN8=",
+    "shasum": "2bTgXzMoOamgCLZor3obQ5SPdFMY+jIQpuHWHtFzEbs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "1Vo2b7dgicVZYWx6DMTlnkDnK6UBbk4fmilSsLKwSDg=",
+    "shasum": "QPc5ZS6VlcPrDtb3GPyk7vOq/g/hItqSqkq9H6Al3Wg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "czQq93Uay+jE8HZvwSViZfMdDQTPn0ClMJaH34VN0dc=",
+    "shasum": "3u0roIrlyn6qhMMtTc/U36RkuhiB4oF8DFu9H1h5bbc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Vr0QhrtHYgg7DFczqQc4KEkAkKrOCOAc3ZnNesEVZ+w=",
+    "shasum": "0iSgKQXeEePTFOenbfI1FS/N5mB403Z9Et7mn+qwxzo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "6btrG6bcFAWosjSF/ldUuTd3sXNlYxVsRm0gcTJRE2M=",
+    "shasum": "XHg6R5zNIYiH4dHBwqO2Om0TMvK8koQu6WOe6CcvRio=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "khCrwAziXNhRJrV8cHp3hfRyudXVBYVB3Cew7YpWDG0=",
+    "shasum": "ZEUzTVWOhCkH9K+WmtspfXEu16imY9ee4HdK7wH8hew=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "7wOe/70O/A4BoUF5+CabV0Rjivnnv2D/xcQ1AlAZdw0=",
+    "shasum": "2u8Ff+LVeGGDTlSIqX1tyfRECv4nf13rwm11sKZ4/Qg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "5dDSK6C4XDIT1ukZh1nEimci2a+z0hnqUNEqi7qBNAk=",
+    "shasum": "Xpb9v3Lycj3WJ15xvBbTmHuYZR4vb9iyhnkgATh18po=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "8kKJRiaM18IxSr89svPvmzGIjRszgJvmfLkJxJLyFA4=",
+    "shasum": "unSCLB8GJ5KyYT3YfHSMDFcD5ClGtWcWbJZ7eIpjlk4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "DGgaRZmS8KSVnUzCq/V7f9TauAelSCFe9sg3myXrWks=",
+    "shasum": "yUK4OmLGC/zSUUc/Nqlj2rPQ/Oy0/Rx7+su/pEL83uU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "U4Zhw9ZpNVXJHoYfuYJ4a6j/ynAaFXxZYUYo0DSESVs=",
+    "shasum": "OtUyvj24INOaosESd2O9fN5hnxBSW//UctFgaY+Ha3A=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

@@ -11,7 +11,11 @@ import type {
   ComponentOrElement,
   Component,
 } from '@metamask/snaps-sdk';
-import type { JSXElement, SnapNode } from '@metamask/snaps-sdk/jsx';
+import type {
+  GenericSnapElement,
+  JSXElement,
+  SnapNode,
+} from '@metamask/snaps-sdk/jsx';
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import { getJsxElementFromComponent } from '@metamask/snaps-utils';
 import type { Json } from '@metamask/utils';
@@ -234,7 +238,7 @@ export function serialiseJsx(node: SnapNode, indentation = 0): string {
     return '';
   }
 
-  const { type, props } = node;
+  const { type, props } = node as GenericSnapElement;
   const trailingNewline = indentation > 0 ? '\n' : '';
 
   if (hasProperty(props, 'children')) {

@@ -0,0 +1,96 @@
+# Contributing
+
+## Adding new JSX components
+
+The MetaMask Snaps SDK uses JSX components for building user interfaces in
+Snaps. To add a new component, follow these steps:
+
+1. Create a new file in the `src/jsx/components` directory, optionally in a
+   subdirectory if the component is part of a group of related components.
+2. It is recommended to copy an existing component file and modify it to create
+   the new component.
+3. Create a test for the new component, following the existing test files for
+   the other components.
+4. Add the new component to the `src/jsx/components/index.ts` file, exporting it
+   from the file.
+   - This file also contains a `JSXElement` union type that should
+     be updated to include the new component.
+5. Add validation for the component to `src/jsx/validation.ts`, making sure to
+   use the `Describe` helper type to ensure that the component is correctly
+   validated.
+   - Make sure to add tests for the validation in `src/jsx/validation.test.ts`
+     as well.
+6. If the component is stateful, make sure to add it to the
+   `SnapInterfaceController` too.
+   - You can use [this PR](https://github.com/MetaMask/snaps/pull/2501) as a
+     reference.
+
+### Component props
+
+When adding a new component, make sure to document the props that the component
+accepts. This can be done by adding a JSDoc comment to the component function
+declaration, like so:
+
+```typescript
+/**
+ * The props of the {@link Dropdown} component.
+ *
+ * @property name - The name of the dropdown. This is used to identify the
+ * state in the form data.
+ * @property value - The selected value of the dropdown.
+ * @property children - The children of the dropdown.
+ */
+export type DropdownProps = {
+  name: string;
+  value?: string | undefined;
+  children: MaybeArray<OptionElement | boolean>;
+};
+```
+
+The props type should be exported from the component file and used in the
+component function declaration, like so:
+
+```typescript
+// ...
+export const Dropdown = createSnapComponent<DropdownProps, typeof TYPE>(TYPE);
+```
+
+To ensure consistency, make sure to follow the existing patterns in the codebase
+when documenting component props.
+
+#### Optional props
+
+Optional props should be both marked with a `?` in the type definition, and
+also include `undefined` in the type definition. This is to ensure that the
+component can be used with or without TypeScript's exact optional props feature.
+
+```typescript
+export type ComponentProps = {
+  value?: string | undefined;
+};
+```
+
+#### Children
+
+In most cases, the children prop should be defined as `SnapsChildren` to allow
+for both a single child element or an array of child elements. There are some
+exceptions to this rule, such as when the component only accepts a single child
+element (e.g., `Field`).
+
+Children should also accept `boolean` and `null` values to allow for conditional
+rendering of child elements.
+
+```typescript
+export type ComponentProps = {
+  children: SnapsChildren<string>; // Nestable<string | boolean | null>;
+};
+```
+
+If the children are optional, make sure to include `undefined` in the type and
+add the `?` to the prop definition.
+
+```typescript
+export type ComponentProps = {
+  children?: SnapsChildren<string> | undefined;
+};
+```
@@ -4,7 +4,11 @@ const { resolve } = require('path');
 const baseConfig = require('../../jest.config.base');
 
 module.exports = deepmerge(baseConfig, {
-  collectCoverageFrom: ['!./src/**/index.ts'],
+  collectCoverageFrom: [
+    '!./src/**/index.ts',
+    '!./src/types/global.ts',
+    '!./src/types/images.ts',
+  ],
 
   coverageThreshold: {
     global: {