Whats the proper pattern for calling approve() function from ERC20?

Question

Lets say I'm trying to write some kind of exchange or escrow smart contract that handles transferring tokens for users.

I see that ERC20 tokens implement the approve function something like below:

    function approve(address delegate, uint256 numTokens) public override returns (bool) {

        allowed[msg.sender][delegate] = numTokens;

        emit Approval(msg.sender, delegate, numTokens);

        return true;

    }

With the main point that approved account is msg.sender NOT tx.origin. So if I am writing a separate smart contract that tries to call the approve function of this ERC20 token:

function handleApproval(IERC20 token, uint256 numTokens) public override returns(bool){
    IERC20.approve(address(this), numTokens);
}

This would not work as intended since it would only be doing allowed[CONTRACT_ADDRESS][CONTRACT_ADDRESS] = numTokens, since the sender of the message is my smart contract.

My question is what is the proper pattern for exchanges/escrows to get users to approve the smart contract for handling transfers? Are users supposed to have to call the approve() function of the ERC20 contract directly themselves?

Answer 1

Yes, the users have to call the approve function "themselves". (Otherwise, you would just be able to approve anything you want :) )

But they don't have to do that manually - usually how it works is that your front end website will issue for the user two transactions to sign - one for approving the ERC20, and one for executing your smart contract function.

Answer 2

To answer your question in your comment, the most common pattern is to first check the user's allowance and ask the user to approve the token if it is below a certain threshold. You will always, always be required to approve a token that a contract is trying to spend for you. I'm not sure what the exact numbers that are used are, and I'm sure they vary, but it would look like something very similar to this in Web3:

if (allowance <= 2**50) { // 2**50 or any other amount you think is low enough!
    await token.methods
        .approve(
            contractAddress,
            web3.utils.toWei(
                (1e50).toLocaleString("fullwide", { useGrouping: false }) // 1e50 or whatever allowance you want to set
            )
        )
        .send({ from: accounts[0] })
}

To answer your second question, yes, it is very common to set the user's token allowance to the max it can possibly be. You can see this for yourself if you dive into your PancakeSwap allowance or any other dApp.