feat(wallet): integrate RainbowKit + Wagmi to enable multi-wallet support

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+
+.env.local

src/Navbar.tsx

@@ -1,25 +1,26 @@
-import { useState } from "react";
-import { useAccount } from "wagmi";
-import { ConnectButton } from "@rainbow-me/rainbowkit";
-import { Link, useNavigate } from "react-router-dom";
+import { useState } from "react"
+import { useAccount } from "wagmi"
+import { ConnectButton } from "@rainbow-me/rainbowkit"
+import { Link, useNavigate } from "react-router-dom"
 
 const Navbar = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const Account = useAccount();
-  const navigate = useNavigate();
+  const [isOpen, setIsOpen] = useState(false)
+  const { isConnected } = useAccount()
+  const navigate = useNavigate()
 
   return (
     <div className="py-5 bg-slate-950 flex flex-row justify-between align-middle flex-wrap px-4">
       <div className="flex flex-row gap-6">
-        <Link to={"/"} className="flex items-center">
-          <img src="/Benelogo.svg" alt="" className="w-8 h-8 flex items mt-[1px]"/>
-          <span className=" text-2xl px-1  font-bold text-white">Bene</span>
+        <Link to="/" className="flex items-center">
+          <img
+            src="/Benelogo.svg"
+            alt="Bene logo"
+            className="w-8 h-8 mt-[1px]"
+          />
+          <span className="text-2xl px-1 font-bold text-white">Bene</span>
         </Link>
+
         <div className="w-80 hidden md:block">
-          <label className="mb-2 text-sm font-medium sr-only bg-slate-950 text-white">
-            Search
-          </label>
           <div className="relative">
             <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
               <svg
@@ -31,23 +32,22 @@ const Navbar = () => {
               >
                 <path
                   stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
                   d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
                 />
               </svg>
             </div>
             <input
               type="search"
-              id="search"
-              className="block w-full p-2 ps-10 text-sm  border rounded-sm bg-slate-900  border-slate-700 placeholder-zinc-400 text-white focus:ring-purple-800 focus:border-purple-800"
+              className="block w-full p-2 ps-10 text-sm border rounded-sm bg-slate-900 border-slate-700 placeholder-zinc-400 text-white focus:ring-purple-800 focus:border-purple-800"
               placeholder="Search a Funding Vault"
-              required
             />
           </div>
         </div>
       </div>
+
       <button
         className="text-white text-2xl xl:hidden"
         onClick={() => setIsOpen(!isOpen)}
@@ -58,37 +58,26 @@ const Navbar = () => {
       <div
         className={`${
           isOpen ? "block" : "hidden"
-        } xl:flex flex flex-col xl:flex-row xl:justify-items-center w-full xl:w-auto gap-4 mt-4 xl:mt-0`}
+        } xl:flex flex-col xl:flex-row w-full xl:w-auto gap-4 mt-4 xl:mt-0`}
       >
-        {/* <button
-          // onClick={() => scrollToSection("skills")}
-          className="text-white text-lg sm:text-xl hover:bg-purple-800 px-5 rounded-sm shadow-md "
-        >
-          Skills
-        </button> */}
-
-        {Account.address ? (
+        {isConnected && (
           <button
-            onClick={() => {
-              if (Account.address) navigate("/create");
-            }}
-            className="text-white bg-zinc-800 font-bold text-sm h-10 hover:bg-zinc-900 px-3 rounded-lg shadow-md "
+            onClick={() => navigate("/create")}
+            className="text-white bg-zinc-800 font-bold text-sm h-10 hover:bg-zinc-900 px-3 rounded-lg shadow-md"
           >
             Raise Funds for a New Project
           </button>
-        ) : (
-          <div></div>
         )}
-        <div>
-          <ConnectButton
-            accountStatus={{
-              smallScreen: "avatar",
-              largeScreen: "full",
-            }}
-          />
-        </div>
+
+        <ConnectButton
+          accountStatus={{
+            smallScreen: "avatar",
+            largeScreen: "full",
+          }}
+        />
       </div>
     </div>
-  );
-};
-export default Navbar;
+  )
+}
+
+export default Navbar

src/app/providers.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { WagmiProvider } from "wagmi"
+import { RainbowKitProvider } from "@rainbow-me/rainbowkit"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { wagmiConfig } from "@/lib/wallet/config"
+
+const queryClient = new QueryClient()
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider>
+          {children}
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}

src/components/wallet-connect.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import { ConnectButton } from "@rainbow-me/rainbowkit"
+
+export default function WalletConnect() {
+  return <ConnectButton />
+}

src/hooks/useWallet.ts

@@ -0,0 +1,13 @@
+import { useAccount, useChainId } from "wagmi"
+
+export function useWallet() {
+  const { address, isConnected, connector } = useAccount()
+  const chainId = useChainId()
+
+  return {
+    address,
+    isConnected,
+    chainId,
+    connector,
+  }
+}

src/lib/wallet/chains.ts

@@ -0,0 +1,8 @@
+import { mainnet, polygon, optimism, arbitrum } from "wagmi/chains"
+
+export const supportedChains = [
+  mainnet,
+  polygon,
+  optimism,
+  arbitrum,
+]

src/lib/wallet/config.ts

@@ -0,0 +1,11 @@
+import { getDefaultConfig } from "@rainbow-me/rainbowkit"
+import { supportedChains } from "./chains"
+
+
+
+export const wagmiConfig = getDefaultConfig({
+  appName: "YourAppName",
+  projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
+  chains: supportedChains as const,
+  ssr: true,
+})