Fix TxFields type.

Fix binary codec (#250)

components/Transaction/index.tsx

@@ -1,11 +1,14 @@
 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 {
+  defaultTransactionType,
+  getTxFields,
   modifyTransaction,
   prepareState,
   prepareTransaction,
+  SelectOption,
   TransactionState,
 } from "../../state/transactions";
 import { sendTransaction } from "../../state/actions";
@@ -15,7 +18,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 +37,6 @@ const Transaction: FC<TransactionProps> = ({
     txIsDisabled,
     txIsLoading,
     viewType,
-    editorSavedValue,
     editorValue,
   } = txState;
 
@@ -46,7 +48,7 @@ const Transaction: FC<TransactionProps> = ({
   );
 
   const prepareOptions = useCallback(
-    (state: TransactionState = txState) => {
+    (state: Partial<TransactionState> = txState) => {
       const {
         selectedTransaction,
         selectedDestAccount,
@@ -55,9 +57,7 @@ const Transaction: FC<TransactionProps> = ({
       } = state;
 
       const TransactionType = selectedTransaction?.value || null;
-      const Destination =
+      const Destination = selectedDestAccount?.value || txFields?.Destination;
-        selectedDestAccount?.value ||
-        ("Destination" in txFields ? null : undefined);
       const Account = selectedAccount?.value || null;
 
       return prepareTransaction({
@@ -109,8 +109,9 @@ const Transaction: FC<TransactionProps> = ({
       }
       const options = prepareOptions(st);
 
-      if (options.Destination === null) {
+      const fields = getTxFields(options.TransactionType);
-        throw Error("Destination account cannot be null");
+      if (fields.Destination && !options.Destination) {
+        throw Error("Destination account is required!");
       }
 
       await sendTransaction(account, options, { logPrefix });
@@ -136,15 +137,38 @@ const Transaction: FC<TransactionProps> = ({
     prepareOptions,
   ]);
 
-  const resetState = useCallback(() => {
+  const getJsonString = useCallback(
-    modifyTransaction(header, { viewType }, { replaceState: true });
+    (state?: Partial<TransactionState>) =>
-  }, [header, viewType]);
+      JSON.stringify(
+        prepareOptions?.(state) || {},
+        null,
+        editorSettings.tabSize
+      ),
+    [editorSettings.tabSize, prepareOptions]
+  );
 
-  const jsonValue = useMemo(
+  const resetState = useCallback(
-    () =>
+    (transactionType: SelectOption | undefined = defaultTransactionType) => {
-      editorSavedValue ||
+      const fields = getTxFields(transactionType?.value);
-      JSON.stringify(prepareOptions?.() || {}, null, editorSettings.tabSize),
+
-    [editorSavedValue, editorSettings.tabSize, prepareOptions]
+      const nwState: Partial<TransactionState> = {
+        viewType,
+        selectedTransaction: transactionType,
+      };
+
+      if (fields.Destination !== undefined) {
+        nwState.selectedDestAccount = null;
+        fields.Destination = "";
+      } else {
+        fields.Destination = undefined;
+      }
+      nwState.txFields = fields;
+
+      const state = modifyTransaction(header, nwState, { replaceState: true });
+      const editorValue = getJsonString(state);
+      return setState({ editorValue });
+    },
+    [getJsonString, header, setState, viewType]
   );
 
   const estimateFee = useCallback(
@@ -156,10 +180,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 +200,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 +223,7 @@ const Transaction: FC<TransactionProps> = ({
         <Button
           onClick={() => {
             if (viewType === "ui") {
-              setState({ editorSavedValue: null, viewType: "json" });
+              setState({ viewType: "json" });
             } else setState({ viewType: "ui" });
           }}
           outline
@@ -207,7 +231,7 @@ const Transaction: FC<TransactionProps> = ({
           {viewType === "ui" ? "EDIT AS JSON" : "EXIT JSON MODE"}
         </Button>
         <Flex row>
-          <Button onClick={resetState} outline css={{ mr: "$3" }}>
+          <Button onClick={() => resetState()} outline css={{ mr: "$3" }}>
             RESET
           </Button>
           <Button

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,22 +23,23 @@ 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, estimatedFee } = txState;
-  const [hasUnsaved, setHasUnsaved] = useState(false);
   const [currTxType, setCurrTxType] = useState<string | undefined>(
     txState.selectedTransaction?.value
   );
 
   useEffect(() => {
-    setState({ editorValue: value });
+    setState({
+      editorValue: getJsonString?.(),
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+  }, []);
 
   useEffect(() => {
     const parsed = parseJSON(editorValue);
@@ -52,21 +53,22 @@ 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 = () => {
     showAlert("Confirm", {
       body: "Are you sure to discard these changes?",
       confirmText: "Yes",
-      onConfirm: () => setState({ editorValue: value }),
+      onCancel: () => {},
+      onConfirm: () => setState({ editorValue: getJsonString?.() }),
     });
   };
 
@@ -79,8 +81,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" }),
     });
   };
 
@@ -174,6 +176,11 @@ export const TxJson: FC<JsonProps> = ({
     });
   }, [getSchemas, monacoInst]);
 
+  const hasUnsaved = useMemo(
+    () => editorValue !== getJsonString?.(),
+    [editorValue, getJsonString]
+  );
+
   return (
     <Monaco
       rootProps={{
@@ -203,14 +210,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

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import Container from "../Container";
 import Flex from "../Flex";
 import Input from "../Input";
@@ -7,9 +7,10 @@ import Text from "../Text";
 import {
   SelectOption,
   TransactionState,
-  transactionsData,
+  transactionsOptions,
   TxFields,
   getTxFields,
+  defaultTransactionType,
 } from "../../state/transactions";
 import { useSnapshot } from "valtio";
 import state from "../../state";
@@ -38,12 +39,6 @@ export const TxUI: FC<UIProps> = ({
     txFields,
   } = txState;
 
-
-  const transactionsOptions = transactionsData.map(tx => ({
-    value: tx.TransactionType,
-    label: tx.TransactionType,
-  }));
-
   const accountOptions: SelectOption[] = accounts.map(acc => ({
     label: acc.name,
     value: acc.address,
@@ -58,10 +53,16 @@ export const TxUI: FC<UIProps> = ({
 
   const [feeLoading, setFeeLoading] = useState(false);
 
-  const resetOptions = useCallback(
+  const resetFields = useCallback(
     (tt: string) => {
       const fields = getTxFields(tt);
-      if (!fields.Destination) setState({ selectedDestAccount: null });
+
+      if (fields.Destination !== undefined) {
+        setState({ selectedDestAccount: null });
+        fields.Destination = "";
+      } else {
+        fields.Destination = undefined;
+      }
       return setState({ txFields: fields });
     },
     [setState]
@@ -102,33 +103,37 @@ export const TxUI: FC<UIProps> = ({
     (tt: SelectOption) => {
       setState({ selectedTransaction: tt });
 
-      const newState = resetOptions(tt.value);
+      const newState = resetFields(tt.value);
 
       handleEstimateFee(newState, true);
     },
-    [handleEstimateFee, resetOptions, setState]
+    [handleEstimateFee, resetFields, setState]
   );
 
-  const specialFields = ["TransactionType", "Account", "Destination"];
+  const switchToJson = () => setState({ viewType: "json" });
-
-  const otherFields = Object.keys(txFields).filter(
-    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(
+    if (defaultTransactionType) {
-      tt => tt.value === "Payment"
+      handleChangeTxType(defaultTransactionType);
-    );
-    if (defaultOption) {
-      handleChangeTxType(defaultOption);
     }
-  }, [handleChangeTxType, selectedTransaction?.value, transactionsOptions]);
+  }, [handleChangeTxType, selectedTransaction?.value]);
+
+  const fields = useMemo(
+    () => getTxFields(selectedTransaction?.value),
+    [selectedTransaction?.value]
+  );
+
+  const specialFields = ["TransactionType", "Account"];
+  if (fields.Destination !== undefined) {
+    specialFields.push("Destination");
+  }
+
+  const otherFields = Object.keys(txFields).filter(
+    k => !specialFields.includes(k)
+  ) as [keyof TxFields];
 
   return (
     <Container
@@ -185,7 +190,7 @@ export const TxUI: FC<UIProps> = ({
             onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
           />
         </Flex>
-        {txFields.Destination !== undefined && (
+        {fields.Destination !== undefined && (
           <Flex
             row
             fluid

content/transactions.json

@@ -55,7 +55,8 @@
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
     "TransactionType": "EscrowCancel",
     "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
-    "OfferSequence": 7
+    "OfferSequence": 7,
+    "Fee": "10"
   },
   {
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
@@ -69,7 +70,8 @@
     "FinishAfter": 533171558,
     "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
     "DestinationTag": 23480,
-    "SourceTag": 11747
+    "SourceTag": 11747,
+    "Fee": "10"
   },
   {
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
@@ -77,7 +79,8 @@
     "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
     "OfferSequence": 7,
     "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
-    "Fulfillment": "A0028000"
+    "Fulfillment": "A0028000",
+    "Fee": "10"
   },
   {
     "TransactionType": "NFTokenMint",
@@ -117,7 +120,9 @@
       "$value": "100",
       "$type": "xrp"
     },
-    "Flags": 1
+    "Flags": 1,
+    "Destination": "",
+    "Fee": "10"
   },
   {
     "TransactionType": "OfferCancel",
@@ -165,7 +170,8 @@
     "PublicKey": "32D2471DB72B27E3310F355BB33E339BF26F8392D5A93D3BC0FC3B566612DA0F0A",
     "CancelAfter": 533171558,
     "DestinationTag": 23480,
-    "SourceTag": 11747
+    "SourceTag": 11747,
+    "Fee": "10"
   },
   {
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
@@ -175,7 +181,8 @@
       "$value": "200",
       "$type": "xrp"
     },
-    "Expiration": 543171558
+    "Expiration": 543171558,
+    "Fee": "10"
   },
   {
     "Flags": 0,

state/transactions.ts

@@ -18,14 +18,13 @@ export interface TransactionState {
     txIsDisabled: boolean;
     txFields: TxFields;
     viewType: 'json' | 'ui',
-    editorSavedValue: null | string,
     editorValue?: string,
     estimatedFee?: string
 }
 
 
 export type TxFields = Omit<
-    typeof transactionsData[0],
+    Partial<typeof transactionsData[0]>,
     "Account" | "Sequence" | "TransactionType"
 >;
 
@@ -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"
@@ -92,7 +90,7 @@ export const modifyTransaction = (
     }
 
     Object.keys(partialTx).forEach(k => {
-        // Typescript mess here, but is definetly safe!
+        // Typescript mess here, but is definitely safe!
         const s = tx.state as any;
         const p = partialTx as any; // ? Make copy
         if (!deepEqual(s[k], p[k])) s[k] = p[k];
@@ -132,7 +130,7 @@ export const prepareTransaction = (data: any) => {
         }
 
         // delete unnecessary fields
-        if (options[field] === undefined) {
+        if (!options[field]) {
             delete options[field];
         }
     });
@@ -152,7 +150,7 @@ export const prepareState = (value: string, transactionType?: string) => {
 
     const { Account, TransactionType, Destination, ...rest } = options;
     let tx: Partial<TransactionState> = {};
-    const txFields = getTxFields(transactionType)
+    const schema = getTxFields(transactionType)
 
     if (Account) {
         const acc = state.accounts.find(acc => acc.address === Account);
@@ -180,9 +178,8 @@ export const prepareState = (value: string, transactionType?: string) => {
         tx.selectedTransaction = null;
     }
 
-    if (txFields.Destination !== undefined) {
+    if (schema.Destination !== undefined) {
         const dest = state.accounts.find(acc => acc.address === Destination);
-        rest.Destination = null
         if (dest) {
             tx.selectedDestAccount = {
                 label: dest.name,
@@ -199,11 +196,14 @@ export const prepareState = (value: string, transactionType?: string) => {
             tx.selectedDestAccount = null
         }
     }
+    else if (Destination) {
+        rest.Destination = Destination
+    }
 
     Object.keys(rest).forEach(field => {
         const value = rest[field];
-        const origValue = txFields[field as keyof TxFields]
+        const schemaVal = schema[field as keyof TxFields]
-        const isXrp = typeof value !== 'object' && origValue && typeof origValue === 'object' && origValue.$type === 'xrp'
+        const isXrp = typeof value !== 'object' && schemaVal && typeof schemaVal === 'object' && schemaVal.$type === 'xrp'
         if (isXrp) {
             rest[field] = {
                 $type: "xrp",
@@ -218,7 +218,6 @@ export const prepareState = (value: string, transactionType?: string) => {
     });
 
     tx.txFields = rest;
-    tx.editorSavedValue = null;
 
     return tx
 }
@@ -244,3 +243,10 @@ export const getTxFields = (tt?: string) => {
 }
 
 export { transactionsData }
+
+export const transactionsOptions = transactionsData.map(tx => ({
+    value: tx.TransactionType,
+    label: tx.TransactionType,
+}));
+
+export const defaultTransactionType = transactionsOptions.find(tt => tt.value === 'Payment')