@rango-dev/widget-embedded 0.62.2-next.1 → 0.62.2-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.62.2-next.1",
+  "version": "0.62.2-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -65,4 +65,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Quote/Quote.tsx

@@ -362,7 +362,6 @@ export function Quote(props: QuoteProps) {
           quote={quote}
           fullExpandedMode
           time={totalTime}
-          fee={totalFee}
           feeWarning={feeWarning}
           timeWarning={timeWarning}
           showModalFee={showModalFee}
@@ -415,7 +414,6 @@ export function Quote(props: QuoteProps) {
           <QuoteCostDetails
             quote={quote}
             time={totalTime}
-            fee={totalFee}
             feeWarning={feeWarning}
             timeWarning={timeWarning}
             showModalFee={showModalFee}

package/src/components/Quote/Quote.types.ts

@@ -1,6 +1,5 @@
 import type { QuoteError, QuoteWarning, SelectedQuote } from '../../types';
 import type { Step } from '@rango-dev/ui';
-import type BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
 
 export type QuoteProps = {
@@ -46,7 +45,6 @@ export type QuoteTriggerImagesProps = {
 export type QuoteCostDetailsProps = {
   quote: SelectedQuote | null;
   steps: number;
-  fee: BigNumber;
   time: string;
   feeWarning?: boolean;
   timeWarning?: boolean;

package/src/components/Quote/QuoteCostDetails.tsx

@@ -1,6 +1,5 @@
 import type { QuoteCostDetailsProps } from './Quote.types';
 import type { NameOfFees } from '../../constants/quote';
-import type BigNumber from 'bignumber.js';
 
 import { i18n } from '@lingui/core';
 import {
@@ -12,6 +11,7 @@ import {
   QuoteCost,
   Typography,
 } from '@rango-dev/ui';
+import BigNumber from 'bignumber.js';
 import React, { useState } from 'react';
 
 import { getFeeLabel } from '../../constants/quote';
@@ -62,7 +62,6 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const {
     steps,
     quote,
-    fee,
     time,
     feeWarning,
     timeWarning,
@@ -73,8 +72,20 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const container = fullExpandedMode ? getExpanded() : getContainer();
 
   const feesGroup = getFeesGroup(swaps);
+
+  /*
+   * The "Total Payable Fee" must reflect only the fees the user actually pays
+   * (feesGroup.payable). We sum the USD value of every payable fee group and use
+   * it for both the collapsed summary and the itemized rows in the modal, so the
+   * two never disagree.
+   */
+  const totalPayableFee = Object.values(feesGroup.payable).reduce(
+    (acc: BigNumber, fees) => acc.plus(getTotalFeesInUsd(fees)),
+    new BigNumber(0)
+  );
+
   const roundedFee = numberToString(
-    fee,
+    totalPayableFee,
     GAS_FEE_MIN_DECIMALS,
     GAS_FEE_MAX_DECIMALS
   );
@@ -181,7 +192,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
             <Typography variant="label" size="medium">
               $
               {numberToString(
-                fee,
+                totalPayableFee,
                 USD_VALUE_MIN_DECIMALS,
                 USD_VALUE_MAX_DECIMALS
               )}