feat: Cell component

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

@@ -0,0 +1,36 @@
+import { createSnapComponent } from '../component';
+
+/**
+ * The props of the {@link Cell} component.
+ *
+ * @property value - The value to copy when the user clicks on the copyable
+ * element.
+ * @property sensitive - Whether the value is sensitive. If `true`, the value
+ * will be hidden when the user is not interacting with the copyable element.
+ */
+export type CellProps = {
+  image: string;
+  title: string;
+  description: string;
+  value: string;
+  valueExtra: string;
+};
+
+const TYPE = 'Cell';
+
+/**
+ * A copyable component, which is used to display text that can be copied by the
+ * user.
+ *
+ * @param props - The props of the component.
+ * @example
+ * TODO
+ */
+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 { CopyableElement } from './Copyable';
 import type { DividerElement } from './Divider';
 import type { StandardFormElement } from './form';
@@ -17,6 +18,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';
@@ -36,6 +38,7 @@ export type JSXElement =
   | StandardFormattingElement
   | AddressElement
   | BoxElement
+  | CellElement
   | CopyableElement
   | DividerElement
   | ValueElement

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

@@ -37,6 +37,7 @@ import type {
   BoldElement,
   BoxElement,
   ButtonElement,
+  CellElement,
   CopyableElement,
   DividerElement,
   DropdownElement,
@@ -288,6 +289,17 @@ export const ValueStruct: Describe<ValueElement> = element('Value', {
   extra: string(),
 });
 
+/**
+ * A struct for the {@link ValueElement} type.
+ */
+export const CellStruct: Describe<CellElement> = element('Cell', {
+  image: string(),
+  title: string(),
+  description: string(),
+  value: string(),
+  valueExtra: string(),
+});
+
 /**
  * A struct for the {@link HeadingElement} type.
  */
@@ -396,6 +408,7 @@ export const BoxChildStruct = nullUnion([
   SpinnerStruct,
   TextStruct,
   TooltipStruct,
+  CellStruct,
 ]);
 
 /**
@@ -429,6 +442,7 @@ export const JSXElementStruct: Describe<JSXElement> = nullUnion([
   OptionStruct,
   ValueStruct,
   TooltipStruct,
+  CellStruct,
 ]);
 
 /**