From bf22e867ced2da11724b846024da4b633f0141b3 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 27 Jun 2018 14:29:44 +0200
Subject: [PATCH 1/5] Reset tx after successful send (fix #109)

---
 packages/fether-react/src/Send/Sent/Sent.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/fether-react/src/Send/Sent/Sent.js b/packages/fether-react/src/Send/Sent/Sent.js
index f2f6888a..ee300685 100644
--- a/packages/fether-react/src/Send/Sent/Sent.js
+++ b/packages/fether-react/src/Send/Sent/Sent.js
@@ -7,7 +7,6 @@ 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';
@@ -21,6 +20,12 @@ const MIN_CONFIRMATIONS = 6;
 @inject('sendStore')
 @observer
 class Sent extends Component {
+  handleGoToHomepage = () => {
+    const { history, sendStore } = this.props;
+    sendStore.clear();
+    history.push('/');
+  };
+
   render () {
     const {
       sendStore: { confirmations }
@@ -40,11 +45,13 @@ class Sent extends Component {
             </div>
             {confirmations >= MIN_CONFIRMATIONS && (
               <nav className='form-nav'>
-                <Link to='/'>
-                  <button className='button' disabled={confirmations < 6}>
-                    Go back
-                  </button>
-                </Link>
+                <button
+                  className='button'
+                  disabled={confirmations < 6}
+                  onClick={this.handleGoToHomepage}
+                >
+                  Go back
+                </button>
               </nav>
             )}
           </div>
-- 
GitLab


From e3b3ae5a752c0e6fb8058aaaa8691fa56d5118d7 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 27 Jun 2018 14:38:35 +0200
Subject: [PATCH 2/5] Reset form each time we visit TxForm

---
 packages/fether-react/src/Send/TxForm/TxForm.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/fether-react/src/Send/TxForm/TxForm.js b/packages/fether-react/src/Send/TxForm/TxForm.js
index b510faf0..e3fd55ff 100644
--- a/packages/fether-react/src/Send/TxForm/TxForm.js
+++ b/packages/fether-react/src/Send/TxForm/TxForm.js
@@ -29,6 +29,10 @@ class Send extends Component {
     ...this.props.sendStore.tx
   };
 
+  componentDidMount () {
+    this.props.sendStore.clear();
+  }
+
   componentDidUpdate () {
     if (!this.hasError()) {
       const { amount, gasPrice, to } = this.state;
-- 
GitLab


From ec7abe5bf3e21f3e368df96a26682e55dfa1fbbe Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 27 Jun 2018 15:21:48 +0200
Subject: [PATCH 3/5] Make sendStore simpler

---
 .../fether-react/src/Send/Signer/Signer.js    | 30 ++++++-------
 .../fether-react/src/Send/TxForm/TxForm.js    | 40 +++++++----------
 packages/fether-react/src/stores/sendStore.js | 45 ++++++-------------
 3 files changed, 43 insertions(+), 72 deletions(-)

diff --git a/packages/fether-react/src/Send/Signer/Signer.js b/packages/fether-react/src/Send/Signer/Signer.js
index c70f204f..3793ed5d 100644
--- a/packages/fether-react/src/Send/Signer/Signer.js
+++ b/packages/fether-react/src/Send/Signer/Signer.js
@@ -29,7 +29,7 @@ class Signer extends Component {
 
     this.setState({ isSending: true }, () => {
       sendStore
-        .acceptRequest(password)
+        .send(password)
         .then(() => history.push('/send/sent'))
         .catch(error => {
           this.setState({ error, isSending: false }, () =>
@@ -39,28 +39,26 @@ class Signer extends Component {
     });
   };
 
-  handleChangePassword = ({ target: { value } }) => {
-    this.setState({ error: null, password: value });
+  handleCancel = () => {
+    const { history } = this.props;
+    history.goBack();
   };
 
-  handleReject = () => {
-    const { history, sendStore } = this.props;
-
-    this.setState({ isSending: true }, () => {
-      sendStore
-        .rejectRequest()
-        .then(() => history.goBack())
-        .catch(() => history.goBack());
-    });
+  handleChangePassword = ({ target: { value } }) => {
+    this.setState({ error: null, password: value });
   };
 
+  /**
+   * TODO All this tooltips refs etc should go inside a React validation
+   * library.
+   */
   handleTooltipRef = ref => {
     this.tooltip = ref;
   };
 
   render () {
     const {
-      sendStore: { token, tx, txStatus }
+      sendStore: { token, tx }
     } = this.props;
     const { error, isSending, password } = this.state;
 
@@ -112,7 +110,7 @@ class Signer extends Component {
                   <nav className='form-nav -binary'>
                     <button
                       className='button -cancel'
-                      onClick={this.handleReject}
+                      onClick={this.handleCancel}
                       type='button'
                     >
                       Cancel
@@ -120,9 +118,7 @@ class Signer extends Component {
 
                     <button
                       className='button -submit'
-                      disabled={
-                        !txStatus || !txStatus.requested || isSending || error
-                      }
+                      disabled={!password.length || isSending || error}
                     >
                       Confirm transaction
                     </button>
diff --git a/packages/fether-react/src/Send/TxForm/TxForm.js b/packages/fether-react/src/Send/TxForm/TxForm.js
index e3fd55ff..0ce5df40 100644
--- a/packages/fether-react/src/Send/TxForm/TxForm.js
+++ b/packages/fether-react/src/Send/TxForm/TxForm.js
@@ -29,28 +29,13 @@ class Send extends Component {
     ...this.props.sendStore.tx
   };
 
-  componentDidMount () {
-    this.props.sendStore.clear();
-  }
-
-  componentDidUpdate () {
-    if (!this.hasError()) {
-      const { amount, gasPrice, to } = this.state;
-      this.props.sendStore.setTx({ amount, gasPrice, to });
-      this.estimateGas();
-    }
-  }
-
-  estimateGas = debounce(() => {
-    this.props.sendStore.estimateGas();
-  }, 1000);
-
   static getDerivedStateFromProps (nextProps, prevState) {
     const {
       balance,
       sendStore: { estimated }
     } = nextProps;
 
+    // Calculate the maxAount
     return {
       maxAmount:
         balance && estimated
@@ -63,6 +48,18 @@ class Send extends Component {
     };
   }
 
+  componentDidUpdate () {
+    if (!this.hasError()) {
+      const { amount, gasPrice, to } = this.state;
+      this.props.sendStore.setTx({ amount, gasPrice, to });
+      this.estimateGas();
+    }
+  }
+
+  estimateGas = debounce(() => {
+    this.props.sendStore.estimateGas();
+  }, 1000);
+
   handleChangeAmount = ({ target: { value } }) =>
     this.setState({ amount: value });
 
@@ -75,14 +72,9 @@ class Send extends Component {
 
   handleMax = () => this.setState({ amount: this.state.maxAmount });
 
-  handleSubmit = e => {
-    e.preventDefault();
-    const { history, sendStore } = this.props;
-
-    // Post a request to the transaction. There is a next step to sign this
-    // request.
-    sendStore.send();
-
+  handleSubmit = event => {
+    event.preventDefault();
+    const { history } = this.props;
     history.push('/send/signer');
   };
 
diff --git a/packages/fether-react/src/stores/sendStore.js b/packages/fether-react/src/stores/sendStore.js
index 78cb6fac..264c91ce 100644
--- a/packages/fether-react/src/stores/sendStore.js
+++ b/packages/fether-react/src/stores/sendStore.js
@@ -24,31 +24,19 @@ class SendStore {
   tx = {}; // The actual tx we are sending. No need to be observable.
   @observable txStatus; // Status of the tx, see wiki for details.
 
-  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.')
-      );
-    }
-
+  acceptRequest = (requestId, password) => {
     // Since we accepted this request, we also start to listen to blockNumber,
     // to calculate the number of confirmations
     this.subscription = blockNumber$().subscribe(this.setBlockNumber);
 
-    return parityStore.api.signer.confirmRequest(
-      this.requestId,
-      null,
-      password
-    );
+    return parityStore.api.signer.confirmRequest(requestId, null, password);
   };
 
   /**
    * Back to defaults.
    */
   clear = () => {
-    this.tx.amount = 0;
-    this.tx.to = '';
+    this.tx = {};
     if (this.subscription) {
       this.subscription.unsubscribe();
     }
@@ -112,7 +100,7 @@ class SendStore {
   /**
    * Create a transaction.
    */
-  send = () => {
+  send = password => {
     const send$ =
       this.tokenAddress === 'ETH'
         ? post$(this.txForEth)
@@ -121,24 +109,19 @@ class SendStore {
           this.txForErc20.options
         );
 
-    send$.subscribe(txStatus => {
-      if (txStatus.requested) {
-        this.requestId = txStatus.requested;
-      }
-      this.setTxStatus(txStatus);
+    return new Promise((resolve, reject) => {
+      send$.subscribe(txStatus => {
+        // When we arrive to the `requested` stage, we accept the request
+        if (txStatus.requested) {
+          this.acceptRequest(txStatus.requested, password)
+            .then(resolve)
+            .catch(reject);
+        }
+        this.setTxStatus(txStatus);
+      });
     });
   };
 
-  rejectRequest = () => {
-    // Avoid calling this method from a random place
-    if (!this.requestId) {
-      return Promise.reject(
-        new Error('The requestId has not been generated yet.')
-      );
-    }
-    return parityStore.api.signer.rejectRequest(this.requestId);
-  };
-
   @computed
   get token () {
     return tokensStore.tokens[this.tokenAddress];
-- 
GitLab


From b5d88090f23466472d0778e9d42376e1e0a13119 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 27 Jun 2018 15:29:27 +0200
Subject: [PATCH 4/5] Make change icon button nicer

---
 .../src/Accounts/CreateAccount/AccountName/AccountName.js   | 4 ++--
 .../fether-react/src/assets/sass/components/_account.scss   | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js b/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js
index 51e584aa..61fa9e20 100644
--- a/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js
+++ b/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js
@@ -56,8 +56,8 @@ class AccountName extends Component {
           <div className='account_avatar'>
             {!!address && <Blockies seed={address.toLowerCase()} />}
           </div>
-          <div className='account_information'>
-            <button className='button' onClick={generateNewAccount}>
+          <div className='account_change_blockies'>
+            <button className='button -cancel' onClick={generateNewAccount}>
               Choose another icon
             </button>
           </div>
diff --git a/packages/fether-react/src/assets/sass/components/_account.scss b/packages/fether-react/src/assets/sass/components/_account.scss
index e4258ad9..e9c0ce46 100644
--- a/packages/fether-react/src/assets/sass/components/_account.scss
+++ b/packages/fether-react/src/assets/sass/components/_account.scss
@@ -24,6 +24,12 @@
     flex-grow: 1;
   }
 
+  .account_change_blockies {
+    align-items: center;
+    display: flex;
+    padding-left: 1rem;
+  }
+
   .account_name {
     color: $black;
     font-weight: 500;
-- 
GitLab


From 1c412116781d2dfd9196e029cab59d0d07570d40 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 27 Jun 2018 15:33:22 +0200
Subject: [PATCH 5/5] Slightly increase the gas factor

---
 packages/fether-react/src/stores/sendStore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fether-react/src/stores/sendStore.js b/packages/fether-react/src/stores/sendStore.js
index 264c91ce..4b8e35ac 100644
--- a/packages/fether-react/src/stores/sendStore.js
+++ b/packages/fether-react/src/stores/sendStore.js
@@ -15,7 +15,7 @@ import parityStore from './parityStore';
 import tokensStore from './tokensStore';
 
 const DEFAULT_GAS = new BigNumber(21000); // Default gas amount to show
-const GAS_MULT_FACTOR = 1.2; // Since estimateGas is not always accurate, we add a 120% factor for buffer.
+const GAS_MULT_FACTOR = 1.33; // Since estimateGas is not always accurate, we add a 33% factor for buffer.
 
 class SendStore {
   @observable blockNumber; // Current block number, used to calculate tx confirmations.
-- 
GitLab