Add support for Address in Card title. (#2894)

This PR adds support for the `Address` component as a title in the
`Card` component.

Author: GuillaumeRx

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",

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",

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 = (
+      <Card
+        image="<svg />"
+        title={
+          <Address
+            address="0x1234567890123456789012345678901234567890"
+            displayName
+            avatar={false}
+          />
+        }
+        description="Description"
+        value="$1200"
+        extra="0.12 ETH"
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Card',
+      key: null,
+      props: {
+        image: '<svg />',
+        title: {
+          key: null,
+          props: {
+            address: '0x1234567890123456789012345678901234567890',
+            avatar: false,
+            displayName: true,
+          },
+          type: 'Address',
+        },
+        description: 'Description',
+        value: '$1200',
+        extra: '0.12 ETH',
+      },
+    });
+  });
 });

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;

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -701,6 +701,19 @@ describe('CardStruct', () => {
       value="$1200"
       extra="0.12 ETH"
     />,
+    <Card
+      image="<svg />"
+      title={
+        <Address
+          address="0x1234567890123456789012345678901234567890"
+          displayName
+          avatar={false}
+        />
+      }
+      description="Description"
+      value="$1200"
+      extra="0.12 ETH"
+    />,
   ])('validates a card element', (value) => {
     expect(is(value, CardStruct)).toBe(true);
   });

packages/snaps-sdk/src/jsx/validation.ts

@@ -339,12 +339,27 @@ export const DropdownStruct: Describe<DropdownElement> = element('Dropdown', {
   children: children([OptionStruct]),
 });
 
+/**
+ * A struct for the {@link AddressElement} type.
+ */
+export const AddressStruct: Describe<AddressElement> = 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<CardElement> = 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<StandardFormattingElement> = typedUnion(
   [BoldStruct, ItalicStruct],
 );
 
-/**
- * A struct for the {@link AddressElement} type.
- */
-export const AddressStruct: Describe<AddressElement> = element('Address', {
-  address: nullUnion([HexChecksumAddressStruct, CaipAccountIdStruct]),
-  truncate: optional(boolean()),
-  displayName: optional(boolean()),
-  avatar: optional(boolean()),
-});
-
 /**
  * A struct for the {@link AvatarElement} type.
  */