Create a new dapp tutorial

[vandan]

@alexandratran commented on Tue Jan 10 2023

The legacy simple dapp tutorial is incomplete and based on sample project files that seem unmaintained. I walked through this tutorial and ran into various issues. The tutorial only covers connecting to MetaMask + getting accounts, and I was unsuccessful at both tasks using these instructions.

I also followed a series of dapp tutorials on YouTube (first tutorial here) walking through how to perform several different tasks, and these worked great.

This issue is to replace the legacy dapp tutorial with a working tutorial that enables users to integrate a dapp with MetaMask to perform meaningful tasks. Note that I recently added a simple get started guide in the docs (see #28), so the dapp tutorial would need to extend upon this or perform additional functions.

---

@httpJunkie commented on Sat Apr 01 2023

I want to create a tutorial using React that goes beyond the basics of getting started.

The steps in this tutorial would be to clone an existing React repo that is a basic starting point so that they don't have to set up React.

Build a basic connect button. Show the connected account's address & balance

Then implement MetaMask SDK to ensure that the user can connect to MetaMask Extension or Mobile

Finally, we would add the required steps to keep the dApp in sync with the wallet's state using:

• local storage
• useMetaMaskState Hooks + Reducer
• useMetaMaskListen Hook
• useSwitchChain hook
• SwitchChain Button

Once they have completed the tutorial, they will have a working React application that implements the wallet that has changed and that the corresponding React components instantly reflect those new changes. We can switch them to it if they are not on the correct chain.

The tutorial could be in several steps, each going further into what you need to know to start building a real-world application.

1. If they finish the first section, they will know how to connect using the MetaMask API.
2. If they complete the second section, they will know how to instantiate the MetaMask SDK.
3. If they complete a third section, they will know how to switch the user's chain programmatically.
4. If they complete the fourth section, they will know one best practice for managing their wallet state utilizing React Hooks and Context API + Reducers and keeping their application in Sync with the MetaMask wallet state.

Of course, as I start to build this out, the steps could play out slightly differently. But this is my initial proposal. Building up their knowledge in steps.

---

@httpJunkie commented on Wed Apr 12 2023

State of the Tutorial: https://github.com/MetaMask/metamask-docs/blob/4-dapp-tutorial/wallet/tutorials/dapp-tutorial.md

[httpJunkie]

FYI: This issue will remain open until we have merged Part 2 of the tutorial.

[alexandratran]

Fixed by #747.