Merge pull request #278 from berachain/fix/governance/booleans

fix(governance): handles boolean inputs and fixes validation Refs BFE-431
berachain · Dec 23, 2024 · 4f20c75 · 4f20c75
2 parents 0aaa0cd + a10cc63
commit 4f20c75
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 130 deletions.
diff --git a/apps/hub/src/app/governance/[genre]/create/components/UpdateVaultWhitelistStatus.tsx b/apps/hub/src/app/governance/[genre]/create/components/UpdateVaultWhitelistStatus.tsx
@@ -52,11 +52,11 @@ export const UpdateVaultWhitelistStatus = ({
           label="Reward Vault Address"
           value={gauge?.vault}
           error={
-            errors.vault === ProposalErrorCodes.REQUIRED
+            errors?.vault === ProposalErrorCodes.REQUIRED
               ? "A Vault Must Be Chosen"
-              : errors.vault === ProposalErrorCodes.INVALID_ADDRESS
+              : errors?.vault === ProposalErrorCodes.INVALID_ADDRESS
                 ? "Invalid Vault address."
-                : errors.vault
+                : errors?.vault
           }
           onChange={async (e) => {
             setAction({

diff --git a/apps/hub/src/app/governance/[genre]/create/components/abi-input.tsx b/apps/hub/src/app/governance/[genre]/create/components/abi-input.tsx
@@ -2,6 +2,10 @@ import { AbiParameter } from "viem";
 import { InputWithLabel } from "@bera/ui/input";
 import { useEffect, useState } from "react";
 import { Button } from "@bera/ui/button";
+import { Label } from "@bera/ui/label";
+import { Switch } from "@bera/ui/switch";
+import { FormError } from "@bera/ui/form-error";
+import { ProposalErrorCodes } from "~/app/governance/types";
 
 export function AbiInput({
   input,
@@ -22,6 +26,9 @@ export function AbiInput({
     if ("components" in input && typeof value !== "object") {
       onChange({ [input.name!]: {} });
     }
+    if (input.type === "string" && typeof value !== "string") {
+      onChange("");
+    }
   }, [value, input]);
 
   if ("components" in input) {
@@ -46,6 +53,7 @@ export function AbiInput({
               }
             />
           ))}
+          <FormError>{errors}</FormError>
         </div>
       );
     }
@@ -54,18 +62,57 @@ export function AbiInput({
       <AbiTupleArrayInput
         input={input}
         onChange={onChange}
-        value={value}
+        value={value ?? ""}
         id={`${id}-${input.name}`}
         key={`${id}-${input.name}`}
         errors={errors}
       />
     );
   }
+
+  const error =
+    errors && typeof errors === "object" && input.name
+      ? errors[input.name]
+      : errors;
+  if (input.type === "bool") {
+    return (
+      <div className="grid grid-cols-1 gap-2">
+        <Label htmlFor={`${id}-${input.name}`}>Set {input.name}</Label>
+        <div className="flex gap-2 items-center">
+          <Switch
+            id={`${id}-${input.name}`}
+            checked={value}
+            size={"sm"}
+            onCheckedChange={(e) => {
+              onChange(!!e);
+            }}
+          />
+          {value ? (
+            <label
+              htmlFor={`${id}-${input.name}`}
+              className="text-success-foreground"
+            >
+              True
+            </label>
+          ) : (
+            <label htmlFor={`${id}-${input.name}`} className="">
+              False
+            </label>
+          )}
+        </div>
+        <FormError>
+          {error === ProposalErrorCodes.INVALID_AMOUNT
+            ? "Please enter a valid boolean"
+            : error}
+        </FormError>
+      </div>
+    );
+  }
   return (
     <InputWithLabel
       label={`Enter ${input.name}`}
-      error={errors}
-      id={`proposal-calldata--${id}-${input.name}`}
+      error={error}
+      id={`${id}-${input.name}`}
       placeholder={input.type}
       value={value}
       onChange={(e) => onChange(e.target.value)}

diff --git a/apps/hub/src/app/governance/[genre]/create/components/custom-action.tsx b/apps/hub/src/app/governance/[genre]/create/components/custom-action.tsx
@@ -12,7 +12,7 @@ import {
   useEffect,
   useState,
 } from "react";
-import { Abi, AbiFunction, isAddress, parseAbiItem } from "viem";
+import { Abi, AbiFunction, parseAbiItem } from "viem";
 import {
   CustomProposalActionErrors,
   ProposalAction,
@@ -144,11 +144,11 @@ export function CustomAction({
         variant="black"
         label="Enter Target"
         error={
-          errors.target === ProposalErrorCodes.REQUIRED
+          errors?.target === ProposalErrorCodes.REQUIRED
             ? "Target is required."
-            : errors.target === ProposalErrorCodes.INVALID_ADDRESS
+            : errors?.target === ProposalErrorCodes.INVALID_ADDRESS
               ? "Invalid target address."
-              : errors.target
+              : errors?.target
         }
         id={`proposal-target--${idx}`}
         placeholder={truncateHash("0x00000000000000")}
@@ -161,26 +161,38 @@ export function CustomAction({
         }
       />
       <InputWithLabel
-        type="text"
+        type="number-enhanced"
         variant="black"
         label="Value (in wei)"
         error={
-          errors.value === ProposalErrorCodes.REQUIRED
+          errors?.value === ProposalErrorCodes.REQUIRED
             ? "Value is required."
-            : errors.value === ProposalErrorCodes.INVALID_AMOUNT
+            : errors?.value === ProposalErrorCodes.INVALID_AMOUNT
               ? "Invalid value format."
-              : errors.value
+              : errors?.value
         }
         id={`proposal-value--${idx}`}
         placeholder={"0"}
         value={value}
         onChange={(e: any) => {
           setValue(e.target.value);
           try {
-            setAction((prev) => ({
-              ...prev,
-              value: BigInt(e.target.value),
-            }));
+            const valueBN = BigInt(e.target.value);
+            if (valueBN < 0n) {
+              setErrors((e) => ({
+                ...e,
+                value: ProposalErrorCodes.NEGATIVE_AMOUNT,
+              }));
+            } else {
+              setAction((prev) => ({
+                ...prev,
+                value: valueBN,
+              }));
+              setErrors((e) => ({
+                ...e,
+                value: null,
+              }));
+            }
           } catch (error) {
             setErrors((e) => ({
               ...e,
@@ -194,11 +206,11 @@ export function CustomAction({
         label="Enter ABI"
         variant="black"
         error={
-          errors.ABI === ProposalErrorCodes.REQUIRED
+          errors?.ABI === ProposalErrorCodes.REQUIRED
             ? "ABI is required."
-            : errors.ABI === ProposalErrorCodes.INVALID_ABI
+            : errors?.ABI === ProposalErrorCodes.INVALID_ABI
               ? "Invalid ABI"
-              : errors.ABI
+              : errors?.ABI
         }
         id={`proposal-abi--${idx}`}
         placeholder={JSON.stringify(
@@ -258,16 +270,16 @@ export function CustomAction({
           }
         />
         <FormError>
-          {errors.functionSignature === ProposalErrorCodes.REQUIRED
+          {errors?.functionSignature === ProposalErrorCodes.REQUIRED
             ? "A Method Must Be chosen"
-            : errors.functionSignature}
+            : errors?.functionSignature}
         </FormError>
       </div>
       {abiItems?.inputs?.map((input, i) => {
         return (
           <AbiInput
             input={input}
-            errors={errors.calldata?.[i]}
+            errors={errors?.calldata?.[i]}
             key={`proposal-calldata--${idx}-${i}-${input.name}`}
             id={`proposal-calldata--${idx}-${i}-${input.name}`}
             value={action.calldata?.[i]}

diff --git a/apps/hub/src/app/governance/[genre]/create/components/erc20-transfer.tsx b/apps/hub/src/app/governance/[genre]/create/components/erc20-transfer.tsx
@@ -60,11 +60,11 @@ export function Erc20Transfer({
         variant="black"
         label="Enter Recipient"
         error={
-          errors.to === ProposalErrorCodes.REQUIRED
+          errors?.to === ProposalErrorCodes.REQUIRED
             ? "Recipient must be filled"
-            : errors.to === ProposalErrorCodes.INVALID_ADDRESS
+            : errors?.to === ProposalErrorCodes.INVALID_ADDRESS
               ? "Invalid recipient address"
-              : errors.to
+              : errors?.to
         }
         id={`proposal-to--${idx}`}
         placeholder={truncateHash("0x00000000000000")}
@@ -120,13 +120,13 @@ export function Erc20Transfer({
           filteredSymbols={["BGT"]}
         />
         <FormError>
-          {errors.target === ProposalErrorCodes.REQUIRED
+          {errors?.target === ProposalErrorCodes.REQUIRED
             ? "A Token Must Be Chosen"
-            : errors.amount === ProposalErrorCodes.REQUIRED
+            : errors?.amount === ProposalErrorCodes.REQUIRED
               ? "Amount must be filled"
-              : errors.amount === ProposalErrorCodes.INVALID_AMOUNT
+              : errors?.amount === ProposalErrorCodes.INVALID_AMOUNT
                 ? "Invalid amount."
-                : errors.amount}
+                : errors?.amount}
         </FormError>
         {warning && (
           <div className="text-warning-foreground text-sm leading-tight">

diff --git a/apps/hub/src/app/governance/types.ts b/apps/hub/src/app/governance/types.ts
@@ -41,7 +41,7 @@ export type CustomProposalActionErrors = {
   isFriend?: null | ProposalErrorCodes;
   to?: null | ProposalErrorCodes;
   amount?: null | ProposalErrorCodes;
-};
+} | null;
 
 export type CustomProposalErrors = {
   title?: null | ProposalErrorCodes;