feat(snaps): Add support for Address in Card title (#28539)

## **Description**

This PR adds support for the `Address` component in the `Card` title
following this PR: MetaMask/snaps#2894

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28539?quickstart=1)

## **Related issues**

## **Manual testing steps**

```jsx
<Card
  image='foo'
  title={<Address address={your address in MetaMask} displayName avatar={false} />}
  description='bar'
  extra='foobar'
/>
```

## **Screenshots/Recordings**


![241119_12h11m39s_screenshot](https://github.com/user-attachments/assets/9b32d7f6-aef4-415b-800a-350cde6696d8)


## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: GuillaumeRx

ui/components/app/snaps/snap-ui-card/snap-ui-card.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, ReactNode } from 'react';
 import {
   Display,
   FlexDirection,
@@ -13,7 +13,7 @@ import { SnapUIImage } from '../snap-ui-image';
 
 export type SnapUICardProps = {
   image?: string | undefined;
-  title: string;
+  title: string | ReactNode;
   description?: string | undefined;
   value: string;
   extra?: string | undefined;

ui/components/app/snaps/snap-ui-renderer/components/card.ts

@@ -1,13 +1,34 @@
 import { CardElement } from '@metamask/snaps-sdk/jsx';
+import { mapToTemplate } from '../utils';
 import { UIComponentFactory } from './types';
 
-export const card: UIComponentFactory<CardElement> = ({ element }) => ({
-  element: 'SnapUICard',
-  props: {
-    image: element.props.image,
-    title: element.props.title,
-    description: element.props.description,
-    value: element.props.value,
-    extra: element.props.extra,
-  },
-});
+export const card: UIComponentFactory<CardElement> = ({
+  element,
+  ...params
+}) => {
+  if (typeof element.props.title !== 'string') {
+    return {
+      element: 'SnapUICard',
+      props: {
+        image: element.props.image,
+        description: element.props.description,
+        value: element.props.value,
+        extra: element.props.extra,
+      },
+      propComponents: {
+        title: mapToTemplate({ element: element.props.title, ...params }),
+      },
+    };
+  }
+
+  return {
+    element: 'SnapUICard',
+    props: {
+      image: element.props.image,
+      title: element.props.title,
+      description: element.props.description,
+      value: element.props.value,
+      extra: element.props.extra,
+    },
+  };
+};