feat: added rainbowkit connect wallet button

Author: Markkos89

.env.example

@@ -11,7 +11,7 @@
 
 # Prisma
 # https://www.prisma.io/docs/reference/database-reference/connection-urls#env
-DATABASE_URL="file:./db.sqlite" # unnused now for postgres
+# DATABASE_URL="file:./db.sqlite" # unnused now for postgres
 
 # Next Auth
 # You can generate a new secret on the command line with:
@@ -26,4 +26,6 @@ POSTGRES_URL_NON_POOLING=
 POSTGRES_USER=
 POSTGRES_HOST=
 POSTGRES_PASSWORD=
-POSTGRES_DATABASE=
+POSTGRES_DATABASE=
+
+NEXT_PUBLIC_WALLET_CONNECT_ID=

src/components/Topbar.tsx

@@ -37,6 +37,7 @@ import {
 } from "wagmi";
 import { InjectedConnector } from "wagmi/connectors/injected";
 import { useEffect, useState } from "react";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
 
 interface NavItem {
   label: string;
@@ -194,51 +195,7 @@ export default function Topbar() {
           spacing={6}
           minW={"10rem"}
         >
-          {sessionData ? (
-            <div className="mb-4 text-center">
-              <button
-                className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
-                onClick={onClickSignOut as () => void}
-              >
-                Sign Out
-              </button>
-            </div>
-          ) : showConnection ? (
-            <div className="mb-4">
-              {/* {chain?.unsupported ? (
-                  <button onClick={() => switchNetwork?.()}>
-                    {`Switch to ${polygonMumbai.name}`}
-                    {isLoading &&
-                      pendingChainId === polygonMumbai.id &&
-                      " (switching)"}
-                  </button> */}
-              {isConnected ? (
-                <button
-                  className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
-                  onClick={onClickSignIn as () => void}
-                >
-                  Sign In
-                </button>
-              ) : null}
-            </div>
-          ) : null}
-          {showConnection ? (
-            <div className="text-center">
-              {address ? (
-                <p className="mb-4">
-                  <code className="block rounded bg-black/20 p-4 text-white">
-                    {address}
-                  </code>
-                </p>
-              ) : null}
-              <Button
-                className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
-                onClick={() => (!isConnected ? connect() : disconnect())}
-              >
-                {!isConnected ? "Connect Wallet" : "Disconnect"}
-              </Button>
-            </div>
-          ) : null}
+          <ConnectButton />
         </Stack>
       </Flex>
 

src/env.mjs

@@ -30,6 +30,7 @@ const server = z.object({
  */
 const client = z.object({
   // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
+  NEXT_PUBLIC_WALLET_CONNECT_ID: z.string().min(1),
 });
 
 /**
@@ -44,9 +45,8 @@ const processEnv = {
   NODE_ENV: process.env.NODE_ENV,
   NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
   NEXTAUTH_URL: process.env.NEXTAUTH_URL,
-  // DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
-  // DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
   // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
+  NEXT_PUBLIC_WALLET_CONNECT_ID: process.env.NEXT_PUBLIC_WALLET_CONNECT_ID,
 };
 
 // Don't touch the part below

src/pages/_app.tsx

@@ -1,22 +1,29 @@
 // Imports
 // ========================================================
+import React from "react";
+
 import { type AppType } from "next/app";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { api } from "@/utils/api";
+
 import "@/styles/globals.css";
+
+import "@rainbow-me/rainbowkit/styles.css";
+
+import { RainbowKitSiweNextAuthProvider } from "@rainbow-me/rainbowkit-siwe-next-auth";
+import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+
 // SIWE Integration
 import { WagmiConfig, createConfig, configureChains } from "wagmi";
 import { polygonMumbai } from "wagmi/chains";
 import { publicProvider } from "wagmi/providers/public";
 import { ChakraProvider } from "@chakra-ui/react";
 import { theme } from "@/theme";
-import { MetaMaskConnector } from "wagmi/connectors/metaMask";
 import { MDXProvider } from "@mdx-js/react";
 import Components from "@/components/mdx/Components";
-import { InjectedConnector } from "wagmi/connectors/injected";
-import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
 import Layout from "@/components/Layout";
+import { env } from "@/env.mjs";
 
 // Config
 // ========================================================
@@ -28,27 +35,15 @@ const { chains, publicClient, webSocketPublicClient } = configureChains(
   [publicProvider()],
 );
 
-/**
- * Configure publicProvider and allow for auto wallet connection
- */
-const config = createConfig({
+const { connectors } = getDefaultWallets({
+  appName: "D_D Academy",
+  projectId: env.NEXT_PUBLIC_WALLET_CONNECT_ID,
+  chains,
+});
+
+const wagmiConfig = createConfig({
   autoConnect: true,
-  connectors: [
-    new MetaMaskConnector({ chains }),
-    new InjectedConnector({
-      chains,
-      options: {
-        name: "Injected",
-        shimDisconnect: true,
-      },
-    }),
-    new CoinbaseWalletConnector({
-      chains,
-      options: {
-        appName: "Developer DAO Academy",
-      },
-    }),
-  ],
+  connectors,
   publicClient,
   webSocketPublicClient,
 });
@@ -61,13 +56,19 @@ const MyApp: AppType<{ session: Session | null }> = ({
 }) => {
   return (
     <ChakraProvider theme={theme}>
-      <WagmiConfig config={config}>
-        <SessionProvider session={session} refetchInterval={0}>
-          <MDXProvider components={Components}>
-            <Layout>
-              <Component {...pageProps} />
-            </Layout>
-          </MDXProvider>
+      <WagmiConfig config={wagmiConfig}>
+        <SessionProvider refetchInterval={0} session={session}>
+          <RainbowKitSiweNextAuthProvider>
+            <RainbowKitProvider chains={chains}>
+              <React.StrictMode>
+                <MDXProvider components={Components}>
+                  <Layout>
+                    <Component {...pageProps} />
+                  </Layout>
+                </MDXProvider>
+              </React.StrictMode>
+            </RainbowKitProvider>
+          </RainbowKitSiweNextAuthProvider>
         </SessionProvider>
       </WagmiConfig>
     </ChakraProvider>