gas cost estimates for small values

This commit is contained in:
2025-11-04 13:46:45 -04:00
parent ed6426fad7
commit 1d6ebadcb2
3 changed files with 19 additions and 13 deletions

View File

@@ -111,8 +111,11 @@ export function SwapForm() {
return; return;
} }
// Convert fromAmount to Wei // Calculate maxAmountIn by subtracting fees from user's input
const maxAmountIn = parseUnits(fromAmount, selectedFromToken.decimals); // User's input is the total amount they want to spend (including fees)
// So we subtract the fee to get the actual amount to swap
const userInputInWei = parseUnits(fromAmount, selectedFromToken.decimals);
const maxAmountIn = userInputInWei - bestRoute.fee;
// Execute the swap // Execute the swap
await executeSwap( await executeSwap(
@@ -339,7 +342,7 @@ export function SwapForm() {
<div className="flex justify-between text-sm"> <div className="flex justify-between text-sm">
<span className="text-muted-foreground">Estimated Gas Cost:</span> <span className="text-muted-foreground">Estimated Gas Cost:</span>
<span className="font-medium"> <span className="font-medium">
{isEstimatingGas ? 'Calculating...' : gasEstimate ? `$${gasEstimate.estimatedCostUsd}` : '-'} {isEstimatingGas ? 'Calculating...' : gasEstimate ? (gasEstimate.estimatedCostUsd.startsWith('<') ? gasEstimate.estimatedCostUsd : `$${gasEstimate.estimatedCostUsd}`) : '-'}
</span> </span>
</div> </div>
<div className="flex justify-between text-sm"> <div className="flex justify-between text-sm">
@@ -349,17 +352,17 @@ export function SwapForm() {
{swapAmounts && swapAmounts.length > 0 && selectedFromToken && fromAmount && ( {swapAmounts && swapAmounts.length > 0 && selectedFromToken && fromAmount && (
<> <>
<div className="flex justify-between text-sm"> <div className="flex justify-between text-sm">
<span className="text-muted-foreground">Fee:</span> <span className="text-muted-foreground">Total Amount In:</span>
<span className="font-medium"> <span className="font-medium">
{(Number(swapAmounts[0].fee) / Math.pow(10, selectedFromToken.decimals)).toFixed(6)} {selectedFromToken.symbol} {formatUnits(swapAmounts[0].amountIn, selectedFromToken.decimals)} {selectedFromToken.symbol}
{' '}
({((Number(swapAmounts[0].fee) / Number(parseUnits(fromAmount, selectedFromToken.decimals))) * 100).toFixed(2)}%)
</span> </span>
</div> </div>
<div className="flex justify-between text-sm"> <div className="flex justify-between text-sm">
<span className="text-muted-foreground">Total Amount In:</span> <span className="text-muted-foreground">Fee:</span>
<span className="font-medium"> <span className="font-medium">
{((Number(parseUnits(fromAmount, selectedFromToken.decimals)) + Number(swapAmounts[0].fee)) / Math.pow(10, selectedFromToken.decimals)).toFixed(6)} {selectedFromToken.symbol} {formatUnits(swapAmounts[0].fee, selectedFromToken.decimals)} {selectedFromToken.symbol}
{' '}
({((Number(swapAmounts[0].fee) / Number(swapAmounts[0].amountIn)) * 100).toFixed(2)}%)
</span> </span>
</div> </div>
</> </>

View File

@@ -117,7 +117,9 @@ export function SwapReviewModal({
{gasEstimate && ( {gasEstimate && (
<div className="flex justify-between text-sm"> <div className="flex justify-between text-sm">
<span className="text-muted-foreground">Network Fee</span> <span className="text-muted-foreground">Network Fee</span>
<span className="font-medium">${gasEstimate.estimatedCostUsd}</span> <span className="font-medium">
{gasEstimate.estimatedCostUsd.startsWith('<') ? gasEstimate.estimatedCostUsd : `$${gasEstimate.estimatedCostUsd}`}
</span>
</div> </div>
)} )}
</div> </div>

View File

@@ -216,7 +216,8 @@ export function useSwap() {
const totalGas = approvalGas + swapGas; const totalGas = approvalGas + swapGas;
const estimatedCostWei = totalGas * gasPrice; const estimatedCostWei = totalGas * gasPrice;
const estimatedCostEth = (Number(estimatedCostWei) / 1e18).toFixed(6); // Use more decimal places for testnets with very low gas prices
const estimatedCostEth = (Number(estimatedCostWei) / 1e18).toFixed(9);
// Fetch ETH price in USD // Fetch ETH price in USD
let estimatedCostUsd = '0.00'; let estimatedCostUsd = '0.00';
@@ -225,7 +226,8 @@ export function useSwap() {
const data = await response.json(); const data = await response.json();
const ethPriceUsd = data.ethereum?.usd || 0; const ethPriceUsd = data.ethereum?.usd || 0;
const costInUsd = parseFloat(estimatedCostEth) * ethPriceUsd; const costInUsd = parseFloat(estimatedCostEth) * ethPriceUsd;
estimatedCostUsd = costInUsd.toFixed(2); // Show "< $0.01" for amounts less than a cent, otherwise show 2 decimal places
estimatedCostUsd = costInUsd < 0.01 && costInUsd > 0 ? '< $0.01' : costInUsd.toFixed(2);
} catch (priceErr) { } catch (priceErr) {
console.error('Error fetching ETH price:', priceErr); console.error('Error fetching ETH price:', priceErr);
} }
@@ -238,7 +240,6 @@ export function useSwap() {
}; };
setGasEstimate(estimate); setGasEstimate(estimate);
console.log('⛽ Gas estimate:', estimate);
return estimate; return estimate;
} catch (err) { } catch (err) {
console.error('Error estimating gas:', err); console.error('Error estimating gas:', err);