Merge pull request #2 from Schwartz10/buyTokens

Buy tokens

build/contracts/Migrations.json

@@ -823,5 +823,5 @@
     }
   },
   "schemaVersion": "1.0.1",
-  "updatedAt": "2018-01-18T21:15:28.084Z"
+  "updatedAt": "2018-01-18T21:50:57.978Z"
 }

build/contracts/SimpleStorage.json

@@ -344,5 +344,5 @@
     }
   },
   "schemaVersion": "1.0.1",
-  "updatedAt": "2018-01-18T21:15:28.081Z"
+  "updatedAt": "2018-01-18T21:50:57.975Z"
 }

contracts/CapCoin.sol

@@ -3,6 +3,7 @@ pragma solidity ^0.4.18;
 contract CapCoin {
 
   event NewUser(string name);
+  event BoughtTokens(uint coinBalance);
 
   uint coinSupply = 1000000;
   uint coinsBought = 0;
@@ -37,4 +38,11 @@ contract CapCoin {
   function getUser() public view returns (string, uint) {
     return (addressToUser[msg.sender].name, addressToUser[msg.sender].coinBalance);
   }
+
+  function buyTokens(uint amount) public {
+    addressToUser[msg.sender].coinBalance += amount;
+    coinsBought += amount;
+    coinSupply -= amount;
+    BoughtTokens(addressToUser[msg.sender].coinBalance);
+  }
 }

src/components/Exchange.js

@@ -1,24 +1,60 @@
 import React, {Component} from 'react'
 import {connect} from 'react-redux'
+import SelectField from 'material-ui/SelectField';
+import MenuItem from 'material-ui/MenuItem';
+import RaisedButton from 'material-ui/RaisedButton';
+import { buyTokens } from '../store/user';
 
-const Exchange = props => (
-  <div>
-    <h1>Buy Tokens</h1>
-  </div>
-  )
+class Exchange extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {value: 1};
+  }
+
+  handleChange = (event, index, value) => this.setState({value});
+
+  render() {
+    return (
+      <div>
+        <h1>Buy Tokens</h1>
+        <SelectField
+          floatingLabelText="Coin Amount"
+          value={this.state.value}
+          onChange={this.handleChange}
+        >
+          <MenuItem value={1} primaryText="1" />
+          <MenuItem value={3} primaryText="3" />
+          <MenuItem value={5} primaryText="5" />
+          <MenuItem value={10} primaryText="10" />
+          <MenuItem value={25} primaryText="25" />
+          <MenuItem value={50} primaryText="50" />
+        </SelectField>
+        <RaisedButton
+          onClick={(e) =>
+          this.props.buyTokens(e, this.state.value, this.props.contract.buyTokens, this.props.accounts[0])}
+          label="Buy Tokens" primary={true}
+        />
+      </div>
+    );
+  }
+}
 
-/**
- * CONTAINER
- */
 const mapState = (state) => {
   return {
     user: state.user,
-    contract: state.contract
+    contract: state.contract,
+    accounts: state.accounts
   }
 }
 
 const mapDispatch = (dispatch) => {
-  return {}
+  return {
+    buyTokens: function(e, amount, contractFunc, account){
+      e.preventDefault()
+      return dispatch(buyTokens(amount, contractFunc, account))
+    }
+  }
 }
 
 export default connect(mapState, mapDispatch)(Exchange)

src/components/Profile.js

@@ -1,11 +1,17 @@
 import React from 'react'
 import {connect} from 'react-redux'
 import LoadingIndicator from 'react-loading-indicator';
+import { Link } from 'react-router-dom';
 
 const Profile = props => (
   <div>
     {props.user ?
-      <h1>Welcome {props.user.name}</h1>
+      <div>
+        <h1>Welcome {props.user.name}</h1>
+        <h3>You currently have {props.user.coinBalance} Tokens <br />
+          <Link to="exchange">Buy More</Link>
+        </h3>
+      </div>
       :
       <LoadingIndicator />
     }

src/store/user.js

@@ -8,16 +8,18 @@ const defaultUser = {}
  */
 const GET_USER = 'GET_USER';
 const CREATE_USER = 'CREATE_USER';
+const BUY_TOKENS = 'BUY_TOKENS';
 
 /**
  * ACTION CREATORS
  */
 const getUser = user => ({type: GET_USER, user})
 const createUser = user => ({type: CREATE_USER, user})
+const boughtTokens = amount => ({type: BUY_TOKENS, amount})
+
 /**
  * THUNK CREATORS
  */
-
 export const fetchUser = (contractFunc, account)  =>
   dispatch =>
     contractFunc.call({from: account})
@@ -32,11 +34,14 @@ export const fetchUser = (contractFunc, account)  =>
 export const addUser = (name, contractFunc, account) =>
   dispatch =>
     contractFunc(name, {from: account})
-    .then(res => {
+    .then(res => dispatch(createUser(res.logs[0].args)))
+    .catch(err => console.log(err));
 
-      console.log(res)
-      dispatch(createUser(res.logs[0].args))})
-    .catch(err => console.log(err))
+export const buyTokens = (amount, contractFunc, account) =>
+  dispatch =>
+    contractFunc(amount, {from: account})
+    .then(res => dispatch(boughtTokens(res.logs[0].args.coinBalance.c[0])))
+    .catch(err => console.log(err));
 
 /**
  * REDUCER
@@ -47,6 +52,8 @@ export default function (state = defaultUser, action) {
       return action.user;
     case CREATE_USER:
       return action.user;
+    case BUY_TOKENS:
+      return Object.assign({}, state, {coinBalance: action.amount})
     default:
       return state
   }