web3 - metamask api study(1)

I'm trying to implement the feature that recognizes metamask wallet, and ultimately connects with the application so that the user can simply sign up or login with metamask login. Just like how opensea sign up / login works.

• metamask api: https://docs.metamask.io/guide/getting-started.html#basic-considerations, https://docs.metamask.io/guide/ethereum-provider.html#table-of-contents

1. Original Code

I was following this code in the README.md of MetaMask/detect-provider

Initially, I'm working on HTML/Javascript mode (not nodejs yet) to test simple functions first. And the repo README's sample HTML code was giving an error.

2. error

await is only valid in async functions and the top level bodies of modules 

3. Solution

Fix - Await is only valid in async function Error in NodeJS

As it explained in the blog, the error occurred because it was using top level await without setting. It required to change type= module in package.json or script tag.

So the HTML code in the README.md should be like below

<script src="https://unpkg.com/@metamask/detect-provider/dist/detect-provider.min.js"></script>
<script type="module">
  const provider = await detectEthereumProvider()

  if (provider) {
    // handle provider
  } else {
    // handle no provider
  }
</script>