[web][lib][landing] Prevent crash when missing WalletConnect key

Summary: See [ENG-4175](https://linear.app/comm/issue/ENG-4175/missing-walletconnect-key-crashes-web-app) for context.

Test Plan: I moved my `keyserver/secrets/walletconnect.json` file to another path. Without this diff the web app was crashing, but after this diff it was able to load successfully.

Reviewers: kamil, atul

Reviewed By: kamil

Subscribers: tomek

Differential Revision: https://phab.comm.dev/D8349

landing/siwe.react.js

@@ -37,19 +37,22 @@ import { SIWEContext } from './siwe-context.js';
 import css from './siwe.css';
 import { useMonitorForWalletConnectModal } from './walletconnect-hooks.js';
 
-const projectId = process.env.COMM_WALLETCONNECT_KEY;
 const { chains, provider } = configureWagmiChains(process.env.COMM_ALCHEMY_KEY);
+
+const wallets = [injectedWallet({ chains })];
+const projectId = process.env.COMM_WALLETCONNECT_KEY;
+if (projectId) {
+  wallets.push(
+    rainbowWallet({ chains, projectId }),
+    metaMaskWallet({ chains, projectId }),
+    walletConnectWallet({ chains, projectId }),
+  );
+}
+
 const connectors = connectorsForWallets([
-  {
-    groupName: 'Recommended',
-    wallets: [
-      injectedWallet({ chains }),
-      rainbowWallet({ chains, projectId }),
-      metaMaskWallet({ chains, projectId }),
-      walletConnectWallet({ chains, projectId }),
-    ],
-  },
+  { groupName: 'Recommended', wallets },
 ]);
+
 const wagmiClient = createWagmiClient({ connectors, provider });
 
 function postMessageToNativeWebView(message: SIWEWebViewMessage) {

lib/utils/wagmi-utils.js

@@ -46,19 +46,22 @@ function createWagmiClient(input: WagmiClientInput): mixed {
   });
 }
 
-const projectId = process.env.COMM_WALLETCONNECT_KEY;
 const { chains, provider } = configureWagmiChains(process.env.COMM_ALCHEMY_KEY);
+
+const wallets = [injectedWallet({ chains })];
+const projectId = process.env.COMM_WALLETCONNECT_KEY;
+if (projectId) {
+  wallets.push(
+    rainbowWallet({ chains, projectId }),
+    metaMaskWallet({ chains, projectId }),
+    walletConnectWallet({ chains, projectId }),
+  );
+}
+
 const connectors = connectorsForWallets([
-  {
-    groupName: 'Recommended',
-    wallets: [
-      injectedWallet({ chains }),
-      rainbowWallet({ chains, projectId }),
-      metaMaskWallet({ chains, projectId }),
-      walletConnectWallet({ chains, projectId }),
-    ],
-  },
+  { groupName: 'Recommended', wallets },
 ]);
+
 const wagmiClient: mixed = createWagmiClient({ connectors, provider });
 const wagmiChains: mixed = chains;