feat: Web3Provider changes for resolving build bug (#19)

* fix: Walletconnect web3modal added

* fix: web3modal deps fixed with bun.lockb

* feat: Converted Web3Provider to Web3ModalProvider

* fix: don't use walletConnect

* feat: Created a connectWallet component

* fix: don't use WC and use hooks

---------

Co-authored-by: Aashutosh Rathi <[email protected]>

Author: Dhruv-2003

.gitignore

@@ -6,4 +6,7 @@ tsconfig.tsbuildinfo
 tsconfig.*.tsbuildinfo
 vocs.config.ts.timestamp-*
 .vercel
-.vocs
+.vocs
+
+bun.lockb
+

docs/components/AccessPassFlow.tsx

@@ -2,11 +2,11 @@ import { useEffect, useState } from "react";
 import { sepolia } from "viem/chains";
 import { useAccount, useReadContracts } from "wagmi";
 import { nftRegistryContract } from "../constants";
-import { ConnectWallet } from "./ConnectWallet";
 import { MintNFT } from "./MintNFT";
 import { NFTMinted } from "./NFTMinted";
 import { NotApprovedToMint } from "./NotApprovedToMint";
 import { queryClient } from "./Web3Provider";
+import { ConnectWallet } from "./ConnectWallet";
 
 export const AccessPassFlow = () => {
   const { address, isConnected, chainId } = useAccount();

docs/components/ConnectWallet.tsx

@@ -1,65 +1,16 @@
-import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { useWeb3Modal } from "@web3modal/wagmi/react";
 
 export const ConnectWallet = () => {
+  const { open } = useWeb3Modal();
   return (
-    <ConnectButton.Custom>
-      {({
-        account,
-        chain,
-        openAccountModal,
-        openChainModal,
-        openConnectModal,
-        authenticationStatus,
-        mounted,
-      }) => {
-        const ready = mounted && authenticationStatus !== "loading";
-        const connected =
-          ready &&
-          account &&
-          chain &&
-          (!authenticationStatus || authenticationStatus === "authenticated");
-        return (
-          <div
-            {...(!ready && {
-              "aria-hidden": true,
-              style: {
-                opacity: 0,
-                pointerEvents: "none",
-                userSelect: "none",
-              },
-            })}
-          >
-            {(() => {
-              if (!connected) {
-                return (
-                  <div className="flex items-center justify-center">
-                    <button
-                      onClick={openConnectModal}
-                      type="button"
-                      className="bg-teal-primary w-44 h-9 px-4 rounded-lg ring-2 ring-teal-primary/25 text-black font-jetbrains font-bold"
-                    >
-                      Connect Wallet
-                    </button>
-                  </div>
-                );
-              }
-              if (chain.unsupported) {
-                return (
-                  <div className="flex items-center justify-center">
-                    <button
-                      onClick={openChainModal}
-                      type="button"
-                      className="bg-error-med w-44 h-9 px-4 rounded-lg ring-2 ring-error-med/25 text-black font-jetbrains font-bold"
-                    >
-                      Switch Network
-                    </button>
-                  </div>
-                );
-              }
-            })()}
-          </div>
-        );
-      }}
-    </ConnectButton.Custom>
+    <div className="flex items-center justify-center">
+      <button
+        onClick={() => open()}
+        type="button"
+        className="cursor-pointer bg-teal-primary w-44 h-9 px-4 rounded-lg ring-2 ring-teal-primary/25 text-black font-jetbrains font-bold"
+      >
+        Connect Wallet
+      </button>
+    </div>
   );
 };

docs/components/SignupForm.tsx

@@ -5,8 +5,8 @@ import { keccak256, toBytes } from "viem";
 import { sepolia } from "viem/chains";
 import { useAccount, useSignTypedData } from "wagmi";
 import { getLocalStorageItem, updateLocalStorageItem } from "../utils";
-import { ConnectWallet } from "./ConnectWallet";
 import { Field } from "./Field";
+import { ConnectWallet } from "./ConnectWallet";
 
 const hashFormData = (formData: Record<string, any>) => {
   return keccak256(toBytes(JSON.stringify(formData)));

docs/components/Web3Provider.tsx

@@ -1,15 +1,16 @@
-import {
-  RainbowKitProvider,
-  darkTheme,
-  getDefaultConfig,
-} from "@rainbow-me/rainbowkit";
-import "@rainbow-me/rainbowkit/styles.css";
+import { createWeb3Modal } from "@web3modal/wagmi/react";
+
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { WagmiProvider } from "wagmi";
+import { WagmiProvider, createConfig, http } from "wagmi";
 import { sepolia } from "wagmi/chains";
+import { injected } from "wagmi/connectors";
 import { walletConnectProjectId } from "../constants";
 
-// This is faster than using the default RPC
+// 0. Setup queryClient
+export const queryClient = new QueryClient();
+
+export const projectId = walletConnectProjectId;
+
 const sepoliaEuRPC = {
   ...sepolia,
   rpcUrls: {
@@ -19,33 +20,26 @@ const sepoliaEuRPC = {
   },
 };
 
-const config = getDefaultConfig({
-  appName: "Stackr Docs",
-  projectId: walletConnectProjectId,
+const config = createConfig({
   chains: [sepoliaEuRPC],
+  transports: {
+    [sepoliaEuRPC.id]: http(),
+  },
+  connectors: [injected({ shimDisconnect: true })],
   ssr: true,
 });
 
-export const queryClient = new QueryClient();
+createWeb3Modal({
+  wagmiConfig: config,
+  projectId,
+});
 
 export const Web3Provider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   return (
     <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        <RainbowKitProvider
-          theme={darkTheme({
-            accentColor: "#00CECE",
-            accentColorForeground: "black",
-            borderRadius: "small",
-            fontStack: "system",
-            overlayBlur: "small",
-          })}
-        >
-          {children}
-        </RainbowKitProvider>
-      </QueryClientProvider>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </WagmiProvider>
   );
 };

package.json

@@ -8,9 +8,9 @@
     "preview": "vocs preview"
   },
   "dependencies": {
-    "@rainbow-me/rainbowkit": "^2.0.2",
     "@tanstack/react-query": "^5.28.9",
     "@types/react": "latest",
+    "@web3modal/wagmi": "^4.2.2",
     "mdx-mermaid": "^2.0.0",
     "mermaid": "^10.9.0",
     "react": "latest",