From 706c4ac01c006f5a8e6e736f406512877c09ece0 Mon Sep 17 00:00:00 2001
From: Victor Baranov <baranov.viktor.27@gmail.com>
Date: Wed, 30 Jan 2019 20:34:36 +0300
Subject: [PATCH] Refine toast component and use cases

---
 old-ui/app/account-detail.js                |  2 --
 old-ui/app/components/account-dropdowns.js  | 13 +++++++++++--
 old-ui/app/components/pending-tx.js         |  4 ++++
 old-ui/app/components/send/send-contract.js |  3 +--
 old-ui/app/components/send/send-token.js    |  2 --
 old-ui/app/components/send/send.js          |  5 +++++
 old-ui/app/components/toast.js              | 10 ++++++----
 7 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/old-ui/app/account-detail.js b/old-ui/app/account-detail.js
index 70d07bbd0..a6767c207 100644
--- a/old-ui/app/account-detail.js
+++ b/old-ui/app/account-detail.js
@@ -27,7 +27,6 @@ function mapStateToProps (state) {
     identities: state.metamask.identities,
     keyrings: state.metamask.keyrings,
     warning: state.appState.warning,
-    toastMsg: state.appState.toastMsg,
     accounts,
     address: state.metamask.selectedAddress,
     accountDetail: state.appState.accountDetail,
@@ -68,7 +67,6 @@ AccountDetailScreen.prototype.render = function () {
     h('.account-detail-section.full-flex-height', [
 
       h(ToastComponent, {
-        msg: props.toastMsg,
         isSuccess: false,
       }),
 
diff --git a/old-ui/app/components/account-dropdowns.js b/old-ui/app/components/account-dropdowns.js
index 827d86647..fd5a2306d 100644
--- a/old-ui/app/components/account-dropdowns.js
+++ b/old-ui/app/components/account-dropdowns.js
@@ -42,6 +42,7 @@ class AccountDropdowns extends Component {
       labels: {},
       isProxy: false,
       contractProps: null,
+      preventToast: false,
     }
     this.accountSelectorToggleClassName = 'accounts-selector'
     this.optionsMenuToggleClassName = 'account-dropdown'
@@ -131,6 +132,7 @@ class AccountDropdowns extends Component {
     this.props.actions.showAccountDetail(address)
     if (ifHardwareAcc(keyring)) {
       if (isLedger(keyring.type)) {
+
         const hdPaths = getHdPaths()
         return new Promise((resolve, reject) => {
           this.props.actions.connectHardwareAndUnlockAddress(LEDGER, hdPaths[1].value, address)
@@ -142,10 +144,17 @@ class AccountDropdowns extends Component {
           })
         })
         .catch(e => {
-          this.props.actions.displayWarning((e && e.message) || e)
-          this.props.actions.displayToast(e)
+          if (!this.state.preventToast) {
+            this.props.actions.displayToast(e)
+          } else {
+            this.setState({preventToast: false})
+          }
         })
+      } else {
+        this.setState({preventToast: true})
       }
+    } else {
+        this.setState({preventToast: true})
     }
   }
 
diff --git a/old-ui/app/components/pending-tx.js b/old-ui/app/components/pending-tx.js
index ff5bed21e..63b5ed3dd 100644
--- a/old-ui/app/components/pending-tx.js
+++ b/old-ui/app/components/pending-tx.js
@@ -26,6 +26,7 @@ const { tokenInfoGetter, calcTokenAmount } = require('../../../ui/app/token-util
 const BigNumber = require('bignumber.js')
 const ethNetProps = require('eth-net-props')
 import { getMetaMaskAccounts } from '../../../ui/app/selectors'
+import ToastComponent from './toast'
 
 const MIN_GAS_PRICE_BN = new BN('0')
 const MIN_GAS_LIMIT_BN = new BN('21000')
@@ -168,6 +169,9 @@ PendingTx.prototype.render = function () {
     h('div', {
       key: txMeta.id,
     }, [
+      h(ToastComponent, {
+        isSuccess: false,
+      }),
 
       h('form#pending-tx-form', {
         onSubmit: this.onSubmit.bind(this),
diff --git a/old-ui/app/components/send/send-contract.js b/old-ui/app/components/send/send-contract.js
index a1502b68b..84c042214 100644
--- a/old-ui/app/components/send/send-contract.js
+++ b/old-ui/app/components/send/send-contract.js
@@ -152,7 +152,7 @@ class SendTransactionScreen extends PersistentForm {
 				<SendProfile />
 				<SendHeader title="Execute Method" />
 				<ErrorComponent error={error} />
-				<ToastComponent msg={this.props.toastMsg} isSuccess={true} />
+				<ToastComponent isSuccess={true} />
 				<div style={{ padding: '0 30px' }}>
 					<Select
 						clearable={false}
@@ -470,7 +470,6 @@ function mapStateToProps (state) {
 	const result = {
 		address: state.metamask.selectedAddress,
 		warning: state.appState.warning,
-		toastMsg: state.appState.toastMsg,
 		methodSelected: contractAcc && contractAcc.methodSelected,
 		methodABI: contractAcc && contractAcc.methodABI,
 		inputValues: contractAcc && contractAcc.inputValues,
diff --git a/old-ui/app/components/send/send-token.js b/old-ui/app/components/send/send-token.js
index 7c3167c2c..7ead25b95 100644
--- a/old-ui/app/components/send/send-token.js
+++ b/old-ui/app/components/send/send-token.js
@@ -169,8 +169,6 @@ class SendTransactionScreen extends PersistentForm {
   }
 
   recipientDidChange (recipient, nickname) {
-    console.log('recipient, nickname')
-    console.log(recipient, nickname)
     this.setState({
       recipient,
       nickname,
diff --git a/old-ui/app/components/send/send.js b/old-ui/app/components/send/send.js
index 4cc73e9ae..75de29f46 100644
--- a/old-ui/app/components/send/send.js
+++ b/old-ui/app/components/send/send.js
@@ -16,6 +16,7 @@ import SendProfile from './send-profile'
 import SendHeader from './send-header'
 import ErrorComponent from '../error'
 import { getMetaMaskAccounts } from '../../../../ui/app/selectors'
+import ToastComponent from '../toast'
 module.exports = connect(mapStateToProps)(SendTransactionScreen)
 
 function mapStateToProps (state) {
@@ -56,6 +57,10 @@ SendTransactionScreen.prototype.render = function () {
 
     h('.send-screen.flex-column.flex-grow', [
 
+      h(ToastComponent, {
+        isSuccess: false,
+      }),
+
       //
       // Sender Profile
       //
diff --git a/old-ui/app/components/toast.js b/old-ui/app/components/toast.js
index 2173db531..43890a49f 100644
--- a/old-ui/app/components/toast.js
+++ b/old-ui/app/components/toast.js
@@ -7,6 +7,7 @@ import actions from '../../../ui/app/actions'
 class ToastComponent extends Component {
 	static propTypes = {
 		msg: PropTypes.string,
+		toastMsg: PropTypes.string,
 		isSuccess: PropTypes.bool,
 		hideToast: PropTypes.func,
 	}
@@ -17,7 +18,7 @@ class ToastComponent extends Component {
 	}
 
 	componentDidUpdate (prevProps) {
-		if (!prevProps.msg && this.props.msg) {
+		if ((!prevProps.msg && this.props.msg) || (!prevProps.toastMsg && this.props.toastMsg)) {
 			this.timerID = setTimeout(() => {
 				this.props.hideToast()
 				clearTimeout(this.timerID)
@@ -31,15 +32,16 @@ class ToastComponent extends Component {
 	}
 
 	render () {
-		const { msg } = this.props
-		return msg ? (
+		let toastMsg = this.props.msg || this.props.toastMsg
+		toastMsg = (toastMsg && toastMsg.message) || toastMsg
+		return toastMsg ? (
 			<div
 				className={classnames('toast', {
 					'green': this.props.isSuccess,
 					'red': !this.props.isSuccess,
 				})}
 				onClick={(e) => this.props.hideToast()}
-			>{(msg && msg.message) || msg}</div>
+			>{toastMsg}</div>
 		) : null
 	}
 }