Migrate transaction json editor to comp.

components/Transaction/json.tsx

@@ -1,9 +1,4 @@
-import Editor, { loader, useMonaco } from "@monaco-editor/react";
 import { FC, useCallback, useEffect, useState } from "react";
-import { useTheme } from "next-themes";
-
-import dark from "../../theme/editor/amy.json";
-import light from "../../theme/editor/xcode_default.json";
 import { useSnapshot } from "valtio";
 import state, {
   prepareState,
@@ -11,18 +6,13 @@ import state, {
   TransactionState,
 } from "../../state";
 import Text from "../Text";
-import Flex from "../Flex";
-import { Link } from "..";
+import { Flex, Link } from "..";
 import { showAlert } from "../../state/actions/showAlert";
 import { parseJSON } from "../../utils/json";
 import { extractSchemaProps } from "../../utils/schema";
 import amountSchema from "../../content/amount-schema.json";
-
-loader.config({
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
-  },
-});
+import Monaco from "../Monaco";
+import type monaco from "monaco-editor";
 
 interface JsonProps {
   value?: string;
@@ -40,7 +30,6 @@ export const TxJson: FC<JsonProps> = ({
 }) => {
   const { editorSettings, accounts } = useSnapshot(state);
   const { editorValue = value, estimatedFee } = txState;
-  const { theme } = useTheme();
   const [hasUnsaved, setHasUnsaved] = useState(false);
   const [currTxType, setCurrTxType] = useState<string | undefined>(
     txState.selectedTransaction?.value
@@ -95,9 +84,6 @@ export const TxJson: FC<JsonProps> = ({
     });
   };
 
-  const path = `file:///${header}`;
-  const monaco = useMonaco();
-
   const getSchemas = useCallback(async (): Promise<any[]> => {
     const txObj = transactionsData.find(
       td => td.TransactionType === currTxType
@@ -177,55 +163,63 @@ export const TxJson: FC<JsonProps> = ({
     ];
   }, [accounts, currTxType, estimatedFee, header]);
 
+  const [monacoInst, setMonacoInst] = useState<typeof monaco>();
   useEffect(() => {
-    if (!monaco) return;
+    if (!monacoInst) return;
     getSchemas().then(schemas => {
-      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      monacoInst.languages.json.jsonDefaults.setDiagnosticsOptions({
         validate: true,
         schemas,
       });
     });
-  }, [getSchemas, monaco]);
+  }, [getSchemas, monacoInst]);
 
   return (
-    <Flex
-      fluid
-      column
-      css={{ height: "calc(100% - 45px)", position: "relative" }}
-    >
-      <Editor
-        className="hooks-editor"
-        language={"json"}
-        path={path}
-        height="100%"
-        beforeMount={monaco => {
-          monaco.editor.defineTheme("dark", dark as any);
-          monaco.editor.defineTheme("light", light as any);
-        }}
-        value={editorValue}
-        onChange={val => setState({ editorValue: val })}
-        onMount={(editor, monaco) => {
-          editor.updateOptions({
-            minimap: { enabled: false },
-            glyphMargin: true,
-            tabSize: editorSettings.tabSize,
-            dragAndDrop: true,
-            fontSize: 14,
-          });
+    <Monaco
+      rootProps={{
+        css: { height: "calc(100% - 45px)" },
+      }}
+      language={"json"}
+      id={header}
+      height="100%"
+      value={editorValue}
+      onChange={val => setState({ editorValue: val })}
+      onMount={(editor, monaco) => {
+        editor.updateOptions({
+          minimap: { enabled: false },
+          glyphMargin: true,
+          tabSize: editorSettings.tabSize,
+          dragAndDrop: true,
+          fontSize: 14,
+        });
 
-          // register onExit cb
-          const model = editor.getModel();
-          model?.onWillDispose(() => onExit(model.getValue()));
-        }}
-        theme={theme === "dark" ? "dark" : "light"}
-      />
-      {hasUnsaved && (
-        <Text muted small css={{ position: "absolute", bottom: 0, right: 0 }}>
-          This file has unsaved changes.{" "}
-          <Link onClick={() => saveState(editorValue, currTxType)}>save</Link>{" "}
-          <Link onClick={discardChanges}>discard</Link>
-        </Text>
-      )}
-    </Flex>
+        setMonacoInst(monaco);
+        // register onExit cb
+        const model = editor.getModel();
+        model?.onWillDispose(() => onExit(model.getValue()));
+      }}
+      overlay={
+        hasUnsaved ? (
+          <Flex
+            row
+            align="center"
+            css={{ fontSize: "$xs", color: "$textMuted" }}
+          >
+            <Text muted small>
+              This file has unsaved changes.
+            </Text>
+            <Link
+              css={{ ml: "$1" }}
+              onClick={() => saveState(editorValue, currTxType)}
+            >
+              save
+            </Link>
+            <Link css={{ ml: "$1" }} onClick={discardChanges}>
+              discard
+            </Link>
+          </Flex>
+        ) : undefined
+      }
+    />
   );
 };

components/Transaction/ui.tsx

@@ -38,22 +38,23 @@ export const TxUI: FC<UIProps> = ({
     txFields,
   } = txState;
 
-  const transactionsOptions = transactionsData.map((tx) => ({
+
+  const transactionsOptions = transactionsData.map(tx => ({
     value: tx.TransactionType,
     label: tx.TransactionType,
   }));
 
-  const accountOptions: SelectOption[] = accounts.map((acc) => ({
+  const accountOptions: SelectOption[] = accounts.map(acc => ({
     label: acc.name,
     value: acc.address,
   }));
 
   const destAccountOptions: SelectOption[] = accounts
-    .map((acc) => ({
+    .map(acc => ({
       label: acc.name,
       value: acc.address,
     }))
-    .filter((acc) => acc.value !== selectedAccount?.value);
+    .filter(acc => acc.value !== selectedAccount?.value);
 
   const [feeLoading, setFeeLoading] = useState(false);
 
@@ -97,32 +98,37 @@ export const TxUI: FC<UIProps> = ({
     [estimateFee, handleSetField]
   );
 
-  const handleChangeTxType = (tt: SelectOption) => {
-    setState({ selectedTransaction: tt });
+  const handleChangeTxType = useCallback(
+    (tt: SelectOption) => {
+      setState({ selectedTransaction: tt });
 
-    const newState = resetOptions(tt.value);
+      const newState = resetOptions(tt.value);
 
-    handleEstimateFee(newState, true);
-  };
+      handleEstimateFee(newState, true);
+    },
+    [handleEstimateFee, resetOptions, setState]
+  );
 
   const specialFields = ["TransactionType", "Account", "Destination"];
 
   const otherFields = Object.keys(txFields).filter(
-    (k) => !specialFields.includes(k)
+    k => !specialFields.includes(k)
   ) as [keyof TxFields];
 
   const switchToJson = () =>
     setState({ editorSavedValue: null, viewType: "json" });
 
+  // default tx
   useEffect(() => {
+    if (selectedTransaction?.value) return;
+
     const defaultOption = transactionsOptions.find(
-      (tt) => tt.value === "Payment"
+      tt => tt.value === "Payment"
     );
     if (defaultOption) {
       handleChangeTxType(defaultOption);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [handleChangeTxType, selectedTransaction?.value, transactionsOptions]);
 
   return (
     <Container
@@ -204,7 +210,7 @@ export const TxUI: FC<UIProps> = ({
             />
           </Flex>
         )}
-        {otherFields.map((field) => {
+        {otherFields.map(field => {
           let _value = txFields[field];
 
           let value: string | undefined;
@@ -255,7 +261,7 @@ export const TxUI: FC<UIProps> = ({
                   <Input
                     type={isFee ? "number" : "text"}
                     value={value}
-                    onChange={(e) => {
+                    onChange={e => {
                       if (isFee) {
                         const val = e.target.value
                           .replaceAll(".", "")
@@ -267,7 +273,7 @@ export const TxUI: FC<UIProps> = ({
                     }}
                     onKeyPress={
                       isFee
-                        ? (e) => {
+                        ? e => {
                             if (e.key === "." || e.key === ",") {
                               e.preventDefault();
                             }