Merge pull request #20 from Developer-DAO/feat/custom-connect-button

Feat/custom-connect-button

apps/academy/package.json

@@ -23,8 +23,10 @@
     "@trpc/client": "^10.38.1",
     "@trpc/next": "^10.38.1",
     "@trpc/server": "^10.38.1",
+    "@types/lodash.merge": "^4.6.7",
     "clsx": "2.0.0",
     "database": "workspace:*",
+    "lodash.merge": "^4.6.2",
     "next": "13.4.12",
     "next-auth": "^4.23.1",
     "next-seo": "^6.1.0",

apps/academy/src/components/ConnectButton.tsx

@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import { ConnectButton as RainbowkitConnectButton } from "@rainbow-me/rainbowkit";
+import Image from "next/image";
+import { Button } from "ui/components/ui/button";
+
+export const ConnectButton = () => {
+  return (
+    <RainbowkitConnectButton.Custom>
+      {({
+        account,
+        chain,
+        openAccountModal,
+        openChainModal,
+        openConnectModal,
+        authenticationStatus,
+        mounted,
+      }) => {
+        const ready = mounted && authenticationStatus !== "loading";
+        const connected =
+          ready &&
+          account &&
+          chain &&
+          (!authenticationStatus || authenticationStatus === "authenticated");
+
+        if (!ready) {
+          return (
+            <Button className="button-rounded" disabled>
+              loading
+            </Button>
+          );
+        }
+
+        return (
+          <>
+            {!connected ? (
+              <Button
+                onClick={openConnectModal}
+                className="button-rounded hover:bg-[var(--button-secondary-dark)]"
+              >
+                Connect
+              </Button>
+            ) : chain.unsupported ? (
+              <Button
+                onClick={openChainModal}
+                className="button-rounded hover:bg-[var(--button-accent-dark)]"
+              >
+                Switch Network
+              </Button>
+            ) : (
+              <button onClick={openAccountModal}>
+                <Image
+                  src={account.ensAvatar !== undefined ? account.ensAvatar : "/DD_NFT_avatar.png"}
+                  alt="account avatar"
+                  width={50}
+                  height={50}
+                  className="rounded-full border-2 border-black p-0 opacity-80 shadow-sm"
+                />
+              </button>
+            )}
+          </>
+        );
+      }}
+    </RainbowkitConnectButton.Custom>
+  );
+};

apps/academy/src/components/Header.tsx

@@ -1,6 +1,7 @@
-import { ConnectButton } from "@rainbow-me/rainbowkit";
 import type { FunctionComponent } from "react";
-import { Container, type NavItem, TopBar } from "ui";
+import { type NavItem, TopBar } from "ui";
+
+import { ConnectButton } from "@/components/ConnectButton";
 
 const sampleMenus: NavItem[] = [
   {
@@ -23,11 +24,9 @@ const sampleMenus: NavItem[] = [
 const PageHeader: FunctionComponent = () => {
   // return <Header {...links} />;
   return (
-    <header className="py-10">
-      <Container className="flex justify-between">
-        <TopBar menus={sampleMenus} />
-        <ConnectButton />
-      </Container>
+    <header className="main-container flex items-center justify-between py-10">
+      <TopBar menus={sampleMenus} />
+      <ConnectButton />
     </header>
   );
 };

apps/academy/src/components/Layout.tsx

@@ -1,9 +1,8 @@
 import type { FunctionComponent, PropsWithChildren } from "react";
+import { Footer } from "ui";
 
 import { Header } from "@/components/Header";
 
-import { Footer } from "./Footer";
-
 export const Layout: FunctionComponent<PropsWithChildren> = ({ children }) => {
   return (
     <>

apps/academy/src/page-stories/Home.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Footer } from "@/components/Footer";
 import { Header } from "@/components/Header";
 import Home from "@/pages/index";
 
@@ -11,7 +10,6 @@ const meta: Meta<typeof Home> = {
       <>
         <Header />
         <Story />
-        <Footer />
       </>
     ),
   ],

apps/academy/src/pages/_app.tsx

@@ -1,13 +1,17 @@
+import "@/styles.css";
 import "ui/styles.css";
 import "@rainbow-me/rainbowkit/styles.css";
 
 import {
   connectorsForWallets,
+  darkTheme,
   getDefaultWallets,
+  lightTheme,
   RainbowKitProvider,
 } from "@rainbow-me/rainbowkit";
 import { ledgerWallet, trustWallet, zerionWallet } from "@rainbow-me/rainbowkit/wallets";
 import { RainbowKitSiweNextAuthProvider } from "@rainbow-me/rainbowkit-siwe-next-auth";
+import merge from "lodash.merge";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
@@ -54,6 +58,38 @@ const wagmiConfig = createConfig({
   publicClient,
 });
 
+const academyLightTheme = merge(
+  lightTheme({
+    overlayBlur: "small",
+  }),
+  {
+    colors: {
+      accentColor: "var(--button-secondary-dark);",
+      // modalBackground: "var(--gray-white);",
+      modalBackdrop: "gradient-neutral",
+    },
+    fonts: {
+      body: "var(--font-poppins);",
+    },
+  },
+);
+
+const academyDarkTheme = merge(
+  darkTheme({
+    overlayBlur: "small",
+  }),
+  {
+    colors: {
+      accentColor: "var(--button-secondary);",
+      modalBackground: "var(--academy-card-dark);",
+      modalBackdrop: "gradient-neutral",
+    },
+    fonts: {
+      body: "var(--font-poppins);",
+    },
+  },
+);
+
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
@@ -70,13 +106,24 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout<{ session: Session |
     <WagmiConfig config={wagmiConfig}>
       <SessionProvider refetchInterval={0} session={pageProps.session}>
         <RainbowKitSiweNextAuthProvider>
-          <RainbowKitProvider chains={chains} initialChain={polygonMumbai}>
+          <RainbowKitProvider
+            chains={chains}
+            initialChain={polygonMumbai}
+            appInfo={{
+              appName: "Developer DAO Academy",
+              learnMoreUrl: "https://academy.developerdao.com",
+            }}
+            theme={{
+              lightMode: academyLightTheme,
+              darkMode: academyDarkTheme,
+            }}
+          >
             <ThemeProvider attribute="class">
               <DefaultSeo {...SEO} />
               <Head>
                 <meta
                   name="viewport"
-                  content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
+                  content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover"
                 />
               </Head>
               <Layout>{getLayout(<Component {...pageProps} />)}</Layout>

apps/academy/src/pages/index.tsx

@@ -1,5 +1,4 @@
 import type { ReactElement } from "react";
-import { Container } from "ui";
 
 import PageSeoLayout from "@/components/PageSeoLayout";
 import type { NextPageWithLayout } from "@/pages/_app";
@@ -17,16 +16,14 @@ const Home: NextPageWithLayout = () => {
   console.log({ ExampleHelloData, ExampleHelloIsLoading });
 
   return (
-    <Container>
-      <main className="pb-8 pt-16 sm:pt-24">
-        <h1 className="mx-auto text-center text-6xl font-extrabold text-neutral-900 dark:text-white sm:text-7xl lg:text-8xl">
-          Website SSR
-          <span className="block bg-gradient-to-r from-red-500 to-blue-500 bg-clip-text py-8 text-transparent">
-            Turbo Monorepo
-          </span>
-        </h1>
-      </main>
-    </Container>
+    <main className="main-container pb-8 pt-16 sm:pt-24">
+      <h1 className="mx-auto text-center text-6xl font-extrabold text-neutral-900 dark:text-white sm:text-7xl lg:text-8xl">
+        Website SSR
+        <span className="block bg-gradient-to-r from-red-500 to-blue-500 bg-clip-text py-8 text-transparent">
+          Turbo Monorepo
+        </span>
+      </h1>
+    </main>
   );
 };
 

apps/academy/src/styles.css

@@ -1,3 +1,32 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.text-bttf {
+  @apply text-center text-lg leading-[91%] tracking-[1px] transition-colors;
+  font-family: var(--font-future);
+}
+
+.academy-grid {
+  @apply grid h-screen grid-cols-1 text-white  md:grid-cols-2;
+}
+
+.academy-grid .academy-grid-col-1 {
+  @apply flex flex-col items-center justify-between px-4 py-6 text-center;
+}
+
+.academy-grid .text-bttf-lg {
+  @apply text-bttf mb-12 mt-10 h-full uppercase;
+}
+
+.dd-nft {
+  @apply relative py-6 pr-6;
+  background:
+    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+    url("/D_D_NFT_image.png"),
+    var(--academy-bg-dark) -406.375px -146px / 219.132% 181.543% no-repeat;
+  box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.25);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}

packages/ui/src/components/Banners/LearnWeb3Banner.tsx

@@ -22,7 +22,7 @@ export const LearnWeb3Banner: FC<HomePageBannerProps> = ({ href }) => {
           </p>
         </CardContent>
         <CardContent className=" flex justify-center">
-          <Button asChild className="button-rounded bg-[#44AF96] text-black">
+          <Button asChild className="button-rounded text-black">
             <NextLink href={href}>get started</NextLink>
           </Button>
         </CardContent>

packages/ui/src/components/Banners/PartnerBanner.tsx

@@ -24,8 +24,8 @@ export const PartnerBanner: FC<PartnerBannerProps> = ({ href /** imgSrc*/ }) =>
           </p>
         </CardContent>
         <CardContent className=" flex justify-center">
-          <Button asChild className="button-rounded bg-[#44AF96] text-black">
-            <NextLink href={href}>reach out</NextLink>
+          <Button asChild className="button-rounded text-black">
+            <NextLink href={href}>reach out!</NextLink>
           </Button>
         </CardContent>
       </div>

packages/ui/src/components/Footer/Footer.tsx

@@ -14,7 +14,7 @@ interface FooterLinks {
 }
 
 const links: readonly FooterLinks[] = [
-  { name: "Academy", href: "/" },
+  { name: "Academy", href: "https://academy.developerdao.com" },
   { name: "Feedback", href: "#Feedbacks" },
   { name: "Newsletter", href: "#Newsletter" },
 ];
@@ -28,7 +28,7 @@ const socials: readonly SocialLinks[] = [
 export const Footer = () => {
   return (
     <footer>
-      <div className="footer">
+      <div className="footer main-container">
         <nav aria-label="social">
           {socials.map((social) => {
             const Icon = Icons[social.icon];