From e53f747e598b813cf8923c55f87d8e7422afc0c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ti=E1=BA=BFn=20Nguy=E1=BB=85n=20Kh=E1=BA=AFc?=
 <tien.nguyenkhac@icloud.com>
Date: Sat, 15 Jun 2024 16:43:28 +1200
Subject: [PATCH] docs: optional dependencies required by WalletConnect

---
 ...connect-wallets.md => connect-wallets.mdx} | 31 +++++++++++++++++++
 apps/docs/docs/getting-started/mutation.md    |  2 +-
 2 files changed, 32 insertions(+), 1 deletion(-)
 rename apps/docs/docs/getting-started/{connect-wallets.md => connect-wallets.mdx} (77%)

diff --git a/apps/docs/docs/getting-started/connect-wallets.md b/apps/docs/docs/getting-started/connect-wallets.mdx
similarity index 77%
rename from apps/docs/docs/getting-started/connect-wallets.md
rename to apps/docs/docs/getting-started/connect-wallets.mdx
index 3fa2dd0b..632c645b 100644
--- a/apps/docs/docs/getting-started/connect-wallets.md
+++ b/apps/docs/docs/getting-started/connect-wallets.mdx
@@ -2,10 +2,41 @@
 sidebar_position: 3
 ---
 
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
 # Connect wallets
 
 Wallets & accounts connection can by managed via [`useWallets`](/api/react/function/useWallets), [`useConnectedWallets`](/api/react/function/useConnectedWallets) & [`useAccounts`](/api/react/function/useAccounts) hooks.
 
+## Install optional dependencies
+
+Additional dependencies are required if you use any of be bellow wallet type.
+
+### [WalletConnect](https://walletconnect.com/)
+
+{/* prettier-ignore-start */}
+
+<Tabs>
+  <TabItem value="npm" label="npm" default>
+    ```sh
+    npm add @walletconnect/modal @walletconnect/universal-provider
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+    ```sh
+    yarn add @walletconnect/modal @walletconnect/universal-provider
+    ```
+  </TabItem>
+    <TabItem value="pnpm" label="pnpm">
+    ```sh
+    pnpm add @walletconnect/modal @walletconnect/universal-provider
+    ```
+  </TabItem>
+</Tabs>
+
+{/* prettier-ignore-end */}
+
 ## Add wallets to the config
 
 ```ts title="config.ts"
diff --git a/apps/docs/docs/getting-started/mutation.md b/apps/docs/docs/getting-started/mutation.md
index 33be0907..ec096a84 100644
--- a/apps/docs/docs/getting-started/mutation.md
+++ b/apps/docs/docs/getting-started/mutation.md
@@ -8,7 +8,7 @@ The `useMutation` hook allow you to sign & submit transaction to a chain.
 
 ## Connect wallet & accounts
 
-Follow the [Connect wallets](./connect-wallets.md) guide to get this set up.
+Follow the [Connect wallets](./connect-wallets.mdx) guide to get this set up.
 
 ## Choose the signer