Fix tx reset state button

components/Transaction/index.tsx

@@ -3,10 +3,12 @@ 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";
@@ -135,10 +137,6 @@ const Transaction: FC<TransactionProps> = ({
     prepareOptions,
   ]);
 
-  const resetState = useCallback(() => {
-    modifyTransaction(header, { viewType }, { replaceState: true });
-  }, [header, viewType]);
-
   const getJsonString = useCallback(
     (state?: Partial<TransactionState>) =>
       JSON.stringify(
@@ -149,6 +147,30 @@ const Transaction: FC<TransactionProps> = ({
     [editorSettings.tabSize, prepareOptions]
   );
 
+  const resetState = useCallback(
+    (transactionType: SelectOption | undefined = defaultTransactionType) => {
+      const fields = getTxFields(transactionType?.value);
+
+      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(
     async (st?: TransactionState, opts?: { silent?: boolean }) => {
       const state = st || txState;
@@ -209,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/ui.tsx

@@ -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,11 +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,
@@ -57,7 +53,7 @@ export const TxUI: FC<UIProps> = ({
 
   const [feeLoading, setFeeLoading] = useState(false);
 
-  const resetOptions = useCallback(
+  const resetFields = useCallback(
     (tt: string) => {
       const fields = getTxFields(tt);
 
@@ -107,11 +103,11 @@ 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 switchToJson = () => setState({ viewType: "json" });
@@ -120,13 +116,10 @@ export const TxUI: FC<UIProps> = ({
   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),

state/transactions.ts

@@ -134,7 +134,7 @@ export const prepareTransaction = (data: any) => {
             delete options[field];
         }
     });
-    
+
     return options
 }
 
@@ -196,7 +196,7 @@ export const prepareState = (value: string, transactionType?: string) => {
             tx.selectedDestAccount = null
         }
     }
-    else if (Destination) { 
+    else if (Destination) {
         rest.Destination = Destination
     }
 
@@ -243,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')