feat(explorer): external wallet connect (#3156)

packages/explorer/package.json

@@ -37,6 +37,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/themes": "^3.0.5",
+    "@rainbow-me/rainbowkit": "^2.1.5",
     "@tanstack/react-query": "^5.51.3",
     "@tanstack/react-table": "^8.19.3",
     "@wagmi/core": "^2.12.1",

packages/explorer/src/app/(explorer)/Providers.tsx

@@ -1,17 +1,18 @@
 "use client";
 
-import { WagmiProvider } from "wagmi";
+import { WagmiProvider, createConfig, http } from "wagmi";
 import { injected, metaMask, safe } from "wagmi/connectors";
 import { ReactNode } from "react";
+import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
+import "@rainbow-me/rainbowkit/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { createConfig, http } from "@wagmi/core";
-import { localhost } from "@wagmi/core/chains";
+import { anvil } from "@wagmi/core/chains";
 import { AppStoreProvider } from "../../store";
 
 const queryClient = new QueryClient();
 
 export const wagmiConfig = createConfig({
-  chains: [localhost],
+  chains: [anvil],
   connectors: [
     injected(),
     metaMask({
@@ -22,15 +23,18 @@ export const wagmiConfig = createConfig({
     safe(),
   ],
   transports: {
-    [localhost.id]: http(),
+    [anvil.id]: http(),
   },
+  ssr: true,
 });
 
 export function Providers({ children }: { children: ReactNode }) {
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <AppStoreProvider>{children}</AppStoreProvider>
+        <RainbowKitProvider theme={darkTheme()}>
+          <AppStoreProvider>{children}</AppStoreProvider>
+        </RainbowKitProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );