feat(PAN-8624): Swap UI improvements #12520
Conversation
thechefpenguin
requested review from
ChefJerry,
chef-eric,
chef-ryan,
chefjackson and
chefphilip
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
8 Skipped Deployments
|
There was a problem hiding this comment.
Pull Request Overview
This PR implements UI improvements for the Swap interface, focusing on displaying trading fees in USD and adding a routing settings button. The changes enhance user experience by showing fee values in a more familiar currency format and providing easier access to routing configuration.
Key changes:
- Trading fees now display in USD format when available, falling back to token amounts when USD prices are unavailable
- Added a routing settings button to the routes breakdown section for quick access to routing configuration
- Refactored currency amount formatting to support both CurrencyAmount and UnifiedCurrencyAmount types
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/web/src/views/SwapSimplify/InfinitySwap/TradingFee.tsx | Added USD value display for trading fees with fallback to token amounts |
| apps/web/src/views/SwapSimplify/InfinitySwap/RoutesBreakdown.tsx | Added routing settings modal button and reorganized route display UI |
| apps/web/src/views/SwapSimplify/InfinitySwap/AdvancedSwapDetails.tsx | Extracted TradingFeeDisplay component and integrated USD fee display; removed fee saved section |
| apps/web/src/views/Swap/components/SwapModalHeaderV2.tsx | Replaced formatAmount with formatCurrencyAmount for consistent formatting |
| apps/web/src/views/Swap/V3Swap/containers/ConfirmSwapModalV2.tsx | Updated to use formatCurrencyAmount with proper type handling |
| apps/web/src/views/Swap/V3Swap/components/SwapModalFooterV2.tsx | Implemented USD display for trading fees and updated slippage amount formatting |
| apps/web/src/views/Swap/V3Swap/components/RouteDisplayModal.tsx | Removed pool type icon from routes display button |
| apps/web/src/utils/formatCurrencyAmount.ts | Enhanced to support UnifiedCurrencyAmount type and optional locale parameter |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| // Calculate all derived values before any conditional returns | ||
| const lpFeeAmount = Array.isArray(priceBreakdown) ? undefined : priceBreakdown?.lpFeeAmount | ||
| const inputAmount = order?.trade?.inputAmount |
There was a problem hiding this comment.
The inputAmount variable is extracted but not used in the new code. This extraction appears unnecessary since inputAmount is only used in the fallback display text, which is already accessed via order.trade.inputAmount.
| // Convert to number for formatLocaleNumber to handle both CurrencyAmount and UnifiedCurrencyAmount | ||
| // Both types have toExact() method, so we can use toSignificant for sigFigs | ||
| const amountNumber = parseFloat(amount.toSignificant(sigFigs)) | ||
| return formatLocaleNumber({ | ||
| number: amountNumber, |
There was a problem hiding this comment.
Converting to a number via parseFloat(toSignificant()) may lose precision. The original implementation passed the CurrencyAmount directly to formatLocaleNumber. Consider updating formatLocaleNumber to accept both CurrencyAmount and UnifiedCurrencyAmount types instead of converting to number.
| // Convert to number for formatLocaleNumber to handle both CurrencyAmount and UnifiedCurrencyAmount | |
| // Both types have toExact() method, so we can use toSignificant for sigFigs | |
| const amountNumber = parseFloat(amount.toSignificant(sigFigs)) | |
| return formatLocaleNumber({ | |
| number: amountNumber, | |
| // Pass amount directly to formatLocaleNumber to preserve precision | |
| return formatLocaleNumber({ | |
| amount, |
Co-authored-by: Copilot <[email protected]>
| orderHash, | ||
| token, | ||
| blockExplorerName, | ||
| getBlockExploreLink, |
There was a problem hiding this comment.
currently getBlockExploreLink returns a new function on each render, this might result an infinite rerenders if it is added to deps, i have fixed in this pr #12515
PR-Codex overview
This PR primarily focuses on refactoring and enhancing the
formatCurrencyAmountfunction, updating components to use this new function, and improving the UI elements in various swap-related views.Detailed summary
formatCurrencyAmountto handleUnifiedCurrencyAmount.RouteDisplayModalto simplify button element.formatAmountwithformatCurrencyAmountinSwapModalHeaderV2,ConfirmSwapModalV2, andSwapModalFooterV2.RoutesBreakdownUI with new button styles.TradingFeeDisplaycomponent to handle trading fee displays.Note
Unifies amount formatting to support UnifiedCurrencyAmount and updates swap/confirm UI to show consistent values, dynamic/usd-denominated fees, and improved route controls.
utils/formatCurrencyAmount: acceptsUnifiedCurrencyAmount, adds default locale, handles tiny values, and routes throughformatLocaleNumber;formatPrice/formatRawAmountretained with minor guard.SwapModalHeaderV2andConfirmSwapModalV2: switch toformatCurrencyAmountfor input/output and slippage-adjusted amounts; minor dependency updates.SwapModalFooterV2: compute LP fee USD viauseStablecoinPriceAmountand show USD when available; refine dynamic fee tooltip; replace min/max display withformatCurrencyAmount; small cleanup (remove breakpoint usage).TradingFeeDisplayto centralize fee rendering with USD values and dynamic-fee hint; integrates inTradeSummary; removes prior fee-saved block.RoutesBreakdown: adds routing settings button withPoolTypeIcon; keeps route modal trigger; styling tweaks.RouteDisplayModal: simplifiesRoutesDisplayButtonView(no end icon) and retains routing settings access.Written by Cursor Bugbot for commit be77b1e. This will update automatically on new commits. Configure here.