fix(explorer): wallets connect options (#3732)

Author: karooolis

.changeset/gold-maps-talk.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Restore wallet connection options in the wallet connect modal.

packages/explorer/package.json

@@ -57,7 +57,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@radix-ui/themes": "^3.0.5",
-    "@rainbow-me/rainbowkit": "^2.1.5",
+    "@rainbow-me/rainbowkit": "^2.2.6",
     "@tanstack/react-query": "^5.51.3",
     "@tanstack/react-table": "^8.19.3",
     "class-variance-authority": "^0.7.0",

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/Providers.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { WagmiProvider, createConfig, fallback, http, webSocket } from "wagmi";
-import { injected, metaMask, safe } from "wagmi/connectors";
 import { ReactNode, useMemo } from "react";
-import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
+import { RainbowKitProvider, connectorsForWallets, darkTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
+import { injectedWallet, metaMaskWallet, safeWallet } from "@rainbow-me/rainbowkit/wallets";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { getDefaultAnvilConnectors } from "../../../../../connectors/anvil";
 import { useChain } from "../../../hooks/useChain";
@@ -14,18 +14,20 @@ const queryClient = new QueryClient();
 export function Providers({ children }: { children: ReactNode }) {
   const chain = useChain();
   const wagmiConfig = useMemo(() => {
+    const anvilConnectors = getDefaultAnvilConnectors(chain.id);
+    const walletConnectors = connectorsForWallets(
+      [
+        {
+          groupName: "Recommended",
+          wallets: [injectedWallet, metaMaskWallet, safeWallet],
+        },
+      ],
+      { appName: "Worlds Explorer", projectId: process.env.NEXT_PUBLIC_PROJECT_ID! },
+    );
+
     return createConfig({
       chains: [chain],
-      connectors: [
-        injected(),
-        metaMask({
-          dappMetadata: {
-            name: "World Explorer",
-          },
-        }),
-        safe(),
-        ...getDefaultAnvilConnectors(chain.id),
-      ],
+      connectors: [...walletConnectors, ...anvilConnectors],
       transports: {
         [chain.id]: chain.rpcUrls.default.webSocket
           ? fallback([webSocket(chain.rpcUrls.default.webSocket[0]), http(chain.rpcUrls.default.http[0])])