fix: Disallow images and icons in footers

MetaMask · Aug 29, 2024 · 6612283 · 6612283
1 parent 51c1db1
commit 6612283
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -518,6 +518,9 @@ describe('FooterStruct', () => {
       <Button name="cancel">Cancel</Button>
       <Button name="confirm">Confirm</Button>
     </Footer>,
+    <Footer>
+      <Button name="cancel">Cancel {true && 'foo'}</Button>
+    </Footer>,
   ])('validates a footer element', (value) => {
     expect(is(value, FooterStruct)).toBe(true);
   });
@@ -541,6 +544,25 @@ describe('FooterStruct', () => {
     <Row label="label">
       <Image src="<svg />" alt="alt" />
     </Row>,
+    <Footer>
+      <Button name="confirm">
+        <Icon name="warning" />
+      </Button>
+    </Footer>,
+    <Footer>
+      <Button name="cancel">
+        <Image src="<svg />" />
+      </Button>
+      <Button name="confirm">
+        <Image src="<svg />" />
+      </Button>
+    </Footer>,
+    <Footer>
+      <Button name="confirm">
+        <Icon name="warning" />
+        <Icon name="warning" />
+      </Button>
+    </Footer>,
   ])('does not validate "%p"', (value) => {
     expect(is(value, FooterStruct)).toBe(false);
   });

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -17,6 +17,7 @@ import {
   record,
   string,
   tuple,
+  refine,
 } from '@metamask/superstruct';
 import {
   hasProperty,
@@ -412,6 +413,31 @@ export const BoxStruct: Describe<BoxElement> = element('Box', {
   ),
 });
 
+const FooterButtonStruct = refine(ButtonStruct, 'FooterButton', (value) => {
+  if (
+    typeof value.props.children === 'string' ||
+    typeof value.props.children === 'boolean' ||
+    value.props.children === null
+  ) {
+    return true;
+  }
+
+  if (Array.isArray(value.props.children)) {
+    const hasNonTextElements = value.props.children.some(
+      (child) =>
+        typeof child !== 'string' &&
+        typeof child !== 'boolean' &&
+        child !== null,
+    );
+
+    if (!hasNonTextElements) {
+      return true;
+    }
+  }
+
+  return 'Footer buttons must contain text';
+});
+
 /**
  * A struct for the {@link SectionElement} type.
  */
@@ -434,8 +460,8 @@ export const SectionStruct: Describe<SectionElement> = element('Section', {
  * This set should include a single button or a tuple of two buttons.
  */
 export const FooterChildStruct = nullUnion([
-  tuple([ButtonStruct, ButtonStruct]),
-  ButtonStruct,
+  tuple([FooterButtonStruct, FooterButtonStruct]),
+  FooterButtonStruct,
 ]);
 
 /**