[Ethereum] How to make web3Modal dapp compatible to coinbase browser

coinbaseethereum-wallet-dappwalletsweb3-providersweb3js

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?

Best Answer

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

Related Solutions

[Ethereum] Metamask accepting Promises/getting HTML to wait

The async/await patern works with JavaScript Promises.

In order to make web3.js functions asynchronous, you need to pass a callback parameter:

As this API is designed to work with a local RPC node, all its functions use synchronous HTTP requests by default.

If you want to make an asynchronous request, you can pass an optional callback as the last parameter to most functions. All callbacks are using an error first callback style:
web3.eth.getBlock(48, function(error, result){
    if(!error)
        console.log(JSON.stringify(result));
    else
        console.error(error);
})

If you want to then make this work with the async/await pattern, you will need to then wrap this asynchronous function into a promise, which is of the format:

new Promise( /* executor */ function(resolve, reject) { ... } );

Rather than do this over an over for each web3.js function, you can automate this process by creating a wrapper for javascript functions which includes the callback parameter and wraps it in a promise as so:

const promisify = (inner) =>
    new Promise((resolve, reject) =>
        inner((err, res) => {
            if (err) {
                reject(err);
            } else {
                resolve(res);
            }
        })
    );

This can then be used really simply with nearly all existing web3.js functions:

async function getBalance() {
    var address, wei, balance
    address = document.getElementById("address").value;
    wei = promisify(cb => web3.eth.getBalance(address, cb)) // simply wrap web3.js functions with the promisify function, also passing in a callback parameter
    try {
        balance = web3.fromWei(await wei, 'ether')
        document.getElementById("output").innerHTML = balance + " ETH";
    } catch (error) {
        document.getElementById("output").innerHTML = error;
    }
}

All of this information can be found on my blog where you can also find other small projects I have done which use this pattern.

[Ethereum] Module parse failed: Cannot use keyword ‘await’ outside an async function

The actual issue here is that you are using the await at the top level of the JS, you would avoid the issue by doing something like this (but it's worth noting that you are probably going to run into other issues after this - since there's nothing really being done with that web3 variable):

import React from 'react';
import { ChainId, DAppProvider } from "@usedapp/core";
import { Box, Button, Container } from "@material-ui/core";
import Web3 from "web3";
import Web3Modal from "web3modal";
import WalletConnectProvider from "@walletconnect/web3-provider";

const providerOptions = {
  walletconnect: {
    package: WalletConnectProvider, // required
    options: {
      infuraId: process.env.REACT_APP_INFURA_ID // required
    }
  }
};

const web3Modal = new Web3Modal({
  network: "rinkeby", // optional
  cacheProvider: true, // optional
  providerOptions // required
});

function App() {

  const connectWallet = async () => {
    const provider = await web3Modal.connect();
    const web3 = new Web3(provider);
  }

  return (
    <DAppProvider config={{
      supportedChains: [ChainId.Rinkeby],
      notifications: {
        expirationPeriod: 1000,
        checkInterval: 1000
      }
    }}>
      <Container maxWidth="md">
        <Box>
          <Button onClick={() => connectWallet()} variant="contained" color="primary">Connect</Button>
        </Box>
      </Container>
    </DAppProvider>
  )
}

export default App

Best Answer

Related Solutions

[Ethereum] Metamask accepting Promises/getting HTML to wait

[Ethereum] Module parse failed: Cannot use keyword ‘await’ outside an async function

Related Topic