Detecting the Provider

To detect if a user has already installed Phantom, a web application should check for the existence of an ethereum object. Phantom's browser extension and mobile in-app browser will both inject an ethereum object into the window of any web application the user visits, provided that site is using https://, on localhost, or is 127.0.0.1. Phantom will not inject the provider into iframes or sites using http://.
If the ethereum object exists, Ethereum dapps can interact with Phantom via the API found at window.ethereum. This object is also made available at window.phantom to prevent namespace collisions. 
The code examples we will show use window.phantom as that is the most reliable way to work with Phantom. By interacting with window.phantom, you ensure that you don't accidentally call any other software that may be injecting into your browser.
If you are set on using the window.ethereum API (the window.phantom.ethereum object is identical), you will need to check that Phantom is installed and injecting this ethereum object in your browser. To detect if Phantom is installed, an application should check for an additional isPhantom flag.
const isPhantomInstalled = window?.ethereum?.isPhantom
If Phantom is not installed, we recommend you redirect your users to our website. Altogether, this may look like the following.
window.phantom
window.ethereum
const getProvider = () => {
  if ('phantom' in window) {
    const anyWindow: any = window;
    const provider = anyWindow.phantom?.ethereum;
   
    if (provider) {
      return provider;
    }
  }
​
  window.open('https://phantom.app/', '_blank');
};
const getProvider = () => {
  if ('ethereum' in window) {
    const anyWindow: any = window;
    const provider = anyWindow.ethereum;
   
    if (provider?.isPhantom) {
      return provider;
    }
  }
​
  window.open('https://phantom.app/', '_blank');
};
For an example of how a React application can detect Phantom, please refer to the getProvider function in our sandbox. 
Last modified 1mo ago