Feature: Integrate rainbow wallet (#7)

Reviewed-on: ofs/fensir#7
Complete: #6
Co-authored-by: kogeletey <kg@re128.org>
Co-committed-by: kogeletey <kg@re128.org>

src/components/RainbowProvider.tsx

@@ -0,0 +1,52 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ConnectButton, RainbowKitProvider, connectorsForWallets, darkTheme, getDefaultConfig } from "@rainbow-me/rainbowkit"
+import { WagmiProvider } from "wagmi"
+import {
+  metaMaskWallet,
+  rainbowWallet,
+  walletConnectWallet,
+} from "@rainbow-me/rainbowkit/wallets"
+
+import { polygon, polygonAmoy } from "wagmi/chains"
+
+const queryClient = new QueryClient()
+
+const walletConnectConfig = {
+  appName: "OFS",
+  projectId: "ee36add632123be041b70f8b037f0585",
+}
+
+const connectors = connectorsForWallets([
+  {
+    groupName: "Recommended",
+    wallets: [rainbowWallet, walletConnectWallet],
+  },
+  {
+    groupName: "Other",
+    wallets: [metaMaskWallet],
+  },
+], walletConnectConfig)
+
+const config = getDefaultConfig({
+  connectors,
+  ...walletConnectConfig,
+  chains: [polygonAmoy, polygon],
+  ssr: false,
+})
+
+export default function RainbowProvider() {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider theme={darkTheme({
+          accentColor: "var(--accent)",
+          accentColorForeground: "var(--primary)",
+          borderRadius: "none",
+        })}
+        >
+          <ConnectButton />
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}