Integrating with Web3-Onboard - Coinbase wallet not Connecting

Coinbase Wallet
1

Currently I want to connect my nextjs 13 app with multiple wallets like metamask, coinbase, etc.
I’m able to connect walletconnect and metamask, but its not connecting my coinbase wallet.
Its showing this -

Screenshot 2023-09-10 013834
Screenshot 2023-09-10 0138341036×633 42.5 KB

here’s my code -

import coinbaseWalletModule from "@web3-onboard/coinbase"
import walletConnectModule from "@web3-onboard/walletconnect"
import injectedModule from "@web3-onboard/injected-wallets"
import Onboard from "@web3-onboard/core"

const wcV2InitOptions = {
  /**
   * Project ID associated with [WalletConnect account](https://cloud.walletconnect.com)
   */
  projectId: 'myprojectId',
  /**
   * Chains required to be supported by all wallets connecting to your DApp
   */
  requiredChains: [1, 56],
  /**
   * Defaults to `appMetadata.explore` that is supplied to the web3-onboard init
   * Strongly recommended to provide atleast one URL as it is required by some wallets (i.e. MetaMask)
   * To connect with WalletConnect
   */
  dappUrl: 'http://YourAwesomeDapp.com'
}


const coinbaseWalletSdk = coinbaseWalletModule(); 
const walletConnect = walletConnectModule(wcV2InitOptions);
const injected = injectedModule();

const modules = [coinbaseWalletSdk, walletConnect, injected];
const MAINNET_RPC_URL = `https://mainnet.infura.io/v3/myapikey`;
// const ROPSTEN_RPC_URL = `https://ropsten.infura.io/v3/`;
// const RINKEBY_RPC_URL = `https://rinkeby.infura.io/v3/`;

export const onboard = Onboard({
  wallets: modules, // created in previous step
  chains: [
    {
      id: "0x1", // chain ID must be in hexadecimel
      token: "ETH",
      namespace: "evm",
      label: "Ethereum Mainnet",
      rpcUrl: MAINNET_RPC_URL
    },
    // {
    //   id: "0x3",
    //   token: "tROP",
    //   namespace: "evm",
    //   label: "Ethereum Ropsten Testnet",
    //   rpcUrl: ROPSTEN_RPC_URL
    // },
    // {
    //   id: "0x4",
    //   token: "rETH",
    //   namespace: "evm",
    //   label: "Ethereum Rinkeby Testnet",
    //   rpcUrl: RINKEBY_RPC_URL
    // }  
    // {
    //   id: "0x5",
    //   token: "rPOL",
    //   namespace: "evm",
    //   label: "Polygon mumbai testnet",
    //   rpcUrl: RINKEBY_RPC_URL 
    // }
  ],
  appMetadata: {
    name: "My App",
    icon: "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
    logo: "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
    description: "My app using Onboard",
    recommendedInjectedWallets: [
      { name: "Coinbase", url: "https://wallet.coinbase.com/" },
      { name: "MetaMask", url: "https://metamask.io" }
    ]
  }
});

const connectWallet = async () => {
    try {
      const wallets = await onboard.connectWallet();
      console.log(wallets)
    } catch (error) {
      console.error(error);
    }
  };

 <BrandButton name="Connect" height={40} image={coinbase} size={20} onClick={connectWallet}/>
2

Hello utkarshuh, I have the same problem using wagmi and web3, did you find any way to solve it?