From 82018a30e15473be0741ef1bdff98e2e3f7e2df2 Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Wed, 4 Sep 2024 15:20:16 +0200
Subject: [PATCH] fix: Allow any element as the child of Container

---
 .../snaps-sdk/src/jsx/components/Container.ts |  4 +--
 .../snaps-sdk/src/jsx/validation.test.tsx     |  9 +++++
 packages/snaps-sdk/src/jsx/validation.ts      | 35 +++++++++----------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/packages/snaps-sdk/src/jsx/components/Container.ts b/packages/snaps-sdk/src/jsx/components/Container.ts
index d6a6bf8c9b..4277fcab54 100644
--- a/packages/snaps-sdk/src/jsx/components/Container.ts
+++ b/packages/snaps-sdk/src/jsx/components/Container.ts
@@ -1,5 +1,5 @@
+import type { GenericSnapElement } from '../component';
 import { createSnapComponent } from '../component';
-import type { BoxElement } from './Box';
 import type { FooterElement } from './Footer';
 
 /**
@@ -8,7 +8,7 @@ import type { FooterElement } from './Footer';
  * @property children - The Box and the Footer or the Box element.
  */
 export type ContainerProps = {
-  children: [BoxElement, FooterElement] | BoxElement;
+  children: [GenericSnapElement, FooterElement] | GenericSnapElement;
 };
 
 const TYPE = 'Container';
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index f30d9544cc..d470b6ee0f 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -616,6 +616,15 @@ describe('ContainerStruct', () => {
         <Button name="confirm">Confirm</Button>
       </Footer>
     </Container>,
+    <Container>
+      <Text>Hello world!</Text>
+    </Container>,
+    <Container>
+      <Text>Hello world!</Text>
+      <Footer>
+        <Button name="confirm">Confirm</Button>
+      </Footer>
+    </Container>,
   ])('validates a container element', (value) => {
     expect(is(value, ContainerStruct)).toBe(true);
   });
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index 565de3486e..5e04481301 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -471,25 +471,6 @@ export const FooterStruct: Describe<FooterElement> = element('Footer', {
   children: FooterChildStruct,
 });
 
-/**
- * A subset of JSX elements that are allowed as children of the Container component.
- * This set should include a single Box or a tuple of a Box and a Footer component.
- */
-export const ContainerChildStruct = nullUnion([
-  tuple([BoxStruct, FooterStruct]),
-  BoxStruct,
-]);
-
-/**
- * A struct for the {@link ContainerElement} type.
- */
-export const ContainerStruct: Describe<ContainerElement> = element(
-  'Container',
-  {
-    children: ContainerChildStruct,
-  },
-);
-
 /**
  * A struct for the {@link CopyableElement} type.
  */
@@ -636,6 +617,22 @@ export const BoxChildStruct = typedUnion([
   SectionStruct,
 ]);
 
+/**
+ * A struct for the {@link ContainerElement} type.
+ */
+export const ContainerStruct: Describe<ContainerElement> = element(
+  'Container',
+  {
+    children: nullUnion([
+      tuple([BoxChildStruct, FooterStruct]),
+      BoxChildStruct,
+    ]) as unknown as Struct<
+      [GenericSnapElement, FooterElement] | GenericSnapElement,
+      null
+    >,
+  },
+);
+
 /**
  * For now, the allowed JSX elements at the root are the same as the allowed
  * children of the Box component.