Algorand WalletConnect connection not showing metadata on Pera Wallet

Question

I'm trying to get a working connection between a NextJS application and my Algorand wallet (Pera) using WalletConnect. I am able to connect, but the NextJS application won't send any metadata like dApp name. Is there something wrong with my code?

import WalletConnect from "@walletconnect/client";
import QRCodeModal from "algorand-walletconnect-qrcode-modal";

export default function Index(props) {

    // Create a connector
    const connector = new WalletConnect({
        bridge: "https://bridge.walletconnect.org", // Required
        qrcodeModal: QRCodeModal,
        clientMeta: {
            description: "WalletConnect NodeJS Client",
            url: "https://nodejs.org/en/",
            icons: ["https://nodejs.org/static/images/logo.svg"],
            name: "WalletConnect"
        }
    });

    // Create a function to connect
    let connectWallet = () => {
        if (!connector.connected) {
            connector.createSession()
        }
        
        // ... Event subscriptions down here ...
    }

And I call the connectWallet function from a simple onClick

return (
    <div>
        {/* Add button to call connectWallet */}
        <button onClick={() => connectWallet()}>Connect Wallet</button>
    </div>
);

From what I understand, it should show the clientMeta data I send to the connector, but it just shows empty strings and no image on the Pera wallet app.

Answer 1

The WalletConnect documentation for Pera Wallet does not seem to indicate support of clientMeta unfortunately. See https://github.com/algorandfoundation/ARCs/blob/main/ARCs/arc-0025.md and https://developer.algorand.org/docs/get-details/walletconnect/

However, it should still display the right URL. You can compare what you see with https://algorand.github.io/walletconnect-example-dapp/ (that displays the URL https://algorand.github.io)

Small note: in general, you may get faster answers by posting Algorand-related questions on https://forum.algorand.org