Fix handling of Destination field in transactions.

components/Transaction/index.tsx

@@ -3,6 +3,7 @@ import { FC, useCallback, useEffect } from "react";
 import { useSnapshot } from "valtio";
 import state from "../../state";
 import {
+  getTxFields,
   modifyTransaction,
   prepareState,
   prepareTransaction,
@@ -54,9 +55,7 @@ const Transaction: FC<TransactionProps> = ({
       } = state;
 
       const TransactionType = selectedTransaction?.value || null;
-      const Destination =
-        selectedDestAccount?.value ||
-        (txFields && "Destination" in txFields ? null : undefined);
+      const Destination = selectedDestAccount?.value || txFields?.Destination;
       const Account = selectedAccount?.value || null;
 
       return prepareTransaction({
@@ -108,8 +107,9 @@ const Transaction: FC<TransactionProps> = ({
       }
       const options = prepareOptions(st);
 
-      if (options.Destination === null) {
-        throw Error("Destination account cannot be null");
+      const fields = getTxFields(options.TransactionType);
+      if (fields.Destination && !options.Destination) {
+        throw Error("Destination account is required!");
       }
 
       await sendTransaction(account, options, { logPrefix });

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";
@@ -60,7 +60,13 @@ export const TxUI: FC<UIProps> = ({
   const resetOptions = 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]
@@ -108,12 +114,6 @@ export const TxUI: FC<UIProps> = ({
     [handleEstimateFee, resetOptions, setState]
   );
 
-  const specialFields = ["TransactionType", "Account", "Destination"];
-
-  const otherFields = Object.keys(txFields).filter(
-    k => !specialFields.includes(k)
-  ) as [keyof TxFields];
-
   const switchToJson = () => setState({ viewType: "json" });
 
   // default tx
@@ -128,6 +128,20 @@ export const TxUI: FC<UIProps> = ({
     }
   }, [handleChangeTxType, selectedTransaction?.value, transactionsOptions]);
 
+  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
       css={{
@@ -183,7 +197,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