How to generate a wallet connect uri

[hernan-clich]

I'm building a custom connection UI and would like to understand how I can get the Wallet Connect QR codes to prompt users to connect with uninstalled wallets.

I would like to replicate pretty much this:

I'm having some issues generating the wallet connect uri, I peeked at the library code and saw this function:

  const getWalletConnectUri = async (
    connector: Connector,
    uriConverter: (uri: string) => string,
  ): Promise<string> => {
    const provider = await connector.getProvider();

    if (connector.id === 'coinbase') {
      // @ts-expect-error
      return provider.qrUrl;
    }

    return new Promise<string>((resolve) =>
      // Wagmi v2 doesn't have a return type for provider yet
      // @ts-expect-error
      provider.once('display_uri', (uri) => {
        resolve(uriConverter(uri));
      }),
    );
  };

So I tried calling it by doing something like this:

const walletConnectUri = await getWalletConnectUri(connector, connector?.rkDetails?.qrCode?.getUri);

But pretty much nothing happens (I tried this with Bitget wallet but it's pretty much the same with all of them), I literally copied and pasted the function to try this out so I added a console.log just before the function return to see what could be going on.

Here's the output:

At that point I'm fairly confident that I'm pushing these events into the provider but I don't seem to be "consuming" them.
How should I go about doing that? I'm open for suggestions and trying different approaches, maybe there's an obscure util the library exposes for stuff like this?
It would be pretty epic if the library exposed the QRCode component present at packages/rainbowkit/src/components/QRCode/QRCode.tsx.

Thanks in advance!

[magiziz]

@hernan-clich This can be a bit tricky, but it's possible.

First add walletConnect connector to your createConfig like this:

import { createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { walletConnect } from 'wagmi/connectors';

const config = createConfig({
  connectors: [
    walletConnect({
      projectId: 'YOUR_PROJECT_ID',
      showQrModal: false,
    }),
  ],
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
});

Then you can create a component that gets the WalletConnect URI (WalletConnectUri.tsx):

import { Connector, useConnect } from 'wagmi';

export function WalletConnectUri() {
  const { connect, connectors } = useConnect();

  // Get WalletConnect connector
  const walletConnectConnector = connectors.find(
    ({ id }) => id === 'walletConnect'
  );

  const listenForWalletConnectUri = async (
    walletConnectConnector: Connector
  ) => {
    const provider = await walletConnectConnector.getProvider();

    // @ts-expect-error
    provider.once('display_uri', (uri) => {
      console.log('WalletConnect URI:', uri);
    });
  };

  return (
    <button
      onClick={() => {
        if (!walletConnectConnector) {
          throw new Error('WalletConnect connector not found');
        }
        listenForWalletConnectUri(walletConnectConnector);
        connect({ connector: walletConnectConnector });
      }}
    >
      Get WalletConnect URI
    </button>
  );
}

Basically you get the WalletConnect connector from wagmi, get the provider and listen for emit message ('display_uri') and connect to the wallet.

Regarding if we can export QRCode i think that wouldn't be possible since it's used internally in RainbowKit, although you could copy the code from here and paste it into your project.

Let me know if that's helpful!

[hernan-clich]

That was it, apparently it was pretty important to call the connect function after calling provider.once, thanks!