/harmony-dapp-template

๐Ÿงฐ All-in-one forkable Harmony dev stack to build your dapp

Primary LanguageTypeScriptMIT LicenseMIT

header

example workflow

๐Ÿงฐ Harmony Dapp Template

All-in-one forkable dev stack to build your dapp in Harmony ๐Ÿš€

๐Ÿงช Play with contracts and frontend to see how Harmony One works:

image

๐Ÿšจ How to start use Harmony-dapp-template to create your project on harmony

Video tutorial with generator โš™๏ธ NEW -> Youtube

Video tutorial manual -> Youtube

๐Ÿšด Quick Start

Prerequisites

NOTE: Tested on Ubuntu 20.04.2 LTS


Clone/fork ๐Ÿงฐ Harmony Dapp Template:

git clone https://github.com/jotagep/harmony-dapp-template

or

Use our harmony dapp generator โš™๏ธ NEW:

# Install yo and our generator globally
npm install -g yo
npm install -g generator-harmony-dapp

# Create a folder & use harmony dapp generator
mkdir harmony-dapp-template
cd harmony-dapp-template
yo harmony-dapp

Check generator's full documentation


Once you have repository downloaded, you can follow Auto init or Manual init tutorial

Auto init

This script build & start docker harmony localnet and deploy your contract with Hot reloading, all-in-one command ๐Ÿ“ก.

cd harmony-dapp-template
yarn autoinit

Manual init

Install dependencies and build & start your โ›“๏ธ Harmony Localnet Node:

cd harmony-dapp-template
yarn install
yarn localnet:build
yarn localnet:start

Open a second terminal window, ๐Ÿ›ฐ deploy your contract:

cd harmony-dapp-template
yarn deploy
# Localnet by default
# But you can deploy in another network: yarn deploy:testnet // yarn deploy:mainnet

or if you want to have Hot Reloading to deploy your contracts on live:

cd harmony-dapp-template
yarn deploy:watch

Finally

Open another terminal window, start your ๐Ÿ“ฑ frontend:

cd harmony-dapp-template
yarn start
# Start your frontend in localhost:3000

๐Ÿ” Edit your smart contract Donation.sol in packages/hardhat/contracts

๐Ÿ“ Edit your frontend App.jsx in packages/frontend/src

๐Ÿ’ผ Edit your deployment scripts in packages/hardhat/deploy

๐Ÿ“ฑ Open http://localhost:3000 to see the app


Start to play with your dapp ๐Ÿฅณ !!

To get 100 ONEs in your wallet on localnet

cd harmony-dapp-template
yarn fund 'YOUR_WALLET_ADDRESS'
# Example yarn fund one1hru2uxps5z76atvc666v4yqp8r3894wh9uf7qn

Now you have all you need to interact with example dapp, but that's not all. We decide to add more tasks to Hardhat to simplify your life.

cd harmony-dapp-template
yarn hardhat [GLOBAL_OPTION] [AVALIABLE_TASK]
# Example: yarn hardhat clean

screenshot

To see this info in your terminal:

yarn hardhat --help

๐Ÿ”› Deploy in another network

When you want to deploy your contracts in another network: Testnet or Mainnet. You should create .env file based on .example.env and set your private keys.

env

โ›ต Ship it!

Once you have your project done, you can deployed to live

cd harmony-dapp-template
yarn surge
# By default your frontend is build on localnet network
# You can deploy testnet or mainnet
# Example: yarn surge:testnet

๐Ÿ“š Extra Documentation


Checklist for Gitcoin Bountie

  • UI/UX React boilerplate code for DApp
    • Simple UI with Home Page
    • Connection to as many popular wallets as possible
      • OneWallet
      • Mathwallet
    • Simple interaction with demo contract
    • Tests for UI/UX application
  • Smart contract:
    • Something simple but more than Hello World so that it can interact with UX/UI
    • Tests
  • Development environment (CLI):
    • CLI command to create sandbox env for both contract (Ganache) and UX/UI (React) so that it can run on localhost.
    • CLI command to deploy contract to testnet/mainnet.
    • CLI command to run tests for both contract and UX/UI.
  • README:
    • Installation guide (any dependencies etc.)
    • Basic usage on how to run and interact with template.
    • Document CLI.
    • Provide extra resources and "kickstart" documentation links for developers.
    • Document how to deploy React application (simplified).
  • Nice-to-have
    • Would be nice to use tool like cookiecutter to make template customizable with Author, App Name, Software Versions, Tags, Logos and other things that might be non-static. *UPDATED
    • Include CI workflow (probably easiest to use git workflow) to run test on push.

โฑ๏ธ Coming soon...

  • Demo Video explanation on how to use the monorepo - DONE โœ…
  • Support Metamask wallet - DONE โœ…
  • Template generator using Yeoman - DONE โœ…
  • Support more wallets...

๐Ÿ™ Inspired by scaffold-eth - Austin Griffith genius ๐Ÿงž