MetaMask / metamask-docs

Developer documentation for MetaMask

https://docs.metamask.io

Apache License 2.0

647 stars 929 forks source link

Update beginner's tutorial #1276

Closed joaniefromtheblock closed 2 months ago

joaniefromtheblock commented 4 months ago

Description

Deprioritizes the current detect provider and added basic tutorial in vanilla JS without EIP-6963

Issue(s) fixed

Fixes #1202

Preview

https://docs.metamask.io/1202-tutorial/wallet/tutorials/javascript-dapp-simple/

Checklist

Complete this checklist before merging your PR:

[x] If this PR contains a major change to the documentation content, I have added an entry to the top of the "What's new?" page.
[ ] The proposed changes have been reviewed and approved by a member of the documentation team.

github-actions[bot] commented 4 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 4 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 4 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 4 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 4 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 4 months ago

Preview published: 1202-tutorial

joaniefromtheblock commented 4 months ago

@vandan PTAL

github-actions[bot] commented 4 months ago

Preview published: 1202-tutorial

httpJunkie commented 3 months ago

I think that this works and illustrates detecting and connecting to metamask in a bare bones simple dapp.

My only suggestion is to maybe ... start with Vite Vanilla JS app using:

npm create vite@latest simple-dapp -- --template vanilla

This would create the structure of the dapp for them.

Next step could be to rename the counter.js or add a detect.js file to the project and then follow the rest of the steps.

This keeps the tutorial user form having to configure webpack and utilizes ViteJS which we have been trying to leverage in our other tutorials.

This is something that if we want, I could make a change to the branch to implement. If we think it is not needed, I'm ok with the current PR.

Steps in a ViteJS would be:

npm create vite@latest simple-dapp -- --template vanilla

OUTPUT:


Scaffolding project in /Users/eric/src/github/metamask/test/simple-dapp...

Done. Now run:

cd simple-dapp npm install npm run dev


3. Add a `detect.js` file that replaces the `index.js` file in this tutorial (favoring better naming)
4. Update HTML to:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
      <!-- Display a connect button and the current account -->
      <button class="enableEthereumButton">Enable Ethereum</button>
      <h2>Account: <span class="showAccount"></span></h2>
    </div>
    <script type="module" src="/detect.js"></script>
  </body>
</html>

Javascript steps remain the same.

github-actions[bot] commented 3 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 3 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 2 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 2 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 2 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 2 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 2 months ago

Preview published: 1202-tutorial

github-actions[bot] commented 2 months ago

Preview published: 1202-tutorial

joaniefromtheblock commented 2 months ago

Made some edits, including updating the full example JS code to match the code provided in the tutorial steps. LGTM.

Thank you @alexandratran