fix: update safe fee tooltip label (#5158)

cowprotocol · Dec 5, 2024 · d186042 · d186042
1 parent 47195e2
commit d186042
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 27 deletions.
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/TradeRateDetails/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/containers/TradeRateDetails/index.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useCallback } from 'react'
 
-import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { TradeTotalCostsDetails, PartnerFeeRow } from 'modules/trade'
 import { useUsdAmount } from 'modules/usdAmount'
 import { useVolumeFee, useVolumeFeeTooltip } from 'modules/volumeFee'
@@ -15,7 +14,6 @@ interface TradeRateDetailsProps {
 
 export function TradeRateDetails({ rateInfoParams }: TradeRateDetailsProps) {
   const [isFeeDetailsOpen, setFeeDetailsOpen] = useState(false)
-  const widgetParams = useInjectedWidgetParams()
   const volumeFee = useVolumeFee()
   const partnerFeeAmount = useLimitOrderPartnerFeeAmount()
   const volumeFeeTooltip = useVolumeFeeTooltip()
@@ -33,7 +31,6 @@ export function TradeRateDetails({ rateInfoParams }: TradeRateDetailsProps) {
       partnerFeeUsd={partnerFeeUsd}
       partnerFeeAmount={partnerFeeAmount}
       partnerFeeBps={partnerFeeBps}
-      widgetContent={widgetParams.content}
       volumeFeeTooltip={volumeFeeTooltip}
     />
   )

diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeBasicConfirmDetails/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeBasicConfirmDetails/index.tsx
@@ -6,7 +6,6 @@ import { Percent, Price } from '@uniswap/sdk-core'
 
 import { Nullish } from 'types'
 
-import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { useUsdAmount } from 'modules/usdAmount'
 import { useVolumeFeeTooltip } from 'modules/volumeFee'
 
@@ -64,7 +63,6 @@ export function TradeBasicConfirmDetails(props: Props) {
     account,
   } = props
   const isInvertedState = useState(false)
-  const widgetParams = useInjectedWidgetParams()
   const volumeFeeTooltip = useVolumeFeeTooltip()
   const { amountAfterFees, amountAfterSlippage } = getOrderTypeReceiveAmounts(receiveAmountInfo)
   const { networkCostsSuffix, networkCostsTooltipSuffix } = labelsAndTooltips || {}
@@ -106,7 +104,6 @@ export function TradeBasicConfirmDetails(props: Props) {
 
       <TradeFeesAndCosts
         receiveAmountInfo={receiveAmountInfo}
-        widgetParams={widgetParams}
         withTimelineDot={withTimelineDot}
         alwaysRow={alwaysRow}
         networkCostsSuffix={networkCostsSuffix}

diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeFeesAndCosts/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeFeesAndCosts/index.tsx
@@ -1,8 +1,7 @@
 import { ReactNode } from 'react'
 
-import { CowSwapWidgetAppParams } from '@cowprotocol/widget-lib'
-
 import { useUsdAmount } from 'modules/usdAmount'
+import { VolumeFeeTooltip } from 'modules/volumeFee'
 
 import { NetworkCostsRow } from '../../pure/NetworkCostsRow'
 import { PartnerFeeRow } from '../../pure/PartnerFeeRow'
@@ -11,18 +10,16 @@ import { getOrderTypeReceiveAmounts } from '../../utils/getReceiveAmountInfo'
 
 interface TradeFeesAndCostsProps {
   receiveAmountInfo: ReceiveAmountInfo | null
-  widgetParams: Partial<CowSwapWidgetAppParams>
   networkCostsSuffix?: ReactNode
   networkCostsTooltipSuffix?: ReactNode
   withTimelineDot?: boolean
   alwaysRow?: boolean
-  volumeFeeTooltip?: string
+  volumeFeeTooltip: VolumeFeeTooltip
 }
 
 export function TradeFeesAndCosts(props: TradeFeesAndCostsProps) {
   const {
     receiveAmountInfo,
-    widgetParams,
     networkCostsSuffix,
     networkCostsTooltipSuffix,
     withTimelineDot = true,
@@ -47,7 +44,6 @@ export function TradeFeesAndCosts(props: TradeFeesAndCostsProps) {
         partnerFeeUsd={partnerFeeUsd}
         partnerFeeAmount={partnerFeeAmount}
         partnerFeeBps={partnerFeeBps}
-        widgetContent={widgetParams.content}
         volumeFeeTooltip={volumeFeeTooltip}
       />
 

diff --git a/apps/cowswap-frontend/src/modules/trade/pure/PartnerFeeRow/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/PartnerFeeRow/index.tsx
@@ -1,10 +1,10 @@
 import { bpsToPercent, formatPercent, FractionUtils } from '@cowprotocol/common-utils'
-import { CowSwapWidgetContent } from '@cowprotocol/widget-lib'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
 import { Nullish } from 'types'
 
 import { WidgetMarkdownContent } from 'modules/injectedWidget'
+import { VolumeFeeTooltip } from 'modules/volumeFee'
 
 import * as styledEl from '../../containers/TradeBasicConfirmDetails/styled'
 import { ReviewOrderModalAmountRow } from '../ReviewOrderModalAmountRow'
@@ -15,8 +15,7 @@ interface PartnerFeeRowProps {
   partnerFeeBps: number | undefined
   withTimelineDot: boolean
   alwaysRow?: boolean
-  widgetContent?: CowSwapWidgetContent
-  volumeFeeTooltip?: string
+  volumeFeeTooltip: VolumeFeeTooltip
 }
 
 export function PartnerFeeRow({
@@ -25,7 +24,6 @@ export function PartnerFeeRow({
   partnerFeeBps,
   withTimelineDot,
   alwaysRow,
-  widgetContent,
   volumeFeeTooltip,
 }: PartnerFeeRowProps) {
   const feeAsPercent = partnerFeeBps ? formatPercent(bpsToPercent(partnerFeeBps)) : null
@@ -40,8 +38,8 @@ export function PartnerFeeRow({
           fiatAmount={partnerFeeUsd}
           alwaysRow={alwaysRow}
           tooltip={
-            volumeFeeTooltip ? (
-              <WidgetMarkdownContent>{volumeFeeTooltip}</WidgetMarkdownContent>
+            volumeFeeTooltip.content ? (
+              <WidgetMarkdownContent>{volumeFeeTooltip.content}</WidgetMarkdownContent>
             ) : (
               <>
                 This fee helps pay for maintenance & improvements to the trade experience.
@@ -51,7 +49,7 @@ export function PartnerFeeRow({
               </>
             )
           }
-          label={`${widgetContent?.feeLabel || 'Total fee'} (${feeAsPercent}%)`}
+          label={`${volumeFeeTooltip.label} (${feeAsPercent}%)`}
         />
       ) : (
         <ReviewOrderModalAmountRow

diff --git a/apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/TradeRateDetails/index.tsx b/apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/TradeRateDetails/index.tsx
@@ -2,7 +2,6 @@ import React, { useMemo, useState, useCallback, ReactElement } from 'react'
 
 import { CurrencyAmount } from '@uniswap/sdk-core'
 
-import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import {
   getTotalCosts,
   TradeFeesAndCosts,
@@ -50,7 +49,6 @@ export function TradeRateDetails({ rateInfoParams, deadline, isTradePriceUpdatin
     return CurrencyAmount.fromRawAmount(inputCurrency, costsExceedFeeRaw)
   }, [costsExceedFeeRaw, inputCurrency])
 
-  const widgetParams = useInjectedWidgetParams()
   const volumeFeeTooltip = useVolumeFeeTooltip()
   const networkFeeAmountUsd = useUsdAmount(networkFeeAmount).value
 
@@ -86,7 +84,6 @@ export function TradeRateDetails({ rateInfoParams, deadline, isTradePriceUpdatin
     >
       <TradeFeesAndCosts
         receiveAmountInfo={receiveAmountInfo}
-        widgetParams={widgetParams}
         withTimelineDot={false}
         networkCostsSuffix={shouldPayGas ? <NetworkCostsSuffix /> : null}
         networkCostsTooltipSuffix={<NetworkCostsTooltipSuffix />}

diff --git a/apps/cowswap-frontend/src/modules/volumeFee/hooks/useVolumeFeeTooltip.ts b/apps/cowswap-frontend/src/modules/volumeFee/hooks/useVolumeFeeTooltip.ts
@@ -1,16 +1,34 @@
 import { useAtomValue } from 'jotai'
+import { useMemo } from 'react'
+
+import { useInjectedWidgetParams } from 'modules/injectedWidget'
 
-import { useInjectedWidgetParams } from '../../injectedWidget'
 import { safeAppFeeAtom } from '../state/safeAppFeeAtom'
 
-const SAFE_FEE_TOOLTIP =
+const SAFE_FEE_TOOLTIP_CONTENT =
   'The Safe App License Fee incurred here is charged by the Safe Foundation for the display of the app within their Safe Store. The fee is automatically calculated in this quote. Part of the fees will contribute to the CoW DAO treasury that supports the CoW Community.'
+const SAFE_FEE_LABEL = 'Safe App License Fee'
+
+const SAFE_TOOLTIP = {
+  content: SAFE_FEE_TOOLTIP_CONTENT,
+  label: SAFE_FEE_LABEL,
+}
+
+export interface VolumeFeeTooltip {
+  content: string | undefined
+  label: string
+}
 
-export function useVolumeFeeTooltip() {
+export function useVolumeFeeTooltip(): VolumeFeeTooltip {
   const safeAppFee = useAtomValue(safeAppFeeAtom)
   const widgetParams = useInjectedWidgetParams()
 
-  if (safeAppFee) return SAFE_FEE_TOOLTIP
+  return useMemo(() => {
+    if (safeAppFee) return SAFE_TOOLTIP
 
-  return widgetParams.content?.feeTooltipMarkdown
+    return {
+      content: widgetParams.content?.feeTooltipMarkdown,
+      label: widgetParams.content?.feeLabel || 'Total fee',
+    }
+  }, [safeAppFee, widgetParams])
 }
diff --git a/apps/cowswap-frontend/src/modules/volumeFee/index.ts b/apps/cowswap-frontend/src/modules/volumeFee/index.ts
@@ -1,4 +1,5 @@
 export { useVolumeFee } from './hooks/useVolumeFee'
 export { useVolumeFeeTooltip } from './hooks/useVolumeFeeTooltip'
+export type { VolumeFeeTooltip } from './hooks/useVolumeFeeTooltip'
 export { volumeFeeAtom } from './state/volumeFeeAtom'
 export * from './types'