如何使web3Modal dapp与coinbase浏览器兼容？

Question

我已经使我的dapp与web3Modal兼容。dapp使用的是简单的Html/css/js。它在元问询桌面、元问询移动和钱包连接上运行良好，但是当我尝试在内置浏览器中从coinbase钱包中浏览它时，它就不起作用了。

下面是我所遵循的web3Modal示例：https://github.com/Web3Modal/web3modal-vanilla-js-example

以下是我的web3Modal设置(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();
}

下面是我在html中加载的一些包：

有人能帮忙修改/添加哪些内容，使其与coinbase钱包浏览器注入的web3兼容吗？

Answer 1

在提供程序选项中，您没有为coinbase指定提供程序。您可以使用WalletLink连接使用Coinbase钱包。

您必须在we3bmodal提供程序选项中添加自定义提供程序，如下所示

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
});

我从这个Git问题上得到了参考