0

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?

1 Answer 1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.