[beta] UI backports (#4809)

* Update Wallet to new Wallet Code (#4805)

* Update Wallet Version

* Update Wallet Library

* Update Wallets Bytecodes

* Typo

* Separate Deploy in Contract API

* Use the new Wallet ABI // Update wallet code

* WIP .// Deploy from Wallet

* Update Wallet contract

* Contract Deployment for Wallet

* Working deployments for Single Owned Wallet contracts

* Linting

* Create a Wallet from a Wallet

* Linting

* Fix Signer transactions // Add Gas Used for transactions

* Deploy wallet contract fix

* Fix too high gas estimate for Wallet Contract Deploys

* Final piece ; deploying from Wallet owned by wallet

* Update Wallet Code

* Updated the Wallet Codes

* Fixing Wallet Deployments

* Add Support for older wallets

* Linting

* SMS Faucet (#4774)

* Faucet

* Remove flakey button-index testing

* Only display faucet when sms verified (mainnet)

* simplify availability checks

* WIP

* Resuest from verified -> verified

* Update endpoint, display response text

* Error icon on errors

* Parse hash text response

* Use /api/:address endpoint

* hash -> data

* Adjust sms-certified message

* Fix SectionList hovering issue (#4749)

* Fix SectionList Items hover when <3 items

* Even easier...

* lint (new)

js/src/ui/Icons/index.js

@@ -31,6 +31,7 @@ export DashboardIcon from 'material-ui/svg-icons/action/dashboard';
 export DeleteIcon from 'material-ui/svg-icons/action/delete';
 export DevelopIcon from 'material-ui/svg-icons/action/description';
 export DoneIcon from 'material-ui/svg-icons/action/done-all';
+export DialIcon from 'material-ui/svg-icons/communication/dialpad';
 export EditIcon from 'material-ui/svg-icons/content/create';
 export ErrorIcon from 'material-ui/svg-icons/alert/error';
 export FileUploadIcon from 'material-ui/svg-icons/file/file-upload';

js/src/ui/MethodDecoding/methodDecoding.js

@@ -120,6 +120,18 @@ class MethodDecoding extends Component {
         <span className={ styles.highlight }>
           { gas.toFormat(0) } gas ({ gasPrice.div(1000000).toFormat(0) }M/<small>ETH</small>)
         </span>
+        {
+          transaction.gasUsed
+            ? (
+              <span>
+                <span>used</span>
+                <span className={ styles.highlight }>
+                  { transaction.gasUsed.toFormat(0) } gas
+                </span>
+              </span>
+            )
+            : null
+        }
         <span> for a total transaction value of </span>
         <span className={ styles.highlight }>{ this.renderEtherValue(gasValue) }</span>
         { this.renderMinBlock() }

js/src/ui/ModalBox/modalBox.js

@@ -22,13 +22,13 @@ import styles from './modalBox.css';
 
 export default class ModalBox extends Component {
   static propTypes = {
-    children: PropTypes.node.isRequired,
+    children: PropTypes.node,
     icon: PropTypes.node.isRequired,
     summary: nodeOrStringProptype()
   }
 
   render () {
-    const { children, icon } = this.props;
+    const { icon } = this.props;
 
     return (
       <div className={ styles.body }>
@@ -37,14 +37,26 @@ export default class ModalBox extends Component {
         </div>
         <div className={ styles.content }>
           { this.renderSummary() }
-          <div className={ styles.body }>
-            { children }
-          </div>
+          { this.renderBody() }
         </div>
       </div>
     );
   }
 
+  renderBody () {
+    const { children } = this.props;
+
+    if (!children) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.body }>
+        { children }
+      </div>
+    );
+  }
+
   renderSummary () {
     const { summary } = this.props;
 

js/src/ui/SectionList/sectionList.css

@@ -17,7 +17,6 @@
 
 $transition: all 0.25s;
 $widthNormal: 33.33%;
-$widthShrunk: 29%;
 $widthExpanded: 42%;
 
 .section {
@@ -39,18 +38,19 @@ $widthExpanded: 42%;
     display: flex;
     justify-content: center;
 
-    /* TODO: As per JS comments, the flex-base could be adjusted in the future to allow for */
+    /* TODO: As per JS comments, the flex-base could be adjusted in the future to allow for
     /* case where <> 3 columns are required should the need arrise from a UI pov. */
     .item {
       box-sizing: border-box;
       display: flex;
       flex: 0 1 $widthNormal;
-      max-width: $widthNormal;
       opacity: 0.85;
       padding: 0.25em;
+
       /* https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/ */
       transform: translateZ(0);
       transition: $transition;
+      width: 0;
 
       &:hover {
         opacity: 1;
@@ -58,22 +58,13 @@ $widthExpanded: 42%;
       }
     }
 
-    &:hover {
-      .item {
-        &.stretchOn {
-          flex: 0 1 $widthShrunk;
-          max-width: $widthShrunk;
-
-          &:hover {
-            flex: 0 0 $widthExpanded;
-            max-width: $widthExpanded;
-          }
-        }
-      }
+    .item.stretchOn:hover {
+      flex: 0 0 $widthExpanded;
+      max-width: $widthExpanded;
     }
   }
 }
 
-.section+.section {
+.section + .section {
   margin-top: 1em;
 }

js/src/ui/TxList/store.js

@@ -51,6 +51,7 @@ export default class Store {
 
           return bnB.comparedTo(bnA);
         });
+
       this._pendingHashes = this.sortedHashes.filter((hash) => this.transactions[hash].blockNumber.eq(0));
     });
   }
@@ -85,26 +86,53 @@ export default class Store {
     this._subscriptionId = 0;
   }
 
-  loadTransactions (_txhashes) {
-    const txhashes = _txhashes.filter((hash) => !this.transactions[hash] || this._pendingHashes.includes(hash));
+  loadTransactions (_txhashes = []) {
+    const promises = _txhashes
+      .filter((txhash) => !this.transactions[txhash] || this._pendingHashes.includes(txhash))
+      .map((txhash) => {
+        return Promise
+          .all([
+            this._api.eth.getTransactionByHash(txhash),
+            this._api.eth.getTransactionReceipt(txhash)
+          ])
+          .then(([
+            transaction = {},
+            transactionReceipt = {}
+          ]) => {
+            return {
+              ...transactionReceipt,
+              ...transaction
+            };
+          });
+      });
 
-    if (!txhashes || !txhashes.length) {
+    if (!promises.length) {
       return;
     }
 
     Promise
-      .all(txhashes.map((txhash) => this._api.eth.getTransactionByHash(txhash)))
+      .all(promises)
       .then((_transactions) => {
-        const transactions = _transactions.filter((tx) => tx);
+        const blockNumbers = [];
+        const transactions = _transactions
+          .filter((tx) => tx && tx.hash)
+          .reduce((txs, tx) => {
+            txs[tx.hash] = tx;
 
-        this.addTransactions(
-          transactions.reduce((transactions, tx, index) => {
-            transactions[txhashes[index]] = tx;
-            return transactions;
-          }, {})
-        );
+            if (tx.blockNumber && tx.blockNumber.gt(0)) {
+              blockNumbers.push(tx.blockNumber.toNumber());
+            }
 
-        this.loadBlocks(transactions.map((tx) => tx.blockNumber ? tx.blockNumber.toNumber() : 0));
+            return txs;
+          }, {});
+
+        // No need to add transactions if there are none
+        if (Object.keys(transactions).length === 0) {
+          return false;
+        }
+
+        this.addTransactions(transactions);
+        this.loadBlocks(blockNumbers);
       })
       .catch((error) => {
         console.warn('loadTransactions', error);

js/src/ui/TxList/txList.js

@@ -27,7 +27,7 @@ import styles from './txList.css';
 class TxList extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
-  }
+  };
 
   static propTypes = {
     address: PropTypes.string.isRequired,
@@ -36,7 +36,7 @@ class TxList extends Component {
       PropTypes.object
     ]).isRequired,
     netVersion: PropTypes.string.isRequired
-  }
+  };
 
   store = new Store(this.context.api);