Wiring up new homepage to new dashboard

unlock-app/src/components/Unlock.js

@@ -6,6 +6,7 @@ import React from 'react'
 import { Route, Switch } from 'react-router'
 
 import LockMaker from './creator/LockMaker'
+import Dashboard from './creator/Dashboard'
 import Lock from './consumer/Lock'
 import Home from './pages/Home'
 import Jobs from './pages/Jobs'
@@ -63,6 +64,7 @@ export function Unlock({ network, config, path }) {
   return (
     <Switch>
       <Route path="/provider" component={Provider} />
+      <Route path="/dashboard" component={Dashboard} />
       <Route path="/creator" component={LockMaker} />
       <Route path="/lock/:lockAddress" component={Lock} />
       <Route path="/jobs" component={Jobs} />

unlock-app/src/components/creator/Dashboard.js

@@ -4,9 +4,15 @@ import React, { Component } from 'react'
 import Layout from '../interface/Layout'
 import CreatorAccount from './CreatorAccount'
 import CreatorLocks from './CreatorLocks'
+import {setTransaction} from '../../actions/transaction'
+import { connect } from 'react-redux'
 
-export default class Dashboard extends Component {
+export class Dashboard extends Component {
   render() {
+    if (!this.props.account) {
+      return null //loading
+    }
+
     return (
       <Layout title="Creator Dashboard">
         <CreatorAccount network={this.props.network} account={this.props.account} />
@@ -22,3 +28,18 @@ Dashboard.propTypes = {
   transactions: UnlockPropTypes.transactions,
   locks: UnlockPropTypes.locks,
 }
+
+const mapStateToProps = state => {
+  return {
+    account: state.network.account, // TODO change account to base level
+    network: state.network,
+    transactions: state.transactions,
+    locks: state.locks,
+  }
+}
+
+const mapDispatchToProps = dispatch => ({
+  setTransaction: (transaction) => dispatch(setTransaction(transaction)),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)

unlock-app/src/components/pages/Home.js

@@ -1,10 +1,20 @@
 import styled from 'styled-components'
 import React, { PureComponent } from 'react'
+import UnlockPropTypes from '../../propTypes'
 import Layout from '../interface/Layout'
 import { Section, Headline, SubTitle, CallToAction, ThreeColumns, Column } from './Components'
 import { ActionButton } from '../creator/CreatorLocks'
 
 export default class Home extends PureComponent {
+  constructor(props) {
+    super(props)
+    this.dashboardClick = this.dashboardClick.bind(this)
+  }
+
+  dashboardClick() {
+    this.props.history.push('/dashboard')
+  }
+
   render() {
     return (
       <Layout forContent={true}>
@@ -13,7 +23,7 @@ export default class Home extends PureComponent {
           Unlock is a protocol which enables creators to monetize their content with a few lines of code in a fully decentralized way.
         </Headline>
 
-        <Action>
+        <Action onClick={this.dashboardClick}>
           <HomepageButton>Go to Your Dashboard</HomepageButton>
           <ButtonLabel>Requires a browser with an Ethereum wallet</ButtonLabel>
         </Action>
@@ -51,6 +61,10 @@ export default class Home extends PureComponent {
   }
 }
 
+Home.propTypes = {
+  history: UnlockPropTypes.Object,
+}
+
 const ImageWithHover = styled.div`
   border-style: none;
   background: url(${props => (`/images/pages/png/${props.base}.png`)}) no-repeat center/contain;