simple dApp

[huseyindeniz]

dApp CRA template doesn't yet have documentation, so on this rainy Sunday, I decided to make a simple dApp, a kind of Hello World app for Web3, using my CRA template.

After a few hours, it looks like this:

full code here

[clemrider]

Hi,
I'm trying your dapp, but it is not starting well because instructions about ganache are not clear. It seems ganache require a truffle project ... I cannot just open a folder and start ganache, I miss something.

But it starts and works well. I think we can do something together.

For a simple dApp, there is a lot of features ! I'd like to know how to add as Home page, a new page, which can be used for the game I dev, with data from my contract

[huseyindeniz]

hi, actually ganache doesn't require truffle project. You can create an ethereum workspace without truffle project. And when this workspace created and started you can deploy contract into this network. You need to follow these steps but please let me know if any step is not clear or not working as expected. Step 5 is very important.

1. Download Ganache
2. Start Ganache, create a new ethereum workspace, start it and leave it as open
3. Open the blokchain folder with VSCode
4. Open terminal
5. Run npm i first then run npx hardhat run scripts/deploy.ts --network ganache
6. You will see the address of the HelloWorld contract on the console log. Copy it.
7. Open the frontend folder with VSCode
8. Open the file src/features/helloWorld/chains/ganache.ts
9. Paste the contract address you copied before into the contract address variable and save it.
10. Run npm i and then run npm start, it will open the simple-dapp in your browser
11. Open Metamask and import any acccount from Ganache
12. Click the Connect button in the simple-dapp application

[huseyindeniz]

additionally you might find these documentation pages useful:
https://trufflesuite.com/docs/ganache/quickstart/
https://trufflesuite.com/docs/ganache/concepts/ethereum-workspace/overview/

[huseyindeniz]

Oh I forgot the most important argument in step 5. Step 5 should be:

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