7 connect wallet

frontend/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@coinbase/onchainkit": "^0.23.4",
+    "@rainbow-me/rainbowkit": "^2.1.2",
     "next": "^14.2.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

frontend/src/components/LoadingIndicator copy.tsx

@@ -0,0 +1,7 @@
+export default function ErrorIndicator() {
+    return (
+        <div className="p-8 bg-orange-800 border-orange-400 border-4 rounded-lg">
+            Error
+        </div>
+    )
+}

frontend/src/components/MainFooter.tsx

@@ -0,0 +1,9 @@
+export default function MainFooter() {
+    console.debug("MainFooter");
+    return (
+        <footer className="mt-16 p-8 flex justify-center w-full border-purple-100 dark:border-purple-950 border-t-2">
+            Made with <span className="animate-pulse">💜</span> by&nbsp;<a href="https://elimu.ai" className="text-purple-600">elimu.ai</a>, 
+            powered by&nbsp;<a href="https://nouns.wtf" className="text-purple-600">Nouns ⌐◨-◨</a>
+        </footer>
+    )
+}

frontend/src/components/MainHeader.tsx

@@ -0,0 +1,28 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import '@rainbow-me/rainbowkit/styles.css';
+
+export default function MainHeader() {
+    console.debug("MainHeader");
+    return (
+        <>
+            <header className="py-8 px-4 sm:px-8 md:px-16 lg:px-32 xl:px-64 flex border-purple-50 dark:border-purple-950 border-b-2 mb-16">
+                <div className="flex w-1/2 sm:w-2/5 md:1/3 lg:1/4 xl:1/5 text-4xl">
+                    <Link href="/">
+                        <Image className='mx-auto' src="/logo.svg" alt="Logo" width={160} height={160} />
+                    </Link>
+                    <span className="mt-10 -ml-32 -rotate-45 drop-shadow-md">
+                        <div className="animate-bounce">
+                            <Link href="/">&nbsp;⌐◨-◨</Link>
+                        </div>
+                    </span>
+                </div>
+
+                <div className="flex flex-row-reverse items-center w-full text-4xl">
+                    <ConnectButton />
+                </div>
+            </header>
+        </>
+    )
+}

frontend/src/components/Sponsorships.tsx

@@ -5,24 +5,31 @@ import LoadingIndicator from "./LoadingIndicator";
 import { Address, formatEther } from "viem";
 import SponsorshipSummary from "./SponsorshipSummary";
 import Link from "next/link";
+import ErrorIndicator from "./LoadingIndicator copy";
 
 export default function Sponsorships() {
     console.debug("Sponsorships");
 
     const deploymentAddress: Address = deployed_addresses["SponsorshipQueueModule#SponsorshipQueue"] as `0x${string}`;
     console.debug("deploymentAddress:", deploymentAddress);
-    const { isLoading, data } = useReadContract({
+    const { isLoading, isError, error, data } = useReadContract({
         abi,
         address: deploymentAddress,
         functionName: "getQueueCount"
     });
     console.debug("isLoading:", isLoading);
+    console.debug("isError:", isError);
+    console.debug("error:", error);
     console.debug("data:", data);
 
     if (isLoading) {
         return <LoadingIndicator />
     }
 
+    if (isError) {
+        return <ErrorIndicator />
+    }
+
     const queueCount = Number(data);
     console.debug("queueCount:", queueCount);
     if (queueCount == 0) {
@@ -33,7 +40,7 @@ export default function Sponsorships() {
         <>
             {Array(queueCount).fill(1).map((el, i) =>
                 <Link key={i} href={`/sponsorships/${i + 1}`}>
-                    <div className="p-4 text-2xl bg-purple-200 dark:bg-purple-950 rounded-lg border-purple-400 border-r-4 border-b-4 hover:border-r-8 hover:border-b-8 hover:-translate-y-1">
+                    <div className="skew-y-3 p-4 text-2xl bg-purple-200 dark:bg-purple-950 rounded-lg border-purple-400 border-r-4 border-b-4 hover:border-r-8 hover:border-b-8 hover:-translate-y-1">
                         <SponsorshipSummary queueIndex={i} />
                     </div>
                 </Link>

frontend/src/pages/_app.tsx

@@ -1,16 +1,47 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
-import { WagmiProvider } from "wagmi";
-import { config } from "@/config";
+import { WagmiProvider, createConfig, http } from "wagmi";
+import { base, baseSepolia } from 'wagmi/chains'
+// import { wagmiConfig } from "@/config";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { RainbowKitProvider, getDefaultConfig, darkTheme, connectorsForWallets } from "@rainbow-me/rainbowkit";
+import { metaMaskWallet, coinbaseWallet } from "@rainbow-me/rainbowkit/wallets";
 
+// Rainbowkit 🌈
+const connectors = connectorsForWallets(
+  [
+    {
+      groupName: "Recommended",
+      wallets: [coinbaseWallet, metaMaskWallet]
+    }
+  ],
+  {
+    appName: "Sponsors 🫶🏽",
+    projectId: "YOUR_PROJECT_ID",
+  }
+);
+
+// wagmi
 const queryClient = new QueryClient();
+export const wagmiConfig = createConfig({
+  connectors: connectors,
+  chains: [
+    base,
+    baseSepolia
+  ],
+  transports: {
+    [base.id]: http(),
+    [baseSepolia.id]: http()
+  },
+});
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <WagmiProvider config={config}>
+    <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <Component {...pageProps} />
+        <RainbowKitProvider initialChain={baseSepolia} theme={darkTheme({...darkTheme.accentColors.purple})}>
+          <Component {...pageProps} />
+        </RainbowKitProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

frontend/src/pages/_document.tsx

@@ -1,15 +1,11 @@
-import Footer from "@/components/Footer";
-import Header from "@/components/Header";
 import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
     <Html lang="en">
       <Head />
       <body>
-        <Header />
         <Main />
-        <Footer />
         <NextScript />
       </body>
     </Html>

frontend/src/pages/index.tsx

@@ -1,3 +1,5 @@
+import MainFooter from "@/components/MainFooter";
+import MainHeader from "@/components/MainHeader";
 import SponsorshipSummary from "@/components/SponsorshipSummary";
 import Sponsorships from "@/components/Sponsorships";
 import Head from "next/head";
@@ -14,8 +16,9 @@ export default function Home() {
           <link rel="preconnect" href="https://fonts.gstatic.com" />
           <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&display=swap" rel="stylesheet" />
       </Head>
+      <MainHeader />
       <main
-        className={`flex flex-col items-center justify-between p-24`}
+        className={`flex flex-col items-center px-4 sm:px-8 md:px-16 lg:px-32 xl:px-64`}
         >
         <h1 className="relative flex place-items-center text-8xl">
           Sponsors 🫶🏽
@@ -51,6 +54,7 @@ export default function Home() {
           <Sponsorships />
         </div>
       </main>
+      <MainFooter />
     </>
   );
 }

frontend/src/pages/sponsorships/[queueNumber].tsx

@@ -1,3 +1,5 @@
+import MainFooter from "@/components/MainFooter";
+import MainHeader from "@/components/MainHeader";
 import SponsorshipSummary from "@/components/SponsorshipSummary";
 import Head from "next/head";
 import { useRouter } from "next/router";
@@ -19,8 +21,9 @@ export default function SponsorshipDetails() {
           <link rel="preconnect" href="https://fonts.gstatic.com" />
           <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&display=swap" rel="stylesheet" />
       </Head>
+      <MainHeader />
       <main
-        className={`flex flex-col items-center p-24`}
+        className={`flex flex-col items-center px-4 sm:px-8 md:px-16 lg:px-32 xl:px-64`}
         >
         <h1 className="relative flex place-items-center text-4xl">
           Sponsorship Details
@@ -30,6 +33,7 @@ export default function SponsorshipDetails() {
           <SponsorshipSummary queueIndex={queueIndex} />
         </div>
       </main>
+      <MainFooter />
     </>
   );
 }