24 |
25 | {getRoutes()}
26 |
27 | {devTools()}
28 |
29 |
25 |
26 |
28 | {project.title}
29 |
30 |
31 | {project.totalFunding + " / " + project.goal + " ETH"}
32 |
33 |
36 |
37 |
38 |
39 |
11 |
13 | {projects.map((project, index) =>
14 | - this.props.onProjectClicked(project.address)}>
15 |
16 |
17 | {project.title}
18 |
19 | {project.totalFunding + " / " + project.goal + " ETH"}
20 |
21 |
22 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | )}
33 |
34 |
35 | )
36 | }
37 | }
38 |
39 | ProjectList.PropTypes = {
40 | currentBlock: React.PropTypes.number.isRequired,
41 | projects: React.PropTypes.array.isRequired,
42 | isLoading: React.PropTypes.bool.isRequired,
43 | onProjectClicked: React.PropTypes.func.isRequired,
44 | }
45 |
46 | export default ProjectList;
--------------------------------------------------------------------------------
/src/components/projectDetails.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { getEtherscanLink } from '../utils/web3Utils';
3 |
4 | import { Segment, Message, Header, Item } from 'semantic-ui-react';
5 |
6 | class ProjectDetails extends Component {
7 | render() {
8 | const { project, balance, currentBlock } = this.props;
9 | return (
10 |
11 |
15 | Contract address:
16 | {project.address}
17 |
18 |
19 | Raised:
20 | {project.totalFunding} ETH
21 |
22 |
23 | Remaining blocks:
24 | {project.deadline - currentBlock}
25 |
26 |
27 | Contributors:
28 | {project.contributorsCount}
29 |
30 |
31 | -
32 |
33 | Contributions:
34 |
35 |
36 | {project.contributionsCount}
37 |
38 |
39 |
40 |
41 | Creator:
42 | {project.creator}
43 |
44 |
45 | Balance
46 | { balance } ETH
47 |
48 |
49 | )
50 | }
51 | }
52 |
53 | ProjectDetails.PropTypes = {
54 | project: React.PropTypes.object.isRequired,
55 | balance: React.PropTypes.number.isRequired,
56 | currentBlock: React.PropTypes.number.isRequired,
57 | }
58 |
59 | export default ProjectDetails;
--------------------------------------------------------------------------------
/src/reducers/projectReducer.js:
--------------------------------------------------------------------------------
1 | import {handleActions} from 'redux-actions';
2 |
3 | import {
4 | fetchProjectRequest,
5 | fetchProjectSuccess,
6 | fetchProjectFailure,
7 | contributeProjectRequest,
8 | contributeProjectSuccess,
9 | contributeProjectFailure,
10 | fetchProjectBalanceRequest,
11 | fetchProjectBalanceSuccess,
12 | fetchProjectBalanceFailure,
13 | fetchContributionsRequest,
14 | fetchContributionsSuccess,
15 | fetchContributionsFailure
16 | } from '../actions/projectActions';
17 |
18 | import {
19 | requestReducer,
20 | fetchProjectSuccessReducer,
21 | fetchContributionsSuccessReducer,
22 | failureReducer,
23 | } from './reducerUtil';
24 |
25 | const initialState = {
26 | isFetching: false,
27 | project: {
28 | title: "-",
29 | goal: 0,
30 | deadline: 0,
31 | creator: "-",
32 | totalFunding: 0,
33 | contributionCount: 0,
34 | contributorsCount: 0,
35 | fundingHub: "-",
36 | address: "-",
37 | },
38 | contributionSuccessful: true,
39 | balance: 0,
40 | contributions: [],
41 | }
42 |
43 | function fetchProjectBalanceSuccessReducer(state, action) {
44 | console.log("state: ", state);
45 | return Object.assign({}, state, {
46 | isFetching: false,
47 | fetchComplete: true,
48 | balance: action.payload
49 | });
50 | };
51 |
52 | function contributeProjectSuccessReducer(state, action) {
53 | console.log("action: ", action);
54 | return Object.assign({}, state, {
55 | isFetching: false,
56 | fetchComplete: true,
57 | contributionSuccessful: true
58 | });
59 | }
60 |
61 | export const projectReducer = handleActions({
62 | [fetchProjectRequest]: requestReducer,
63 | [fetchProjectSuccess]: fetchProjectSuccessReducer,
64 | [fetchProjectFailure]: failureReducer,
65 | [fetchProjectBalanceRequest]: requestReducer,
66 | [fetchProjectBalanceSuccess]: fetchProjectBalanceSuccessReducer,
67 | [fetchProjectBalanceFailure]: failureReducer,
68 | [contributeProjectRequest]: requestReducer,
69 | [contributeProjectSuccess]: contributeProjectSuccessReducer,
70 | [contributeProjectFailure]: failureReducer,
71 | [fetchContributionsRequest]: requestReducer,
72 | [fetchContributionsSuccess]: fetchContributionsSuccessReducer,
73 | [fetchContributionsFailure]: failureReducer,
74 | }, initialState);
--------------------------------------------------------------------------------
/src/components/contributeModal.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Modal, Form, Button } from 'semantic-ui-react';
3 | import { toWei } from '../api/web3Api';
4 |
5 | const initialState = {
6 | amountInEth: 0
7 | }
8 |
9 | class ContributeModal extends Component {
10 |
11 | constructor(props) {
12 | super(props);
13 |
14 | this.state = initialState;
15 | }
16 |
17 | handleChange = (e, { name, value }) => this.setState({ [name]: value })
18 |
19 | handleClose = () => {
20 | this.props.onCloseModal();
21 | this.setState(initialState);
22 | }
23 |
24 | handleContribute = () => {
25 | console.log(this.state.amountInEth);
26 | this.props.onHandleContribute(this.state.amountInEth);
27 | this.setState(initialState);
28 | }
29 |
30 | render() {
31 | const { isDisplayed } = this.props;
32 | return (
33 |
34 |
38 | Contribute to this project
39 |
40 |
41 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | )
58 | }
59 | }
60 |
61 | ContributeModal.PropTypes = {
62 | isDisplayed: React.PropTypes.bool.isRequired,
63 | gasCost: React.PropTypes.number.isRequired,
64 | onCloseModal: React.PropTypes.func.isRequired,
65 | onHandleContribute: React.PropTypes.func.isRequired,
66 | }
67 |
68 | export default ContributeModal;
--------------------------------------------------------------------------------
/src/actions/projectActions.js:
--------------------------------------------------------------------------------
1 | import * as Web3Api from '../api/web3Api';
2 |
3 | export const fetchProjectRequest = "@@project/FETCH_PROJECT_REQUEST";
4 | export const fetchProjectSuccess = "@@project/FETCH_PROJECT_SUCCESS";
5 | export const fetchProjectFailure = "@@project/FETCH_PROJECT_FAILURE";
6 |
7 | export const fetchProjectBalanceRequest = "@@project/FETCH_PROJECT_BALANCE_REQUEST";
8 | export const fetchProjectBalanceSuccess = "@@project/FETCH_PROJECT_BALANCE_SUCCESS";
9 | export const fetchProjectBalanceFailure = "@@project/FETCH_PROJECT_BALANCE_FAILURE";
10 |
11 | export const contributeProjectRequest = "@@project/CONTRIBUTE_PROJECT_REQUEST";
12 | export const contributeProjectSuccess = "@@project/CONTRIBUTE_PROJECT_SUCCESS";
13 | export const contributeProjectFailure = "@@project/CONTRIBUTE_PROJECT_FAILURE";
14 |
15 | export const fetchContributionsRequest = "@@/project/FETCH_CONTRIBUTION_REQUEST";
16 | export const fetchContributionsSuccess = "@@/project/FETCH_CONTRIBUTION_SUCCESS";
17 | export const fetchContributionsFailure = "@@/project/FETCH_CONTRIBUTION_FAILURE";
18 |
19 | export function fetchProject(contractAddress) {
20 | return {
21 | types: [
22 | fetchProjectRequest,
23 | fetchProjectSuccess,
24 | fetchProjectFailure,
25 | ],
26 | callApi: () => Web3Api.getProjectDetails(contractAddress),
27 | payload: {}
28 | };
29 | };
30 |
31 | export function contribute(contractAddress, amount, userAddress) {
32 | return {
33 | types: [
34 | contributeProjectRequest,
35 | contributeProjectSuccess,
36 | contributeProjectFailure,
37 | ],
38 | callApi: () => Web3Api.contribute(contractAddress, amount, userAddress),
39 | payload: {}
40 | };
41 | }
42 |
43 | export function fetchProjectBalance(contractAddress) {
44 | return {
45 | types: [
46 | fetchProjectBalanceRequest,
47 | fetchProjectBalanceSuccess,
48 | fetchProjectBalanceFailure,
49 | ],
50 | callApi: () => Web3Api.getAddressBalance(contractAddress),
51 | payload: {}
52 | };
53 | };
54 |
55 | export function fetchContributions(contractAddress) {
56 | return {
57 | types: [
58 | fetchContributionsRequest,
59 | fetchContributionsSuccess,
60 | fetchContributionsFailure,
61 | ],
62 | callApi: () => Web3Api.getProjectContributions(contractAddress),
63 | payload: {}
64 | };
65 | };
66 |
--------------------------------------------------------------------------------
/test/metacoin.js:
--------------------------------------------------------------------------------
1 | var MetaCoin = artifacts.require("./MetaCoin.sol");
2 |
3 | contract('MetaCoin', function(accounts) {
4 | it("should put 10000 MetaCoin in the first account", function() {
5 | return MetaCoin.deployed().then(function(instance) {
6 | return instance.getBalance.call(accounts[0]);
7 | }).then(function(balance) {
8 | assert.equal(balance.valueOf(), 10000, "10000 wasn't in the first account");
9 | });
10 | });
11 | it("should call a function that depends on a linked library", function() {
12 | var meta;
13 | var metaCoinBalance;
14 | var metaCoinEthBalance;
15 |
16 | return MetaCoin.deployed().then(function(instance) {
17 | meta = instance;
18 | return meta.getBalance.call(accounts[0]);
19 | }).then(function(outCoinBalance) {
20 | metaCoinBalance = outCoinBalance.toNumber();
21 | return meta.getBalanceInEth.call(accounts[0]);
22 | }).then(function(outCoinBalanceEth) {
23 | metaCoinEthBalance = outCoinBalanceEth.toNumber();
24 | }).then(function() {
25 | assert.equal(metaCoinEthBalance, 2 * metaCoinBalance, "Library function returned unexpeced function, linkage may be broken");
26 | });
27 | });
28 | it("should send coin correctly", function() {
29 | var meta;
30 |
31 | // Get initial balances of first and second account.
32 | var account_one = accounts[0];
33 | var account_two = accounts[1];
34 |
35 | var account_one_starting_balance;
36 | var account_two_starting_balance;
37 | var account_one_ending_balance;
38 | var account_two_ending_balance;
39 |
40 | var amount = 10;
41 |
42 | return MetaCoin.deployed().then(function(instance) {
43 | meta = instance;
44 | return meta.getBalance.call(account_one);
45 | }).then(function(balance) {
46 | account_one_starting_balance = balance.toNumber();
47 | return meta.getBalance.call(account_two);
48 | }).then(function(balance) {
49 | account_two_starting_balance = balance.toNumber();
50 | return meta.sendCoin(account_two, amount, {from: account_one});
51 | }).then(function() {
52 | return meta.getBalance.call(account_one);
53 | }).then(function(balance) {
54 | account_one_ending_balance = balance.toNumber();
55 | return meta.getBalance.call(account_two);
56 | }).then(function(balance) {
57 | account_two_ending_balance = balance.toNumber();
58 |
59 | assert.equal(account_one_ending_balance, account_one_starting_balance - amount, "Amount wasn't correctly taken from the sender");
60 | assert.equal(account_two_ending_balance, account_two_starting_balance + amount, "Amount wasn't correctly sent to the receiver");
61 | });
62 | });
63 | });
64 |
--------------------------------------------------------------------------------
/contracts/FundingHub.sol:
--------------------------------------------------------------------------------
1 | pragma solidity ^0.4.4;
2 | import "./Project.sol";
3 |
4 | contract FundingHub {
5 |
6 | address public owner;
7 | uint public numOfProjects;
8 |
9 | mapping (uint => address) public projects;
10 |
11 | event LogProjectCreated(uint id, string title, address addr, address creator);
12 | event LogContributionSent(address projectAddress, address contributor, uint amount);
13 |
14 | event LogFailure(string message);
15 |
16 | modifier onlyOwner {
17 | if (owner != msg.sender) throw;
18 | _;
19 | }
20 |
21 | function FundingHub() {
22 | owner = msg.sender;
23 | numOfProjects = 0;
24 | }
25 |
26 | /**
27 | * Create a new Project contract
28 | * [0] -> new Project contract address
29 | */
30 | function createProject(uint _fundingGoal, uint _deadline, string _title) payable returns (Project projectAddress) {
31 |
32 | if (_fundingGoal <= 0) {
33 | LogFailure("Project funding goal must be greater than 0");
34 | throw;
35 | }
36 |
37 | if (block.number >= _deadline) {
38 | LogFailure("Project deadline must be greater than the current block");
39 | throw;
40 | }
41 |
42 | Project p = new Project(_fundingGoal, _deadline, _title, msg.sender);
43 | projects[numOfProjects] = p;
44 | LogProjectCreated(numOfProjects, _title, p, msg.sender);
45 | numOfProjects++;
46 | return p;
47 | }
48 |
49 | /**
50 | * Allow senders to contribute to a Project by it's address. Calls the fund() function in the Project
51 | * contract and passes on all value attached to this function call
52 | * [0] -> contribution was sent
53 | */
54 | function contribute(address _projectAddress) payable returns (bool successful) {
55 |
56 | // Check amount sent is greater than 0
57 | if (msg.value <= 0) {
58 | LogFailure("Contributions must be greater than 0 wei");
59 | throw;
60 | }
61 |
62 | Project deployedProject = Project(_projectAddress);
63 |
64 | // Check that there is actually a Project contract at that address
65 | if (deployedProject.fundingHub() == address(0)) {
66 | LogFailure("Project contract not found at address");
67 | throw;
68 | }
69 |
70 | // Check that fund call was successful
71 | if (deployedProject.fund.value(msg.value)(msg.sender)) {
72 | LogContributionSent(_projectAddress, msg.sender, msg.value);
73 | return true;
74 | } else {
75 | LogFailure("Contribution did not send successfully");
76 | return false;
77 | }
78 | }
79 |
80 | function kill() public onlyOwner {
81 | selfdestruct(owner);
82 | }
83 |
84 | /**
85 | * Don't allow Ether to be sent blindly to this contract
86 | */
87 | function() {
88 | throw;
89 | }
90 | }
--------------------------------------------------------------------------------
/src/containers/appContainer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {connect} from 'react-redux';
3 | import { Container, Message, Grid } from 'semantic-ui-react';
4 | import Navigation from '../components/navigation';
5 |
6 | import {
7 | fetchAccountsAndBalances,
8 | setSelectedAccount,
9 | } from '../actions/userActions';
10 |
11 | import {
12 | fetchNetwork,
13 | fetchBlockNumber,
14 | } from '../actions/networkActions';
15 |
16 | import './appContainer.css';
17 |
18 | class AppContainer extends Component {
19 |
20 | componentDidMount() {
21 | const {dispatch} = this.props;
22 | dispatch(fetchNetwork());
23 | dispatch(fetchBlockNumber());
24 | dispatch(fetchAccountsAndBalances());
25 | }
26 |
27 | handleSelectAccount = (accountIndex) => {
28 | const {dispatch} = this.props;
29 | dispatch(setSelectedAccount(accountIndex));
30 | }
31 |
32 | getNetworkStatusAlert(networkId, currentBlock) {
33 | let networkDisplayName = "network";
34 |
35 | switch (networkId) {
36 | case "1":
37 | networkDisplayName = "Mainnet";
38 | break;
39 | case "2":
40 | networkDisplayName = "Morden";
41 | break;
42 | case "3":
43 | networkDisplayName = "Ropsten";
44 | break;
45 | case "42":
46 | networkDisplayName = "Kovan";
47 | break;
48 | default:
49 | networkDisplayName = "TestRPC";
50 | break;
51 | }
52 |
53 | let message = `Currently on ${networkDisplayName} (${networkId}), the current block is ${currentBlock}.`;
54 |
55 | return (
56 |
83 |
88 | {this.props.children}
89 |
90 |
91 | );
92 |
93 | return (
94 |
38 |
42 | Create a new crowdfunding project
43 |
44 |
45 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | )
78 | }
79 | }
80 |
81 | CreateProjectModal.PropTypes = {
82 | isDisplayed: React.PropTypes.bool.isRequired,
83 | gasCost: React.PropTypes.number.isRequired,
84 | currentBlock: React.PropTypes.number.isRequired,
85 | onCloseModal: React.PropTypes.func.isRequired,
86 | onHandleProjectCreate: React.PropTypes.func.isRequired,
87 | }
88 |
89 | export default CreateProjectModal;
--------------------------------------------------------------------------------
/src/containers/homeContainer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {connect} from 'react-redux';
3 | import { Container, Header, Divider, Button, Message } from 'semantic-ui-react';
4 | import { push } from 'react-router-redux';
5 |
6 | import CreateProjectModal from '../components/createProjectModal';
7 | import ProjectList from '../components/projectList';
8 | import {createProject, fetchProjects} from '../actions/fundingHubActions';
9 |
10 |
11 | var _this;
12 |
13 | class HomeContainer extends Component {
14 |
15 | constructor(props) {
16 | super(props);
17 | _this = this;
18 |
19 | this.state = {
20 | showCreateProjectModal: false
21 | }
22 | }
23 |
24 | componentDidMount() {
25 | const {dispatch} = _this.props;
26 | dispatch(fetchProjects());
27 | }
28 |
29 | toggleModalDisplayed() {
30 | _this.setState({
31 | showCreateProjectModal: !_this.state.showCreateProjectModal
32 | });
33 | }
34 |
35 | handleCreateProjectClicked() {
36 | _this.toggleModalDisplayed();
37 | }
38 |
39 | handleCreateProject(project) {
40 | const {dispatch, user} = _this.props;
41 |
42 | _this.toggleModalDisplayed();
43 |
44 | let selectedUserAddress = user.accounts[user.selectedAccount].address;
45 |
46 | if (!!selectedUserAddress) {
47 | dispatch(createProject(project, selectedUserAddress))
48 | .then(() => {
49 | dispatch(fetchProjects());
50 | });
51 | }
52 | }
53 |
54 | handleProjectClicked(projectAddress) {
55 | const { dispatch } = _this.props;
56 | dispatch(push(`/project/${projectAddress}`));
57 | }
58 |
59 | getProjectsMessage(fundingHub) {
60 | if (fundingHub.fetchComplete && fundingHub.projects.length === 0) {
61 | return (
62 | Start a crowdfunding project by clicking the button above
65 |Crowdfund Dapp is a decentralized crowdfunding platform built on Ethereum. This site is intended to demonstrate a full featured dapp using the latest Ethereum and web development frameworks including Webpack, React, Redux, Semantic-ui, Solidity, Web3, and Truffle. Feel free to create projects and interact with it. All source code is available here and is based off truffle-box
77 | 82 |