Merge pull request #425 from privacy-scaling-explorations/feat/improv…

…e-qv-ballot
privacy-scaling-explorations · Oct 28, 2024 · 01e0667 · 01e0667
2 parents 5cc1c8b + 27f70fc
commit 01e0667
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 19 deletions.
diff --git a/packages/interface/src/components/ui/Notice.tsx b/packages/interface/src/components/ui/Notice.tsx
@@ -5,11 +5,12 @@ import { tv } from "tailwind-variants";
 import { createComponent } from ".";
 
 const notice = tv({
-  base: "w-full flex items-start text-sm justify-center gap-1 text-base",
+  base: "w-full flex items-start text-sm gap-1 text-base",
   variants: {
     variant: {
-      default: "text-blue-400",
+      default: "text-blue-400 justify-center",
       block: "text-blue-700 bg-blue-400 border border-blue-700 rounded-lg p-4",
+      note: "text-blue-400 justify-left",
     },
   },
   defaultVariants: {

diff --git a/packages/interface/src/features/ballot/components/AllocationFormWrapper.tsx b/packages/interface/src/features/ballot/components/AllocationFormWrapper.tsx
@@ -72,6 +72,7 @@ export const AllocationFormWrapper = ({
 
             <Td className="pl-0" variant="last">
               <IconButton
+                className="dark:text-white"
                 disabled={disabled}
                 icon={HiOutlineTrash}
                 tabIndex={-1}

diff --git a/packages/interface/src/features/ballot/components/AllocationInput.tsx b/packages/interface/src/features/ballot/components/AllocationInput.tsx
@@ -1,6 +1,5 @@
 import { type ComponentPropsWithRef } from "react";
 import { useFormContext, Controller } from "react-hook-form";
-import { NumericFormat } from "react-number-format";
 
 import { Input, InputAddon, InputWrapper } from "~/components/ui/Input";
 import { config } from "~/config";
@@ -28,26 +27,27 @@ export const AllocationInput = ({
         name={name!}
         {...props}
         render={({ field }) => (
-          <NumericFormat
+          <Input
             allowNegative={false}
             aria-label="allocation-input"
-            customInput={Input}
-            decimalScale={0}
             error={props.error}
             {...field}
             autoComplete="off"
-            className="pr-16"
             defaultValue={props.defaultValue as string}
             disabled={props.disabled}
-            isAllowed={({ floatValue }) =>
-              votingMaxProject !== undefined ? (floatValue ?? 0) <= votingMaxProject : (floatValue ?? 0) >= 0
-            }
-            thousandSeparator=","
+            max={votingMaxProject}
+            min="0"
+            type="number"
             onBlur={onBlur}
-            onChange={(v) =>
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               // Parse decimal string to number to adhere to AllocationSchema
               {
-                field.onChange(parseFloat(v.target.value.replace(/,/g, "")));
+                let value = parseFloat(e.target.value.replace(/[,.]/g, ""));
+                if (votingMaxProject !== undefined && value > votingMaxProject) {
+                  value = votingMaxProject;
+                  e.target.value = value.toString();
+                }
+                field.onChange(value);
               }
             }
           />

diff --git a/packages/interface/src/features/ballot/components/ProjectAvatarWithName.tsx b/packages/interface/src/features/ballot/components/ProjectAvatarWithName.tsx
@@ -32,7 +32,7 @@ export const ProjectAvatarWithName = ({
       <ProjectAvatar rounded="full" size="sm" url={metadata.data?.bannerImageUrl} />
 
       <div>
-        <div className="font-bold uppercase">{metadata.data?.name}</div>
+        <div className="font-bold uppercase dark:text-white">{metadata.data?.name}</div>
 
         <div className="text-sm text-gray-400">
           <p>{showDescription && (metadata.data?.bio ?? null)}</p>

diff --git a/packages/interface/src/features/rounds/components/RoundItem.tsx b/packages/interface/src/features/rounds/components/RoundItem.tsx
@@ -68,7 +68,9 @@ export const RoundItem = ({ round }: IRoundItemProps): JSX.Element => {
       <div className="m-2 rounded-md border-gray-50 bg-white px-5 py-6 drop-shadow-md">
         <TimeBar end={new Date(round.votingEndsAt)} start={new Date(round.startsAt)} />
 
-        <Heading size="md">{round.roundId}</Heading>
+        <Heading className="dark:text-black" size="md">
+          {round.roundId}
+        </Heading>
 
         <p className="my-4 text-gray-400">{round.description}</p>
 

diff --git a/packages/interface/src/pages/rounds/[pollId]/ballot/index.tsx b/packages/interface/src/pages/rounds/[pollId]/ballot/index.tsx
@@ -9,6 +9,7 @@ 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 { Notice } from "~/components/ui/Notice";
 import { useBallot } from "~/contexts/Ballot";
 import { useMaci } from "~/contexts/Maci";
 import { useRound } from "~/contexts/Round";
@@ -47,7 +48,7 @@ const ClearBallot = ({ pollId }: IClearBallotProps): JSX.Element | null => {
   return (
     <>
       <button
-        className="cursor-pointer text-gray-400 underline hover:text-black"
+        className="mt-4 cursor-pointer text-gray-400 underline hover:text-black"
         type="button"
         onClick={handleOpenDialog}
       >
@@ -94,9 +95,10 @@ const EmptyBallot = ({ pollId }: IEmptyBallotProps): JSX.Element => (
 
 interface IBallotAllocationFormProps {
   pollId: string;
+  mode: string;
 }
 
-const BallotAllocationForm = ({ pollId }: IBallotAllocationFormProps): JSX.Element => {
+const BallotAllocationForm = ({ pollId, mode }: IBallotAllocationFormProps): JSX.Element => {
   const roundState = useRoundState(pollId);
   const { getBallot, sumBallot } = useBallot();
   const { initialVoiceCredits } = useMaci();
@@ -112,6 +114,14 @@ const BallotAllocationForm = ({ pollId }: IBallotAllocationFormProps): JSX.Eleme
 
       <p className="my-4 text-gray-400">Once you have reviewed your vote allocation, you can submit your ballot.</p>
 
+      {mode.toString() === "0" && (
+        <Notice
+          italic
+          content="This round uses Quadratic Voting to encourage supporting diverse projects. The cost to vote = (number of votes)². Therefore we encourage to distribute your votes across more projects to maximize your impact."
+          variant="note"
+        />
+      )}
+
       {ballot.published && (
         <Link className="text-blue-400 hover:underline" href={`/rounds/${pollId}/ballot/confirmation`}>
           Check your submitted ballot
@@ -132,7 +142,7 @@ const BallotAllocationForm = ({ pollId }: IBallotAllocationFormProps): JSX.Eleme
         <div className={clsx("flex h-16 items-center justify-end gap-2", sum > initialVoiceCredits && "text-red")}>
           <h4>Total votes:</h4>
 
-          <p>{formatNumber(sum)}</p>
+          <p className="dark:text-white">{formatNumber(sum)}</p>
         </div>
       </div>
     </div>
@@ -167,7 +177,7 @@ const BallotPage = ({ pollId }: IBallotPageProps): JSX.Element => {
     <LayoutWithSidebar requireAuth requireRegistration showBallot showSubmitButton pollId={pollId} sidebar="right">
       {roundState === ERoundState.VOTING && (
         <Form defaultValues={ballot} schema={BallotSchema} values={ballot} onSubmit={handleSubmit}>
-          <BallotAllocationForm pollId={pollId} />
+          <BallotAllocationForm mode={round!.mode} pollId={pollId} />
         </Form>
       )}