feat: [CM-521] Process secondary fees for swap widget fee drawer (#1744)

immutable · May 10, 2024 · fe50da2 · fe50da2
1 parent fe1269a
commit fe50da2
Show file tree

Hide file tree

Showing 19 changed files with 823 additions and 175 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/Fees/Fees.tsx b/packages/checkout/widgets-lib/src/components/Fees/Fees.tsx
@@ -10,17 +10,13 @@ import { useState } from 'react';
 import { formatZeroAmount, tokenValueFormat } from '../../lib/utils';
 import { FeesBreakdown } from '../FeesBreakdown/FeesBreakdown';
 import { gasAmountAccordionStyles, gasAmountHeadingStyles } from './FeeStyles';
+import { FormattedFee } from '../../widgets/swap/functions/swapFees';
 
 interface FeesProps {
   gasFeeValue: string;
   gasFeeToken?: TokenInfo;
   gasFeeFiatValue: string;
-  fees: {
-    fiatAmount: string;
-    amount: string;
-    label: string;
-    prefix?: string;
-  }[];
+  fees: FormattedFee[];
   onFeesClick?: () => void;
   loading?: boolean;
   sx?: any;
@@ -82,8 +78,8 @@ export function Fees({
           {!loading && (
             <PriceDisplay
               testId="fees-gas-fee__priceDisplay"
-              fiatAmount={`~ ${t('drawers.feesBreakdown.fees.fiatPricePrefix')}${gasFeeFiatValue}`}
-              price={`~ ${gasTokenSymbol} ${formatZeroAmount(tokenValueFormat(gasFee))}`}
+              fiatAmount={`≈ ${t('drawers.feesBreakdown.fees.fiatPricePrefix')}${gasFeeFiatValue}`}
+              price={`≈ ${gasTokenSymbol} ${formatZeroAmount(tokenValueFormat(gasFee))}`}
             />
           )}
         </Accordion.TargetRightSlot>

diff --git a/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.cy.tsx b/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.cy.tsx
@@ -5,6 +5,7 @@ import { ViewContextTestComponent } from 'context/view-context/test-components/V
 import { cySmartGet } from '../../lib/testUtils';
 import { SimpleLayout } from '../SimpleLayout/SimpleLayout';
 import { FeesBreakdown } from './FeesBreakdown';
+import { FormattedFee } from '../../widgets/swap/functions/swapFees';
 
 describe('FeesBreakdown', () => {
   beforeEach(() => {
@@ -29,7 +30,7 @@ describe('FeesBreakdown', () => {
     cySmartGet('fees-breakdown-content').should('be.visible');
     cySmartGet('fee-item-total-fees').should('be.visible');
     cySmartGet('total-fees__price').should('have.text', 'IMX 1');
-    cySmartGet('total-fees__fiatAmount').should('have.text', '~ USD $0.70');
+    cySmartGet('total-fees__fiatAmount').should('have.text', '≈ USD $0.70');
   });
 
   it('should not include totals if only fees are provided', () => {
@@ -38,12 +39,12 @@ describe('FeesBreakdown', () => {
         label: 'Gas fee',
         fiatAmount: 'Approx USD $1234.0',
         amount: '0.12345',
-      },
+      } as FormattedFee,
       {
         label: 'Maker fee',
         fiatAmount: 'Approx USD $5544.0',
         amount: '1234.444',
-      },
+      } as FormattedFee,
     ];
     mount(
       <ViewContextTestComponent>
@@ -76,12 +77,12 @@ describe('FeesBreakdown', () => {
         label: 'Gas fee',
         fiatAmount: 'Approx USD $1234.0',
         amount: '0.12345',
-      },
+      } as FormattedFee,
       {
         label: 'Maker fee',
         fiatAmount: 'Approx USD $5544.0',
         amount: '1234.444',
-      },
+      } as FormattedFee,
     ];
     mount(
       <ViewContextTestComponent>

diff --git a/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.tsx b/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.tsx
@@ -6,17 +6,11 @@ import { useTranslation } from 'react-i18next';
 import { feeItemContainerStyles, feeItemLoadingStyles, feesBreakdownContentStyles } from './FeesBreakdownStyles';
 import { FeeItem } from './FeeItem';
 import { FooterLogo } from '../Footer/FooterLogo';
-
-type Fee = {
-  label: string;
-  amount: string;
-  fiatAmount: string;
-  prefix?: string;
-};
+import { FormattedFee } from '../../widgets/swap/functions/swapFees';
 
 type FeesBreakdownProps = {
   onCloseDrawer?: () => void;
-  fees: Fee[];
+  fees: FormattedFee[];
   children?: any;
   visible?: boolean;
   totalFiatAmount?: string;
@@ -62,13 +56,14 @@ export function FeesBreakdown({
               amount,
               fiatAmount,
               prefix,
+              token,
             }) => (
               <FeeItem
                 key={label}
                 label={label}
                 amount={amount}
                 fiatAmount={fiatAmount}
-                tokenSymbol={tokenSymbol}
+                tokenSymbol={token.symbol ?? ''}
                 prefix={prefix}
               />
             ))
@@ -81,7 +76,7 @@ export function FeesBreakdown({
                 label={t('drawers.feesBreakdown.total')}
                 amount={tokenValueFormat(totalAmount)}
                 fiatAmount={totalFiatAmount
-                  ? `~ ${t('drawers.feesBreakdown.fees.fiatPricePrefix')}${totalFiatAmount}`
+                  ? `≈ ${t('drawers.feesBreakdown.fees.fiatPricePrefix')}${totalFiatAmount}`
                   : formatZeroAmount('0')}
                 tokenSymbol={tokenSymbol}
                 boldLabel

diff --git a/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdownStyles.tsx b/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdownStyles.tsx
@@ -15,12 +15,12 @@ export const feeItemContainerStyles = {
 export const feeItemStyles = { display: 'flex', width: '100%' };
 
 export const feeItemLabelStyles = (boldLabel?: boolean) => ({
-  width: '50%',
+  width: '65%',
   color: boldLabel ? 'base.color.text.body.primary' : 'base.color.text.body.secondary',
 });
 
 export const feeItemPriceDisplayStyles = {
-  width: '50%',
+  width: '35%',
 };
 
 export const feeItemLoadingStyles = {

diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -115,7 +115,7 @@
       },
       "content": {
         "title": "What would you like to swap?",
-        "fiatPricePrefix": "~ USD",
+        "fiatPricePrefix": "≈ USD",
         "availableBalancePrefix": "Available"
       },
       "swapForm": {
@@ -129,7 +129,8 @@
           "inputPlaceholder": "0",
           "selectorTitle": "What would you like to swap to?"
         },
-        "buttonText": "Swap"
+        "buttonText": "Swap",
+        "conversionRate": "1 {{fromSymbol}} ≈ {{rate}} {{toSymbol}}, inclusive of {{fee}}% fee"
       },
       "fees": {
         "title": "Fees total"
@@ -454,11 +455,11 @@
       },
       "fees": {
         "title": "Gas Fee",
-        "fiatPricePrefix": "~ USD $"
+        "fiatPricePrefix": "≈ USD $"
       },
       "content": {
         "title": "How much would you like to move?",
-        "fiatPricePrefix": "~ USD",
+        "fiatPricePrefix": "≈ USD",
         "availableBalancePrefix": "Available"
       },
       "bridgeForm": {
@@ -490,7 +491,7 @@
       "submitButton": {
         "buttonText": "Confirm move"
       },
-      "fiatPricePrefix": "~ USD $"
+      "fiatPricePrefix": "≈ USD $"
     },
     "BRIDGE_FAILURE": {
       "bridgeFailureText": {
@@ -548,7 +549,7 @@
       "changeWallet": {
         "buttonText": "Change wallet"
       },
-      "fiatPricePrefix": "~ USD $",
+      "fiatPricePrefix": "≈ USD $",
       "support": {
         "body1": "Need help?",
         "body2": " Contact ",
@@ -618,14 +619,17 @@
       "total": "Total fees",
       "fees": {
         "fiatPricePrefix": "USD $",
-        "gasFeeSwap": {
-          "label": "Gas fee swap"
-        },
         "gasFeeMove": {
-          "label": "Gas fee move"
+          "label": "Gas fee"
+        },
+        "approvalFee": {
+          "label": "Approval fee"
+        },
+        "swapGasFee": {
+          "label": "Gas fee"
         },
-        "gasFeeApproval": {
-          "label": "Gas fee approval"
+        "swapSecondaryFee": {
+          "label": "{{amount}} Swap fee (factored into quote)"
         },
         "serviceFee": {
           "label": "Service fee"
@@ -646,7 +650,7 @@
     },
     "coinSelector": {
       "option": {
-        "fiatPricePrefix": "~ USD $"
+        "fiatPricePrefix": "≈ USD $"
       },
       "noCoins": "You have no available coins to select in your wallet."
     },

diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json
@@ -461,7 +461,7 @@
       },
       "fees": {
         "title": "ガス手数料",
-        "fiatPricePrefix": "~ USD $"
+        "fiatPricePrefix": "≈ USD $"
       },
       "content": {
         "title": "いくら移動しますか？",
@@ -497,7 +497,7 @@
       "submitButton": {
         "buttonText": "移動を確認"
       },
-      "fiatPricePrefix": "~ USD $"
+      "fiatPricePrefix": "≈ USD $"
     },
     "BRIDGE_FAILURE": {
       "bridgeFailureText": {
@@ -624,8 +624,21 @@
       "heading": "手数料の内訳",
       "total": "総手数料",
       "fees": {
-        "gas": {
+        "fiatPricePrefix": "USD $",
+        "gasFeeMove": {
           "label": "ガス手数料"
+        },
+        "approvalFee": {
+          "label": "承認手数料"
+        },
+        "swapGasFee": {
+          "label": "ガス手数料"
+        },
+        "swapSecondaryFee": {
+          "label": "{{amount}} スワップ手数料（見積もりに含まれる）"
+        },
+        "serviceFee": {
+          "label": "サービス手数料"
         }
       }
     },

diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json
@@ -454,7 +454,7 @@
       },
       "fees": {
         "title": "가스 요금",
-        "fiatPricePrefix": "~ USD $"
+        "fiatPricePrefix": "≈ USD $"
       },
       "content": {
         "title": "얼마나 많이 이동하시겠습니까?",
@@ -490,7 +490,7 @@
       "submitButton": {
         "buttonText": "이동 확인"
       },
-      "fiatPricePrefix": "~ USD $"
+      "fiatPricePrefix": "≈ USD $"
     },
     "BRIDGE_FAILURE": {
       "bridgeFailureText": {
@@ -617,8 +617,21 @@
       "heading": "수수료 내역",
       "total": "수수료 총액",
       "fees": {
-        "gas": {
+        "fiatPricePrefix": "USD $",
+        "gasFeeMove": {
           "label": "가스 수수료"
+        },
+        "approvalFee": {
+          "label": "승인 수수료"
+        },
+        "swapGasFee": {
+          "label": "가스 수수료"
+        },
+        "swapSecondaryFee": {
+          "label": "{{amount}} 스왑 수수료 (견적에 포함)"
+        },
+        "serviceFee": {
+          "label": "서비스 수수료"
         }
       }
     },

diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json
@@ -454,7 +454,7 @@
       },
       "fees": {
         "title": "燃气费",
-        "fiatPricePrefix": "~ 美元 $"
+        "fiatPricePrefix": "≈ 美元 $"
       },
       "content": {
         "title": "您想要转移多少金额？",
@@ -490,7 +490,7 @@
       "submitButton": {
         "buttonText": "确认转移"
       },
-      "fiatPricePrefix": "~ 美元 $"
+      "fiatPricePrefix": "≈ 美元 $"
     },
     "BRIDGE_FAILURE": {
       "bridgeFailureText": {
@@ -617,8 +617,21 @@
       "heading": "费用分解",
       "total": "费用总计",
       "fees": {
-        "gas": {
-          "label": "燃气费"
+        "fiatPricePrefix": "USD $",
+        "gasFeeMove": {
+          "label": "气体费用"
+        },
+        "approvalFee": {
+          "label": "批准费"
+        },
+        "swapGasFee": {
+          "label": "气体费用"
+        },
+        "swapSecondaryFee": {
+          "label": "{{amount}} 交换费（已计入报价）"
+        },
+        "serviceFee": {
+          "label": "服务费"
         }
       }
     },

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx
@@ -211,7 +211,7 @@ export function BridgeReviewSummary() {
   useInterval(() => fetchGasEstimate(), DEFAULT_QUOTE_REFRESH_INTERVAL);
 
   const formatFeeBreakdown = useCallback(
-    (): any => formatBridgeFees(estimates, cryptoFiatState, t),
+    () => formatBridgeFees(estimates, cryptoFiatState, t),
     [estimates],
   );