Migration from 1.8v to 4v caused Insufficient funds error

[meri-maki]

I have upgraded web3 and web3-eth from 1.8.0 to 4.0.2 (mostly because of less package size)
I've read the migration guide and, since I had quite a simple logic of connecting wallet + sending transaction, there was not much to change

I haven't changed anything in web3.eth.sendTransaction, but after updating I started getting this error for every single transaction (even though there are funds):

Returned error: err: insufficient funds for gas * price + value: address 0x568A33aA237fFc284FF584A3BAB17A44FAeF4054 have 61046238310789005 want 8879502456500000000 (supplied gas 500000000)

Here is the code for sendTransaction:

return web3.eth.sendTransaction({
						from: selectedAccount,
						to: window.toonAppData.address,
						data: "0x64edfbf0e2c706ba4a09595315c45355a341a576cc17f3a19f43ac1c02f814ee",
						value: web3.utils.toWei(amount, "ether"),
					})

I'm quite new to web3 and I'm not the one who wrote the initial code, but since I had to update wallet connect, this issue also appeared...

Environment

"devDependencies": {
"@babel/core": "^7.20.2",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.22.5",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"assert": "^2.0.0",
"autoprefixer": "^10.4.13",
"babel-loader": "^9.1.0",
"babel-preset-es2015": "^6.24.1",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^4.2.2",
"fs-extra": "^10.1.0",
"html-minimizer-webpack-plugin": "^4.3.0",
"html-webpack-plugin": "^5.5.0",
"https-browserify": "^1.0.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"mini-css-extract-plugin": "^2.6.1",
"os-browserify": "^0.3.0",
"postcss-loader": "^7.0.1",
"process": "^0.11.10",
"sass": "^1.60.0",
"sass-loader": "^13.2.2",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"style-loader": "^3.3.1",
"url": "^0.11.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"@metamask/detect-provider": "^2.0.0",
"@wagmi/core": "^1.3.3",
"@walletconnect/ethereum-provider": "^2.8.6",
"@web3modal/ethereum": "^2.6.2",
"@web3modal/html": "^2.6.2",
"browserify-zlib": "^0.2.0",
"path-browserify": "^1.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.10",
"viem": "^1.2.6",
"web3": "^4.0.2",
"web3-eth": "^4.0.2"
},

[Muhammad-Altabba]

Thanks for opening an issue @meri-maki,

So, does the exact same code that you presented work with version 1.8, when you try it when you connect to the same node? Or was this an old run back in time?

Could you please run the exact code using 4.x And then downgrade to version 1.x and run the same code again and give a confirmation of the issue?

Another something is if you could please try to estimate gas first and then send the transaction. Here is a code just for illustration:

const transaction = {
  from: selectedAccount,
  to: window.toonAppData.address,
  data: "0x64edfbf0e2c706ba4a09595315c45355a341a576cc17f3a19f43ac1c02f814ee",
  value: web3.utils.toWei(amount, "ether"),
  }
transaction.gas = await web3Eth.estimateGas(transaction);

Console.log('Estimated gas: ', gas)

web3.eth.sendTransaction(transaction)

Thank for your collaboration.

[meri-maki]

When downgrading web3 and web3eth back to 1.8.0 from 4v, my transactions go through successfully
The only thing I had to change in the code above is:

value: web3.utils.toWei(String(amount), "ether"),

Since i started getting error about BN/strings

[meri-maki]

When estimating gas I'm getting gas is not defined error..

[meri-maki]

FYI: 1.10.0v works fine - same as 1.8.0

[luu-alex]

I'll take a look, it seems like gas isn't being added by default which is an error. ill create a PR when possible, thank you for submitting this.

[Muhammad-Altabba]

When estimating gas I'm getting gas is not defined error..

Hello @meri-maki
So, @luu-alex will fix the original issue that is no need to estimateGas first, thanks to him.

However, to be able to fix this in the meantime. You should be able to estimate gas and then pass it. In my example you are getting gas is not defined as it seems you are using typescript which is good. And here is a simple code that does not produce this error:

const transaction = {
  from: selectedAccount,
  to: window.toonAppData.address,
  data: "0x64edfbf0e2c706ba4a09595315c45355a341a576cc17f3a19f43ac1c02f814ee",
  value: web3.utils.toWei(amount, "ether"),
  gas = await web3Eth.estimateGas(transaction)
  }

Console.log('Estimated gas: ', transaction.gas)

web3.eth.sendTransaction(transaction)

[meri-maki]

@Muhammad-Altabba @luu-alex hi! thank you for the suggestion, but in my case i'm not sure how to implement await for gas, could you please take a look? should i place it before web3.eth.sendtransaction?

	const onSubmitForm = (e) => {
		e.preventDefault()

		const amount = Math.max(0, parseFloat(ethInputAmount))
		console.log(amount)
		if (amount < 0.000001 || !amount) {
			return
		}
		

		setPurchaseLoading(true)

		let selectedAccount

		authorize({
			force: false,
			metaMaskDeeplinkUrl: appendParamsToUrl(window.location.href, {
				[ethAmountQueryKey]: amount,
			}),
		})
			.then((res) => {
				web3 = res
				return getAuthorizedAccounts()
			})
			.then((accounts) => {
				selectedAccount = accounts[0]
				return web3.eth
					.sendTransaction({
						from: selectedAccount,
						to: window.toonAppData.address,
						data: "0x64edfbf0e2c706ba4a09595315c45355a341a576cc17f3a19f43ac1c02f814ee",
						value: web3.utils.toWei(String(amount), "ether"),
					})
					.on("transactionHash", function (txHash) {
						setPurchaseLoading(false)

						if (txHash !== undefined) {
							setEthInputAmount("")
							scheduleTxCheckStatus(txHash)
						}
					})
			})
			.then(function (receipt) {
				console.log("receipt2", receipt)
			})
			.catch(function (err) {
				console.error(err.message)
				setPurchaseLoading(false)

				if (err.code === 4001) {
					return
				} else {
					setPurchaseError(true)
					setPurchaseErrorMessage(err.message) 				}
			})
	}
	
	```

[luu-alex]

sorry for the late reply, let me know if this works,
as well are you sure you have enough funds? it seems like you need a little bit more to pay for the transaction
Returned error: err: insufficient funds for gas * price + value: address 0x568A33aA237fFc284FF584A3BAB17A44FAeF4054 have 61046238310789005 want 8879502456500000000

const onSubmitForm = (e) => {
		e.preventDefault()

		const amount = Math.max(0, parseFloat(ethInputAmount))
		console.log(amount)
		if (amount < 0.000001 || !amount) {
			return
		}
		

		setPurchaseLoading(true)

		let selectedAccount

		authorize({
			force: false,
			metaMaskDeeplinkUrl: appendParamsToUrl(window.location.href, {
				[ethAmountQueryKey]: amount,
			}),
		})
			.then((res) => {
				web3 = res
				return getAuthorizedAccounts()
			})
			.then((accounts) => {
				selectedAccount = accounts[0]
                                let transaction = {
						from: selectedAccount,
						to: window.toonAppData.address,
						data: "0x64edfbf0e2c706ba4a09595315c45355a341a576cc17f3a19f43ac1c02f814ee",
						value: web3.utils.toWei(String(amount), "ether"),
					}
                                transaction = { ...transaction, gas: await web3.eth.estimateGas(transaction)}
				return web3.eth
					.sendTransaction(transaction)
					.on("transactionHash", function (txHash) {
						setPurchaseLoading(false)

						if (txHash !== undefined) {
							setEthInputAmount("")
							scheduleTxCheckStatus(txHash)
						}
					})
			})
			.then(function (receipt) {
				console.log("receipt2", receipt)
			})
			.catch(function (err) {
				console.error(err.message)
				setPurchaseLoading(false)

				if (err.code === 4001) {
					return
				} else {
					setPurchaseError(true)
					setPurchaseErrorMessage(err.message) 				}
			})
	}
	

[meri-maki]

@luu-alex hi! thank you so much! it works!!