How to make web3Modal dapp compatible to coinbase browser?

Question

I have made my dapp compatible with web3Modal. The dapp is using simple Html/css/js. It is working fine with metamask desktop, metamask mobile and wallet connect but when I try to browse it from coinbase wallet in built browser it doesn't work.

Here is web3Modal example that I followed: https://github.com/Web3Modal/web3modal-vanilla-js-example

Here is my web3Modal settings (js):

function init() {

    console.log("Initializing example");
    console.log("WalletConnectProvider is", WalletConnectProvider);
    console.log("window.web3 is", window.web3, "window.ethereum is", window.ethereum);

    // Tell Web3modal what providers we have available.
    // Built-in web browser provider (only one can exist as a time)
    // like MetaMask, Brave or Opera is added automatically by Web3modal
    const providerOptions = {
        walletconnect: {
            package: WalletConnectProvider,
            options: {
                // Mikko's test key - don't copy as your mileage may vary
                infuraId: "8043bb2cf99347b1bfadfb233c5325c0",
            }
        }
    };

    web3Modal = new Web3Modal({
        cacheProvider: false, // optional
        providerOptions, // required
        disableInjectedProvider: false, // optional. For MetaMask / Brave / Opera.
    });

    console.log("Web3Modal instance is", web3Modal);
}



/**
 * Kick in the UI action after Web3modal dialog has chosen a provider
 */
async function fetchAccountData() {

    // Get a Web3 instance for the wallet
    web3 = new Web3(provider);

    console.log("Web3 instance is", web3);
    metaMask = true;

    // Get list of accounts of the connected wallet
    accounts = await web3.eth.getAccounts();

    getNetwork();
    stats();
    // METAMASK
    if (!metaMask) {
        $('#connectionModal').modal('show');
        $('#networkStatus').html('Install Metamask');
    } else {
        // success case
        $('#connectWalletModal').modal('hide');
        $('#content').slideDown();
        $('#connectWallet').removeClass('d-inline-block').addClass('d-none');
        $('#afterConnect').removeClass('d-none').addClass('d-inline-block');
        updatePageVals();
        $('#viewEtherscan').attr('href', 'https://etherscan.io/address/' + accounts[0]);
    }

    setInterval(function() {
        stats();
    }, 20000);
}



/**
 * Fetch account data for UI when
 * - User switches accounts in wallet
 * - User switches networks in wallet
 * - User connects wallet initially
 */
async function refreshAccountData() {

    await fetchAccountData(provider);
}


/**
 * Connect wallet button pressed.
 */
async function onConnect() {
    console.log("Opening a dialog", web3Modal);
    try {
        provider = await web3Modal.connect();
    } catch (e) {
        console.log("Could not get a wallet connection", e);
        return;
    }

    // Subscribe to accounts change
    provider.on("accountsChanged", (accounts) => {
        fetchAccountData();
    });

    // Subscribe to chainId change
    provider.on("chainChanged", (chainId) => {
        fetchAccountData();
    });

    // Subscribe to networkId change
    provider.on("networkChanged", (networkId) => {
        fetchAccountData();
    });

    await refreshAccountData();
}

Here are some of the bundles Im loading in html:

<script type="text/javascript" src="https://unpkg.com/web3modal@1.9.0/dist/index.js"></script>
<script type="text/javascript" src="https://unpkg.com/evm-chains/lib/index.js"></script>
<script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider@1.2.1/dist/umd/index.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/fortmatic@2.0.6/dist/fortmatic.js"></script>

Can anyone help that what needs to be changed/added to make it compatible with web3 injected by coinbase wallet's browser?

Answer 1

In provider options, you have not specified the provider for coinbase. You can use WalletLink for connection using Coinbase wallet.

You will have to add a custom provider in the we3bmodal provider Options, like this

const providerOptions = {
  walletconnect: {
    package: WalletConnectProvider,
    options: {
      infuraId: INFURA_ID
    }
  },
  'custom-coinbase': {
    display: {
      logo: 'images/coinbase.svg', 
      name: 'Coinbase',
      description: 'Scan with WalletLink to connect',
    },
    options: {
      appName: 'app', // Your app name
      networkUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`,
      chainId: CHAIN_ID,
    },
    package: WalletLink,
    connector: async (_, options) => {
      const { appName, networkUrl, chainId } = options
      const walletLink = new WalletLink({
        appName
      });
      const provider = walletLink.makeWeb3Provider(networkUrl, chainId);
      await provider.enable();
      return provider;
    },
  }
};

const web3Modal = new Web3Modal({
    network: 'ropsten',
    cacheProvider: true,
    providerOptions: providerOptions
});

I got the reference from this Git issue