add to address row to TxDetail header

decred · Oct 18, 2019 · 22a1eb4 · 22a1eb4
1 parent a8586f8
commit 22a1eb4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/app/components/views/TxDetails.js b/app/components/views/TxDetails.js
@@ -154,7 +154,7 @@ const TxDetails = ({
       <div className="txdetails-top">
         <div className="txdetails-top-row">
           <div className="txdetails-name">
-            <T id="txDetails.transactionLabel" m="Transaction" />
+            <T id="txDetails.transactionLabel" m="Transaction" />:
           </div>
           <div className="txdetails-value">
             <a onClick={ openTxUrl } style={{ cursor: "pointer" }}>{txHash}</a>
@@ -176,9 +176,21 @@ const TxDetails = ({
             }
           </div>
         </div>
+        {txDirection === "out" && txType !== "Vote" &&
+          <div className="txdetails-top-row">
+            <div className="txdetails-name"><T id="txDetails.toAddress" m="To address" />:</div>
+            <div className="txdetails-value non-flex">
+              {txOutputs.map(({ address }) => (
+                <div>{addSpacingAroundText(address)}</div>
+              ))}
+              {nonWalletOutputs.map(({ address }) => (
+                <div>{addSpacingAroundText(address)}</div>
+              ))}
+            </div>
+          </div>}
         {txDirection !== "in" && txType !== "Vote" &&
         <div className="txdetails-top-row">
-          <div className="txdetails-name"><T id="txDetails.transactionFeeLabel" m="Transaction fee" /></div>
+          <div className="txdetails-name"><T id="txDetails.transactionFeeLabel" m="Transaction fee" />:</div>
           <div className="txdetails-value"><Balance amount={txFee} /></div>
         </div> }
       </div>

diff --git a/app/i18n/translations/original.json b/app/i18n/translations/original.json
@@ -835,6 +835,7 @@
   "txDetails.ticketCost": "Ticket Cost",
   "txDetails.timestamp": "{timestamp, date, medium} {timestamp, time, medium}",
   "txDetails.transactionFeeLabel": "Transaction fee",
+  "txDetails.toAddress": "To address",
   "txDetails.transactionLabel": "Transaction",
   "txDetails.type.coinbase": "Coinbase",
   "txDetails.type.revoke": "Revoke",

diff --git a/app/style/TxDetails.less b/app/style/TxDetails.less
@@ -46,7 +46,7 @@
 .txdetails-top {
   padding-left: 80px;
   padding-top: 25px;
-  padding-bottom: 33px;
+  padding-bottom: 28px;
   font-size: 13px;
   background-color: var(--txdetails-top-bg);
 }
@@ -73,6 +73,10 @@
 .txdetails-value {
   word-wrap: break-word;
   display: flex;
+
+  &.non-flex {
+    display: block;
+  }
 }
 
 .txdetails-value-rawtx {