feat: Support nested children in JSX

packages/examples/packages/bip32/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "F9C8poQGsqx2OqL+ywTBmQAvgb2ag6j2oHRzQNZzWH4=",
+    "shasum": "TREcufYIoY7V4COT/nD1zIpokLo0q6/cerUCNr4lt3o=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/bip44/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "gjSBWJnkvtf31+ik5BfkIjZnYP7oh1JnobZZ5BkLfbc=",
+    "shasum": "axLG/VQvjzujN4JseNaabRFWTnzIGFL51wtMfmZzBUw=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/browserify-plugin/snap.manifest.json

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

packages/examples/packages/browserify/snap.manifest.json

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

packages/examples/packages/client-status/snap.manifest.json

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

packages/examples/packages/cronjobs/snap.manifest.json

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

packages/examples/packages/dialogs/snap.manifest.json

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

packages/examples/packages/ethereum-provider/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "vS4MjHCFOP+3kbETw1+niz86z6NTRMCPFVMsnyil12E=",
+    "shasum": "p1nV1fdVB82jnbDgzKOabh2IGPqPG49N+Nfv2txeBJE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/ethers-js/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "6ro5G2OUcUgMp2tpBN0xzT4RsMbqp8QCkeqxad/WjBA=",
+    "shasum": "deferGQ6r4/vHiVAduQ9Fhh0SOH/nIz31mwNomgepMQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/get-entropy/snap.manifest.json

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

packages/examples/packages/get-file/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "cC2ejufAsJycw7jwk0+Qacv1EQT47SgNVVUc9hrnUqc=",
+    "shasum": "eptn/xIgVjhxWY3NIf/DP3NIIPAAsn3/6NHkbMAfC2g=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/home-page/snap.manifest.json

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

packages/examples/packages/images/snap.manifest.json

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

packages/examples/packages/interactive-ui/snap.manifest.json

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

packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json

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

packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json

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

packages/examples/packages/json-rpc/snap.manifest.json

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

packages/examples/packages/jsx/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "XLUWgAWSNsyX3KDDgRNb//XQ/ir9ojf46Ay7o4/6EgU=",
+    "shasum": "lvTk/xCi7Ivz7sv6hTlxb71JyEv4Jr0m5cUnL2lqb0Y=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/lifecycle-hooks/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "OL0jaEOZDjvUn259L3vIOIP0EW3y7iUfuaW0qq+tUy4=",
+    "shasum": "RHHnf+vaMAIsO2DNHCDW8u+ZXm0wealMt3ezFA6Kr5U=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/localization/snap.manifest.json

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

packages/examples/packages/manage-state/snap.manifest.json

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

packages/examples/packages/network-access/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "GzN3oeEj4yc1X7r03LMbe7Z3wQTt3ZcdYM0vvCEyyjc=",
+    "shasum": "GVOl3/uYRKIlCZ0QbKgmxIfwKcNH+uUxo9ebkAzJEgY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/notifications/snap.manifest.json

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

packages/examples/packages/rollup-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "jnQsivil7rusQP7K+WumbjVH19WbJN/ZYrpeSM7RPEU=",
+    "shasum": "imIhvBYiRYBYzCi9UDoAWBec44ZBwnjjENam483eEPM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/signature-insights/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "mGg958TU8sDwfHS6vesKjgD6sdYmU7z8Mu3eyRgNi/s=",
+    "shasum": "GWEBRZ7ZyU5HzrK6PDvUoMfPwpd3TcHp6+mKYkV3tp0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/transaction-insights/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "WlcLFeS8ZB2MTS0qAU2XKdjKP+5OzbxYx+Ce8+doKMw=",
+    "shasum": "B8wUlC0JI9qbMmXTYEaQcjIi616AGhx7071cjvT0X8s=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/wasm/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "UcNZQBVKNac+Mhw0yOB924NloS9tnc3JMULGKvsC+o4=",
+    "shasum": "FMlZgAdgCuy+jMu06p2YvuuIXapAEGFJ0GVU9wT5N44=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/webpack-plugin/snap.manifest.json

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

packages/snaps-sdk/src/jsx/component.ts

@@ -39,6 +39,17 @@ export type SnapElement<
   key: Key | null;
 };
 
+/**
+ * A type that can be a single value or an infinitely nestable array of values.
+ *
+ * @template Type - The type that can be an array.
+ * @example
+ * type NestableString = Nestable<string>;
+ * const nestableString: NestableString = 'hello';
+ * const nestableStringArray: NestableString = ['hello', 'world', ['foo', ['bar']]];
+ */
+export type Nestable<Type> = Type | Nestable<Type>[];
+
 /**
  * A type that can be a single value or an array of values.
  *
@@ -48,7 +59,7 @@ export type SnapElement<
  * const maybeArrayString: MaybeArrayString = 'hello';
  * const maybeArrayStringArray: MaybeArrayString = ['hello', 'world'];
  */
-export type MaybeArray<Type> = Type | Type[];
+export type MaybeArray<Type> = Nestable<Type>;
 
 /**
  * A JSX node, which can be an element, a string, null, or an array of nodes.

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -417,6 +417,12 @@ describe('BoxStruct', () => {
         <Image src="<svg />" alt="alt" />
       </Row>
     </Box>,
+    <Box>
+      <Text>Foo</Text>
+      {[1, 2, 3, 4, 5].map((value) => (
+        <Text>{value.toString()}</Text>
+      ))}
+    </Box>,
   ])('validates a box element', (value) => {
     expect(is(value, BoxStruct)).toBe(true);
   });

packages/snaps-sdk/src/jsx/validation.ts

@@ -28,6 +28,7 @@ import type {
   JsonObject,
   Key,
   MaybeArray,
+  Nestable,
   SnapElement,
   StringElement,
 } from './component';
@@ -76,6 +77,21 @@ export const ElementStruct: Describe<GenericSnapElement> = object({
   key: nullable(KeyStruct),
 });
 
+/**
+ * A helper function for creating a struct for a {@link Nestable} type.
+ *
+ * @param struct - The struct for the type to test.
+ * @returns The struct for the nestable type.
+ */
+function nestable<Type, Schema>(struct: Struct<Type, Schema>) {
+  const nestableStruct: Struct<Nestable<Type>> = nullUnion([
+    struct,
+    array(lazy(() => nestableStruct)),
+  ]);
+
+  return nestableStruct;
+}
+
 /**
  * A helper function for creating a struct for a {@link MaybeArray} type.
  *
@@ -85,7 +101,7 @@ export const ElementStruct: Describe<GenericSnapElement> = object({
 function maybeArray<Type, Schema>(
   struct: Struct<Type, Schema>,
 ): Struct<MaybeArray<Type>, any> {
-  return nullUnion([struct, array(struct)]);
+  return nestable(struct);
 }
 
 /**

packages/snaps-utils/src/ui.test.tsx

@@ -774,6 +774,30 @@ describe('getJsxChildren', () => {
       <Text>World</Text>,
     ]);
   });
+
+  it('flattens the children array', () => {
+    const element = (
+      <Box>
+        <Text>Hello</Text>
+        {[1, 2, 3].map((value) => (
+          <Text>{value.toString()}</Text>
+        ))}
+        <Text>World</Text>
+      </Box>
+    );
+
+    const children = getJsxChildren(element);
+
+    expect(element.props.children).toHaveLength(3);
+    expect(children).toHaveLength(5);
+    expect(children).toStrictEqual([
+      <Text>Hello</Text>,
+      <Text>1</Text>,
+      <Text>2</Text>,
+      <Text>3</Text>,
+      <Text>World</Text>,
+    ]);
+  });
 });
 
 describe('walkJsx', () => {

packages/snaps-utils/src/ui.tsx

@@ -165,7 +165,15 @@ export function getTextChildren(
       }
 
       const { tokens } = token as Tokens.Paragraph;
-      children.push(...tokens.flatMap(getTextChildFromToken));
+      // We do not need to consider nesting deeper than 1 level here and we can therefore cast.
+      children.push(
+        ...(tokens.flatMap(getTextChildFromToken) as (
+          | string
+          | StandardFormattingElement
+          | LinkElement
+          | null
+        )[]),
+      );
     }
   });
 
@@ -442,7 +450,7 @@ export function getJsxChildren(element: JSXElement): (JSXElement | string)[] {
     if (Array.isArray(element.props.children)) {
       // @ts-expect-error - Each member of the union type has signatures, but
       // none of those signatures are compatible with each other.
-      return element.props.children.filter(Boolean);
+      return element.props.children.filter(Boolean).flat(Infinity);
     }
 
     if (element.props.children) {