The sample project https://trufflesuite.com/guides/pet-shop/ makes a great job, however, there are still several points could be improved. e.g. small app.js, typescript, etc.
I rewrite the sample for me and others who like to try the development of dapp. This app shows out the following features:
- connect to blockchain
- maintain a smart contract
- interact with smart contract
Note: Please follow the guides of https://trufflesuite.com/guides/pet-shop/ to setup Ganache and MetaMask firstly before you running this project.
Note: It assumes you have the basic knowledge of web app development, and have NodeJS/PNPM/Makefile(optional) installed.
pnpm i # install depends packages
pnpm dev # start the dev server
Please make sure the contract address
and the provider are configured property in .env
file like below:
VITE_PROVIDER_URL=http://127.0.0.1:7545
VITE_CONTRACT_ADDR=0xaa54911eab841B73c6580631a0bD38FAD79e9b14
ps: replace the url and address with yours.
deploy
(migrate
actually, but for me, a web app developer, deploy
make more sense to understand) contracts.
make deploy_contracts
After deploy
contracts, you can get the contract address
from src/contract-address.json
.
"networks": {
"5777": {
"events": {},
"links": {},
"address": "0xaa54911eab841B73c6580631a0bD38FAD79e9b14",
"transactionHash": "0x665ffe12a03fc8c9318158f25eb81ff7412fec6af8377b5af9c2e14d1aed54a4"
}
},
And the console output.
Deploying 'Adoption'
--------------------
> transaction hash: 0x665ffe12a03fc8c9318158f25eb81ff7412fec6af8377b5af9c2e14d1aed54a4
- Blocks: 0 Seconds: 0
> Blocks: 0 Seconds: 0
> contract address: 0xaa54911eab841B73c6580631a0bD38FAD79e9b14
Generate Type
. Read more on Infer Contract Types from JSON Artifact.
make gen-contract-types
The generated types
MIT