From 3c2ca72c2957fa7a891066900d4d987320fc3e47 Mon Sep 17 00:00:00 2001
From: J M Rossy <jm.rossy@gmail.com>
Date: Mon, 13 Nov 2023 12:08:25 -0500
Subject: [PATCH] WalletConnect fixes (#81)

- Fix WalletConnect connections for cosmos by using undocumented `useChains` hook
- Fix image load errors in WalletConnect modal by adjusting CSP header
---
 next.config.js                |  2 +-
 src/features/wallet/hooks.tsx | 56 ++++++++++++-----------------------
 2 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/next.config.js b/next.config.js
index aefe03a9..bad30feb 100755
--- a/next.config.js
+++ b/next.config.js
@@ -26,7 +26,7 @@ const securityHeaders = [
     key: 'Content-Security-Policy',
     value: `default-src 'self'; script-src 'self'${
       isDev ? " 'unsafe-eval'" : ''
-    }; connect-src *; img-src 'self' data:; style-src 'self' 'unsafe-inline' https://*.googleapis.com; font-src 'self' data:; base-uri 'self'; form-action 'self'; frame-src 'self' https://*.solflare.com https://*.walletconnect.com;`,
+    }; connect-src *; img-src 'self' data: https://*.walletconnect.com; style-src 'self' 'unsafe-inline' https://*.googleapis.com; font-src 'self' data:; base-uri 'self'; form-action 'self'; frame-src 'self' https://*.solflare.com https://*.walletconnect.com;`,
   },
 ]
 
diff --git a/src/features/wallet/hooks.tsx b/src/features/wallet/hooks.tsx
index 8bd6d428..a59d3323 100644
--- a/src/features/wallet/hooks.tsx
+++ b/src/features/wallet/hooks.tsx
@@ -1,9 +1,5 @@
 import { DeliverTxResponse, ExecuteResult } from '@cosmjs/cosmwasm-stargate';
-import {
-  useChain as useCosmosChain,
-  useChains as useCosmosChains,
-  useWalletClient as useCosmosWallet,
-} from '@cosmos-kit/react';
+import { useChain as useCosmosChain, useChains as useCosmosChains } from '@cosmos-kit/react';
 import { useConnectModal as useEvmModal } from '@rainbow-me/rainbowkit';
 import { useConnection, useWallet as useSolanaWallet } from '@solana/wallet-adapter-react';
 import { useWalletModal as useSolanaModal } from '@solana/wallet-adapter-react-ui';
@@ -13,7 +9,7 @@ import {
   switchNetwork as switchEvmNetwork,
 } from '@wagmi/core';
 import { providers } from 'ethers';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { toast } from 'react-toastify';
 import {
   useAccount as useEvmAccount,
@@ -89,40 +85,26 @@ export function useAccounts(): {
   );
 
   // Cosmos
-  const { wallet: cosmWallet, isWalletConnected: isCosmAccountReady } =
-    useCosmosChain(PLACEHOLDER_COSMOS_CHAIN);
-  const { status: cosmWalletStatus, client: cosmWalletClient } = useCosmosWallet();
-  const [cosmAccounts, setCosmAccounts] = useState<Array<ChainAddress>>([]);
-
-  useEffect(() => {
-    if (cosmWalletStatus !== 'Done' || !cosmWalletClient) return;
+  const cosmosChainToContext = useCosmosChains(getCosmosChainNames());
+  const cosmAccountInfo: AccountInfo = useMemo(() => {
+    const cosmAddresses: Array<ChainAddress> = [];
+    let cosmConnectorName: string | undefined = undefined;
+    let isCosmAccountReady = false;
     const multiProvider = getMultiProvider();
-    const cosmChainNames = getCosmosChainNames();
-    const cosmChainCaip2Ids = cosmChainNames.map((c) =>
-      getCaip2Id(ProtocolType.Cosmos, multiProvider.getChainId(c)),
-    );
-    cosmWalletClient.enable?.(cosmChainNames).catch((err) => logger.error(err));
-    const cosmosAccountPromises = cosmChainNames.map((c) => cosmWalletClient.getAccount?.(c));
-    Promise.all(cosmosAccountPromises)
-      .then((cosmosAccounts) => {
-        setCosmAccounts(
-          cosmosAccounts
-            .map((a, i) => ({ address: a?.address, chainCaip2Id: cosmChainCaip2Ids[i] }))
-            .filter((a) => !!a.address) as Array<ChainAddress>,
-        );
-      })
-      .catch((err) => logger.error(err));
-  }, [cosmWalletStatus, cosmWalletClient]);
-
-  const cosmAccountInfo: AccountInfo = useMemo(
-    () => ({
+    for (const [chainName, context] of Object.entries(cosmosChainToContext)) {
+      if (!context.address) continue;
+      const caip2Id = getCaip2Id(ProtocolType.Cosmos, multiProvider.getChainId(chainName));
+      cosmAddresses.push({ address: context.address, chainCaip2Id: caip2Id });
+      isCosmAccountReady = true;
+      cosmConnectorName ||= context.wallet?.prettyName;
+    }
+    return {
       protocol: ProtocolType.Cosmos,
-      addresses: cosmAccounts,
-      connectorName: cosmWallet?.prettyName,
+      addresses: cosmAddresses,
+      connectorName: cosmConnectorName,
       isReady: isCosmAccountReady,
-    }),
-    [cosmAccounts, cosmWallet, isCosmAccountReady],
-  );
+    };
+  }, [cosmosChainToContext]);
 
   // Filtered ready accounts
   const readyAccounts = useMemo(