[beta] UI backports (#4855)

* Added React Hot Reload to dapps + TokenDeplpoy fix (#4846)

* Fix method decoding (#4845)

* Fix contract deployment method decoding in Signer

* Linting

* Fix TxViewer when no `to` (contract deployment) (#4847)

* Added React Hot Reload to dapps + TokenDeplpoy fix

* Fixes to the LocalTx dapp

* Don't send the nonce for mined transactions

* Don't encode empty to values for options

* Pull steps from actual available steps (#4848)

* Wait for the value to have changed in the input (#4844)

* Backport Regsirty changes from #4589

* Test fixes for #4589

js/src/dapps/localtx/Transaction/transaction.js

@@ -31,8 +31,8 @@ class BaseTransaction extends Component {
 
   renderHash (hash) {
     return (
-      <code title={ hash }>
-        { this.shortHash(hash) }
+      <code title={ hash } className={ styles.txhash }>
+        { hash }
       </code>
     );
   }
@@ -206,7 +206,10 @@ export class LocalTransaction extends BaseTransaction {
           From
         </th>
         <th>
-          Gas Price / Gas
+          Gas Price
+        </th>
+        <th>
+          Gas
         </th>
         <th>
           Status
@@ -224,18 +227,18 @@ export class LocalTransaction extends BaseTransaction {
 
   toggleResubmit = () => {
     const { transaction } = this.props;
-    const { isResubmitting, gasPrice } = this.state;
+    const { isResubmitting } = this.state;
 
-    this.setState({
+    const nextState = {
       isResubmitting: !isResubmitting
-    });
+    };
 
-    if (gasPrice === null) {
-      this.setState({
-        gasPrice: `0x${transaction.gasPrice.toString(16)}`,
-        gas: `0x${transaction.gas.toString(16)}`
-      });
+    if (!isResubmitting) {
+      nextState.gasPrice = api.util.fromWei(transaction.gasPrice, 'shannon').toNumber();
+      nextState.gas = transaction.gas.div(1000000).toNumber();
     }
+
+    this.setState(nextState);
   };
 
   setGasPrice = el => {
@@ -251,16 +254,15 @@ export class LocalTransaction extends BaseTransaction {
   };
 
   sendTransaction = () => {
-    const { transaction } = this.props;
+    const { transaction, status } = this.props;
     const { gasPrice, gas } = this.state;
 
     const newTransaction = {
       from: transaction.from,
-      to: transaction.to,
-      nonce: transaction.nonce,
       value: transaction.value,
       data: transaction.input,
-      gasPrice, gas
+      gasPrice: api.util.toWei(gasPrice, 'shannon'),
+      gas: new BigNumber(gas).mul(1000000)
     };
 
     this.setState({
@@ -268,11 +270,21 @@ export class LocalTransaction extends BaseTransaction {
       isSending: true
     });
 
-    const closeSending = () => this.setState({
-      isSending: false,
-      gasPrice: null,
-      gas: null
-    });
+    const closeSending = () => {
+      this.setState({
+        isSending: false,
+        gasPrice: null,
+        gas: null
+      });
+    };
+
+    if (transaction.to) {
+      newTransaction.to = transaction.to;
+    }
+
+    if (!['mined', 'replaced'].includes(status)) {
+      newTransaction.nonce = transaction.nonce;
+    }
 
     api.eth.sendTransaction(newTransaction)
       .then(closeSending)
@@ -290,9 +302,9 @@ export class LocalTransaction extends BaseTransaction {
     const resubmit = isSending ? (
       'sending...'
     ) : (
-      <a href='javascript:void' onClick={ this.toggleResubmit }>
+      <button onClick={ this.toggleResubmit }>
         resubmit
-      </a>
+      </button>
     );
 
     return (
@@ -308,7 +320,8 @@ export class LocalTransaction extends BaseTransaction {
         </td>
         <td>
           { this.renderGasPrice(transaction) }
-          <br />
+        </td>
+        <td>
           { this.renderGas(transaction) }
         </td>
         <td>
@@ -345,9 +358,9 @@ export class LocalTransaction extends BaseTransaction {
     return (
       <tr className={ styles.transaction }>
         <td>
-          <a href='javascript:void' onClick={ this.toggleResubmit }>
+          <button onClick={ this.toggleResubmit }>
             cancel
-          </a>
+          </button>
         </td>
         <td>
           { this.renderHash(transaction.hash) }
@@ -357,20 +370,24 @@ export class LocalTransaction extends BaseTransaction {
         </td>
         <td className={ styles.edit }>
           <input
-            type='text'
+            type='number'
             value={ gasPrice }
             onChange={ this.setGasPrice }
           />
+          <span>shannon</span>
+        </td>
+        <td className={ styles.edit }>
           <input
-            type='text'
+            type='number'
             value={ gas }
             onChange={ this.setGas }
           />
+          <span>MGas</span>
         </td>
         <td colSpan='2'>
-          <a href='javascript:void' onClick={ this.sendTransaction }>
+          <button onClick={ this.sendTransaction }>
             Send
-          </a>
+          </button>
         </td>
       </tr>
     );