WalletConnect error while integration in ReactJS - Uncaught (in promise) TypeError: this.send is not a function

Question

I'm integrating WalletConnect in React DApp but am getting

this.send is not a function

I've identified that the issue is with WalletConnectProvider but i've followed the same steps that are mentioned in their documentation.

Please review my code and let me know how to fix this issue. Thanks.

import WalletConnectProvider from '@walletconnect/web3-provider';
import config from './config';
import Web3 from 'web3';

export const walletConnect = async (setAddr) => {
//  Create WalletConnect Provider
const provider = new WalletConnectProvider({
    infuraId: config.tokenContract.infuraKey, // Required
});

//  Enable session (triggers QR Code modal)
await provider.enable();

console.log('provider', provider);
if (provider.connected) {
    console.log('wallet connect address', provider.accounts[0]);
    setAddr(provider.accounts[0]);
}

//  Create Web3
const web3 = new Web3(provider);
console.log('web3', web3);

const _contract = new web3.eth.Contract(
   config.tokenContract.contractABI,
   config.tokenContract.contractAddress
);
const data = await _contract.methods.hatchNest().encodeABI();
const gasPrice = 20000000000;
const gasLimit = 90000;

const tx = {
   from: '0xFF12586A1eCf65b56d828712A8d4B48D1CEC8962',
   to: config.tokenContract.contractAddress,
   data: data,
   gasPrice: web3.utils.toHex(gasPrice),
   gasLimit: web3.utils.toHex(gasLimit),
};
 // Send Transaction
 const txHash = await web3.eth.sendTransaction(tx);
 console.log('sendTransaction', txHash);
};

Answer 1

It is a known bug in web3.js 1.3.x

https://github.com/ethereum/web3.js/issues/3790

Downgrade for web3.js 1.2.x.