From 16de9184019e4d10af242ea6cfe892dda756579d Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Fri, 8 Jun 2018 17:50:05 +0200
Subject: [PATCH 01/10] Follow transaction after sending it

---
 packages/light-react/src/App/App.js           |   2 -
 packages/light-react/src/Send/Send.js         | 125 +++-----------
 packages/light-react/src/Send/Sent/Sent.js    |  80 +++++++++
 .../EthBalance => Send/Sent}/index.js         |   4 +-
 .../light-react/src/Send/Signer/Signer.js     | 159 +++++-------------
 .../src/Send/TokenBalance/TokenBalance.js     |  48 ++++++
 .../TokenBalance}/index.js                    |   4 +-
 .../light-react/src/Send/TxForm/TxForm.js     | 115 +++++++++++++
 packages/light-react/src/Send/TxForm/index.js |   8 +
 .../TokensList/BalanceLayout/BalanceLayout.js |  26 ---
 .../TokensList/EthBalance/EthBalance.js       |  33 ----
 .../TokensList/TokenBalance/TokenBalance.js   |  50 ++++--
 .../src/Tokens/TokensList/TokensList.js       |  15 +-
 .../src/assets/img/icons/check.svg            |   4 +
 packages/light-react/src/stores/index.js      |   4 +-
 packages/light-react/src/stores/sendStore.js  |  66 ++++++++
 .../light-react/src/stores/signerStore.js     |  67 --------
 17 files changed, 438 insertions(+), 372 deletions(-)
 create mode 100644 packages/light-react/src/Send/Sent/Sent.js
 rename packages/light-react/src/{Tokens/TokensList/EthBalance => Send/Sent}/index.js (64%)
 create mode 100644 packages/light-react/src/Send/TokenBalance/TokenBalance.js
 rename packages/light-react/src/{Tokens/TokensList/BalanceLayout => Send/TokenBalance}/index.js (61%)
 create mode 100644 packages/light-react/src/Send/TxForm/TxForm.js
 create mode 100644 packages/light-react/src/Send/TxForm/index.js
 delete mode 100644 packages/light-react/src/Tokens/TokensList/BalanceLayout/BalanceLayout.js
 delete mode 100644 packages/light-react/src/Tokens/TokensList/EthBalance/EthBalance.js
 create mode 100644 packages/light-react/src/assets/img/icons/check.svg
 create mode 100644 packages/light-react/src/stores/sendStore.js
 delete mode 100644 packages/light-react/src/stores/signerStore.js

diff --git a/packages/light-react/src/App/App.js b/packages/light-react/src/App/App.js
index d5197696..c1043dcd 100644
--- a/packages/light-react/src/App/App.js
+++ b/packages/light-react/src/App/App.js
@@ -19,7 +19,6 @@ import Overlay from '../Overlay';
 import Receive from '../Receive';
 import Send from '../Send';
 import Settings from '../Settings';
-import Signer from '../Send/Signer';
 import { STATUS } from '../stores/healthStore';
 import Tokens from '../Tokens';
 import './App.css';
@@ -80,7 +79,6 @@ class App extends Component {
         <Route path='/receive' component={Receive} />
         <Route path='/send' component={Send} />
         <Route path='/settings' component={Settings} />
-        <Route path='/signer' component={Signer} />
         <Route path='/tokens' component={Tokens} />
         <Redirect from='*' to='/' />
       </Switch>
diff --git a/packages/light-react/src/Send/Send.js b/packages/light-react/src/Send/Send.js
index e7f3c8ac..7cfc8345 100644
--- a/packages/light-react/src/Send/Send.js
+++ b/packages/light-react/src/Send/Send.js
@@ -3,49 +3,25 @@
 //
 // SPDX-License-Identifier: MIT
 
-import React, { PureComponent } from 'react';
-import { defaultAccount$, myBalance$ } from '@parity/light.js';
-import { map } from 'rxjs/operators';
-import { fromWei, toWei } from '@parity/api/lib/util/wei';
-import light from 'light-hoc';
-import { Link } from 'react-router-dom';
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { Link, Route, Redirect, Switch } from 'react-router-dom';
 
-import ethereumIcon from '../assets/img/tokens/ethereum.png';
-
-@light({
-  balance: () => myBalance$().pipe(map(value => +fromWei(value))),
-  me: defaultAccount$
-})
-class Send extends PureComponent {
-  state = {
-    amount: 0.01, // In Ether
-    gas: 21000,
-    to: '0x00Ae02834e91810B223E54ce3f9B7875258a1747'
-  };
-
-  handleChangeAmount = ({ target: { value } }) =>
-    this.setState({ amount: value });
-
-  handleChangeGas = ({ target: { value } }) => this.setState({ gas: value });
-
-  handleChangeTo = ({ target: { value } }) => this.setState({ to: value });
-
-  handleSubmit = e => {
-    e.preventDefault();
-    const { history, me } = this.props;
-    const { amount, gas, to } = this.state;
-    const tx = {
-      from: me,
-      gas,
-      to,
-      value: toWei(amount)
-    };
-    history.push(`/signer`, tx);
-  };
+import Sent from './Sent';
+import Signer from './Signer';
+import TxForm from './TxForm';
 
+@inject('sendStore')
+@observer
+class Send extends Component {
   render () {
-    const { balance } = this.props;
-    const { amount, gas, to } = this.state;
+    const {
+      sendStore: { token }
+    } = this.props;
+
+    if (!token) {
+      return <Redirect to='/' />;
+    }
 
     return (
       <div>
@@ -56,74 +32,17 @@ class Send extends PureComponent {
             </Link>
           </div>
           <div className='header-nav_title'>
-            <h1>Send Ethereum</h1>
+            <h1>Send {token.name}</h1>
           </div>
           <div className='header-nav_right' />
         </nav>
-
         <div className='window_content'>
           <div className='box -padded'>
-            <div className='box -card'>
-              <div className='token'>
-                <div className='token_icon'>
-                  <img src={ethereumIcon} alt='ethereum' />
-                </div>
-                <div className='token_name'>Ethereum</div>
-                <div className='token_balance'>
-                  {balance}
-                  <span className='token_symbol'>ETH</span>
-                </div>
-              </div>
-              <div className='box -card-drawer'>
-                <form className='send-form' onSubmit={this.handleSubmit}>
-                  <fieldset className='form_fields'>
-                    <div className='form_field'>
-                      <label>Amount</label>
-                      <input
-                        className='form_field_amount'
-                        onChange={this.handleChangeAmount}
-                        required
-                        type='number'
-                        value={amount}
-                      />
-                      <nav className='form-field_nav'>
-                        <button className='button -utility'>Max</button>
-                      </nav>
-                    </div>
-                    <div className='form_field'>
-                      <label>To</label>
-                      <textarea
-                        className='-sm'
-                        onChange={this.handleChangeTo}
-                        required
-                        type='text'
-                        placeholder='Recipient address'
-                        value={to}
-                      />
-                    </div>
-                    <div className='form_field -range'>
-                      <label>Gas</label>
-                      <input
-                        onChange={this.handleChangeGas}
-                        required
-                        min='1'
-                        max='44000'
-                        type='range'
-                        value={gas}
-                      />
-                      <nav className='range-nav'>
-                        <span className='range-nav_label'>Cheap</span>
-                        <span className='range-nav_value'>{gas}</span>
-                        <span className='range-nav_label'>Fast</span>
-                      </nav>
-                    </div>
-                  </fieldset>
-                  <nav className='form-nav'>
-                    <button className='button'>Send</button>
-                  </nav>
-                </form>
-              </div>
-            </div>
+            <Switch>
+              <Route exact path='/send' component={TxForm} />
+              <Route path='/send/signer' component={Signer} />
+              <Route path='/send/sent' component={Sent} />
+            </Switch>
           </div>
         </div>
       </div>
diff --git a/packages/light-react/src/Send/Sent/Sent.js b/packages/light-react/src/Send/Sent/Sent.js
new file mode 100644
index 00000000..a099934f
--- /dev/null
+++ b/packages/light-react/src/Send/Sent/Sent.js
@@ -0,0 +1,80 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { blockNumber$ } from '@parity/light.js';
+import { inject, observer } from 'mobx-react';
+import light from 'light-hoc';
+
+import check from '../../assets/img/icons/check.svg';
+import loading from '../../assets/img/icons/loading.svg';
+
+@light({
+  blockNumber: blockNumber$
+})
+@inject('sendStore')
+@observer
+class Sent extends Component {
+  render () {
+    return (
+      <div className='alert-screen'>
+        <div className='alert-screen_content'>
+          <div className='alert-screen_image'>
+            <img alt='loading' src={this.renderIcon()} />
+          </div>
+          <div className='alert-screen_text'>
+            <h1>{this.renderTitle()}</h1>
+            <p>{this.renderDescription()}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderDescription = () => {
+    const {
+      sendStore: { txStatus }
+    } = this.props;
+
+    if (txStatus.confirmed) {
+      return 'Successfully sent';
+    }
+
+    if (txStatus.failed) {
+      return JSON.stringify(txStatus.failed);
+    }
+
+    return null;
+  };
+
+  renderIcon = () => {
+    const {
+      sendStore: { txStatus }
+    } = this.props;
+    if (txStatus.confirmed) {
+      return check;
+    }
+    return loading;
+  };
+
+  renderTitle = () => {
+    const {
+      sendStore: { txStatus }
+    } = this.props;
+    console.log(txStatus);
+
+    if (txStatus.confirmed) {
+      return 'Successfully sent';
+    }
+
+    if (txStatus.failed) {
+      return 'Error';
+    }
+
+    return 'Sending your transaction...';
+  };
+}
+
+export default Sent;
diff --git a/packages/light-react/src/Tokens/TokensList/EthBalance/index.js b/packages/light-react/src/Send/Sent/index.js
similarity index 64%
rename from packages/light-react/src/Tokens/TokensList/EthBalance/index.js
rename to packages/light-react/src/Send/Sent/index.js
index be82ef40..3fecdb1a 100644
--- a/packages/light-react/src/Tokens/TokensList/EthBalance/index.js
+++ b/packages/light-react/src/Send/Sent/index.js
@@ -3,6 +3,6 @@
 //
 // SPDX-License-Identifier: MIT
 
-import EthBalance from './EthBalance';
+import Sent from './Sent';
 
-export default EthBalance;
+export default Sent;
diff --git a/packages/light-react/src/Send/Signer/Signer.js b/packages/light-react/src/Send/Signer/Signer.js
index 1ede7c8d..19d5a353 100644
--- a/packages/light-react/src/Send/Signer/Signer.js
+++ b/packages/light-react/src/Send/Signer/Signer.js
@@ -4,56 +4,24 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
-import { defaultAccount$, myBalance$, post$ } from '@parity/light.js';
-import { fromWei } from '@parity/api/lib/util/wei';
 import { inject, observer } from 'mobx-react';
-import light from 'light-hoc';
-import { Link } from 'react-router-dom';
-import { map } from 'rxjs/operators';
 
-import ethereumIcon from '../../assets/img/tokens/ethereum.png';
+import TokenBalance from '../TokenBalance';
 
-@light({
-  balance: () => myBalance$().pipe(map(value => +fromWei(value))),
-  me: defaultAccount$
-})
-@inject('signerStore')
+@inject('sendStore')
 @observer
 class Signer extends Component {
   state = {
-    password: '',
-    status: null
+    password: ''
   };
 
-  componentWillMount () {
-    // If we accessed this URL via URL change, then something's not right, so
-    // we go back. If we accessed after the Send page, then location.state is
-    // set as the tx.
-    if (!this.props.location.state) {
-      this.props.history.goBack();
-    }
-  }
-
-  componentDidMount () {
-    const tx = this.props.location.state;
-    this.subscription = post$(tx).subscribe(status => {
-      if (status.requested) {
-        this.requestId = status.requested;
-      }
-      this.setState({ status });
-    });
-  }
+  handleAccept = e => {
+    const { history, sendStore } = this.props;
+    const { password } = this.state;
 
-  componentWillUnmount () {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
-  }
+    e.preventDefault();
 
-  handleAccept = () => {
-    const { signerStore } = this.props;
-    const { password } = this.state;
-    signerStore.acceptRequest(this.requestId, password);
+    sendStore.acceptRequest(password).then(() => history.push('/send/sent'));
   };
 
   handleChangePassword = ({ target: { value } }) => {
@@ -61,90 +29,55 @@ class Signer extends Component {
   };
 
   handleReject = () => {
-    const { history, signerStore } = this.props;
-    signerStore.rejectRequest(this.requestId).then(() => history.goBack());
-  };
-
-  handleSubmit = e => {
-    e.preventDefault();
-    this.handleAccept();
+    const { history, sendStore } = this.props;
+    sendStore.rejectRequest().then(() => history.goBack());
   };
 
   render () {
     const {
-      balance,
-      location: { state: tx }
+      sendStore: { token, tx }
     } = this.props;
     const { password } = this.state;
 
     return (
-      <div>
-        <nav className='header-nav'>
-          <div className='header-nav_left'>
-            <Link to='/send' className='icon -close'>
-              Close
-            </Link>
-          </div>
-          <div className='header-nav_title'>
-            <h1>Sending Ethereum</h1>
-          </div>
-          <div className='header-nav_right' />
-        </nav>
-
-        <div className='window_content'>
-          <div className='box -padded'>
-            <div className='box -card'>
-              <div className='token'>
-                <div className='token_icon'>
-                  <img src={ethereumIcon} alt='ethereum' />
-                </div>
-                <div className='token_name'>Ethereum</div>
-                <div className='token_balance'>
-                  {balance}
-                  <span className='token_symbol'>ETH</span>
-                </div>
-              </div>
-              <div className='box -card-drawer'>
-                <div className='form_field'>
-                  <label>Amount</label>
-                  <div className='form_field_value'>
-                    {+fromWei(tx.value)} ETH
-                  </div>
-                </div>
-                <div className='form_field'>
-                  <label>To</label>
-                  <div className='form_field_value'>{tx.to}</div>
-                </div>
-              </div>
-              <div className='box -card-drawer'>
-                <div className='text'>
-                  <p>Enter your password to confirm this transaction.</p>
-                </div>
-                <div className='form_field'>
-                  <label>Password</label>
-                  <input
-                    onChange={this.handleChangePassword}
-                    required
-                    type='password'
-                    value={password}
-                  />
-                </div>
-                <nav className='form-nav -binary'>
-                  <button
-                    className='button -cancel'
-                    onClick={this.handleReject}
-                    type='button'
-                  >
-                    Cancel
-                  </button>
-                  <button className='button -submit'>
-                    Confirm transaction
-                  </button>
-                </nav>
-              </div>
+      <div className='box -card'>
+        <TokenBalance token={token} />
+        <div className='box -card-drawer'>
+          <div className='form_field'>
+            <label>Amount</label>
+            <div className='form_field_value'>
+              {token.amount} {token.symbol}
             </div>
           </div>
+          <div className='form_field'>
+            <label>To</label>
+            <div className='form_field_value'>{tx.to}</div>
+          </div>
         </div>
+        <form className='box -card-drawer' onSubmit={this.handleAccept}>
+          <div className='text'>
+            <p>Enter your password to confirm this transaction.</p>
+          </div>
+          <div className='form_field'>
+            <label>Password</label>
+            <input
+              onChange={this.handleChangePassword}
+              required
+              type='password'
+              value={password}
+            />
+          </div>
+          <nav className='form-nav -binary'>
+            <button
+              className='button -cancel'
+              onClick={this.handleReject}
+              type='button'
+            >
+              Cancel
+            </button>
+            <button className='button -submit'>Confirm transaction</button>
+          </nav>
+        </form>
       </div>
     );
   }
diff --git a/packages/light-react/src/Send/TokenBalance/TokenBalance.js b/packages/light-react/src/Send/TokenBalance/TokenBalance.js
new file mode 100644
index 00000000..f588b01b
--- /dev/null
+++ b/packages/light-react/src/Send/TokenBalance/TokenBalance.js
@@ -0,0 +1,48 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import abi from '@parity/shared/lib/contracts/abi/eip20';
+import { defaultAccount$, makeContract$, myBalance$ } from '@parity/light.js';
+import { fromWei } from '@parity/api/lib/util/wei';
+import light from 'light-hoc';
+import { map, switchMap } from 'rxjs/operators';
+import PropTypes from 'prop-types';
+
+@light({
+  balance: ({ token: { address, decimals } }) =>
+    address === 'ETH'
+      ? myBalance$().pipe(map(value => fromWei(value).toFixed(6))) // Get balance for Eth
+      : defaultAccount$().pipe(
+        switchMap(
+          defaultAccount =>
+            makeContract$(address, abi).balanceOf$(defaultAccount) // Call ERC20 contract for token
+        ),
+        map(value => value.div(10 ** decimals).toFixed(6))
+      )
+})
+class TokenBalance extends Component {
+  static propTypes = {
+    token: PropTypes.object.isRequired
+  };
+
+  render () {
+    const { balance, token } = this.props;
+    return (
+      <div className='token'>
+        <div className='token_icon'>
+          <img src={token.logo} alt={token.name} />
+        </div>
+        <div className='token_name'>{token.name}</div>
+        <div className='token_balance'>
+          {balance}
+          <span className='token_symbol'>{token.symbol}</span>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default TokenBalance;
diff --git a/packages/light-react/src/Tokens/TokensList/BalanceLayout/index.js b/packages/light-react/src/Send/TokenBalance/index.js
similarity index 61%
rename from packages/light-react/src/Tokens/TokensList/BalanceLayout/index.js
rename to packages/light-react/src/Send/TokenBalance/index.js
index b7448e7b..967cc179 100644
--- a/packages/light-react/src/Tokens/TokensList/BalanceLayout/index.js
+++ b/packages/light-react/src/Send/TokenBalance/index.js
@@ -3,6 +3,6 @@
 //
 // SPDX-License-Identifier: MIT
 
-import BalanceLayout from './BalanceLayout';
+import TokenBalance from './TokenBalance';
 
-export default BalanceLayout;
+export default TokenBalance;
diff --git a/packages/light-react/src/Send/TxForm/TxForm.js b/packages/light-react/src/Send/TxForm/TxForm.js
new file mode 100644
index 00000000..58acd60b
--- /dev/null
+++ b/packages/light-react/src/Send/TxForm/TxForm.js
@@ -0,0 +1,115 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { defaultAccount$ } from '@parity/light.js';
+import { toWei } from '@parity/api/lib/util/wei';
+import light from 'light-hoc';
+import { inject, observer } from 'mobx-react';
+
+import TokenBalance from '../TokenBalance';
+
+@light({
+  defaultAccount: defaultAccount$
+})
+@inject('sendStore')
+@observer
+class Send extends Component {
+  state = {
+    amount: 0.01, // In Ether or in token
+    gas: 21000,
+    to: '0x00Ae02834e91810B223E54ce3f9B7875258a1747'
+  };
+
+  handleChangeAmount = ({ target: { value } }) =>
+    this.setState({ amount: value });
+
+  handleChangeGas = ({ target: { value } }) => this.setState({ gas: value });
+
+  handleChangeTo = ({ target: { value } }) => this.setState({ to: value });
+
+  handleSubmit = e => {
+    e.preventDefault();
+    const { defaultAccount, history, sendStore } = this.props;
+    const { amount, gas, to } = this.state;
+
+    // Post a request to the transaction. There is a next step to sign this
+    // request.
+    sendStore.postTx({
+      from: defaultAccount,
+      gas,
+      to,
+      value: toWei(amount)
+    });
+
+    history.push('/send/signer');
+  };
+
+  render () {
+    const {
+      sendStore: { token }
+    } = this.props;
+    const { amount, gas, to } = this.state;
+
+    return (
+      <div className='box -card'>
+        <TokenBalance token={token} />
+        <div className='box -card-drawer'>
+          <form className='send-form' onSubmit={this.handleSubmit}>
+            <fieldset className='form_fields'>
+              <div className='form_field'>
+                <label>Amount</label>
+                <input
+                  className='form_field_amount'
+                  onChange={this.handleChangeAmount}
+                  required
+                  type='number'
+                  value={amount}
+                />
+                <nav className='form-field_nav'>
+                  <button className='button -utility' type='button'>
+                    Max
+                  </button>
+                </nav>
+              </div>
+              <div className='form_field'>
+                <label>To</label>
+                <textarea
+                  className='-sm'
+                  onChange={this.handleChangeTo}
+                  required
+                  type='text'
+                  placeholder='Recipient address'
+                  value={to}
+                />
+              </div>
+              <div className='form_field -range'>
+                <label>Gas</label>
+                <input
+                  onChange={this.handleChangeGas}
+                  required
+                  min='1'
+                  max='44000'
+                  type='range'
+                  value={gas}
+                />
+                <nav className='range-nav'>
+                  <span className='range-nav_label'>Cheap</span>
+                  <span className='range-nav_value'>{gas}</span>
+                  <span className='range-nav_label'>Fast</span>
+                </nav>
+              </div>
+            </fieldset>
+            <nav className='form-nav'>
+              <button className='button'>Send</button>
+            </nav>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Send;
diff --git a/packages/light-react/src/Send/TxForm/index.js b/packages/light-react/src/Send/TxForm/index.js
new file mode 100644
index 00000000..f63a12f9
--- /dev/null
+++ b/packages/light-react/src/Send/TxForm/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import TxForm from './TxForm';
+
+export default TxForm;
diff --git a/packages/light-react/src/Tokens/TokensList/BalanceLayout/BalanceLayout.js b/packages/light-react/src/Tokens/TokensList/BalanceLayout/BalanceLayout.js
deleted file mode 100644
index d662b1b6..00000000
--- a/packages/light-react/src/Tokens/TokensList/BalanceLayout/BalanceLayout.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright 2015-2018 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-//
-// SPDX-License-Identifier: MIT
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const BalanceLayout = ({ balance, token }) => (
-  <div className='token box -card -clickable'>
-    <div className='token_icon'>
-      <img alt={token.symbol} src={token.logo} />
-    </div>
-    <div className='token_name'>{token.name}</div>
-    <div className='token_balance'>
-      {Number.isFinite(balance) ? balance.toFixed(2) : '...'}{' '}
-      <span className='token_symbol'>{token.symbol}</span>
-    </div>
-  </div>
-);
-
-BalanceLayout.propTypes = {
-  balance: PropTypes.number
-};
-
-export default BalanceLayout;
diff --git a/packages/light-react/src/Tokens/TokensList/EthBalance/EthBalance.js b/packages/light-react/src/Tokens/TokensList/EthBalance/EthBalance.js
deleted file mode 100644
index 6fff3f93..00000000
--- a/packages/light-react/src/Tokens/TokensList/EthBalance/EthBalance.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2015-2018 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-//
-// SPDX-License-Identifier: MIT
-
-import React, { PureComponent } from 'react';
-import { fromWei } from '@parity/api/lib/util/wei';
-import light from 'light-hoc';
-import { Link } from 'react-router-dom';
-import { map } from 'rxjs/operators';
-import { myBalance$ } from '@parity/light.js';
-import PropTypes from 'prop-types';
-
-import BalanceLayout from '../BalanceLayout';
-
-@light({
-  balance: () => myBalance$().pipe(map(value => +fromWei(value)))
-})
-class EthBalance extends PureComponent {
-  static propTypes = {
-    token: PropTypes.object.isRequired
-  };
-
-  render () {
-    return (
-      <Link to='/send'>
-        <BalanceLayout {...this.props} />
-      </Link>
-    );
-  }
-}
-
-export default EthBalance;
diff --git a/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js b/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js
index cc8287b8..04fefc32 100644
--- a/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js
+++ b/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js
@@ -5,33 +5,57 @@
 
 import React, { Component } from 'react';
 import abi from '@parity/shared/lib/contracts/abi/eip20';
-import { defaultAccount$, makeContract$ } from '@parity/light.js';
+import { defaultAccount$, makeContract$, myBalance$ } from '@parity/light.js';
+import { fromWei } from '@parity/api/lib/util/wei';
+import { inject } from 'mobx-react';
 import light from 'light-hoc';
-import { Link } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import { map, switchMap } from 'rxjs/operators';
 import PropTypes from 'prop-types';
 
-import BalanceLayout from '../BalanceLayout';
-
 @light({
   balance: ({ token: { address, decimals } }) =>
-    defaultAccount$().pipe(
-      switchMap(defaultAccount =>
-        makeContract$(address, abi).balanceOf$(defaultAccount)
-      ),
-      map(value => +value.div(10 ** decimals))
-    )
+    address === 'ETH'
+      ? myBalance$().pipe(map(value => +fromWei(value)))
+      : defaultAccount$().pipe(
+        switchMap(defaultAccount =>
+          makeContract$(address, abi).balanceOf$(defaultAccount)
+        ),
+        map(value => +value.div(10 ** decimals))
+      )
 })
+@inject('sendStore')
+@withRouter
 class TokenBalance extends Component {
   static propTypes = {
     token: PropTypes.object.isRequired
   };
 
+  handleClick = () => {
+    const {
+      history,
+      sendStore,
+      token: { address }
+    } = this.props;
+    sendStore.setTokenFromAddress(address);
+    history.push('/send');
+  };
+
   render () {
+    const { balance, token } = this.props;
     return (
-      <Link to='/send'>
-        <BalanceLayout {...this.props} />
-      </Link>
+      <a onClick={this.handleClick}>
+        <div className='token box -card -clickable'>
+          <div className='token_icon'>
+            <img alt={token.symbol} src={token.logo} />
+          </div>
+          <div className='token_name'>{token.name}</div>
+          <div className='token_balance'>
+            {Number.isFinite(balance) ? balance.toFixed(2) : '...'}{' '}
+            <span className='token_symbol'>{token.symbol}</span>
+          </div>
+        </div>
+      </a>
     );
   }
 }
diff --git a/packages/light-react/src/Tokens/TokensList/TokensList.js b/packages/light-react/src/Tokens/TokensList/TokensList.js
index b197dd67..c6f6c369 100644
--- a/packages/light-react/src/Tokens/TokensList/TokensList.js
+++ b/packages/light-react/src/Tokens/TokensList/TokensList.js
@@ -6,26 +6,23 @@
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 
-import EthBalance from './EthBalance';
 import TokenBalance from './TokenBalance';
 
 @inject('tokensStore')
 @observer
 class Tokens extends Component {
   render () {
-    const { tokensStore: { tokensArray } } = this.props;
+    const {
+      tokensStore: { tokensArray }
+    } = this.props;
 
     return (
       <div className='window_content'>
         <div className='box -scroller'>
           <ul className='list -padded'>
-            {tokensArray.map(token =>
-              <li key={token.address}>
-                {token.address === 'ETH'
-                  ? <EthBalance token={token} />
-                  : <TokenBalance token={token} />}
-              </li>
-            )}
+            {tokensArray.map(token => (
+              <li key={token.address}>{<TokenBalance token={token} />}</li>
+            ))}
           </ul>
         </div>
       </div>
diff --git a/packages/light-react/src/assets/img/icons/check.svg b/packages/light-react/src/assets/img/icons/check.svg
new file mode 100644
index 00000000..9676f1d2
--- /dev/null
+++ b/packages/light-react/src/assets/img/icons/check.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 26 26" enable-background="new 0 0 26 26" width="512px" height="512px">
+  <path d="m.3,14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4,0l.1,.1 5.5,5.9c0.2,0.2 0.5,0.2 0.7,0l13.4-13.9h0.1v-8.88178e-16c0.4-0.4 1-0.4 1.4,0l1.4,1.4c0.4,0.4 0.4,1 0,1.4l0,0-16,16.6c-0.2,0.2-0.4,0.3-0.7,0.3-0.3,0-0.5-0.1-0.7-0.3l-7.8-8.4-.2-.3z" fill="#91DC5A"/>
+</svg>
diff --git a/packages/light-react/src/stores/index.js b/packages/light-react/src/stores/index.js
index 16f1178c..b013e638 100644
--- a/packages/light-react/src/stores/index.js
+++ b/packages/light-react/src/stores/index.js
@@ -7,7 +7,7 @@ import createAccountStore from './createAccountStore';
 import healthStore from './healthStore';
 import onboardingStore from './onboardingStore';
 import parityStore from './parityStore';
-import signerStore from './signerStore';
+import sendStore from './sendStore';
 import tokensStore from './tokensStore';
 
 export default {
@@ -15,6 +15,6 @@ export default {
   healthStore,
   onboardingStore,
   parityStore,
-  signerStore,
+  sendStore,
   tokensStore
 };
diff --git a/packages/light-react/src/stores/sendStore.js b/packages/light-react/src/stores/sendStore.js
new file mode 100644
index 00000000..78c87097
--- /dev/null
+++ b/packages/light-react/src/stores/sendStore.js
@@ -0,0 +1,66 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import { action, observable } from 'mobx';
+import { post$ } from '@parity/light.js';
+
+import parityStore from './parityStore';
+import tokensStore from './tokensStore';
+
+class SendStore {
+  @observable txStatus; // Status of the tx, see wiki for details
+
+  constructor () {
+    this.api = parityStore.api;
+  }
+
+  acceptRequest = password => {
+    if (!this.requestId) {
+      return Promise.reject(
+        new Error('The requestId has not been generated yet.')
+      );
+    }
+    return this.api.signer.confirmRequest(this.requestId, null, password);
+  };
+
+  postTx = tx => {
+    if (!tx) {
+      return;
+    }
+    this.setTx(tx);
+
+    // Subscribe to this transaction's status
+    post$(tx).subscribe(txStatus => {
+      if (txStatus.requested) {
+        this.requestId = txStatus.requested;
+      }
+      this.setTxStatus(txStatus);
+    });
+  };
+
+  rejectRequest = (requestId, password) => {
+    if (!this.requestId) {
+      return Promise.reject(
+        new Error('The requestId has not been generated yet.')
+      );
+    }
+    return this.api.signer.rejectRequest(this.requestId);
+  };
+
+  setTokenFromAddress = tokenAddress => {
+    this.token = tokensStore.tokens.get(tokenAddress);
+  };
+
+  setTx = tx => {
+    this.tx = tx;
+  };
+
+  @action
+  setTxStatus = txStatus => {
+    this.txStatus = txStatus;
+  };
+}
+
+export default new SendStore();
diff --git a/packages/light-react/src/stores/signerStore.js b/packages/light-react/src/stores/signerStore.js
deleted file mode 100644
index dcf8bc39..00000000
--- a/packages/light-react/src/stores/signerStore.js
+++ /dev/null
@@ -1,67 +0,0 @@
-// Copyright 2015-2018 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-//
-// SPDX-License-Identifier: MIT
-
-import { action, computed, observable } from 'mobx';
-
-import parityStore from './parityStore';
-
-class SignerStore {
-  @observable pending = [];
-
-  constructor () {
-    this.api = parityStore.api;
-
-    if (parityStore.isApiConnected) {
-      this.subscribePending();
-    } else {
-      // TODO This .on() is not working, so we poll every second
-      // this.api.on('connected', this.subscribePending);
-      this.interval = setInterval(() => {
-        if (parityStore.isApiConnected && this.api) {
-          this.subscribePending();
-          clearInterval(this.interval);
-        }
-      }, 1000);
-    }
-  }
-
-  acceptRequest = (requestId, password) =>
-    this.api.signer.confirmRequest(requestId, null, password);
-
-  rejectRequest = (requestId, password) =>
-    this.api.signer.rejectRequest(requestId, null, password);
-
-  @computed
-  get requests () {
-    const mapping = {}; // requestId -> request mapping
-    this.pending.forEach(request => {
-      mapping[request.id] = request;
-    });
-    return mapping;
-  }
-
-  @action
-  setPending = (pending = []) => {
-    this.pending = pending;
-  };
-
-  subscribePending = () => {
-    const callback = (err, pending) => {
-      if (err) {
-        throw new Error(err);
-      }
-
-      this.setPending(pending);
-    };
-
-    this.api
-      .subscribe('signer_requestsToConfirm', callback)
-      .then(() => this.api.signer.requestsToConfirm())
-      .then(pending => callback(null, pending))
-      .catch(callback);
-  };
-}
-
-export default new SignerStore();
-- 
GitLab


From a56f99a5bcb61308054746475abf2f6d977103a0 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Fri, 8 Jun 2018 18:23:57 +0200
Subject: [PATCH 02/10] Show confirmations after sending tx

---
 packages/light-react/src/Send/Sent/Sent.js    | 35 ++++++++++++++-----
 .../light-react/src/Send/Signer/Signer.js     |  6 ++--
 .../light-react/src/stores/parityStore.js     |  4 +--
 packages/light-react/src/stores/sendStore.js  | 23 ++++++++++--
 4 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/packages/light-react/src/Send/Sent/Sent.js b/packages/light-react/src/Send/Sent/Sent.js
index a099934f..0d75cec5 100644
--- a/packages/light-react/src/Send/Sent/Sent.js
+++ b/packages/light-react/src/Send/Sent/Sent.js
@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
-import { blockNumber$ } from '@parity/light.js';
+import { chainName$ } from '@parity/light.js';
 import { inject, observer } from 'mobx-react';
 import light from 'light-hoc';
 
@@ -12,7 +12,7 @@ import check from '../../assets/img/icons/check.svg';
 import loading from '../../assets/img/icons/loading.svg';
 
 @light({
-  blockNumber: blockNumber$
+  chainName: chainName$
 })
 @inject('sendStore')
 @observer
@@ -35,11 +35,17 @@ class Sent extends Component {
 
   renderDescription = () => {
     const {
-      sendStore: { txStatus }
+      sendStore: { confirmations, txStatus }
     } = this.props;
 
+    if (confirmations > 0) {
+      return `It has been confirmed ${
+        confirmations === 1 ? 'once' : `${confirmations} times`
+      }`;
+    }
+
     if (txStatus.confirmed) {
-      return 'Successfully sent';
+      return 'Waiting for confirmations...';
     }
 
     if (txStatus.failed) {
@@ -51,9 +57,9 @@ class Sent extends Component {
 
   renderIcon = () => {
     const {
-      sendStore: { txStatus }
+      sendStore: { confirmations }
     } = this.props;
-    if (txStatus.confirmed) {
+    if (confirmations >= 6) {
       return check;
     }
     return loading;
@@ -61,12 +67,25 @@ class Sent extends Component {
 
   renderTitle = () => {
     const {
+      chainName,
       sendStore: { txStatus }
     } = this.props;
-    console.log(txStatus);
 
     if (txStatus.confirmed) {
-      return 'Successfully sent';
+      return (
+        <span>
+          Your transaction is{' '}
+          <a
+            className='button -tiny'
+            href={`https://${
+              chainName === 'foundation' ? '' : `${chainName}.`
+            }etherscan.io/tx/${txStatus.confirmed.transactionHash}`}
+            target='_blank'
+          >
+            on the blockchain
+          </a>
+        </span>
+      );
     }
 
     if (txStatus.failed) {
diff --git a/packages/light-react/src/Send/Signer/Signer.js b/packages/light-react/src/Send/Signer/Signer.js
index 19d5a353..a2acdb6c 100644
--- a/packages/light-react/src/Send/Signer/Signer.js
+++ b/packages/light-react/src/Send/Signer/Signer.js
@@ -35,7 +35,7 @@ class Signer extends Component {
 
   render () {
     const {
-      sendStore: { token, tx }
+      sendStore: { token, tx, txStatus }
     } = this.props;
     const { password } = this.state;
 
@@ -75,7 +75,9 @@ class Signer extends Component {
             >
               Cancel
             </button>
-            <button className='button -submit'>Confirm transaction</button>
+            <button className='button -submit' disabled={!txStatus.requested}>
+              Confirm transaction
+            </button>
           </nav>
         </form>
       </div>
diff --git a/packages/light-react/src/stores/parityStore.js b/packages/light-react/src/stores/parityStore.js
index b5c7c9e5..82e63949 100644
--- a/packages/light-react/src/stores/parityStore.js
+++ b/packages/light-react/src/stores/parityStore.js
@@ -76,8 +76,8 @@ class ParityStore {
     this.api = api;
 
     // TODO This is not working
-    // api.on('connected', () => console.log('ehdsfa'));
-    // api.on('disconnected', () => console.log('ehdsfa'));
+    // api.on('connected', () => ...);
+    // api.on('disconnected', () => ...);
     // So instead, we poll every 1s
     setInterval(() => {
       this.setIsApiConnected(api.isConnected);
diff --git a/packages/light-react/src/stores/sendStore.js b/packages/light-react/src/stores/sendStore.js
index 78c87097..ebc11bf3 100644
--- a/packages/light-react/src/stores/sendStore.js
+++ b/packages/light-react/src/stores/sendStore.js
@@ -3,13 +3,14 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { action, observable } from 'mobx';
-import { post$ } from '@parity/light.js';
+import { action, computed, observable } from 'mobx';
+import { blockNumber$, post$ } from '@parity/light.js';
 
 import parityStore from './parityStore';
 import tokensStore from './tokensStore';
 
 class SendStore {
+  @observable blockNumber; // Current block number, used to calculate
   @observable txStatus; // Status of the tx, see wiki for details
 
   constructor () {
@@ -22,9 +23,22 @@ class SendStore {
         new Error('The requestId has not been generated yet.')
       );
     }
+
+    // Since we accepted this request, we also start to listen to blockNumber,
+    // to calculate the number of confirmations
+    blockNumber$().subscribe(this.setBlockNumber);
+
     return this.api.signer.confirmRequest(this.requestId, null, password);
   };
 
+  @computed
+  get confirmations () {
+    if (!this.txStatus.confirmed) {
+      return -1;
+    }
+    return this.blockNumber - +this.txStatus.confirmed.blockNumber;
+  }
+
   postTx = tx => {
     if (!tx) {
       return;
@@ -57,6 +71,11 @@ class SendStore {
     this.tx = tx;
   };
 
+  @action
+  setBlockNumber = blockNumber => {
+    this.blockNumber = blockNumber;
+  };
+
   @action
   setTxStatus = txStatus => {
     this.txStatus = txStatus;
-- 
GitLab


From a2b09b63c5f8327c1d28914f1b3cedb29c2beb4c Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Sat, 9 Jun 2018 00:47:01 +0200
Subject: [PATCH 03/10] Small fix

---
 packages/light-react/src/Send/Signer/Signer.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/light-react/src/Send/Signer/Signer.js b/packages/light-react/src/Send/Signer/Signer.js
index a2acdb6c..06b0a90d 100644
--- a/packages/light-react/src/Send/Signer/Signer.js
+++ b/packages/light-react/src/Send/Signer/Signer.js
@@ -30,7 +30,10 @@ class Signer extends Component {
 
   handleReject = () => {
     const { history, sendStore } = this.props;
-    sendStore.rejectRequest().then(() => history.goBack());
+    sendStore
+      .rejectRequest()
+      .then(() => history.goBack())
+      .catch(() => history.goBack());
   };
 
   render () {
-- 
GitLab


From a52eb1f511c219dc15219dfc5d4700653766f7d0 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 11 Jun 2018 16:12:37 +0200
Subject: [PATCH 04/10] Tweak the Sent page UI

---
 .../AccountPassword/AccountPassword.js        |  17 ++-
 packages/light-react/src/App/App.css          |  58 +++++---
 packages/light-react/src/Send/Send.js         |  31 ++---
 packages/light-react/src/Send/Sent/Sent.js    |  63 ++++++---
 .../light-react/src/Send/Signer/Signer.js     |  95 ++++++++------
 .../light-react/src/Send/TxForm/TxForm.js     | 124 ++++++++++--------
 .../src/assets/sass/shared/_basics.scss       |   8 +-
 .../src/assets/sass/shared/_box.scss          |  12 +-
 .../src/assets/sass/shared/_button.scss       |  10 +-
 .../src/assets/sass/shared/_form.scss         |  24 ++--
 .../src/assets/sass/shared/_text.scss         |  11 +-
 11 files changed, 278 insertions(+), 175 deletions(-)

diff --git a/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js b/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
index 836d4a42..7b571894 100644
--- a/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
+++ b/packages/light-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
@@ -30,7 +30,11 @@ class AccountPassword extends Component {
   };
 
   handleSubmit = () => {
-    const { createAccountStore, history, location: { pathname } } = this.props;
+    const {
+      createAccountStore,
+      history,
+      location: { pathname }
+    } = this.props;
     const { hint, password } = this.state;
     createAccountStore.setPassword(password);
     createAccountStore.setHint(hint);
@@ -82,11 +86,12 @@ class AccountPassword extends Component {
               </div>
 
               <nav className='form-nav'>
-                {password && confirm === password
-                  ? <button className='button'>Next</button>
-                  : <button className='button' disabled>
-                      Next
-                  </button>}
+                <button
+                  className='button'
+                  disabled={!password || confirm !== password}
+                >
+                  Next
+                </button>
               </nav>
             </form>
           </div>
diff --git a/packages/light-react/src/App/App.css b/packages/light-react/src/App/App.css
index e2ae348c..f8bb5a6e 100644
--- a/packages/light-react/src/App/App.css
+++ b/packages/light-react/src/App/App.css
@@ -747,8 +747,8 @@ html {
 
 body {
   user-select: none;
-  background-color: #A5BFDA;
-  background-image: linear-gradient(#A5BFDA, #BFCDDC);
+  background-color: #a5bfda;
+  background-image: linear-gradient(#a5bfda, #bfcddc);
   background-repeat: no-repeat;
   background-size: cover;
   color: #222;
@@ -761,10 +761,14 @@ body {
 .hidden {
   display: none; }
 
-a, a:link, a:visited {
+a,
+a:link,
+a:visited {
   color: #222;
   text-decoration: none; }
-  a:hover, a:link:hover, a:visited:hover {
+  a:hover,
+  a:link:hover,
+  a:visited:hover {
     cursor: default; }
 
 .box {
@@ -867,7 +871,7 @@ a, a:link, a:visited {
     .button.-utility:hover {
       opacity: 0.9; }
     .button.-utility:active {
-      opacity: 1.0; }
+      opacity: 1; }
     .button.-utility.-good {
       background-color: #3ec28f;
       color: #f9f9f9; }
@@ -885,7 +889,7 @@ a, a:link, a:visited {
     .button.-cancel:hover {
       opacity: 0.9; }
     .button.-cancel:active {
-      opacity: 1.0; }
+      opacity: 1; }
   .button.-icon {
     text-indent: -9999rem;
     background-size: 0.83333rem auto;
@@ -927,7 +931,12 @@ a, a:link, a:visited {
     padding-bottom: 0.5rem;
     overflow: hidden;
     word-wrap: break-word; }
-  .form_field input[type="text"], .form_field input[type="number"], .form_field input[type="tel"], .form_field input[type="email"], .form_field input[type="password"], .form_field textarea {
+  .form_field input[type='text'],
+  .form_field input[type='number'],
+  .form_field input[type='tel'],
+  .form_field input[type='email'],
+  .form_field input[type='password'],
+  .form_field textarea {
     border: 0;
     background: transparent;
     font-size: 1rem;
@@ -938,9 +947,14 @@ a, a:link, a:visited {
     opacity: 0.75;
     padding: 0.5rem;
     margin-top: -0.25rem; }
-    .form_field input[type="text"]:focus, .form_field input[type="number"]:focus, .form_field input[type="tel"]:focus, .form_field input[type="email"]:focus, .form_field input[type="password"]:focus, .form_field textarea:focus {
+    .form_field input[type='text']:focus,
+    .form_field input[type='number']:focus,
+    .form_field input[type='tel']:focus,
+    .form_field input[type='email']:focus,
+    .form_field input[type='password']:focus,
+    .form_field textarea:focus {
       opacity: 1; }
-  .form_field input[type="range"] {
+  .form_field input[type='range'] {
     -webkit-appearance: none;
     width: calc(100% - 1rem);
     height: 0.5rem;
@@ -949,17 +963,17 @@ a, a:link, a:visited {
     outline: none;
     padding: 0;
     margin: 0.5rem; }
-    .form_field input[type="range"]::-webkit-slider-thumb {
+    .form_field input[type='range']::-webkit-slider-thumb {
       appearance: none;
       width: 1rem;
       height: 1rem;
       border-radius: 50%;
       background: #888;
       cursor: pointer;
-      transition: background .15s ease; }
-      .form_field input[type="range"]::-webkit-slider-thumb:hover {
+      transition: background 0.15s ease; }
+      .form_field input[type='range']::-webkit-slider-thumb:hover {
         background: #222; }
-    .form_field input[type="range"]:active::-webkit-slider-thumb {
+    .form_field input[type='range']:active::-webkit-slider-thumb {
       background-color: #160DF6; }
   .form_field textarea {
     resize: none;
@@ -1016,11 +1030,20 @@ nav.range-nav {
     .list > li:last-child {
       margin-bottom: 0; }
 
-.text p, .text ul, .text ol, .text blockquote {
+.text p,
+.text ul,
+.text ol,
+.text blockquote {
   margin: 1rem 0; }
-  .text p:first-child, .text ul:first-child, .text ol:first-child, .text blockquote:first-child {
+  .text p:first-child,
+  .text ul:first-child,
+  .text ol:first-child,
+  .text blockquote:first-child {
     margin-top: 0; }
-  .text p:last-child, .text ul:last-child, .text ol:last-child, .text blockquote:last-child {
+  .text p:last-child,
+  .text ul:last-child,
+  .text ol:last-child,
+  .text blockquote:last-child {
     margin-bottom: 0; }
 
 .text.-centered {
@@ -1033,6 +1056,9 @@ nav.range-nav {
   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   font-size: 0.83333rem; }
 
+.text.-underline {
+  text-decoration: underline; }
+
 .text strong {
   font-weight: 500; }
 
diff --git a/packages/light-react/src/Send/Send.js b/packages/light-react/src/Send/Send.js
index 7cfc8345..b97e4471 100644
--- a/packages/light-react/src/Send/Send.js
+++ b/packages/light-react/src/Send/Send.js
@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import { Link, Route, Redirect, Switch } from 'react-router-dom';
+import { Route, Redirect, Switch } from 'react-router-dom';
 
 import Sent from './Sent';
 import Signer from './Signer';
@@ -19,33 +19,18 @@ class Send extends Component {
       sendStore: { token }
     } = this.props;
 
+    // We only show then Send components if we have already selected a token to
+    // send.
     if (!token) {
       return <Redirect to='/' />;
     }
 
     return (
-      <div>
-        <nav className='header-nav'>
-          <div className='header-nav_left'>
-            <Link to='/tokens' className='icon -close'>
-              Close
-            </Link>
-          </div>
-          <div className='header-nav_title'>
-            <h1>Send {token.name}</h1>
-          </div>
-          <div className='header-nav_right' />
-        </nav>
-        <div className='window_content'>
-          <div className='box -padded'>
-            <Switch>
-              <Route exact path='/send' component={TxForm} />
-              <Route path='/send/signer' component={Signer} />
-              <Route path='/send/sent' component={Sent} />
-            </Switch>
-          </div>
-        </div>
-      </div>
+      <Switch>
+        <Route exact path='/send' component={TxForm} />
+        <Route path='/send/signer' component={Signer} />
+        <Route path='/send/sent' component={Sent} />
+      </Switch>
     );
   }
 }
diff --git a/packages/light-react/src/Send/Sent/Sent.js b/packages/light-react/src/Send/Sent/Sent.js
index 0d75cec5..d3cc163f 100644
--- a/packages/light-react/src/Send/Sent/Sent.js
+++ b/packages/light-react/src/Send/Sent/Sent.js
@@ -7,10 +7,14 @@ import React, { Component } from 'react';
 import { chainName$ } from '@parity/light.js';
 import { inject, observer } from 'mobx-react';
 import light from 'light-hoc';
+import { Link } from 'react-router-dom';
 
 import check from '../../assets/img/icons/check.svg';
 import loading from '../../assets/img/icons/loading.svg';
 
+// Number of confirmations to consider a transaction successful
+const MIN_CONFIRMATIONS = 6;
+
 @light({
   chainName: chainName$
 })
@@ -18,15 +22,36 @@ import loading from '../../assets/img/icons/loading.svg';
 @observer
 class Sent extends Component {
   render () {
+    const {
+      sendStore: { confirmations, token }
+    } = this.props;
+
     return (
-      <div className='alert-screen'>
-        <div className='alert-screen_content'>
-          <div className='alert-screen_image'>
-            <img alt='loading' src={this.renderIcon()} />
+      <div>
+        <nav className='header-nav'>
+          <div className='header-nav_left'>
+            {confirmations >= MIN_CONFIRMATIONS && (
+              <Link to='/tokens' className='icon -close'>
+                Close
+              </Link>
+            )}
+          </div>
+          <div className='header-nav_title'>
+            <h1>Send {token.name}</h1>
           </div>
-          <div className='alert-screen_text'>
-            <h1>{this.renderTitle()}</h1>
-            <p>{this.renderDescription()}</p>
+          <div className='header-nav_right' />
+        </nav>
+        <div className='window_content'>
+          <div className='alert-screen'>
+            <div className='alert-screen_content'>
+              <div className='alert-screen_image'>
+                <img alt='loading' src={this.renderIcon()} />
+              </div>
+              <div className='alert-screen_text'>
+                <h1>{this.renderTitle()}</h1>
+                <p>{this.renderDescription()}</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -38,10 +63,16 @@ class Sent extends Component {
       sendStore: { confirmations, txStatus }
     } = this.props;
 
+    if (confirmations >= MIN_CONFIRMATIONS) {
+      return (
+        <Link to='/'>
+          <button className='button'>Go back</button>
+        </Link>
+      );
+    }
+
     if (confirmations > 0) {
-      return `It has been confirmed ${
-        confirmations === 1 ? 'once' : `${confirmations} times`
-      }`;
+      return `Waiting ${confirmations}/${MIN_CONFIRMATIONS} confirmations`;
     }
 
     if (txStatus.confirmed) {
@@ -59,7 +90,7 @@ class Sent extends Component {
     const {
       sendStore: { confirmations }
     } = this.props;
-    if (confirmations >= 6) {
+    if (confirmations >= MIN_CONFIRMATIONS) {
       return check;
     }
     return loading;
@@ -68,21 +99,23 @@ class Sent extends Component {
   renderTitle = () => {
     const {
       chainName,
-      sendStore: { txStatus }
+      sendStore: { confirmations, txStatus }
     } = this.props;
 
     if (txStatus.confirmed) {
       return (
         <span>
-          Your transaction is{' '}
+          {confirmations >= MIN_CONFIRMATIONS
+            ? 'Confirmed on the '
+            : 'Submitted to the '}
           <a
-            className='button -tiny'
+            className='text -underline'
             href={`https://${
               chainName === 'foundation' ? '' : `${chainName}.`
             }etherscan.io/tx/${txStatus.confirmed.transactionHash}`}
             target='_blank'
           >
-            on the blockchain
+            blockchain
           </a>
         </span>
       );
diff --git a/packages/light-react/src/Send/Signer/Signer.js b/packages/light-react/src/Send/Signer/Signer.js
index 06b0a90d..5cd491c5 100644
--- a/packages/light-react/src/Send/Signer/Signer.js
+++ b/packages/light-react/src/Send/Signer/Signer.js
@@ -5,6 +5,7 @@
 
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
 
 import TokenBalance from '../TokenBalance';
 
@@ -43,46 +44,66 @@ class Signer extends Component {
     const { password } = this.state;
 
     return (
-      <div className='box -card'>
-        <TokenBalance token={token} />
-        <div className='box -card-drawer'>
-          <div className='form_field'>
-            <label>Amount</label>
-            <div className='form_field_value'>
-              {token.amount} {token.symbol}
-            </div>
-          </div>
-          <div className='form_field'>
-            <label>To</label>
-            <div className='form_field_value'>{tx.to}</div>
+      <div>
+        <nav className='header-nav'>
+          <div className='header-nav_left'>
+            <Link to='/tokens' className='icon -close'>
+              Close
+            </Link>
           </div>
-        </div>
-        <form className='box -card-drawer' onSubmit={this.handleAccept}>
-          <div className='text'>
-            <p>Enter your password to confirm this transaction.</p>
+          <div className='header-nav_title'>
+            <h1>Send {token.name}</h1>
           </div>
-          <div className='form_field'>
-            <label>Password</label>
-            <input
-              onChange={this.handleChangePassword}
-              required
-              type='password'
-              value={password}
-            />
+          <div className='header-nav_right' />
+        </nav>
+        <div className='window_content'>
+          <div className='box -padded'>
+            <div className='box -card'>
+              <TokenBalance token={token} />
+              <div className='box -card-drawer'>
+                <div className='form_field'>
+                  <label>Amount</label>
+                  <div className='form_field_value'>
+                    {token.amount} {token.symbol}
+                  </div>
+                </div>
+                <div className='form_field'>
+                  <label>To</label>
+                  <div className='form_field_value'>{tx.to}</div>
+                </div>
+              </div>
+              <form className='box -card-drawer' onSubmit={this.handleAccept}>
+                <div className='text'>
+                  <p>Enter your password to confirm this transaction.</p>
+                </div>
+                <div className='form_field'>
+                  <label>Password</label>
+                  <input
+                    onChange={this.handleChangePassword}
+                    required
+                    type='password'
+                    value={password}
+                  />
+                </div>
+                <nav className='form-nav -binary'>
+                  <button
+                    className='button -cancel'
+                    onClick={this.handleReject}
+                    type='button'
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    className='button -submit'
+                    disabled={!txStatus.requested}
+                  >
+                    Confirm transaction
+                  </button>
+                </nav>
+              </form>
+            </div>
           </div>
-          <nav className='form-nav -binary'>
-            <button
-              className='button -cancel'
-              onClick={this.handleReject}
-              type='button'
-            >
-              Cancel
-            </button>
-            <button className='button -submit' disabled={!txStatus.requested}>
-              Confirm transaction
-            </button>
-          </nav>
-        </form>
+        </div>
       </div>
     );
   }
diff --git a/packages/light-react/src/Send/TxForm/TxForm.js b/packages/light-react/src/Send/TxForm/TxForm.js
index 58acd60b..c141e538 100644
--- a/packages/light-react/src/Send/TxForm/TxForm.js
+++ b/packages/light-react/src/Send/TxForm/TxForm.js
@@ -5,9 +5,10 @@
 
 import React, { Component } from 'react';
 import { defaultAccount$ } from '@parity/light.js';
-import { toWei } from '@parity/api/lib/util/wei';
-import light from 'light-hoc';
 import { inject, observer } from 'mobx-react';
+import light from 'light-hoc';
+import { Link } from 'react-router-dom';
+import { toWei } from '@parity/api/lib/util/wei';
 
 import TokenBalance from '../TokenBalance';
 
@@ -54,58 +55,75 @@ class Send extends Component {
     const { amount, gas, to } = this.state;
 
     return (
-      <div className='box -card'>
-        <TokenBalance token={token} />
-        <div className='box -card-drawer'>
-          <form className='send-form' onSubmit={this.handleSubmit}>
-            <fieldset className='form_fields'>
-              <div className='form_field'>
-                <label>Amount</label>
-                <input
-                  className='form_field_amount'
-                  onChange={this.handleChangeAmount}
-                  required
-                  type='number'
-                  value={amount}
-                />
-                <nav className='form-field_nav'>
-                  <button className='button -utility' type='button'>
-                    Max
-                  </button>
-                </nav>
-              </div>
-              <div className='form_field'>
-                <label>To</label>
-                <textarea
-                  className='-sm'
-                  onChange={this.handleChangeTo}
-                  required
-                  type='text'
-                  placeholder='Recipient address'
-                  value={to}
-                />
-              </div>
-              <div className='form_field -range'>
-                <label>Gas</label>
-                <input
-                  onChange={this.handleChangeGas}
-                  required
-                  min='1'
-                  max='44000'
-                  type='range'
-                  value={gas}
-                />
-                <nav className='range-nav'>
-                  <span className='range-nav_label'>Cheap</span>
-                  <span className='range-nav_value'>{gas}</span>
-                  <span className='range-nav_label'>Fast</span>
-                </nav>
+      <div>
+        <nav className='header-nav'>
+          <div className='header-nav_left'>
+            <Link to='/tokens' className='icon -close'>
+              Close
+            </Link>
+          </div>
+          <div className='header-nav_title'>
+            <h1>Send {token.name}</h1>
+          </div>
+          <div className='header-nav_right' />
+        </nav>
+        <div className='window_content'>
+          <div className='box -padded'>
+            <div className='box -card'>
+              <TokenBalance token={token} />
+              <div className='box -card-drawer'>
+                <form className='send-form' onSubmit={this.handleSubmit}>
+                  <fieldset className='form_fields'>
+                    <div className='form_field'>
+                      <label>Amount</label>
+                      <input
+                        className='form_field_amount'
+                        onChange={this.handleChangeAmount}
+                        required
+                        type='number'
+                        value={amount}
+                      />
+                      <nav className='form-field_nav'>
+                        <button className='button -utility' type='button'>
+                          Max
+                        </button>
+                      </nav>
+                    </div>
+                    <div className='form_field'>
+                      <label>To</label>
+                      <textarea
+                        className='-sm'
+                        onChange={this.handleChangeTo}
+                        required
+                        type='text'
+                        placeholder='Recipient address'
+                        value={to}
+                      />
+                    </div>
+                    <div className='form_field -range'>
+                      <label>Gas</label>
+                      <input
+                        onChange={this.handleChangeGas}
+                        required
+                        min='1'
+                        max='44000'
+                        type='range'
+                        value={gas}
+                      />
+                      <nav className='range-nav'>
+                        <span className='range-nav_label'>Cheap</span>
+                        <span className='range-nav_value'>{gas}</span>
+                        <span className='range-nav_label'>Fast</span>
+                      </nav>
+                    </div>
+                  </fieldset>
+                  <nav className='form-nav'>
+                    <button className='button'>Send</button>
+                  </nav>
+                </form>
               </div>
-            </fieldset>
-            <nav className='form-nav'>
-              <button className='button'>Send</button>
-            </nav>
-          </form>
+            </div>
+          </div>
         </div>
       </div>
     );
diff --git a/packages/light-react/src/assets/sass/shared/_basics.scss b/packages/light-react/src/assets/sass/shared/_basics.scss
index dac04efd..c8b0d1fc 100644
--- a/packages/light-react/src/assets/sass/shared/_basics.scss
+++ b/packages/light-react/src/assets/sass/shared/_basics.scss
@@ -5,8 +5,8 @@ html {
 
 body {
   user-select: none;
-  background-color: #A5BFDA;
-  background-image: linear-gradient(#A5BFDA, #BFCDDC);
+  background-color: #a5bfda;
+  background-image: linear-gradient(#a5bfda, #bfcddc);
   background-repeat: no-repeat;
   background-size: cover;
   color: $black;
@@ -21,7 +21,9 @@ body {
   display: none;
 }
 
-a, a:link, a:visited {
+a,
+a:link,
+a:visited {
   color: $black;
   text-decoration: none;
   &:hover {
diff --git a/packages/light-react/src/assets/sass/shared/_box.scss b/packages/light-react/src/assets/sass/shared/_box.scss
index 8b298563..df927c7d 100644
--- a/packages/light-react/src/assets/sass/shared/_box.scss
+++ b/packages/light-react/src/assets/sass/shared/_box.scss
@@ -9,17 +9,17 @@
     background-color: $eggshell;
     border: 0px solid $eggshell;
     overflow: hidden;
-    box-shadow: 0 0.125rem 0.5rem rgba($black,0.125);
+    box-shadow: 0 0.125rem 0.5rem rgba($black, 0.125);
     &.-clickable {
       transition: box-shadow ease 0.125s;
       &:hover {
         border-color: $blue;
-        box-shadow: 0 0.125rem 0.675rem rgba($black,0.175);
+        box-shadow: 0 0.125rem 0.675rem rgba($black, 0.175);
         cursor: default;
       }
       &:active {
         border-color: $blue;
-        box-shadow: 0 0.125rem 0.325rem rgba($black,0.175);
+        box-shadow: 0 0.125rem 0.325rem rgba($black, 0.175);
         cursor: default;
       }
     }
@@ -28,9 +28,9 @@
   &.-card-drawer {
     margin: 1rem -2rem -2rem;
     padding: 1rem 2rem 2rem;
-    border-top: 1px solid lighten($faint,1.25%);
-    box-shadow: 0 0.125rem 0.325rem rgba($black,0.075) inset;
-    background-color: darken($eggshell,0.75%);
+    border-top: 1px solid lighten($faint, 1.25%);
+    box-shadow: 0 0.125rem 0.325rem rgba($black, 0.075) inset;
+    background-color: darken($eggshell, 0.75%);
   }
 
   &.-scroller {
diff --git a/packages/light-react/src/assets/sass/shared/_button.scss b/packages/light-react/src/assets/sass/shared/_button.scss
index d42aa665..db41ba9d 100644
--- a/packages/light-react/src/assets/sass/shared/_button.scss
+++ b/packages/light-react/src/assets/sass/shared/_button.scss
@@ -15,7 +15,7 @@
   }
 
   &:active {
-    background-color: darken($blue,2.5%);
+    background-color: darken($blue, 2.5%);
     color: $white;
   }
 
@@ -58,7 +58,7 @@
     font-size: ms(-3);
     border-width: 0;
     background-color: $faint;
-    color: rgba($black,0.75);
+    color: rgba($black, 0.75);
     padding: 0.175rem 0.325rem 0.125rem;
     opacity: 0.8;
     border-radius: 1rem;
@@ -68,7 +68,7 @@
     }
 
     &:active {
-      opacity: 1.0;
+      opacity: 1;
     }
 
     &.-good {
@@ -86,7 +86,7 @@
     font-size: ms(-2);
     border-width: 0;
     background-color: $faint;
-    color: rgba($black,0.75);
+    color: rgba($black, 0.75);
     padding: 0.25rem 0.75rem;
     opacity: 0.8;
     border-radius: 1rem;
@@ -96,7 +96,7 @@
     }
 
     &:active {
-      opacity: 1.0;
+      opacity: 1;
     }
   }
 
diff --git a/packages/light-react/src/assets/sass/shared/_form.scss b/packages/light-react/src/assets/sass/shared/_form.scss
index e28c6b2a..5980bbd9 100644
--- a/packages/light-react/src/assets/sass/shared/_form.scss
+++ b/packages/light-react/src/assets/sass/shared/_form.scss
@@ -1,7 +1,7 @@
 .form_field {
   margin: 0.5rem 0;
   border-radius: 0.25rem;
-  background: rgba($faint,0.25);
+  background: rgba($faint, 0.25);
   position: relative;
 
   label {
@@ -10,7 +10,7 @@
     color: $black;
     opacity: 0.75;
     padding: 0.5rem 0.5rem 0;
-    display: block
+    display: block;
   }
 
   .form_field_value {
@@ -25,14 +25,19 @@
     word-wrap: break-word;
   }
 
-  input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], textarea {
+  input[type='text'],
+  input[type='number'],
+  input[type='tel'],
+  input[type='email'],
+  input[type='password'],
+  textarea {
     border: 0;
     background: transparent;
     font-size: ms(0);
     font-weight: 400;
     font-family: $mono;
     line-height: ms(0) * 1.3;
-    width: calc(100% - 1rem;);
+    width: calc(100% - 1rem);
     opacity: 0.75;
     padding: 0.5rem;
     margin-top: -0.25rem;
@@ -41,12 +46,12 @@
     }
   }
 
-  input[type="range"] {
+  input[type='range'] {
     -webkit-appearance: none;
     width: calc(100% - 1rem);
     height: 0.5rem;
     border-radius: 0.5rem;
-    background: rgba($faint,0.5);
+    background: rgba($faint, 0.5);
     outline: none;
     padding: 0;
     margin: 0.5rem;
@@ -58,7 +63,7 @@
       border-radius: 50%;
       background: $grey;
       cursor: pointer;
-      transition: background .15s ease;
+      transition: background 0.15s ease;
 
       &:hover {
         background: $black;
@@ -96,7 +101,8 @@ input.form_field_amount[type='number'] {
   text-align: center;
   -webkit-appearance: none;
 
-  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
     opacity: 1;
     -webkit-appearance: none;
   }
@@ -133,6 +139,6 @@ nav.range-nav {
     display: block;
     width: 8rem;
     text-align: center;
-    color: $black
+    color: $black;
   }
 }
diff --git a/packages/light-react/src/assets/sass/shared/_text.scss b/packages/light-react/src/assets/sass/shared/_text.scss
index a39b6915..6c0e49d2 100644
--- a/packages/light-react/src/assets/sass/shared/_text.scss
+++ b/packages/light-react/src/assets/sass/shared/_text.scss
@@ -1,5 +1,8 @@
 .text {
-  p, ul, ol, blockquote {
+  p,
+  ul,
+  ol,
+  blockquote {
     margin: 1rem 0;
     &:first-child {
       margin-top: 0;
@@ -22,6 +25,10 @@
     font-size: ms(-1);
   }
 
+  &.-underline {
+    text-decoration: underline;
+  }
+
   strong {
     font-weight: 500;
   }
@@ -30,7 +37,7 @@
     user-select: text;
     font-family: $mono;
     padding: 0.5rem;
-    background: rgba($faint,0.25);
+    background: rgba($faint, 0.25);
     color: $black;
     margin: 0.5rem 0;
     font-size: ms(-1);
-- 
GitLab


From 71938c96f1a1b3812a561a12219022e312314413 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 11 Jun 2018 16:16:43 +0200
Subject: [PATCH 05/10] Remove css files

---
 packages/light-react/src/App/App.css | 1425 --------------------------
 1 file changed, 1425 deletions(-)
 delete mode 100644 packages/light-react/src/App/App.css

diff --git a/packages/light-react/src/App/App.css b/packages/light-react/src/App/App.css
deleted file mode 100644
index f8bb5a6e..00000000
--- a/packages/light-react/src/App/App.css
+++ /dev/null
@@ -1,1425 +0,0 @@
-/* Copyright 2015-2018 Parity Technologies (UK) Ltd. */
-/* This file is part of Parity. */
-/* SPDX-License-Identifier: MIT */
-.container-fluid,
-.container {
-  margin-right: auto;
-  margin-left: auto; }
-
-.container-fluid {
-  padding-right: 2rem;
-  padding-left: 2rem; }
-
-.row {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -19px;
-  margin-left: -19px; }
-
-.row.reverse {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse; }
-
-.col.reverse {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse; }
-
-.col-xs,
-.col-xs-1,
-.col-xs-2,
-.col-xs-3,
-.col-xs-4,
-.col-xs-5,
-.col-xs-6,
-.col-xs-7,
-.col-xs-8,
-.col-xs-9,
-.col-xs-10,
-.col-xs-11,
-.col-xs-12,
-.col-xs-offset-0,
-.col-xs-offset-1,
-.col-xs-offset-2,
-.col-xs-offset-3,
-.col-xs-offset-4,
-.col-xs-offset-5,
-.col-xs-offset-6,
-.col-xs-offset-7,
-.col-xs-offset-8,
-.col-xs-offset-9,
-.col-xs-offset-10,
-.col-xs-offset-11,
-.col-xs-offset-12 {
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 19px;
-  padding-left: 19px; }
-
-.col-xs {
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -ms-flex-preferred-size: 0;
-  flex-basis: 0;
-  max-width: 100%; }
-
-.col-xs-1 {
-  -ms-flex-preferred-size: 8.33333333%;
-  flex-basis: 8.33333333%;
-  max-width: 8.33333333%; }
-
-.col-xs-2 {
-  -ms-flex-preferred-size: 16.66666667%;
-  flex-basis: 16.66666667%;
-  max-width: 16.66666667%; }
-
-.col-xs-3 {
-  -ms-flex-preferred-size: 25%;
-  flex-basis: 25%;
-  max-width: 25%; }
-
-.col-xs-4 {
-  -ms-flex-preferred-size: 33.33333333%;
-  flex-basis: 33.33333333%;
-  max-width: 33.33333333%; }
-
-.col-xs-5 {
-  -ms-flex-preferred-size: 41.66666667%;
-  flex-basis: 41.66666667%;
-  max-width: 41.66666667%; }
-
-.col-xs-6 {
-  -ms-flex-preferred-size: 50%;
-  flex-basis: 50%;
-  max-width: 50%; }
-
-.col-xs-7 {
-  -ms-flex-preferred-size: 58.33333333%;
-  flex-basis: 58.33333333%;
-  max-width: 58.33333333%; }
-
-.col-xs-8 {
-  -ms-flex-preferred-size: 66.66666667%;
-  flex-basis: 66.66666667%;
-  max-width: 66.66666667%; }
-
-.col-xs-9 {
-  -ms-flex-preferred-size: 75%;
-  flex-basis: 75%;
-  max-width: 75%; }
-
-.col-xs-10 {
-  -ms-flex-preferred-size: 83.33333333%;
-  flex-basis: 83.33333333%;
-  max-width: 83.33333333%; }
-
-.col-xs-11 {
-  -ms-flex-preferred-size: 91.66666667%;
-  flex-basis: 91.66666667%;
-  max-width: 91.66666667%; }
-
-.col-xs-12 {
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-  max-width: 100%; }
-
-.col-xs-offset-0 {
-  margin-left: 0; }
-
-.col-xs-offset-1 {
-  margin-left: 8.33333333%; }
-
-.col-xs-offset-2 {
-  margin-left: 16.66666667%; }
-
-.col-xs-offset-3 {
-  margin-left: 25%; }
-
-.col-xs-offset-4 {
-  margin-left: 33.33333333%; }
-
-.col-xs-offset-5 {
-  margin-left: 41.66666667%; }
-
-.col-xs-offset-6 {
-  margin-left: 50%; }
-
-.col-xs-offset-7 {
-  margin-left: 58.33333333%; }
-
-.col-xs-offset-8 {
-  margin-left: 66.66666667%; }
-
-.col-xs-offset-9 {
-  margin-left: 75%; }
-
-.col-xs-offset-10 {
-  margin-left: 83.33333333%; }
-
-.col-xs-offset-11 {
-  margin-left: 91.66666667%; }
-
-.start-xs {
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  text-align: start; }
-
-.center-xs {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  text-align: center; }
-
-.end-xs {
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  text-align: end; }
-
-.top-xs {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start; }
-
-.middle-xs {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center; }
-
-.bottom-xs {
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  align-items: flex-end; }
-
-.around-xs {
-  -ms-flex-pack: distribute;
-  justify-content: space-around; }
-
-.between-xs {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between; }
-
-.first-xs {
-  -webkit-box-ordinal-group: 0;
-  -ms-flex-order: -1;
-  order: -1; }
-
-.last-xs {
-  -webkit-box-ordinal-group: 2;
-  -ms-flex-order: 1;
-  order: 1; }
-
-@media only screen and (min-width: 768px) {
-  .container {
-    width: 806px; }
-  .col-sm,
-  .col-sm-1,
-  .col-sm-2,
-  .col-sm-3,
-  .col-sm-4,
-  .col-sm-5,
-  .col-sm-6,
-  .col-sm-7,
-  .col-sm-8,
-  .col-sm-9,
-  .col-sm-10,
-  .col-sm-11,
-  .col-sm-12,
-  .col-sm-offset-0,
-  .col-sm-offset-1,
-  .col-sm-offset-2,
-  .col-sm-offset-3,
-  .col-sm-offset-4,
-  .col-sm-offset-5,
-  .col-sm-offset-6,
-  .col-sm-offset-7,
-  .col-sm-offset-8,
-  .col-sm-offset-9,
-  .col-sm-offset-10,
-  .col-sm-offset-11,
-  .col-sm-offset-12 {
-    box-sizing: border-box;
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    padding-right: 19px;
-    padding-left: 19px; }
-  .col-sm {
-    -webkit-box-flex: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    max-width: 100%; }
-  .col-sm-1 {
-    -ms-flex-preferred-size: 8.33333333%;
-    flex-basis: 8.33333333%;
-    max-width: 8.33333333%; }
-  .col-sm-2 {
-    -ms-flex-preferred-size: 16.66666667%;
-    flex-basis: 16.66666667%;
-    max-width: 16.66666667%; }
-  .col-sm-3 {
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%; }
-  .col-sm-4 {
-    -ms-flex-preferred-size: 33.33333333%;
-    flex-basis: 33.33333333%;
-    max-width: 33.33333333%; }
-  .col-sm-5 {
-    -ms-flex-preferred-size: 41.66666667%;
-    flex-basis: 41.66666667%;
-    max-width: 41.66666667%; }
-  .col-sm-6 {
-    -ms-flex-preferred-size: 50%;
-    flex-basis: 50%;
-    max-width: 50%; }
-  .col-sm-7 {
-    -ms-flex-preferred-size: 58.33333333%;
-    flex-basis: 58.33333333%;
-    max-width: 58.33333333%; }
-  .col-sm-8 {
-    -ms-flex-preferred-size: 66.66666667%;
-    flex-basis: 66.66666667%;
-    max-width: 66.66666667%; }
-  .col-sm-9 {
-    -ms-flex-preferred-size: 75%;
-    flex-basis: 75%;
-    max-width: 75%; }
-  .col-sm-10 {
-    -ms-flex-preferred-size: 83.33333333%;
-    flex-basis: 83.33333333%;
-    max-width: 83.33333333%; }
-  .col-sm-11 {
-    -ms-flex-preferred-size: 91.66666667%;
-    flex-basis: 91.66666667%;
-    max-width: 91.66666667%; }
-  .col-sm-12 {
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%; }
-  .col-sm-offset-0 {
-    margin-left: 0; }
-  .col-sm-offset-1 {
-    margin-left: 8.33333333%; }
-  .col-sm-offset-2 {
-    margin-left: 16.66666667%; }
-  .col-sm-offset-3 {
-    margin-left: 25%; }
-  .col-sm-offset-4 {
-    margin-left: 33.33333333%; }
-  .col-sm-offset-5 {
-    margin-left: 41.66666667%; }
-  .col-sm-offset-6 {
-    margin-left: 50%; }
-  .col-sm-offset-7 {
-    margin-left: 58.33333333%; }
-  .col-sm-offset-8 {
-    margin-left: 66.66666667%; }
-  .col-sm-offset-9 {
-    margin-left: 75%; }
-  .col-sm-offset-10 {
-    margin-left: 83.33333333%; }
-  .col-sm-offset-11 {
-    margin-left: 91.66666667%; }
-  .start-sm {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    text-align: start; }
-  .center-sm {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    text-align: center; }
-  .end-sm {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-    text-align: end; }
-  .top-sm {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start; }
-  .middle-sm {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center; }
-  .bottom-sm {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-    align-items: flex-end; }
-  .around-sm {
-    -ms-flex-pack: distribute;
-    justify-content: space-around; }
-  .between-sm {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between; }
-  .first-sm {
-    -webkit-box-ordinal-group: 0;
-    -ms-flex-order: -1;
-    order: -1; }
-  .last-sm {
-    -webkit-box-ordinal-group: 2;
-    -ms-flex-order: 1;
-    order: 1; } }
-
-@media only screen and (min-width: 960px) {
-  .container {
-    width: 998px; }
-  .col-md,
-  .col-md-1,
-  .col-md-2,
-  .col-md-3,
-  .col-md-4,
-  .col-md-5,
-  .col-md-6,
-  .col-md-7,
-  .col-md-8,
-  .col-md-9,
-  .col-md-10,
-  .col-md-11,
-  .col-md-12,
-  .col-md-offset-0,
-  .col-md-offset-1,
-  .col-md-offset-2,
-  .col-md-offset-3,
-  .col-md-offset-4,
-  .col-md-offset-5,
-  .col-md-offset-6,
-  .col-md-offset-7,
-  .col-md-offset-8,
-  .col-md-offset-9,
-  .col-md-offset-10,
-  .col-md-offset-11,
-  .col-md-offset-12 {
-    box-sizing: border-box;
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    padding-right: 19px;
-    padding-left: 19px; }
-  .col-md {
-    -webkit-box-flex: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    max-width: 100%; }
-  .col-md-1 {
-    -ms-flex-preferred-size: 8.33333333%;
-    flex-basis: 8.33333333%;
-    max-width: 8.33333333%; }
-  .col-md-2 {
-    -ms-flex-preferred-size: 16.66666667%;
-    flex-basis: 16.66666667%;
-    max-width: 16.66666667%; }
-  .col-md-3 {
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%; }
-  .col-md-4 {
-    -ms-flex-preferred-size: 33.33333333%;
-    flex-basis: 33.33333333%;
-    max-width: 33.33333333%; }
-  .col-md-5 {
-    -ms-flex-preferred-size: 41.66666667%;
-    flex-basis: 41.66666667%;
-    max-width: 41.66666667%; }
-  .col-md-6 {
-    -ms-flex-preferred-size: 50%;
-    flex-basis: 50%;
-    max-width: 50%; }
-  .col-md-7 {
-    -ms-flex-preferred-size: 58.33333333%;
-    flex-basis: 58.33333333%;
-    max-width: 58.33333333%; }
-  .col-md-8 {
-    -ms-flex-preferred-size: 66.66666667%;
-    flex-basis: 66.66666667%;
-    max-width: 66.66666667%; }
-  .col-md-9 {
-    -ms-flex-preferred-size: 75%;
-    flex-basis: 75%;
-    max-width: 75%; }
-  .col-md-10 {
-    -ms-flex-preferred-size: 83.33333333%;
-    flex-basis: 83.33333333%;
-    max-width: 83.33333333%; }
-  .col-md-11 {
-    -ms-flex-preferred-size: 91.66666667%;
-    flex-basis: 91.66666667%;
-    max-width: 91.66666667%; }
-  .col-md-12 {
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%; }
-  .col-md-offset-0 {
-    margin-left: 0; }
-  .col-md-offset-1 {
-    margin-left: 8.33333333%; }
-  .col-md-offset-2 {
-    margin-left: 16.66666667%; }
-  .col-md-offset-3 {
-    margin-left: 25%; }
-  .col-md-offset-4 {
-    margin-left: 33.33333333%; }
-  .col-md-offset-5 {
-    margin-left: 41.66666667%; }
-  .col-md-offset-6 {
-    margin-left: 50%; }
-  .col-md-offset-7 {
-    margin-left: 58.33333333%; }
-  .col-md-offset-8 {
-    margin-left: 66.66666667%; }
-  .col-md-offset-9 {
-    margin-left: 75%; }
-  .col-md-offset-10 {
-    margin-left: 83.33333333%; }
-  .col-md-offset-11 {
-    margin-left: 91.66666667%; }
-  .start-md {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    text-align: start; }
-  .center-md {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    text-align: center; }
-  .end-md {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-    text-align: end; }
-  .top-md {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start; }
-  .middle-md {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center; }
-  .bottom-md {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-    align-items: flex-end; }
-  .around-md {
-    -ms-flex-pack: distribute;
-    justify-content: space-around; }
-  .between-md {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between; }
-  .first-md {
-    -webkit-box-ordinal-group: 0;
-    -ms-flex-order: -1;
-    order: -1; }
-  .last-md {
-    -webkit-box-ordinal-group: 2;
-    -ms-flex-order: 1;
-    order: 1; } }
-
-@media only screen and (min-width: 1280px) {
-  .container {
-    width: 1318px; }
-  .col-lg,
-  .col-lg-1,
-  .col-lg-2,
-  .col-lg-3,
-  .col-lg-4,
-  .col-lg-5,
-  .col-lg-6,
-  .col-lg-7,
-  .col-lg-8,
-  .col-lg-9,
-  .col-lg-10,
-  .col-lg-11,
-  .col-lg-12,
-  .col-lg-offset-0,
-  .col-lg-offset-1,
-  .col-lg-offset-2,
-  .col-lg-offset-3,
-  .col-lg-offset-4,
-  .col-lg-offset-5,
-  .col-lg-offset-6,
-  .col-lg-offset-7,
-  .col-lg-offset-8,
-  .col-lg-offset-9,
-  .col-lg-offset-10,
-  .col-lg-offset-11,
-  .col-lg-offset-12 {
-    box-sizing: border-box;
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    padding-right: 19px;
-    padding-left: 19px; }
-  .col-lg {
-    -webkit-box-flex: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    max-width: 100%; }
-  .col-lg-1 {
-    -ms-flex-preferred-size: 8.33333333%;
-    flex-basis: 8.33333333%;
-    max-width: 8.33333333%; }
-  .col-lg-2 {
-    -ms-flex-preferred-size: 16.66666667%;
-    flex-basis: 16.66666667%;
-    max-width: 16.66666667%; }
-  .col-lg-3 {
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%; }
-  .col-lg-4 {
-    -ms-flex-preferred-size: 33.33333333%;
-    flex-basis: 33.33333333%;
-    max-width: 33.33333333%; }
-  .col-lg-5 {
-    -ms-flex-preferred-size: 41.66666667%;
-    flex-basis: 41.66666667%;
-    max-width: 41.66666667%; }
-  .col-lg-6 {
-    -ms-flex-preferred-size: 50%;
-    flex-basis: 50%;
-    max-width: 50%; }
-  .col-lg-7 {
-    -ms-flex-preferred-size: 58.33333333%;
-    flex-basis: 58.33333333%;
-    max-width: 58.33333333%; }
-  .col-lg-8 {
-    -ms-flex-preferred-size: 66.66666667%;
-    flex-basis: 66.66666667%;
-    max-width: 66.66666667%; }
-  .col-lg-9 {
-    -ms-flex-preferred-size: 75%;
-    flex-basis: 75%;
-    max-width: 75%; }
-  .col-lg-10 {
-    -ms-flex-preferred-size: 83.33333333%;
-    flex-basis: 83.33333333%;
-    max-width: 83.33333333%; }
-  .col-lg-11 {
-    -ms-flex-preferred-size: 91.66666667%;
-    flex-basis: 91.66666667%;
-    max-width: 91.66666667%; }
-  .col-lg-12 {
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%; }
-  .col-lg-offset-0 {
-    margin-left: 0; }
-  .col-lg-offset-1 {
-    margin-left: 8.33333333%; }
-  .col-lg-offset-2 {
-    margin-left: 16.66666667%; }
-  .col-lg-offset-3 {
-    margin-left: 25%; }
-  .col-lg-offset-4 {
-    margin-left: 33.33333333%; }
-  .col-lg-offset-5 {
-    margin-left: 41.66666667%; }
-  .col-lg-offset-6 {
-    margin-left: 50%; }
-  .col-lg-offset-7 {
-    margin-left: 58.33333333%; }
-  .col-lg-offset-8 {
-    margin-left: 66.66666667%; }
-  .col-lg-offset-9 {
-    margin-left: 75%; }
-  .col-lg-offset-10 {
-    margin-left: 83.33333333%; }
-  .col-lg-offset-11 {
-    margin-left: 91.66666667%; }
-  .start-lg {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    text-align: start; }
-  .center-lg {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    text-align: center; }
-  .end-lg {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-    text-align: end; }
-  .top-lg {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start; }
-  .middle-lg {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center; }
-  .bottom-lg {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-    align-items: flex-end; }
-  .around-lg {
-    -ms-flex-pack: distribute;
-    justify-content: space-around; }
-  .between-lg {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between; }
-  .first-lg {
-    -webkit-box-ordinal-group: 0;
-    -ms-flex-order: -1;
-    order: -1; }
-  .last-lg {
-    -webkit-box-ordinal-group: 2;
-    -ms-flex-order: 1;
-    order: 1; } }
-
-@viewport {
-  zoom: 1.0;
-  width: extend-to-zoom; }
-
-@-ms-viewport {
-  width: extend-to-zoom;
-  zoom: 1.0; }
-
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
-  margin: 0;
-  padding: 0;
-  font-size: 100%;
-  vertical-align: baseline;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  font-feature-settings: "kern", "liga", "pnum";
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  text-size-adjust: 100%; }
-
-blockquote, q {
-  quotes: none; }
-
-input:focus, select:focus, button:focus {
-  outline: 0; }
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0; }
-
-ul, ol {
-  list-style: none; }
-
-* {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box; }
-
-html {
-  font-size: 16px;
-  height: 100%; }
-
-body {
-  user-select: none;
-  background-color: #a5bfda;
-  background-image: linear-gradient(#a5bfda, #bfcddc);
-  background-repeat: no-repeat;
-  background-size: cover;
-  color: #222;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.3rem;
-  min-height: 100%; }
-
-.hidden {
-  display: none; }
-
-a,
-a:link,
-a:visited {
-  color: #222;
-  text-decoration: none; }
-  a:hover,
-  a:link:hover,
-  a:visited:hover {
-    cursor: default; }
-
-.box {
-  display: block;
-  position: relative; }
-  .box.-card {
-    z-index: 1;
-    padding: 1rem;
-    border-radius: 0.25rem;
-    background-color: #fff;
-    border: 0px solid #fff;
-    overflow: hidden;
-    box-shadow: 0 0.125rem 0.5rem rgba(34, 34, 34, 0.125); }
-    .box.-card.-clickable {
-      transition: box-shadow ease 0.125s; }
-      .box.-card.-clickable:hover {
-        border-color: #160DF6;
-        box-shadow: 0 0.125rem 0.675rem rgba(34, 34, 34, 0.175);
-        cursor: default; }
-      .box.-card.-clickable:active {
-        border-color: #160DF6;
-        box-shadow: 0 0.125rem 0.325rem rgba(34, 34, 34, 0.175);
-        cursor: default; }
-  .box.-card-drawer {
-    margin: 1rem -2rem -2rem;
-    padding: 1rem 2rem 2rem;
-    border-top: 1px solid #e0e0e0;
-    box-shadow: 0 0.125rem 0.325rem rgba(34, 34, 34, 0.075) inset;
-    background-color: #fdfdfd; }
-  .box.-scroller {
-    max-height: 22rem;
-    overflow-x: hidden;
-    overflow-y: auto; }
-  .box.-padded {
-    padding: 0.5rem; }
-  .box.-apart {
-    margin-top: 1rem;
-    margin-bottom: 1rem; }
-    .box.-apart:first-child {
-      margin-top: 0; }
-    .box.-apart:last-child {
-      margin-bottom: 0; }
-  .box.-pull-up {
-    margin-top: -1rem;
-    margin-bottom: 1rem; }
-  .box.-stacked {
-    margin-bottom: 0.5rem; }
-    .box.-stacked:last-child {
-      margin-bottom: 0; }
-
-.button {
-  color: #160DF6;
-  background-color: transparent;
-  border-radius: 1rem;
-  border: 2px solid #160DF6;
-  font-size: 0.69444rem;
-  font-weight: 600;
-  line-height: 1.3;
-  padding: 0.325rem 0.675rem;
-  text-transform: uppercase; }
-  .button:hover {
-    background-color: #160DF6;
-    color: #f9f9f9; }
-  .button:active {
-    background-color: #1209ed;
-    color: #f9f9f9; }
-  .button:disabled {
-    opacity: 0.5;
-    border-color: #ddd;
-    background-color: #ddd;
-    color: #888; }
-  .button.-tiny {
-    font-size: 0.69444rem;
-    text-transform: none;
-    border: 0;
-    border-radius: 2px;
-    color: #222;
-    background-size: auto 0.675rem;
-    background-position: left center;
-    background-repeat: no-repeat;
-    background-color: transparent;
-    padding: 0 0 0 0.925rem;
-    opacity: 0.425; }
-    .button.-tiny:hover {
-      opacity: 0.625;
-      background-color: transparent; }
-    .button.-tiny:active {
-      opacity: 0.75;
-      background-color: transparent; }
-    .button.-tiny.-reload {
-      background-image: url("../assets/img/icons/reload.svg"); }
-  .button.-utility {
-    font-size: 0.5787rem;
-    border-width: 0;
-    background-color: #ddd;
-    color: rgba(34, 34, 34, 0.75);
-    padding: 0.175rem 0.325rem 0.125rem;
-    opacity: 0.8;
-    border-radius: 1rem; }
-    .button.-utility:hover {
-      opacity: 0.9; }
-    .button.-utility:active {
-      opacity: 1; }
-    .button.-utility.-good {
-      background-color: #3ec28f;
-      color: #f9f9f9; }
-    .button.-utility.-bad {
-      background-color: #C2473E;
-      color: #f9f9f9; }
-  .button.-cancel {
-    font-size: 0.69444rem;
-    border-width: 0;
-    background-color: #ddd;
-    color: rgba(34, 34, 34, 0.75);
-    padding: 0.25rem 0.75rem;
-    opacity: 0.8;
-    border-radius: 1rem; }
-    .button.-cancel:hover {
-      opacity: 0.9; }
-    .button.-cancel:active {
-      opacity: 1; }
-  .button.-icon {
-    text-indent: -9999rem;
-    background-size: 0.83333rem auto;
-    background-position: center center;
-    background-repeat: no-repeat;
-    border-radius: 0;
-    border: 0;
-    opacity: 0.25; }
-    .button.-icon:hover {
-      background-color: transparent;
-      opacity: 0.5; }
-    .button.-icon:active {
-      background-color: transparent;
-      opacity: 1; }
-    .button.-icon.-clear {
-      background-image: url("../assets/img/icons/close.svg"); }
-    .button.-icon:disabled {
-      opacity: 0; }
-
-.form_field {
-  margin: 0.5rem 0;
-  border-radius: 0.25rem;
-  background: rgba(221, 221, 221, 0.25);
-  position: relative; }
-  .form_field label {
-    font-size: 0.69444rem;
-    font-weight: 600;
-    color: #222;
-    opacity: 0.75;
-    padding: 0.5rem 0.5rem 0;
-    display: block; }
-  .form_field .form_field_value {
-    font-size: 0.83333rem;
-    font-weight: 400;
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    line-height: 1.3rem;
-    opacity: 0.75;
-    margin: 0.25rem 0.5rem 0;
-    padding-bottom: 0.5rem;
-    overflow: hidden;
-    word-wrap: break-word; }
-  .form_field input[type='text'],
-  .form_field input[type='number'],
-  .form_field input[type='tel'],
-  .form_field input[type='email'],
-  .form_field input[type='password'],
-  .form_field textarea {
-    border: 0;
-    background: transparent;
-    font-size: 1rem;
-    font-weight: 400;
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    line-height: 1.3rem;
-    width: calc(100% - 1rem);
-    opacity: 0.75;
-    padding: 0.5rem;
-    margin-top: -0.25rem; }
-    .form_field input[type='text']:focus,
-    .form_field input[type='number']:focus,
-    .form_field input[type='tel']:focus,
-    .form_field input[type='email']:focus,
-    .form_field input[type='password']:focus,
-    .form_field textarea:focus {
-      opacity: 1; }
-  .form_field input[type='range'] {
-    -webkit-appearance: none;
-    width: calc(100% - 1rem);
-    height: 0.5rem;
-    border-radius: 0.5rem;
-    background: rgba(221, 221, 221, 0.5);
-    outline: none;
-    padding: 0;
-    margin: 0.5rem; }
-    .form_field input[type='range']::-webkit-slider-thumb {
-      appearance: none;
-      width: 1rem;
-      height: 1rem;
-      border-radius: 50%;
-      background: #888;
-      cursor: pointer;
-      transition: background 0.15s ease; }
-      .form_field input[type='range']::-webkit-slider-thumb:hover {
-        background: #222; }
-    .form_field input[type='range']:active::-webkit-slider-thumb {
-      background-color: #160DF6; }
-  .form_field textarea {
-    resize: none;
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    font-size: 0.83333rem; }
-    .form_field textarea.-sm {
-      height: 3.5rem; }
-    .form_field textarea.-md {
-      height: 4.75rem; }
-    .form_field textarea.-lg {
-      height: 8rem; }
-
-input.form_field_amount[type='number'] {
-  font-size: 2.98598rem;
-  line-height: 3.28458rem;
-  font-weight: 200;
-  text-align: center;
-  -webkit-appearance: none; }
-  input.form_field_amount[type='number']::-webkit-inner-spin-button, input.form_field_amount[type='number']::-webkit-outer-spin-button {
-    opacity: 1;
-    -webkit-appearance: none; }
-
-nav.form-field_nav {
-  padding: 0 0.5rem 0.5rem;
-  display: flex;
-  justify-content: flex-end; }
-  nav.form-field_nav button {
-    margin-left: 0.5rem; }
-
-nav.range-nav {
-  width: 100%;
-  padding: 0 0.5rem 0.5rem;
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.69444rem;
-  font-weight: 600;
-  text-transform: uppercase; }
-  nav.range-nav .range-nav_label {
-    width: 4rem;
-    color: #888;
-    font-size: 0.5787rem; }
-    nav.range-nav .range-nav_label:last-child {
-      text-align: right; }
-  nav.range-nav .range-nav_value {
-    display: block;
-    width: 8rem;
-    text-align: center;
-    color: #222; }
-
-.list {
-  padding: 0.5rem; }
-  .list > li {
-    margin-bottom: 0.5rem; }
-    .list > li:last-child {
-      margin-bottom: 0; }
-
-.text p,
-.text ul,
-.text ol,
-.text blockquote {
-  margin: 1rem 0; }
-  .text p:first-child,
-  .text ul:first-child,
-  .text ol:first-child,
-  .text blockquote:first-child {
-    margin-top: 0; }
-  .text p:last-child,
-  .text ul:last-child,
-  .text ol:last-child,
-  .text blockquote:last-child {
-    margin-bottom: 0; }
-
-.text.-centered {
-  text-align: center; }
-
-.text.-right {
-  text-align: right; }
-
-.text.-fixed {
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  font-size: 0.83333rem; }
-
-.text.-underline {
-  text-decoration: underline; }
-
-.text strong {
-  font-weight: 500; }
-
-.text.-code {
-  user-select: text;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0.5rem;
-  background: rgba(221, 221, 221, 0.25);
-  color: #222;
-  margin: 0.5rem 0;
-  font-size: 0.83333rem;
-  border-radius: 0.25rem;
-  word-wrap: break-word; }
-
-.span.-placeholder {
-  color: #ddd; }
-
-.wrapper {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  overflow: hidden; }
-  .wrapper .content {
-    overflow: visible;
-    max-width: 22rem;
-    margin: 0 auto; }
-    .wrapper .content .connector {
-      height: 0.5rem;
-      display: flex;
-      justify-content: center;
-      margin-bottom: -1px; }
-      .wrapper .content .connector svg {
-        height: 0.5rem;
-        width: auto; }
-        .wrapper .content .connector svg polygon {
-          fill: #F5F6F6; }
-    .wrapper .content .window {
-      background: #F5F6F6;
-      border-radius: 0.25rem;
-      overflow: hidden;
-      box-shadow: 0 0.125rem 0.75rem rgba(34, 34, 34, 0.175), 0 0.125rem 0.125rem rgba(34, 34, 34, 0.1); }
-      .wrapper .content .window .window_content {
-        min-height: 7.5rem; }
-
-.logo {
-  padding: 1.5rem 0; }
-  .logo figure {
-    display: block;
-    margin: 0 auto;
-    background-color: #222;
-    background-image: url("https://www.parity.io/i/logo-small.png");
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: 3rem auto;
-    border-radius: 100%;
-    width: 6rem;
-    height: 6rem;
-    display: flex;
-    flex-direction: column;
-    text-indent: -9999px;
-    overflow: hidden; }
-
-.token {
-  display: flex;
-  align-items: center;
-  align-content: center;
-  justify-content: center; }
-  .token .token_icon {
-    width: 2.3rem;
-    height: 2.3rem;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-items: center;
-    align-content: center; }
-    .token .token_icon img {
-      display: block;
-      margin: 0;
-      height: 1.3rem;
-      width: auto; }
-  .token .token_name {
-    padding-left: 0.325rem;
-    height: 1.3rem;
-    flex-grow: 1;
-    color: #222;
-    font-weight: 500; }
-  .token .token_balance {
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    color: #888;
-    height: 1.3rem; }
-  .token .token_symbol {
-    height: 1.3rem;
-    font-size: 0.69444rem; }
-    .token .token_symbol:before {
-      content: ' '; }
-  .token .token_buttons {
-    padding-left: 0.5rem; }
-
-.account {
-  display: flex; }
-  .account .account_avatar {
-    width: 2.3rem;
-    height: 2.3rem;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-items: center;
-    align-content: center; }
-    .account .account_avatar canvas {
-      display: block;
-      height: 2.3rem !important;
-      width: auto !important; }
-  .account .account_information {
-    padding-left: 0.325rem;
-    overflow: hidden;
-    flex-grow: 1; }
-  .account .account_name {
-    color: #222;
-    font-weight: 500; }
-  .account .account_address {
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    color: #888;
-    font-size: 0.69444rem;
-    line-height: 0.90278rem; }
-  .account.-placeholder .account_avatar_placeholder, .account.-placeholder .account_name_placeholder, .account.-placeholder .account_address_placeholder {
-    background: rgba(221, 221, 221, 0.5); }
-  .account.-placeholder .account_avatar_placeholder {
-    width: 2.3rem;
-    height: 2.3rem; }
-  .account.-placeholder .account_name_placeholder {
-    width: 100%;
-    height: 1.2rem;
-    margin-bottom: 0.325rem; }
-  .account.-placeholder .account_address_placeholder {
-    width: 100%;
-    height: 0.76389rem; }
-
-.status .status_icon {
-  display: inline-block;
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-right: 0.25rem; }
-  .status .status_icon svg {
-    display: inline-block;
-    width: 0.5rem;
-    height: 0.5rem; }
-  .status .status_icon.-good svg circle {
-    fill: #3ec28f; }
-  .status .status_icon.-syncing svg circle {
-    fill: #DFCA29; }
-  .status .status_icon.-bad svg circle {
-    fill: #C2473E; }
-
-.status .status_text {
-  display: inline-block; }
-
-.header-nav {
-  display: flex;
-  justify-content: space-between;
-  padding: 1rem 0.5rem;
-  position: relative;
-  overflow: hidden;
-  height: 3.5rem; }
-  .header-nav .header-nav_left, .header-nav .header-nav_right {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center; }
-  .header-nav .header-nav_title {
-    z-index: 2;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    padding: 1rem 0.5rem;
-    text-align: center; }
-    .header-nav .header-nav_title a, .header-nav .header-nav_title a:link, .header-nav .header-nav_title a:visited, .header-nav .header-nav_title h1 {
-      margin: -0.175rem 0 -0.175rem;
-      padding: 0.25rem 0.5rem 0.175rem;
-      display: inline-block;
-      font-size: 1rem;
-      line-height: 1.3rem;
-      color: rgba(34, 34, 34, 0.675);
-      font-weight: 500; }
-  .header-nav a,
-  .header-nav a:link,
-  .header-nav a:visited {
-    z-index: 9;
-    color: rgba(34, 34, 34, 0.675);
-    font-weight: 500;
-    display: block;
-    margin: -0.175rem 0 -0.175rem;
-    padding: 0.25rem 0.5rem 0.175rem;
-    border-radius: 0.25rem; }
-    .header-nav a:hover,
-    .header-nav a:link:hover,
-    .header-nav a:visited:hover {
-      background: rgba(221, 221, 221, 0.5);
-      color: #222; }
-    .header-nav a.icon,
-    .header-nav a:link.icon,
-    .header-nav a:visited.icon {
-      width: 1.8rem;
-      height: 1.8rem;
-      text-indent: -9999rem;
-      background-size: 1rem auto;
-      background-position: center center;
-      background-repeat: no-repeat;
-      opacity: 0.675; }
-      .header-nav a.icon:hover,
-      .header-nav a:link.icon:hover,
-      .header-nav a:visited.icon:hover {
-        opacity: 1; }
-      .header-nav a.icon.-receive,
-      .header-nav a:link.icon.-receive,
-      .header-nav a:visited.icon.-receive {
-        background-image: url("../assets/img/icons/receive.svg"); }
-      .header-nav a.icon.-settings,
-      .header-nav a:link.icon.-settings,
-      .header-nav a:visited.icon.-settings {
-        background-image: url("../assets/img/icons/gear.svg"); }
-      .header-nav a.icon.-back,
-      .header-nav a:link.icon.-back,
-      .header-nav a:visited.icon.-back {
-        background-image: url("../assets/img/icons/back.svg"); }
-      .header-nav a.icon.-close,
-      .header-nav a:link.icon.-close,
-      .header-nav a:visited.icon.-close {
-        background-image: url("../assets/img/icons/close.svg"); }
-      .header-nav a.icon.-new,
-      .header-nav a:link.icon.-new,
-      .header-nav a:visited.icon.-new {
-        background-image: url("../assets/img/icons/plus.svg"); }
-
-.footer-nav {
-  display: flex;
-  height: 3.5rem;
-  overflow: hidden;
-  justify-content: space-between; }
-  .footer-nav .footer-nav_status {
-    padding: 1rem;
-    font-size: 0.69444rem;
-    color: #888; }
-  .footer-nav .footer-nav_icons {
-    padding: 1rem; }
-  .footer-nav .footer-nav_option {
-    padding: 1rem;
-    width: 100%;
-    text-align: center;
-    font-size: 0.83333rem;
-    color: #888; }
-    .footer-nav .footer-nav_option button {
-      margin-left: 0.5rem;
-      display: inline-block;
-      padding: 0.125rem 0.5rem; }
-  .footer-nav a,
-  .footer-nav a:link,
-  .footer-nav a:visited {
-    display: block;
-    margin: -0.175rem 0 -0.175rem;
-    padding: 0.25rem 0.5rem 0.175rem;
-    border-radius: 0.25rem; }
-    .footer-nav a:hover,
-    .footer-nav a:link:hover,
-    .footer-nav a:visited:hover {
-      background: rgba(221, 221, 221, 0.5);
-      color: #222; }
-    .footer-nav a.icon,
-    .footer-nav a:link.icon,
-    .footer-nav a:visited.icon {
-      width: 1.8rem;
-      height: 1.8rem;
-      text-indent: -9999rem;
-      background-size: 1rem auto;
-      background-position: center center;
-      background-repeat: no-repeat;
-      opacity: 0.675; }
-      .footer-nav a.icon:hover,
-      .footer-nav a:link.icon:hover,
-      .footer-nav a:visited.icon:hover {
-        opacity: 1; }
-      .footer-nav a.icon.-receive,
-      .footer-nav a:link.icon.-receive,
-      .footer-nav a:visited.icon.-receive {
-        background-image: url("../assets/img/icons/receive.svg"); }
-      .footer-nav a.icon.-settings,
-      .footer-nav a:link.icon.-settings,
-      .footer-nav a:visited.icon.-settings {
-        background-image: url("../assets/img/icons/gear.svg"); }
-
-.progress-indicator {
-  display: flex;
-  width: 2.5rem;
-  height: 0.25rem;
-  overflow: hidden;
-  border-radius: 0.25rem; }
-
-.progress-indicator_step {
-  flex: 1;
-  background: #ddd;
-  height: 0.25rem; }
-  .progress-indicator_step.-complete {
-    background: #3ec28f; }
-
-.form-nav {
-  padding-top: 0.5rem;
-  display: flex;
-  justify-content: center; }
-  .form-nav.-binary {
-    justify-content: space-between; }
-
-.alert-screen {
-  height: 22rem;
-  display: flex;
-  align-items: center;
-  justify-content: center; }
-  .alert-screen .alert-screen_image {
-    display: flex;
-    align-items: center;
-    justify-content: center; }
-    .alert-screen .alert-screen_image img {
-      display: block;
-      width: 2rem;
-      height: auto; }
-  .alert-screen .alert-screen_text {
-    margin-top: 1rem;
-    text-align: center; }
-    .alert-screen .alert-screen_text h1, .alert-screen .alert-screen_text h2, .alert-screen .alert-screen_text big, .alert-screen .alert-screen_text strong {
-      font-weight: 600;
-      font-size: 1.2rem;
-      line-height: 1.56rem;
-      margin-bottom: 0.25rem; }
-    .alert-screen .alert-screen_text p {
-      color: #888; }
-
-.search-form {
-  display: flex;
-  justify-content: space-between;
-  padding: 0;
-  border-radius: 0.25rem;
-  background-color: #fff;
-  border: 0px solid #fff;
-  overflow: hidden;
-  box-shadow: 0 0.125rem 0.5rem rgba(34, 34, 34, 0.125); }
-  .search-form input[type='text'] {
-    border: 0;
-    background: transparent;
-    font-size: 0.83333rem;
-    font-weight: 400;
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    line-height: 1.3rem;
-    width: calc(100% - 2rem);
-    opacity: 0.75;
-    padding: 0.6rem 0.5rem 0.5rem; }
-    .search-form input[type='text']:focus {
-      opacity: 1; }
-  .search-form button {
-    width: 2.349375rem;
-    height: 2.349375rem; }
-- 
GitLab


From d5bd60eddd69e83fb3d8705f2650fbb52d582b90 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 11 Jun 2018 16:17:50 +0200
Subject: [PATCH 06/10] Ignore CSS files

---
 .gitignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 24c242ba..6152d1bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,7 +12,7 @@ dist
 lib
 
 # css files
-.css
+*.css
 
 # logs
 *.log*
-- 
GitLab


From 4a11669d4d92f99c960ff3b4a736cc0323d02edc Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 11 Jun 2018 16:34:02 +0200
Subject: [PATCH 07/10] Small code cleaning

---
 .../TokensList/TokenBalance/TokenBalance.js   |  2 +-
 packages/light-react/src/stores/sendStore.js  | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js b/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js
index 04fefc32..14b8643f 100644
--- a/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js
+++ b/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js
@@ -37,7 +37,7 @@ class TokenBalance extends Component {
       sendStore,
       token: { address }
     } = this.props;
-    sendStore.setTokenFromAddress(address);
+    sendStore.setTokenAddress(address);
     history.push('/send');
   };
 
diff --git a/packages/light-react/src/stores/sendStore.js b/packages/light-react/src/stores/sendStore.js
index ebc11bf3..7f43805f 100644
--- a/packages/light-react/src/stores/sendStore.js
+++ b/packages/light-react/src/stores/sendStore.js
@@ -10,7 +10,7 @@ import parityStore from './parityStore';
 import tokensStore from './tokensStore';
 
 class SendStore {
-  @observable blockNumber; // Current block number, used to calculate
+  @observable blockNumber; // Current block number, used to calculate confirmations
   @observable txStatus; // Status of the tx, see wiki for details
 
   constructor () {
@@ -18,6 +18,7 @@ class SendStore {
   }
 
   acceptRequest = password => {
+    // Avoid calling this method from a random place
     if (!this.requestId) {
       return Promise.reject(
         new Error('The requestId has not been generated yet.')
@@ -31,6 +32,9 @@ class SendStore {
     return this.api.signer.confirmRequest(this.requestId, null, password);
   };
 
+  /**
+   * Get the number of confirmations our transaction has.
+   */
   @computed
   get confirmations () {
     if (!this.txStatus.confirmed) {
@@ -39,6 +43,9 @@ class SendStore {
     return this.blockNumber - +this.txStatus.confirmed.blockNumber;
   }
 
+  /**
+   * Create a transaction.
+   */
   postTx = tx => {
     if (!tx) {
       return;
@@ -55,6 +62,7 @@ class SendStore {
   };
 
   rejectRequest = (requestId, password) => {
+    // Avoid calling this method from a random place
     if (!this.requestId) {
       return Promise.reject(
         new Error('The requestId has not been generated yet.')
@@ -63,8 +71,13 @@ class SendStore {
     return this.api.signer.rejectRequest(this.requestId);
   };
 
-  setTokenFromAddress = tokenAddress => {
-    this.token = tokensStore.tokens.get(tokenAddress);
+  @computed
+  get token () {
+    return tokensStore.tokens.get(this.tokenAddress);
+  }
+
+  setTokenAddress = tokenAddress => {
+    this.tokenAddress = tokenAddress;
   };
 
   setTx = tx => {
-- 
GitLab


From 364104faee6921c2ef7cb42e9c41af23e07afd9a Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 11 Jun 2018 18:33:02 +0200
Subject: [PATCH 08/10] Use gasPrice in txForm

---
 .../light-react/src/Send/TxForm/TxForm.js     | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/light-react/src/Send/TxForm/TxForm.js b/packages/light-react/src/Send/TxForm/TxForm.js
index c141e538..6be2fe95 100644
--- a/packages/light-react/src/Send/TxForm/TxForm.js
+++ b/packages/light-react/src/Send/TxForm/TxForm.js
@@ -5,42 +5,49 @@
 
 import React, { Component } from 'react';
 import { defaultAccount$ } from '@parity/light.js';
+import { fromWei, toWei } from '@parity/api/lib/util/wei'; // TODO @parity/api's wei util should have Gwei as an unit
 import { inject, observer } from 'mobx-react';
 import light from 'light-hoc';
 import { Link } from 'react-router-dom';
-import { toWei } from '@parity/api/lib/util/wei';
 
 import TokenBalance from '../TokenBalance';
 
+const MAX_GAS_PRICE = 40; // In Gwei
+const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei
+
 @light({
   defaultAccount: defaultAccount$
 })
 @inject('sendStore')
 @observer
 class Send extends Component {
+  // Class properties that will not change
+  gasLimit = this.props.sendStore.token.address === 'ETH' ? 21000 : 150000; // Use common values for gasLimit instead of eth_estimateGas
+
   state = {
     amount: 0.01, // In Ether or in token
-    gas: 21000,
+    gasPrice: 4, // in Gwei
     to: '0x00Ae02834e91810B223E54ce3f9B7875258a1747'
   };
 
   handleChangeAmount = ({ target: { value } }) =>
     this.setState({ amount: value });
 
-  handleChangeGas = ({ target: { value } }) => this.setState({ gas: value });
+  handleChangeGasPrice = ({ target: { value } }) =>
+    this.setState({ gasPrice: value });
 
   handleChangeTo = ({ target: { value } }) => this.setState({ to: value });
 
   handleSubmit = e => {
     e.preventDefault();
     const { defaultAccount, history, sendStore } = this.props;
-    const { amount, gas, to } = this.state;
+    const { amount, gasPrice, to } = this.state;
 
     // Post a request to the transaction. There is a next step to sign this
     // request.
     sendStore.postTx({
       from: defaultAccount,
-      gas,
+      gasPrice: toWei(gasPrice, 'shannon'), // shannon == gwei
       to,
       value: toWei(amount)
     });
@@ -52,7 +59,7 @@ class Send extends Component {
     const {
       sendStore: { token }
     } = this.props;
-    const { amount, gas, to } = this.state;
+    const { amount, gasPrice, to } = this.state;
 
     return (
       <div>
@@ -103,16 +110,22 @@ class Send extends Component {
                     <div className='form_field -range'>
                       <label>Gas</label>
                       <input
-                        onChange={this.handleChangeGas}
+                        max={MAX_GAS_PRICE}
+                        min={MIN_GAS_PRICE}
+                        onChange={this.handleChangeGasPrice}
                         required
-                        min='1'
-                        max='44000'
+                        step={0.1}
                         type='range'
-                        value={gas}
+                        value={gasPrice}
                       />
                       <nav className='range-nav'>
                         <span className='range-nav_label'>Cheap</span>
-                        <span className='range-nav_value'>{gas}</span>
+                        <span className='range-nav_value'>
+                          {fromWei(
+                            toWei(gasPrice, 'shannon').mul(this.gasLimit)
+                          ).toFixed(6)}{' '}
+                          ETH
+                        </span>
                         <span className='range-nav_label'>Fast</span>
                       </nav>
                     </div>
-- 
GitLab


From 8c4aa6ad6702b5f365508f95e67f5106fcba469c Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 11 Jun 2018 18:42:57 +0200
Subject: [PATCH 09/10] Update light.js not to estimate gas

---
 packages/light-react/package.json              | 2 +-
 packages/light-react/src/Send/Signer/Signer.js | 2 +-
 packages/light-react/yarn.lock                 | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/light-react/package.json b/packages/light-react/package.json
index d850c0c3..3a8a8b61 100644
--- a/packages/light-react/package.json
+++ b/packages/light-react/package.json
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@parity/api": "^2.1.22",
-    "@parity/light.js": "https://github.com/parity-js/light.js#24ed8bed60917207a84d85cd5622636f8489fd7a",
+    "@parity/light.js": "https://github.com/parity-js/light.js#99ee612acd7ee69554839a09d6c094251043bc3b",
     "@parity/shared": "^3.0.1",
     "is-electron": "^2.1.0",
     "light-hoc": "^0.1.0",
diff --git a/packages/light-react/src/Send/Signer/Signer.js b/packages/light-react/src/Send/Signer/Signer.js
index 5cd491c5..f22dfe2b 100644
--- a/packages/light-react/src/Send/Signer/Signer.js
+++ b/packages/light-react/src/Send/Signer/Signer.js
@@ -95,7 +95,7 @@ class Signer extends Component {
                   </button>
                   <button
                     className='button -submit'
-                    disabled={!txStatus.requested}
+                    disabled={!txStatus || !txStatus.requested}
                   >
                     Confirm transaction
                   </button>
diff --git a/packages/light-react/yarn.lock b/packages/light-react/yarn.lock
index 4eeb73d1..a24f5574 100644
--- a/packages/light-react/yarn.lock
+++ b/packages/light-react/yarn.lock
@@ -124,9 +124,9 @@
     u2f-api "0.0.9"
     u2f-api-polyfill "0.4.3"
 
-"@parity/light.js@https://github.com/parity-js/light.js#24ed8bed60917207a84d85cd5622636f8489fd7a":
+"@parity/light.js@https://github.com/parity-js/light.js#99ee612acd7ee69554839a09d6c094251043bc3b":
   version "1.0.0"
-  resolved "https://github.com/parity-js/light.js#24ed8bed60917207a84d85cd5622636f8489fd7a"
+  resolved "https://github.com/parity-js/light.js#99ee612acd7ee69554839a09d6c094251043bc3b"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.49"
     "@parity/api" "^2.1.23"
@@ -7176,7 +7176,7 @@ sockjs@0.3.18:
     faye-websocket "^0.10.0"
     uuid "^2.0.2"
 
-"solc@github:ngotchac/solc-js":
+solc@ngotchac/solc-js:
   version "0.4.4"
   resolved "https://codeload.github.com/ngotchac/solc-js/tar.gz/04eb38cc3003fba8cb3656653a7941ed36408818"
   dependencies:
-- 
GitLab


From b93c7cedfa0dfbf80e7c081f813dd5d1e19df12a Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Tue, 12 Jun 2018 12:10:38 +0200
Subject: [PATCH 10/10] Add estimateGas

---
 .../src/Accounts/AccountsList/AccountsList.js |  4 ++-
 .../light-react/src/Send/TxForm/TxForm.js     | 14 ++++----
 packages/light-react/src/stores/sendStore.js  | 34 +++++++++++++++++--
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/packages/light-react/src/Accounts/AccountsList/AccountsList.js b/packages/light-react/src/Accounts/AccountsList/AccountsList.js
index b8e7e30f..1cb732e8 100644
--- a/packages/light-react/src/Accounts/AccountsList/AccountsList.js
+++ b/packages/light-react/src/Accounts/AccountsList/AccountsList.js
@@ -27,7 +27,9 @@ class AccountsList extends Component {
       parityStore: { api }
     } = this.props;
     // Set default account to the clicked one, and go to Tokens on complete
-    this.subscription = api.parity
+    // TODO Not 100% clean, I don't want any api.abc.method() in any React
+    // component.
+    api.parity
       .setNewDappsDefaultAddress(address)
       .then(() => history.push('/tokens'));
   };
diff --git a/packages/light-react/src/Send/TxForm/TxForm.js b/packages/light-react/src/Send/TxForm/TxForm.js
index 6be2fe95..84ba02a3 100644
--- a/packages/light-react/src/Send/TxForm/TxForm.js
+++ b/packages/light-react/src/Send/TxForm/TxForm.js
@@ -21,9 +21,6 @@ const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei
 @inject('sendStore')
 @observer
 class Send extends Component {
-  // Class properties that will not change
-  gasLimit = this.props.sendStore.token.address === 'ETH' ? 21000 : 150000; // Use common values for gasLimit instead of eth_estimateGas
-
   state = {
     amount: 0.01, // In Ether or in token
     gasPrice: 4, // in Gwei
@@ -36,7 +33,12 @@ class Send extends Component {
   handleChangeGasPrice = ({ target: { value } }) =>
     this.setState({ gasPrice: value });
 
-  handleChangeTo = ({ target: { value } }) => this.setState({ to: value });
+  handleChangeTo = ({ target: { value } }) => {
+    this.setState({ to: value }, () => {
+      // Estimate the gas to this address.
+      this.props.sendStore.estimateGas(this.state);
+    });
+  };
 
   handleSubmit = e => {
     e.preventDefault();
@@ -57,7 +59,7 @@ class Send extends Component {
 
   render () {
     const {
-      sendStore: { token }
+      sendStore: { estimated, token }
     } = this.props;
     const { amount, gasPrice, to } = this.state;
 
@@ -122,7 +124,7 @@ class Send extends Component {
                         <span className='range-nav_label'>Cheap</span>
                         <span className='range-nav_value'>
                           {fromWei(
-                            toWei(gasPrice, 'shannon').mul(this.gasLimit)
+                            toWei(gasPrice, 'shannon').mul(estimated)
                           ).toFixed(6)}{' '}
                           ETH
                         </span>
diff --git a/packages/light-react/src/stores/sendStore.js b/packages/light-react/src/stores/sendStore.js
index 7f43805f..0db483bb 100644
--- a/packages/light-react/src/stores/sendStore.js
+++ b/packages/light-react/src/stores/sendStore.js
@@ -5,13 +5,19 @@
 
 import { action, computed, observable } from 'mobx';
 import { blockNumber$, post$ } from '@parity/light.js';
+import { isAddress } from '@parity/api/lib/util/address';
+import noop from 'lodash/noop';
 
 import parityStore from './parityStore';
 import tokensStore from './tokensStore';
 
+const DEFAULT_GAS = 21000; // Default gas amount to show
+
 class SendStore {
-  @observable blockNumber; // Current block number, used to calculate confirmations
-  @observable txStatus; // Status of the tx, see wiki for details
+  @observable blockNumber; // Current block number, used to calculate confirmations.
+  @observable estimated = DEFAULT_GAS; // Estimated gas amount for this transaction.
+  tx; // The actual tx we are sending. No need to be observable.
+  @observable txStatus; // Status of the tx, see wiki for details.
 
   constructor () {
     this.api = parityStore.api;
@@ -43,6 +49,22 @@ class SendStore {
     return this.blockNumber - +this.txStatus.confirmed.blockNumber;
   }
 
+  /**
+   * Estimate the amount of gas for a particular transaction. Note: at the time
+   * we're estimating, this.tx has not been set yet (only set at postTx stage),
+   * that's why we're not using this.tx here, but a tx passed as argument.
+   */
+  estimateGas = tx => {
+    // We only estimate txs to a correct address
+    if (!tx || !isAddress(tx.to)) {
+      return Promise.resolve(DEFAULT_GAS);
+    }
+    return this.api.eth
+      .estimateGas(tx)
+      .then(this.setEstimated)
+      .catch(noop);
+  };
+
   /**
    * Create a transaction.
    */
@@ -89,6 +111,14 @@ class SendStore {
     this.blockNumber = blockNumber;
   };
 
+  @action
+  setEstimated = estimated => {
+    // Since estimateGas is not always accurate, we add a 120% factor for buffer.
+    const GAS_MULT_FACTOR = 1.2;
+
+    this.estimated = +estimated * GAS_MULT_FACTOR; // Don't store as BigNumber
+  };
+
   @action
   setTxStatus = txStatus => {
     this.txStatus = txStatus;
-- 
GitLab