Add parseError instead of lossy

2023-07-26 17:43:30 +02:00
parent faa7a24462
commit 3d8e462e62
4 changed files with 170 additions and 55 deletions
@@ -1,6 +1,8 @@
 import { fromUtf8 } from "@cosmjs/encoding";
 import { MsgExecuteContract } from "cosmjs-types/cosmwasm/wasm/v1/tx";
 import dynamic from "next/dynamic";
+import { useState } from "react";
+import { JSONValue } from "vanilla-jsoneditor";
 import { useChains } from "../../../context/ChainsContext";
 import { printableCoins } from "../../../lib/displayHelpers";
 import HashView from "../HashView";
@@ -13,6 +15,20 @@ interface TxMsgExecuteContractDetailsProps {

 const TxMsgExecuteContractDetails = ({ msgValue }: TxMsgExecuteContractDetailsProps) => {
  const { chain } = useChains();
+  const [parseError, setParseError] = useState("");
+
+  const json: JSONValue = (() => {
+    if (parseError) {
+      return {};
+    }
+
+    try {
+      return JSON.parse(fromUtf8(msgValue.msg));
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : "Failed to decode UTF-8 msg");
+      return {};
+    }
+  })();

  return (
    <>
@@ -29,9 +45,15 @@ const TxMsgExecuteContractDetails = ({ msgValue }: TxMsgExecuteContractDetailsPr
        <label>Funds:</label>
        <div>{printableCoins(msgValue.funds, chain)}</div>
      </li>
-      <li>
-        <JsonEditor readOnly content={{ json: JSON.parse(fromUtf8(msgValue.msg, true)) }} />
-      </li>
+      {parseError ? (
+        <li className="parse-error">
+          <p>{parseError}</p>
+        </li>
+      ) : (
+        <li>
+          <JsonEditor readOnly content={{ json }} />
+        </li>
+      )}
      <style jsx>{`
        li:not(:has(h3)) {
          background: rgba(255, 255, 255, 0.03);
@@ -56,6 +78,12 @@ const TxMsgExecuteContractDetails = ({ msgValue }: TxMsgExecuteContractDetailsPr
          border-radius: 5px;
          display: block;
        }
+        .parse-error p {
+          max-width: 550px;
+          color: red;
+          font-size: 16px;
+          line-height: 1.4;
+        }
      `}</style>
    </>
  );
@@ -1,6 +1,8 @@
-import { fromUtf8 } from "@cosmjs/encoding";
+import { fromUtf8, toHex } from "@cosmjs/encoding";
 import { MsgInstantiateContract2 } from "cosmjs-types/cosmwasm/wasm/v1/tx";
 import dynamic from "next/dynamic";
+import { useState } from "react";
+import { JSONValue } from "vanilla-jsoneditor";
 import { useChains } from "../../../context/ChainsContext";
 import { printableCoins } from "../../../lib/displayHelpers";
 import HashView from "../HashView";
@@ -13,6 +15,20 @@ interface TxMsgInstantiateContract2DetailsProps {

 const TxMsgInstantiateContract2Details = ({ msgValue }: TxMsgInstantiateContract2DetailsProps) => {
  const { chain } = useChains();
+  const [parseError, setParseError] = useState("");
+
+  const json: JSONValue = (() => {
+    if (parseError) {
+      return {};
+    }
+
+    try {
+      return JSON.parse(fromUtf8(msgValue.msg));
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : "Failed to decode UTF-8 msg");
+      return {};
+    }
+  })();

  return (
    <>
@@ -45,9 +61,15 @@ const TxMsgInstantiateContract2Details = ({ msgValue }: TxMsgInstantiateContract
        <label>Funds:</label>
        <div>{printableCoins(msgValue.funds, chain)}</div>
      </li>
-      <li>
-        <JsonEditor readOnly content={{ json: JSON.parse(fromUtf8(msgValue.msg, true)) }} />
-      </li>
+      {parseError ? (
+        <li className="parse-error">
+          <p>{parseError}</p>
+        </li>
+      ) : (
+        <li>
+          <JsonEditor readOnly content={{ json }} />
+        </li>
+      )}
      <style jsx>{`
        li:not(:has(h3)) {
          background: rgba(255, 255, 255, 0.03);
@@ -72,6 +94,12 @@ const TxMsgInstantiateContract2Details = ({ msgValue }: TxMsgInstantiateContract
          border-radius: 5px;
          display: block;
        }
+        .parse-error p {
+          max-width: 550px;
+          color: red;
+          font-size: 16px;
+          line-height: 1.4;
+        }
      `}</style>
    </>
  );
@@ -1,6 +1,8 @@
 import { fromUtf8 } from "@cosmjs/encoding";
 import { MsgInstantiateContract } from "cosmjs-types/cosmwasm/wasm/v1/tx";
 import dynamic from "next/dynamic";
+import { useState } from "react";
+import { JSONValue } from "vanilla-jsoneditor";
 import { useChains } from "../../../context/ChainsContext";
 import { printableCoins } from "../../../lib/displayHelpers";
 import HashView from "../HashView";
@@ -13,6 +15,20 @@ interface TxMsgInstantiateContractDetailsProps {

 const TxMsgInstantiateContractDetails = ({ msgValue }: TxMsgInstantiateContractDetailsProps) => {
  const { chain } = useChains();
+  const [parseError, setParseError] = useState("");
+
+  const json: JSONValue = (() => {
+    if (parseError) {
+      return {};
+    }
+
+    try {
+      return JSON.parse(fromUtf8(msgValue.msg));
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : "Failed to decode UTF-8 msg");
+      return {};
+    }
+  })();

  return (
    <>
@@ -41,9 +57,15 @@ const TxMsgInstantiateContractDetails = ({ msgValue }: TxMsgInstantiateContractD
        <label>Funds:</label>
        <div>{printableCoins(msgValue.funds, chain)}</div>
      </li>
-      <li>
-        <JsonEditor readOnly content={{ json: JSON.parse(fromUtf8(msgValue.msg, true)) }} />
-      </li>
+      {parseError ? (
+        <li className="parse-error">
+          <p>{parseError}</p>
+        </li>
+      ) : (
+        <li>
+          <JsonEditor readOnly content={{ json }} />
+        </li>
+      )}
      <style jsx>{`
        li:not(:has(h3)) {
          background: rgba(255, 255, 255, 0.03);
@@ -68,6 +90,12 @@ const TxMsgInstantiateContractDetails = ({ msgValue }: TxMsgInstantiateContractD
          border-radius: 5px;
          display: block;
        }
+        .parse-error p {
+          max-width: 550px;
+          color: red;
+          font-size: 16px;
+          line-height: 1.4;
+        }
      `}</style>
    </>
  );
@@ -1,6 +1,8 @@
 import { fromUtf8 } from "@cosmjs/encoding";
 import { MsgMigrateContract } from "cosmjs-types/cosmwasm/wasm/v1/tx";
 import dynamic from "next/dynamic";
+import { useState } from "react";
+import { JSONValue } from "vanilla-jsoneditor";
 import HashView from "../HashView";

 const JsonEditor = dynamic(() => import("../../inputs/JsonEditor"), { ssr: false });
@@ -9,50 +11,79 @@ interface TxMsgMigrateContractDetailsProps {
  readonly msgValue: MsgMigrateContract;
 }

-const TxMsgMigrateContractDetails = ({ msgValue }: TxMsgMigrateContractDetailsProps) => (
-  <>
-    <li>
-      <h3>MsgMigrateContract</h3>
-    </li>
-    <li>
-      <label>Contract:</label>
-      <div title={msgValue.contract}>
-        <HashView hash={msgValue.contract} />
-      </div>
-    </li>
-    <li>
-      <label>Code ID:</label>
-      <div>{msgValue.codeId.toString()}</div>
-    </li>
-    <li>
-      <JsonEditor readOnly content={{ json: JSON.parse(fromUtf8(msgValue.msg, true)) }} />
-    </li>
-    <style jsx>{`
-      li:not(:has(h3)) {
-        background: rgba(255, 255, 255, 0.03);
-        padding: 6px 10px;
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-      }
-      li + li:nth-child(2) {
-        margin-top: 25px;
-      }
-      li + li {
-        margin-top: 10px;
-      }
-      li div {
-        padding: 3px 6px;
-      }
-      label {
-        font-size: 12px;
-        background: rgba(255, 255, 255, 0.1);
-        padding: 3px 6px;
-        border-radius: 5px;
-        display: block;
-      }
-    `}</style>
-  </>
-);
+const TxMsgMigrateContractDetails = ({ msgValue }: TxMsgMigrateContractDetailsProps) => {
+  const [parseError, setParseError] = useState("");
+
+  const json: JSONValue = (() => {
+    if (parseError) {
+      return {};
+    }
+
+    try {
+      return JSON.parse(fromUtf8(msgValue.msg));
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : "Failed to decode UTF-8 msg");
+      return {};
+    }
+  })();
+
+  return (
+    <>
+      <li>
+        <h3>MsgMigrateContract</h3>
+      </li>
+      <li>
+        <label>Contract:</label>
+        <div title={msgValue.contract}>
+          <HashView hash={msgValue.contract} />
+        </div>
+      </li>
+      <li>
+        <label>Code ID:</label>
+        <div>{msgValue.codeId.toString()}</div>
+      </li>
+      {parseError ? (
+        <li className="parse-error">
+          <p>{parseError}</p>
+        </li>
+      ) : (
+        <li>
+          <JsonEditor readOnly content={{ json }} />
+        </li>
+      )}
+      <style jsx>{`
+        li:not(:has(h3)) {
+          background: rgba(255, 255, 255, 0.03);
+          padding: 6px 10px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+        }
+        li + li:nth-child(2) {
+          margin-top: 25px;
+        }
+        li + li {
+          margin-top: 10px;
+        }
+        li div {
+          padding: 3px 6px;
+        }
+        label {
+          font-size: 12px;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 3px 6px;
+          border-radius: 5px;
+          display: block;
+        }
+        .parse-error p {
+          max-width: 550px;
+          color: red;
+          font-size: 16px;
+          line-height: 1.4;
+        }
+      `}</style>
+    </>
+  );
+};

 export default TxMsgMigrateContractDetails;