Merge pull request #99 from alleslabs/feat/validate-label

Feat/validate label
alleslabs · Jan 19, 2023 · b1f4228 · b1f4228 · vercel · Jan 19, 2023
2 parents 147e5a0 + 275df75
commit b1f4228
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#99](https://github.com/alleslabs/celatone-frontend/pull/99) Validate label and codeId field in instantiate page
 - [#103](https://github.com/alleslabs/celatone-frontend/pull/103) Add check mark to selected network
 - [#92](https://github.com/alleslabs/celatone-frontend/pull/92) Create select contract component for admin and migrate pages
 - [#101](https://github.com/alleslabs/celatone-frontend/pull/101) Fix incorrect truncating of proposal id in contract detail's migration table

diff --git a/src/lib/components/forms/ControllerInput.tsx b/src/lib/components/forms/ControllerInput.tsx
@@ -54,8 +54,15 @@ export const ControllerInput = <T extends FieldValues>({
   });
 
   const isError = !!error;
+  const isRequired = "required" in rules;
   return (
-    <FormControl size={size} isInvalid={isError} {...componentProps} {...field}>
+    <FormControl
+      size={size}
+      isInvalid={isError}
+      isRequired={isRequired}
+      {...componentProps}
+      {...field}
+    >
       {label && (
         <FormLabel className={`${size}-label`} bgColor={labelBgColor}>
           {label}

diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
@@ -19,7 +19,7 @@ import {
   useSimulateFee,
 } from "lib/app-provider";
 import { useInstantiateTx } from "lib/app-provider/tx/instantiate";
-import { ControllerInput, TextInput } from "lib/components/forms";
+import { ControllerInput } from "lib/components/forms";
 import { AssetInput } from "lib/components/forms/AssetInput";
 import JsonInput from "lib/components/json/JsonInput";
 import { Stepper } from "lib/components/stepper";
@@ -62,32 +62,47 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   const [method, setMethod] = useState<"select-existing" | "fill-manually">(
     "select-existing"
   );
-  const [codeId, setCodeId] = useState("");
-  const [error, setError] = useState("");
   const [simulating, setSimulating] = useState(false);
 
   // ------------------------------------------//
   // ----------------FORM HOOKS----------------//
   // ------------------------------------------//
-  const { control, setValue, watch, handleSubmit, reset } = useForm({
+  const {
+    control,
+    formState: { errors: formErrors },
+    setValue,
+    watch,
+    handleSubmit,
+    reset,
+  } = useForm({
+    mode: "all",
     defaultValues: {
+      codeId: "",
       label: "",
       adminAddress: "",
       initMsg: "",
       assets: [{ denom: "", amount: "" }],
+      simulateError: "",
     },
   });
   const { fields, append, remove } = useFieldArray({
     control,
     name: "assets",
   });
-  const watchAssets = watch("assets");
-  const watchInitMsg = watch("initMsg");
+  const {
+    codeId,
+    assets: watchAssets,
+    initMsg: watchInitMsg,
+    simulateError,
+  } = watch();
+
   const selectedAssets = watchAssets.map((asset) => asset.denom);
 
   const disableInstantiate = useMemo(() => {
-    return !codeId || !address || !!jsonValidate(watchInitMsg);
-  }, [codeId, address, watchInitMsg]);
+    return (
+      !codeId || !address || !!jsonValidate(watchInitMsg) || !!formErrors.label
+    );
+  }, [codeId, address, watchInitMsg, formErrors.label]);
 
   const assetOptions = useMemo(
     () =>
@@ -134,7 +149,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
         if (stream) broadcast(stream);
         setSimulating(false);
       } catch (e) {
-        setError((e as Error).message);
+        setValue("simulateError", (e as Error).message);
         setSimulating(false);
       }
     })();
@@ -147,19 +162,20 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     simulate,
     broadcast,
     onComplete,
+    setValue,
   ]);
 
   // ------------------------------------------//
   // --------------SIDE EFFECTS----------------//
   // ------------------------------------------//
   useEffect(() => {
-    if (codeIdQuery) setCodeId(codeIdQuery);
+    if (codeIdQuery) setValue("codeId", codeIdQuery);
     if (msgQuery) {
       const decodedMsg = decode(msgQuery);
       try {
         const msgObject = JSON.parse(decodedMsg) as InstantiateRedoMsg;
 
-        setCodeId(String(msgObject.code_id));
+        setValue("codeId", String(msgObject.code_id));
         reset({
           label: msgObject.label,
           adminAddress: msgObject.admin,
@@ -176,7 +192,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
         // comment just to avoid eslint no-empty
       }
     }
-  }, [codeIdQuery, msgQuery, reset]);
+  }, [codeIdQuery, msgQuery, reset, setValue]);
 
   return (
     <>
@@ -204,31 +220,35 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             </Radio>
           </Flex>
         </RadioGroup>
-        {method === "select-existing" ? (
-          <CodeSelect
-            mt="16px"
-            mb="32px"
-            onCodeSelect={(code: string) => setCodeId(code)}
-            codeId={codeId}
-          />
-        ) : (
-          <TextInput
-            variant="floating"
-            label="Code ID"
-            helperText="Input existing Code ID manually"
-            my="32px"
-            value={codeId}
-            setInputState={setCodeId}
-          />
-        )}
-        <form>
+        <form style={{ width: "100%" }}>
+          {method === "select-existing" ? (
+            <CodeSelect
+              mt="16px"
+              mb="32px"
+              onCodeSelect={(code: string) => setValue("codeId", code)}
+              codeId={codeId}
+            />
+          ) : (
+            <ControllerInput
+              name="codeId"
+              control={control}
+              error={!codeId ? formErrors.codeId?.message : undefined}
+              label="Code ID"
+              helperText="Input existing Code ID manually"
+              variant="floating"
+              my="32px"
+              rules={{ required: "Code ID is required" }}
+            />
+          )}
           <ControllerInput
             name="label"
             control={control}
+            error={formErrors.label?.message}
             label="Label"
             helperText="Label will help remind you or other contract viewer to understand what this contract do and how it works"
             variant="floating"
             mb="32px"
+            rules={{ required: "Label is required" }}
           />
           <ControllerInput
             name="adminAddress"
@@ -297,7 +317,12 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
         disabled={disableInstantiate}
         loading={simulating}
       />
-      {error && <FailedModal errorLog={error} onClose={() => setError("")} />}
+      {simulateError && (
+        <FailedModal
+          errorLog={simulateError}
+          onClose={() => setValue("simulateError", "")}
+        />
+      )}
     </>
   );
 };