From f779f3aae5f96046f7a8ca7dda534886e993d5d8 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Wed, 8 Jan 2025 11:58:30 +0100
Subject: [PATCH] allow usage of `Text` in `Value` props

---
 .../browserify-plugin/snap.manifest.json      |  2 +-
 .../packages/browserify/snap.manifest.json    |  2 +-
 .../src/jsx/components/Value.test.tsx         | 33 +++++++++++++++++++
 .../snaps-sdk/src/jsx/components/Value.ts     |  7 ++--
 .../snaps-sdk/src/jsx/validation.test.tsx     | 19 +++++++----
 packages/snaps-sdk/src/jsx/validation.ts      | 28 +++++++++++-----
 6 files changed, 73 insertions(+), 18 deletions(-)

diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
index c38dc1cfce..fa6fa5611f 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": "hy0TMeQeqznNQRX2j7DnxRt1Nn5Z+v0rjaWNpe1fEWE=",
+    "shasum": "nWxYWnUSrrm7uZeqQoIaP3l1hbk2ZWRKGULlxodyuhw=",
     "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 cd6594a575..7e42f6f510 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": "VR3Zwjo0yqKLkuKHGDfS9AmuyW3KMbXSmi9Nh9JgCMw=",
+    "shasum": "WnX2s+XAfT18c6WH1hAniRAIgDEe7VyAieuRXFEDIEY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/snaps-sdk/src/jsx/components/Value.test.tsx b/packages/snaps-sdk/src/jsx/components/Value.test.tsx
index 765d89caa4..adb3a095f2 100644
--- a/packages/snaps-sdk/src/jsx/components/Value.test.tsx
+++ b/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',
+          },
+        },
+      },
+    });
+  });
 });
diff --git a/packages/snaps-sdk/src/jsx/components/Value.ts b/packages/snaps-sdk/src/jsx/components/Value.ts
index 67e0334bd5..91d7964ee7 100644
--- a/packages/snaps-sdk/src/jsx/components/Value.ts
+++ b/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);
 
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index e3e2b086d8..721a586459 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/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>
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index 1be3f4c660..4e36dcf81c 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/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.