Fee Checker
The "FeeChecker" component is a calculator to estimate the cost of a transactions fee by compute standards on Stellar.
Features
- Collects the amount and price of an asset.
- Upon submission, calculates the estimated costs for the transaction.
- Provides the estimation in stroops, xlm and usd.
- Provides a way to estimate the cost of a transaction.
Additional Resources
The order price you set is independent of the fee you pay for submitting that order in a transaction. Fees are always paid in XLM, and you specify them as a separate parameter when submitting the order to the network.
Review the documentation on thresholds below, you can permanently lock yourself out of the account
C#
Install the PakanaRazorSDEX NuGet package via the NuGet Package Manager Console.
.Net8.0 or greater is required.
dotnet add package PakanaRazorSDEX --version 0.0.4??
Stellar Horizon Dependency will install automatically
NuGet Package Implementation
<PakanaRazorSDEX.Component.FeeChecker/>C#
@page "/FeeChecker"
@rendermode InteractiveAuto
@using Microsoft.JSInterop
<div class="container">
<h2>Stellar Transaction Fee Calculator</h2>
<div class="input-group">
<label for="offerPrice">Offer Price (XLM):</label>
<input type="number" id="offerPrice" placeholder="Enter offer price in XLM" />
</div>
<div class="input-group">
<label for="offerAmount">Offer Amount (XLM):</label>
<input type="number" id="offerAmount" placeholder="Enter offer amount in XLM" />
</div>
<button id="calculateFeeBtn">Calculate Fee</button>
<h3>Total Estimated Fee (Stroops): <span id="feeResult">-</span></h3>
<h3>Total Estimated Fee (XLM): <span id="feeXLMResult">-</span></h3>
<h3>Total Fee in USD: <span id="feeUSDResult">-</span></h3>
</div>
@code {
[Inject] IJSRuntime JS { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
// Call the initializeChart function in the external JavaScript file
await JS.InvokeVoidAsync("calculateFeeBtn");
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/13.0.0/stellar-sdk.min.js"></script>
<script src="./_content/PakanaRazorSDEX/js/feeChecker.js"></script>
<script src="./_content/PakanaRazorSDEX/js/global.js"></script>Javascript
We've provided simple HTML and JavaScript that can be used in your project as partial-components or be customized and integrated into your existing codebase.
Stellar CDN
*Current Version as of 2024-24-12*
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/13.0.0/stellar-sdk.min.js"></script>JavaScript
<script>
let baseFee = 100; // Default base fee in stroops (100 stroops = 0.0001 XLM)
let xlmPriceUSD = 0; // To store the current price of XLM in USD
// Fetch the current network fee stats from the testnet
async function fetchNetworkFee() {
try {
const response = await server.feeStats();
console.log('Fee stats response:', response); // Log the response to check the structure
// Update the base fee if available
if (response && response.last_ledger_base_fee) {
baseFee = parseInt(response.last_ledger_base_fee); // Update with the latest base fee
} else {
console.error('Base fee not available in response.');
}
} catch (error) {
console.error('Error fetching network fee:', error);
}
}
// Function to calculate the total fee for a manageBuyOffer or manageSellOffer operation
function calculateTransactionFee(offerPrice, offerAmount) {
const instructionsCostPer10K = 25; // 10,000 instructions = 25 stroops
const readLedgerCost = 6250; // 1 ledger entry read = 6250 stroops
const writeLedgerCost = 10000; // 1 ledger entry written = 10000 stroops
const bandwidthCostPerKB = 1624; // 1 KB transaction size = 1624 stroops
// Dynamic calculations based on the offer price and amount
const offerPriceMultiplier = offerPrice > 0 ? offerPrice : 1; // Prevent division by zero or negative values
const offerAmountMultiplier = offerAmount > 0 ? offerAmount : 1; // Prevent division by zero or negative values
// Calculate fees based on transaction components
const instructionsCost = Math.ceil(10000 / 10000) * instructionsCostPer10K;
const readCost = 2 * readLedgerCost; // 2 reads (estimate)
const writeCost = writeLedgerCost; // 1 write (estimate)
const transactionSizeKB = 129; // Example size of the transaction
const bandwidthCost = transactionSizeKB * bandwidthCostPerKB;
// Calculate dynamic fee based on input values
const dynamicFee = baseFee * offerPriceMultiplier * offerAmountMultiplier;
// Total fee in stroops
const totalFeeInStroops = instructionsCost + readCost + writeCost + bandwidthCost + dynamicFee;
// Convert stroops to XLM for rent cost calculation
const stroopsToXLM = 1 / 1e7;
// Convert stroops to XLM for total fee
const totalFeeInXLM = totalFeeInStroops / 1e7;
return {
feeInStroops: totalFeeInStroops,
feeInXLM: totalFeeInXLM
};
}
// Function to fetch the current price of XLM in USD from CoinCap API
async function fetchXLMPrice() {
try {
const response = await fetch('https://api.coincap.io/v2/assets/stellar');
const data = await response.json();
if (data && data.data && data.data.priceUsd) {
xlmPriceUSD = parseFloat(data.data.priceUsd);
} else {
console.error('Error fetching XLM price from API');
}
} catch (error) {
console.error('Error fetching XLM price:', error);
}
}
// Handle the button click to calculate the fee
document.getElementById('calculateFeeBtn').addEventListener('click', () => {
const offerPrice = parseFloat(document.getElementById('offerPrice').value);
const offerAmount = parseFloat(document.getElementById('offerAmount').value);
if (isNaN(offerPrice) || isNaN(offerAmount)) {
alert('Please enter valid offer price and amount values.');
return;
}
const { feeInStroops, feeInXLM } = calculateTransactionFee(offerPrice, offerAmount);
document.getElementById('feeResult').textContent = feeInStroops.toFixed(0); // Display fee in stroops
document.getElementById('feeXLMResult').textContent = feeInXLM.toFixed(8); // Display fee in XLM
// Convert the XLM fee to USD and display it
const feeInUSD = feeInXLM * xlmPriceUSD;
document.getElementById('feeUSDResult').textContent = feeInUSD.toFixed(8); // Display fee in USD
});
// Initialize the page by fetching the network fee and XLM price
fetchNetworkFee();
fetchXLMPrice();
</script>
HTML
<body>
<div class="container">
<h2>Stellar Transaction Fee Calculator</h2>
<div class="input-group">
<label for="offerPrice">Offer Price (XLM):</label>
<input type="number" id="offerPrice" placeholder="Enter offer price in XLM" />
</div>
<div class="input-group">
<label for="offerAmount">Offer Amount (XLM):</label>
<input type="number" id="offerAmount" placeholder="Enter offer amount in XLM" />
</div>
<button id="calculateFeeBtn">Calculate Fee</button>
<h3>Total Estimated Fee (Stroops): <span id="feeResult">-</span></h3>
<h3>Total Estimated Fee (XLM): <span id="feeXLMResult">-</span></h3>
<h3>Total Fee in USD: <span id="feeUSDResult">-</span></h3>
</div>
</body>