Wallet connect v2 adapter, opening modal without clicking

Help - Plug n Play Web - Modal SDK
1

So the issue is when i use web3auth.connect it opens web3auth modal, then if i click on external wallet option, it shows me a button for metamask for a second, then it shows me loading, and i can see walletconnect modal open behind the web3auth modal as seen in the screenshot i provided.

Below is the walletconnect v2 adapter configuration, i am using the example code from docs.

const walletConnectModal = new WalletConnectModal({ projectId: walletConnectProjectId });
const walletConnectV2Adapter = new WalletConnectV2Adapter({
    clientId,
    web3AuthNetwork: "cyan",
    adapterSettings: {
        qrcodeModal: walletConnectModal,
        ...defaultWcSettings.adapterSettings,
    },
    loginSettings: { ...defaultWcSettings.loginSettings },
});
web3AuthInstance.configureAdapter(walletConnectV2Adapter);
web3AuthInstance.configureAdapter(openloginAdapter);
web3AuthInstance.configureAdapter(metamaskAdapter);
2

hi @abdulrafay

I hope you are doing great.

Can you try to instantiate your WalletConnectModal in this way?

   const defaultWcSettings = await getWalletConnectV2Settings("eip155", ["1"], walletConnectProjectId);
         const walletConnectV2Adapter = new WalletConnectV2Adapter({
           ...(web3AuthOptions as BaseAdapterSettings),
           adapterSettings: { ...defaultWcSettings.adapterSettings },
           loginSettings: { ...defaultWcSettings.loginSettings },
         });
         web3auth.configureAdapter(walletConnectV2Adapter);

please check our example: web3auth-pnp-examples/web-modal-sdk/blockchain-connection-examples/evm-modal-example at main · Web3Auth/web3auth-pnp-examples · GitHub

Also the online example: https://evm-modal.vercel.app/

Please contact me if the problem persists !

3

I removed wallet connect modal from adapter settings, and it worked.
The change looks like this


// const walletConnectModal = new WalletConnectModal({ projectId: walletConnectProjectId });
const walletConnectV2Adapter = new WalletConnectV2Adapter({
    clientId,
    web3AuthNetwork: "cyan",
    adapterSettings: {
        // qrcodeModal: walletConnectModal,
        ...defaultWcSettings.adapterSettings,
    },
    loginSettings: { ...defaultWcSettings.loginSettings },
});
web3AuthInstance.configureAdapter(walletConnectV2Adapter);
web3AuthInstance.configureAdapter(openloginAdapter);
web3AuthInstance.configureAdapter(metamaskAdapter);
4

@TomTom I have another question,
I have hardcoded defaultWcSettings, it was being fetched using async function, i will have to modify my logic to use async function so i hardcoded the response. Will it be problematic?

const defaultWcSettings = {
    adapterSettings: {
        walletConnectInitOptions: {
            projectId: "xxxxxxx", // project id
            relayUrl: "wss://relay.walletconnect.com",
            metadata: {
                name: "Name which i got from api",
                description: "Description which i got from api",
                url: "http://localhost:3000", // url i will change it to proc
                icons: ["http://localhost:3000/favicon.ico"], //// url i will change it to proc
            },
        },
    },
    loginSettings: {
        optionalNamespaces: {
            eip155: {
                methods: ["eth_sendTransaction", "eth_sign", "personal_sign", "eth_signTypedData"],
                chains: ["eip155:270689"],
                events: ["chainChanged", "accountsChanged"],
            },
        },
    },
};
5

hi @abdulrafay

The problem would be when you change the server.

You can copy the example I sent you and overwrite the ones you want to modify, but I would try not to hardcode that in production.

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.