Adjust JSX documentation and related tutorials (MetaMask#1500)

* Adjust JSX documentation and related tutorials Closes MetaMask#1499, MetaMask#1498, MetaMask#1495. * typo * Update snaps/features/custom-ui/with-jsx.md --------- Co-authored-by: Alexandra Carrillo <[email protected]>
Flores-21 · Aug 21, 2024 · eafe1b2 · eafe1b2
1 parent ae0233a
commit eafe1b2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 37 deletions.
diff --git a/snaps/features/custom-ui/with-jsx.md b/snaps/features/custom-ui/with-jsx.md
@@ -120,7 +120,7 @@ await snap.request({
     content: (
       <Box>
         <Heading>Are you sure you want to send tokens to this address?</Heading>
-        <Address>0x000000000000000000000000000000000000dEaD</Address>
+        <Address address="0x000000000000000000000000000000000000dEaD" />
       </Box>
     ),
   },
@@ -254,6 +254,11 @@ await snap.request({
 
 Outputs a read-only text field with a copy-to-clipboard shortcut.
 
+#### Props
+
+- `value`: `string` - The value to copy when the user clicks on the copyable element.
+- `sensitive`: `boolean` - (Optional) Indicates whether the value is sensitive. If `true`, the value will be hidden when the user is not interacting with the copyable element.
+
 #### Example
 
 ```javascript title="index.jsx"
@@ -266,7 +271,7 @@ await snap.request({
     content: (
       <Box>
         <Text>Your address:</Text>
-        <Copyable>0x000000000000000000000000000000000000dEaD</Copyable>
+        <Copyable value="0x000000000000000000000000000000000000dEaD" />
       </Box>
     ),
   },
@@ -587,7 +592,7 @@ Outputs a clickable link.
 
 #### Props
 
-- `href`: `string` - The URL to point to.
+- `href`: `string` - The URL to point to. This must be an HTTPS URL.
 - `children`: `Array<string | Bold | Italic>` - The link text.
 
 #### Example
@@ -640,7 +645,7 @@ await snap.request({
     content: (
       <Box>
         <Row label="Address">
-          <Address>0x000000000000000000000000000000000000dEaD</Address>
+          <Address address="0x000000000000000000000000000000000000dEaD" />
         </Row>
         <Row label="Balance">
           <Text>1.78 ETH</Text>

diff --git a/snaps/learn/tutorials/gas-estimation.md b/snaps/learn/tutorials/gas-estimation.md
@@ -100,7 +100,7 @@ gas-estimation-snap/
 |  |  |  |- gas.svg
 |  |  ├─ src/
 |  |  |  |- index.test.ts
-|  |  |  |- index.ts
+|  |  |  |- index.tsx
 |  |  ├─ snap.manifest.json
 |  |  ├─ package.json
 |  |  |- ... (Snap content)
@@ -186,27 +186,27 @@ permission in `packages/snap/snap.manifest.json`:
 
 ### 4. Fetch gas fee estimates
 
-Open `packages/snap/src/index.ts`.
+Open `packages/snap/src/index.tsx`.
 This is the main code file for your Snap.
 To get a gas fee estimate, use the public API endpoint provided by
 [Open Source Ethereum Explorer](https://beaconcha.in/).
-Add the following `getFees()` function to the beginning of the `/packages/snap/src/index.ts` file:
+Add the following `getFees()` function to the beginning of the `/packages/snap/src/index.tsx` file:
 
 ```typescript title="index.ts"
 import type { OnRpcRequestHandler } from "@metamask/snaps-sdk"
-import { panel, text } from "@metamask/snaps-sdk"
+import { Box, Text } from "@metamask/snaps-sdk/jsx"
 
 async function getFees() {
   const response = await fetch("https://beaconcha.in/api/v1/execution/gasnow")
   return response.text()
 }
 ```
 
-Next, add the `copyable` component to the second import of the file:
+Next, add the `Copyable` component to the second import of the file:
 
 ```typescript title="index.ts"
 import type { OnRpcRequestHandler } from "@metamask/snaps-sdk"
-import { panel, text, copyable } from "@metamask/snaps-sdk"
+import { Box, Text, Copyable } from "@metamask/snaps-sdk/jsx"
 ```
 
 Modify the Snap RPC message handler that displays the dialog.
@@ -217,9 +217,6 @@ dialog, and passes some static strings.
 
 Update the `hello` method with the following code:
 
-<Tabs>
-<TabItem value="JSX">
-
 ```tsx title="index.tsx"
 case "hello":
   const fees = await getFees();
@@ -231,36 +228,14 @@ case "hello":
         <Box>
           <Text>Hello, <Bold>{origin}</Bold>!</Text>
           <Text>Current gas fee estimates:</Text>
-          <Copyable>{fees}</Copyable>
+          <Copyable value={fees} />
         </Box>
       ),
     }
   });
 ```
 
-</TabItem>
-<TabItem value="Functions" deprecated>
-
-```typescript title="index.ts"
-case "hello":
-  const fees = await getFees();
-  return snap.request({
-    method: "snap_dialog",
-    params: {
-      type: "alert",
-      content: panel([
-        text(`Hello, **${origin}**!`),
-        text("Current gas fee estimates:"),
-        copyable(fees),
-      ]),
-    }
-  });
-```
-
-</TabItem>
-</Tabs>
-
-### 5. Build and test your Snap
+### 5. Build and test the Snap
 
 Complete the following steps to build and test your Snap: