From 6b694be0b627f897327bb791404708def4f2f76f Mon Sep 17 00:00:00 2001
From: Mark Nardi <nardimark7@gmail.com>
Date: Fri, 12 Jan 2024 09:53:28 +0100
Subject: [PATCH] update guides to include Bloom in dApps

---
 developer-guide/wallet-connect/guide.md | 76 ++++++++++++++++++++++++-
 1 file changed, 73 insertions(+), 3 deletions(-)

diff --git a/developer-guide/wallet-connect/guide.md b/developer-guide/wallet-connect/guide.md
index 3e47c6b..8de0516 100644
--- a/developer-guide/wallet-connect/guide.md
+++ b/developer-guide/wallet-connect/guide.md
@@ -13,9 +13,9 @@ To include `Bloom Wallet` in the list of recommended wallets, please add the fol
 createWeb3Modal({
   //...
   featuredWalletIds: [
-    "652df0cee82d5cd3cadfd57829c5578a", // Bloom wallet
-  ],
-});
+    'XXXXXYYYYZZZZZ11111222223333', // Bloom wallet, this ID will be fixed once we're approved
+  ]
+})
 ```
 
 ---
@@ -56,6 +56,76 @@ import {
 ...
 
 
+const connectors = connectorsForWallets([
+    {
+        groupName: 'Recommended',
+        wallets: [
+            ...,
+            bloomWallet({ projectId, chains }),
+            ...
+        ],
+    },
+]);
+```
+
+**NOTE**
+
+As we're waiting for RainbowKit to merge our PR in, you can add Bloom manually to the list of wallets as follows:
+
+Create a `bloomWallet.ts(|js)` file:
+
+```javascript
+import {
+  Chain,
+  Wallet,
+  getWalletConnectConnector,
+} from '@rainbow-me/rainbowkit';
+
+export interface MyWalletOptions {
+  projectId: string;
+  chains: Chain[];
+}
+
+export const bloomWallet = ({
+  chains,
+  projectId,
+}: MyWalletOptions): Wallet => ({
+  id: 'bloomWallet',
+  name: 'Bloom Wallet',
+  iconUrl: 'https://bloomwallet.io/assets/logos/bloom.png',
+  iconBackground: '#000',
+  downloadUrls: {
+    windows: 'https://bloomwallet.io/',
+    macos: 'https://bloomwallet.io/',
+    linux: 'https://bloomwallet.io/',
+    desktop: 'https://bloomwallet.io/',
+  },
+  createConnector: () => {
+    const connector = getWalletConnectConnector({ projectId, chains });
+    return {
+      connector,
+      desktop: {
+        getUri: async () => {
+          const provider = await connector.getProvider();
+          const uri = await new Promise<string>(resolve =>
+            provider.once('display_uri', resolve)
+          );
+          return `bloom://wallet-connect/connect?uri=${encodeURIComponent(uri)}`;
+        }
+      },
+    };
+  },
+});
+```
+
+In the file where you setup your connectors, add the following:
+
+
+```javascript
+import { bloomWallet } from 'path/to/bloomWallet.ts';
+...
+
+
 const connectors = connectorsForWallets([
     {
         groupName: 'Recommended',