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.
*/