docs(1367): tidy up for tutorials

MetaMask · Jul 10, 2024 · b5d6bbe · b5d6bbe
1 parent c3a9e47
commit b5d6bbe
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 12 deletions.
diff --git a/snaps/learn/tutorials/gas-estimation.md b/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,21 +27,28 @@ 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
+  </TabItem>
+  <TabItem value="npx" label="npx" >
 
 ```bash
 npx @metamask/create-snap gas-estimation-snap
 ```
 
-or
+  </TabItem>
+    <TabItem value="npm" label="npm" >
 
 ```bash
 npm create @metamask/snap gas-estimation-snap
 ```
+  </TabItem>
+</Tabs>
+
 
 Next, `cd` into the `gas-estimation-snap` project directory and run:
 
@@ -47,18 +57,25 @@ yarn install
 ```
 
 This initializes your development environment with the required dependencies. 
-You may get a warning similar to the following: 
+
+<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
 

diff --git a/snaps/learn/tutorials/transaction-insights.md b/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,54 @@ 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
+  </TabItem>
+  <TabItem value="npx" label="npx" >
 
 ```bash
 npx @metamask/create-snap transaction-insights-snap
 ```
 
-or
+  </TabItem>
+    <TabItem value="npm" label="npm" >
 
 ```bash
 npm create @metamask/snap transaction-insights-snap
 ```
+  </TabItem>
+</Tabs>
 
 Next, `cd` into the `transaction-insights-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: 
+
+<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