From a5d85c3d789163ff905305b3b99c2800fbaab7cb Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Thu, 12 Sep 2024 14:14:41 +0200
Subject: [PATCH] Add `center` prop to `Box` component (#2716)

This adds the `center` prop to the `Box` component allowing the
childrens in it to be center aligned.
---
 .../examples/packages/browserify-plugin/snap.manifest.json     | 2 +-
 packages/examples/packages/browserify/snap.manifest.json       | 2 +-
 packages/snaps-sdk/src/jsx/components/Box.test.tsx             | 3 ++-
 packages/snaps-sdk/src/jsx/components/Box.ts                   | 2 ++
 packages/snaps-sdk/src/jsx/validation.ts                       | 1 +
 5 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
index beb24fd426..8d444f59cf 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": "N8UDq+EKKrGSUr/xn+g8Fn0ebj34zd+6Urgv1S7pzuM=",
+    "shasum": "jBWYn37FTI6J3QI2ORlw36g4uXpIcBdH3n4o0CRdDvk=",
     "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 74cb179e35..ded43249de 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": "j2B/JJ/tTdTWMJo+c5S8vZpnt4pRk9Xp3MhYBmDaz1s=",
+    "shasum": "GKhf9ua3RUl21+DodL6sdx+DQFBkkdjVHMxHQy0GjGE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/snaps-sdk/src/jsx/components/Box.test.tsx b/packages/snaps-sdk/src/jsx/components/Box.test.tsx
index a03c797dbe..41bf791072 100644
--- a/packages/snaps-sdk/src/jsx/components/Box.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/Box.test.tsx
@@ -92,7 +92,7 @@ describe('Box', () => {
 
   it('renders a box with a conditional', () => {
     const result = (
-      <Box direction="horizontal" alignment="space-between">
+      <Box direction="horizontal" alignment="space-between" center={true}>
         {false && <Text>Hello</Text>}
       </Box>
     );
@@ -103,6 +103,7 @@ describe('Box', () => {
       props: {
         direction: 'horizontal',
         alignment: 'space-between',
+        center: true,
         children: false,
       },
     });
diff --git a/packages/snaps-sdk/src/jsx/components/Box.ts b/packages/snaps-sdk/src/jsx/components/Box.ts
index a58b502aac..f9d1742268 100644
--- a/packages/snaps-sdk/src/jsx/components/Box.ts
+++ b/packages/snaps-sdk/src/jsx/components/Box.ts
@@ -7,6 +7,7 @@ import { createSnapComponent } from '../component';
  * @property children - The children of the box.
  * @property direction - The direction to stack the components within the box. Defaults to `vertical`.
  * @property alignment - The alignment mode to use within the box. Defaults to `start`.
+ * @property center - Whether to center the children within the box. Defaults to `false`.
  */
 export type BoxProps = {
   // We can't use `JSXElement` because it causes a circular reference.
@@ -19,6 +20,7 @@ export type BoxProps = {
     | 'space-between'
     | 'space-around'
     | undefined;
+  center?: boolean | undefined;
 };
 
 const TYPE = 'Box';
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index e06d762a72..48449d7c67 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -493,6 +493,7 @@ export const BoxStruct: Describe<BoxElement> = element('Box', {
       literal('space-around'),
     ]),
   ),
+  center: optional(boolean()),
 });
 
 const FooterButtonStruct = refine(ButtonStruct, 'FooterButton', (value) => {