diff --git a/packages/website/pages/docs/guides/_meta.json b/packages/website/pages/docs/guides/_meta.json index 184f5707d1d..11ea3a3c7af 100644 --- a/packages/website/pages/docs/guides/_meta.json +++ b/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" diff --git a/packages/website/pages/docs/guides/swap-tokens.mdx b/packages/website/pages/docs/guides/swap-tokens.mdx index 51fb3ac8e62..390b5d4790a 100644 --- a/packages/website/pages/docs/guides/swap-tokens.mdx +++ b/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 +

+ +

+ + ### 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) + +{/* TODO: Create Guide for add liquidity */} +{/* ## Add liquidity */} +{/* + + ### 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) + + */} + ## 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). \ No newline at end of file + +![3](/images/guides/swap/3.png) +![4](/images/guides/swap/4.png) diff --git a/packages/website/public/images/guides/swap/1.png b/packages/website/public/images/guides/swap/1.png new file mode 100644 index 00000000000..8872df37662 Binary files /dev/null and b/packages/website/public/images/guides/swap/1.png differ diff --git a/packages/website/public/images/guides/swap/10.png b/packages/website/public/images/guides/swap/10.png new file mode 100644 index 00000000000..38b4dafed69 Binary files /dev/null and b/packages/website/public/images/guides/swap/10.png differ diff --git a/packages/website/public/images/guides/swap/11.png b/packages/website/public/images/guides/swap/11.png new file mode 100644 index 00000000000..a9ae4b8d05d Binary files /dev/null and b/packages/website/public/images/guides/swap/11.png differ diff --git a/packages/website/public/images/guides/swap/12.png b/packages/website/public/images/guides/swap/12.png new file mode 100644 index 00000000000..10b3c78597e Binary files /dev/null and b/packages/website/public/images/guides/swap/12.png differ diff --git a/packages/website/public/images/guides/swap/13.png b/packages/website/public/images/guides/swap/13.png new file mode 100644 index 00000000000..6e9f96a333c Binary files /dev/null and b/packages/website/public/images/guides/swap/13.png differ diff --git a/packages/website/public/images/guides/swap/2.png b/packages/website/public/images/guides/swap/2.png new file mode 100644 index 00000000000..26463cc53a3 Binary files /dev/null and b/packages/website/public/images/guides/swap/2.png differ diff --git a/packages/website/public/images/guides/swap/3.png b/packages/website/public/images/guides/swap/3.png new file mode 100644 index 00000000000..775302dfaf6 Binary files /dev/null and b/packages/website/public/images/guides/swap/3.png differ diff --git a/packages/website/public/images/guides/swap/4.png b/packages/website/public/images/guides/swap/4.png new file mode 100644 index 00000000000..5430e892516 Binary files /dev/null and b/packages/website/public/images/guides/swap/4.png differ diff --git a/packages/website/public/images/guides/swap/5.png b/packages/website/public/images/guides/swap/5.png new file mode 100644 index 00000000000..328dd7760dc Binary files /dev/null and b/packages/website/public/images/guides/swap/5.png differ diff --git a/packages/website/public/images/guides/swap/6.png b/packages/website/public/images/guides/swap/6.png new file mode 100644 index 00000000000..7b10510d5eb Binary files /dev/null and b/packages/website/public/images/guides/swap/6.png differ diff --git a/packages/website/public/images/guides/swap/7.png b/packages/website/public/images/guides/swap/7.png new file mode 100644 index 00000000000..c540c4736ee Binary files /dev/null and b/packages/website/public/images/guides/swap/7.png differ diff --git a/packages/website/public/images/guides/swap/8.png b/packages/website/public/images/guides/swap/8.png new file mode 100644 index 00000000000..b77b38c9e1e Binary files /dev/null and b/packages/website/public/images/guides/swap/8.png differ diff --git a/packages/website/public/images/guides/swap/9.png b/packages/website/public/images/guides/swap/9.png new file mode 100644 index 00000000000..34180e3f6b1 Binary files /dev/null and b/packages/website/public/images/guides/swap/9.png differ