Merge e37f471 into 9a0ffa7

src/common/HandleLogin/index.jsx

@@ -12,7 +12,7 @@ const mapDispatchToProps = (dispatch) => {
 export const HandleLoginComponent = ({ history, handlePendingSignIn }) => {
   if (isSignInPending()) {
     handlePendingSignIn().then(() => {
-      history.push('/')
+      history.push('/transactions')
     })
   }
   return null

src/common/Header/index.jsx

@@ -7,15 +7,18 @@ import Logo from '../Logo/index'
 import LoginButton from '../LoginButton'
 import TopNav from '../TopNav'
 
-const styles = {
+const styles = theme => ({
+  root: {
+    zIndex: theme.zIndex.drawer + 1
+  },
   toolbar: {
     display: 'flex',
     'justify-content': 'space-between'
   }
-}
+})
 
 const Header = ({ classes }) => (
-  <AppBar position="static">
+  <AppBar position="fixed" className={classes.root}>
     <Toolbar className={classes.toolbar}>
       <Logo />
       <TopNav />

src/common/LeftDrawer/index.jsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+import classNames from 'classnames'
+import Drawer from '@material-ui/core/Drawer'
+import List from '@material-ui/core/List'
+import ListSubheader from '@material-ui/core/ListSubheader'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import Typography from '@material-ui/core/Typography'
+import DashboardIcon from '@material-ui/icons/Dashboard'
+import Button from '@material-ui/core/Button'
+import AddIcon from '@material-ui/icons/Add'
+import Divider from '@material-ui/core/Divider'
+import grey from '@material-ui/core/colors/grey'
+
+const styles = theme => ({
+  toolbar: theme.mixins.toolbar,
+  drawerPaper: {
+    maxWidth: 200
+  },
+  menuTitle: {
+    margin: '20px'
+  },
+  button: {
+    fontSize: 10,
+    padding: 5,
+    minHeight: 22,
+    marginLeft: 25
+  },
+  leftIcon: {
+    marginRight: theme.spacing.unit
+  },
+  iconSmall: {
+    fontSize: 12
+  },
+  noAccounts: {
+    background: grey[100],
+    margin: '0 20px 20px 25px',
+    padding: theme.spacing.unit
+  }
+})
+
+const LeftDrawer = ({ classes }) => (
+  <Drawer
+    elevation={3}
+    variant="permanent"
+    classes={{
+      paper: classes.drawerPaper
+    }}
+  >
+    <div className={classes.toolbar} />
+    <List>
+      <ListItem button key="Dashboard">
+        <ListItemIcon><DashboardIcon /></ListItemIcon>
+        <ListItemText primary="Dashboard" />
+      </ListItem>
+    </List>
+    <Divider />
+    <List
+      component="nav"
+      subheader={<ListSubheader component="div">Accounts</ListSubheader>}
+    >
+      <Typography variant="caption" className={classes.noAccounts}>
+        You don&apos;t have any accounts yet
+      </Typography>
+      <Button variant="contained" color="secondary" className={classes.button}>
+        <AddIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
+        Add account
+      </Button>
+    </List>
+  </Drawer>
+)
+
+LeftDrawer.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(LeftDrawer)

src/common/LoadingOverlay/index.jsx

@@ -10,7 +10,7 @@ const styles = {
     left: 0,
     right: 0,
     bottom: 0,
-    'z-index': 1000,
+    zIndex: 10000,
     padding: '1.2rem',
     display: 'flex',
     position: 'fixed',

src/common/LoginButton/__tests__/index.test.jsx

@@ -17,7 +17,7 @@ describe('HandleLogin', () => {
   it('matches snapshot with logged out user', () => {
     const component = renderer.create((
       <LoginButtonComponent
-        user={{ isAuthenticated: false }}
+        user={{ isAuthenticatedWith: null }}
         handleLogin={mochHandleLogin}
         handleLogout={mochHandleLogout}
       />
@@ -28,7 +28,7 @@ describe('HandleLogin', () => {
   it('matches snapshot with logged in user profile', () => {
     const component = renderer.create((
       <LoginButtonComponent
-        user={{ isAuthenticated: true, name: 'Test name', username: 'Test' }}
+        user={{ isAuthenticatedWith: 'blockstack', name: 'Test name', username: 'Test' }}
         handleLogin={mochHandleLogin}
         handleLogout={mochHandleLogout}
         classes={{ ...props }}
@@ -40,7 +40,7 @@ describe('HandleLogin', () => {
   it('handles login', () => {
     const wrapper = mount((
       <LoginButtonComponent
-        user={{ isAuthenticated: false }}
+        user={{ isAuthenticatedWith: null }}
         handleLogin={mochHandleLogin}
         handleLogout={mochHandleLogout}
       />

src/common/LoginButton/index.jsx

@@ -1,16 +1,19 @@
+/* eslint-disable no-console */
 import React from 'react'
 import PropTypes from 'prop-types'
+import { compose } from 'recompose'
 import { connect } from 'react-redux'
+import { withStyles } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button'
 import Avatar from '@material-ui/core/Avatar'
 import Popper from '@material-ui/core/Popper'
 import MenuItem from '@material-ui/core/MenuItem'
 import MenuList from '@material-ui/core/MenuList'
+import AccountBoxIcon from '@material-ui/icons/AccountBox'
 import Paper from '@material-ui/core/Paper'
 import Fade from '@material-ui/core/Fade'
 import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import Tooltip from '@material-ui/core/Tooltip'
-import { withStyles } from '@material-ui/core/styles'
 import { userLogin, userLogout } from '../../store/user/actions'
 
 const styles = {
@@ -57,7 +60,7 @@ export class LoginButtonComponent extends React.Component {
       handleLogout
     } = this.props
 
-    if (user.isAuthenticated) {
+    if (user.isAuthenticatedWith === 'blockstack') {
       return (
         <ClickAwayListener onClickAway={this.handleClose}>
           <div className={classes.root}>
@@ -90,6 +93,38 @@ export class LoginButtonComponent extends React.Component {
         </ClickAwayListener>
       )
     }
+    if (user.isAuthenticatedWith === 'guest') {
+      return (
+        <ClickAwayListener onClickAway={this.handleClose}>
+          <div className={classes.root}>
+            <Tooltip id="tooltip-icon" title={user.name}>
+              <Avatar alt={user.name}>
+                <AccountBoxIcon fontSize="small" />
+              </Avatar>
+            </Tooltip>
+            <Button
+              color="inherit"
+              aria-owns={open ? 'menu-list-grow' : null}
+              onClick={this.handleClick}
+            >
+              {user.name}
+            </Button>
+            <Popper open={open} anchorEl={anchorEl} transition>
+              {({ TransitionProps }) => (
+                <Fade {...TransitionProps} timeout={350}>
+                  <Paper>
+                    <MenuList role="menu">
+                      <MenuItem>Profile</MenuItem>
+                      <MenuItem onClick={handleLogout}>Logout</MenuItem>
+                    </MenuList>
+                  </Paper>
+                </Fade>
+              )}
+            </Popper>
+          </div>
+        </ClickAwayListener>
+      )
+    }
     return (
       <Button color="inherit" onClick={handleLogin}>
         Login
@@ -102,11 +137,16 @@ LoginButtonComponent.propTypes = {
   classes: PropTypes.object,
   user: PropTypes.object.isRequired,
   handleLogin: PropTypes.func.isRequired,
-  handleLogout: PropTypes.func.isRequired
+  handleLogout: PropTypes.func.isRequired,
+  history: PropTypes.object
 }
 
 LoginButtonComponent.defaultProps = {
-  classes: null
+  classes: null,
+  history: null
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(LoginButtonComponent))
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withStyles(styles)
+)(LoginButtonComponent)