diff options
| -rw-r--r-- | app/scripts/controllers/detect-tokens.js | 2 | ||||
| -rw-r--r-- | app/scripts/metamask-controller.js | 2 | ||||
| -rw-r--r-- | ui/app/components/alert/index.js | 52 |
3 files changed, 48 insertions, 8 deletions
diff --git a/app/scripts/controllers/detect-tokens.js b/app/scripts/controllers/detect-tokens.js index b30dc00f1..195ec918a 100644 --- a/app/scripts/controllers/detect-tokens.js +++ b/app/scripts/controllers/detect-tokens.js @@ -117,7 +117,7 @@ class DetectTokensController { } }) } - + /** * Internal isActive state * @type {Object} diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 3b303a95c..bcc7075c2 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -1436,7 +1436,7 @@ module.exports = class MetamaskController extends EventEmitter { } /** - * A method for activating the retrieval of price data and auto detect tokens, + * A method for activating the retrieval of price data and auto detect tokens, * which should only be fetched when the UI is visible. * @private * @param {boolean} active - True if price data should be getting fetched. diff --git a/ui/app/components/alert/index.js b/ui/app/components/alert/index.js index fc39d41e2..5620d847a 100644 --- a/ui/app/components/alert/index.js +++ b/ui/app/components/alert/index.js @@ -4,13 +4,53 @@ const h = require('react-hyperscript') class Alert extends Component { + constructor (props) { + super(props) + + this.state = { + visble: false, + msg: false, + className: '', + } + } + + componentWillReceiveProps (nextProps) { + if (!this.props.visible && nextProps.visible) { + this.animateIn(nextProps) + } else if (this.props.visible && !nextProps.visible) { + this.animateOut(nextProps) + } + } + + animateIn (props) { + this.setState({ + msg: props.msg, + visible: true, + className: '.visible', + }) + } + + animateOut (props) { + this.setState({ + msg: null, + className: '.hidden', + }) + + setTimeout(_ => { + this.setState({visible: false}) + }, 500) + + } + render () { - const className = `.global-alert${this.props.visible ? '.visible' : '.hidden'}` - return ( - h(`div${className}`, {}, - h('a.msg', {}, this.props.msg) - ) - ) + if (this.state.visible) { + return ( + h(`div.global-alert${this.state.className}`, {}, + h('a.msg', {}, this.state.msg) + ) + ) + } + return null } } |