added new global alert

6 files changed, 126 insertions, 8 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 3da56ebc..4557b596 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -26,6 +26,11 @@ var actions = {
   SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE',
   showSidebar: showSidebar,
   hideSidebar: hideSidebar,
+  // sidebar state
+  ALERT_OPEN: 'UI_ALERT_OPEN',
+  ALERT_CLOSE: 'UI_ALERT_CLOSE',
+  showAlert: showAlert,
+  hideAlert: hideAlert,
   // network dropdown open
   NETWORK_DROPDOWN_OPEN: 'UI_NETWORK_DROPDOWN_OPEN',
   NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE',
@@ -1724,6 +1729,19 @@ function hideSidebar () {
   }
 }
 
+function showAlert (msg) {
+  return {
+    type: actions.ALERT_OPEN,
+    value: msg,
+  }
+}
+
+function hideAlert () {
+  return {
+    type: actions.ALERT_CLOSE,
+  }
+}
+
 
 function showLoadingIndication (message) {
   return {
diff --git a/ui/app/app.js b/ui/app/app.js
index a00692df..dbb6146d 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -36,6 +36,8 @@ const AccountMenu = require('./components/account-menu')
 
 // Global Modals
 const Modal = require('./components/modals/index').Modal
+// Global Alert
+const Alert = require('./components/alert')
 
 const AppHeader = require('./components/app-header')
 
@@ -93,6 +95,7 @@ class App extends Component {
   render () {
     const {
       isLoading,
+      alertMessage,
       loadingMessage,
       network,
       isMouseUser,
@@ -126,6 +129,9 @@ class App extends Component {
         // global modal
         h(Modal, {}, []),
 
+        // global alert
+        h(Alert, {visible: this.props.alertOpen, msg: alertMessage}),
+
         h(AppHeader),
 
         // sidebar
@@ -149,14 +155,6 @@ class App extends Component {
     )
   }
 
-  renderGlobalModal () {
-    return h(Modal, {
-      ref: 'modalRef',
-    }, [
-      // h(BuyOptions, {}, []),
-    ])
-  }
-
   renderSidebar () {
     return h('div', [
       h('style', `
@@ -265,11 +263,13 @@ App.propTypes = {
   setCurrentCurrencyToUSD: PropTypes.func,
   isLoading: PropTypes.bool,
   loadingMessage: PropTypes.string,
+  alertMessage: PropTypes.string,
   network: PropTypes.string,
   provider: PropTypes.object,
   frequentRpcList: PropTypes.array,
   currentView: PropTypes.object,
   sidebarOpen: PropTypes.bool,
+  alertOpen: PropTypes.bool,
   hideSidebar: PropTypes.func,
   isMascara: PropTypes.bool,
   isOnboarding: PropTypes.bool,
@@ -305,6 +305,8 @@ function mapStateToProps (state) {
   const {
     networkDropdownOpen,
     sidebarOpen,
+    alertOpen,
+    alertMessage,
     isLoading,
     loadingMessage,
   } = appState
@@ -330,6 +332,8 @@ function mapStateToProps (state) {
     // state from plugin
     networkDropdownOpen,
     sidebarOpen,
+    alertOpen,
+    alertMessage,
     isLoading,
     loadingMessage,
     noActiveNotices,
diff --git a/ui/app/components/alert/index.js b/ui/app/components/alert/index.js
new file mode 100644
index 00000000..fc39d41e
--- /dev/null
+++ b/ui/app/components/alert/index.js
@@ -0,0 +1,22 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+
+class Alert extends Component {
+
+    render () {
+        const className = `.global-alert${this.props.visible ? '.visible' : '.hidden'}`
+        return (
+            h(`div${className}`, {},
+              h('a.msg', {}, this.props.msg)
+            )
+        )
+    }
+}
+
+Alert.propTypes = {
+    visible: PropTypes.bool.isRequired,
+    msg: PropTypes.string,
+}
+module.exports = Alert
+
diff --git a/ui/app/css/itcss/components/alert.scss b/ui/app/css/itcss/components/alert.scss
new file mode 100644
index 00000000..930fc3f5
--- /dev/null
+++ b/ui/app/css/itcss/components/alert.scss
@@ -0,0 +1,57 @@
+.global-alert {
+  position: relative;
+  width: 100%;
+  background-color: #33A4E7;
+
+  .msg {
+    width: 100%;
+    display: block;
+    color: white;
+    font-size: 12px;
+    text-align: center;
+  }
+}
+
+.global-alert.hidden {
+  animation: alertHidden .5s ease forwards;
+}
+
+.global-alert.visible {
+  animation: alert .5s ease forwards;
+}
+
+/* Animation */
+@keyframes alert {
+  0% {
+    opacity: 0;
+    top: -50px;
+    padding: 0px;
+    line-height: 12px;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    top: 0;
+    padding: 8px;
+    line-height: 12px;
+  }
+}
+
+@keyframes alertHidden {
+  0% {
+    top: 0;
+    opacity: 1;
+    padding: 8px;
+    line-height: 12px;
+  }
+
+  100% {
+    opacity: 0;
+    top: -50px;
+    padding: 0px;
+    line-height: 0px;
+  }
+}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 5be04090..96ad5fe6 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -8,6 +8,8 @@
 
 @import './modal.scss';
 
+@import './alert.scss';
+
 @import './newui-sections.scss';
 
 @import './account-dropdown.scss';
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index f453812b..50d8bcba 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -49,6 +49,8 @@ function reduceApp (state, action) {
       },
     },
     sidebarOpen: false,
+    alertOpen: false,
+    alertMessage: null,
     networkDropdownOpen: false,
     currentView: seedWords ? seedConfView : defaultView,
     accountDetail: {
@@ -88,6 +90,19 @@ function reduceApp (state, action) {
         sidebarOpen: false,
       })
 
+    // sidebar methods
+    case actions.ALERT_OPEN:
+      return extend(appState, {
+        alertOpen: true,
+        alertMessage: action.value,
+      })
+
+    case actions.ALERT_CLOSE:
+      return extend(appState, {
+        alertOpen: false,
+        alertMessage: null,
+      })
+
     // modal methods:
     case actions.MODAL_OPEN:
       const { name, ...modalProps } = action.payload