MetaMask Not Prompting Transaction Approval via WalletConnect in Mobile Chrome Browser

I’m building a decentralized application (dApp) using Web3Modal, WalletConnect, and ethers.js. The goal is to enable users to connect their mobile wallets (e.g., MetaMask, Trust Wallet) via WalletConnect and approve transactions directly from the mobile browser (Chrome).

Here’s what I’ve implemented:

WalletConnect Configuration: I disabled the QR code and configured the dApp to prompt the WalletConnect modal for mobile wallets.
Transaction Logic: After the wallet connects, I prepare and send a simple ETH transfer transaction using ethers.js.
However, MetaMask or Trust Wallet is not prompting for transaction approval after connecting. Here is my code:

import WalletConnectProvider from "@walletconnect/web3-provider";
import { ethers } from "ethers";
import { getAccount } from '@wagmi/core';

async function deposit() {
  try {
    console.log("calling deposit from wallet connect");

// Ensure the user is connected via Web3Modal
const account = getAccount(config);
console.log("account", account);

if (account.status === 'connected') {
  // Manually create a WalletConnect provider with QR code disabled
  const walletConnectProvider = new WalletConnectProvider({
    infuraId: 'YOUR_INFURA_PROJECT_ID', // Replace with your Infura Project ID
    qrcode: false, // Disable QR code
    qrcodeModalOptions: {
      mobileLinks: ["metamask", "trust"], // Supported mobile wallets
    },
  });

  // Enable session (this opens the mobile wallet modal)
  await walletConnectProvider.enable();

  // Use WalletConnect provider with ethers.js
  const web3Provider = new ethers.BrowserProvider(walletConnectProvider);
  const signer = await web3Provider.getSigner();
  const userAddress = await signer.getAddress(); // Ensure we get the user address

  console.log("Signer address:", userAddress);

  // Prepare and send the transaction (example: sending 0.01 ETH)
  const tx = {
    to: "0x8230aF7feCd83a49732854eDe52A466E949d6992", // Replace with recipient address
    value: ethers.parseEther("0.01") // Transaction amount (0.01 ETH)
  };

  // Send the transaction and wait for the wallet to prompt the user
  const transactionResponse = await signer.sendTransaction(tx);

  console.log("Transaction sent:", transactionResponse.hash);

  // Wait for the transaction to be confirmed
  await transactionResponse.wait();
  console.log("Transaction confirmed");

} else {
  console.error("No connected wallet. Please connect a wallet first.");
}


} catch (error) {
    console.error("Error sending transaction:", error);
    }
      }

   // Example usage: Call deposit when the button is clicked
   document.getElementById('deposit-button').addEventListener('click', async () => {
     await deposit();
  });

What I’ve Tried:

1. Ensured that the WalletConnect modal opens correctly, but the
   transaction approval is never prompted.
2. The mobile wallet (MetaMask, Trust Wallet) is connected properly,
   and I can retrieve the address, but the transaction does not prompt
   for approval.
3. Verified that signer.getAddress() works and the signer is obtained
   correctly. Checked network settings (currently using Sepolia
   testnet).

Expected Behavior:
After connecting via WalletConnect on mobile Chrome, the connected wallet (e.g., MetaMask, Trust Wallet) should prompt the user to approve the transaction.

Actual Behavior:

1. The wallet connects successfully, but no prompt appears for
   transaction approval. The transaction is not sent, and there are no
   errors in the console.
2. If I remove qrcode: false, the qr code modal pops up but this doesn’t make sense for a mobile browser as the user would currently be busy using their phone on the dapp.

I’ve been stuck with this issue for over a week. I am using vanilla js unfortunately so I cannot use the react implementations

Blockquote