feat: add faq section

.env.example

@@ -44,6 +44,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"
 
@@ -59,7 +62,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
@@ -107,3 +109,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

@@ -33,7 +33,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,19 +1,9 @@
-import Image from "next/image";
-import Link from "next/link";
-import { type ComponentPropsWithRef, useCallback } from "react";
-import { useEnsAvatar, useEnsName } from "wagmi";
-import { FaListCheck } from "react-icons/fa6";
-
 import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
 import { createBreakpoint } from "react-use";
-import { toast } from "sonner";
+import Image from "next/image";
 
 import { Button } from "./ui/Button";
 import { Chip } from "./ui/Chip";
-import { useLayoutOptions } from "~/layouts/BaseLayout";
-import { useMaci } from "~/contexts/Maci";
-import { useBallot } from "~/contexts/Ballot";
-import type { Address } from "viem";
 import { config } from "~/config";
 
 const useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });
@@ -57,7 +47,6 @@ export const ConnectButton = () => {
                   <Button
                     suppressHydrationWarning
                     onClick={openConnectModal}
-                    className="rounded-full"
                     variant="primary"
                   >
                     {isMobile ? "Connect" : "Connect wallet"}
@@ -69,7 +58,11 @@ export const ConnectButton = () => {
                 chain.unsupported ??
                 ![Number(config.network.id)].includes(chain.id)
               ) {
-                return <Chip onClick={openChainModal}>Wrong network</Chip>;
+                return (
+                  <Chip onClick={openChainModal} color="disabled">
+                    Wrong network
+                  </Chip>
+                );
               }
 
               return (
@@ -96,89 +89,14 @@ const ConnectedDetails = ({
   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 className="gap-2" as={Link} 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
-          onClick={openAccountModal}
-          address={account.address as Address}
-        >
+        <Chip onClick={openAccountModal} color="neutral">
           {isMobile ? null : account.displayName}
-        </UserInfo>
+          <Image alt="" width="18" height="18" src={"/dropdown.svg"} />
+        </Chip>
       </div>
     </div>
   );
 };
-
-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 width={24} height={24} alt={name!} src={avatar.data} />
-        ) : (
-          <div className="h-full bg-gray-200" />
-        )}
-      </div>
-      {children}
-    </Chip>
-  );
-};
-
-const SignupButton = ({
-  loading,
-  ...props
-}: ComponentPropsWithRef<typeof Chip> & { loading: boolean }): JSX.Element => {
-  return (
-    <Chip className="gap-2" disabled={loading} {...props}>
-      {loading ? "Loading..." : "Sign up"}
-    </Chip>
-  );
-};