fix: Allow any element as the child of Container (#2698)

Allow any element (that is contained in `BoxChildStruct`) to be the child of `Container`. The existing restriction was somewhat pointless since you can use element from `BoxChildStruct` at the root. --------- Co-authored-by: MetaMask Bot <metamaskbot@users.noreply.github.com>
MetaMask · Sep 4, 2024 · 5ce5b1d · 5ce5b1d
1 parent f5d32c7
commit 5ce5b1d
Show file tree

Hide file tree

Showing 32 changed files with 56 additions and 50 deletions.
diff --git a/packages/examples/packages/bip32/snap.manifest.json b/packages/examples/packages/bip32/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "4BL6Jd1ugM5bMcgSAHY2pLElwTfDUFjq6w0n2O/Im4U=",
+    "shasum": "eGQ6Df8XxUy7H+BzRY0ejWy9Q0sIA5R2Nw0iBTq+de8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/bip44/snap.manifest.json b/packages/examples/packages/bip44/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "abe6r4FVjGVzWmhzIIx0fYZNADgr4VdtltsDeb2BE28=",
+    "shasum": "nX6HGVCdxTxTLiNPjLNQzpJ+fTtkp5xAIcU1b/APImg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "fxRFuVGOLsP/ALHeZXwlq8PIarpFGCyqkNviBX0hB7A=",
+    "shasum": "33evXsKKimuz+hkPv+Rxa5Ng9IKOINWwEgHU9vBK63E=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "jXLaAeTYhjHiQca4Y1UQOmySIuJ3RGQ9mJNc4er/4ZA=",
+    "shasum": "3PKsX/N6a6kXY30gtpgti4NEeGiSwxZEV6e+U5HP6Iw=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/client-status/snap.manifest.json b/packages/examples/packages/client-status/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "mQIYo1bLokB7M9qQJxG35svVVPksCoOOeeRDDtiu7HU=",
+    "shasum": "fFtbo7U1pKoqTQF0r7QZikEs8Nafav3ou/Wm1raUVA4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/cronjobs/snap.manifest.json b/packages/examples/packages/cronjobs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "NcfRhmrZNMUJOc9h+n6KiCo/Ot0aeoJ9WWJSy2HL1Gg=",
+    "shasum": "TDGaiphTZ8OS6xph5aIa97SPOVXjJN0ORMflp1XHQoY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/dialogs/snap.manifest.json b/packages/examples/packages/dialogs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "uWEAITpuEjxaw2+B0pq0gmg+FTOqzM9jv2O9KyiivdQ=",
+    "shasum": "cW20+wD/Lveazji0PKSrfzgWmKjt30kxvSY9Na2JSfQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/ethereum-provider/snap.manifest.json b/packages/examples/packages/ethereum-provider/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "tBYEmIv6cCEk42IQ5CSOIIkh9QmB945KyoW8cSl1P/o=",
+    "shasum": "9RGytF98DSIh9XEKnE1qIZyP9YMDgZ+FulzEr0/brF0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/ethers-js/snap.manifest.json b/packages/examples/packages/ethers-js/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "eEqE9FxXKHDEw6FFYb0bCijPQk18wNs6m+SaBHbZzxA=",
+    "shasum": "WkJL2n6iaJJaNdytMBZUMuDXAt14mq6/5+/8PbsrIdw=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/file-upload/snap.manifest.json b/packages/examples/packages/file-upload/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "jRN7tvhMpGou1Nkz4K8DiNTMkVydzknsJ+tP2K5aW9E=",
+    "shasum": "U1HtU+2ib2qDOgovRtZAiIjA+rnC7OueDjls6Ebl6TM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/get-entropy/snap.manifest.json b/packages/examples/packages/get-entropy/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "47IeGhwtRAwOhUeI/oC2AE6kinf0nakTZqgRl/lgDIo=",
+    "shasum": "D+ItCb37EwIUZc58Nq8czmYcAwpllqd2FKgVTfuAvwY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/get-file/snap.manifest.json b/packages/examples/packages/get-file/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "A7lRE1zaLuwC5B4cqFuwT1os0b9OhgzCfrGsAqG0uZM=",
+    "shasum": "9hRIxvPEetJVFo3Ed+2BdZ7DANNVUw0Tjo+5UK5mefc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/home-page/snap.manifest.json b/packages/examples/packages/home-page/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "/2H3Z/T9NtPu9bi4oTQl8STDvd2hS6Y38WD42eZFu2Q=",
+    "shasum": "Q6hggrSrhxfVVa/QCBV43ZKj52rtINLPRgDEyIZmjZw=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/images/snap.manifest.json b/packages/examples/packages/images/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "VzvCIKqxh7xkhpY3JgZrZbsgB4rtMV4ux6d5aYxLK+0=",
+    "shasum": "f4Y1cNVB6h/jOCkIpIMjSls1URfQQWecUjAPTguv3MA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/interactive-ui/snap.manifest.json b/packages/examples/packages/interactive-ui/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "jpBXpGnue+kKtRDoadC8MBWahxpHxvH6CYrPnPQzcrE=",
+    "shasum": "awa6GvnLTq3455FcrOHjgEbdA08A2PMmKw8Jqv/BwR0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json b/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "GzEMmSxdzB7yXYXbiWDYj+hYcDsjbiVOYy3tsfGpUFE=",
+    "shasum": "xKqurVfpdlotaOEodz5X5LbAp343Mcu8JXQ+zfTiyUU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json b/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Dq88h1Jg8IugLbV6bu7YlWycxbzjFitBnvx0vSK3E7Q=",
+    "shasum": "BoL6X/BzHLVMASCxnwAUAw+2XzD9B8gSvE7GcbJjfug=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/json-rpc/snap.manifest.json b/packages/examples/packages/json-rpc/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "eAXZmOyliFI5XNCUU1/1yUKF/ifrgpD320x9wOpCVeE=",
+    "shasum": "R1rq0U1MY5dGg9b4ECvQqELVlZWq7adMHYTu/bQRSWs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/jsx/snap.manifest.json b/packages/examples/packages/jsx/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "kb0XwfkEk3arGA858y9W6TiMBTJqZnfatcQvu331A/0=",
+    "shasum": "FT62FWsImEz4/CQmTb+dcnajSNtt4sGW/o3GaN+4y10=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/lifecycle-hooks/snap.manifest.json b/packages/examples/packages/lifecycle-hooks/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "XjQQe1QEuXCd9cuKib4y1SWp5nLMCxEMGPB6D96pQbw=",
+    "shasum": "4CGq8+febvnopYV5vM1P6LYNxTyuJPAzVkuShodxhQM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/localization/snap.manifest.json b/packages/examples/packages/localization/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "jrbRHzmOPuyHJocVX8Sq+qoV8KAcJHAaPxMCZemU+E0=",
+    "shasum": "e2fGLS7bK7QTemBMPYvmExYJcQXyLFd6JsteSQxJ6QI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/manage-state/snap.manifest.json b/packages/examples/packages/manage-state/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "8kvitczxyMNE1BV9aqDIlMcmY5uaU3mI1IqKigbrW00=",
+    "shasum": "TjIsLYT+nNhjP8w1e6xC4QbhYTEjV4B+KGNvBN1vpTI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/network-access/snap.manifest.json b/packages/examples/packages/network-access/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "PtScya2yLdGfSz4hZFdXDM3YWw4vw5QXctoZZ78VTWo=",
+    "shasum": "CxXZf7wwJM7Q7hGx7a/eEM2p2pWwW2wSmwKcY90Bfh0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/notifications/snap.manifest.json b/packages/examples/packages/notifications/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Dv5+/l1uok0muzLpmvq5yyITG1Td6kZOjLuDKBhNjJc=",
+    "shasum": "/ncEYiTIVVmxnRpsDZ0JbQcSxkX23775dkIttFQtFNA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/rollup-plugin/snap.manifest.json b/packages/examples/packages/rollup-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "/MVd7yap6qpqkzwLVAX88fbyDyXAH4NtremDShWw1FY=",
+    "shasum": "SfJnA+DmyIJKA/iR9vJULwikVGkjH7A3juLxrckRgxE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/signature-insights/snap.manifest.json b/packages/examples/packages/signature-insights/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "xRnWfG3zdelOzrmPEo2HFYX2Qmj7e7OExF23FO4+tXg=",
+    "shasum": "bfY+b/o23zP4aCEUzOsoysnpJBxtiLxPWD8BqcZNduo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/transaction-insights/snap.manifest.json b/packages/examples/packages/transaction-insights/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "wjv+gvLqJbyxldS1LZmJaEUs/1aAkO1whl0LCMdddCk=",
+    "shasum": "KzNuP4IpARsXGw9Atgmsig27SYR8kxzv7K45p3XTeVQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/wasm/snap.manifest.json b/packages/examples/packages/wasm/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "/lWk6yg2McC875r/z6DnNqjcmVjDBDu/QENuDJEqiBo=",
+    "shasum": "TGmhAkRTYVqUd/GXYJ+RvI4ZPDw+4sx2bxxyNt0+9oI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/webpack-plugin/snap.manifest.json b/packages/examples/packages/webpack-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "m5aK+J1xwQhJT4lu/z15NYSFKmlxsYFu9RhhwlfrknY=",
+    "shasum": "e9RpXCYrEZfBhsk7sGPCqyMSWolBVKbc2tABCfIqck0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git 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
@@ -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
@@ -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.