Align swap widget fee naming and signed fee display

.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".

packages/ui/src/components/widgets/FeeBreakdown.tsx

@@ -118,7 +118,7 @@ const FeeBreakdown: FC<Props> = ({
       )
     },
     {
-      title: 'Network cost',
+      title: 'Deposit gas',
       value: (
         <Flex align="center" className="relay:gap-1">
           <FontAwesomeIcon
@@ -174,7 +174,10 @@ const FeeBreakdown: FC<Props> = ({
           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)]"
         >
           <div className="relay:mt-0 relay:mb-0 relay:px-3 relay:py-[12px] relay:w-full relay:flex relay:justify-center">
-            <FetchingQuoteLoader isLoading={isFetchingQuote} containerClassName="relay:!my-0 relay:!py-0" />
+            <FetchingQuoteLoader
+              isLoading={isFetchingQuote}
+              containerClassName="relay:!my-0 relay:!py-0"
+            />
           </div>
         </Box>
       )

packages/ui/src/components/widgets/PriceImpactTooltip.tsx

@@ -46,7 +46,7 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
           />
           <Flex align="center" className="relay:w-full">
             <Text style="subtitle3" color="subtle" className="relay:mr-auto">
-              Swap Impact
+              Swap Cost
             </Text>
             <Text
               style="subtitle3"
@@ -59,11 +59,20 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
             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 (
               <Flex key={fee.id} align="center" className="relay:w-full">
-                <Text style="subtitle3" color="subtle" className="relay:mr-auto">
-                  {fee.name}
-                </Text>
+                <Flex align="center" className="relay:mr-auto relay:gap-1">
+                  <Text style="subtitle3" color="subtle">
+                    {fee.name}
+                  </Text>
+                  {isReward && (
+                    <Text style="subtitle3" color="success">
+                      (Reward)
+                    </Text>
+                  )}
+                </Flex>
                 {feeBreakdown.isGasSponsored && fee.usd.value === 0 ? (
                   <Text style="subtitle3" color="success">
                     Free

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',