fix: vote credits input bug

src/components/VotingUsage.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { useMemo } from "react";
 
 import { useBallot } from "~/contexts/Ballot";
@@ -22,7 +23,7 @@ export const VotingUsage = (): JSX.Element => {
       </div>
 
       <div>
-        <p className="text-2xl">
+        <p className={clsx("text-2xl", sum > initialVoiceCredits && "text-red")}>
           <b>{sum}</b>
         </p>
 

src/features/ballot/components/SubmitBallotButton.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { toast } from "sonner";
 
 import { Button } from "~/components/ui/Button";
@@ -11,10 +11,15 @@ import { useProjectIdMapping } from "~/features/projects/hooks/useProjects";
 export const SubmitBallotButton = (): JSX.Element => {
   const router = useRouter();
   const [isOpen, setOpen] = useState(false);
-  const { onVote, isLoading } = useMaci();
-  const { ballot, publishBallot } = useBallot();
+  const { onVote, isLoading, initialVoiceCredits } = useMaci();
+  const { ballot, publishBallot, sumBallot } = useBallot();
   const projectIndices = useProjectIdMapping(ballot);
 
+  const ableToSubmit = useMemo(
+    () => sumBallot(ballot.votes) <= initialVoiceCredits,
+    [sumBallot, ballot, initialVoiceCredits],
+  );
+
   const onVotingError = useCallback(() => {
     toast.error("Voting error");
   }, []);
@@ -44,8 +49,8 @@ export const SubmitBallotButton = (): JSX.Element => {
 
   return (
     <>
-      <Button variant="primary" onClick={handleOpenDialog}>
-        submit your ballot
+      <Button variant={ableToSubmit ? "primary" : "disabled"} onClick={handleOpenDialog}>
+        {ableToSubmit ? "submit your ballot" : "Exceed initial voice credits"}
       </Button>
 
       <Dialog
@@ -54,11 +59,20 @@ export const SubmitBallotButton = (): JSX.Element => {
         buttonName="submit"
         description="This is not a final submission. Once you submit your ballot, you can change it during the voting period."
         isLoading={isLoading}
-        isOpen={isOpen}
+        isOpen={ableToSubmit && isOpen}
         size="sm"
         title="submit your ballot"
         onOpenChange={setOpen}
       />
+
+      <Dialog
+        description="You cannot submit this ballot, since the sum of votes exceeds the initial voice credits. Please edit your ballot."
+        isLoading={isLoading}
+        isOpen={!ableToSubmit && isOpen}
+        size="sm"
+        title="exceed initial voice credits"
+        onOpenChange={setOpen}
+      />
     </>
   );
 };

src/features/projects/components/ImpactCategories.tsx

@@ -5,13 +5,15 @@ export interface IImpacCategoriesProps {
   tags?: string[];
 }
 
-export const ImpactCategories = ({ tags = [] }: IImpacCategoriesProps): JSX.Element => (
+export const ImpactCategories = ({ tags = undefined }: IImpacCategoriesProps): JSX.Element => (
   <div className="no-scrollbar">
     <div className="flex gap-1 overflow-x-auto">
-      {tags.map((key) => (
-        <Tag key={key} size="sm">
-          {impactCategories[key as keyof typeof impactCategories].label}
-        </Tag>
+      {tags?.map((key) => (
+        <div key={key}>
+          {Object.keys(impactCategories).includes(key) ? (
+            <Tag size="sm">{impactCategories[key as keyof typeof impactCategories].label}</Tag>
+          ) : null}
+        </div>
       ))}
     </div>
   </div>

src/features/projects/components/VotingWidget.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import { useMemo, useCallback, useState, type ChangeEvent } from "react";
+import { NumericFormat } from "react-number-format";
 
 import { Button } from "~/components/ui/Button";
 import { Input } from "~/components/ui/Input";
@@ -9,7 +10,7 @@ import { useMaci } from "~/contexts/Maci";
 import { EButtonState } from "../types";
 
 export const VotingWidget = ({ projectId }: { projectId: string }): JSX.Element => {
-  const { pollId } = useMaci();
+  const { pollId, initialVoiceCredits } = useMaci();
   const { ballotContains, removeFromBallot, addToBallot } = useBallot();
   const projectBallot = useMemo(() => ballotContains(projectId), [ballotContains, projectId]);
   const projectIncluded = useMemo(() => !!projectBallot, [projectBallot]);
@@ -66,11 +67,14 @@ export const VotingWidget = ({ projectId }: { projectId: string }): JSX.Element
       )}
 
       <div className="flex items-center justify-center gap-5 rounded-xl border border-gray-200 p-5 dark:border-gray-800">
-        <Input
+        <NumericFormat
+          aria-label="allocation-input"
+          autoComplete="off"
           className="w-auto dark:bg-lightBlack dark:text-white"
-          placeholder="Add votes here"
-          type="number"
-          value={amount}
+          customInput={Input}
+          defaultValue={amount}
+          isAllowed={({ floatValue }) => (floatValue ?? 0) <= initialVoiceCredits}
+          thousandSeparator=","
           onChange={handleInput}
         />
 

src/layouts/BaseLayout.tsx

@@ -17,6 +17,7 @@ import { useAccount } from "wagmi";
 import { Footer } from "~/components/Footer";
 import { createComponent } from "~/components/ui";
 import { metadata } from "~/config";
+import { useMaci } from "~/contexts/Maci";
 
 const Context = createContext({ eligibilityCheck: false, showBallot: false });
 
@@ -52,6 +53,7 @@ const Sidebar = ({ side = undefined, ...props }: { side?: "left" | "right" } & P
 export interface LayoutProps {
   title?: string;
   requireAuth?: boolean;
+  requireRegistration?: boolean;
   eligibilityCheck?: boolean;
   showBallot?: boolean;
   type?: string;
@@ -63,6 +65,7 @@ export const BaseLayout = ({
   sidebar = undefined,
   sidebarComponent = null,
   requireAuth = false,
+  requireRegistration = false,
   eligibilityCheck = false,
   showBallot = false,
   type = undefined,
@@ -77,12 +80,13 @@ export const BaseLayout = ({
   const { theme } = useTheme();
   const router = useRouter();
   const { address, isConnecting } = useAccount();
+  const { isRegistered } = useMaci();
 
   const manageDisplay = useCallback(() => {
-    if (requireAuth && !address && !isConnecting) {
+    if ((requireAuth && !address && !isConnecting) || (requireRegistration && !isRegistered)) {
       router.push("/");
     }
-  }, [requireAuth, address, isConnecting, router]);
+  }, [requireAuth, address, isConnecting, requireRegistration, isRegistered, router]);
 
   useEffect(() => {
     manageDisplay();

src/layouts/DefaultLayout.tsx

@@ -25,6 +25,7 @@ export const Layout = ({ children = null, ...props }: ILayoutProps): JSX.Element
   const { address } = useAccount();
   const appState = useAppState();
   const { ballot } = useBallot();
+  const { isRegistered } = useMaci();
 
   const navLinks = useMemo(() => {
     const links = [
@@ -39,7 +40,9 @@ export const Layout = ({ children = null, ...props }: ILayoutProps): JSX.Element
         href: "/ballot/confirmation",
         children: "My Ballot",
       });
-    } else {
+    }
+
+    if (appState === EAppState.VOTING && !ballot.published && isRegistered) {
       links.push({
         href: "/ballot",
         children: "My Ballot",
@@ -69,7 +72,7 @@ export const Layout = ({ children = null, ...props }: ILayoutProps): JSX.Element
     }
 
     return links;
-  }, [ballot, appState, address]);
+  }, [ballot.published, appState, isRegistered, address]);
 
   return (
     <BaseLayout {...props} header={<Header navLinks={navLinks} />}>

src/pages/ballot/index.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState, useMemo, useCallback } from "react";
@@ -8,6 +9,7 @@ import { Button } from "~/components/ui/Button";
 import { Dialog } from "~/components/ui/Dialog";
 import { Form } from "~/components/ui/Form";
 import { useBallot } from "~/contexts/Ballot";
+import { useMaci } from "~/contexts/Maci";
 import { AllocationFormWrapper } from "~/features/ballot/components/AllocationList";
 import { BallotSchema } from "~/features/ballot/types";
 import { LayoutWithSidebar } from "~/layouts/DefaultLayout";
@@ -79,8 +81,9 @@ const EmptyBallot = (): JSX.Element => (
 const BallotAllocationForm = (): JSX.Element => {
   const appState = useAppState();
   const { ballot, sumBallot } = useBallot();
+  const { initialVoiceCredits } = useMaci();
 
-  const sum = useMemo(() => formatNumber(sumBallot(ballot.votes)), [ballot, sumBallot]);
+  const sum = useMemo(() => sumBallot(ballot.votes), [ballot, sumBallot]);
 
   return (
     <div className="px-8">
@@ -99,10 +102,10 @@ const BallotAllocationForm = (): JSX.Element => {
           )}
         </div>
 
-        <div className="flex h-16 items-center justify-end gap-2">
+        <div className={clsx("flex h-16 items-center justify-end gap-2", sum > initialVoiceCredits && "text-red")}>
           <h4>Total votes:</h4>
 
-          <p>{sum}</p>
+          <p>{formatNumber(sum)}</p>
         </div>
       </div>
     </div>
@@ -125,7 +128,7 @@ const BallotPage = (): JSX.Element => {
   }, [sumBallot]);
 
   return (
-    <LayoutWithSidebar requireAuth showBallot showSubmitButton sidebar="right">
+    <LayoutWithSidebar requireAuth requireRegistration showBallot showSubmitButton sidebar="right">
       <Form defaultValues={ballot} schema={BallotSchema} values={ballot} onSubmit={handleSubmit}>
         <BallotAllocationForm />
       </Form>