feat(snaps): allow usage of Text in Value props (#29624)

## **Description**

This PR allows the usage of the `Text` component in the Snap UI `Value`
component props.

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

## **Related issues**

progresses: MetaMask/snaps#2984

## **Manual testing steps**

```tsx
<Box>
  <Row label="Amount">
    <Value
      value={<Text color="success">1.555 ETH</Text>}
      extra={<Text color="error">2.44 $</Text>}
    />
  </Row>
</Box>
```

## **Screenshots/Recordings**


![image](https://github.com/user-attachments/assets/44d06181-cd3c-472b-8067-a665c6bbc81f)

## **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/main/.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/main/.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/confirm/info/row/value-double.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Box, Text } from '../../../../component-library';
 import {
   AlignItems,
@@ -12,8 +12,8 @@ import { useRowContext } from './hook';
 import { ConfirmInfoRowVariant } from './row';
 
 export type ConfirmInfoRowValueDoubleProps = {
-  left: string;
-  right: string;
+  left: ReactNode;
+  right: ReactNode;
 };
 
 const LEFT_TEXT_COLORS = {
@@ -35,8 +35,16 @@ export const ConfirmInfoRowValueDouble = ({
       flexWrap={FlexWrap.Wrap}
       gap={1}
     >
-      <Text color={LEFT_TEXT_COLORS[variant] as TextColor}>{left}</Text>
-      <Text color={TextColor.inherit}>{right}</Text>
+      {typeof left === 'string' ? (
+        <Text color={LEFT_TEXT_COLORS[variant] as TextColor}>{left}</Text>
+      ) : (
+        left
+      )}
+      {typeof right === 'string' ? (
+        <Text color={TextColor.inherit}>{right}</Text>
+      ) : (
+        right
+      )}
     </Box>
   );
 };

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

@@ -1,10 +1,32 @@
 import { ValueElement } from '@metamask/snaps-sdk/jsx';
+import { mapToTemplate } from '../utils';
 import { UIComponentFactory } from './types';
 
-export const value: UIComponentFactory<ValueElement> = ({ element }) => ({
-  element: 'ConfirmInfoRowValueDouble',
-  props: {
-    left: element.props.extra,
-    right: element.props.value,
-  },
-});
+export const value: UIComponentFactory<ValueElement> = ({
+  element,
+  ...params
+}) => {
+  return {
+    element: 'ConfirmInfoRowValueDouble',
+    props: {
+      left:
+        typeof element.props.extra === 'string'
+          ? element.props.extra
+          : undefined,
+      right:
+        typeof element.props.value === 'string'
+          ? element.props.value
+          : undefined,
+    },
+    propComponents: {
+      left:
+        typeof element.props.extra === 'string'
+          ? undefined
+          : mapToTemplate({ element: element.props.extra, ...params }),
+      right:
+        typeof element.props.value === 'string'
+          ? undefined
+          : mapToTemplate({ element: element.props.value, ...params }),
+    },
+  };
+};