Approve TransferFrom Function to send any ERC20 token

I need a smart contract with Openzeppelin that will allow me to send any ERC20 token from one account to the account that made the contract. This is my frontend code to approve and transfer If there are any problems please notify me and show a solution as well.

enterPool will encompass the transferFrom function.

abi = current token ABI Ex: UDST
address = current token Address, these will change if the user decides to change the token.

const contract = new web3.eth.Contract(abi, address)
              contract.methods.approve(contractAddress, total).send({ 
                from: account,
              }).then(notify17(), setModal2(true))
              .then(transaction_hash=>{
                notify16()
                const contracts = new web3.eth.Contract(contractAbi, contractAddress);
                contracts.methods.enterPool(address, total).send({ 
                    from: account
                }) ... 

Hi, welcome! :wave:

Your frontend code looks like ok, and the contract code almost the same, so what is your problem? You want someone write the code for you?

I need help with the contract because when i run everything it gives me an error.

Heres the contract snippet, notify me if you need more:

function enterPool(address _paymentcontract, uint256 value) public payable {
        require(msg.sender != address(0), "Zero address");
        wsum= IERC20(_paymentcontract);
        require(wsum.allowance(msg.sender,address(this)) > value, "Please allow fund first");
        wsum.transferFrom(msg.sender,owner,value);  
        }
    } ...

If you could show a full contract using Openzeppelin that would work with the frontend, that would be perfect. But any help is greatly appreciated.

It works well for me, I just deployed the contracts, maybe you can have a look:

BTW, why do you want to add the key word payable? Do you want to transfer ETH?

No i want to transfer ERC20 tokens only for this

Am I calling web3 incorrectly? I want this to work on the polygon mainnet:

            let provider = await window.web3.currentProvider;
            const web3 = new Web3(provider)

Is it not working because Im deploying it on the Polygon Mumbai Net? Do we need to change some things around for Polygon/MATIC? I'm also still getting this error when I confirm this transaction:

'Please allow fund first'

This is the full frontend code, I dont understand how its not approving when Im approving in the code:

try{
              const contract = new web3.eth.Contract(abi, address)
              contract.methods.approve(contractAddress, total).send({ 
                from: account,
              }).then(notify17(), setModal2(true))
              .then(transaction_hash=>{
                notify16()
                const contracts = new web3.eth.Contract(contractAbi, contractAddress);
                contracts.methods.enterPool(address, total).send({ 
                    from: account
                }).then(transaction_hash=>{
                  user.increment("amount", text2/1);
                  user.save()
                  setTransHash(transaction_hash.transactionHash)
                  notify4()
                  notify18()
                  setModal2(false)
                }).catch(e=>{
                  notify5()
                  setModal2(false)
                  window.location.reload() 
                })
              }).catch(e=>{
                notify5()
                setModal2(false)
                window.location.reload() 
              })
            }catch(err){
              notify6()
            }

Lastly when I comment out this everything works, so it is the approve function that must be failing:

require(wsum.allowance(msg.sender,address(this)) > value, "Please allow fund first")

Ok turns out commenting that out made the function work, you can ignore everything above the last problem now is this error I get for the abi in the contract instantiation:

Unhandled Rejection (Error): You must provide the json interface of the contract when instantiating a contract object.

How do I fix this? Currently I have to press the buy button twice, once to get the error then one more time to get the MetaMask popup. I want just one click for my users

The web3 version is "^1.4.0"