style(warning): Added open alpha warning notice

src/components/admin-lte/index.js

@@ -5,13 +5,13 @@ import Configure from "./configure"
 import Icons from "./icons"
 import Wallet from "./wallet"
 
-import AdminLTE, { Sidebar } from "adminlte-2-react"
+import AdminLTE, { Sidebar, Navbar } from "adminlte-2-react"
 import ScannerModal from "../qr-scanner/modal"
 
 import Layout from "../layout"
 import "./admin-lte.css"
 import BchWallet from "minimal-slp-wallet"
-
+import VersionStatus from "../version-status"
 import { BrowserRouter as Router } from "react-router-dom"
 const { Item } = Sidebar
 
@@ -19,6 +19,7 @@ const { Item } = Sidebar
 const MENU_HIDE_WIDTH = 770
 
 let _this
+
 class AdminLTEPage extends React.Component {
   constructor(props) {
     super(props)
@@ -65,6 +66,9 @@ class AdminLTEPage extends React.Component {
 
             {_this.sidebar}
           </Sidebar.Core>
+          <Navbar.Core>
+            <VersionStatus></VersionStatus>
+          </Navbar.Core>
           <Layout path="/">
             <div className="components-container">
               {_this.state.section === "Wallet" && (
@@ -107,13 +111,14 @@ class AdminLTEPage extends React.Component {
 
   async componentDidMount() {
     _this.customMenuItems()
-    _this.dropDownBalance()
     _this.addOnClickEventToScanner()
 
     _this.activeItemById("Wallet")
 
     await _this.updateState()
     setTimeout(() => {
+      _this.dropDownBalance()
+
       _this.getBalance()
     }, 250)
   }
@@ -227,7 +232,6 @@ class AdminLTEPage extends React.Component {
       showScannerModal: !_this.state.showScannerModal,
     })
   }
-
 }
 // Props prvided by redux
 AdminLTEPage.propTypes = {

src/components/layout.css

@@ -698,3 +698,28 @@ pre tt:after {
     box-shadow: 0 5px #666;
     transform: translateY(4px);
 }
+.version-status{
+  position: absolute;
+  top: 0;
+  width: 60%;
+  left: calc(50% - 30%) ;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.version-status div{
+  width: 100%;
+  color:white;
+  background-color: #FF4500;
+  height: 70%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: 1em;
+  padding-left: 1em;
+}
+.version-status div p{
+  font-size: 12px;
+  font-weight: 800;
+  margin-top: 8px;
+}

src/components/version-status.js

@@ -0,0 +1,25 @@
+import React from "react"
+
+
+class VersionStatus extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+
+  }
+
+  render() {
+    return (
+      <>
+        <div className="version-status">
+            <div>
+                <p><b>Warning: Open Alpha - things will break</b></p>
+            </div>
+        </div>
+      </>
+    )
+  }
+
+}
+
+export default VersionStatus