support object Amount

components/Transaction/index.tsx

@@ -82,7 +82,7 @@ const Transaction: FC<TransactionProps> = ({
     let st: TransactionState | undefined;
     if (viewType === "json") {
       // save the editor state first
-      const pst = prepareState(editorValue);
+      const pst = prepareState(editorValue || '', txState);
       if (!pst) return;
 
       st = setState(pst);
@@ -116,16 +116,7 @@ const Transaction: FC<TransactionProps> = ({
       }
     }
     setState({ txIsLoading: false });
-  }, [
-    viewType,
-    editorValue,
-    accounts,
-    txIsDisabled,
-    setState,
-    selectedAccount?.value,
-    prepareOptions,
-    header,
-  ]);
+  }, [viewType, accounts, txIsDisabled, setState, header, editorValue, txState, selectedAccount?.value, prepareOptions]);
 
   const resetState = useCallback(() => {
     modifyTransaction(header, { viewType }, { replaceState: true });

components/Transaction/json.tsx

@@ -45,8 +45,8 @@ export const TxJson: FC<JsonProps> = ({
     else setHasUnsaved(true);
   }, [editorValue, value]);
 
-  const saveState = (value: string) => {
-    const tx = prepareState(value);
+  const saveState = (value: string, txState: TransactionState) => {
+    const tx = prepareState(value, txState);
     if (tx) setState(tx);
   };
 
@@ -61,7 +61,7 @@ export const TxJson: FC<JsonProps> = ({
   const onExit = (value: string) => {
     const options = parseJSON(value);
     if (options) {
-      saveState(value);
+      saveState(value, txState);
       return;
     }
     showAlert("Error!", {
@@ -106,7 +106,7 @@ export const TxJson: FC<JsonProps> = ({
       {hasUnsaved && (
         <Text muted small css={{ position: "absolute", bottom: 0, right: 0 }}>
           This file has unsaved changes.{" "}
-          <Link onClick={() => saveState(editorValue)}>save</Link>{" "}
+          <Link onClick={() => saveState(editorValue, txState)}>save</Link>{" "}
           <Link onClick={discardChanges}>discard</Link>
         </Text>
       )}

components/Transaction/ui.tsx

@@ -9,7 +9,6 @@ import {
   TransactionState,
   transactionsData,
   TxFields,
-  OtherFields,
 } from "../../state/transactions";
 import { useSnapshot } from "valtio";
 import state from "../../state";
@@ -74,11 +73,11 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
     resetOptions(tt.value);
   };
 
-  const usualFields = ["TransactionType", "Amount", "Account", "Destination"];
+  const specialFields = ["TransactionType", "Account", "Destination"];
 
   const otherFields = Object.keys(txFields).filter(
-    k => !usualFields.includes(k)
-  ) as OtherFields;
+    k => !specialFields.includes(k)
+  ) as [keyof TxFields];
 
   return (
     <Container
@@ -135,34 +134,6 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
             onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
           />
         </Flex>
-        {txFields.Amount !== undefined && (
-          <Flex
-            row
-            fluid
-            css={{
-              justifyContent: "flex-end",
-              alignItems: "center",
-              mb: "$3",
-              pr: "1px",
-            }}
-          >
-            <Text muted css={{ mr: "$3" }}>
-              Amount (XRP):{" "}
-            </Text>
-            <Input
-              value={txFields.Amount.value}
-              onChange={e =>
-                setState({
-                  txFields: {
-                    ...txFields,
-                    Amount: { type: "currency", value: e.target.value },
-                  },
-                })
-              }
-              css={{ width: "70%", flex: "inherit" }}
-            />
-          </Flex>
-        )}
         {txFields.Destination !== undefined && (
           <Flex
             row
@@ -202,8 +173,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
             value = _value?.toString();
           }
 
-          let isCurrency =
-            typeof _value === "object" && _value.type === "currency";
+          let isXrp = typeof _value === "object" && _value.type === "xrp";
           return (
             <Flex
               key={field}
@@ -217,7 +187,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
               }}
             >
               <Text muted css={{ mr: "$3" }}>
-                {field + (isCurrency ? " (XRP)" : "")}:{" "}
+                {field + (isXrp ? " (XRP)" : "")}:{" "}
               </Text>
               <Input
                 value={value}