Feat/transaction fee estimation#412
Merged
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #397
Summary of Changes
Transaction Fee Estimation Hook (
useTransactionFeeEstimate.js
):
Designed a React hook to fetch estimated network fees dynamically based on the current transaction payload size and contract functions.
Built a dual-layered fallback mechanism: tries the Stacks Node V2 fee estimation API (/v2/fees/transaction) first, then falls back to Extended V1 fee rate API (/extended/v1/fee_rate), and finally to preset defaults under complete network failure.
Configured periodic polling to keep network condition estimates up to date.
Handled three user-selectable fee levels: low, medium, and high.
Exposed a flag (highFeeWarning) that triggers when the active level's estimate reaches or exceeds 0.05 STX (50,000 microSTX).
Dynamically calculated USD value estimates using a memoized integration with the platform's STX price converter, avoiding any infinite state update loops or interval resets.
UI Integration in SendTip Component (
SendTip.jsx
):
Integrated the hook to display live transaction fee estimates (in both STX and USD) inside the tip submission form's breakdown.
Added interactive pills allowing users to select their preferred speed level (low, medium, high).
Implemented a "High Transaction Fee Warning" banner that alerts users when gas costs are elevated and recommends switching to a lower speed.
Updated the balance validation logic to incorporate the estimated gas fee alongside the tip amount and platform fee to prevent transaction failures due to insufficient funds.
Included fee breakdowns and final total calculations in the tip confirmation modal.
Test Coverage:
Written 6 hook unit tests (
useTransactionFeeEstimate.test.js
) asserting loading states, error fallbacks, level toggling, warning thresholds, and price calculations.
Written 3 component integration tests (
SendTip.fee-preview.test.jsx
) validating the rendering of breakdown metrics, interactive pills, and warnings.
All 9 transaction fee-related tests pass successfully without warnings or memory issues.