fix: Improve field validation errors

Author: FrederikBolding

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

@@ -480,12 +480,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]