Refine toast component and use cases
This commit is contained in:
parent
3054b67c28
commit
706c4ac01c
|
@ -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,
|
||||
}),
|
||||
|
||||
|
|
|
@ -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)
|
||||
})
|
||||
} else {
|
||||
this.setState({preventToast: false})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.setState({preventToast: true})
|
||||
}
|
||||
} else {
|
||||
this.setState({preventToast: true})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -169,8 +169,6 @@ class SendTransactionScreen extends PersistentForm {
|
|||
}
|
||||
|
||||
recipientDidChange (recipient, nickname) {
|
||||
console.log('recipient, nickname')
|
||||
console.log(recipient, nickname)
|
||||
this.setState({
|
||||
recipient,
|
||||
nickname,
|
||||
|
|
|
@ -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
|
||||
//
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue