feat(website): update swap guide (#13934)

packages/website/pages/docs/guides/_meta.json

@@ -9,8 +9,7 @@
     "title": "🌉 Use the bridge"
   },
   "swap-tokens": {
-    "title": "🔄 Swap tokens",
-    "display": "hidden"
+    "title": "🔄 Swap tokens"
   },
   "run-a-node": {
     "title": "🌐 Run a node"

packages/website/pages/docs/guides/swap-tokens.mdx

@@ -1,6 +1,6 @@
 import { Callout, Steps } from "nextra-theme-docs";
 
-# Swap tokens
+# Swap Tokens
 
 ## Overview
 
@@ -16,18 +16,50 @@ This guide will help you interact with Swap, which is a fork of Uniswap v2 that
     ### Navigate to Swap
     Navigate to [https://swap.test.taiko.xyz](https://swap.test.taiko.xyz).
 
-    ### Swap some tokens
-    Swap some tokens. You can receive some testnet tokens [here](/docs/guides/receive-tokens).
+    ### Connect to the Taiko testnet
+    ![1](/images/guides/swap/1.png)
 
-    ![swap tokens](/images/guides/swap-swap.png)
+    ### Choose tokens to swap
+    If you do not see the tokens, you might be prompted to add the testnet tokens (see below)
+    ![2](/images/guides/swap/2.png)
+    ![5](/images/guides/swap/5.png)
 
-    ### Provide liquidity
-    Provide liquidity to a pool. You can receive some testnet tokens [here](/docs/guides/receive-tokens).
+    ### Input swap amount
+    ![6](/images/guides/swap/6.png)
+
+    ### [One-time] Approve the token to swap
+    <p float="left">
+        <img src="/images/guides/swap/8.png" width="300" /><img src="/images/guides/swap/7.png" width="300"/>
+    </p>
+
+    ### Swap tokens
+
+    Here we swap BLL tokens for HORSE tokens.
+    Try with small amounts as there might not be sufficient liquidity.
+    ![9](/images/guides/swap/9.png)
+    ![10](/images/guides/swap/10.png)
+    ![11](/images/guides/swap/11.png)
+
+    ### View Transaction on blockscout
+    ![12](/images/guides/swap/12.png)
+    ![13](/images/guides/swap/13.png)
 
-    ![provide liquidity](/images/guides/swap-liquidity.png)
 </Steps>
 
+
+{/* TODO: Create Guide for add liquidity */}
+{/* ## Add liquidity */}
+{/* <Steps>
+
+    ### Add liquidity
+    Provide liquidity to a pool. You can receive some testnet tokens [here](/docs/guides/receive-tokens).
+    ![provide liquidity](/images/guides/swap-liquidity.png)
+
+</Steps> */}
+
 ## Troubleshooting
 
 ### Token list does not show up
-If the "Taiko Tokens List" does not show up at "Select a list", you can add [this token list](https://gist.githubusercontent.com/d1onys1us/8f8824daed0882b1094296f824fae53c/raw/15204c4a4927a7f48a78c195323ce0d573d6b7c0/taiko_tokens.json).
+
+![3](/images/guides/swap/3.png)
+![4](/images/guides/swap/4.png)