chore: update several small bugs

packages/interface/.env.example

@@ -38,7 +38,6 @@ NEXT_PUBLIC_TOKEN_NAME="Votes"
 # 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

packages/interface/src/components/BallotOverview.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 
+import { Heading } from "~/components/ui/Heading";
 import { useBallot } from "~/contexts/Ballot";
 import { useAppState } from "~/utils/state";
 import { EAppState } from "~/utils/types";
@@ -21,7 +22,9 @@ export const BallotOverview = (): JSX.Element => {
       }
     >
       <div className="dark:bg-lightBlack my-8 flex-col items-center gap-2 rounded-lg bg-white p-5 uppercase shadow-lg dark:text-white">
-        <h3>My Ballot</h3>
+        <Heading as="h3" size="3xl">
+          My Ballot
+        </Heading>
 
         <AddedProjects />
 

packages/interface/src/components/RoundInfo.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 
+import { Heading } from "~/components/ui/Heading";
 import { config } from "~/config";
 
 export const RoundInfo = (): JSX.Element => (
@@ -9,7 +10,9 @@ export const RoundInfo = (): JSX.Element => (
     <div className="flex items-center gap-2">
       {config.roundLogo && <Image alt="round logo" height="20" src={`/${config.roundLogo}`} width="20" />}
 
-      <h3>{config.roundId}</h3>
+      <Heading as="h3" size="3xl">
+        {config.roundId}
+      </Heading>
     </div>
   </div>
 );

packages/interface/src/components/ui/Form.tsx

@@ -24,6 +24,7 @@ import { type z } from "zod";
 import { cn } from "~/utils/classNames";
 
 import { IconButton } from "./Button";
+import { Heading } from "./Heading";
 import { inputBase, Input, InputWrapper, InputIcon } from "./Input";
 import { Tooltip } from "./Tooltip";
 
@@ -197,7 +198,7 @@ export const FormSection = ({
   ...props
 }: { title: string; description: string } & ComponentProps<"section">): JSX.Element => (
   <section className="mb-8" {...props}>
-    <h3 className="mb-1 font-sans text-xl font-semibold">{title}</h3>
+    <Heading className="mb-1 font-sans text-xl font-semibold">{title}</Heading>
 
     <p className="mb-4 leading-loose text-gray-400">{description}</p>
 

packages/interface/src/components/ui/Heading.tsx

@@ -5,14 +5,16 @@ import { createComponent } from ".";
 export const Heading = createComponent(
   "div",
   tv({
-    base: "font-bold",
+    base: "font-bold dark:text-white font-mono uppercase",
     variants: {
       size: {
         md: "text-base",
         lg: "text-lg mt-2 mb-1 ",
         xl: "text-xl ",
         "2xl": "text-2xl mt-8 mb-4 ",
-        "3xl": "text-3xl mt-8 mb-4 ",
+        "3xl": "text-[32px]",
+        "4xl": "text-[40px]",
+        "6xl": "text-6xl mb-8",
       },
     },
     defaultVariants: {

packages/interface/src/config.ts

@@ -42,6 +42,28 @@ const easSchemaRegistryContractAddresses = {
   base: "0x4200000000000000000000000000000000000020",
 };
 
+// Chain Id
+const chainId = {
+  ethereum: 1,
+  optimism: 10,
+  optimismSepolia: 11155420,
+  arbitrum: 42161,
+  linea: 7567838,
+  sepolia: 11155111,
+  base: 8453,
+};
+
+// Chain name
+const chainName = {
+  ethereum: "Ethereum",
+  optimism: "OP",
+  optimismSepolia: "OP Sepolia",
+  arbitrum: "Arbitrum",
+  linea: "Linea",
+  sepolia: "Sepolia",
+  base: "Base",
+};
+
 /**
  * Convert the chain name for the semaphore ethers library
  * @returns the chain name for the semaphore ethers library
@@ -76,7 +98,6 @@ export const config = {
   voteLimit: 50,
   startsAt: parseDate(process.env.NEXT_PUBLIC_START_DATE),
   registrationEndsAt: parseDate(process.env.NEXT_PUBLIC_REGISTRATION_END_DATE),
-  reviewEndsAt: parseDate(process.env.NEXT_PUBLIC_REVIEW_END_DATE),
   resultsAt: parseDate(process.env.NEXT_PUBLIC_RESULTS_DATE),
   skipApprovedVoterCheck: ["true", "1"].includes(process.env.NEXT_PUBLIC_SKIP_APPROVED_VOTER_CHECK!),
   tokenName: process.env.NEXT_PUBLIC_TOKEN_NAME!,
@@ -91,7 +112,8 @@ export const config = {
   roundOrganizer: process.env.NEXT_PUBLIC_ROUND_ORGANIZER ?? "PSE",
   pollMode: process.env.NEXT_PUBLIC_POLL_MODE ?? "non-qv",
   roundLogo: process.env.NEXT_PUBLIC_ROUND_LOGO,
-  chainName: process.env.NEXT_PUBLIC_CHAIN_NAME!,
+  chainName: chainName[process.env.NEXT_PUBLIC_CHAIN_NAME as keyof typeof chainName],
+  chainId: chainId[process.env.NEXT_PUBLIC_CHAIN_NAME as keyof typeof chainId],
 };
 
 export const theme = {

packages/interface/src/contexts/Maci.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { Identity } from "@semaphore-protocol/core";
 import { isAfter } from "date-fns";
+import { type Signer, BrowserProvider } from "ethers";
 import {
   signup,
   isRegisteredUser,
@@ -21,7 +22,7 @@ import { api } from "~/utils/api";
 import { getSemaphoreProof } from "~/utils/semaphore";
 
 import type { IVoteArgs, MaciContextType, MaciProviderProps } from "./types";
-import type { Signer } from "ethers";
+import type { EIP1193Provider } from "viem";
 import type { Attestation } from "~/utils/types";
 
 export const MaciContext = createContext<MaciContextType | undefined>(undefined);
@@ -324,12 +325,17 @@ export const MaciProvider: React.FC<MaciProviderProps> = ({ children }: MaciProv
 
   /// check the poll data and tally data
   useEffect(() => {
-    if (!signer) {
+    if (!window.ethereum) {
       return;
     }
 
     setIsLoading(true);
 
+    const provider = new BrowserProvider(window.ethereum as unknown as EIP1193Provider, {
+      chainId: config.chainId,
+      name: config.chainName,
+    });
+
     // if we have the subgraph url then it means we can get the poll data through there
     if (config.maciSubgraphUrl) {
       if (!poll.data) {
@@ -354,8 +360,7 @@ export const MaciProvider: React.FC<MaciProviderProps> = ({ children }: MaciProv
     } else {
       getPoll({
         maciAddress: config.maciAddress!,
-        signer,
-        provider: signer.provider,
+        provider,
       })
         .then((data) => {
           setPollData(data);

packages/interface/src/features/applications/components/ApplicationsToApprove.tsx

@@ -9,6 +9,7 @@ import { EmptyState } from "~/components/EmptyState";
 import { Badge } from "~/components/ui/Badge";
 import { Button } from "~/components/ui/Button";
 import { Checkbox, Form } from "~/components/ui/Form";
+import { Heading } from "~/components/ui/Heading";
 import { Skeleton } from "~/components/ui/Skeleton";
 import { Spinner } from "~/components/ui/Spinner";
 import { useApplications } from "~/features/applications/hooks/useApplications";
@@ -183,7 +184,9 @@ export const ApplicationsToApprove = (): JSX.Element => {
   return (
     <div className="flex w-full justify-center dark:text-white">
       <div className="flex flex-col gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
-        <h3>Review Applications</h3>
+        <Heading as="h3" size="3xl">
+          Review Applications
+        </Heading>
 
         <p className="text-gray-400">
           Select the applications you want to approve. You must be a configured admin to approve applications.

packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { useMemo, type ReactNode } from "react";
 import { useFormContext } from "react-hook-form";
 
+import { Heading } from "~/components/ui/Heading";
 import { Tag } from "~/components/ui/Tag";
 
 import type { Application } from "../types";
@@ -42,7 +43,7 @@ export const ReviewApplicationDetails = (): JSX.Element => {
   return (
     <div className="flex flex-col gap-8">
       <div>
-        <h3 className="mb-1 font-sans text-xl font-semibold">Review & Submit</h3>
+        <Heading className="mb-1 font-sans text-xl font-semibold">Review & Submit</Heading>
 
         <p className="leading-loose text-gray-400">Please review and submit your project application.</p>
       </div>

packages/interface/src/features/ballot/components/BallotConfirmation.tsx

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 
 import { createComponent } from "~/components/ui";
 import { Button } from "~/components/ui/Button";
+import { Heading } from "~/components/ui/Heading";
 import { Notice } from "~/components/ui/Notice";
 import { config } from "~/config";
 import { useBallot } from "~/contexts/Ballot";
@@ -34,7 +35,9 @@ export const BallotConfirmation = (): JSX.Element => {
 
   return (
     <section>
-      <h2 className="font-mono uppercase tracking-tighter">Your votes have been successfully submitted 🥳</h2>
+      <Heading as="h2" className="tracking-tighter" size="4xl">
+        Your votes have been successfully submitted 🥳
+      </Heading>
 
       <p className="mb-14 mt-4 text-gray-400">
         {`Thank you for participating in ${config.eventName} ${config.roundId} round.`}

packages/interface/src/features/projects/components/ProjectDetails.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { type ReactNode } from "react";
 
+import { Heading } from "~/components/ui/Heading";
 import { Navigation } from "~/components/ui/Navigation";
 import { ProjectAvatar } from "~/features/projects/components/ProjectAvatar";
 import { ProjectBanner } from "~/features/projects/components/ProjectBanner";
@@ -50,7 +51,9 @@ const ProjectDetails = ({
       </div>
 
       <div className="flex items-center justify-between">
-        <h3>{attestation?.name}</h3>
+        <Heading as="h3" size="3xl">
+          {attestation?.name}
+        </Heading>
 
         {appState === EAppState.VOTING && <VotingWidget projectId={projectId} />}
       </div>

packages/interface/src/features/projects/components/Projects.tsx

@@ -6,6 +6,7 @@ import { FiAlertCircle } from "react-icons/fi";
 import { InfiniteLoading } from "~/components/InfiniteLoading";
 import { SortFilter } from "~/components/SortFilter";
 import { StatusBar } from "~/components/StatusBar";
+import { Heading } from "~/components/ui/Heading";
 import { useBallot } from "~/contexts/Ballot";
 import { useMaci } from "~/contexts/Maci";
 import { useResults } from "~/hooks/useResults";
@@ -78,7 +79,9 @@ export const Projects = (): JSX.Element => {
       )}
 
       <div className="mb-4 flex justify-between">
-        <h3>Projects</h3>
+        <Heading as="h3" size="3xl">
+          Projects
+        </Heading>
 
         <div>
           <SortFilter />

packages/interface/src/features/signup/components/FaqList.tsx

@@ -1,8 +1,10 @@
+import { Heading } from "~/components/ui/Heading";
+
 import { FAQItem } from "./FaqItem";
 
 export const FAQList = (): JSX.Element => (
   <div className="mt-28 flex flex-col items-center justify-center dark:text-white">
-    <h1 className="mb-8">FAQ</h1>
+    <Heading size="6xl">FAQ</Heading>
 
     <FAQItem
       description="(Please enter the main focus and description of this round.)"

packages/interface/src/features/voters/components/VotersList.tsx

@@ -12,7 +12,7 @@ export const VotersList = (): JSX.Element => {
     return <EmptyState title="No voters">Add voters to allow them to vote</EmptyState>;
   }
   return (
-    <div className="space-y-1">
+    <div className="space-y-1 dark:text-white">
       {(data
         ? data.filter(
             ({ recipient }, index, array) => array.findIndex((item) => item.recipient === recipient) === index,

packages/interface/src/hooks/useEthersSigner.ts

@@ -4,7 +4,7 @@ import { useConnectorClient } from "wagmi";
 
 import type { Account, Chain, Client, Transport } from "viem";
 
-export function clientToSigner(client: Client<Transport, Chain, Account>): JsonRpcSigner | undefined {
+function clientToSigner(client: Client<Transport, Chain, Account>): JsonRpcSigner | undefined {
   const { account, chain, transport } = client;
 
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -24,5 +24,6 @@ export function clientToSigner(client: Client<Transport, Chain, Account>): JsonR
 /** Hook to convert a viem Wallet Client to an ethers.js Signer. */
 export function useEthersSigner({ chainId }: { chainId?: number } = {}): JsonRpcSigner | undefined {
   const { data: client } = useConnectorClient({ chainId });
+
   return useMemo(() => (client ? clientToSigner(client) : undefined), [client]);
 }

packages/interface/src/pages/applications/confirmation.tsx

@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import { FiAlertCircle } from "react-icons/fi";
 
 import { Alert } from "~/components/ui/Alert";
+import { Heading } from "~/components/ui/Heading";
 import { useApplicationByTxHash } from "~/features/applications/hooks/useApplicationByTxHash";
 import { ProjectItem } from "~/features/projects/components/ProjectItem";
 import { Layout } from "~/layouts/DefaultLayout";
@@ -23,7 +24,9 @@ const ConfirmProjectPage = (): JSX.Element => {
     <Layout>
       <div className="flex w-full justify-center">
         <div className="flex flex-col items-center gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
-          <h2 className="font-mono uppercase">Your project application has been submitted!</h2>
+          <Heading as="h2" size="4xl">
+            Your project application has been submitted!
+          </Heading>
 
           <p className="text-gray-400">
             Thank you for submitting your project application. Our team is now reviewing it.

packages/interface/src/pages/applications/new.tsx

@@ -1,6 +1,7 @@
 import { FiAlertCircle } from "react-icons/fi";
 
 import { Alert } from "~/components/ui/Alert";
+import { Heading } from "~/components/ui/Heading";
 import { ApplicationForm } from "~/features/applications/components/ApplicationForm";
 import { Layout } from "~/layouts/DefaultLayout";
 import { useAppState } from "~/utils/state";
@@ -13,7 +14,9 @@ const NewProjectPage = (): JSX.Element => {
     <Layout>
       <div className="flex w-full justify-center">
         <div className="flex flex-col gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
-          <h3>New Application</h3>
+          <Heading as="h3" size="3xl">
+            New Application
+          </Heading>
 
           <p className="text-gray-400">
             <span className="inline-block">

packages/interface/src/pages/ballot/index.tsx

@@ -8,6 +8,7 @@ import { useAccount } from "wagmi";
 import { Button } from "~/components/ui/Button";
 import { Dialog } from "~/components/ui/Dialog";
 import { Form } from "~/components/ui/Form";
+import { Heading } from "~/components/ui/Heading";
 import { useBallot } from "~/contexts/Ballot";
 import { useMaci } from "~/contexts/Maci";
 import { AllocationFormWrapper } from "~/features/ballot/components/AllocationList";
@@ -63,7 +64,9 @@ const ClearBallot = (): JSX.Element | null => {
 const EmptyBallot = (): JSX.Element => (
   <div className="flex flex-1 items-center justify-center">
     <div className=" max-w-[360px] space-y-4">
-      <h3 className="text-center text-lg font-bold">Your vote is empty</h3>
+      <Heading className="text-center" size="lg">
+        Your vote is empty
+      </Heading>
 
       <p className="text-center text-sm text-gray-700">
         Your vote currently doesn&apos;t have any projects added. Browse through the available projects.
@@ -87,7 +90,9 @@ const BallotAllocationForm = (): JSX.Element => {
 
   return (
     <div className="px-8">
-      <h1 className="text-4xl uppercase tracking-tighter">My Ballot</h1>
+      <Heading className="tracking-tighter" size="4xl">
+        My Ballot
+      </Heading>
 
       <p className="my-4 text-gray-400">Once you have reviewed your vote allocation, you can submit your ballot.</p>
 
@@ -142,7 +147,9 @@ const BallotPage = (): JSX.Element => {
         </Form>
       )}
 
-      {appState !== EAppState.VOTING && <div>You can only vote during the voting period.</div>}
+      {appState !== EAppState.VOTING && (
+        <div className="dark:text-white">You can only vote during the voting period.</div>
+      )}
     </LayoutWithSidebar>
   );
 };