Use expandedPriceImpact from quote response

.changeset/fruity-webs-watch.md

@@ -0,0 +1,5 @@
+---
+'@relayprotocol/relay-kit-ui': patch
+---
+
+Use expandedPriceImpact from quote response

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

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react'
-import { Flex, Text, Box } from '../primitives/index.js'
+import { Anchor, Flex, Text, Box } from '../primitives/index.js'
 import Tooltip from '../primitives/Tooltip.js'
 import type { ChildrenProps } from '../widgets/SwapWidgetRenderer.js'
 
@@ -82,6 +82,16 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
               </Flex>
             )
           })}
+
+          {/* Learn More Link */}
+          <Anchor
+            href="https://docs.relay.link/references/api/api_core_concepts/fees#relay-fees"
+            target="_blank"
+            rel="noopener noreferrer"
+            css={{ color: 'primary11', fontSize: 12 }}
+          >
+            Learn more about the fees
+          </Anchor>
         </Flex>
       }
       {...tooltipProps}

packages/ui/src/components/widgets/TokenWidget/FeeBreakdownTooltip.tsx

@@ -22,42 +22,43 @@ export const FeeBreakdownTooltip: FC<FeeBreakdownTooltipProps> = ({
 }) => {
   const currencyInAmount = quote?.details?.currencyIn?.amountUsd
   const currencyInAmountFormatted = quote?.details?.currencyIn?.amountFormatted
+  const expandedPriceImpact = quote?.details?.expandedPriceImpact
 
   // Relay fee
   const relayFee = feeBreakdown?.breakdown?.find(
     (fee) => fee.id === 'relayer-fee'
   )
   const relayFeeUsd =
     relayFee?.usd.value ??
-    (quote?.fees?.relayerService?.amountUsd !== undefined
-      ? -Number(quote.fees.relayerService.amountUsd)
+    (expandedPriceImpact?.relay?.usd !== undefined
+      ? Number(expandedPriceImpact.relay.usd)
       : undefined)
 
   // Swap impact
   const swapImpactUsd =
     feeBreakdown?.totalFees?.swapImpact?.value ??
-    (quote?.details?.swapImpact?.usd !== undefined
-      ? Number(quote.details.swapImpact.usd)
+    (expandedPriceImpact?.swap?.usd !== undefined
+      ? Number(expandedPriceImpact.swap.usd)
       : undefined)
 
-  // Destination gas (fill gas)
-  const destinationGas = feeBreakdown?.breakdown?.find(
+  // Execution fee
+  const executionFee = feeBreakdown?.breakdown?.find(
     (fee) => fee.id === 'destination-gas'
   )
-  const fillGasUsd =
-    destinationGas?.usd.value ??
-    (quote?.fees?.relayerGas?.amountUsd !== undefined
-      ? -Number(quote.fees.relayerGas.amountUsd)
+  const executionFeeUsd =
+    executionFee?.usd.value ??
+    (expandedPriceImpact?.execution?.usd !== undefined
+      ? Number(expandedPriceImpact.execution.usd)
       : undefined)
 
-  const fillGasLabel = destinationGas?.name ?? 'Fill Gas'
+  const executionFeeLabel = executionFee?.name ?? 'Execution Fee'
 
   // App fee
   const appFee = feeBreakdown?.breakdown?.find((fee) => fee.id === 'app-fee')
   const appFeeUsd =
     appFee?.usd.value ??
-    (quote?.fees?.app?.amountUsd !== undefined
-      ? Number(quote.fees.app.amountUsd)
+    (expandedPriceImpact?.app?.usd !== undefined
+      ? Number(expandedPriceImpact.app.usd)
       : undefined)
 
   const tokenAmountFormatted = formatDollar(
@@ -69,8 +70,8 @@ export const FeeBreakdownTooltip: FC<FeeBreakdownTooltipProps> = ({
   const swapImpactFormatted = formatDollar(
     swapImpactUsd !== undefined ? Math.abs(swapImpactUsd) : undefined
   )
-  const fillGasFormatted = formatDollar(
-    fillGasUsd !== undefined ? Math.abs(fillGasUsd) : undefined
+  const executionFeeFormatted = formatDollar(
+    executionFeeUsd !== undefined ? Math.abs(executionFeeUsd) : undefined
   )
   const appFeeFormatted =
     appFee?.usd.formatted ??
@@ -118,18 +119,18 @@ export const FeeBreakdownTooltip: FC<FeeBreakdownTooltipProps> = ({
             </Flex>
           )}
 
-          {/* Fill Gas Row */}
-          {fillGasUsd !== undefined && fillGasFormatted !== '-' && (
+          {/* Execution Fee Row */}
+          {executionFeeUsd !== undefined && executionFeeFormatted !== '-' && (
             <Flex align="center" css={{ width: '100%', mb: '2' }}>
               <Text style="subtitle2" color="subtle" css={{ mr: 'auto' }}>
-                {fillGasLabel}
+                {executionFeeLabel}
               </Text>
-              {feeBreakdown?.isGasSponsored && fillGasUsd === 0 ? (
+              {feeBreakdown?.isGasSponsored && executionFeeUsd === 0 ? (
                 <Text style="subtitle2" color="success">
                   Free
                 </Text>
               ) : (
-                <Text style="subtitle2">{fillGasFormatted}</Text>
+                <Text style="subtitle2">{executionFeeFormatted}</Text>
               )}
             </Flex>
           )}

packages/ui/src/utils/quote.ts

@@ -28,32 +28,26 @@ export const parseFees = (
   quote?: ReturnType<typeof useQuote>['data']
 ): FeeBreakdown => {
   const fees = quote?.fees
+  const expandedPriceImpact = quote?.details?.expandedPriceImpact
+
   const gasFee = BigInt(fees?.gas?.amount ?? 0)
   const formattedGasFee = formatBN(
     gasFee,
     5,
     Number(fees?.gas?.currency?.decimals ?? 18)
   )
-  const relayerGasFee = BigInt(fees?.relayerGas?.amount ?? 0)
-  const formattedRelayerGas = formatBN(
-    relayerGasFee,
-    5,
-    Number(fees?.relayerGas?.currency?.decimals ?? 18)
-  )
-  const relayerFee = BigInt(fees?.relayerService?.amount ?? 0)
-  const relayerFeeIsReward = relayerFee < 0
-  const formattedRelayer = relayerFeeIsReward
-    ? formatBN(
-        BigInt(fees?.relayerService?.amount?.replace('-', '') ?? 0),
-        5,
-        Number(fees?.relayerService?.currency?.decimals ?? 18)
-      )
-    : formatBN(
-        relayerFee,
-        5,
-        Number(fees?.relayerService?.currency?.decimals ?? 18)
-      )
-  const appFee = BigInt(fees?.app?.amount ?? 0)
+
+  // Execution fee
+  const executionFeeUsd = expandedPriceImpact?.execution?.usd
+
+  // Relay fee
+  const relayFeeUsd = expandedPriceImpact?.relay?.usd
+  const relayFeeIsReward = Number(relayFeeUsd ?? 0) > 0
+
+  // App fee
+  const appFeeUsd = expandedPriceImpact?.app?.usd
+  const hasAppFee = appFeeUsd && Number(appFeeUsd) !== 0
+
   const totalFeesUsd =
     Number(fees?.relayer?.amountUsd ?? 0) + Number(fees?.app?.amountUsd ?? 0)
   const _isGasSponsored = isGasSponsored(quote)
@@ -70,44 +64,37 @@ export const parseFees = (
       currency: fees?.gas?.currency
     },
     {
-      raw: _isGasSponsored ? 0n : relayerGasFee,
-      formatted: _isGasSponsored ? '0' : `${formattedRelayerGas}`,
+      raw: 0n,
+      formatted: '0',
       usd: _isGasSponsored
         ? { value: 0, formatted: '0' }
-        : formatUsdFee(fees?.relayerGas?.amountUsd, true),
-      name: `Fill Gas (${selectedTo.displayName})`,
+        : formatUsdFee(executionFeeUsd, false),
+      name: `Execution Fee (${selectedTo.displayName})`,
       tooltip: null,
       type: 'gas',
       id: 'destination-gas',
-      currency: fees?.relayerGas?.currency
+      currency: fees?.relayer?.currency
     },
     {
-      raw: _isGasSponsored ? 0n : relayerFee,
-      formatted: _isGasSponsored
-        ? '0'
-        : `${relayerFeeIsReward ? '+' : '-'}${formattedRelayer}`,
+      raw: 0n,
+      formatted: '0',
       usd: _isGasSponsored
         ? { value: 0, formatted: '0' }
-        : formatUsdFee(fees?.relayerService?.amountUsd, true),
-      name: relayerFeeIsReward ? 'Reward' : 'Relay Fee',
+        : formatUsdFee(relayFeeUsd, false),
+      name: relayFeeIsReward ? 'Reward' : 'Relay Fee',
       tooltip: null,
       type: 'relayer',
       id: 'relayer-fee',
-      currency: fees?.relayerService?.currency
+      currency: fees?.relayer?.currency
     }
   ]
-  if (appFee) {
-    const formattedAppFee = formatBN(
-      appFee,
-      5,
-      Number(fees?.app?.currency?.decimals ?? 18)
-    )
+  if (hasAppFee) {
     breakdown.push({
-      raw: _isGasSponsored ? 0n : appFee,
-      formatted: _isGasSponsored ? '0' : `${formattedAppFee}`,
+      raw: 0n,
+      formatted: '0',
       usd: _isGasSponsored
         ? { value: 0, formatted: '0' }
-        : formatUsdFee(fees?.app?.amountUsd, true),
+        : formatUsdFee(appFeeUsd, false),
       name: 'App Fee',
       tooltip: null,
       type: 'relayer',
@@ -146,7 +133,7 @@ export const parseFees = (
           ? formatDollar(parseFloat(quote?.details?.totalImpact?.usd ?? 0))
           : undefined,
       priceImpactColor,
-      swapImpact: formatUsdFee(quote?.details?.swapImpact?.usd, false)
+      swapImpact: formatUsdFee(expandedPriceImpact?.swap?.usd, false)
     },
     isGasSponsored: _isGasSponsored
   }