From 5d28da31d770d16d09c1ff7acacac019a7eee0e2 Mon Sep 17 00:00:00 2001
From: yu-zhen <wlphg010688@gmail.com>
Date: Sat, 7 Dec 2024 03:07:06 +0900
Subject: [PATCH] chore: add check my ballot button, remove redundant dialog
 popup, adjust styling

---
 .../src/components/BallotOverview.tsx         | 14 +++++-
 packages/interface/src/components/Info.tsx    |  2 +-
 packages/interface/src/contexts/Maci.tsx      | 11 +++--
 packages/interface/src/contexts/types.ts      |  2 +-
 .../ballot/components/SubmitBallotButton.tsx  | 46 ++++++-------------
 .../interface/src/layouts/DefaultLayout.tsx   |  1 -
 6 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/packages/interface/src/components/BallotOverview.tsx b/packages/interface/src/components/BallotOverview.tsx
index 23f2a459..0dbaf952 100644
--- a/packages/interface/src/components/BallotOverview.tsx
+++ b/packages/interface/src/components/BallotOverview.tsx
@@ -1,6 +1,8 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { useMemo } from "react";
 
+import { Button } from "~/components/ui/Button";
 import { Heading } from "~/components/ui/Heading";
 import { useBallot } from "~/contexts/Ballot";
 import { useRoundState } from "~/utils/state";
@@ -21,6 +23,10 @@ export const BallotOverview = ({ title = undefined, pollId }: IBallotOverviewPro
 
   const roundState = useRoundState({ pollId });
 
+  const { asPath } = useRouter();
+
+  const showButton = useMemo(() => !asPath.includes("ballot"), [asPath]);
+
   return (
     <Link
       href={
@@ -29,7 +35,7 @@ export const BallotOverview = ({ title = undefined, pollId }: IBallotOverviewPro
           : `/rounds/${pollId}/ballot`
       }
     >
-      <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">
+      <div className="dark:bg-lightBlack w-64 flex-col items-center gap-2 bg-white uppercase dark:text-white">
         <Heading as="h3" size="3xl">
           {title}
         </Heading>
@@ -37,6 +43,12 @@ export const BallotOverview = ({ title = undefined, pollId }: IBallotOverviewPro
         <AddedProjects pollId={pollId} />
 
         <VotingUsage pollId={pollId} />
+
+        {showButton && (
+          <Button className="mt-2" variant="secondary">
+            Check My Ballot
+          </Button>
+        )}
       </div>
     </Link>
   );
diff --git a/packages/interface/src/components/Info.tsx b/packages/interface/src/components/Info.tsx
index 78ad4db8..100f56e9 100644
--- a/packages/interface/src/components/Info.tsx
+++ b/packages/interface/src/components/Info.tsx
@@ -73,7 +73,7 @@ export const Info = ({
   ];
 
   return (
-    <div className="flex w-full justify-center">
+    <div className="flex w-full justify-center pb-3">
       <InfoContainer size={size}>
         {showRoundInfo && <RoundInfo roundId={round?.roundId ?? ""} />}
 
diff --git a/packages/interface/src/contexts/Maci.tsx b/packages/interface/src/contexts/Maci.tsx
index 35544e58..b38857f8 100644
--- a/packages/interface/src/contexts/Maci.tsx
+++ b/packages/interface/src/contexts/Maci.tsx
@@ -275,14 +275,19 @@ export const MaciProvider: React.FC<MaciProviderProps> = ({ children }: MaciProv
 
   // function to be used to vote on a poll
   const onVote = useCallback(
-    async (votes: IVoteArgs[], pollId: string, onError: () => Promise<void>, onSuccess: () => Promise<void>) => {
+    async (
+      votes: IVoteArgs[],
+      pollId: string,
+      onError: (err: string) => Promise<void>,
+      onSuccess: () => Promise<void>,
+    ) => {
       if (!signer || !stateIndex) {
         return;
       }
 
       if (!votes.length) {
-        onError();
         setError("No votes provided");
+        onError("No votes provided");
         return;
       }
 
@@ -307,7 +312,7 @@ export const MaciProvider: React.FC<MaciProviderProps> = ({ children }: MaciProv
         .then(() => onSuccess())
         .catch((err: Error) => {
           setError(err.message);
-          return onError();
+          return onError(err.message);
         })
         .finally(() => {
           setIsLoading(false);
diff --git a/packages/interface/src/contexts/types.ts b/packages/interface/src/contexts/types.ts
index 98f7b86f..3ea83fae 100644
--- a/packages/interface/src/contexts/types.ts
+++ b/packages/interface/src/contexts/types.ts
@@ -26,7 +26,7 @@ export interface MaciContextType {
   onVote: (
     args: IVoteArgs[],
     pollId: string,
-    onError: () => void | Promise<void>,
+    onError: (err: string) => void | Promise<void>,
     onSuccess: () => void | Promise<void>,
   ) => Promise<void>;
 }
diff --git a/packages/interface/src/features/ballot/components/SubmitBallotButton.tsx b/packages/interface/src/features/ballot/components/SubmitBallotButton.tsx
index f3420cbe..ba01be33 100644
--- a/packages/interface/src/features/ballot/components/SubmitBallotButton.tsx
+++ b/packages/interface/src/features/ballot/components/SubmitBallotButton.tsx
@@ -1,9 +1,9 @@
 import { useRouter } from "next/router";
-import { useState, useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { toast } from "sonner";
 
 import { Button } from "~/components/ui/Button";
-import { Dialog } from "~/components/ui/Dialog";
+import { Spinner } from "~/components/ui/Spinner";
 import { useBallot } from "~/contexts/Ballot";
 import { useMaci } from "~/contexts/Maci";
 
@@ -13,12 +13,11 @@ interface ISubmitBallotButtonProps {
 
 export const SubmitBallotButton = ({ pollId }: ISubmitBallotButtonProps): JSX.Element => {
   const router = useRouter();
-  const [isOpen, setOpen] = useState(false);
   const { onVote, isLoading, initialVoiceCredits } = useMaci();
   const { getBallot, publishBallot, sumBallot } = useBallot();
 
-  const onVotingError = useCallback(() => {
-    toast.error("Voting error");
+  const onVotingError = useCallback((err: string) => {
+    toast.error(`Voting error: ${err}`);
   }, []);
 
   const ballot = useMemo(() => getBallot(pollId), [pollId, getBallot]);
@@ -28,6 +27,10 @@ export const SubmitBallotButton = ({ pollId }: ISubmitBallotButtonProps): JSX.El
   );
 
   const handleSubmitBallot = useCallback(async () => {
+    if (isLoading) {
+      return;
+    }
+
     const votes = ballot.votes.map(({ amount, projectId, projectIndex }) => ({
       projectId,
       voteOptionIndex: BigInt(projectIndex),
@@ -44,36 +47,13 @@ export const SubmitBallotButton = ({ pollId }: ISubmitBallotButtonProps): JSX.El
     });
   }, [ballot, router, onVote, publishBallot, onVotingError, pollId, pollId]);
 
-  const handleOpenDialog = useCallback(() => {
-    setOpen(true);
-  }, [setOpen]);
-
   return (
-    <>
-      <Button variant={ableToSubmit ? "primary" : "disabled"} onClick={handleOpenDialog}>
-        {ableToSubmit ? "submit your ballot" : "Exceed initial voice credits"}
-      </Button>
+    <Button variant={ableToSubmit && !isLoading ? "primary" : "disabled"} onClick={handleSubmitBallot}>
+      {ableToSubmit && !isLoading && "submit your ballot"}
 
-      <Dialog
-        button="primary"
-        buttonAction={handleSubmitBallot}
-        buttonName="submit"
-        description="This is not the final submission. Once you submit your ballot, you can change it during the voting period."
-        isLoading={isLoading}
-        isOpen={ableToSubmit && isOpen}
-        size="sm"
-        title="submit your ballot"
-        onOpenChange={setOpen}
-      />
+      {!ableToSubmit && !isLoading && "Exceed initial voice credits"}
 
-      <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}
-      />
-    </>
+      {isLoading && <Spinner className="h-4 w-4" />}
+    </Button>
   );
 };
diff --git a/packages/interface/src/layouts/DefaultLayout.tsx b/packages/interface/src/layouts/DefaultLayout.tsx
index 93b0a8d2..5225bd9b 100644
--- a/packages/interface/src/layouts/DefaultLayout.tsx
+++ b/packages/interface/src/layouts/DefaultLayout.tsx
@@ -104,7 +104,6 @@ export const LayoutWithSidebar = ({ ...props }: ILayoutProps): JSX.Element => {
 
   return (
     <Layout
-      sidebar="left"
       sidebarComponent={
         <div>
           <Info