fix: Improve field validation errors (#2937)

Improves validation errors for `Field` by rewriting the struct using
`selectiveUnion`.

Fixes #2927

---------

Co-authored-by: Maarten Zuidhoorn <[email protected]>

Author: FrederikBolding

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "lyy+HECzOFQzuzjyD1nas6GPc4kMt340ChbqQZl7uEo=",
+    "shasum": "DYLBW3jdovQYu6jwACo/3xlujGXb0YxJ19UEpUKX1qE=",
     "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": "k7NYoT8jI2E4u785PN5PoruwtjF18KNOSagNY9fS44U=",
+    "shasum": "dFTqb94KtIZ44IaoMYhGunl9c9Of9j67TNYobl+CwYg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-rpc-methods/src/permitted/createInterface.test.tsx

@@ -191,7 +191,7 @@ describe('snap_createInterface', () => {
       error: {
         code: -32602,
         message:
-          'Invalid params: At path: ui.props.children.props.children -- Expected the value to satisfy a union of `tuple | tuple | tuple | object | object | object | object | object | object`, but received: [object Object].',
+          'Invalid params: At path: ui.props.children.props.children -- Expected type to be one of: "Input", "Dropdown", "RadioGroup", "FileInput", "Checkbox", "Selector", but received: "Copyable".',
         stack: expect.any(String),
       },
       id: 1,

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

@@ -481,12 +481,20 @@ export const FieldChildUnionStruct = nullUnion([
 /**
  * A subset of JSX elements that are allowed as children of the Field component.
  */
-const FieldChildStruct = nullUnion([
-  tuple(BOX_INPUT_LEFT),
-  tuple(BOX_INPUT_RIGHT),
-  tuple(BOX_INPUT_BOTH),
-  ...FIELD_CHILDREN_ARRAY,
-]) as unknown as Struct<
+const FieldChildStruct = selectiveUnion((value) => {
+  const isArray = Array.isArray(value);
+  if (isArray && value.length === 3) {
+    return tuple(BOX_INPUT_BOTH);
+  }
+
+  if (isArray && value.length === 2) {
+    return value[0]?.type === 'Box'
+      ? tuple(BOX_INPUT_LEFT)
+      : tuple(BOX_INPUT_RIGHT);
+  }
+
+  return typedUnion(FIELD_CHILDREN_ARRAY);
+}) as unknown as Struct<
   | [InputElement, GenericSnapChildren]
   | [GenericSnapChildren, InputElement]
   | [GenericSnapChildren, InputElement, GenericSnapChildren]