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

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

Hide file tree

Showing 6 changed files with 112 additions and 33 deletions.
diff --git a/packages/interface/src/components/ConnectButton.tsx b/packages/interface/src/components/ConnectButton.tsx
@@ -1,14 +1,13 @@
 import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
 import Image from "next/image";
-import { createBreakpoint } from "react-use";
+import { useMemo } from "react";
 
 import { config } from "~/config";
+import { useIsMobile } from "~/hooks/useIsMobile";
 
 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,9 +30,14 @@ const ConnectedDetails = ({ openAccountModal, account, isMobile }: IConnectedDet
   );
 };
 
-export const ConnectButton = (): JSX.Element => {
-  const breakpoint = useBreakpoint();
-  const isMobile = breakpoint === "S";
+interface IConnectButtonProps {
+  showMobile: boolean;
+}
+
+export const ConnectButton = ({ showMobile }: IConnectButtonProps): JSX.Element => {
+  const isMobile = useIsMobile();
+
+  const show = useMemo(() => (showMobile && isMobile) || (!showMobile && !isMobile), [isMobile, showMobile]);
 
   return (
     <RainbowConnectButton.Custom>
@@ -44,6 +48,7 @@ export const ConnectButton = (): JSX.Element => {
 
         return (
           <div
+            className={show ? "" : "hidden"}
             {...(!mounted && {
               "aria-hidden": true,
               style: {
@@ -57,7 +62,7 @@ export const ConnectButton = (): JSX.Element => {
               if (!connected) {
                 return (
                   <Button suppressHydrationWarning variant="secondary" onClick={openConnectModal}>
-                    {isMobile ? "Connect" : "Connect wallet"}
+                    <p>Connect wallet</p>
                   </Button>
                 );
               }
@@ -70,7 +75,7 @@ export const ConnectButton = (): JSX.Element => {
                 );
               }
 
-              return <ConnectedDetails account={account} isMobile={isMobile} openAccountModal={openAccountModal} />;
+              return <ConnectedDetails account={account} isMobile={false} openAccountModal={openAccountModal} />;
             })()}
           </div>
         );

diff --git a/packages/interface/src/components/Header.tsx b/packages/interface/src/components/Header.tsx
@@ -122,7 +122,7 @@ const Header = ({ navLinks, pollId = "" }: IHeaderProps) => {
             onClick={handleChangeTheme}
           />
 
-          <ConnectButton />
+          <ConnectButton showMobile={false} />
         </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>}
+
+      {(roundState === ERoundState.APPLICATION || roundState === ERoundState.VOTING) && <ConnectButton showMobile />}
+
+      {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";
@@ -16,38 +19,51 @@ const HomePage = (): JSX.Element => {
   const { isRegistered } = useMaci();
   const isAdmin = useIsAdmin();
   const { rounds } = useRound();
+  const singleRound = useMemo(() => {
+    if (rounds && rounds.length === 1) {
+      return rounds[0];
+    }
+
+    return undefined;
+  }, [rounds]);
 
   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 && <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>}
+          <ConnectButton showMobile />
 
-        {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>