React Native theorytheory 0/50 · 0%
Web3 integration · hard

44. Gas estimation and fee UX

Presenting fees clearly and safely.

Estimating gas before sending prevents both failed transactions (limit too low) and overpaying (limit or price too high); most SDKs expose an estimate that the UI should pad slightly for safety.

function estimateWithBuffer(estimatedGas: bigint, bufferPercent = 20): bigint {
  return estimatedGas + (estimatedGas * BigInt(bufferPercent)) / 100n;
}

function totalFeeWei(gasLimit: bigint, gasPriceWei: bigint): bigint {
  return gasLimit * gasPriceWei;
}

Showing the fee in both native token and an approximate fiat value (using a cached price, clearly marked as an estimate) helps users judge whether a transaction is worth its cost before confirming.

Check your understanding

  1. 1. Why add a buffer to an estimated gas limit?

  2. 2. How is total transaction fee typically computed?

  3. 3. Why show fee in both native token and fiat estimate?