Design UI updates

.env.example

@@ -34,6 +34,9 @@ NEXT_PUBLIC_WALLETCONNECT_ID=
 # What the message will say when you sign in with the wallet
 NEXT_PUBLIC_SIGN_STATEMENT="Sign in to MACI-RPGF"
 
+# Event title for the round, just for display
+NEXT_PUBLIC_EVENT_NAME="ETH GLOBAL"
+
 # Unique identifier for your applications and lists - your app will group attestations by this id
 NEXT_PUBLIC_ROUND_ID="open-rpgf-1"
 # Event title for the round, just for display
@@ -52,7 +55,6 @@ NEXT_PUBLIC_MAX_VOTES_PROJECT=50
 # Determine when users can register applications, admins review them, voters vote, and results are published
 NEXT_PUBLIC_START_DATE=2024-01-01T00:00:00.000Z
 NEXT_PUBLIC_REGISTRATION_END_DATE=2024-01-01T00:00:00.000Z
-NEXT_PUBLIC_REVIEW_END_DATE=2024-01-01T00:00:00.000Z
 NEXT_PUBLIC_RESULTS_DATE=2024-01-01T00:00:00.000Z
 
 # Collect user feedback. Is shown as a link when user has voted
@@ -100,3 +102,5 @@ NEXT_PUBLIC_MACI_SUBGRAPH_URL=
 
 # URL with tally-{pollId}.json hosted
 NEXT_PUBLIC_TALLY_URL=https://upblxu2duoxmkobt.public.blob.vercel-storage.com
+
+NEXT_PUBLIC_ROUND_LOGO="round-logo.png"

package.json

@@ -38,7 +38,7 @@
     "@vercel/blob": "^0.19.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "ethers": "^6.11.2",
     "formidable": "^3.5.1",
     "graphql-request": "^6.1.0",

src/components/AddedProjects.tsx

@@ -0,0 +1,25 @@
+import { useBallot } from "~/contexts/Ballot";
+import { useProjectCount } from "~/features/projects/hooks/useProjects";
+
+export const AddedProjects = () => {
+  const { ballot } = useBallot();
+  const allocations = ballot?.votes ?? [];
+  const { data: projectCount } = useProjectCount();
+
+  return (
+    <div className="border-b border-gray-200 py-2">
+      <h4>Projects Added</h4>
+      <div className="mt-2 flex gap-2 text-2xl">
+        <span>
+          <b>{allocations.length}</b>
+        </span>
+        <span className="text-gray-300">
+          <b>of</b>
+        </span>
+        <span className="text-gray-300">
+          <b>{projectCount?.count}</b>
+        </span>
+      </div>
+    </div>
+  );
+};

src/components/BallotOverview.tsx

@@ -0,0 +1,12 @@
+import { AddedProjects } from "./AddedProjects";
+import { VotingUsage } from "./VotingUsage";
+
+export function BallotOverview() {
+  return (
+    <div className="my-8 flex-col items-center gap-2 rounded-lg bg-white p-5 uppercase shadow-lg">
+      <h3>My Ballot</h3>
+      <AddedProjects />
+      <VotingUsage />
+    </div>
+  );
+}

src/components/ConnectButton.tsx

@@ -1,118 +1,34 @@
 import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
-import Image from "next/image";
-import Link from "next/link";
-import { type ComponentPropsWithRef, useCallback } from "react";
-import { FaListCheck } from "react-icons/fa6";
 import { createBreakpoint } from "react-use";
-import { toast } from "sonner";
-import { useEnsAvatar, useEnsName } from "wagmi";
-
-import { config } from "~/config";
-import { useBallot } from "~/contexts/Ballot";
-import { useMaci } from "~/contexts/Maci";
-import { useLayoutOptions } from "~/layouts/BaseLayout";
-
-import type { Address } from "viem";
+import Image from "next/image";
 
 import { Button } from "./ui/Button";
 import { Chip } from "./ui/Chip";
+import { config } from "~/config";
 
 const useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });
 
-const UserInfo = ({ address, children, ...props }: { address: Address } & ComponentPropsWithRef<typeof Chip>) => {
-  const ens = useEnsName({
-    address,
-    chainId: 1,
-    query: { enabled: Boolean(address) },
-  });
-  const name = ens.data ?? undefined;
-  const avatar = useEnsAvatar({
-    name,
-    chainId: 1,
-    query: { enabled: Boolean(name) },
-  });
-
-  return (
-    <Chip className="gap-2" {...props}>
-      <div className="h-6 w-6 overflow-hidden rounded-full">
-        {avatar.data ? (
-          <Image alt={name!} height={24} src={avatar.data} width={24} />
-        ) : (
-          <div className="h-full bg-gray-200" />
-        )}
-      </div>
-
-      {children}
-    </Chip>
-  );
-};
-
-const SignupButton = ({
-  loading,
-  ...props
-}: ComponentPropsWithRef<typeof Chip> & { loading: boolean }): JSX.Element => (
-  <Chip className="gap-2" disabled={loading} {...props}>
-    {loading ? "Loading..." : "Sign up"}
-  </Chip>
-);
-
-const ConnectedDetails = ({
-  openAccountModal,
-  account,
-  isMobile,
-}: {
-  account: { address: string; displayName: string };
-  openAccountModal: () => void;
-  isMobile: boolean;
-}) => {
-  const { isLoading, isRegistered, isEligibleToVote, onSignup } = useMaci();
-  const { ballot } = useBallot();
-  const ballotSize = (ballot?.votes ?? []).length;
-
-  const { showBallot } = useLayoutOptions();
-
-  const onError = useCallback(() => toast.error("Signup error"), []);
-  const handleSignup = useCallback(() => onSignup(onError), [onSignup, onError]);
-
-  return (
-    <div>
-      <div className="flex gap-2 text-white">
-        {!isEligibleToVote && <Chip>You are not allowed to vote</Chip>}
-
-        {isEligibleToVote && !isRegistered && (
-          <SignupButton loading={isRegistered === undefined || isLoading} onClick={handleSignup} />
-        )}
-
-        {isRegistered && showBallot && ballot?.published && <Chip>Already submitted</Chip>}
-
-        {isRegistered && showBallot && !ballot?.published && (
-          <Chip as={Link} className="gap-2" href="/ballot">
-            {isMobile ? <FaListCheck className="h-4 w-4" /> : `View Ballot`}
-
-            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 text-xs">
-              {ballotSize}
-            </div>
-          </Chip>
-        )}
-
-        <UserInfo address={account.address as Address} onClick={openAccountModal}>
-          {isMobile ? null : account.displayName}
-        </UserInfo>
-      </div>
-    </div>
-  );
-};
-
-export const ConnectButton = (): JSX.Element => {
+export const ConnectButton = () => {
   const breakpoint = useBreakpoint();
   const isMobile = breakpoint === "S";
 
   return (
     <RainbowConnectButton.Custom>
-      {({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted, authenticationStatus }) => {
+      {({
+        account,
+        chain,
+        openAccountModal,
+        openChainModal,
+        openConnectModal,
+        mounted,
+        authenticationStatus,
+      }) => {
         const ready = mounted && authenticationStatus !== "loading";
         const connected =
-          ready && account && chain && (!authenticationStatus || authenticationStatus === "authenticated");
+          ready &&
+          account &&
+          chain &&
+          (!authenticationStatus || authenticationStatus === "authenticated");
 
         return (
           <div
@@ -130,24 +46,57 @@ export const ConnectButton = (): JSX.Element => {
                 return (
                   <Button
                     suppressHydrationWarning
-                    className="rounded-full"
-                    variant="primary"
                     onClick={openConnectModal}
+                    variant="primary"
                   >
                     {isMobile ? "Connect" : "Connect wallet"}
                   </Button>
                 );
               }
 
-              if (chain.unsupported ?? ![Number(config.network.id)].includes(chain.id)) {
-                return <Chip onClick={openChainModal}>Wrong network</Chip>;
+              if (
+                chain.unsupported ??
+                ![Number(config.network.id)].includes(chain.id)
+              ) {
+                return (
+                  <Chip onClick={openChainModal} color="disabled">
+                    Wrong network
+                  </Chip>
+                );
               }
 
-              return <ConnectedDetails account={account} isMobile={isMobile} openAccountModal={openAccountModal} />;
+              return (
+                <ConnectedDetails
+                  account={account}
+                  openAccountModal={openAccountModal}
+                  isMobile={isMobile}
+                />
+              );
             })()}
           </div>
         );
       }}
     </RainbowConnectButton.Custom>
   );
 };
+
+const ConnectedDetails = ({
+  openAccountModal,
+  account,
+  isMobile,
+}: {
+  account: { address: string; displayName: string };
+  openAccountModal: () => void;
+  isMobile: boolean;
+}) => {
+  return (
+    <div>
+      <div className="flex gap-2 text-white">
+        <Chip onClick={openAccountModal} color="neutral">
+          {isMobile ? null : account.displayName}
+          <Image alt="" width="18" height="18" src={"/dropdown.svg"} />
+        </Chip>
+      </div>
+    </div>
+  );
+};