fix: script bugs

CHANGELOG.md

@@ -135,6 +135,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#590](https://github.com/alleslabs/celatone-frontend/pull/590) Fix upload script various bugs
 - [#594](https://github.com/alleslabs/celatone-frontend/pull/594) LP assets filtering and delegation ui/ux improvement
 - [#584](https://github.com/alleslabs/celatone-frontend/pull/584) Throw an error when tx failed on postTx
 - [#555](https://github.com/alleslabs/celatone-frontend/pull/555) Rewrite publish status resolver into an effect

src/lib/components/abi/args-form/field/utils/rules.ts

@@ -3,12 +3,17 @@ import big from "big.js";
 import { parseInt } from "lodash";
 import type { FieldValues, UseControllerProps } from "react-hook-form";
 
-import { DECIMAL_TYPES, OBJECT_TYPE, UINT_TYPES } from "../constants";
+import {
+  DECIMAL_TYPES,
+  FIXED_POINT_TYPES,
+  OBJECT_TYPE,
+  UINT_TYPES,
+} from "../constants";
 import type { Nullable, Option } from "lib/types";
 import { getArgType } from "lib/utils";
 
 const validateNull = (v: Option<string>) =>
-  v !== undefined ? undefined : "cannot be null";
+  v !== null ? undefined : "cannot be null";
 
 const validateUint = (uintType: string) => (v: string) => {
   try {
@@ -29,21 +34,34 @@ const validateAddress =
   (isValidArgAddress: (input: string) => boolean) => (v: string) =>
     isValidArgAddress(v) ? undefined : "Invalid address";
 
+const validateFixedPoint = (bcsFixedPointType: string) => (v: string) => {
+  try {
+    const div = big(2).pow(
+      parseInt(bcsFixedPointType.slice("fixed_point".length))
+    );
+    const value = big(v).times(div);
+    const maxValue = div.mul(div);
+    if (value.lt(0) || value.gte(maxValue)) throw new Error();
+    return undefined;
+  } catch {
+    return `Input must be ‘${bcsFixedPointType}’`;
+  }
+};
+
 const validateDecimal = (bcsDecimalType: string) => (v: string) => {
-  const [integer, decimal] = v.split(".");
+  const [, decimal] = v.split(".");
   if (decimal && decimal.length > 18)
     return "Decimal length must be less than 18";
   try {
-    const value = big(integer)
-      .times("1000000000000000000")
-      .add(decimal || "0");
-    const maxValue = big(2).pow(parseInt(bcsDecimalType.slice(7)));
+    const value = big(v).times("1000000000000000000");
+    const maxValue = big(2).pow(
+      parseInt(bcsDecimalType.slice("decimal".length))
+    );
     if (value.lt(0) || value.gte(maxValue)) throw new Error();
     return undefined;
   } catch {
     return `Input must be ‘${bcsDecimalType}’`;
   }
-  return undefined;
 };
 
 const validateVector = (
@@ -67,6 +85,8 @@ const validateVector = (
     validateElement = validateAddress(isValidArgAddress);
   if (elementType.startsWith(OBJECT_TYPE))
     validateElement = validateAddress(isValidArgObject);
+  if (FIXED_POINT_TYPES.includes(elementType))
+    validateElement = validateFixedPoint(getArgType(elementType));
   if (DECIMAL_TYPES.includes(elementType))
     validateElement = validateDecimal(getArgType(elementType));
   // TODO: handle Vector?
@@ -131,6 +151,16 @@ export const getRules = <T extends FieldValues>(
       },
     };
   }
+  if (FIXED_POINT_TYPES.includes(type)) {
+    const bcsType = getArgType(type);
+    rules.validate = {
+      ...rules.validate,
+      [bcsType]: (v: Nullable<string>) => {
+        if (v === null) return undefined;
+        return validateFixedPoint(bcsType)(v);
+      },
+    };
+  }
   if (DECIMAL_TYPES.includes(type)) {
     const bcsType = getArgType(type);
     rules.validate = {

src/lib/components/abi/args-form/index.tsx

@@ -33,7 +33,7 @@ export const ArgsForm = ({
     control,
     getValues,
     clearErrors,
-    formState: { errors },
+    formState: { errors, isValid },
   } = useForm<Record<string, Nullable<string>>>({
     defaultValues: initialData,
     mode: "all",
@@ -45,9 +45,14 @@ export const ArgsForm = ({
   }, [trigger]);
 
   useEffect(
-    () => propsOnErrors?.(formatErrors(errors)),
+    () => {
+      const validating: [string, string][] = isValid
+        ? []
+        : [["form", "not-valid"]];
+      propsOnErrors?.([...formatErrors(errors), ...validating]);
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(errors), propsOnErrors]
+    [JSON.stringify(errors), isValid]
   );
 
   return (

src/lib/components/upload/UploadCard.tsx

@@ -81,12 +81,12 @@ export const UploadCard = ({
         </Flex>
         <Flex align="center" gap={4}>
           <Button
-            leftIcon={<CustomIcon name="swap" boxSize={3} />}
+            leftIcon={<CustomIcon name="delete" boxSize={3} />}
             size="sm"
             variant={themeConfig.buttonVariant}
             onClick={deleteFile}
           >
-            Change file
+            Remove file
           </Button>
           {status === "error" && (
             <CustomIcon

src/lib/pages/deploy-script/index.tsx

@@ -1,6 +1,6 @@
 import { Flex, Heading, Text } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import {
   useCurrentChain,
@@ -54,7 +54,9 @@ export const DeployScript = () => {
     typeArgs: {},
     args: {},
   });
-  const [abiErrors, setAbiErrors] = useState<[string, string][]>([]);
+  const [abiErrors, setAbiErrors] = useState<[string, string][]>([
+    ["form", "initial"],
+  ]);
 
   const enableDeploy = useMemo(
     () =>
@@ -79,7 +81,7 @@ export const DeployScript = () => {
     setEstimatedFee(undefined);
     setSimulateError("");
     setInputData({ typeArgs: {}, args: {} });
-    setAbiErrors([]);
+    setAbiErrors([["form", "initial"]]);
   }, []);
 
   const { isFetching: isSimulating } = useSimulateFeeQuery({
@@ -128,24 +130,15 @@ export const DeployScript = () => {
     inputData,
   ]);
 
-  useEffect(() => {
-    const script = fileState.decodeRes;
-    if (script) {
-      setInputData({
-        typeArgs: getAbiInitialData(script.generic_type_params.length),
-        args: getAbiInitialData(script.params.length),
-      });
-    }
-  }, [fileState.decodeRes]);
-
   return (
     <>
       <WasmPageContainer>
         <Heading as="h4" variant="h4">
           Script
         </Heading>
         <Text fontWeight={600} variant="body2" color="text.dark" mt={2} mb={12}>
-          Upload .mv files to deploy one-time use Script which execute messages.
+          Upload a .mv file to deploy one-time use Script which execute
+          messages.
         </Text>
         <ConnectWalletAlert
           subtitle="You need to connect your wallet to perform this action"
@@ -161,7 +154,16 @@ export const DeployScript = () => {
             file: Option<File>,
             base64File: string,
             decodeRes: Option<ExposedFunction>
-          ) => setFileState({ file, base64File, decodeRes })}
+          ) => {
+            setFileState({ file, base64File, decodeRes });
+            if (decodeRes)
+              setInputData({
+                typeArgs: getAbiInitialData(
+                  decodeRes.generic_type_params.length
+                ),
+                args: getAbiInitialData(decodeRes.params.length),
+              });
+          }}
         />
         <Heading as="h6" variant="h6" mt={8} mb={4} alignSelf="start">
           Script input

src/lib/pages/interact/component/form/ExecuteArea.tsx

@@ -53,7 +53,9 @@ export const ExecuteArea = ({
     typeArgs: getAbiInitialData(executeFn.generic_type_params.length),
     args: getAbiInitialData(executeFn.params.length),
   });
-  const [abiErrors, setAbiErrors] = useState<[string, string][]>([]);
+  const [abiErrors, setAbiErrors] = useState<[string, string][]>([
+    ["form", "initial"],
+  ]);
 
   const [composedTxMsgs, setComposedTxMsgs] = useState<EncodeObject[]>([]);
   const [simulateFeeError, setSimulateFeeError] = useState<string>();

src/lib/pages/interact/component/form/ViewArea.tsx

@@ -46,8 +46,9 @@ export const ViewArea = ({
     typeArgs: getAbiInitialData(fn.generic_type_params.length),
     args: getAbiInitialData(fn.params.length),
   });
-
-  const [abiErrors, setAbiErrors] = useState<[string, string][]>([]);
+  const [abiErrors, setAbiErrors] = useState<[string, string][]>([
+    ["form", "initial"],
+  ]);
   const [res, setRes] = useState<JsonDataType>(undefined);
   const [error, setError] = useState<Option<string>>(undefined);