improve wallet integration documentation

developer-guide/add-bloom-to-dapp/connect-kit.md

@@ -0,0 +1,7 @@
+---
+order: 500
+---
+
+# ConnectKit
+
+Currently not customizable

developer-guide/add-bloom-to-dapp/index.md

@@ -0,0 +1,19 @@
+---
+icon: diff-added
+expanded: false
+order: 998
+---
+
+# Add Bloom to your DApp
+
+To be able to connect with the IOTA / Shimmer ecosystem, Bloom implements `WalletConnect`(ref: https://docs.walletconnect.com/quickstart). WalletConnect is a generic interface, which offers the user the freedom to connect any of  their trusted wallets to the dApp.
+
+If you're a dApp developer and want your users to use `Bloom` together with your dApp, checkout the following guides for your frameworks:
+
+[Web3Modal (Recommended)](web3modal.md)  
+[RainbowKit](rainbow-kit.md)  
+[ConnectKit](connect-kit.md)  
+[Wagmi](wagmi.md)
+
+
+If your framework of choice isn't listed here, feel free to reach out to us on [Discord](https://discord.gg/RjX3jEc7K7) and we will gladly assist you.

developer-guide/wallet-connect/guide.md → developer-guide/add-bloom-to-dapp/rainbow-kit.md

@@ -1,48 +1,10 @@
 ---
-icon: book
-order: 1000
----
-
-# Guide
-
-# Web3Modal
-
-To include `Bloom Wallet` in the list of recommended wallets, please add the following code to your Web3Modal options:
-
-```javascript
-createWeb3Modal({
-  //...
-  featuredWalletIds: [
-    'XXXXXYYYYZZZZZ11111222223333', // Bloom wallet, this ID will be fixed once we're approved
-  ]
-})
-```
-
----
-
-**NOTE**
-
-As we're waiting for WalletConnect to approve our project, you can add Bloom manually to the list of wallets as follows:
-
-```javascript
-createWeb3Modal({
-  //...
-  customWallets: [
-    {
-      id: "bloom",
-      name: "Bloom",
-      homepage: "https://bloomwallet.io/",
-      image_url: "https://bloomwallet.io/assets/logos/bloom.png",
-      desktop_link: "bloom://wallet-connect",
-    },
-  ],
-});
-```
-
+order: 800
 ---
 
 # RainbowKit
 
+
 To include `Bloom Wallet` in the list of recommended wallets, please add the following code to your RainbowKit options:
 
 ```javascript
@@ -71,8 +33,9 @@ const connectors = connectorsForWallets([
 **NOTE**
 
 As we're waiting for RainbowKit to merge our PR in, you can add Bloom manually to the list of wallets as follows:
+1. Create a `bloomWallet.ts(|js)` file:
 
-Create a `bloomWallet.ts(|js)` file:
+<details><summary>bloomWallet.ts</summary>
 
 ```javascript
 import {
@@ -91,7 +54,7 @@ export const bloomWallet = ({
   projectId,
 }: MyWalletOptions): Wallet => ({
   id: 'bloomWallet',
-  name: 'Bloom Wallet',
+  name: 'Bloom',
   iconUrl: 'https://bloomwallet.io/assets/logos/bloom.png',
   iconBackground: '#000',
   downloadUrls: {
@@ -117,8 +80,10 @@ export const bloomWallet = ({
   },
 });
 ```
+</details>
+<br/>
 
-In the file where you setup your connectors, add the following:
+2. In the file where you setup your connectors, add the following:
 
 
 ```javascript
@@ -136,4 +101,4 @@ const connectors = connectorsForWallets([
         ],
     },
 ]);
-```
+```