Config updates

package.json

@@ -18,22 +18,22 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@rainbow-me/rainbowkit": "^2.2.8",
     "@tailwindcss/postcss": "^4.0.6",
-    "@tanstack/react-query": "^5.66.0",
+    "@tanstack/react-query": "^5.66.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "connectkit": "^1.8.2",
     "gql.tada": "^1.8.10",
     "graphql-request": "^7.1.2",
     "next": "15.1.7",
     "phosphor-react": "^1.4.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7",
     "urql": "^4.2.1",
-    "viem": "^2.23.2",
-    "wagmi": "^2.14.11",
+    "viem": "^2.31.7",
+    "wagmi": "^2.15.6",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

src/app/cohort-selection/page.tsx

@@ -5,9 +5,13 @@ import { TopSection } from "@/components/cohort-page-components/top-section";
 
 export default function CohortSelectionPage() {
   return (
-    <div className="min-h-screen my-20 md:pt-20 pt-4 space-y-16 max-w-[760px] mx-auto px-4">
-      <TopSection />
-      <CohortSelectionTabs />
+    <div className="min-h-screen my-20 md:pt-20 pt-4 space-y-16">
+      <div className="max-w-[760px] mx-auto px-4">
+        <TopSection />
+      </div>
+      <div className="max-w-[1040px] mx-auto px-4">
+        <CohortSelectionTabs />
+      </div>
     </div>
   );
 }

src/app/layout.tsx

@@ -1,11 +1,34 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import "@rainbow-me/rainbowkit/styles.css";
 import { Rubik } from "next/font/google";
 import Content from "./Content";
 
 export const metadata: Metadata = {
   title: "OP Builders Dollar",
   description: "Optimistic Builders Dollar",
+  openGraph: {
+    title: "OP Builders Dollar",
+    description: "Optimistic Builders Dollar",
+    url: "https://obdollar.xyz/",
+    siteName: "OP Builders Dollar",
+    images: [
+      {
+        url: "https://obdollar.xyz/images/preview.png",
+        width: 800,
+        height: 600,
+        alt: "Optimistic Builders Dollar",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "OP Builders Dollar",
+    description: "Optimistic Builders Dollar",
+    images: ["https://obdollar.xyz/images/preview.png"],
+  },
 };
 
 const rubik = Rubik({

src/components/cohort-page-components/eligible-projects.tsx

@@ -10,13 +10,13 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@radix-ui/react-tooltip";
-import { useModal } from "connectkit";
+import { useChainModal } from "@rainbow-me/rainbowkit";
 import { CheckCircle, SmileySad, ThumbsUp } from "phosphor-react";
 import { useState } from "react";
 import { useAccount } from "wagmi";
 import { AccountName } from "../account-name";
 import { LoadingTxModal } from "../mint-page-components/loading-tx-modal";
-import { ProjectCard } from "../project-card";
+import { ProjectCardWithMetadata } from "../project-card-with-metadata";
 import { Button } from "../ui/button";
 
 export const EligibleProjects = () => {
@@ -35,10 +35,10 @@ export const EligibleProjects = () => {
           with membership typically lasting eight months.
         </span>
       </div>
-      <div className="grid grid-cols-4 md:grid-cols-8 gap-y-4 gap-x-6">
+      <div className="grid grid-cols-4 md:grid-cols-12 gap-y-4 gap-x-6">
         {projects.map((project) => (
           <div key={project.id} className="col-span-4">
-            <ProjectCard
+            <ProjectCardWithMetadata
               key={project.id}
               project={project}
               className="grid grid-cols-8 w-full gap-2"
@@ -48,7 +48,7 @@ export const EligibleProjects = () => {
                 projectUid={project.id as `0x${string}`}
                 projectName={project.name ?? ""}
               />
-            </ProjectCard>
+            </ProjectCardWithMetadata>
           </div>
         ))}
       </div>
@@ -143,7 +143,7 @@ const EndorseButton = ({
   projectName,
 }: EndorseButtonProps) => {
   const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-  const { setOpen } = useModal();
+  const { openChainModal } = useChainModal();
   const { address } = useAccount();
   const { isCitizen, fetching } = useCitizen();
   const { trigger, reset, txHashes, loadingMessage, error } = useEndorse({
@@ -187,7 +187,7 @@ const EndorseButton = ({
       <Button
         className={buttonStyle}
         variant="default"
-        onClick={() => setOpen(true)}
+        onClick={() => (openChainModal ? openChainModal() : () => {})}
       >
         SIGN IN TO ENDORSE
       </Button>

src/components/connect-wallet-button.tsx

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { ChainIcon } from "@/components/ui/chain-icon";
 import { useApy } from "@/hooks/use-apy";
 import { useReadObusd } from "@/hooks/use-read-obusd";
-import { ConnectKitButton, useModal } from "connectkit";
+import { ConnectButton, useChainModal } from "@rainbow-me/rainbowkit";
 import Image from "next/image";
 import Link from "next/link";
 import {
@@ -51,7 +51,7 @@ export const ConnectWalletButton = () => {
       : "0.0";
   const [open, setOpen] = useState(false);
 
-  const { openSwitchNetworks } = useModal();
+  const { openChainModal } = useChainModal();
 
   const handleMouseEnter = () => {
     if (isMobile) return;
@@ -64,85 +64,107 @@ export const ConnectWalletButton = () => {
   };
 
   return (
-    <ConnectKitButton.Custom>
-      {({ show, isConnected, isConnecting, truncatedAddress, chain }) => (
-        <>
-          {isConnected ? (
-            <div className="relative">
-              <Popover open={open} onOpenChange={setOpen}>
-                <div
-                  className="relative"
-                  onMouseEnter={handleMouseEnter}
-                  onMouseLeave={handleMouseLeave}
-                >
-                  <PopoverTrigger
-                    onClick={(e) => {
-                      !isMobile && e.preventDefault();
-                    }}
-                    className="focus:outline-none"
+    <ConnectButton.Custom>
+      {({
+        account,
+        chain,
+        openConnectModal,
+        authenticationStatus,
+        mounted,
+      }) => {
+        const ready = mounted;
+        const truncatedAddress = account?.displayName;
+        return (
+          <>
+            {ready &&
+            account &&
+            chain &&
+            (!authenticationStatus ||
+              authenticationStatus === "authenticated") ? (
+              <div className="relative">
+                <Popover open={open} onOpenChange={setOpen}>
+                  <div
+                    className="relative"
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
                   >
-                    <div className="flex items-center justify-center gap-2 border border-card-border rounded-2xl md:pl-3">
-                      <div className="hidden md:flex items-center gap-1.5">
-                        <ChainIcon id={chain?.id} size={24} />
-                        <span className="text-lg">{chain?.name}</span>
+                    <PopoverTrigger
+                      onClick={(e) => {
+                        !isMobile && e.preventDefault();
+                      }}
+                      className="focus:outline-none"
+                    >
+                      <div className="flex items-center justify-center gap-2 border border-card-border rounded-2xl md:pl-3">
+                        <div className="hidden md:flex items-center gap-1.5">
+                          <ChainIcon id={chain?.id} size={24} />
+                          <span className="text-lg">{chain?.name}</span>
+                        </div>
+                        <div className="flex items-center gap-1.5 md:bg-background text-foreground rounded-2xl py-2 px-2">
+                          {avatar && (
+                            <Image
+                              loader={() => avatar}
+                              src={avatar}
+                              alt="avatar"
+                              width={24}
+                              height={24}
+                              className="rounded-full"
+                            />
+                          )}
+                          <span>{ensName ?? truncatedAddress ?? ""}</span>
+                        </div>
                       </div>
-                      <div className="flex items-center gap-1.5 md:bg-background text-foreground rounded-2xl py-2 px-2">
-                        {avatar && (
-                          <Image
-                            loader={() => avatar}
-                            src={avatar}
-                            alt="avatar"
-                            width={24}
-                            height={24}
-                            className="rounded-full"
-                          />
-                        )}
-                        <span>{ensName ?? truncatedAddress ?? ""}</span>
-                      </div>
-                    </div>
-                  </PopoverTrigger>
-                  {/* Invisible connector between trigger and content to keep the hover functionallity working */}
-                  {open && (
-                    <div className="absolute w-full h-6 bottom-0 translate-y-full" />
-                  )}
-                </div>
-                <PopoverContent
-                  side="top"
-                  sideOffset={20}
-                  className="w-[400px] md:w-[400px] md:h-[318px] mx-5"
-                  onMouseEnter={handleMouseEnter}
-                  onMouseLeave={handleMouseLeave}
-                >
-                  <WalletAccountDetails
-                    chainId={chain?.id}
-                    chainName={chain?.name}
-                    accountIdentifier={ensName ?? truncatedAddress ?? ""}
-                    avatar={avatar ?? undefined}
-                    balance={
-                      balance?.value !== undefined
-                        ? balance.value.toString() === "0"
-                          ? "0.0"
-                          : Number(formatEther(balance.value)).toFixed(4)
-                        : ""
-                    }
-                    userYearlyYield={userYearlyYield}
-                    openSwitchNetworks={openSwitchNetworks}
-                    address={address}
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-          ) : (
-            <Button
-              onClick={isConnecting ? () => {} : show}
-              className="flex items-center gap-1.5 rounded-2xl py-2 px-6 text-lg font-normal"
-            >
-              <span>{isConnecting ? "Loading..." : "Sign in"}</span>
-            </Button>
-          )}
-        </>
-      )}
-    </ConnectKitButton.Custom>
+                    </PopoverTrigger>
+                    {/* Invisible connector between trigger and content to keep the hover functionallity working */}
+                    {open && (
+                      <div className="absolute w-full h-6 bottom-0 translate-y-full" />
+                    )}
+                  </div>
+                  <PopoverContent
+                    side="top"
+                    sideOffset={20}
+                    className="w-[400px] md:w-[400px] md:h-[318px] mx-5"
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                  >
+                    <WalletAccountDetails
+                      chainId={chain?.id}
+                      chainName={chain?.name}
+                      accountIdentifier={ensName ?? truncatedAddress ?? ""}
+                      avatar={avatar ?? undefined}
+                      balance={
+                        balance?.value !== undefined
+                          ? balance.value.toString() === "0"
+                            ? "0.0"
+                            : Number(formatEther(balance.value)).toFixed(4)
+                          : ""
+                      }
+                      userYearlyYield={userYearlyYield}
+                      openSwitchNetworks={openChainModal}
+                      address={address}
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+            ) : (
+              <Button
+                onClick={
+                  authenticationStatus === "loading"
+                    ? () => {}
+                    : openConnectModal
+                }
+                className="flex items-center gap-1.5 rounded-2xl py-2 px-6 text-lg font-normal"
+              >
+                <span>
+                  {authenticationStatus === "loading"
+                    ? "Loading..."
+                    : "Sign in"}
+                </span>
+              </Button>
+            )}
+          </>
+        );
+      }}
+    </ConnectButton.Custom>
   );
 };