Remove editorSavedValue from tx state

components/Transaction/index.tsx

@@ -1,5 +1,5 @@
 import { Play } from "phosphor-react";
-import { FC, useCallback, useEffect, useMemo } from "react";
+import { FC, useCallback, useEffect } from "react";
 import { useSnapshot } from "valtio";
 import state from "../../state";
 import {
@@ -15,7 +15,7 @@ import Flex from "../Flex";
 import { TxJson } from "./json";
 import { TxUI } from "./ui";
 import { default as _estimateFee } from "../../utils/estimateFee";
-import toast from 'react-hot-toast';
+import toast from "react-hot-toast";
 
 export interface TransactionProps {
   header: string;
@@ -34,7 +34,6 @@ const Transaction: FC<TransactionProps> = ({
     txIsDisabled,
     txIsLoading,
     viewType,
-    editorSavedValue,
     editorValue,
   } = txState;
 
@@ -46,7 +45,7 @@ const Transaction: FC<TransactionProps> = ({
   );
 
   const prepareOptions = useCallback(
-    (state: TransactionState = txState) => {
+    (state: Partial<TransactionState> = txState) => {
       const {
         selectedTransaction,
         selectedDestAccount,
@@ -57,7 +56,7 @@ const Transaction: FC<TransactionProps> = ({
       const TransactionType = selectedTransaction?.value || null;
       const Destination =
         selectedDestAccount?.value ||
-        ("Destination" in txFields ? null : undefined);
+        (txFields && "Destination" in txFields ? null : undefined);
       const Account = selectedAccount?.value || null;
 
       return prepareTransaction({
@@ -140,11 +139,14 @@ const Transaction: FC<TransactionProps> = ({
     modifyTransaction(header, { viewType }, { replaceState: true });
   }, [header, viewType]);
 
-  const jsonValue = useMemo(
+  const getJsonString = useCallback(
-    () =>
+    (state?: Partial<TransactionState>) =>
-      editorSavedValue ||
+      JSON.stringify(
-      JSON.stringify(prepareOptions?.() || {}, null, editorSettings.tabSize),
+        prepareOptions?.(state) || {},
-    [editorSavedValue, editorSettings.tabSize, prepareOptions]
+        null,
+        editorSettings.tabSize
+      ),
+    [editorSettings.tabSize, prepareOptions]
   );
 
   const estimateFee = useCallback(
@@ -156,10 +158,10 @@ const Transaction: FC<TransactionProps> = ({
       );
       if (!account) {
         if (!opts?.silent) {
-          toast.error("Please select account from the list.")
+          toast.error("Please select account from the list.");
         }
-        return
+        return;
-      };
+      }
 
       ptx.Account = account.address;
       ptx.Sequence = account.sequence;
@@ -176,7 +178,7 @@ const Transaction: FC<TransactionProps> = ({
     <Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
       {viewType === "json" ? (
         <TxJson
-          value={jsonValue}
+          getJsonString={getJsonString}
           header={header}
           state={txState}
           setState={setState}
@@ -199,7 +201,7 @@ const Transaction: FC<TransactionProps> = ({
         <Button
           onClick={() => {
             if (viewType === "ui") {
-              setState({ editorSavedValue: null, viewType: "json" });
+              setState({ viewType: "json" });
             } else setState({ viewType: "ui" });
           }}
           outline

components/Transaction/json.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { useSnapshot } from "valtio";
 import state, {
   prepareState,
@@ -15,7 +15,7 @@ import Monaco from "../Monaco";
 import type monaco from "monaco-editor";
 
 interface JsonProps {
-  value?: string;
+  getJsonString?: (state?: Partial<TransactionState>) => string;
   header?: string;
   setState: (pTx?: Partial<TransactionState> | undefined) => void;
   state: TransactionState;
@@ -23,23 +23,17 @@ interface JsonProps {
 }
 
 export const TxJson: FC<JsonProps> = ({
-  value = "",
+  getJsonString,
   state: txState,
   header,
   setState,
 }) => {
   const { editorSettings, accounts } = useSnapshot(state);
-  const { editorValue = value, estimatedFee } = txState;
+  const { editorValue = getJsonString?.(), estimatedFee } = txState;
-  const [hasUnsaved, setHasUnsaved] = useState(false);
   const [currTxType, setCurrTxType] = useState<string | undefined>(
     txState.selectedTransaction?.value
   );
 
-  useEffect(() => {
-    setState({ editorValue: value });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
-
   useEffect(() => {
     const parsed = parseJSON(editorValue);
     if (!parsed) return;
@@ -52,14 +46,14 @@ export const TxJson: FC<JsonProps> = ({
     }
   }, [editorValue]);
 
-  useEffect(() => {
-    if (editorValue === value) setHasUnsaved(false);
-    else setHasUnsaved(true);
-  }, [editorValue, value]);
-
   const saveState = (value: string, transactionType?: string) => {
     const tx = prepareState(value, transactionType);
-    if (tx) setState(tx);
+    if (tx) {
+      setState(tx);
+      setState({
+        editorValue: getJsonString?.(tx),
+      });
+    }
   };
 
   const discardChanges = () => {
@@ -67,7 +61,7 @@ export const TxJson: FC<JsonProps> = ({
       body: "Are you sure to discard these changes?",
       confirmText: "Yes",
       onCancel: () => {},
-      onConfirm: () => setState({ editorValue: value }),
+      onConfirm: () => setState({ editorValue: getJsonString?.() }),
     });
   };
 
@@ -80,8 +74,8 @@ export const TxJson: FC<JsonProps> = ({
     showAlert("Error!", {
       body: `Malformed Transaction in ${header}, would you like to discard these changes?`,
       confirmText: "Discard",
-      onConfirm: () => setState({ editorValue: value }),
+      onConfirm: () => setState({ editorValue: getJsonString?.() }),
-      onCancel: () => setState({ viewType: "json", editorSavedValue: value }),
+      onCancel: () => setState({ viewType: "json" }),
     });
   };
 
@@ -175,6 +169,11 @@ export const TxJson: FC<JsonProps> = ({
     });
   }, [getSchemas, monacoInst]);
 
+  const hasUnsaved = useMemo(
+    () => editorValue !== getJsonString?.(),
+    [editorValue, getJsonString]
+  );
+
   return (
     <Monaco
       rootProps={{
@@ -204,14 +203,14 @@ export const TxJson: FC<JsonProps> = ({
           <Flex
             row
             align="center"
-            css={{ fontSize: "$xs", color: "$textMuted", ml: 'auto' }}
+            css={{ fontSize: "$xs", color: "$textMuted", ml: "auto" }}
           >
             <Text muted small>
               This file has unsaved changes.
             </Text>
             <Link
               css={{ ml: "$1" }}
-              onClick={() => saveState(editorValue, currTxType)}
+              onClick={() => saveState(editorValue || "", currTxType)}
             >
               save
             </Link>

components/Transaction/ui.tsx

@@ -38,7 +38,6 @@ export const TxUI: FC<UIProps> = ({
     txFields,
   } = txState;
 
-
   const transactionsOptions = transactionsData.map(tx => ({
     value: tx.TransactionType,
     label: tx.TransactionType,
@@ -115,8 +114,7 @@ export const TxUI: FC<UIProps> = ({
     k => !specialFields.includes(k)
   ) as [keyof TxFields];
 
-  const switchToJson = () =>
+  const switchToJson = () => setState({ viewType: "json" });
-    setState({ editorSavedValue: null, viewType: "json" });
 
   // default tx
   useEffect(() => {

state/transactions.ts

@@ -18,7 +18,6 @@ export interface TransactionState {
     txIsDisabled: boolean;
     txFields: TxFields;
     viewType: 'json' | 'ui',
-    editorSavedValue: null | string,
     editorValue?: string,
     estimatedFee?: string
 }
@@ -36,15 +35,14 @@ export const defaultTransaction: TransactionState = {
     txIsLoading: false,
     txIsDisabled: false,
     txFields: {},
-    viewType: 'ui',
+    viewType: 'ui'
-    editorSavedValue: null
 };
 
 export const transactionsState = proxy({
     transactions: [
         {
             header: "test1.json",
-            state: defaultTransaction,
+            state: { ...defaultTransaction },
         },
     ],
     activeHeader: "test1.json"
@@ -218,7 +216,6 @@ export const prepareState = (value: string, transactionType?: string) => {
     });
 
     tx.txFields = rest;
-    tx.editorSavedValue = null;
 
     return tx
 }