Checkbox reply-to fixed

src/components/appstate/components/ToAddr.ts

@@ -4,13 +4,15 @@ export default class ToAddr {
     to: string;
     amount: number;
     memo: string;
+    memoReplyTo: string;
 
     constructor(id?: number) {
       this.id = id;
 
       this.to = "";
       this.amount = 0;
       this.memo = "";
+      this.memoReplyTo = ""; 
     }
   }
 

src/components/common/Common.module.css

@@ -189,6 +189,19 @@
   color: white;
 }
 
+.inputboxmemo {
+  width: calc(100% - 16px);
+  font-family: Roboto, Arial, Helvetica, Helvetica Neue, serif;
+  min-height: 38px;
+  max-height: 300px;
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: 16px;
+  border: none;
+  background-color: #000;
+  color: white;
+}
+
 .buttoncontainer {
   text-align: center;
   padding-top: 24px;

src/components/send/Send.tsx

@@ -94,15 +94,16 @@ export default class Send extends PureComponent<SendProps, SendState> {
     id: number,
     address: React.ChangeEvent<HTMLInputElement> | null,
     amount: React.ChangeEvent<HTMLInputElement> | null,
-    memo: React.ChangeEvent<HTMLTextAreaElement> | string | null
+    memo: React.ChangeEvent<HTMLTextAreaElement> | string | null,
+    memoReplyTo: string | null
   ) => {
     const { setSendPageState, setSendTo } = this.props;
     const { sendPageState } = this.context;
 
     const newToAddrs = sendPageState.toaddrs.slice(0);
     // Find the correct toAddr
     const toAddr = newToAddrs.find((a: ToAddr) => a.id === id) as ToAddr;
-    if (address) {
+    if (address !== null) {
       // First, check if this is a URI
       // $FlowFixMe
       const parsedUri = parseZcashURI(address.target.value);
@@ -114,7 +115,7 @@ export default class Send extends PureComponent<SendProps, SendState> {
       toAddr.to = address.target.value.replace(/ /g, ""); // Remove spaces
     }
 
-    if (amount) {
+    if (amount !== null) {
       // Check to see the new amount if valid
       // $FlowFixMe
       const newAmount = parseFloat(amount.target.value);
@@ -125,7 +126,7 @@ export default class Send extends PureComponent<SendProps, SendState> {
       toAddr.amount = newAmount;
     }
 
-    if (memo) {
+    if (memo !== null) {
       if (typeof memo === "string") {
         toAddr.memo = memo;
       } else {
@@ -134,6 +135,10 @@ export default class Send extends PureComponent<SendProps, SendState> {
       }
     }
 
+    if (memoReplyTo != null) {
+      toAddr.memoReplyTo = memoReplyTo;
+    }
+
     // Create the new state object
     const newState = new SendPageState();
     newState.fromaddr = sendPageState.fromaddr;

src/components/send/components/ConfirmModal.tsx

@@ -155,7 +155,7 @@ type ConfirmModalProps = {
                   <ConfirmModalToAddr key={t.to} toaddr={t} info={info} />
                 ))}
               </div>
-              <ConfirmModalToAddr toaddr={{ to: "Fee", amount: defaultFee, memo: "" }} info={info} />
+              <ConfirmModalToAddr toaddr={{ to: "Fee", amount: defaultFee, memo: "", memoReplyTo: "" }} info={info} />
 
               <div className={cstyles.well}>
                 <div className={[cstyles.flexspacebetween, cstyles.margintoplarge].join(" ")}>

src/components/send/components/ConfirmModalToAddr.tsx

@@ -12,6 +12,7 @@ const ConfirmModalToAddr = ({ toaddr, info }: ConfirmModalToAddrProps) => {
   const { bigPart, smallPart } = Utils.splitZecAmountIntoBigSmall(toaddr.amount);
 
   const memo: string = toaddr.memo ? toaddr.memo : "";
+  const memoReplyTo: string = toaddr.memoReplyTo ? toaddr.memoReplyTo : "";
 
   return (
     <div className={cstyles.well}>
@@ -33,7 +34,7 @@ const ConfirmModalToAddr = ({ toaddr, info }: ConfirmModalToAddrProps) => {
           <div>{Utils.getZecToUsdString(info.zecPrice, toaddr.amount)}</div>
         </div>
       </div>
-      <div className={[cstyles.sublight, cstyles.breakword, cstyles.memodiv].join(" ")}>{memo}</div>
+      <div className={[cstyles.sublight, cstyles.breakword, cstyles.memodiv].join(" ")}>{memo + memoReplyTo}</div>
     </div>
   );
 };

src/components/send/components/ToAddrBox.tsx

@@ -20,7 +20,8 @@ type ToAddrBoxProps = {
     id: number,
     address: React.ChangeEvent<HTMLInputElement> | null,
     amount: React.ChangeEvent<HTMLInputElement> | null,
-    memo: React.ChangeEvent<HTMLTextAreaElement> | string | null
+    memo: React.ChangeEvent<HTMLTextAreaElement> | string | null,
+    memoReplyTo: string | null
   ) => void;
   fromAddress: string;
   fromAmount: number;
@@ -78,13 +79,13 @@ const ToAddrBox = ({
 
   const usdValue = Utils.getZecToUsdString(zecPrice, toaddr.amount);
 
-  const addReplyTo = () => {
-    if (toaddr.memo.endsWith(fromAddress)) {
-      return;
-    }
-
-    if (fromAddress && toaddr.id) {
-      updateToField(toaddr.id, null, null, `${toaddr.memo}\nReply to: \n${fromAddress}`);
+  const addReplyTo = (checked: boolean) => {
+    if (toaddr.id) {
+      if (fromAddress && checked) {
+        updateToField(toaddr.id, null, null, null, `\nReply to: \n${fromAddress}`);
+      } else {
+        updateToField(toaddr.id, null, null, null, "");
+      }
     }
   };
 
@@ -111,7 +112,7 @@ const ToAddrBox = ({
           placeholder="Unified | Sapling | Transparent address"
           className={cstyles.inputbox}
           value={toaddr.to}
-          onChange={(e) => updateToField(toaddr.id as number, e, null, null)}
+          onChange={(e) => updateToField(toaddr.id as number, e, null, null, null)}
         />
         <Spacer />
         <div className={[cstyles.flexspacebetween].join(" ")}>
@@ -126,7 +127,7 @@ const ToAddrBox = ({
             step="any"
             className={cstyles.inputbox}
             value={isNaN(toaddr.amount) ? "" : toaddr.amount}
-            onChange={(e) => updateToField(toaddr.id as number, null, e, null)}
+            onChange={(e) => updateToField(toaddr.id as number, null, e, null, null)}
           />
           <img
             className={styles.toaddrbutton}
@@ -147,20 +148,29 @@ const ToAddrBox = ({
               <div className={cstyles.validationerror}>{toaddr.memo.length}</div>
             </div>
             <TextareaAutosize
-              className={[cstyles.inputbox].join(" ")}
+              className={[toaddr.memoReplyTo ? cstyles.inputboxmemo : cstyles.inputbox].join(" ")}
               value={toaddr.memo}
               disabled={isMemoDisabled}
-              onChange={(e) => updateToField(toaddr.id as number, null, null, e)}
+              onChange={(e) => updateToField(toaddr.id as number, null, null, e, null)}
               minRows={2}
               maxRows={5}
             />
-            <input type="checkbox" onChange={(e) => e.target.checked && addReplyTo()} />
+            {toaddr.memoReplyTo && (
+              <TextareaAutosize
+                className={[cstyles.inputbox].join(" ")}
+                value={toaddr.memoReplyTo}
+                disabled={true}
+                minRows={2}
+                maxRows={5}
+              />
+            )}
+            <input style={{ marginTop: 5 }} type="checkbox" onChange={(e) => addReplyTo(e.target.checked)} />
             Include Reply to Unified address
           </div>
         )}
       </div>
     </div>
   );
-};
+}; 
 
 export default ToAddrBox;

src/components/send/components/getSendManyJSON.ts

@@ -4,7 +4,7 @@ import SendManyJsonType from "./SendManyJSONType";
 
 function getSendManyJSON(sendPageState: SendPageState): SendManyJsonType[] {
 const json = sendPageState.toaddrs.flatMap((to) => {
-    const memo = to.memo || "";
+    const memo = (to.memo || "") + (to.memoReplyTo || "");
     const amount = parseInt((to.amount * 10 ** 8).toFixed(0));
 
     if (memo === "") {

src/components/sidebar/Sidebar.tsx

@@ -5,7 +5,7 @@ import styles from "./Sidebar.module.css";
 import cstyles from "../common/Common.module.css";
 import routes from "../../constants/routes.json";
 import Logo from "../../assets/img/logobig.png";
-import { Address, Info, Transaction } from "../appstate";
+import { Address, Info, Transaction, TxDetail } from "../appstate";
 import Utils from "../../utils/utils";
 import RPC from "../../rpc/rpc";
 import { parseZcashURI, ZcashURITarget } from "../../utils/uris";
@@ -179,7 +179,7 @@ class Sidebar extends PureComponent<SidebarProps & RouteComponentProps, SidebarS
         const { transactions } = this.context;
         const rows = transactions.flatMap((t: Transaction) => {
           if (t.detailedTxns) {
-            return t.detailedTxns.map((dt) => {
+            return t.detailedTxns.map((dt: TxDetail) => {
               const normaldate = dateformat(t.time * 1000, "mmm dd yyyy hh::MM tt");
 
               // Add a single quote "'" into the memo field to force interpretation as a string, rather than as a

src/components/transactions/components/TxItemBlock.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import dateformat from "dateformat";
 import styles from "../Transactions.module.css";
 import cstyles from "../../common/Common.module.css";
-import { Transaction } from "../../appstate";
+import { Transaction, TxDetail } from "../../appstate";
 import Utils from "../../../utils/utils";
 const { clipboard } = window.require("electron");
 
@@ -35,7 +35,7 @@ const TxItemBlock = ({ transaction, currencyName, zecPrice, txClicked, addressBo
           <div className={[cstyles.padtopsmall, cstyles.sublight].join(" ")}>{timePart}</div>
         </div>
         <div className={styles.txaddressamount}>
-          {transaction.detailedTxns.map((txdetail) => {
+          {transaction.detailedTxns.map((txdetail: TxDetail) => {
             const { bigPart, smallPart } = Utils.splitZecAmountIntoBigSmall(Math.abs(parseFloat(txdetail.amount)));
 
             let { address } = txdetail;

src/components/transactions/components/TxModal.tsx

@@ -91,7 +91,7 @@ const TxModalInternal: React.FC<RouteComponentProps & TxModalInternalProps> = ({
   let fees = 0;
 
   const totalAmounts =
-    tx && tx.detailedTxns ? tx.detailedTxns.reduce((s, t) => s + (parseFloat(t.amount) ? parseFloat(t.amount) : 0), 0) : 0;
+    tx && tx.detailedTxns ? tx.detailedTxns.reduce((s, t: TxDetail) => s + (parseFloat(t.amount) ? parseFloat(t.amount) : 0), 0) : 0;
   // normal case: spend 1600 fee 1000 sent 600
   if (tx && tx.type === 'sent' && tx.amount && Math.abs(tx.amount) > Math.abs(totalAmounts)) {
     fees = Math.abs(tx.amount) - Math.abs(totalAmounts);
@@ -189,7 +189,7 @@ const TxModalInternal: React.FC<RouteComponentProps & TxModalInternalProps> = ({
 
         <hr style={{ width: "100%" }} />
 
-        {detailedTxns.map((txdetail) => {
+        {detailedTxns.map((txdetail: TxDetail) => {
           const { bigPart, smallPart } = Utils.splitZecAmountIntoBigSmall(Math.abs(parseFloat(txdetail.amount)));
 
           let { address } = txdetail;

src/rpc/rpc.ts

@@ -773,7 +773,7 @@ export default class RPC {
 
     // If you send yourself transactions, the underlying SDK doesn't handle it very well, so
     // we supress these in the UI to make things a bit clearer.
-    txlist = txlist.filter((tx) => !(tx.type === "sent" && tx.amount < 0 && tx.detailedTxns.length === 0));
+    //txlist = txlist.filter((tx) => !(tx.type === "sent" && tx.amount < 0 && tx.detailedTxns.length === 0));
 
     // We need to group transactions that have the same (txid and send/recive), for multi-part memos
     const m = new Map<string, Transaction[]>();