feat: add bloom wallet config + logo

[MarkNerdi]

No description provided.

[vercel]

@MarkNerdi is attempting to deploy a commit to the Avara Team on Vercel.

A member of the Team first needs to authorize it.

[MarkNerdi]

@lochie
I updated the branch to latest, so it would be ready for review

[eduardopelitti]

we could really use this in the IOTA ecosystem!

[eduardopelitti]

Hi, @lochie, sorry to bother you but we've been struggling with this for a few days now.

To enable support for Bloom Wallet in our dApps and keep using ConnectKit (we've been following your amazing progress from v0.1!), we decided to patch the library with the changes in this PR, basically adding the bloom object to walletConfigs.ts, adding the isBloom flag to wallets.ts (missing from this PR 🤔 ), and using a custom logo.

With the patched file, we included the Bloom Wallet into the connectors list following the syntax from the -hidden- Wallets page in the docs (https://docs.family.co/connectkit/wallets#configure-wallets) mentioned on a separate issue, this way:

const defaultConfig = getDefaultConfig({
  appName: 'Test',
  chains: [mainnet],
  walletConnectProjectId,
})

export const config = createConfig({
  ...defaultConfig,
  connectors: [wallets['bloom'], ...(defaultConfig.connectors ?? [])],
})

At this stage if we console.log() the wallets object, we can see the bloom property there, and the options in the Connect Wallet display a Bloom button.

But when clicking on the Bloom wallet button, it takes us to the QR code with no real info (i.e.: scanning it from mobile has no use, and the Get The App QR redirects to family.co).

The expected behavior, which we can validate using Rainbow Kit, is that the Bloom Desktop Wallet should open via the deep link and display a Connection request.

We tried validating with a different desktop wallet, like Zerion, but it didn't seem to work either (yet it didn't work in RainbowKit either, whereas Bloom does).

We're a bit lost as to where the issue is, and since this PR isn't merged, then we have no way of opening an actual bug on the library regarding MIPD.

Is this the right way to do it? Is there a different way to implementing custom elements other than patching the library?

We're not sure why this PR shouldn't be merged, but in the meantime we're looking for a solution because we are close to several release dates for our dApps using ConnectKit (at least 4!) and requiring integration with Bloom as well.

Additional Context:

We are using wagmi 2.5.20 and ConnectKit 1.7.2.

Here's a Code Sandbox with RainbowKit working with Bloom:

https://codesandbox.io/p/sandbox/rainbow-kit-bloom-wallet-test-5wsfcp

This is the minimum patch file (reusing the logo from Zerion to keep it smaller):

index fa1900b..b5d1e7a 100644
--- a/node_modules/connectkit/build/index.es.js
+++ b/node_modules/connectkit/build/index.es.js
@@ -102,6 +102,7 @@ const isWalletInstalled = (name) => {
 };
 const isFamily = () => isWalletInstalled('Family');
 const isRainbow = () => isWalletInstalled('Rainbow');
+const isBloom = () => isWalletInstalled('Bloom');
 const isZerion = () => isWalletInstalled('Zerion');
 
 const Injected = ({ ...props }) => (jsx("svg", { ...props, width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.6505 3.64041C15.6501 3.64062 15.6497 3.64083 15.6493 3.64103L6.05165 8.43985L16.2501 13.5391L26.4484 8.43987L16.8508 3.64103C16.8504 3.64083 16.85 3.64063 16.8496 3.64043C16.6632 3.54806 16.458 3.5 16.25 3.5C16.042 3.5 15.8369 3.54806 15.6505 3.64041ZM28 10.4592L17.5001 15.7091L17.5 28.5205L27.248 23.6465L27.2508 23.6452C27.4757 23.5334 27.665 23.3611 27.7973 23.1477C27.9297 22.9342 27.9999 22.6881 28 22.4369V10.4592ZM15 28.527L15.0001 15.7091L4.50006 10.4591V22.4333C4.49831 22.6849 4.56687 22.9319 4.69807 23.1466C4.82896 23.3608 5.01696 23.5342 5.24095 23.6475C5.24148 23.6477 5.242 23.648 5.24253 23.6483L15 28.527ZM14.5207 31.0824L4.12104 25.8826L4.11759 25.8809C3.47681 25.558 2.93902 25.0625 2.56486 24.4502C2.19154 23.8394 1.99597 23.1365 2.00006 22.4207V10.0486C2.00044 9.33234 2.20062 8.62972 2.5781 8.021C2.95529 7.41274 3.49457 6.92167 4.13537 6.60291C4.13585 6.60267 4.13633 6.60243 4.13681 6.60219L14.534 1.40359L14.5368 1.40221C15.0692 1.13767 15.6556 1 16.25 1C16.8445 1 17.4309 1.13767 17.9633 1.40221L17.966 1.40358L28.3633 6.60219C28.3638 6.60245 28.3643 6.6027 28.3648 6.60295C29.0055 6.92171 29.5448 7.41276 29.922 8.021C30.2994 8.62973 30.4996 9.33168 30.5 10.0479V22.4376C30.4996 23.1538 30.2994 23.8565 29.922 24.4652C29.5448 25.0734 29.0056 25.5644 28.365 25.8831C28.3644 25.8834 28.3638 25.8837 28.3633 25.884L17.9664 31.0824C17.9663 31.0825 17.9665 31.0824 17.9664 31.0824C17.4316 31.3499 16.8415 31.4894 16.2435 31.4894C15.6455 31.4894 15.0554 31.3499 14.5207 31.0824C14.5205 31.0824 14.5208 31.0825 14.5207 31.0824Z", fill: "#CCCCCC" }) }));
@@ -577,6 +578,18 @@ const walletConfigs = {
                 : `ledgerlive://wc?uri=${encodeURIComponent(uri)}`;
         },
     },
+    bloom: {
+        name: 'Bloom',
+        icon: jsx(Logos.Zerion, {}),
+        downloadUrls: { 
+           download: 'https://connect.family.co/v0/download/bloom',
+      	   website: 'https://bloomwallet.io/',
+      	   desktop: 'https://bloomwallet.io/',
+	},  
+        getWalletConnectDeeplink: (uri) => {
+           return `bloom://wallet-connect/wc?uri=${encodeURIComponent(uri)}`;
+	},  
+    },      
     zerion: {
         name: 'Zerion',
         icon: jsx(Logos.Zerion, {}),