diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json index bb85919513..3ffc4ee3ab 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": "LciQX9cjRXeSErEsKRm9OEFW8jAq9doqaa9b/TfGN3Y=", + "shasum": "8LxymXn6+X9URWzkmurIZEyCypzF3OUm53FLjlNW0/I=", "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 f3ae515fcb..3fedc26619 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": "83SohbQ4Vp/wI2lFXL6tyuvWy7bLcRSL3yZikZEZrAg=", + "shasum": "hYGGCiIVhwOlDnwIyfpkscAd5bc2kVAyzXMq3UC6ORQ=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/snaps-sdk/src/jsx/components/Card.test.tsx b/packages/snaps-sdk/src/jsx/components/Card.test.tsx index dc4ad2c8df..ca17dab82b 100644 --- a/packages/snaps-sdk/src/jsx/components/Card.test.tsx +++ b/packages/snaps-sdk/src/jsx/components/Card.test.tsx @@ -1,3 +1,4 @@ +import { Address } from './Address'; import { Card } from './Card'; describe('Card', () => { @@ -24,4 +25,42 @@ describe('Card', () => { }, }); }); + + it('renders a card with an address as title', () => { + const result = ( + + } + description="Description" + value="$1200" + extra="0.12 ETH" + /> + ); + + expect(result).toStrictEqual({ + type: 'Card', + key: null, + props: { + image: '', + title: { + key: null, + props: { + address: '0x1234567890123456789012345678901234567890', + avatar: false, + displayName: true, + }, + type: 'Address', + }, + description: 'Description', + value: '$1200', + extra: '0.12 ETH', + }, + }); + }); }); diff --git a/packages/snaps-sdk/src/jsx/components/Card.ts b/packages/snaps-sdk/src/jsx/components/Card.ts index b9af39a702..a78a77e138 100644 --- a/packages/snaps-sdk/src/jsx/components/Card.ts +++ b/packages/snaps-sdk/src/jsx/components/Card.ts @@ -1,4 +1,5 @@ import { createSnapComponent } from '../component'; +import type { AddressElement } from './Address'; /** * The props of the {@link Card} component. @@ -11,7 +12,7 @@ import { createSnapComponent } from '../component'; */ export type CardProps = { image?: string | undefined; - title: string; + title: string | AddressElement; description?: string | undefined; value: string; extra?: string | undefined; diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx index 04255bb467..3982ff2319 100644 --- a/packages/snaps-sdk/src/jsx/validation.test.tsx +++ b/packages/snaps-sdk/src/jsx/validation.test.tsx @@ -701,6 +701,19 @@ describe('CardStruct', () => { value="$1200" extra="0.12 ETH" />, + + } + description="Description" + value="$1200" + extra="0.12 ETH" + />, ])('validates a card element', (value) => { expect(is(value, CardStruct)).toBe(true); }); diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts index 800fe04dd3..adbc39b1db 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -339,12 +339,27 @@ export const DropdownStruct: Describe = element('Dropdown', { children: children([OptionStruct]), }); +/** + * A struct for the {@link AddressElement} type. + */ +export const AddressStruct: Describe = element('Address', { + address: nullUnion([HexChecksumAddressStruct, CaipAccountIdStruct]), + truncate: optional(boolean()), + displayName: optional(boolean()), + avatar: optional(boolean()), +}); + /** * A struct for the {@link CardElement} type. */ export const CardStruct: Describe = element('Card', { image: optional(string()), - title: string(), + title: selectiveUnion((value) => { + if (typeof value === 'object') { + return AddressStruct; + } + return string(); + }), description: optional(string()), value: string(), extra: optional(string()), @@ -538,16 +553,6 @@ export const FormattingStruct: Describe = typedUnion( [BoldStruct, ItalicStruct], ); -/** - * A struct for the {@link AddressElement} type. - */ -export const AddressStruct: Describe = element('Address', { - address: nullUnion([HexChecksumAddressStruct, CaipAccountIdStruct]), - truncate: optional(boolean()), - displayName: optional(boolean()), - avatar: optional(boolean()), -}); - /** * A struct for the {@link AvatarElement} type. */