fix(widget): use custom label and content for partner fee (#4646) (#4651

) (cherry picked from commit fc81bb0)
cowprotocol · Jul 2, 2024 · 2d71424 · 2d71424
1 parent c4335f2
commit 2d71424
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 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
@@ -26,7 +26,7 @@ export function TradeRateDetails({ rateInfoParams }: TradeRateDetailsProps) {
       partnerFeeUsd={partnerFeeUsd}
       partnerFeeAmount={partnerFeeAmount}
       partnerFeeBps={partnerFeeBps}
-      feeTooltipMarkdown={widgetParams.content?.feeTooltipMarkdown}
+      widgetContent={widgetParams.content}
     />
   )
 

diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeFeesAndCosts/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeFeesAndCosts/index.tsx
@@ -45,7 +45,7 @@ export function TradeFeesAndCosts(props: TradeFeesAndCostsProps) {
         partnerFeeUsd={partnerFeeUsd}
         partnerFeeAmount={partnerFeeAmount}
         partnerFeeBps={partnerFeeBps}
-        feeTooltipMarkdown={widgetParams.content?.feeTooltipMarkdown}
+        widgetContent={widgetParams.content}
       />
 
       {/*Network cost*/}

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,6 +1,8 @@
 import { bpsToPercent, formatPercent } from '@cowprotocol/common-utils'
+import { CowSwapWidgetContent } from '@cowprotocol/widget-lib'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
+import ReactMarkdown from 'react-markdown'
 import { Nullish } from 'types'
 
 import * as styledEl from '../../containers/TradeBasicConfirmDetails/styled'
@@ -12,7 +14,7 @@ interface PartnerFeeRowProps {
   partnerFeeBps: number | undefined
   withTimelineDot: boolean
   alwaysRow?: boolean
-  feeTooltipMarkdown?: string
+  widgetContent?: CowSwapWidgetContent
 }
 
 export function PartnerFeeRow({
@@ -21,7 +23,7 @@ export function PartnerFeeRow({
   partnerFeeBps,
   withTimelineDot,
   alwaysRow,
-  feeTooltipMarkdown,
+  widgetContent,
 }: PartnerFeeRowProps) {
   const feeAsPercent = partnerFeeBps ? formatPercent(bpsToPercent(partnerFeeBps)) : null
   const minPartnerFeeAmount = partnerFeeAmount?.equalTo(0)
@@ -37,7 +39,9 @@ export function PartnerFeeRow({
           fiatAmount={partnerFeeUsd}
           alwaysRow={alwaysRow}
           tooltip={
-            feeTooltipMarkdown || (
+            widgetContent?.feeTooltipMarkdown ? (
+              <ReactMarkdown>{widgetContent.feeTooltipMarkdown}</ReactMarkdown>
+            ) : (
               <>
                 This fee helps pay for maintenance & improvements to the trade experience.
                 <br />
@@ -46,7 +50,7 @@ export function PartnerFeeRow({
               </>
             )
           }
-          label={`Total fee (${feeAsPercent}%)`}
+          label={`${widgetContent?.feeLabel || 'Total fee'} (${feeAsPercent}%)`}
         />
       ) : (
         <ReviewOrderModalAmountRow