Avoid sending form with JSON errors

components/forms/CreateTxForm/MsgForm/MsgExecuteContractForm.tsx

@@ -1,7 +1,7 @@
 import { MsgExecuteContractEncodeObject } from "@cosmjs/cosmwasm-stargate";
 import { toUtf8 } from "@cosmjs/encoding";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { MsgGetter } from "..";
 import { useChains } from "../../../../context/ChainsContext";
 import { ChainInfo } from "../../../../context/ChainsContext/types";
@@ -45,6 +45,7 @@ const MsgExecuteContractForm = ({
   const [customDenom, setCustomDenom] = useState("");
   const [amount, setAmount] = useState("0");
 
+  const jsonError = useRef(false);
   const [contractAddressError, setContractAddressError] = useState("");
   const [customDenomError, setCustomDenomError] = useState("");
   const [amountError, setAmountError] = useState("");
@@ -55,6 +56,10 @@ const MsgExecuteContractForm = ({
     setAmountError("");
 
     const isMsgValid = (): boolean => {
+      if (jsonError.current) {
+        return false;
+      }
+
       const addressErrorMsg = checkAddress(contractAddress, chain.addressPrefix);
       if (addressErrorMsg) {
         setContractAddressError(`Invalid address for network ${chain.chainId}: ${addressErrorMsg}`);
@@ -142,9 +147,10 @@ const MsgExecuteContractForm = ({
         <JsonEditor
           label="Msg JSON"
           content={{ text: msgContent }}
-          onChange={(newMsgContent) =>
-            setMsgContent("text" in newMsgContent ? newMsgContent.text ?? "{}" : "{}")
-          }
+          onChange={(newMsgContent, _, { contentErrors }) => {
+            setMsgContent("text" in newMsgContent ? newMsgContent.text ?? "{}" : "{}");
+            jsonError.current = !!contentErrors;
+          }}
         />
       </div>
       <div className="form-item form-select">

components/forms/CreateTxForm/MsgForm/MsgInstantiateContract2Form.tsx

@@ -1,7 +1,7 @@
 import { MsgInstantiateContract2EncodeObject } from "@cosmjs/cosmwasm-stargate";
 import { fromHex, toUtf8 } from "@cosmjs/encoding";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { MsgGetter } from "..";
 import { useChains } from "../../../../context/ChainsContext";
 import { ChainInfo } from "../../../../context/ChainsContext/types";
@@ -48,6 +48,7 @@ const MsgInstantiateContract2Form = ({
   const [customDenom, setCustomDenom] = useState("");
   const [amount, setAmount] = useState("0");
 
+  const jsonError = useRef(false);
   const [codeIdError, setCodeIdError] = useState("");
   const [labelError, setLabelError] = useState("");
   const [adminAddressError, setAdminAddressError] = useState("");
@@ -64,6 +65,10 @@ const MsgInstantiateContract2Form = ({
     setAmountError("");
 
     const isMsgValid = (): boolean => {
+      if (jsonError.current) {
+        return false;
+      }
+
       if (!codeId || !Number.isSafeInteger(Number(codeId)) || Number(codeId) <= 0) {
         setCodeIdError("Code ID must be a positive integer");
         return false;
@@ -218,9 +223,10 @@ const MsgInstantiateContract2Form = ({
         <JsonEditor
           label="Msg JSON"
           content={{ text: msgContent }}
-          onChange={(newMsgContent) =>
-            setMsgContent("text" in newMsgContent ? newMsgContent.text ?? "{}" : "{}")
-          }
+          onChange={(newMsgContent, _, { contentErrors }) => {
+            setMsgContent("text" in newMsgContent ? newMsgContent.text ?? "{}" : "{}");
+            jsonError.current = !!contentErrors;
+          }}
         />
       </div>
       <div className="form-item form-select">

components/forms/CreateTxForm/MsgForm/MsgInstantiateContractForm.tsx

@@ -1,7 +1,7 @@
 import { MsgInstantiateContractEncodeObject } from "@cosmjs/cosmwasm-stargate";
 import { toUtf8 } from "@cosmjs/encoding";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { MsgGetter } from "..";
 import { useChains } from "../../../../context/ChainsContext";
 import { ChainInfo } from "../../../../context/ChainsContext/types";
@@ -47,6 +47,7 @@ const MsgInstantiateContractForm = ({
   const [customDenom, setCustomDenom] = useState("");
   const [amount, setAmount] = useState("0");
 
+  const jsonError = useRef(false);
   const [codeIdError, setCodeIdError] = useState("");
   const [labelError, setLabelError] = useState("");
   const [adminAddressError, setAdminAddressError] = useState("");
@@ -61,6 +62,10 @@ const MsgInstantiateContractForm = ({
     setAmountError("");
 
     const isMsgValid = (): boolean => {
+      if (jsonError.current) {
+        return false;
+      }
+
       if (!codeId || !Number.isSafeInteger(Number(codeId)) || Number(codeId) <= 0) {
         setCodeIdError("Code ID must be a positive integer");
         return false;
@@ -183,9 +188,10 @@ const MsgInstantiateContractForm = ({
         <JsonEditor
           label="Msg JSON"
           content={{ text: msgContent }}
-          onChange={(newMsgContent) =>
-            setMsgContent("text" in newMsgContent ? newMsgContent.text ?? "{}" : "{}")
-          }
+          onChange={(newMsgContent, _, { contentErrors }) => {
+            setMsgContent("text" in newMsgContent ? newMsgContent.text ?? "{}" : "{}");
+            jsonError.current = !!contentErrors;
+          }}
         />
       </div>
       <div className="form-item form-select">

components/forms/CreateTxForm/MsgForm/MsgMigrateContractForm.tsx

@@ -1,7 +1,7 @@
 import { MsgMigrateContractEncodeObject } from "@cosmjs/cosmwasm-stargate";
 import { toUtf8 } from "@cosmjs/encoding";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { MsgGetter } from "..";
 import { useChains } from "../../../../context/ChainsContext";
 import { checkAddress, exampleAddress } from "../../../../lib/displayHelpers";
@@ -28,6 +28,7 @@ const MsgMigrateContractForm = ({
   const [codeId, setCodeId] = useState("");
   const [msgContent, setMsgContent] = useState("{}");
 
+  const jsonError = useRef(false);
   const [contractAddressError, setContractAddressError] = useState("");
   const [codeIdError, setCodeIdError] = useState("");
 
@@ -36,6 +37,10 @@ const MsgMigrateContractForm = ({
     setContractAddressError("");
 
     const isMsgValid = (): boolean => {
+      if (jsonError.current) {
+        return false;
+      }
+
       const addressErrorMsg = checkAddress(contractAddress, chain.addressPrefix);
       if (addressErrorMsg) {
         setContractAddressError(`Invalid address for network ${chain.chainId}: ${addressErrorMsg}`);
@@ -108,9 +113,10 @@ const MsgMigrateContractForm = ({
         <JsonEditor
           label="Msg JSON"
           content={{ text: msgContent }}
-          onChange={(newMsgContent) =>
-            setMsgContent("text" in newMsgContent ? newMsgContent.text ?? "{}" : "{}")
-          }
+          onChange={(newMsgContent, _, { contentErrors }) => {
+            setMsgContent("text" in newMsgContent ? newMsgContent.text ?? "{}" : "{}");
+            jsonError.current = !!contentErrors;
+          }}
         />
       </div>
       <style jsx>{`