diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json index 0d55c9fe57..ef573ca559 100644 --- 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 index 140638e4ba..601709e1ac 100644 --- 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 index 31752f1a07..dcb2839a9f 100644 --- 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 = ( + +
+ + ); + + 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 = ( diff --git a/packages/snaps-sdk/src/jsx/components/Link.ts b/packages/snaps-sdk/src/jsx/components/Link.ts index b9698536f6..9618a8236e 100644 --- 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 index aa0116e54f..56c1e3c146 100644 --- 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 = ( + + +
+ + + ); + + 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 index a23672ab44..b64511150f 100644 --- 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 index 60dd9cd0d6..c58e462d1d 100644 --- a/packages/snaps-sdk/src/jsx/validation.test.tsx +++ b/packages/snaps-sdk/src/jsx/validation.test.tsx @@ -1078,6 +1078,9 @@ describe('LinkStruct', () => { , + +
+ , ])('validates a link element', (value) => { expect(is(value, LinkStruct)).toBe(true); }); @@ -1100,6 +1103,11 @@ describe('LinkStruct', () => { alt , + + +
+ + , ])('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 index dcd4a9e52d..8da02b5080 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -613,7 +613,13 @@ export const HeadingStruct: Describe = element('Heading', { */ export const LinkStruct: Describe = 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 = element('Tooltip', { */ export const RowStruct: Describe = 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')]), ),