UI improvements on send tx window and Tx history (#4107)

* animates window resizes * Makes addresses selectable; Adjustments on size and weight of fonts * Changing bold words on screen title * Making capitalization even throughout sendtx popup * Fix ether value detection, as it can be "0x0" * Fixes TxHistory capitalization * Display tx status in txHistory window * Adds word wrap to transaction data; It was breaking the layout before * Updating signatures * Version bump * Capitalization of "Upload new contract" * function name formatter with tests
ethereum · Oct 4, 2018 · 43a22bf · 43a22bf
1 parent 1d9519a
commit 43a22bf
Show file tree

Hide file tree

Showing 12 changed files with 14,578 additions and 90 deletions.
diff --git a/interface/client/lib/signatures.js b/interface/client/lib/signatures.js
diff --git a/interface/client/styles/sendTx.import.less b/interface/client/styles/sendTx.import.less
@@ -1,7 +1,7 @@
 // Shared
 
 .bold {
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .capitalize {
@@ -20,12 +20,12 @@
 // ExecutionContext.js
 
 .execution-context {
-  padding: 50px 34px 12px;
+  padding: 50px 34px 8px;
 }
 
 .execution-context__details {
-  margin: 18px 0 12px;
-  font-size: 16px;
+  margin: 18px 0 0;
+  font-size: 14px;
   text-align: left;
   -webkit-app-region: drag;
 }
@@ -41,16 +41,22 @@
   padding-right: 16px;
 }
 
-.execution-context__details-value {
-  font-weight: bold;
+.execution-context__details-value,
+.execution-context__execution-function {
+  font-weight: 500;
 }
 
-.execution-context__execution-function {
-  font-weight: bold;
+.execution-context__address,
+.execution-context__param-address {
+  user-select: all;
+}
+.execution-context__param-address {
+  margin-left: 6px;
 }
 
 .execution-context__details-link {
-  font-size: 16px;
+  padding: 4px 0;
+  font-size: 14px;
   color: #00aafa;
   cursor: pointer;
   text-align: left;
@@ -84,7 +90,7 @@
 .execution-context__param-value {
   display: flex;
   align-items: center;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .execution-context__param-type {
@@ -101,7 +107,7 @@
 
 .context-description__sentence {
   margin: 18px 0 24px;
-  font-size: 24px;
+  font-size: 36px;
   text-align: left;
 
   .dapp-identicon {
@@ -159,6 +165,9 @@
   width: 75px;
 }
 
+.tx-parties__address {
+  user-select: all;
+}
 // FeeSelector.js
 
 .fee-selector {

diff --git a/interface/client/styles/txHistory.import.less b/interface/client/styles/txHistory.import.less
@@ -27,6 +27,10 @@ div#react-entry {
   }
 }
 
+.tx-data {
+  word-wrap: break-word;
+}
+
 .tx-list {
   padding: 10px;
   height: ~'calc(100% - 22px)';

diff --git a/interface/components/SendTx/ContextDescription.js b/interface/components/SendTx/ContextDescription.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { formatTokenCount } from '../../utils/formatters';
+import { formatTokenCount, formatFunctionName } from '../../utils/formatters';
 
 class ContextDescription extends Component {
   constructor(props) {
@@ -37,7 +37,7 @@ class ContextDescription extends Component {
   }
 
   alertIfSendingEther() {
-    if (!this.props.value) return null;
+    if (!this.props.value || parseInt(this.props.value, 16) === 0) return null;
 
     return (
       <div className="context-description__send-eth-alert">
@@ -65,7 +65,7 @@ class ContextDescription extends Component {
     return (
       <div className="context-description__sentence">
         <div>
-          Upload <span className="bold">New Contract</span>
+          <span className="bold">Upload</span> new contract
         </div>
         <div className="context-description__subtext">
           About {bytesCount} bytes
@@ -86,34 +86,26 @@ class ContextDescription extends Component {
 
     return (
       <div className="context-description__sentence">
-        {i18n.t('mist.sendTx.transfer')}{' '}
-        <span className="bold">
-          {tokenCount} {tokenSymbol}
-        </span>
+        <span className="bold">{i18n.t('mist.sendTx.transfer')}</span>{' '}
+        {tokenCount} {tokenSymbol}
         {this.alertIfSendingEther()}
       </div>
     );
   }
 
   renderGenericFunctionDescription() {
     const { executionFunction } = this.props;
-
-    let executionFunctionClean =
-      executionFunction.charAt(0).toUpperCase() +
-      executionFunction
-        .slice(1, executionFunction.indexOf('('))
-        .replace(/([A-Z]+|[0-9]+)/g, ' $1');
+    let executionFunctionClean = formatFunctionName(executionFunction);
 
     return (
       <div className="context-description__sentence">
-        Execute{' '}
+        <span className="bold">Execute </span>
         {executionFunctionClean ? (
           <React.Fragment>
-            <span className="bold">&#8220;{executionFunctionClean}&#8221;</span>{' '}
-            function
+            &#8220;{executionFunctionClean}&#8221; function
           </React.Fragment>
         ) : (
-          <span className="bold">contract function</span>
+          <React.Fragment>contract function</React.Fragment>
         )}
         {this.alertIfSendingEther()}
       </div>
@@ -138,7 +130,7 @@ class ContextDescription extends Component {
     return (
       <div className="context-description__sentence">
         <div>
-          Transfer <span className="bold">{this.formattedBalance()} ETHER</span>
+          <span className="bold">Transfer</span> {this.formattedBalance()} Ether
         </div>
         <div className="context-description__subtext">{conversion}</div>
       </div>

diff --git a/interface/components/SendTx/ExecutionContext.js b/interface/components/SendTx/ExecutionContext.js
@@ -75,9 +75,13 @@ class ExecutionContext extends Component {
             {param.type === 'address' ? (
               <div className="execution-context__param-identicon">
                 <DappIdenticon identity={param.value} size="small" />
+                <span className="execution-context__param-address">
+                  {param.value}
+                </span>
               </div>
-            ) : null}
-            {param.value}
+            ) : (
+              param.value
+            )}
           </div>
           <div className="execution-context__param-type">{param.type}</div>
         </div>
@@ -119,14 +123,14 @@ class ExecutionContext extends Component {
           <span className="execution-context__details-title">
             {i18n.t('mist.sendTx.gasPriceStandard')}
           </span>
-          <span className="execution-context__details-value">{`${gasPriceGweiStandard} GWEI`}</span>
+          <span className="execution-context__details-value">{`${gasPriceGweiStandard} Gwei`}</span>
         </div>
 
         <div className="execution-context__details-row">
           <span className="execution-context__details-title">
             {i18n.t('mist.sendTx.gasPricePriority')}
           </span>
-          <span className="execution-context__details-value">{`${gasPriceGweiPriority} GWEI`}</span>
+          <span className="execution-context__details-value">{`${gasPriceGweiPriority} Gwei`}</span>
         </div>
 
         <div className="execution-context__details-row">
@@ -154,7 +158,9 @@ class ExecutionContext extends Component {
                   {i18n.t('mist.sendTx.tokenContractName')}
                 </span>
                 <DappIdenticon identity={token.address} size="small" />
-                <span className="bold">{token.address}</span>
+                <span className="bold execution-context__address">
+                  {token.address}
+                </span>
               </div>
             )}
           </div>

diff --git a/interface/components/SendTx/TxParties.js b/interface/components/SendTx/TxParties.js
@@ -44,7 +44,7 @@ class TxParties extends Component {
           {i18n.t('mist.sendTx.from')}
         </div>
         <div>
-          <span className="bold">{from}</span>
+          <span className="tx-parties__address bold">{from}</span>
         </div>
       </div>
     );
@@ -70,8 +70,10 @@ class TxParties extends Component {
         return (
           <div className="tx-parties__party">
             <DappIdenticon identity={address.toLowerCase()} size="small" />
-            <div className="tx-parties__direction-name">TO</div>
-            <span className="bold">{address}</span>
+            <div className="tx-parties__direction-name">
+              {i18n.t('mist.sendTx.to')}
+            </div>
+            <span className="tx-parties__address bold">{address}</span>
           </div>
         );
       }
@@ -91,7 +93,7 @@ class TxParties extends Component {
               ? i18n.t('mist.sendTx.contract')
               : i18n.t('mist.sendTx.to')}
           </div>
-          <span className="bold">{to}</span>
+          <span className="tx-parties__address bold">{to}</span>
         </div>
       );
     }

diff --git a/interface/components/TxHistory/TxRow.js b/interface/components/TxHistory/TxRow.js
@@ -85,49 +85,15 @@ class TxRow extends Component {
       }
     }
 
-    let status = (
-      <span className="bold" style={{ color: 'grey' }}>
-        {i18n.t('mist.txHistory.statusPending')}
-      </span>
-    );
-    if (tx.status === 0) {
-      status = (
-        <span className="bold" style={{ color: 'red' }}>
-          {i18n.t('mist.txHistory.statusFailed')}
-        </span>
-      );
-    } else if (tx.status === 1 && tx.blockNumber) {
-      const blockNumber = _.max([
-        this.props.nodes.local.blockNumber,
-        this.props.nodes.remote.blockNumber
-      ]);
-      const numberConfirmations = blockNumber - tx.blockNumber;
-      status = (
-        <span>
-          <span className="bold" style={{ color: 'green' }}>
-            {i18n.t('mist.txHistory.statusConfirmed')}
-          </span>{' '}
-          <span>
-            ({i18n.t('mist.txHistory.confirmations', {
-              count: numberConfirmations
-            })})
-          </span>
-        </span>
-      );
-    }
-
     return (
       <div>
-        <div>
-          {i18n.t('mist.txHistory.status')}: {status}
-        </div>
         <div>
           {i18n.t('mist.txHistory.txHash')}:{' '}
           <span className="bold">{txHashLink}</span>
         </div>
         <div>
           {i18n.t('mist.txHistory.etherAmount')}:{' '}
-          <span className="bold">{etherAmount} ether</span>{' '}
+          <span className="bold">{etherAmount} Ether</span>{' '}
           {etherAmountUSD && <span> (${etherAmountUSD} USD)</span>}
         </div>
         <div>
@@ -148,20 +114,20 @@ class TxRow extends Component {
         )}
         <div>
           {i18n.t('mist.txHistory.gasPrice')}:{' '}
-          <span className="bold">{gasPriceEther} ether</span> ({gasPriceGwei}{' '}
+          <span className="bold">{gasPriceEther} Ether</span> ({gasPriceGwei}{' '}
           Gwei)
         </div>
         {txCostEther && (
           <div>
             {i18n.t('mist.txHistory.txCost')}:{' '}
-            <span className="bold">{txCostEther} ether</span>
+            <span className="bold">{txCostEther} Ether</span>
             {txCostUSD && <span> (${txCostUSD} USD)</span>}
           </div>
         )}
         {tx.data && (
           <div>
             {i18n.t('mist.txHistory.data')}:{' '}
-            <span className="bold">{tx.data}</span>
+            <span className="bold tx-data">{tx.data}</span>
           </div>
         )}
         <div className="tx-moreDetails" onClick={() => this.toggleDetails()}>
@@ -200,7 +166,38 @@ class TxRow extends Component {
       description = 'Executed  “' + executionFunctionSentence + '” function';
     } else {
       const etherAmount = this.valueToEtherAmount(tx.value);
-      description = `Sent ${etherAmount} ether`;
+      description = `Sent ${etherAmount} Ether`;
+    }
+
+    let status = (
+      <span className="bold" style={{ color: 'grey' }}>
+        {i18n.t('mist.txHistory.statusPending')}
+      </span>
+    );
+    if (tx.status === 0) {
+      status = (
+        <span className="bold" style={{ color: 'red' }}>
+          {i18n.t('mist.txHistory.statusFailed')}
+        </span>
+      );
+    } else if (tx.status === 1 && tx.blockNumber) {
+      const blockNumber = _.max([
+        this.props.nodes.local.blockNumber,
+        this.props.nodes.remote.blockNumber
+      ]);
+      const numberConfirmations = blockNumber - tx.blockNumber;
+      status = (
+        <span>
+          <span className="bold" style={{ color: 'green' }}>
+            {i18n.t('mist.txHistory.statusConfirmed')}
+          </span>{' '}
+          <span>
+            ({i18n.t('mist.txHistory.confirmations', {
+              count: numberConfirmations
+            })})
+          </span>
+        </span>
+      );
     }
 
     return (
@@ -241,6 +238,9 @@ class TxRow extends Component {
             )}
           </div>
         )}
+        <div>
+          {i18n.t('mist.txHistory.status')}: {status}
+        </div>
         {this.renderDetails()}
       </div>
     );

diff --git a/interface/i18n/mist.en.i18n.json b/interface/i18n/mist.en.i18n.json
@@ -138,9 +138,9 @@
       "gasEstimate": "Gas Estimate:",
       "errorMessage": "Error Message:",
       "transactionExecutingFunction": "Transaction Executing Function:",
-      "from": "FROM",
-      "to": "TO",
-      "contract": "CONTRACT",
+      "from": "From",
+      "to": "To",
+      "contract": "Contract",
       "loading": "Loading...",
       "priorityFee": "Priority Fee:",
       "standardFee": "Standard Fee:",
@@ -175,7 +175,7 @@
       "statusPending": "Pending",
       "statusFailed": "Failed",
       "statusConfirmed": "Confirmed",
-      "confirmations": "__count__ confirmations",
+      "confirmations": "__count__ block confirmations",
       "txHash": "Transaction Hash",
       "etherAmount": "Ether Amount",
       "nonce": "Nonce",