npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@metamask/detect-provider

v2.0.0

Published

A tiny utility for detecting the MetaMask Ethereum provider, or any EIP 1193-compliant provider.

Downloads

204,162

Readme

@metamask/detect-provider

A tiny utility for detecting the MetaMask Ethereum provider, or any provider injected at window.ethereum.

It has 0 dependencies and works out of the box in any modern browser, for synchronously and asynchronously injected providers.

Usage

Keep in mind that the providers detected by this package may or may not support the Ethereum JavaScript Provider API. Please consult the MetaMask documentation to learn how to use our provider.

Node.js

import detectEthereumProvider from '@metamask/detect-provider'

const provider = await detectEthereumProvider()

if (provider) {

  console.log('Ethereum successfully detected!')

  // From now on, this should always be true:
  // provider === window.ethereum

  // Access the decentralized web!

  // Legacy providers may only have ethereum.sendAsync
  const chainId = await provider.request({
    method: 'eth_chainId'
  })
} else {

  // if the provider is not detected, detectEthereumProvider resolves to null
  console.error('Please install MetaMask!', error)
}

HTML

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

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

Options

The exported function takes an optional options object. If invalid options are provided, an error will be thrown. All options have default values.

options.mustBeMetaMask

Type: boolean

Default: false

Whether window.ethereum.isMetaMask === true is required for the returned Promise to resolve.

options.silent

Type: boolean

Default: false

Whether error messages should be logged to the console. Does not affect errors thrown due to invalid options.

options.timeout

Type: number

Default: 3000

How many milliseconds to wait for asynchronously injected providers.

Advanced Topics

Synchronous and Asynchronous Injection

Providers can be either synchronously or asynchronously injected:

  • Synchronously injected providers will be available by the time website code starts executing.
  • Asynchronously injected providers may not become available until later in the page lifecycle.

The MetaMask extension provider is synchronously injected, while the MetaMask mobile provider is asynchronously injected.

To notify sites of asynchronous injection, MetaMask dispatches the ethereum#initialized event on window immediately after the provider has been set as window.ethereum. This package relies on that event to detect asynchronous injection.

Overwriting or Modifying window.ethereum

The detected provider object returned by this package will strictly equal (===) window.ethereum for the entire page lifecycle, unless window.ethereum is overwritten. In general, consumers should never overwrite window.ethereum or attempt to modify the provider object.

If, as a dapp developer, you notice that the provider returned by this package does not strictly equal window.ethereum, something is wrong. This may happen, for example, if the user has multiple wallets installed. After confirming that your code and dependencies are not modifying or overwriting window.ethereum, you should ask the user to ensure that they only have a single provider-injecting wallet enabled at any one time.