Start on manage UI

.gitignore

@@ -12,7 +12,9 @@
 /build
 
 # misc
+/misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -22,4 +24,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-\.env
+pool-together.code-workspace

README.md

@@ -2,4 +2,7 @@
 
 ## Development
 
-Run locally with `docker-compose up` inside the main repo. Chceck out [.env.sample](https://github.com/scottrepreneur/pool-together/blob/master/.env.sample) for necessary environment variables.
+Run locally with `docker-compose up` inside the main repo. Check out [.env.sample](https://github.com/scottrepreneur/pool-together/blob/master/.env.sample) for necessary environment variables.
+
+TODO: fix installing web3 on build seems to be failing --> current workaround is to manually install [email protected]
+

docker-compose.yml

@@ -1,8 +1,8 @@
 version: '3'
 
 services:
-  power-dai:
-    image: power_dai:dev
+  pool-together:
+    image: pool_together:dev
     build:
       context: .
     container_name: power_dai

package.json

@@ -1,9 +1,8 @@
 {
-  "name": "powerdai",
-  "version": "0.1.0",
+  "name": "pool-together",
+  "version": "0.5.0",
   "private": true,
   "dependencies": {
-    "@makerdao/dai": "^0.11.1",
     "axios": "^0.18.0",
     "bignumber.js": "^8.0.2",
     "fortmatic": "^0.3.2",
@@ -13,7 +12,8 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.5",
     "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "web3": "1.0.0-beta.35"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.module.css

@@ -2,11 +2,12 @@
 		margin: 10px 0;
 		box-sizing: border-box;
 		display: block;
-		width: 100%;
+		width: 115px;
+		border-radius: 8px;
 	}
 
 	.NavigationItem a {
-		color: white;
+		color: #253239;
 		text-decoration: none;
 		width: 100%;
 		box-sizing: border-box;
@@ -17,15 +18,17 @@
 	.NavigationItem a:active,
 	.NavigationItem a.active {
 		color: #3B78E7;
+		border-radius: 4px;
 	}
 
 @media (min-width: 500px) {
 	.NavigationItem {
 		margin: 0;
 		display: flex;
 		height: 100%;
-		width: auto;
+		width: 115px;
 		align-items: center;
+		padding-right: 5px;
 	}
 
 	.NavigationItem a {
@@ -39,7 +42,6 @@
 	.NavigationItem a:active,
 	.NavigationItem a.active {
 		background-color: #3B78E7;
-		border-bottom: 4px solid #303030;
 		color: white;
 	}
 }

src/components/Navigation/NavigationItems/NavigationItems.js

@@ -7,8 +7,8 @@ const navigationItems = (props) => {
 
 	return (
 		<ul className={classes.NavigationItems}>
-			<NavigationItem onClickHandler={props.closed} link="/lottery">Lottery</NavigationItem>
-			<NavigationItem onClickHandler={props.closed} link="/entries">My Entries</NavigationItem>
+			<NavigationItem onClickHandler={props.closed} link="/manage">Manage</NavigationItem>
+			<NavigationItem onClickHandler={props.closed} link="/entries">Entries</NavigationItem>
 		</ul>	
 	);
 }

src/components/Navigation/NavigationItems/NavigationItems.module.css

@@ -1,11 +1,12 @@
 .NavigationItems {
-	margin: 0;
+	margin-top: 0;
 	padding: 0;
 	list-style: none;
 	display: flex;
 	align-items: center;
-	height: 100%;
+	height: 50px;
 	flex-flow: column;
+	grid-area: n;
 }
 
 @media (min-width: 500px) {

src/components/Navigation/Toolbar/Toolbar.js

@@ -5,6 +5,7 @@ import classes from './Toolbar.module.css';
 import Logo from '../../Logo/Logo';
 import WalletInfo from '../WalletInfo/WalletInfo';
 import SidebarToggle from '../Sidebar/SidebarToggle/SidebarToggle';
+import NavigationItems from '../NavigationItems/NavigationItems';
 
 const toolbar = (props) => (
 	<header className={classes.Toolbar}>
@@ -16,7 +17,7 @@ const toolbar = (props) => (
 			</NavLink>
 		</div>
 		<nav className={classes.DesktopOnly}>
-			<NavLink to="/entries" >My Entry</NavLink>
+			<NavigationItems closed={props.closed} />
 			<WalletInfo
 				loginClick = {(web3, fm) => props.loginClick(web3, fm)}
 				web3={props.web3}

src/components/Navigation/Toolbar/Toolbar.module.css

@@ -15,8 +15,11 @@
 }
 
 .DesktopOnly {
-	width: 300px;
+	width: 350px;
 	padding-top: 25px;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-template-areas: "n w";
 }
 
 .DesktopOnly a {

src/components/Navigation/WalletInfo/WalletInfo.js

@@ -1,26 +1,39 @@
 import React from 'react';
 
+import Aux from '../../../hoc/Aux/Aux';
 import classes from './WalletInfo.module.css';
 import Button from '../../UI/Button/Button';
 
 const walletInfo = (props) => {
+    let networkClasses = [classes.NetworkCircle, classes.MainnetCircle]
+    if (props.network === 4) {
+        networkClasses = [classes.NetworkCircle, classes.RinkebyCircle]
+    }
+
     let wallet = (
-        <Button 
-            btnType="WalletInfo"   
-            clicked={() => props.loginClick(props.web3, props.fm)}>
-            Login
-        </Button>
+        <Aux>
+            <Button 
+                btnType="WalletInfo"   
+                clicked={() => props.loginClick(props.web3, props.fm)}>
+                Login
+            </Button>
+        </Aux>
     );
-    if (props.network && props.address && props.balance) {
+    if (props.network && props.address) {
         let _address = props.address.toString()
         let address = _address.substring(_address.length - 8, _address.length);
-        wallet = props.network + ' ' + address + ' ' + props.balance.toFixed(2) + ' Dai'
+        wallet = (
+        <div className={classes.WalletInfo}>
+            <div className={networkClasses.join(" ")}></div>
+            <div className={classes.Address}>{address}</div>
+        </div>
+        ) 
     }
 
 	return (
-		<span className={classes.WalletInfo}>
+        <Aux>
             {wallet}
-        </span>
+        </Aux>
 	);
 }
 

src/components/Navigation/WalletInfo/WalletInfo.module.css

@@ -1,3 +1,34 @@
 .WalletInfo {
-    margin-right: 25px;
+    margin-right: 15px;
+    padding-top: 10px;
+    color: #253239;
+    display: inline-block;
+    grid-area: w;
+    border: 1px solid #253239;
+    border-radius: 5px;
+    margin-top: 5px;
+    height: 25px;
+    width: 125px;
+}
+
+.Address {
+    display: inline-block;
+}
+
+.NetworkCircle {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 15px;
+    margin-bottom: 2px;
+
+}
+
+.MainnetCircle {
+    background: forestgreen;
+}
+
+.RinkebyCircle {
+    background: gold;
 }

src/components/UI/Button/Button.module.css

@@ -26,6 +26,10 @@
     border: 2px solid red;
     color: red;
     border-radius: 4px;
+    width: 100px;
+    height: 50px;
+    margin-top: 0;
+    grid-area: w;
 }
 
 .LottoEntry {

src/containers/Enter/Enter.js

@@ -80,7 +80,8 @@ class Enter extends Component {
                 <h2>How much would you like to save?</h2>
                 <p>You must save at least $20 for this pool</p>
                 {errorMessage}
-                {form}
+				{form}
+				<p>You have {Number(this.props.daiBalance).toFixed(1)} Dai.</p>
                 <Button 
                     btnType="LottoEntry"
                     clicked={this.onEnterPoolHandler}>
@@ -93,15 +94,18 @@ class Enter extends Component {
 
 const mapStateToProps = state => {
 	return {
-		allowance: state.lottery.allowance
+		allowance: state.lottery.allowance,
+		daiBalance: state.layout.daiBalance,
+		error: state.lottery.error
 	}
 }
 
 const mapDispatchToProps = dispatch => {
 	return {
 		onEnterPool: (web3, amount) => dispatch(actions.enterDaiPool(web3, amount)),
 		onCheckDaiAllowance: (web3) => dispatch(actions.checkDaiAllowance(web3)),
-		onApproveDai: (web3) => dispatch(actions.approveDai(web3))
+		onApproveDai: (web3) => dispatch(actions.approveDai(web3)),
+		onFetchBalance: (web3) => dispatch(actions.fetchDaiBalance(web3))
 	}
 }
 

src/containers/Entries/Entries.js

@@ -13,7 +13,7 @@ class Entries extends Component {
     render () {
         return (
             <div className={classes.Entries}>
-                <h2>My Entries</h2>
+                <h2>Pool Entries</h2>
                 {this.props.entries}
             </div>
         )

src/containers/Lottery/Lottery.js

@@ -16,6 +16,8 @@ class Lottery extends Component {
         this.props.onFetchCurrentPool(window.web3);
         this.props.onFetchCurrentApr();
         this.props.onCheckDaiAllowance(window.web3);
+        this.props.onFetchEntrants(window.web3);
+        this.props.onFetchDeposit(window.web3);
     }
 
     onEnterHandler = () => {
@@ -29,6 +31,7 @@ class Lottery extends Component {
         }
         let apr = Number(this.props.currentApr).toFixed(2);
         let currentPool = Number(this.props.currentPool).toFixed(2);
+
         return (
             <div className={classes.Lottery}>
                 <h2>A Lottery You Can't Lose!</h2>
@@ -51,6 +54,8 @@ class Lottery extends Component {
                 <div>
                     <p>Current Principal: {currentPool}</p>
                     <p>APR: {apr}%</p>
+                    <p>Entrants: {this.props.entrants}</p>
+                    <p>My Deposit: {this.props.myDeposit}</p>
                 </div>
             </div>
 
@@ -64,7 +69,9 @@ const mapStateToProps = state => {
         timeStopSplash: state.lottery.timeStopSplash,
         currentPool: state.lottery.currentPool,
         currentApr: state.lottery.currentApr,
-        allowance: state.lottery.allowance
+        allowance: state.lottery.allowance,
+        entrants: state.lottery.entrants,
+        myDeposit: state.lottery.deposit
 	}
 }
 
@@ -74,7 +81,9 @@ const mapDispatchToProps = dispatch => {
         onFetchTimeStopSplash: (web3) => dispatch(actions.fetchTimeStopSplash(web3)),
         onFetchCurrentPool: (web3) => dispatch(actions.fetchCurrentPool(web3)),
         onFetchCurrentApr: () => dispatch(actions.fetchCurrentApr()),
-        onCheckDaiAllowance: (web3) => dispatch(actions.checkDaiAllowance(web3))
+        onCheckDaiAllowance: (web3) => dispatch(actions.checkDaiAllowance(web3)),
+        onFetchEntrants: (web3) => dispatch(actions.fetchEntrants(web3)),
+        onFetchDeposit: (web3) => dispatch(actions.fetchDeposit(web3))
 	}
 }
 

src/containers/Manage/Manage.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import classes from './Manage.module.css';
+import * as actions from '../../store/actions/index';
+
+class Manage extends Component {
+    render () {
+        return (
+            <div className={classes.Manage}>
+
+            </div>
+        );
+    }
+}
+
+export default Manage;

src/containers/Manage/Manage.module.css

@@ -0,0 +1,3 @@
+.Manage {
+
+}