A starter template for Ethereum dApps that uses the following tools:

• Hardhat
• Waffle
• ethers.js
• Vue & Vuex
• Web3Modal
• Bootstrap 5
• Vue Toasted
• Vue Gravatar

Web3Modal is used to support various different Ethereum wallets. When user switches between accounts and even chains, the UI quickly notices that and adapts to the change (account and ETH balance data are refreshed).

If user's wallet is not set to Mainnet, an unobtrusive yellow alert band shows up just above the navigation bar. The alert notifies the user which (testnet) chain they are currently using.

The deploy.js script automatically stores all contract ABIs and their respective addresses in the /frontend/src/contracts folder.

Addresses are separated from one another per contract name and also per chain ID.

Example (addresses.json):

{
  "Token":{
    "1337":"0x78afecb367f032d93eDf865Ada339AFf6ef2621b",
    "3":"0x5FbDB2315678afecb367f032d93F642f64180aa3",
    "1":"0xE2Df865998BD3f20117e037d1293367f032d93F6"
  },
  "Farm":{
    "1337":"0x1Cf865998BD3f20eB6BCdAda339aa8BD3f2e26eb",
    "3":"0x998BD3f20eB6Bafecb3673f201ca17e037d10aa3",
    "1":"0xBCdAda33b67815678afecb365998BD3f2e26BCdA"
  }
}

Run installations in both root and in the frontend folder:

npm install
cd frontend && npm install

cd frontend && npm run serve

npx hardhat test

npx hardhat run scripts/deploy.js --network ganache

npx hardhat run scripts/deploy.js --network goerli

npx hardhat --network mainnet etherscan-verify --api-key <apikey>