[transactions] allow account transfers for non-mixed accounts

app/components/inputs/AccountsSelect/AccountsSelect.jsx

@@ -22,7 +22,8 @@ const AccountsSelect = ({
   const { account, accounts, placeholder } = useAccountsSelect({
     accountProp,
     accountsType,
-    filterAccounts
+    filterAccounts,
+    onChange
   });
 
   const selectKeyDown = (e) => {

app/components/inputs/AccountsSelect/hooks.js

@@ -16,7 +16,8 @@ const messages = defineMessages({
 export const useAccountsSelect = ({
   accountProp,
   accountsType,
-  filterAccounts
+  filterAccounts,
+  onChange
 }) => {
   const spendingAccounts = useSelector(sel.spendingAccounts);
   const visibleAccounts = useSelector(sel.visibleAccounts);
@@ -56,6 +57,17 @@ export const useAccountsSelect = ({
   const [account, setAccount] = useState(accountProp);
   const [accounts, setAccounts] = useState(() => getAccountsToShow());
 
+  useEffect(() => {
+    const newAccounts = getAccountsToShow();
+    if (!isEqual(newAccounts, accounts)) {
+      if (!newAccounts.find((a) => isEqual(a.value, account.value))) {
+        setAccount(newAccounts[0]);
+        onChange(newAccounts[0]);
+      }
+      setAccounts(newAccounts);
+    }
+  }, [filterAccounts, getAccountsToShow, account, accounts, onChange]);
+
   useEffect(() => {
     let newAccount = null;
 

app/components/shared/SendTransaction/Form.jsx

@@ -51,15 +51,15 @@ const Form = ({
             <div className={styles.detailsValueColumn}>
               <Balance
                 flat
-                amount={totalSpent}
+                amount={isValid() ? totalSpent : 0}
                 classNameUnit={styles.detailsUnit}
               />
               <Balance
                 flat
-                amount={estimatedFee}
+                amount={isValid() ? estimatedFee : 0}
                 classNameUnit={styles.detailsUnit}
               />
-              <div>{`${estimatedSignedSize} Bytes`}</div>
+              <div>{`${isValid() ? estimatedSignedSize : 0} Bytes`}</div>
             </div>
           </div>
         )}

app/components/shared/SendTransaction/SendTransaction.jsx

@@ -126,13 +126,29 @@ const SendTransaction = ({
   };
 
   const onShowSendSelf = () => {
-    const newOutputs = [{ ...outputs[0], data: baseOutput().data }];
+    const newOutputs = [
+      {
+        ...outputs[0],
+        data: {
+          ...baseOutput().data,
+          amount: outputs[0].data.amount
+        }
+      }
+    ];
     setIsSendSelf(true);
     onSetOutputs(newOutputs);
   };
 
   const onShowSendOthers = () => {
-    const newOutputs = [{ ...outputs[0], data: baseOutput().data }];
+    const newOutputs = [
+      {
+        ...outputs[0],
+        data: {
+          ...baseOutput().data,
+          amount: outputs[0].data.amount
+        }
+      }
+    ];
     setIsSendSelf(false);
     onSetOutputs(newOutputs);
   };
@@ -205,11 +221,12 @@ const SendTransaction = ({
   const getOutputRows = () => {
     // if sending to another accounts from same wallet, there is no need to
     // filter accounts.
-    const filterAccounts = filterFromAccounts
-      ? filterFromAccounts
-      : isSendSelf
+    const filterAccounts = isSendSelf
       ? []
+      : filterFromAccounts
+      ? filterFromAccounts
       : notMixedAccounts;
+
     const accountsType = filterAccounts ? "visible" : "spending";
     return outputs.map((output, index) => ({
       data: (

app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.module.css

@@ -212,6 +212,9 @@
   margin: 0;
 }
 @media screen and (max-width: 1179px) {
+  .amountContainer .sendInputWrapper {
+    width: 185px;
+  }
   .sendOutputContainer {
     margin: 20px 0 20px 20px;
     width: 360px;