Add more components to Snaps Custom UI (#1835)

* Add more components to Snaps Custom UI

This PR was made with Cursor AI. I have attempted to the best of my ability to make sure these edits are accurate.

* Update whats-new.md

* Separate links per component in what's new

Co-authored-by: Alexandra Carrillo <[email protected]>

* Update Banner description text

Co-authored-by: Alexandra Carrillo <[email protected]>

* Update props for container

Co-authored-by: Alexandra Carrillo <[email protected]>

* Update footer description

Co-authored-by: Alexandra Carrillo <[email protected]>

* Update footer props

Co-authored-by: Alexandra Carrillo <[email protected]>

* Update Value props

Co-authored-by: Alexandra Carrillo <[email protected]>

* Move Banner above Bold

* Fix props for Banner and add Skeleton component

* Add Value as a child of Row

* Add props for Address and update children for Text

* Update Avatar with new prop

* Add prop for Box and update What's New

* Apply suggestions from code review

* Add defaults to Skeleton props

* Cleanup

Remove erroneous message about Address tooltip

Make checkbox variant prop description match style of document.

Make Skeleton defaults descriptions match style of document.

---------

Co-authored-by: Alexandra Carrillo <[email protected]>

Author: Montoya

docs/whats-new.md

@@ -9,6 +9,11 @@ The latest major MetaMask documentation updates are listed by the month they wer
 For a comprehensive list of recent product changes, visit the "Release Notes" section at the bottom
 of the [MetaMask developer page](https://metamask.io/developer/).
 
+## January 2025
+
+- Documented Snaps [`Banner`](/snaps/features/custom-ui/#banner), [`Container`](/snaps/features/custom-ui/#container), [`Footer`](/snaps/features/custom-ui/#footer), [`Skeleton`](/snaps/features/custom-ui/#skeleton), and [`Value`](/snaps/features/custom-ui/#value) UI components.
+  ([#1835](https://github.com/MetaMask/metamask-docs/pull/1835))
+
 ## December 2024
 
 - Documented [Swellchain](/services/reference/swellchain) support. ([#1776](https://github.com/MetaMask/metamask-docs/pull/1776))

snaps/features/custom-ui/index.md

@@ -65,13 +65,16 @@ The following custom UI components are available:
 
 Outputs a formatted text field for a blockchain address. 
 The address is automatically displayed with a [Jazzicon](https://www.npmjs.com/package/@metamask/jazzicon)
-and truncated value. 
-Hovering over the address shows the full value in a tooltip.
+and truncated value.
 
 #### Props 
 
 - `address`: `string` - A valid Ethereum address, starting with `0x`, or a valid 
   [CAIP-10](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-10.md) address.
+- `truncate`: `boolean` - (Optional) Whether to truncate the address. The default is `true`.
+- `displayName`: `boolean` - (Optional) Whether to display the internally saved account label in place of the address.
+  The default is `true`.
+- `avatar`: `boolean` - (Optional) Whether to show the address Jazzicon. The default is `true`.
 
 #### Example
 
@@ -133,30 +136,76 @@ await snap.request({
 
 Outputs a [Jazzicon](https://www.npmjs.com/package/@metamask/jazzicon) for an address.
 
+#### Props
+
+- `address`: `string` - A valid [CAIP-10](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-10.md) address.
+- `size`: `string` - (Optional) The size of the avatar. Possible values are `"sm"`, `"md"`, and `"lg"`. The default is `"md"`.
+
 :::note
 MetaMask automatically calculates checksums for EVM addresses (`eip155:`). 
 Addresses for other namespaces are not validated; you should validate them in your Snap.
 :::
 
-#### Props
-
-- `address`: `string` - A valid [CAIP-10](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-10.md) address.
-
 #### Example
 
 ```js
 export const onHomePage: OnHomePageHandler = async () => {
   return {
     content: (
       <Box>
-        <Avatar address="eip155:1:0x1234567890123456789012345678901234567890" />
+        <Avatar address="eip155:1:0x1234567890123456789012345678901234567890" size="lg" />
         <Avatar address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
       </Box>
     ),
   };
 };
 ```
 
+### `Banner`
+
+Outputs a banner that can be used to display important messages with different severity levels.
+
+#### Props
+
+- `title`: `string` - The title of the banner.
+- `severity` - The severity level of the banner.
+  Possible values are `"danger"`, `"info"`, `"success"`, and `"warning"`.
+- `children` - The content to display in the banner.
+  This can include [`Text`](#text), [`Link`](#link) [`Icon`](#icon), [`Button`](#button), and [`Skeleton`](#skeleton) components.
+
+#### Example
+
+```javascript title="index.jsx"
+import { Box, Banner, Text, Link } from "@metamask/snaps-sdk/jsx";
+
+await snap.request({
+  method: "snap_dialog",
+  params: {
+    type: "alert",
+    content: (
+      <Box>
+        <Banner title="Important Update" severity="info">
+          <Text>A new version is available!</Text>
+          <Link href="https://docs.metamask.io">Learn more</Link>
+        </Banner>
+
+        <Banner title="Warning" severity="warning">
+          <Text>Please review transaction details carefully.</Text>
+        </Banner>
+
+        <Banner title="Success" severity="success">
+          <Text>Transaction completed successfully.</Text>
+        </Banner>
+
+        <Banner title="Error" severity="danger">
+          <Text>Unable to process transaction.</Text>
+        </Banner>
+      </Box>
+    ),
+  },
+});
+```
+
 ### `Bold`
 
 Outputs bold text.
@@ -194,6 +243,8 @@ Outputs a box, which can be used as a container for other components.
 - `alignment` - (Optional) The alignment of the elements inside the box.
   Possible values are `"start"`, `"center"`, `"end"`, `"space-between"`, and `"space-around"`.
   The default is `"start"`.
+- `center`: `boolean` - (Optional) Whether to center the children within the box.
+  The default is `false`.
 
 #### Example
 
@@ -208,6 +259,7 @@ module.exports.onHomePage = async () => {
         <Box
           direction="horizontal"
           alignment="space-around"
+          center="true"
         >
           <Text>Feature 1</Text>
           <Text>Feature 2</Text>
@@ -343,8 +395,7 @@ Outputs a checkbox for use in [interactive UI](interactive-ui.md).
 - `name`: `string` - The name sent to [`onUserInput`](../../reference/entry-points.md#onuserinput).
 - `checked`: `boolean` - (Optional) Whether the checkbox is checked.
 - `label`: `string` - (Optional) The label for the checkbox.
-- `variant` - (Optional) The variant of the checkbox.
-  Possible values are `"default"` and `"toggle"`.
+- `variant` - (Optional) The variant of the checkbox. Possible values are `"default"` and `"toggle"`.
   The default is `"default"`.
 
 #### Example
@@ -369,6 +420,56 @@ const interfaceId = await snap.request({
 <img src={require("../../assets/custom-ui-checkbox.png").default} alt="Checkbox UI example" width="450px" style={{border: "1px solid #DCDCDC"}} />
 </p>
 
+### `Container`
+
+Outputs a container component that can hold a box of content and an optional footer. This is useful for creating structured layouts with action buttons at the bottom in [custom dialogs](dialogs.md#display-a-custom-dialog).
+
+#### Props
+
+- `backgroundColor` - (Optional) The background color of the container.
+  Possible values are `"default"` and `"alternative"`.
+  The default is `"default"`.
+- `children`: The contents of the container.
+  This can be a single [`Box`](#box) component, or an array containing a [`Box`](#box) component and a [`Footer`](#footer) component.
+
+#### Example
+
+```javascript title="index.jsx"
+import { Container, Box, Footer, Text, Button } from "@metamask/snaps-sdk/jsx";
+
+await snap.request({
+  method: "snap_dialog",
+  params: {
+    content: (
+      <Container backgroundColor="default">
+        <Box>
+          <Text>Are you sure you want to proceed with this transaction?</Text>
+          <Text>Gas fees: 0.005 ETH</Text>
+        </Box>
+        <Footer>
+          <Button name="cancel" variant="destructive">Cancel</Button>
+          <Button name="confirm">Confirm</Button>
+        </Footer>
+      </Container>
+    ),
+  },
+});
+
+// Example without footer
+await snap.request({
+  method: "snap_dialog",
+  params: {
+    content: (
+      <Container backgroundColor="alternative">
+        <Box>
+          <Text>Simple container without footer</Text>
+        </Box>
+      </Container>
+    ),
+  },
+});
+```
+
 ### `Copyable`
 
 Outputs a read-only text field with a copy-to-clipboard shortcut.
@@ -576,6 +677,56 @@ export const onUserInput = async ({ id, event }) => {
 <img src={require("../../assets/custom-ui-file-input.png").default} alt="File input UI example" width="450px" style={{border: "1px solid #DCDCDC"}} />
 </p>
 
+### `Footer`
+
+Outputs a footer that can contain one or two buttons. This component is typically used within a [`Container`](#container) to create action buttons at the bottom of a dialog or panel.
+
+#### Props
+
+- `children` - The contents of the footer.
+  This can be one or two [`Button`](#button) components.
+
+#### Example
+
+```javascript title="index.jsx"
+import { Container, Box, Footer, Text, Button } from "@metamask/snaps-sdk/jsx";
+
+// Example with two buttons
+await snap.request({
+  method: "snap_dialog",
+  params: {
+    content: (
+      <Container>
+        <Box>
+          <Text>Delete this item?</Text>
+        </Box>
+        <Footer>
+          <Button name="cancel">Cancel</Button>
+          <Button name="delete" variant="destructive">Delete</Button>
+        </Footer>
+      </Container>
+    ),
+  },
+});
+
+// Example with single button
+await snap.request({
+  method: "snap_dialog",
+  params: {
+    content: (
+      <Container>
+        <Box>
+          <Text>Operation completed successfully.</Text>
+        </Box>
+        <Footer>
+          <Button name="close">Close</Button>
+        </Footer>
+      </Container>
+    ),
+  },
+});
+```
+
 ### `Form`
 
 Outputs a form for use in [interactive UI](interactive-ui.md).
@@ -925,7 +1076,7 @@ Outputs a row with a label and value, which can be used for key-value data.
   Possible values are `"default"`, `"error"`, and `"warning"`.
   The default is `"default"`.
 - `children` - The value of the row, which can be a [`Text`](#text), [`Image`](#image), 
-  [`Address`](#address), or [`Link`](#link) component.
+  [`Address`](#address), [`Link`](#link), or [`Value`](#value) component.
 
 #### Example
 
@@ -1025,9 +1176,39 @@ const interfaceId = await snap.request({
 <img src={require("../../assets/custom-ui-selector.png").default} alt="Selector UI example" width="450px" />
 </p>
 
+### `Skeleton`
+
+Outputs an animated loading container.
+
+#### Props
+
+- `width`: `Array<number | string>` - (Optional) The width of the skeleton. The default is `"100%"`.
+- `height`: `Array<number | string>` - (Optional) The height of the skeleton. The default is `22`.
+- `borderRadius`: `string` - (Optional) The radius of the corners. Possible values are `"none"`, `"medium"` or `"full"`.
+  The default is `"medium"`.
+
+#### Example
+
+```javascript title="index.jsx"
+import { Box, Heading, Skeleton } from "@metamask/snaps-sdk/jsx";
+
+await snap.request({
+  method: "snap_dialog",
+  params: {
+    type: "alert",
+    content: (
+      <Box>
+        <Heading>Please wait...</Heading>
+        <Skeleton height={32} width="50%" borderRadius="full" />
+      </Box>
+    ),
+  },
+});
+```
+
 ### `Spinner`
 
-Outputs a loading indicator.
+Outputs an animated loading indicator.
 
 #### Example
 
@@ -1064,6 +1245,8 @@ Outputs text.
 - `alignment` - (Optional) The alignment of the text.
   Possible values are `"start"`, `"center"`, and `"end"`.
   The default is `"start"`.
+- `children` - The content to display.
+  This can include strings, and [`Bold`](#bold), [`Italic`](#italic), [`Icon`](#icon), [`Link`](#link), and [`Skeleton`](#skeleton) components.
 
 
 #### Example
@@ -1126,6 +1309,53 @@ await snap.request({
 <img src={require("../../assets/custom-ui-tooltip.png").default} alt="Tooltip UI example" width="450px" style={{border: "1px solid #DCDCDC"}} />
 </p>
 
+### `Value`
+
+Outputs a component that displays two text values side by side. This component can only be used as a child of the [`Row`](#row) component.
+
+#### Props
+
+- `value` - The value shown on the right side.
+  This can be a string or a [`Text`](#text) component.
+- `extra` - The extra text shown on the left side.
+  This can be a string or a [`Text`](#text) component.
+
+#### Example
+
+```javascript title="index.jsx"
+import { Box, Row, Text, Value } from "@metamask/snaps-sdk/jsx";
+
+await snap.request({
+  method: "snap_dialog",
+  params: {
+    type: "alert",
+    content: (
+      <Box>
+        <Row label="Transaction Amount">
+          <Value value="0.05 ETH" extra="$200" />
+        </Row>
+        
+        {/* Example with styled text */}
+        <Row label="Gas Fee">
+          <Value 
+            value={<Text color="error">0.003 ETH</Text>} 
+            extra={<Text color="error">$12</Text>} 
+          />
+        </Row>
+        
+        {/* Example with different text colors */}
+        <Row label="Balance After">
+          <Value 
+            value={<Text color="success">1.25 ETH</Text>} 
+            extra={<Text color="muted">$2,500</Text>} 
+          />
+        </Row>
+      </Box>
+    ),
+  },
+});
+```
+
 ## Emojis
 
 Text-based components (such as [`Heading`](#heading) and [`Text`](#text)) accept emojis.