Using MetaData option for WalletConnectConnector with web3modal and w3mConnectors

[smartydev42]

Hey there,

I've tried to find the answer to this issue and i havent been able to.

I'm setting up walletconnect and web3modal within a wagmi nextJS project. So far so good, i have it all hooked up. When I connect using the web3modal setup defined in the docs my Trust Wallet uses the title of the webpage and no image to say 'this project wants to connect'. I want to define this to be something more specific and also provide an image.

Using: w3mConnectors to create the wagmiconfig doesnt have an option for metadata, but if i use WalletConnectConnector i can. But i cant see a way to use WalletConnectConnector with the web3modal setup. So i'm stuck, or confused.

Here is some code

> wagmi config
export const walletConnectConnector = new WalletConnectConnector({
  chains,
  options: {
    projectId: walletConnectProjectId,
    metadata: {
      name: 'DappName',
      description: 'Super cool reason to use this dapp',
      url: 'https://wbsite.to.use',
      icons: [
        'https://host.website.net/_next/image?url=%2Fimages%2Fsite-logo.jpg&w=640&q=75',
      ],
    },
  },
});

export const config = createConfig({
  autoConnect: true,
  connectors: [walletConnectConnector], // { ...w3mConnectors({ projectId: walletConnectProjectId, chains }) },
  publicClient,
  webSocketPublicClient,
});

> in _app.js
<Web3Modal
        projectId={walletConnectProjectId}
        ethereumClient={ethereumClient}
        explorerRecommendedWalletIds={[
          'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
          '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
          '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0',
        ]}
      />

> Usage
a custom button defined here: https://wagmi.sh/examples/connect-wallet

^^ this sort of works it allows me to define the title and image, BUT the modal is weird, it doesnt have metamask or trust, even though i defined it.

If i replace my custom button with and also replace

export const config = createConfig({
  autoConnect: true,
  connectors: { ...w3mConnectors({ projectId: walletConnectProjectId, chains }) },
  publicClient,
  webSocketPublicClient,
});

if i do the above, i get the correct wallets in the modal, BUT i dont get the custom title, image and description. I get the websites title and no image. This isnt great as the title of the page is very SEO friendly, which is not short and snappy for the wallet.

I've attached an image of what i see in the web3modal using my custom solution.