edit content

snaps/features/custom-ui/user-defined-components.md

@@ -5,12 +5,13 @@ sidebar_position: 5
 
 # User-defined components
 
-When using JSX, you can create your own components by composing [existing components](with-jsx.md), or
-other user-defined components.
+When using [Custom UI with JSX](with-jsx.md), you can create your own components by composing
+existing components or other user-defined components.
 
 ## Basic example
 
-In this first, basic example, the user-defined component is static. It does not accept any props (parameters) and returns the contents of a static home page.
+In this first, basic example, the user-defined component is static.
+It does not accept any props (parameters) and returns the contents of a static home page.
 
 ```jsx title="Home.jsx"
 import { Box, Heading, Text } from "@metamask/snaps-sdk/jsx";
@@ -25,7 +26,8 @@ export const Home = () => {
 };
 ```
 
-Once the component is defined, it can be used anywhere in the Snap. For example, to display the home page, you can use the following code:
+Once the component is defined, you can use it anywhere in the Snap.
+For example, to display the home page, you can use the following code:
 
 ```jsx title="index.jsx"
 import { Home } from "./Home";
@@ -37,7 +39,9 @@ export const onHomepage = () => {
 
 ## Example with props
 
-Components can be parametrized by passing props. Props are passed to the component as an object and can be accessed using the first parameter of the component's definition function:
+You can parameterize components by passing props.
+Props are passed to the component as an object and can be accessed using the first parameter of the
+component's definition function:
 
 ```jsx title="Insight.jsx"
 export const Insight = (props) => {
@@ -54,10 +58,16 @@ export const Insight = (props) => {
 };
 ```
 
-In the example above, we see two usages of props:
+This example contains two usages of props:
 
-- The `Insight` component accepts a `props` parameter, which is an object containing the `from` and `to` addresses. The `from` address is accessed using `props.from`, and the `to` address is accessed using `props.to`, since `props` is just a regular JavaScript object.
-- The `Insight` component then uses the built-in `Address` component to display addresses. The `Address` component accepts an `address` prop. When using the `Address` component, we pass props to it by using a notation similar to HTML attributes: `address={props.from}`.
+- The `Insight` component accepts a `props` parameter, which is an object containing the `from` and
+  `to` addresses.
+  The `from` address is accessed using `props.from`, and the `to` address is accessed using
+  `props.to`, since `props` is just a regular JavaScript object.
+- The `Insight` component then uses the built-in `Address` component to display addresses.
+  The `Address` component accepts an `address` prop.
+  When using the `Address` component, you can pass props to it using a notation similar to HTML
+  attributes: `address={props.from}`.
 
 To use the `Insight` component, you can pass the `from` and `to` addresses as props:
 
@@ -69,7 +79,8 @@ export const onTransaction = ({ transaction }) => {
 };
 ```
 
-Props can be accessed using destructuring as well. This is not specific to JSX, simply a feature of JavaScript:
+You can also access props using destructuring.
+This is not specific to JSX, but a feature of JavaScript:
 
 ```jsx title="Insight.jsx"
 export const Insight = ({ from, to }) => {
@@ -88,9 +99,10 @@ export const Insight = ({ from, to }) => {
 
 ## Return multiple elements
 
-A JSX expression can only contain a single root element. To return multiple elements, wrap them in a parent element,
-like `Box`. In the example above, we wrap the two `Row` elements in a `Box` element. Trying to return multiple elements
-without a parent element will result in a syntax error.
+A JSX expression can only contain a single root element.
+To return multiple elements, wrap them in a parent element, such as `Box`.
+In the previous example, the two `Row` elements are wrapped in a `Box` element.
+Trying to return multiple elements without a parent element results in a syntax error:
 
 ```jsx title="WRONG-Insight.jsx"
 export const Insight = ({ from, to }) => {
@@ -109,8 +121,9 @@ export const Insight = ({ from, to }) => {
 
 ## Return a list
 
-To return a list of elements, you can use an array. In the example below, the `Accounts` components receives an
-array of accounts as props, and uses the array to display a list of accounts using `Array.map`:
+To return a list of elements, you can use an array.
+In the following example, the `Accounts` components receives an array of accounts as props, and uses
+the array to display a list of accounts using `Array.map`:
 
 ```jsx title="Accounts.jsx"
 export const Accounts = ({ accounts }) => {
@@ -150,7 +163,8 @@ export const onHomepage = () => {
 ## Spread props
 
 If an object has the same keys and value types as the props of a component, you can spread the
-object's properties as props for the component. For example, given the following component:
+object's properties as props for the component.
+For example, given the following component:
 
 ```jsx title="Account.jsx"
 export const Account = ({ name, address }) => {
@@ -172,19 +186,23 @@ const myAccount = {
 return <Account name={myAccount.name} address={myAccount.address} />
 ```
 
-You can simply write:
+You can write:
 
 ```jsx
 return <Account {...myAccount} />
 ```
 
-## Usage with TypeScript
+## Use with TypeScript
 
-The `@metamask/snaps-sdk/jsx` package exports a `SnapComponent` type that can be used to define components that are compatible with TypeScript. The `SnapComponent` type is generic: it accepts a `Props` type parameter that will define the shape of the props object. For example:
+The `@metamask/snaps-sdk/jsx` package exports a `SnapComponent` type that you can use to define
+components that are compatible with TypeScript.
+The `SnapComponent` type is generic: it accepts a `Props` type parameter that defines the shape of
+the props object.
+For example:
 
 ```tsx title="Insight.tsx"
-import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
-import { Button, Box, Text, Row, Address } from '@metamask/snaps-sdk/jsx';
+import type { SnapComponent } from "@metamask/snaps-sdk/jsx";
+import { Button, Box, Text, Row, Address } from "@metamask/snaps-sdk/jsx";
 
 type InsightProps = {
   from: string;
@@ -205,29 +223,36 @@ export const Insight: SnapComponent<InsightProps> = ({ from, to }) => {
 };
 ```
 
-Here are the steps to create user-defined components with TypeScript:
+Use the following steps to create user-defined components with TypeScript:
 
 1. Import the `SnapComponent` type:
+
    ```tsx
-   import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
+   import type { SnapComponent } from "@metamask/snaps-sdk/jsx";
    ```
-2. Define a type for the props of your component:
+
+2. Define a type for the props of your component.
+   For example:
+
    ```tsx
    type InsightProps = {
      from: string;
      to?: string;
    };
    ```
-3. Annotate the type of your component:
+
+3. Annotate the type of your component.
+   For example:
+
    ```tsx
    export const Insight: SnapComponent<InsightProps> = ({ from, to }) => {
      // ...
    };
    ```
 
-This will have two effects:
-
-- It will allow TypeScript to infer the types of the props inside your component.
-- It will make sure that the props passed to the component match the expected props. For example,
-using the `Insight` component above without the `from` prop, or passing a `number` instead of a
-`string` for the `from` prop will result in a type error.
+   This has two effects:
+   
+   - It allows TypeScript to infer the types of the props inside your component.
+   - It ensures that the props passed to the component match the expected props.
+     In this example, using the `Insight` component without the `from` prop, or passing a `number`
+     instead of a `string` for the `from` prop results in a type error.

snaps/features/custom-ui/with-jsx.md

@@ -712,11 +712,7 @@ module.exports.onHomePage = async () => {
 <img src={require("../../assets/custom-ui-heading.png").default} alt="Text UI example" width="450px" style={{border: "1px solid #DCDCDC"}} />
 </p>
 
-## User-defined components
-
-In addition to the components provided by the SDK, you can also [define your own components](user-defined-components.md).
-
-## Emojis
+### Emojis
 
 Text-based components (such as [`Heading`](#heading) and [`Text`](#text)) accept emojis.
 
@@ -742,3 +738,7 @@ await snap.request({
 <p align="center">
 <img src={require("../../assets/custom-ui-emojis.png").default} alt="Emojis UI example" width="450px" style={{border: "1px solid #DCDCDC"}} />
 </p>
+
+## User-defined components
+
+In addition to the components provided by the SDK, you can [define your own components](user-defined-components.md).