diff --git a/.changeset/fee-naming-signed-display.md b/.changeset/fee-naming-signed-display.md new file mode 100644 index 000000000..c14f88c66 --- /dev/null +++ b/.changeset/fee-naming-signed-display.md @@ -0,0 +1,10 @@ +--- +'@relayprotocol/relay-kit-ui': patch +--- + +Align swap widget fee display with the Dashboard and transaction page: +"Swap Impact" is now "Swap Cost", "Relay Fee" is "Platform Fee" (with a green +"(Reward)" note when Relay pays the user), "Execution Fee" is "Execution +Cost", and "Network cost" is "Deposit gas". Credits render green with a +leading "+", zero fees display as "$0.00" instead of "-", and sub-cent +values as signed "+< $0.01" / "-< $0.01". diff --git a/packages/ui/src/components/widgets/FeeBreakdown.tsx b/packages/ui/src/components/widgets/FeeBreakdown.tsx index e5b2d8c67..a58010cf7 100644 --- a/packages/ui/src/components/widgets/FeeBreakdown.tsx +++ b/packages/ui/src/components/widgets/FeeBreakdown.tsx @@ -118,7 +118,7 @@ const FeeBreakdown: FC = ({ ) }, { - title: 'Network cost', + title: 'Deposit gas', value: ( = ({ className="relay:rounded-[var(--relay-radii-widget-card-border-radius)] relay:bg-[var(--relay-colors-widget-background)] relay:border-widget-card relay:overflow-hidden relay:mb-[var(--relay-spacing-widget-card-section-gutter)]" >
- +
) diff --git a/packages/ui/src/components/widgets/PriceImpactTooltip.tsx b/packages/ui/src/components/widgets/PriceImpactTooltip.tsx index 33947610b..79e662cc6 100644 --- a/packages/ui/src/components/widgets/PriceImpactTooltip.tsx +++ b/packages/ui/src/components/widgets/PriceImpactTooltip.tsx @@ -46,7 +46,7 @@ export const PriceImpactTooltip: FC = ({ /> - Swap Impact + Swap Cost = ({ if (fee.id === 'origin-gas') { return null } + // Positive platform fee = rebalancing reward paid to the user. + const isReward = fee.id === 'relayer-fee' && fee.usd.value > 0 return ( - - {fee.name} - + + + {fee.name} + + {isReward && ( + + (Reward) + + )} + {feeBreakdown.isGasSponsored && fee.usd.value === 0 ? ( Free diff --git a/packages/ui/src/utils/quote.ts b/packages/ui/src/utils/quote.ts index e0bdf4b59..3a1dfeddc 100644 --- a/packages/ui/src/utils/quote.ts +++ b/packages/ui/src/utils/quote.ts @@ -22,9 +22,22 @@ const formatUsdFee = ( ) => { const value = Number(amountUsd ?? 0) const finalValue = shouldFlipSign ? -value : value + // Explicit zero and sub-cent forms: formatDollar renders 0 as "-" and + // sub-cent negatives as "-$0.00". + let formatted: string + if (finalValue === 0) { + formatted = '$0.00' + } else if (Math.abs(finalValue) < 0.01) { + formatted = `${finalValue > 0 ? '+' : '-'}< $0.01` + } else { + formatted = formatDollar(finalValue) + if (finalValue > 0) { + formatted = `+${formatted}` + } + } return { value: finalValue, - formatted: formatDollar(finalValue) + formatted } } @@ -46,9 +59,8 @@ export const parseFees = ( // Execution fee const executionFeeUsd = expandedPriceImpact?.execution?.usd - // Relay fee + // Platform fee (v2 name: relay fee) const relayFeeUsd = expandedPriceImpact?.relay?.usd - const relayFeeIsReward = Number(relayFeeUsd ?? 0) > 0 // App fee const appFeeUsd = expandedPriceImpact?.app?.usd @@ -63,7 +75,7 @@ export const parseFees = ( raw: gasFee, formatted: `${formattedGasFee}`, usd: formatUsdFee(fees?.gas?.amountUsd, true), - name: `Deposit Gas (${selectedFrom.displayName})`, + name: `Deposit gas (${selectedFrom.displayName})`, tooltip: null, type: 'gas', id: 'origin-gas', @@ -75,7 +87,7 @@ export const parseFees = ( usd: _isGasSponsored ? { value: 0, formatted: '0' } : formatUsdFee(executionFeeUsd, false), - name: `Execution Fee (${selectedTo.displayName})`, + name: `Execution Cost (${selectedTo.displayName})`, tooltip: null, type: 'gas', id: 'destination-gas', @@ -87,7 +99,7 @@ export const parseFees = ( usd: _isGasSponsored ? { value: 0, formatted: '0' } : formatUsdFee(relayFeeUsd, false), - name: relayFeeIsReward ? 'Reward' : 'Relay Fee', + name: 'Platform Fee', tooltip: null, type: 'relayer', id: 'relayer-fee',