"Install MetaMask"

[vporton]

Please display "Install MetaMask" link if MetaMask is missing in the browser.

[SchneiderNejc]

Please display "Install MetaMask" link if MetaMask is missing in the browser.

He,y we also needed "install metamask" option, and added the feature in a forked web3modal. You may look at that: https://github.com/blocklords/web3modal

Added a bit of documentation and screenshots of it.

Later will make a pull request, if they are agree.

[jamesmorgan]

Ye this would be so awesome to add! It confusing to users to not present the option, our dapp we often onboard them via something like Formtaitc, Portis etc and then once they realise then all want to move over to MM and have to export keys etc.

Ideally we can drive them to MM and us ethe others a fallback.

Big one up from me on this issue being addreseed 👍🏻

[argupta7]

A quick workaround is to use a CSS Trick as below...

web3Modal = new Web3Modal({
        cacheProvider: true, // optional
        disableInjectedProvider: false,
        providerOptions,
      })
      installMetamask()
      ....
      
      
    function installMetamask() {
    if (!(window.web3 || window.ethereum)) {
      if ($('#installMetaMask').length < 1)
        $('.web3modal-modal-card').prepend('<div id="installMetaMask" class="cjAFRf web3modal-provider-wrapper"><a href="https://metamask.io/" target="_blank" class="cjAFRf web3modal-provider-container"><div class="jMhaxE web3modal-provider-icon"><img src="./assets/img/metamask.svg" alt="MetaMask"></div><div class="bktcUM sc-web3modal-provider-name mt-0">Install MetaMask</div><div class="eFHlqH web3modal-provider-description">Connect using browser wallet</div></a></div>')
    }
  }

[blabno]

Another workaround:

import  { providers } from 'web3modal';
if (!window.ethereum) {
  providerOptions['custom-metamask'] = {
    display: {
      logo: providers.METAMASK.logo,
      name: 'Install MetaMask',
      description: 'Connect using browser wallet'
    },
    package: {},
    connector: async () => {
      window.open('https://metamask.io')
      throw new Error('MetaMask not installed');
    }
  }
}

[johnwwk]

Another workaround:

import  { providers } from 'web3modal';
if (!window.ethereum) {
  providerOptions['custom-metamask'] = {
    display: {
      logo: providers.METAMASK.logo,
      name: 'Install MetaMask',
      description: 'Connect using browser wallet'
    },
    package: {},
    connector: async () => {
      window.open('https://metamask.io')
      throw new Error('MetaMask not installed');
    }
  }
}

this is ingenious, thank you 👏 👏 👏

[xzilja]

With stable version 2.0.0 of Web3Modal now released, we are officially dropping support for version 1.x Due to this this issue/pr was marked for closing. It is highly recommended to upgrade as 2.x will be receiving further updates that will enable functionality for some of our newer sdks like auth and push as well as support for WalletConnect v2 (See this post about WalletConnect v1 being deprecated https://medium.com/walletconnect/walletconnect-v1-0-sunset-notice-and-migration-schedule-8af9d3720d2e)

If you need to continue using Web3Modal 1.x and require this feature/fix implemented, we suggest adding it via forking V1 branch.