fix: Fix stargate fee display issue

bnb-chain · Dec 30, 2024 · 6a85850 · 6a85850
1 parent 10d6a39
commit 6a85850
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 29 deletions.
diff --git a/packages/canonical-bridge-widget/src/core/utils/string.ts b/packages/canonical-bridge-widget/src/core/utils/string.ts
@@ -1,5 +1,6 @@
 import { MIN_FEE } from '@/core/constants';
 import { formatNumber } from '@/core/utils/number';
+import { IFeeDetails } from '@/modules/aggregator';
 
 export function truncateStr(str: string, headLen = 6, tailLen = 6) {
   if (!str) {
@@ -44,6 +45,22 @@ export function formatFeeAmount(amount: string | number) {
   }
 }
 
+export function formatRouteFees(feeList: IFeeDetails[]) {
+  const result = feeList.reduce((acc: { [key: string]: number }, item) => {
+    const symbol = item.symbol;
+    const value = Number(item.value);
+    if (symbol && !acc[symbol]) acc[symbol] = 0;
+    acc[symbol] += value;
+    return acc;
+  }, {} as { [key: string]: number });
+  const resultString = Object.keys(result)
+    .map((symbol) => {
+      return `${formatFeeAmount(result[symbol])} ${symbol}`;
+    })
+    .join(' + ');
+  return resultString ? resultString : '';
+}
+
 export function utf8ToHex(utf8Str: any) {
   return Array.from(utf8Str)
     .map((char: any) => char.charCodeAt(0).toString(16).padStart(2, '0'))

diff --git a/...onical-bridge-widget/src/modules/aggregator/adapters/deBridge/hooks/useGetDeBridgeFees.ts b/...onical-bridge-widget/src/modules/aggregator/adapters/deBridge/hooks/useGetDeBridgeFees.ts
@@ -7,19 +7,15 @@ import { useIntl } from '@bnb-chain/space';
 import { formatNumber } from '@/core/utils/number';
 import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider';
 import { DeBridgeAdapter } from '@/modules/aggregator/adapters/deBridge/DeBridgeAdapter';
-import { formatFeeAmount } from '@/core/utils/string';
+import { formatRouteFees } from '@/core/utils/string';
 import { useAdapter } from '@/modules/aggregator/hooks/useAdapter';
 import { setRouteError, setRouteFees } from '@/modules/transfer/action';
 import { useToTokenInfo } from '@/modules/transfer/hooks/useToTokenInfo';
 import { useGetTokenBalance } from '@/core/contract/hooks/useGetTokenBalance';
 import { ERC20_TOKEN } from '@/core/contract/abi';
 import { useNativeCurrency } from '@/modules/aggregator/hooks/useNativeCurrency';
 import { useSolanaBalance } from '@/modules/wallet/hooks/useSolanaBalance';
-
-export interface IFeeDetails {
-  value: string;
-  symbol: string;
-}
+import { IFeeDetails } from '@/modules/aggregator';
 
 export const useGetDeBridgeFees = () => {
   const dispatch = useAppDispatch();
@@ -213,18 +209,7 @@ export const useGetDeBridgeFees = () => {
         dispatch(setRouteError({ deBridge: 'Failed to get gas fee' }));
         isFailedToGetGas = true;
       }
-      const result = feeList.reduce((acc: { [key: string]: number }, item) => {
-        const symbol = item.symbol;
-        const value = Number(item.value);
-        if (symbol && !acc[symbol]) acc[symbol] = 0;
-        acc[symbol] += value;
-        return acc;
-      }, {} as { [key: string]: number });
-      const resultString = Object.keys(result)
-        .map((symbol) => {
-          return `${formatFeeAmount(result[symbol])} ${symbol}`;
-        })
-        .join(' + ');
+      const resultString = formatRouteFees(feeList);
 
       dispatch(
         setRouteFees({

diff --git a/...onical-bridge-widget/src/modules/aggregator/adapters/stargate/hooks/useGetStarGateFees.ts b/...onical-bridge-widget/src/modules/aggregator/adapters/stargate/hooks/useGetStarGateFees.ts
@@ -12,10 +12,11 @@ import { STARGATE_POOL } from '@/modules/aggregator/adapters/stargate/abi/starga
 import { useGetTokenBalance } from '@/core/contract/hooks/useGetTokenBalance';
 import { setRouteError, setRouteFees } from '@/modules/transfer/action';
 import { useBridgeSDK } from '@/core/hooks/useBridgeSDK';
-import { formatFeeAmount } from '@/core/utils/string';
+import { formatRouteFees } from '@/core/utils/string';
 import { useGetNativeToken } from '@/modules/transfer/hooks/useGetNativeToken';
 import { ERC20_TOKEN } from '@/core/contract/abi';
 import { useIsWalletCompatible } from '@/modules/wallet/hooks/useIsWalletCompatible';
+import { IFeeDetails } from '@/modules/aggregator';
 
 export const useGetStargateFees = () => {
   const dispatch = useAppDispatch();
@@ -67,11 +68,11 @@ export const useGetStargateFees = () => {
   const stargateFeeSorting = useCallback(
     // fees are response of quoteOFT
     async (fees: any) => {
-      let feeContent = '';
       let nativeTokenFee = null;
       const feeBreakdown = [];
       let isFailedToGetGas = false;
       let isDisplayError = false;
+      const feeList: IFeeDetails[] = [];
 
       const receiver = address || DEFAULT_ADDRESS;
       const bridgeAddress = selectedToken?.stargate?.raw?.address as `0x${string}`;
@@ -96,10 +97,11 @@ export const useGetStargateFees = () => {
               BigInt(Math.abs(Number(proFee))),
               getToDecimals().stargate || 18,
             );
-            if (!!protocolFee) {
-              feeContent +=
-                (!!feeContent ? ` + ` : '') +
-                `${`${formatFeeAmount(protocolFee)} ${toTokenInfo?.symbol}`}`;
+            if (!!protocolFee && toTokenInfo?.symbol) {
+              feeList.push({
+                symbol: toTokenInfo?.symbol,
+                value: protocolFee,
+              });
               feeBreakdown.push({
                 label: formatMessage({ id: 'route.option.info.protocol-fee' }),
                 value: `${formatNumber(Number(protocolFee), 8)} ${toTokenInfo?.symbol}` || '',
@@ -204,21 +206,24 @@ export const useGetStargateFees = () => {
             isFailedToGetGas = true;
           }
 
-          if (nativeTokenFee !== null) {
-            feeContent +=
-              (!!feeContent ? ` + ` : '') + `${formatFeeAmount(nativeTokenFee)} ${nativeToken}`;
+          if (nativeTokenFee !== null && nativeToken) {
+            feeList.push({
+              symbol: nativeToken,
+              value: String(nativeTokenFee),
+            });
           }
+          const feeSummary = formatRouteFees(feeList);
           dispatch(
             setRouteFees({
               stargate: {
-                summary: !!feeContent ? feeContent : '--',
+                summary: feeSummary,
                 breakdown: feeBreakdown,
               },
             }),
           );
           nativeTokenFee = null;
           return {
-            summary: feeContent ? feeContent : '--',
+            summary: feeSummary ? feeSummary : '--',
             breakdown: feeBreakdown,
             isFailedToGetGas,
             isDisplayError,

diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/types.ts b/packages/canonical-bridge-widget/src/modules/aggregator/types.ts
@@ -206,3 +206,8 @@ export type AdapterType =
   | StargateAdapter
   | LayerZeroAdapter
   | MesonAdapter;
+
+export interface IFeeDetails {
+  value: string;
+  symbol: string;
+}