Skip to content

harmony-one/dapp-demo-crowdfunding

Repository files navigation

Crowdfunding dapp example

Video Demo:

Demo

Public website connected to Harmony testnet can be found here.

Note that MathWallet is needed to load the page.

Get some testnet token with this faucet.

Run the crowdfunding dApp from scratch

Be in the root of this repo

  1. Install Truffle:
npm install -g truffle
  1. Install dependencies:
npm install
  1. Setup deploy environment:
bash ./scripts/setup.sh
  1. Truffle compile:
truffle compile
  1. Deploy:
bash ./scripts/deploy.sh
  1. Start Local server:
npm run serve
  1. Profit.

Exploration

Curious on how the deployment works? Here is the high level:

  • We use truffle to develop and iterate on our smart contract(s).
  • We set the contract deployment information in a .env file using the ./scripts/setup.sh script.
  • The environment variables are used in config.js and truffle-config.js for deployment of contracts (user facing code will not see or use the environment variable)
  • The contract deployment generates build and deploy files that are needed for the dapp to interface with.
  • On contract deployment, a script is ran (./scripts/deploy_check.js) to conduct a sanity check and start a test project.
  • Once the contracts are deployed, npm run serve will build our dapp with the correct configs to talk to our contracts.

Curious on how a user can interface with a dapp running on harmony? Here is a high level:

  • In this project, we use the Harmony extension found in the JS SDK (mathwallet).
  • Code to fetch an instance of the 2 smart contracts can be found in ./contracts/project.js & ./contracts/crowdfunding.js.
  • Code to instantiate a harmony extension object (for signing transactions and talking to smart contracts) can be found in ./src/extension.js
  • Functions for loading crowdfunding projects (fetching project info from contract) can be found in ./src/App.vue
  • Functions for creating a project (creating a project contract using the user's wallet) can be found in ./src/components/NewProjectForm.vue
  • Functions for funding a crowdfunding project can be found in ./src/components/ProjectCard.vue

Extra

Some more information on smart contract development can be found here.