feat: update single round UI and slightly update the mobile UI

privacy-scaling-explorations · Dec 2, 2024 · 3486619 · 3486619
1 parent 18b887a
commit 3486619
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 72 deletions.
diff --git a/packages/interface/src/components/ConnectButton.tsx b/packages/interface/src/components/ConnectButton.tsx
@@ -1,14 +1,11 @@
 import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
 import Image from "next/image";
-import { createBreakpoint } from "react-use";
 
 import { config } from "~/config";
 
 import { Button } from "./ui/Button";
 import { Chip } from "./ui/Chip";
 
-const useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });
-
 interface IConnectedDetailsProps {
   account: { address: string; displayName: string; ensName?: string };
   openAccountModal: () => void;
@@ -31,50 +28,45 @@ const ConnectedDetails = ({ openAccountModal, account, isMobile }: IConnectedDet
   );
 };
 
-export const ConnectButton = (): JSX.Element => {
-  const breakpoint = useBreakpoint();
-  const isMobile = breakpoint === "S";
-
-  return (
-    <RainbowConnectButton.Custom>
-      {({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted, authenticationStatus }) => {
-        const ready = mounted && authenticationStatus !== "loading";
-        const connected =
-          ready && account && chain && (!authenticationStatus || authenticationStatus === "authenticated");
+export const ConnectButton = (): JSX.Element => (
+  <RainbowConnectButton.Custom>
+    {({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted, authenticationStatus }) => {
+      const ready = mounted && authenticationStatus !== "loading";
+      const connected =
+        ready && account && chain && (!authenticationStatus || authenticationStatus === "authenticated");
 
-        return (
-          <div
-            {...(!mounted && {
-              "aria-hidden": true,
-              style: {
-                opacity: 0,
-                pointerEvents: "none",
-                userSelect: "none",
-              },
-            })}
-          >
-            {(() => {
-              if (!connected) {
-                return (
-                  <Button suppressHydrationWarning variant="secondary" onClick={openConnectModal}>
-                    {isMobile ? "Connect" : "Connect wallet"}
-                  </Button>
-                );
-              }
+      return (
+        <div
+          {...(!mounted && {
+            "aria-hidden": true,
+            style: {
+              opacity: 0,
+              pointerEvents: "none",
+              userSelect: "none",
+            },
+          })}
+        >
+          {(() => {
+            if (!connected) {
+              return (
+                <Button suppressHydrationWarning variant="secondary" onClick={openConnectModal}>
+                  <p>Connect wallet</p>
+                </Button>
+              );
+            }
 
-              if (chain.unsupported ?? ![Number(config.network.id)].includes(chain.id)) {
-                return (
-                  <Chip color="disabled" onClick={openChainModal}>
-                    Wrong network
-                  </Chip>
-                );
-              }
+            if (chain.unsupported ?? ![Number(config.network.id)].includes(chain.id)) {
+              return (
+                <Chip color="disabled" onClick={openChainModal}>
+                  Wrong network
+                </Chip>
+              );
+            }
 
-              return <ConnectedDetails account={account} isMobile={isMobile} openAccountModal={openAccountModal} />;
-            })()}
-          </div>
-        );
-      }}
-    </RainbowConnectButton.Custom>
-  );
-};
+            return <ConnectedDetails account={account} isMobile={false} openAccountModal={openAccountModal} />;
+          })()}
+        </div>
+      );
+    }}
+  </RainbowConnectButton.Custom>
+);
diff --git a/packages/interface/src/components/Header.tsx b/packages/interface/src/components/Header.tsx
@@ -7,6 +7,7 @@ import { useTheme } from "next-themes";
 import { type ComponentPropsWithRef, useState, useCallback, useMemo } from "react";
 
 import { useBallot } from "~/contexts/Ballot";
+import { useIsMobile } from "~/hooks/useIsMobile";
 import { useRoundState } from "~/utils/state";
 import { ERoundState } from "~/utils/types";
 
@@ -68,6 +69,8 @@ const Header = ({ navLinks, pollId = "" }: IHeaderProps) => {
 
   const ballot = useMemo(() => getBallot(pollId), [pollId, getBallot]);
 
+  const isMobile = useIsMobile();
+
   const handleChangeTheme = useCallback(() => {
     setTheme(theme === "light" ? "dark" : "light");
   }, [theme, setTheme]);
@@ -122,7 +125,7 @@ const Header = ({ navLinks, pollId = "" }: IHeaderProps) => {
             onClick={handleChangeTheme}
           />
 
-          <ConnectButton />
+          {!isMobile && <ConnectButton />}
         </div>
 
         <MobileMenu isOpen={isOpen} navLinks={navLinks} />

diff --git a/packages/interface/src/components/Info.tsx b/packages/interface/src/components/Info.tsx
@@ -18,7 +18,7 @@ const InfoContainer = createComponent(
     variants: {
       size: {
         sm: "flex-col",
-        default: "flex-col max-lg:w-full lg:flex-row",
+        default: "flex-col max-lg:w-full lg:flex-row lg:w-fit",
       },
     },
   }),
@@ -73,7 +73,7 @@ export const Info = ({
   ];
 
   return (
-    <div className="w-full">
+    <div className="flex w-full justify-center">
       <InfoContainer size={size}>
         {showRoundInfo && <RoundInfo roundId={round?.roundId ?? ""} />}
 

diff --git a/packages/interface/src/components/SingleRoundHome.tsx b/packages/interface/src/components/SingleRoundHome.tsx
@@ -0,0 +1,50 @@
+import { useAccount } from "wagmi";
+
+import { ConnectButton } from "~/components/ConnectButton";
+import { Info } from "~/components/Info";
+import { JoinButton } from "~/components/JoinButton";
+import { Button } from "~/components/ui/Button";
+import { Heading } from "~/components/ui/Heading";
+import { useMaci } from "~/contexts/Maci";
+import { useIsMobile } from "~/hooks/useIsMobile";
+import { useRoundState } from "~/utils/state";
+import { ERoundState, type IRoundData } from "~/utils/types";
+
+interface ISingleRoundHome {
+  round: IRoundData;
+}
+
+export const SingleRoundHome = ({ round }: ISingleRoundHome): JSX.Element => {
+  const { isConnected } = useAccount();
+  const { isRegistered } = useMaci();
+  const isMobile = useIsMobile();
+  const roundState = useRoundState({ pollId: round.pollId });
+
+  return (
+    <div className="flex h-auto w-screen flex-col items-center justify-center gap-4 bg-blue-50 px-2 pb-4 sm:h-[90vh] dark:bg-black">
+      <Heading className="mb-0 mt-4 max-w-screen-lg text-center sm:mt-0" size="6xl">
+        {round.roundId}
+      </Heading>
+
+      <p className="text-gray-400">{round.description}</p>
+
+      <Button size="auto" variant={roundState === ERoundState.RESULTS ? "tertiary" : "secondary"}>
+        <a href={`/rounds/${round.pollId}`}>View Projects</a>
+      </Button>
+
+      {roundState === ERoundState.RESULTS && (
+        <Button size="auto" variant="primary">
+          <a href={`/rounds/${round.pollId}`}>View Results</a>
+        </Button>
+      )}
+
+      {!isConnected && !isMobile && <p className="text-gray-400">Connect your wallet to get started.</p>}
+
+      {isMobile && (roundState === ERoundState.APPLICATION || roundState === ERoundState.VOTING) && <ConnectButton />}
+
+      {isConnected && !isRegistered && <JoinButton />}
+
+      <Info showAppState pollId={round.pollId} showBallot={false} showRoundInfo={false} size="default" />
+    </div>
+  );
+};
diff --git a/packages/interface/src/hooks/useIsMobile.ts b/packages/interface/src/hooks/useIsMobile.ts
@@ -0,0 +1,8 @@
+import { createBreakpoint } from "react-use";
+
+export function useIsMobile(): boolean {
+  const useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });
+  const breakpoint = useBreakpoint();
+
+  return breakpoint === "S";
+}
diff --git a/packages/interface/src/pages/index.tsx b/packages/interface/src/pages/index.tsx
@@ -1,6 +1,9 @@
+import { useMemo } from "react";
 import { useAccount } from "wagmi";
 
+import { ConnectButton } from "~/components/ConnectButton";
 import { JoinButton } from "~/components/JoinButton";
+import { SingleRoundHome } from "~/components/SingleRoundHome";
 import { Button } from "~/components/ui/Button";
 import { Heading } from "~/components/ui/Heading";
 import { config } from "~/config";
@@ -9,45 +12,61 @@ import { useRound } from "~/contexts/Round";
 import { FAQList } from "~/features/home/components/FaqList";
 import { RoundsList } from "~/features/rounds/components/RoundsList";
 import { useIsAdmin } from "~/hooks/useIsAdmin";
+import { useIsMobile } from "~/hooks/useIsMobile";
 import { Layout } from "~/layouts/DefaultLayout";
 
 const HomePage = (): JSX.Element => {
   const { isConnected } = useAccount();
   const { isRegistered } = useMaci();
   const isAdmin = useIsAdmin();
   const { rounds } = useRound();
+  const singleRound = useMemo(() => {
+    if (rounds && rounds.length === 1) {
+      return rounds[0];
+    }
+
+    return undefined;
+  }, [rounds]);
+
+  const isMobile = useIsMobile();
 
   return (
     <Layout type="home">
-      <div className="flex h-auto w-screen flex-col items-center justify-center gap-4 bg-blue-50 px-2 sm:h-[90vh] dark:bg-black">
-        <Heading className="mt-4 max-w-screen-lg text-center sm:mt-0" size="6xl">
-          {config.eventName}
-        </Heading>
+      {singleRound && <SingleRoundHome round={singleRound} />}
+
+      {!singleRound && (
+        <div className="flex h-auto w-screen flex-col items-center justify-center gap-4 bg-blue-50 px-2 pb-4 sm:h-[90vh] dark:bg-black">
+          <Heading className="mt-4 max-w-screen-lg text-center sm:mt-0" size="6xl">
+            {config.eventName}
+          </Heading>
+
+          <Heading className="max-w-screen-lg text-center" size="3xl">
+            {config.eventDescription}
+          </Heading>
 
-        <Heading className="max-w-screen-lg text-center" size="3xl">
-          {config.eventDescription}
-        </Heading>
+          {!isConnected && !isMobile && <p className="text-gray-400">Connect your wallet to get started.</p>}
 
-        {!isConnected && <p className="text-gray-400">Connect your wallet to get started.</p>}
+          {isMobile && <ConnectButton />}
 
-        {isConnected && !isRegistered && <JoinButton />}
+          {isConnected && !isRegistered && <JoinButton />}
 
-        {isConnected && isAdmin && (
-          <div className="flex flex-col gap-4">
-            <p className="text-gray-400">Configure and deploy your contracts to get started.</p>
+          {isConnected && isAdmin && (
+            <div className="flex flex-col gap-4">
+              <p className="text-center text-gray-400">Configure and deploy your contracts to get started.</p>
 
-            <Button size="auto" variant="primary">
-              <a href="/coordinator">Get Started</a>
-            </Button>
-          </div>
-        )}
+              <Button size="auto" variant="primary">
+                <a href="/coordinator">Get Started</a>
+              </Button>
+            </div>
+          )}
 
-        {isConnected && !isAdmin && rounds && rounds.length === 0 && (
-          <p className="text-gray-400">There are no rounds deployed.</p>
-        )}
+          {isConnected && !isAdmin && rounds && rounds.length === 0 && (
+            <p className="text-gray-400">There are no rounds deployed.</p>
+          )}
 
-        {rounds && rounds.length > 0 && <RoundsList />}
-      </div>
+          {rounds && rounds.length > 1 && <RoundsList />}
+        </div>
+      )}
 
       <FAQList />
     </Layout>