feat: Allow usage of Text in Value props (#2984)

This allows the usage of `Text` in the `Value` component props `value`
and `extra`.

Author: GuillaumeRx

packages/examples/packages/browserify-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "hy0TMeQeqznNQRX2j7DnxRt1Nn5Z+v0rjaWNpe1fEWE=",
+    "shasum": "nWxYWnUSrrm7uZeqQoIaP3l1hbk2ZWRKGULlxodyuhw=",
     "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": "VR3Zwjo0yqKLkuKHGDfS9AmuyW3KMbXSmi9Nh9JgCMw=",
+    "shasum": "WnX2s+XAfT18c6WH1hAniRAIgDEe7VyAieuRXFEDIEY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-sdk/src/jsx/components/Value.test.tsx

@@ -1,3 +1,4 @@
+import { Text } from './Text';
 import { Value } from './Value';
 
 describe('Value', () => {
@@ -13,4 +14,36 @@ describe('Value', () => {
       },
     });
   });
+
+  it('renders with text elements', () => {
+    const result = (
+      <Value
+        value={<Text color="error">0.05 ETH</Text>}
+        extra={<Text color="error">$200</Text>}
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Value',
+      key: null,
+      props: {
+        extra: {
+          type: 'Text',
+          key: null,
+          props: {
+            children: '$200',
+            color: 'error',
+          },
+        },
+        value: {
+          type: 'Text',
+          key: null,
+          props: {
+            children: '0.05 ETH',
+            color: 'error',
+          },
+        },
+      },
+    });
+  });
 });

packages/snaps-sdk/src/jsx/components/Value.ts

@@ -1,4 +1,5 @@
 import { createSnapComponent } from '../component';
+import type { TextElement } from './Text';
 
 /**
  * The props of the {@link Value} component.
@@ -7,8 +8,8 @@ import { createSnapComponent } from '../component';
  * @property extra - The extra text shown on the left side.
  */
 export type ValueProps = {
-  value: string;
-  extra: string;
+  value: TextElement | string;
+  extra: TextElement | string;
 };
 
 const TYPE = 'Value';
@@ -26,6 +27,8 @@ const TYPE = 'Value';
  * @returns A value element.
  * @example
  * <Value value="0.05 ETH" extra="$200" />
+ * @example
+ * <Value value={<Text color='error'>0.05 ETH</Text>} extra={<Text color='error'>$200</Text>} />
  */
 export const Value = createSnapComponent<ValueProps, typeof TYPE>(TYPE);
 

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

@@ -1325,12 +1325,15 @@ describe('SpinnerStruct', () => {
 });
 
 describe('ValueStruct', () => {
-  it.each([<Value extra="foo" value="bar" />])(
-    'validates a value element',
-    (value) => {
-      expect(is(value, ValueStruct)).toBe(true);
-    },
-  );
+  it.each([
+    <Value extra="foo" value="bar" />,
+    <Value
+      value={<Text color="error">0.05 ETH</Text>}
+      extra={<Text color="error">$200</Text>}
+    />,
+  ])('validates a value element', (value) => {
+    expect(is(value, ValueStruct)).toBe(true);
+  });
 
   it.each([
     'foo',
@@ -1343,6 +1346,10 @@ describe('ValueStruct', () => {
     <Value />,
     // @ts-expect-error - Invalid props.
     <Value left="foo" />,
+    <Value
+      value={<Heading>0.05 ETH</Heading>}
+      extra={<Heading>$200</Heading>}
+    />,
     <Text>foo</Text>,
     <Box>
       <Text>foo</Text>

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

@@ -667,14 +667,6 @@ export const CopyableStruct: Describe<CopyableElement> = element('Copyable', {
  */
 export const DividerStruct: Describe<DividerElement> = element('Divider');
 
-/**
- * A struct for the {@link ValueElement} type.
- */
-export const ValueStruct: Describe<ValueElement> = element('Value', {
-  value: string(),
-  extra: string(),
-});
-
 /**
  * A struct for the {@link HeadingElement} type.
  */
@@ -728,6 +720,26 @@ export const TextStruct: Describe<TextElement> = element('Text', {
   ),
 });
 
+/**
+ * A struct for the {@link ValueElement} type.
+ */
+export const ValueStruct: Describe<ValueElement> = element('Value', {
+  value: selectiveUnion((value) => {
+    if (typeof value === 'string') {
+      return string();
+    }
+
+    return TextStruct;
+  }),
+  extra: selectiveUnion((value) => {
+    if (typeof value === 'string') {
+      return string();
+    }
+
+    return TextStruct;
+  }),
+});
+
 /**
  * A subset of JSX elements that are allowed as children of the Tooltip component.
  * This set should include all text components and the Image.