feat: Cell component

Author: FrederikBolding

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

@@ -0,0 +1,42 @@
+import { createSnapComponent } from '../component';
+
+/**
+ * The props of the {@link Cell} component.
+ *
+ * @property image - The image to show as part of the Cell, must be an SVG string.
+ * @property title - The title.
+ * @property description - The description, shown below the title.
+ * @property value - The value, shown on the right side.
+ * @property extra - An additional optional value shown below the value.
+ */
+export type CellProps = {
+  image?: string | undefined;
+  title: string;
+  description?: string | undefined;
+  value: string;
+  extra?: string | undefined;
+};
+
+const TYPE = 'Cell';
+
+/**
+ * A cell component which can be used to display values within a cell structure.
+ *
+ * @param props - The props of the component.
+ * @param props.image - The image to show as part of the Cell, must be an SVG string.
+ * @param props.title - The title.
+ * @param props.description - The description, shown below the title.
+ * @param props.value - The value, shown on the right side.
+ * @param props.extra - An additional optional value shown below the value.
+ * @returns A box element.
+ * @example
+ * <Cell image="<svg />" title="Title" description="Description" value="$1200" extra="0.12 ETH" />
+ */
+export const Cell = createSnapComponent<CellProps, typeof TYPE>(TYPE);
+
+/**
+ * A cell element.
+ *
+ * @see Cell
+ */
+export type CellElement = ReturnType<typeof Cell>;

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

@@ -1,5 +1,6 @@
 import type { AddressElement } from './Address';
 import type { BoxElement } from './Box';
+import type { CellElement } from './Cell';
 import type { ContainerElement } from './Container';
 import type { CopyableElement } from './Copyable';
 import type { DividerElement } from './Divider';
@@ -19,6 +20,7 @@ export * from './form';
 export * from './formatting';
 export * from './Address';
 export * from './Box';
+export * from './Cell';
 export * from './Copyable';
 export * from './Divider';
 export * from './Value';
@@ -40,6 +42,7 @@ export type JSXElement =
   | StandardFormattingElement
   | AddressElement
   | BoxElement
+  | CellElement
   | ContainerElement
   | CopyableElement
   | DividerElement

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

@@ -42,6 +42,7 @@ import type {
   BoxElement,
   ButtonElement,
   CheckboxElement,
+  CellElement,
   CopyableElement,
   DividerElement,
   DropdownElement,
@@ -380,6 +381,17 @@ export const ValueStruct: Describe<ValueElement> = element('Value', {
   extra: string(),
 });
 
+/**
+ * A struct for the {@link CellElement} type.
+ */
+export const CellStruct: Describe<CellElement> = element('Cell', {
+  image: optional(string()),
+  title: string(),
+  description: optional(string()),
+  value: string(),
+  extra: optional(string()),
+});
+
 /**
  * A struct for the {@link HeadingElement} type.
  */
@@ -488,6 +500,7 @@ export const BoxChildStruct = nullUnion([
   TextStruct,
   TooltipStruct,
   CheckboxStruct,
+  CellStruct,
 ]);
 
 /**
@@ -527,6 +540,7 @@ export const JSXElementStruct: Describe<JSXElement> = nullUnion([
   CheckboxStruct,
   FooterStruct,
   ContainerStruct,
+  CellStruct,
 ]);
 
 /**