How to avoid "This gas fee has been suggested by" message in MetaMask using web3js

I'm currently in the process of upgrading an Ethereum dApp (using React JS) to conform to the new EIP-1559 standard (A.K.A. the London hard fork). The app uses web3.js (v1.5.2) to initiate transactions which take on a form something like

const contract = new web3.eth.Contract(
  contractABI,
  CONTRACT_ADDRESS,
);

await contract.methods
  .deposit(recepient, amount)
  .send({ from: account, value })

We encourage users to interface with our app using MetaMask.

Despite the fact that I neither specify a gasPrice, gasLimit, nor the equivalent maxPriorityFeePerGas or maxFeePerGas specified by EIP-1559 when a transaction is sent, MetaMask still warns (on my local test environment) "localhost suggested gas fee" with "Unknown processing time" and a potentially huge fee.

On clicking "Edit" another warning message appears, to make matters worse, the values I (or I guess web3) supposedly "suggested" are not reasonable according to MetaMask's estimate.

Is there any way using web3 interfacing with MetaMask to accept MetaMask's suggested values, removing these MetaMask warnings and insuring that the fees are calculated correctly? I notice looking at https://app.uniswap.org/ that although MetaMask still shows the first "app.unswap.org suggested gas fee" warning, the txn time is correctly calculated and clicking on "Edit" does not present any further warnings. Is Uniswap's more reasonable interaction with MetaMask replicable using web3.js?

Solution

OK, so I've figured this one out.

If maxPriorityFeePerGas and maxFeePerGas are not defined for a particular transaction, web3 will generate its own values. Disappointingly, the generated values are pretty poor and will trigger warnings in MetaMask. The solution (at the point of writing completely undocumented) is to set maxPriorityFeePerGas and maxFeePerGas to null instead of undefined. This will signal to web3 that you don't want it to pass the provider these values.

So the code should look something like:

const contract = new web3.eth.Contract(
  contractABI,
  CONTRACT_ADDRESS,
);

await contract.methods
  .deposit(recepient, amount)
  .send({ 
    from: account, 
    value, 
    maxPriorityFeePerGas: null,
    maxFeePerGas: null, 
  });

Also, ensure that you're using the latest version of web3, since EIP-1559 support was only added in v1.5.