feat(dashboard): Add Terminal and Wallet

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@material-ui/core": "^4.3.2",
+    "@material-ui/icons": "^4.2.1",
     "@types/react-loadable": "^5.5.1",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",
@@ -41,6 +42,7 @@
     "redux": "^3.6.0",
     "redux-logger": "^2.10.2",
     "redux-thunk": "^2.1.0",
+    "terminal-in-react": "^4.3.1",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {

src/js/components/molecules/App/App.jsx

@@ -64,7 +64,9 @@ class App extends React.Component {
             if (!userWantsToOpen) return;
         }
 
-        this.props.dispatch(openApp(this.props.app));
+        window.open(this.props.app.main);
+        // window.location.href = this.props.app.main;
+        // this.props.dispatch(openApp(this.props.app));
     }
 
     handlePopoverClose() {

src/js/components/molecules/App/App.scss

@@ -49,6 +49,7 @@
         z-index: 1;
 
         img {
+            border-radius: 10px;
             width: 100%;
             max-height: 100%;
         }

src/js/components/molecules/AppCanvas/AppCanvas.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import AppTerminal from '../../organims/AppTerminal';
+
+function AppCanvas() {
+    return (
+        <>
+            <AppTerminal />
+        </>
+    );
+}
+
+
+export default AppCanvas;

src/js/components/molecules/AppCanvas/index.ts

@@ -0,0 +1 @@
+export { default } from './AppCanvas';

src/js/components/molecules/SideNavigation/SideNavigation.jsx

@@ -6,6 +6,7 @@ import MenuItem from 'material-ui/MenuItem';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import BusinessIcon from 'material-ui/svg-icons/communication/business';
 import AccountIcon from 'material-ui/svg-icons/action/account-circle';
+import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet';
 import PowerIcon from 'material-ui/svg-icons/action/power-settings-new';
 import ArrowRightIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-right';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
@@ -42,6 +43,10 @@ class SideNavigation extends React.Component {
         window.location.reload();
     }
 
+    openWallet() {
+
+    }
+
     getMenuItems() {
         const profileMenuItem = <MenuItem onClick={() => this.handleRequestChange(false)} leftIcon={<ArrowRightIcon color={white} />} rightIcon={<ProfilePic className={styles.profilePic} />}>{this.props.user.info.fullName}</MenuItem>;
 
@@ -59,6 +64,7 @@ class SideNavigation extends React.Component {
         return (
             <React.Fragment>
                 {profileMenuItem}
+                <MenuItem onClick={() => this.openWallet()} leftIcon={<AccountBalanceWalletIcon />}>Wallet</MenuItem>
                 <MenuItem onClick={() => this.openApp(SETTINGS_NAMESPACE)} leftIcon={<AccountIcon color={white} />}>Profile</MenuItem>
                 { hasBusiness && <MenuItem onClick={() => this.openApp(BUSINESS_NAMESPACE)} leftIcon={<BusinessIcon color={white} />}>Manage accounts</MenuItem>}
                 <MenuItem onClick={this.handleLogoutClick} leftIcon={<PowerIcon color={white} />}>Log out</MenuItem>

src/js/components/molecules/Wallet/Wallet.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Dialog from '@material-ui/core/Dialog';
+import Button from '@material-ui/core/Button';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogActions from '@material-ui/core/DialogActions';
+
+interface Props {
+
+}
+
+function Wallet(props: Props) {
+    return (
+        <>
+            <Dialog open={false}>
+                <DialogTitle>
+                    Requesting to sign message:
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        Message
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button color="secondary">
+                        Cancel
+                    </Button>
+                    <Button color="primary" autoFocus>
+                        Sign
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}
+
+export default Wallet;

src/js/components/molecules/Wallet/index.ts

@@ -0,0 +1 @@
+export { default } from './Wallet';

src/js/components/organims/AppCanvasHolder/AppCanvasHolder.scss

@@ -0,0 +1,8 @@
+.appCanvasHolder {
+    position: absolute;
+    top:0;
+    width: 100%;
+    height: 100%;
+    background: #252525;
+    z-index: 2;
+}