Allow Link in Row and Address in Link (#2761)

This PR allows two things: - `Link` to be a children of `Row` - `Address` to be a children of `Link` Fixes: #2757
MetaMask · Sep 25, 2024 · 0014ff6 · 0014ff6
1 parent 80b6497
commit 0014ff6
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 6 deletions.
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": "Kn7XJHg0P1YYLU+sZF9pon4NXLadxLmUETLuLAn1qkw=",
+    "shasum": "OKpRMRDPOSMb+v1pNizzzKpUXrZIBLMJqXCh9xR3rFQ=",
     "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": "xvq90PFxbF6rSf1t2+LeGCP5oeby0u7bobCT2ySxpF0=",
+    "shasum": "9olSQCt4yqefE+yiWvkXwsB966J81losYyHKyLaVgKI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snaps-sdk/src/jsx/components/Link.test.tsx b/packages/snaps-sdk/src/jsx/components/Link.test.tsx
@@ -1,3 +1,4 @@
+import { Address } from './Address';
 import { Icon } from './Icon';
 import { Link } from './Link';
 
@@ -49,6 +50,27 @@ describe('Link', () => {
     });
   });
 
+  it('renders a link with an Address', () => {
+    const result = (
+      <Link href="https://example.com">
+        <Address address="0x1234567890123456789012345678901234567890" />
+      </Link>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Link',
+      key: null,
+      props: {
+        href: 'https://example.com',
+        children: {
+          type: 'Address',
+          key: null,
+          props: { address: '0x1234567890123456789012345678901234567890' },
+        },
+      },
+    });
+  });
+
   it('renders a link with a conditional value', () => {
     const result = (
       <Link href="https://example.com">

diff --git a/packages/snaps-sdk/src/jsx/components/Link.ts b/packages/snaps-sdk/src/jsx/components/Link.ts
@@ -1,5 +1,6 @@
 import type { SnapsChildren } from '../component';
 import { createSnapComponent } from '../component';
+import type { AddressElement } from './Address';
 import type { StandardFormattingElement } from './formatting';
 import { type IconElement } from './Icon';
 import { type ImageElement } from './Image';
@@ -8,7 +9,11 @@ import { type ImageElement } from './Image';
  * The children of the {@link Link} component.
  */
 export type LinkChildren = SnapsChildren<
-  string | StandardFormattingElement | IconElement | ImageElement
+  | string
+  | StandardFormattingElement
+  | IconElement
+  | ImageElement
+  | AddressElement
 >;
 
 /**

diff --git a/packages/snaps-sdk/src/jsx/components/Row.test.tsx b/packages/snaps-sdk/src/jsx/components/Row.test.tsx
@@ -1,5 +1,6 @@
 import { Address } from './Address';
 import { Image } from './Image';
+import { Link } from './Link';
 import { Row } from './Row';
 import { Text } from './Text';
 
@@ -73,4 +74,36 @@ describe('Row', () => {
       },
     });
   });
+
+  it('renders a row with a Link', () => {
+    const result = (
+      <Row label="Foo">
+        <Link href="https://example.com">
+          <Address address="0x1234567890123456789012345678901234567890" />
+        </Link>
+      </Row>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Row',
+      key: null,
+      props: {
+        label: 'Foo',
+        children: {
+          type: 'Link',
+          key: null,
+          props: {
+            href: 'https://example.com',
+            children: {
+              type: 'Address',
+              key: null,
+              props: {
+                address: '0x1234567890123456789012345678901234567890',
+              },
+            },
+          },
+        },
+      },
+    });
+  });
 });
diff --git a/packages/snaps-sdk/src/jsx/components/Row.ts b/packages/snaps-sdk/src/jsx/components/Row.ts
@@ -1,6 +1,7 @@
 import { createSnapComponent } from '../component';
 import type { AddressElement } from './Address';
 import type { ImageElement } from './Image';
+import type { LinkElement } from './Link';
 import type { TextElement } from './Text';
 import type { ValueElement } from './Value';
 
@@ -11,7 +12,8 @@ export type RowChildren =
   | AddressElement
   | ImageElement
   | TextElement
-  | ValueElement;
+  | ValueElement
+  | LinkElement;
 
 /**
  * The props of the {@link Row} component.

diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -1078,6 +1078,9 @@ describe('LinkStruct', () => {
     <Link href="metamask://client/">
       <Icon name="arrow-left" size="md" />
     </Link>,
+    <Link href="https://example.com">
+      <Address address="0x1234567890123456789012345678901234567890" />
+    </Link>,
   ])('validates a link element', (value) => {
     expect(is(value, LinkStruct)).toBe(true);
   });
@@ -1100,6 +1103,11 @@ describe('LinkStruct', () => {
     <Row label="label">
       <Image src="<svg />" alt="alt" />
     </Row>,
+    <Row label="label">
+      <Link href="https://example.com">
+        <Address address="0x1234567890123456789012345678901234567890" />
+      </Link>
+    </Row>,
   ])('does not validate "%p"', (value) => {
     expect(is(value, LinkStruct)).toBe(false);
   });

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -613,7 +613,13 @@ export const HeadingStruct: Describe<HeadingElement> = element('Heading', {
  */
 export const LinkStruct: Describe<LinkElement> = element('Link', {
   href: string(),
-  children: children([FormattingStruct, string(), IconStruct, ImageStruct]),
+  children: children([
+    FormattingStruct,
+    string(),
+    IconStruct,
+    ImageStruct,
+    AddressStruct,
+  ]),
 });
 
 /**
@@ -691,7 +697,13 @@ export const TooltipStruct: Describe<TooltipElement> = element('Tooltip', {
  */
 export const RowStruct: Describe<RowElement> = element('Row', {
   label: string(),
-  children: typedUnion([AddressStruct, ImageStruct, TextStruct, ValueStruct]),
+  children: typedUnion([
+    AddressStruct,
+    ImageStruct,
+    TextStruct,
+    ValueStruct,
+    LinkStruct,
+  ]),
   variant: optional(
     nullUnion([literal('default'), literal('warning'), literal('critical')]),
   ),