Hook to check if Metamask is installed.

[phillipnunes]

I'm using wagmi version 2.5.5 and didn't find a hook or a way to use the library to verify if Metamask wallet is installed in the browser (if possible also on mobile). Is that possible? If not, I guess it's a nice feature to have

[eliezerbasubi]

To achieve this, rely on the window.ethereum object to access the injected wallet flag. Add window.ethereum.isMetaMask to check if MetaMask is installed on the browser.
Note that you may need to chain window.ethereum with the optional operator, as the ethereum object will be undefined if no wallet is installed.

Here's an enhanced snippet that transforms this concept into a hook for detecting whether a wallet is installed:

import { useEffect, useState } from 'react';

// Customize the list with the wallets you want to support
const WALLETS: Record<string, { flag: string }> = {
  metamask: {
    flag: 'isMetaMask',
  },
  trustWallet: {
    flag: 'isTrust',
  },
};

const useIsWalletInstalled = ({ wallet, flag }: { wallet?: string; flag?: string }) => {
  const [isInstalled, setIsInstalled] = useState(false);

  useEffect(() => {
    if (typeof window === 'undefined' || typeof window.ethereum === 'undefined') {
      return;
    }

    if (flag) {
      setIsInstalled(window.ethereum[flag]);
      return;
    }

    if (wallet && WALLETS[wallet]) {
      const { flag: walletFlag } = WALLETS[wallet];
      setIsInstalled(window.ethereum[walletFlag]);
    }
  }, [wallet, flag]);

  return isInstalled;
};

export default useIsWalletInstalled;

Now you can use it as follows:

const isInstalled = useIsWalletInstalled({ wallet: 'metamask' });

Or

const isInstalled = useIsWalletInstalled({ flag: 'isMetaMask' });

Feel free to modify and enhance this code to suit your specific requirements.

[phillipnunes]

@eliezerbasubi Thanks for your code, it's similar to the solution I implemented.
I was wondering if it is worth to have this hook included, out of the box, in this library.