[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
2017-03-10 14:03:10 +01:00
parent 34e81101d7
commit ab236690df
17 changed files with 266 additions and 61 deletions
--- a/js/src/dapps/githubhint.js
+++ b/js/src/dapps/githubhint.js
@@ -16,6 +16,7 @@

 import ReactDOM from 'react-dom';
 import React from 'react';
+import { AppContainer } from 'react-hot-loader';

 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -27,6 +28,21 @@ import '../../assets/fonts/RobotoMono/font.css';
 import './style.css';

 ReactDOM.render(
-  <Application />,
+  <AppContainer>
+    <Application />
+  </AppContainer>,
  document.querySelector('#container')
 );
+
+if (module.hot) {
+  module.hot.accept('./githubhint/Application/index.js', () => {
+    require('./githubhint/Application/index.js');
+
+    ReactDOM.render(
+      <AppContainer>
+        <Application />
+      </AppContainer>,
+      document.querySelector('#container')
+    );
+  });
+}
--- a/js/src/dapps/localtx.js
+++ b/js/src/dapps/localtx.js
@@ -16,6 +16,7 @@

 import ReactDOM from 'react-dom';
 import React from 'react';
+import { AppContainer } from 'react-hot-loader';

 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -27,6 +28,21 @@ import '../../assets/fonts/RobotoMono/font.css';
 import './style.css';

 ReactDOM.render(
-  <Application />,
+  <AppContainer>
+    <Application />
+  </AppContainer>,
  document.querySelector('#container')
 );
+
+if (module.hot) {
+  module.hot.accept('./localtx/Application/index.js', () => {
+    require('./localtx/Application/index.js');
+
+    ReactDOM.render(
+      <AppContainer>
+        <Application />
+      </AppContainer>,
+      document.querySelector('#container')
+    );
+  });
+}
--- a/js/src/dapps/localtx/Application/application.css
+++ b/js/src/dapps/localtx/Application/application.css
@@ -15,5 +15,29 @@
    th {
      text-align: center;
    }
+
+    td {
+      text-align: center;
+    }
+  }
+
+  button {
+    background-color: rgba(0, 136, 170, 1);
+    border: none;
+    border-radius: 5px;
+    color: white;
+    font-size: 1rem;
+    padding: 0.5em 1em;
+    width: 100%;
+
+    &:hover {
+      background-color: rgba(0, 136, 170, 0.8);
+      cursor: pointer;
+    }
+  }
+
+  input {
+    font-size: 1rem;
+    padding: 0.5em 1em;
  }
 }
--- a/js/src/dapps/localtx/Application/application.js
+++ b/js/src/dapps/localtx/Application/application.js
@@ -70,7 +70,6 @@ export default class Application extends Component {
          local[tx.hash].transaction = tx;
          local[tx.hash].stats = data.stats;
        });
-
      // Convert local transactions to array
      const localTransactions = Object.keys(local).map(hash => {
        const data = local[hash];
--- a/js/src/dapps/localtx/Transaction/transaction.css
+++ b/js/src/dapps/localtx/Transaction/transaction.css
@@ -6,6 +6,14 @@
  }
 }

+.txhash {
+  display: inline-block;
+  overflow: hidden;
+  padding-right: 3ch;
+  text-overflow: ellipsis;
+  width: 10ch;
+}
+
 .transaction {
  td {
    padding: 7px 15px;
--- a/js/src/dapps/localtx/Transaction/transaction.js
+++ b/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>
    );
--- a/js/src/dapps/signaturereg.js
+++ b/js/src/dapps/signaturereg.js
@@ -16,6 +16,7 @@

 import ReactDOM from 'react-dom';
 import React from 'react';
+import { AppContainer } from 'react-hot-loader';

 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -27,6 +28,21 @@ import '../../assets/fonts/RobotoMono/font.css';
 import './style.css';

 ReactDOM.render(
-  <Application />,
+  <AppContainer>
+    <Application />
+  </AppContainer>,
  document.querySelector('#container')
 );
+
+if (module.hot) {
+  module.hot.accept('./signaturereg/Application/index.js', () => {
+    require('./signaturereg/Application/index.js');
+
+    ReactDOM.render(
+      <AppContainer>
+        <Application />
+      </AppContainer>,
+      document.querySelector('#container')
+    );
+  });
+}
--- a/js/src/dapps/tokendeploy.js
+++ b/js/src/dapps/tokendeploy.js
@@ -17,6 +17,7 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 import { Redirect, Router, Route, hashHistory } from 'react-router';
+import { AppContainer } from 'react-hot-loader';

 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -31,13 +32,37 @@ import '../../assets/fonts/RobotoMono/font.css';
 import './style.css';

 ReactDOM.render(
-  <Router history={ hashHistory }>
-    <Redirect from='/' to='/overview' />
-    <Route path='/' component={ Application }>
-      <Route path='deploy' component={ Deploy } />
-      <Route path='overview' component={ Overview } />
-      <Route path='transfer' component={ Transfer } />
-    </Route>
-  </Router>,
+  <AppContainer>
+    <Router history={ hashHistory }>
+      <Redirect from='/' to='/overview' />
+      <Route path='/' component={ Application }>
+        <Route path='deploy' component={ Deploy } />
+        <Route path='overview' component={ Overview } />
+        <Route path='transfer' component={ Transfer } />
+      </Route>
+    </Router>
+  </AppContainer>,
  document.querySelector('#container')
 );
+
+if (module.hot) {
+  module.hot.accept('./tokendeploy/Application/index.js', () => {
+    require('./tokendeploy/Application/index.js');
+    require('./tokendeploy/Overview/index.js');
+    require('./tokendeploy/Transfer/index.js');
+
+    ReactDOM.render(
+      <AppContainer>
+        <Router history={ hashHistory }>
+          <Redirect from='/' to='/overview' />
+          <Route path='/' component={ Application }>
+            <Route path='deploy' component={ Deploy } />
+            <Route path='overview' component={ Overview } />
+            <Route path='transfer' component={ Transfer } />
+          </Route>
+        </Router>
+      </AppContainer>,
+      document.querySelector('#container')
+    );
+  });
+}
--- a/js/src/dapps/tokendeploy/services.js
+++ b/js/src/dapps/tokendeploy/services.js
@@ -119,7 +119,7 @@ export function attachInstances () {
    .all([
      api.parity.registryAddress(),
      api.parity.netChain(),
-      api.partiy.netVersion()
+      api.net.version()
    ])
    .then(([registryAddress, netChain, _netVersion]) => {
      const registry = api.newContract(abis.registry, registryAddress).instance;
--- a/js/src/dapps/tokenreg.js
+++ b/js/src/dapps/tokenreg.js
@@ -17,6 +17,7 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 import { Provider } from 'react-redux';
+import { AppContainer } from 'react-hot-loader';

 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -29,10 +30,25 @@ import '../../assets/fonts/RobotoMono/font.css';
 import './style.css';

 ReactDOM.render(
-  (
+  <AppContainer>
    <Provider store={ store }>
      <Container />
    </Provider>
-  ),
+  </AppContainer>,
  document.querySelector('#container')
 );
+
+if (module.hot) {
+  module.hot.accept('./tokenreg/Container.js', () => {
+    require('./tokenreg/Container.js');
+
+    ReactDOM.render(
+      <AppContainer>
+        <Provider store={ store }>
+          <Container />
+        </Provider>
+      </AppContainer>,
+      document.querySelector('#container')
+    );
+  });
+}