Feat: disable simulating when input is invalid

CHANGELOG.md

@@ -63,6 +63,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#513](https://github.com/alleslabs/celatone-frontend/pull/513) Disable simulating fee when JSON input is invalid
 - [#510](https://github.com/alleslabs/celatone-frontend/pull/510) Support optional fields for array, boolean, and string
 - [#505](https://github.com/alleslabs/celatone-frontend/pull/505) Adjust attach funds form label and icon styling for schema section
 - [#501](https://github.com/alleslabs/celatone-frontend/pull/501) Add more JSON Schema state, e.g. empty object state, boolean field

src/lib/components/InputWithIcon.tsx

@@ -11,6 +11,7 @@ interface InputWithIconProps {
   value: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   size?: InputProps["size"];
+  autoFocus?: boolean;
   action?: string;
 }
 
@@ -19,14 +20,16 @@ const InputWithIcon = ({
   value,
   size,
   action,
+  autoFocus = false,
   onChange,
 }: InputWithIconProps) => (
   <InputGroup>
     <Input
       placeholder={placeholder}
       value={value}
-      onChange={onChange}
       size={size}
+      autoFocus={autoFocus}
+      onChange={onChange}
       onClick={action ? () => AmpTrack(AmpEvent.USE_SEARCH_INPUT) : undefined}
     />
     <InputRightElement

src/lib/components/forms/TextInput.tsx

@@ -31,6 +31,7 @@ export interface TextInputProps extends FormControlProps {
   status?: FormStatus;
   maxLength?: number;
   helperAction?: ReactNode;
+  autoFocus?: boolean;
 }
 
 export const TextInput = ({
@@ -46,6 +47,7 @@ export const TextInput = ({
   status,
   maxLength,
   helperAction,
+  autoFocus = false,
   ...componentProps
 }: TextInputProps) => (
   // Design system size: md = 40px, lg = 56px
@@ -69,6 +71,7 @@ export const TextInput = ({
         pr={status && "36px"}
         onChange={(e) => setInputState(e.target.value)}
         maxLength={maxLength}
+        autoFocus={autoFocus}
       />
       <InputRightElement h="full">
         {status && getStatusIcon(status.state, "16px")}

src/lib/components/json-schema/JsonSchemaDrawer.tsx

@@ -20,13 +20,15 @@ interface JsonSchemaDrawerProps {
   codeHash: string;
   isOpen: boolean;
   onClose: () => void;
+  onSchemaSave?: () => void;
 }
 
 export const JsonSchemaDrawer = ({
   codeId,
   codeHash,
   isOpen,
   onClose,
+  onSchemaSave,
 }: JsonSchemaDrawerProps) => (
   <Drawer
     isOpen={isOpen}
@@ -67,6 +69,7 @@ export const JsonSchemaDrawer = ({
           codeHash={codeHash}
           codeId={codeId}
           closeDrawer={onClose}
+          onSchemaSave={onSchemaSave}
         />
       </DrawerBody>
     </DrawerContent>

src/lib/components/json-schema/UploadTemplate.tsx

@@ -173,12 +173,14 @@ interface UploadTemplateInterface {
   codeHash: string;
   codeId: string;
   closeDrawer: () => void;
+  onSchemaSave?: () => void;
 }
 
 export const UploadTemplate = ({
   codeHash,
   codeId,
   closeDrawer,
+  onSchemaSave,
 }: UploadTemplateInterface) => {
   const { saveNewSchema } = useSchemaStore();
   const [method, setMethod] = useState<Method>(Method.UPLOAD_FILE);
@@ -230,9 +232,18 @@ export const UploadTemplate = ({
     }
     saveNewSchema(codeHash, codeId, JSON.parse(schemaString));
     setUrlLoading(false);
+    onSchemaSave?.();
     closeDrawer();
     return dispatchJsonState({ type: ActionType.RESET, method });
-  }, [closeDrawer, codeHash, codeId, jsonState, method, saveNewSchema]);
+  }, [
+    closeDrawer,
+    codeHash,
+    codeId,
+    jsonState,
+    method,
+    onSchemaSave,
+    saveNewSchema,
+  ]);
 
   const disabledState = useMemo(() => {
     const methodSchemaString = jsonState[method].schemaString;

src/lib/components/json-schema/form/index.tsx

@@ -82,7 +82,7 @@ function fixOneOfKeys(
 
     // if the entry is supposed to be a oneof, then check that it only has one key
     if (valueSchema.oneOf) {
-      console.log("Found oneOf", key, value);
+      // console.log("Found oneOf", key, value);
       deleteExtraneousOneOfKeys(value as Record<string, unknown>);
     }
 

src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx

@@ -111,7 +111,7 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
     schemaUtils.getDisplayLabel(schema, uiSchema) &&
     (!!label || !!schema.title);
 
-  const handleOnChange = ({ target }: ChangeEvent<HTMLInputElement>) =>
+  const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) =>
     onChange(target.value === "" ? options.emptyValue : target.value);
   const handleOnBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
     onBlur(id, target.value);
@@ -158,7 +158,7 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
             id={id}
             name={id}
             value={value || value === 0 ? value : ""}
-            onChange={handleOnChange}
+            onChange={handleChange}
             onBlur={handleOnBlur}
             onFocus={handleOnFocus}
             autoFocus={autofocus}

src/lib/components/json-schema/form/widgets/SelectWidget.tsx

@@ -69,7 +69,7 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
     );
   };
 
-  const handleOnChange = (e: any) =>
+  const handleChange = (e: any) =>
     onChange(enumOptionsValueForIndex(e.value, enumOptions, emptyValue));
 
   const handleOnBlur = ({ target }: React.FocusEvent<HTMLInputElement>) =>
@@ -142,7 +142,7 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
         }
         closeMenuOnSelect={!isMultiple}
         onBlur={handleOnBlur}
-        onChange={isMultiple ? handleOnMultiChange : handleOnChange}
+        onChange={isMultiple ? handleOnMultiChange : handleChange}
         onFocus={handleOnFocus}
         autoFocus={autofocus}
         value={selectedIndex === undefined ? undefined : formValue}

src/lib/components/json-schema/section/SchemaInputSection.tsx

@@ -1,5 +1,5 @@
 import { Button, Flex, Text, useDisclosure } from "@chakra-ui/react";
-import type { RJSFSchema } from "@rjsf/utils";
+import type { RJSFSchema, RJSFValidationError } from "@rjsf/utils";
 import { capitalize } from "lodash";
 import { observer } from "mobx-react-lite";
 
@@ -16,7 +16,8 @@ interface SchemaSectionProps {
   codeId: string;
   jsonSchema: Option<CodeSchema>;
   initialFormData?: Record<string, unknown>;
-  setSchemaInput: (input: string) => void;
+  handleChange: (data: unknown, errors: RJSFValidationError[]) => void;
+  onSchemaSave?: () => void;
 }
 
 export const SchemaInputSection = observer(
@@ -26,7 +27,8 @@ export const SchemaInputSection = observer(
     codeId,
     jsonSchema,
     initialFormData,
-    setSchemaInput,
+    handleChange,
+    onSchemaSave,
   }: SchemaSectionProps) => {
     const { isOpen, onClose, onOpen } = useDisclosure();
     const msgSchema = jsonSchema?.[type];
@@ -61,7 +63,7 @@ export const SchemaInputSection = observer(
                   schema={jsonSchema[type] as RJSFSchema}
                   formId={type}
                   initialFormData={initialFormData}
-                  onChange={(data) => setSchemaInput(JSON.stringify(data))}
+                  onChange={handleChange}
                 />
               </div>
             ) : (
@@ -112,6 +114,7 @@ export const SchemaInputSection = observer(
           onClose={onClose}
           codeHash={codeHash}
           codeId={codeId}
+          onSchemaSave={onSchemaSave}
         />
       </Flex>
     );

src/lib/components/json/JsonInput.tsx

@@ -81,7 +81,7 @@ const JsonInput = ({
 }: JsonInputProps) => {
   const [jsonState, setJsonState] = useState<JsonState>({ state: "empty" });
 
-  const handleOnChange = (value: string) => {
+  const handleChange = (value: string) => {
     setJsonState({ state: "loading" });
     setText(value);
   };
@@ -124,7 +124,7 @@ const JsonInput = ({
       >
         <JsonEditor
           value={text}
-          setValue={handleOnChange}
+          setValue={handleChange}
           isValid={isValidJson}
           showLines={showLines}
         />

src/lib/components/select-code/CodeSelectDrawerButton.tsx

@@ -100,6 +100,7 @@ export const CodeSelectDrawerButton = ({
               <InputWithIcon
                 placeholder="Search with Code ID or Code Name"
                 value={keyword}
+                autoFocus
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   setValue("keyword", e.target.value)
                 }

src/lib/components/select-contract/ContractListDetail.tsx

@@ -123,6 +123,7 @@ export const ContractListDetail = ({
           value={searchKeyword}
           setInputState={setSearchKeyword}
           placeholder="Search with Contract Address, Name, or Description"
+          autoFocus
           size={!isReadOnly ? "lg" : "md"}
         />
         {!isReadOnly && (

src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx

@@ -174,7 +174,7 @@ export const ExecuteBox = ({
   // ------------------------------------------//
   // ------------------CALLBACKS---------------//
   // ------------------------------------------//
-  const handleOnChange = useCallback(
+  const handleChange = useCallback(
     (data: unknown, errors: RJSFValidationError[]) => {
       setIsValidForm(errors.length === 0);
       setMsg(JSON.stringify(data));
@@ -314,7 +314,7 @@ export const ExecuteBox = ({
               formId={`execute-${msgSchema.title}`}
               schema={msgSchema.schema}
               initialFormData={initialMsg}
-              onChange={handleOnChange}
+              onChange={handleChange}
             />
             {simulateFeeError && (
               <Alert variant="error" mb={3} alignItems="center">