docs(1367): tidy up for tutorials

snaps/learn/tutorials/gas-estimation.md

@@ -3,6 +3,9 @@ description: Create a Snap that estimates gas fees.
 sidebar_position: 1
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Create a Snap to estimate gas fees
 
 This tutorial walks you through creating a Snap that estimates gas fees.
@@ -24,17 +27,32 @@ Create a new Snap project using the
 [`@metamask/create-snap`](https://github.com/MetaMask/snaps/tree/main/packages/create-snap)
 starter kit by running:
 
+<Tabs>
+  <TabItem value="Yarn" label="Yarn" default>
+
 ```bash
 yarn create @metamask/snap gas-estimation-snap
 ```
 
-or
+Next, `cd` into the `gas-estimation-snap` project directory and run:
+
+```bash
+yarn install
+```
+  </TabItem>
+  <TabItem value="npx" label="npx" >
 
 ```bash
 npx @metamask/create-snap gas-estimation-snap
 ```
+Next, `cd` into the `gas-estimation-snap` project directory and run:
 
-or
+```bash
+npm install
+```
+
+  </TabItem>
+    <TabItem value="npm" label="npm" >
 
 ```bash
 npm create @metamask/snap gas-estimation-snap
@@ -43,22 +61,31 @@ npm create @metamask/snap gas-estimation-snap
 Next, `cd` into the `gas-estimation-snap` project directory and run:
 
 ```bash
-yarn install
+npm install
 ```
+  </TabItem>
+</Tabs>
+
 
-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. Add a custom icon
 

snaps/learn/tutorials/transaction-insights.md

@@ -3,6 +3,9 @@ description: Create a Snap that provides transaction insights.
 sidebar_position: 2
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Create a Snap to calculate gas fee percentages
 
 This tutorial walks you through creating a Snap that calculates the percentage of gas fees that
@@ -28,41 +31,65 @@ Create a new Snap project using the
 [`@metamask/create-snap`](https://github.com/MetaMask/snaps/tree/main/packages/create-snap)
 starter kit by running:
 
+<Tabs>
+  <TabItem value="Yarn" label="Yarn" default>
+
 ```bash
 yarn create @metamask/snap transaction-insights-snap
 ```
 
-or
+Next, `cd` into the `transaction-insights-snap` project directory and run:
+
+```bash
+yarn install
+```
+  </TabItem>
+  <TabItem value="npx" label="npx" >
 
 ```bash
 npx @metamask/create-snap transaction-insights-snap
 ```
 
-or
+Next, `cd` into the `transaction-insights-snap` project directory and run:
 
 ```bash
-npm create @metamask/snap transaction-insights-snap
+npm install
 ```
 
+  </TabItem>
+    <TabItem value="npm" label="npm" >
+
+```bash
+npm create @metamask/snap transaction-insights-snap
+```
 Next, `cd` into the `transaction-insights-snap` project directory and run:
 
 ```bash
-yarn install
+npm install
 ```
+  </TabItem>
+</Tabs>
+
 
-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 the issue by running the following command:
+You can resolve the issue by running: 
 
 ```bash
 yarn run allow-scripts auto
-```
+``` 
+ </div>
+</details>
 
 ### 2. Enable transaction insights and the Ethereum provider