Create Settings and Account pages. Link them to SideBar.

.eslintrc

@@ -10,6 +10,7 @@
   "rules": {
     "camelcase": 0,
     "no-shadow": 0,
+    "no-void": 0,
     "new-cap": 0,
     "no-return-assign": 0,
     "no-nested-ternary": 0,

src/components/AccountPage.js

@@ -0,0 +1,15 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+
+import Box from 'components/base/Box'
+
+type Props = {}
+
+class AccountPage extends PureComponent<Props> {
+  render() {
+    return <Box>{'account'}</Box>
+  }
+}
+
+export default AccountPage

src/components/Home.js → src/components/DashboardPage.js

@@ -18,7 +18,7 @@ type Props = {
   currentDevice: Device | null,
 }
 
-class Home extends PureComponent<Props> {
+class DashboardPage extends PureComponent<Props> {
   render() {
     const { currentDevice } = this.props
     return currentDevice !== null ? (
@@ -29,4 +29,4 @@ class Home extends PureComponent<Props> {
   }
 }
 
-export default connect(mapStateToProps)(Home)
+export default connect(mapStateToProps)(DashboardPage)

src/components/SettingsPage.js

@@ -0,0 +1,15 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+
+import Box from 'components/base/Box'
+
+type Props = {}
+
+class SettingsPage extends PureComponent<Props> {
+  render() {
+    return <Box>{'settings'}</Box>
+  }
+}
+
+export default SettingsPage

src/components/SideBar/Item.js

@@ -1,16 +1,25 @@
 // @flow
 
 import React from 'react'
-import type { Element } from 'react'
 import styled from 'styled-components'
+import { push } from 'react-router-redux'
+import { connect } from 'react-redux'
+
+import type { Element } from 'react'
 
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
 
 type Props = {
   children: string,
+  linkTo?: string | null,
   desc?: string | null,
   icon?: Element<*> | null,
+  push: Function,
+}
+
+const mapDispatchToProps = {
+  push,
 }
 
 const Container = styled(Box).attrs({
@@ -32,9 +41,9 @@ const IconWrapper = styled(Box)`
   border: 2px solid rgba(255, 255, 255, 0.1);
 `
 
-export default function Item({ children, desc, icon }: Props) {
+function Item({ children, desc, icon, linkTo, push }: Props) {
   return (
-    <Container>
+    <Container onClick={linkTo ? () => push(linkTo) : void 0}>
       <IconWrapper mr={2}>{icon || null}</IconWrapper>
       <div>
         <Text fontWeight="bold" fontSize={1}>
@@ -53,4 +62,7 @@ export default function Item({ children, desc, icon }: Props) {
 Item.defaultProps = {
   icon: null,
   desc: null,
+  linkTo: null,
 }
+
+export default connect(null, mapDispatchToProps)(Item)

src/components/SideBar/index.js

@@ -23,19 +23,27 @@ class SideBar extends PureComponent<{}> {
           <Box flow={2}>
             <CapsSubtitle>{'Menu'}</CapsSubtitle>
             <div>
-              <Item>{'Dashboard'}</Item>
+              <Item linkTo="/">{'Dashboard'}</Item>
               <Item>{'Send'}</Item>
               <Item>{'Receive'}</Item>
-              <Item>{'Settings'}</Item>
+              <Item linkTo="/settings">{'Settings'}</Item>
             </div>
           </Box>
           <Box flow={2}>
             <CapsSubtitle>{'Accounts'}</CapsSubtitle>
             <div>
-              <Item desc="BTC 3.78605936">{'Brian Account'}</Item>
-              <Item desc="ETH 0.05944">{'Virginie Account'}</Item>
-              <Item desc="DOGE 2.2658">{'Ledger Account'}</Item>
-              <Item desc="BTC 0.00015486">{'Nicolas Account'}</Item>
+              <Item linkTo="/account/brian" desc="BTC 3.78605936">
+                {'Brian Account'}
+              </Item>
+              <Item linkTo="/account/virginie" desc="ETH 0.05944">
+                {'Virginie Account'}
+              </Item>
+              <Item linkTo="/account/ledger" desc="DOGE 2.2658">
+                {'Ledger Account'}
+              </Item>
+              <Item linkTo="/account/nicolas" desc="BTC 0.00015486">
+                {'Nicolas Account'}
+              </Item>
             </div>
           </Box>
         </GrowScroll>

src/components/Wrapper.js

@@ -6,7 +6,10 @@ import { translate } from 'react-i18next'
 
 import Box from 'components/base/Box'
 
-import Home from 'components/Home'
+import DashboardPage from 'components/DashboardPage'
+import SettingsPage from 'components/SettingsPage'
+import AccountPage from 'components/AccountPage'
+
 import SideBar from 'components/SideBar'
 import TopBar from 'components/TopBar'
 
@@ -15,7 +18,9 @@ const Wrapper = () => (
     <SideBar />
     <Box grow bg="cream">
       <TopBar />
-      <Route path="/" component={Home} />
+      <Route path="/" component={DashboardPage} />
+      <Route path="/settings" component={SettingsPage} />
+      <Route path="/account/:account" component={AccountPage} />
     </Box>
   </Box>
 )

webpack.renderer.js

@@ -9,4 +9,7 @@ module.exports = {
       __PROD__,
     }),
   ],
+  devServer: {
+    historyApiFallback: true,
+  },
 }