Get URI of wallet connect through wagmi

Technical Issue Reporting
#1

How can i fetch walletconnect uri token through wagmi

My use case is this I’m trying to connect the metamask from a react ap with wagmi but on mobile it is opening the metamask in 2 steps like from the first page when i select wallet and click on connect button it opens walletConnect popup to select wallet again although in desktop its working fine and opening the metamask directly without that popup
Same way i want to implement in mobile case
Here is the code of connect wallet

const connectToWallet = async (item) => {
        const wallet = {
            7: "injected",
            8: "coinbaseWallet",
        };
        let connectWallet = connectors.find((f) => f.id === wallet[item.id]);
        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        if (isMobile && !window.ethereum) {
            connectWallet = connectors.find((f) => f.id === "walletConnect");
        }
        if (!isConnected) {
            try {
                connect({ connector: connectWallet });
                localStorage.setItem("connectedWallet", connectWallet.name);
                setIsSignIn(true);
                // Now you are connected to MetaMask
            } catch (error) {
                console.error("Error connecting to wallet:", error);
                toastError(error);
            }
        } else {
            if (connectWallet.name === storedWallet) {
                signMessage();
            } else {
                toastError("Already connected to another wallet");
            }
        }
    };

Also here is the screenshot of popup which i dont want to show

File
File1125×2436 119 KB

#2

Hi @usama.saleem17

Please have a look at the walletconneect docs if it provides and option customise this wallets modal.

If you dont want the model, then you will probably have to use the metamask sdk directly without relying on walletconnect sdk

#3

@johnversus
But the issue is I’m using wagmi library to sign from metamask that uses wallet connect under the hood.

#4

Have a look at the package.json in you have installed walletconnect.
Wagmi only calls connector from the walletconnect package. So there should be a way to customise it as well.

#5

No @johnversus i have not installed the walletConnect in package.json

as you can see here my dependencies

“dependencies”: {
“@ionic/react”: “^7.0.0”,
“@ionic/react-router”: “^7.0.0”,
“@testing-library/jest-dom”: “^5.11.9”,
“@testing-library/react”: “^13.3.0”,
“@tronweb3/tronwallet-adapters”: “^1.1.8”,
“@types/jest”: “^26.0.20”,
“@types/node”: “^12.19.15”,
“@types/react”: “^18.0.17”,
“@types/react-dom”: “^18.0.6”,
“@types/react-router”: “^5.1.11”,
“@types/react-router-dom”: “^5.1.7”,
“@web3modal/wagmi”: “^3.5.6”,
“bs58”: “^5.0.0”,
“firebase”: “^10.5.2”,
“i18next”: “^23.6.0”,
“i18next-browser-languagedetector”: “^7.1.0”,
“i18next-http-backend”: “^2.3.0”,
“ionicons”: “^7.0.0”,
“prop-types”: “^15.8.1”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-ga4”: “^2.1.0”,
“react-i18next”: “^13.3.1”,
“react-router”: “^5.2.0”,
“react-router-dom”: “^5.3.4”,
“react-scripts”: “^5.0.0”,
“react-toastify”: “^10.0.4”,
“tronweb”: “^5.3.1”,
“wagmi”: “^1.4.13”,
“web-vitals”: “^0.2.4”,
“web3”: “^4.2.2”,
“workbox-core”: “^5.1.4”,
“workbox-expiration”: “^5.1.4”,
“workbox-precaching”: “^5.1.4”,
“workbox-routing”: “^5.1.4”,
“workbox-strategies”: “^5.1.4”
},

#6

Also i dont want to customise the modal
I just want to skip that modal step and directly access the metamask app and request to connect and sign the transaction which has been implemented through wagmi

#7

It seems like web3modal/wagmi is internally using the walletconnect modal. So it is opening the walletconnect modal.

@walletconnect/web3-provider was the old package where it was possible to open the metamask mobile directly without modal but this seems to be depreciated.

Have a look at new docs if the same is possible with new wallet connect package.