Update custom-ui.md (MetaMask#1209)

snaps/features/custom-ui.md

@@ -5,22 +5,24 @@ sidebar_position: 1
 
 # Custom UI
 
-You can display custom user interface (UI) components using the `@metamask/snaps-ui` module with the
-[`snap_dialog`](../reference/snaps-api.md#snap_dialog) method or
-[`onTransaction`](../reference/entry-points.md#ontransaction) entry point.
+You can display custom user interface (UI) components using the 
+`@metamask/snaps-sdk` module with the 
+[`snap_dialog`](../reference/snaps-api.md#snap_dialog) method or the 
+[`onTransaction`](../reference/entry-points.md#ontransaction) and 
+[`onHomePage`](../reference/entry-points.md#onhomepage) entry points.
 
-To use custom UI, first install `@metamask/snaps-ui` using the following command:
+To use custom UI, first install `@metamask/snaps-sdk` using the following command:
 
 ```bash
-yarn add @metamask/snaps-ui
+yarn add @metamask/snaps-sdk
 ```
 
 Then, whenever you're required to return a custom UI component, import the components from the
-package and build your UI with them.
+SDK and build your UI with them.
 For example:
 
 ```javascript
-import { panel, heading, text } from '@metamask/snaps-ui';
+import { panel, heading, text } from '@metamask/snaps-sdk';
 
 // ...
 
@@ -34,14 +36,33 @@ return content;
 
 ## Components
 
-The `NodeType` enum exported by `@metamask/snaps-ui` details the available components.
+The `NodeType` enum exported by `@metamask/snaps-sdk` details the available components.
+
+### `address`
+
+Outputs a formatted text field for an Ethereum address. 
+The address is automatically displayed with a jazzicon and truncated value. 
+Hovering the address shows the full value in a tooltip. 
+
+```javascript
+import { panel, heading, address } from '@metamask/snaps-sdk';
+
+// ...
+
+const content = panel([
+  heading('Are you sure you want to send tokens to this address?'),
+  address('0x000000000000000000000000000000000000dEaD'),
+]);
+
+return content;
+```
 
 ### `copyable`
 
 Outputs a read-only text field with a copy-to-clipboard shortcut.
 
 ```javascript
-import { copyable } from '@metamask/snaps-ui';
+import { copyable } from '@metamask/snaps-sdk';
 
 // ...
 
@@ -53,7 +74,7 @@ const content = copyable('Text to be copied');
 Outputs a horizontal divider.
 
 ```javascript
-import { panel, divider, text } from '@metamask/snaps-ui';
+import { panel, divider, text } from '@metamask/snaps-sdk';
 
 // ...
 
@@ -70,7 +91,7 @@ Outputs a heading.
 This is useful for [panel](#panel) titles.
 
 ```javascript
-import { panel, heading, text } from '@metamask/snaps-ui';
+import { panel, heading, text } from '@metamask/snaps-sdk';
 
 // ...
 
@@ -89,7 +110,7 @@ You can embed JPG or PNG in SVG using data URIs.
 The SVG is rendered within an \<img\> tag, which prevents JavaScript or interaction events from being supported.
 
 ```javascript
-import { image } from '@metamask/snaps-ui';
+import { image } from '@metamask/snaps-sdk';
 
 // ...
 
@@ -98,10 +119,11 @@ const content = image('<svg width="400" height="400" viewBox="0 0 24 24" xmlns="
 
 ### `panel`
 
-Outputs a panel, which can be used as a container for other components.
+Outputs a panel, which can be used as a container for other components. 
+This component takes an array of custom UI components.
 
 ```javascript
-import { panel, heading, text } from '@metamask/snaps-ui';
+import { panel, heading, text } from '@metamask/snaps-sdk';
 
 // ...
 
@@ -114,24 +136,43 @@ const content = panel([
 ]);
 ```
 
+### `row`
+
+Outputs a row with a label and value, which can be used for key-value data. 
+The label must be a string. The value can be a child component of type 
+`text` or `address`. 
+
+```javascript 
+import { panel, row, text, address } from '@metamask/snaps-sdk'; 
+
+// ...
+const content = panel([
+  row("Address",address("0x000000000000000000000000000000000000dEaD")),
+  row("Balance",text("1.78 ETH")),
+]);
+```
+
 ### `spinner`
 
 Outputs a loading indicator.
 
 ```javascript
-import { panel, heading, spinner } from '@metamask/snaps-ui';
+import { panel, heading, spinner } from '@metamask/snaps-sdk';
 
 // ...
 
-const content = panel([heading('Please wait...'), spinner()]);
+const content = panel([
+  heading('Please wait...'),
+  spinner()
+]);
 ```
 
 ### `text`
 
-Outputs text.
+Outputs text. 
 
 ```javascript
-import { text } from '@metamask/snaps-ui';
+import { text } from '@metamask/snaps-sdk';
 
 // ...
 
@@ -141,7 +182,29 @@ const content = text('This is a simple text UI');
 ## Markdown
 
 Text-based components accept a very small subset of inline Markdown: `**bold**` and `_italic_`.
-This subset will be increased in the future.
+
+## Links
+
+`text()` components accept inline links. 
+To make a link, use the following Markdown: 
+
+```javascript
+import { text } from '@metamask/snaps-sdk';
+
+// ...
+
+const contentWithLink = text('Download [MetaMask](https://metamask.io)');
+```
+
+You can also make a link with just the URL with the following Markdown: 
+
+```javascript
+import { text } from '@metamask/snaps-sdk';
+
+// ...
+
+const contentWithLink = text('Visit our site: [](https://metamask.io)');
+```
 
 ## Emoji