aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--app/scripts/controllers/detect-tokens.js2
-rw-r--r--app/scripts/metamask-controller.js2
-rw-r--r--ui/app/components/alert/index.js52
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
}
}