docs(1367): tidy up for tutorials

snaps/learn/tutorials/gas-estimation.md

@@ -31,52 +31,58 @@ starter kit by running:
 yarn create @metamask/snap gas-estimation-snap
 ```
 
-or
-
-```bash
-npx @metamask/create-snap gas-estimation-snap
-```
-
-or
-
-```bash
-npm create @metamask/snap gas-estimation-snap
-```
-
 Next, `cd` into the `gas-estimation-snap` project directory and run:
 
 ```bash
 yarn install
 ```
 
-This initializes your development environment with the required dependencies.
-You may get a warning similar to the following:
+This initializes your development environment with the required dependencies. 
+
+<details>
+  <summary>Did you get a warning?</summary>
+  <div>
+You may get a warning such as: 
 
 ```bash
 @lavamoat/allow-scripts has detected dependencies without configuration. explicit configuration required.
 run "allow-scripts auto" to automatically populate the configuration.
 ```
-
-You can resolve this error by running the following command:
-
+You can resolve this error by running:
+
 ```bash
 yarn run allow-scripts auto
 ```
+  </div>
+</details>
+
+
+### 2. (Optional) Customize your Snap's UX
+
+This Snap is generated from a TypeScript template Snap. We recommend customizing your 
+Snap to improve its UX, but this is optional for testing. If you don't wish to customize your Snap, 
+skip to [Step 3](#3-enable-network-access).
 
-### 2. Add a custom icon
+#### 2.1. Provide an icon
 
-Your Snap must [display an icon](../best-practices/design-guidelines.md#optimize-your-metadata) in MetaMask.
-To add an icon, create a new folder `images` in the Snap package `packages/snap/`:
+[Optimize your metadata](../best-practices/design-guidelines.md#optimize-your-metadata) and display an icon for your Snap in MetaMask.
+
+Create a new folder `images` in the Snap package `packages/snap/`:
 
 ```bash
 mkdir packages/snap/images
 ```
 
 Download
 [this `gas.svg` icon file](https://raw.githubusercontent.com/Montoya/gas-fee-snap/main/packages/snap/images/gas.svg)
-into the `ìmages` folder you just created.  
-This is a free icon, "Gas" by Mello from
-[Noun Project](https://thenounproject.com/browse/icons/term/gas/).
+into that `ìmages` folder.  
+
+<details>
+  <summary>Icon attribution</summary>
+  <div>
+This is a free icon, "Gas" by Mello from the [Noun Project](https://thenounproject.com/browse/icons/term/gas/).
+  </div>
+</details>
 
 Your file structure should look like this:
 
@@ -102,10 +108,9 @@ gas-estimation-snap/
 ├─ ... (other stuff)
 ```
 
-Open `packages/snap/snap.manifest.json` in a text editor.
-This file contains the main configuration details for your Snap.
-Edit the `npm` object, within the `location` object,
-and add `iconPath` with the value `"images/gas.svg"` to point to your new icon:
+Open `packages/snap/snap.manifest.json` in a text editor. This file contains the main configuration 
+details for your Snap. Edit the `npm` object, within the `location` object, and add `iconPath` with 
+the value `"images/gas.svg"` to point to your new icon:
 
 ```json title="snap.manifest.json"
 "location": {
@@ -118,8 +123,8 @@ and add `iconPath` with the value `"images/gas.svg"` to point to your new icon:
 }
 ```
 
-Open `packages/snap/package.json` in a text editor.
-Edit the `files` array and add the `images/` folder:
+Open `packages/snap/package.json` in a text editor. Edit the `files` array and reference the 
+`images/` folder:
 
 ```json title="package.json"
 "files": [
@@ -129,6 +134,39 @@ Edit the `files` array and add the `images/` folder:
 ],
 ```
 
+#### 2.2. Update your Snap's name
+
+[Optimize your metadata](../best-practices/design-guidelines.md#optimize-your-metadata) and update
+your Snap's name in MetaMask.
+MetaMask uses the `proposedName` of the Snap, currently "TypeScript Example" in the template.
+
+Open `packages/snap/snap.manifest.json` in a text editor.
+Edit the `"proposedName"` property within the metadata to provide a functional name such as 
+"Gas Estimator":
+
+```json title="snap.manifest.json"
+{
+  "version": "0.1.0",
+  "description": "An example Snap written in TypeScript.",
+  "proposedName": "Gas Estimator",
+  ...
+}
+```
+
+#### 2.3. Update your Snap's button
+
+Open `packages/site/src/components/Buttons.tsx` in a text editor.
+Edit the `Button` property to provide functional label text such as "Estimate Gas":
+
+```typescript title="Buttons.tsx"
+export const SendHelloButton = (props: ComponentProps<typeof Button>) => {
+  return <Button {...props}>Estimate Gas</Button>;
+};
+````
+
+These three updates are the minimum required to ensure that each user interaction with your Snap is well-informed.
+However, your Snap will function without these tweaks.
+
 ### 3. Enable network access
 
 To enable your Snap to [access the internet using the `fetch` API](../../features/network-access.md),
@@ -144,7 +182,6 @@ permission in `packages/snap/snap.manifest.json`:
   },
   "endowment:network-access": {}
 },
-"manifestVersion": "0.1"
 ```
 
 ### 4. Fetch gas fee estimates
@@ -187,7 +224,7 @@ Update the `hello` method with the following code:
 case "hello":
   const fees = await getFees();
   return snap.request({
-    method: 'snap_dialog',
+    method: "snap_dialog",
     params: {
       type: "alert",
       content: (
@@ -208,7 +245,7 @@ case "hello":
 case "hello":
   const fees = await getFees();
   return snap.request({
-    method: 'snap_dialog',
+    method: "snap_dialog",
     params: {
       type: "alert",
       content: panel([
@@ -223,72 +260,73 @@ case "hello":
 </TabItem>
 </Tabs>
 
-### 5. Build and test the Snap
+### 5. Build and test your Snap
 
-To build and test your Snap:
+Complete the following steps to build and test your Snap:
 
-1. Open `package.json` in the root directory of the project, and increment the `"version"` (if the `"version"` is
-   `0.1.0`, increase it to `0.2.0`).
+#### 5.1. Build your Snap
 
-2. From the command line, run `yarn start`.
-   In the terminal, at the bottom of the message log, you see the browser URL:
+From the command line, run `yarn start`.
+The following displays:
+
+```bash
+You can now view site in the browser.
 
-   ```bash
-   You can now view site in the browser.
+  http://localhost:8000/
+```
 
-     http://localhost:8000/
-   ```
+Open [`localhost:8000`](http://localhost:8000/) in your browser (with MetaMask Flask installed).
+A page like the following displays:
 
-3. Open [`localhost:8000`](http://localhost:8000/) in your browser (with MetaMask Flask installed).
-   A page like the following displays:
+<img src={require('../../assets/template-snap.png').default} alt="Test dapp with template Snap" style={{border: '1px solid #DCDCDC'}} />
 
-   <img src={require('../../assets/template-snap.png').default} alt="Test dapp with template Snap" style={{border: '1px solid #DCDCDC'}} />
+This is a template test dapp for installing and testing your Snap.
 
-   This is a boilerplate test dapp for installing and testing your Snap.
+#### 5.2. Test your Snap
 
-4. Select **Connect** to connect Flask to the dapp.
-   After connecting, you're prompted to install the Snap with the following permissions:
+Select **Connect** to connect Flask to the dapp.
+After connecting, you're prompted to install the Snap with the following permissions:
 
-   - **Allow dapps to communicate directly with this Snap.**
-   - **Access the internet.**
-   - **Display dialog windows in MetaMask.**
+- **Allow websites to communicate directly with this Snap.**
+- **Access the internet.**
+- **Display dialog windows in MetaMask.**
 
-5. Select **Approve** > **Install**.
+Next, select **Confirm** > **OK**.
 
-6. After installing, the **Send message** button on the page is enabled. Select this button. A dialog prompt displays with the response from the gas fee API:
+Select the **Send message** button (or **Estimate gas** button, if you followed Step 2). A dialog prompt displays with the response from the gas fee API:
 
 <p align="center">
 <img src={require('../../assets/gas-estimation.png').default} alt="Gas estimation dialog" width="400px" style={{border: '1px solid #DCDCDC'}} />
 </p>
 
-You have integrated a public API into MetaMask and displayed real-time gas fee estimates.
-
-### 6. Next steps
+Congratulations, you have integrated a public API into MetaMask and displayed real-time gas fee estimates.
 
-Next, you can try:
+### Next steps
 
+You can improve your Snap's UX by:
+- Completing [Step 2](#2-optional-customize-your-snaps-ux).
 - Parsing the JSON response from the remote API.
-- Displaying the fees in a nicely formatted way.
+- Formatting the fees for better readability.
 
-You can also update the fields in `snap.manifest.json` to match your custom Snap:
+Before publishing a Snap, it's also important to customize the metadata and properties of your Snap: 
 
-- `proposedName` - The name of your Snap.
-- `description` - The description of your Snap.
-- `source` - The `shasum` is set automatically when you build from the command line.
-  If you decided to publish your Snap to `npm`, update the `location` to its published location.
+- Update the `location` in `snap.manifest.json` to your Snap's published location.
+- Update the `description` in `snap.manifest.json` to a description of your Snap.
+- Update the `name`, `version`, `description`, and `repository` fields of
+`/packages/snap/package.json` (even if you do not plan to publish your Snap to npm).
+- Update the content of `/packages/site/src/pages/index.tsx` by changing the
+name of the method for showing gas fee estimates. If you change the method name in 
+`/packages/site/src/pages/index.tsx`, ensure you change the method name in 
+`/packages/snap/src/index.ts` to match.
 
-Similarly, you should update the `name`, `version`, `description`, and `repository` fields of
-`/packages/snap/package.json` even if you do not plan to publish your Snap to npm.
+:::note
+When editing `source`, the `shasum` is set automatically when you build from the command line.
+:::
 
 :::caution important
 The `version` and `repository` fields in `snap.manifest.json` inherit the values from
 `package.json` and overwrite them in `snap.manifest.json`.
-We recommend updating `version` and `repository` in `package.json` first, then building the Snap project.
+We recommend updating `version` and `repository` in `package.json` first, then building your Snap project.
 :::
 
-You can update the content of `/packages/site/src/pages/index.tsx` by changing the
-name of the method for showing gas fee estimates.
-If you change the method name in `/packages/site/src/pages/index.tsx`, ensure you change the method name in `/packages/snap/src/index.ts` to match.
-
-After you have made all necessary changes, you can
-[publish your Snap to npm](../../how-to/publish-a-snap.md).
+After you have made all necessary changes, you can [publish your Snap to npm](../../how-to/publish-a-snap.md).