feat: add wallet provider foundation

src/wallet/RainbowWalletProvider.tsx

@@ -0,0 +1,68 @@
+import "@rainbow-me/rainbowkit/styles.css";
+
+import {
+  RainbowKitProvider,
+  connectorsForWallets,
+  darkTheme,
+} from "@rainbow-me/rainbowkit";
+import {
+  imTokenWallet,
+  metaMaskWallet,
+  tokenPocketWallet,
+} from "@rainbow-me/rainbowkit/wallets";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, type ReactNode } from "react";
+import { http, createConfig, WagmiProvider } from "wagmi";
+import { mainnet } from "wagmi/chains";
+
+const projectId =
+  import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || "ark-library-dev-only";
+
+const connectors = connectorsForWallets(
+  [
+    {
+      groupName: "ARK Library",
+      wallets: [metaMaskWallet, imTokenWallet, tokenPocketWallet],
+    },
+  ],
+  {
+    appName: "ARK Library",
+    projectId,
+  },
+);
+
+export const wagmiConfig = createConfig({
+  chains: [mainnet],
+  connectors,
+  ssr: false,
+  transports: {
+    [mainnet.id]: http(),
+  },
+});
+
+export function RainbowWalletProvider({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider
+          modalSize="compact"
+          theme={darkTheme({
+            accentColor: "#d7b46a",
+            accentColorForeground: "#08070c",
+            borderRadius: "large",
+            fontStack: "system",
+            overlayBlur: "small",
+          })}
+        >
+          {children}
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+
+export function hasWalletConnectProjectId(): boolean {
+  return Boolean(import.meta.env.VITE_WALLETCONNECT_PROJECT_ID);
+}