Refine toast component and use cases

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,
       }),
 

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)
+          if (!this.state.preventToast) {
-          this.props.actions.displayToast(e)
+            this.props.actions.displayToast(e)
+          } else {
+            this.setState({preventToast: false})
+          }
         })
+      } else {
+        this.setState({preventToast: true})
       }
+    } else {
+        this.setState({preventToast: true})
     }
   }
 

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),

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,

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,

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
       //

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
+		let toastMsg = this.props.msg || this.props.toastMsg
-		return msg ? (
+		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
 	}
 }