From e2fa3ba415e88c7bfd66b32c807e20f3562a9420 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Sat, 21 Jul 2018 16:02:23 -0400
Subject: [PATCH 1/2] refactor Alert component to work properly

---
 ui/app/components/alert/index.js | 52 ++++++++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 6 deletions(-)

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

From 5ebefc0e502696098599a4a17f185a88aaeed628 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Sat, 21 Jul 2018 16:03:31 -0400
Subject: [PATCH 2/2] run linter

---
 app/scripts/controllers/detect-tokens.js | 2 +-
 app/scripts/metamask-controller.js       | 2 +-
 2 files changed, 2 insertions(+), 2 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.