diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/TradeRateDetails/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/containers/TradeRateDetails/index.tsx index 1508275f31..8817f5a27a 100644 --- 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 index d636ab137b..adbbfb6a31 100644 --- 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) { 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 index fa693754c9..00f06173dd 100644 --- 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 ? ( - {volumeFeeTooltip} + volumeFeeTooltip.content ? ( + {volumeFeeTooltip.content} ) : ( <> 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}%)`} /> ) : ( : null} networkCostsTooltipSuffix={} diff --git a/apps/cowswap-frontend/src/modules/volumeFee/hooks/useVolumeFeeTooltip.ts b/apps/cowswap-frontend/src/modules/volumeFee/hooks/useVolumeFeeTooltip.ts index 750b3aa0b2..301567b23c 100644 --- 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 index 6264d784eb..5032efb982 100644 --- 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'