feat: add message about flash loan fee when required

cypress/e2e/1-v3-markets/8-bnb-v3-market/0-assets/usdc.bnb-v3.cy.ts

@@ -76,8 +76,8 @@ const testData = {
   },
 };
 
-describe.skip('USDbC INTEGRATION SPEC, BASE V3 MARKET', () => {
-  const skipTestState = skipState(true);
+describe('USDbC INTEGRATION SPEC, BASE V3 MARKET', () => {
+  const skipTestState = skipState(false);
   configEnvWithTenderlyBnbFork({
     v3: true,
     tokens: tokenSet(tokensToRequest),

src/components/transactions/FlowCommons/TxModalDetails.tsx

@@ -1,7 +1,7 @@
 import { ReserveIncentiveResponse } from '@aave/math-utils/dist/esm/formatters/incentive/calculate-reserve-incentives';
 import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
 import { Trans } from '@lingui/macro';
-import { Box, FormControlLabel, Skeleton, SvgIcon, Switch, Typography } from '@mui/material';
+import { Box, FormControlLabel, Skeleton, Stack, SvgIcon, Switch, Typography } from '@mui/material';
 import { parseUnits } from 'ethers/lib/utils';
 import React, { ReactNode } from 'react';
 import {
@@ -10,6 +10,7 @@ import {
   UnavailableDueToIsolationBadge,
 } from 'src/components/isolationMode/IsolatedBadge';
 import { Row } from 'src/components/primitives/Row';
+import { TextWithTooltip } from 'src/components/TextWithTooltip';
 import { CollateralType } from 'src/helpers/types';
 
 import { HealthFactorNumber } from '../../HealthFactorNumber';
@@ -280,23 +281,45 @@ export const DetailsIncentivesLine = ({
   );
 };
 
+export const HealthFactorFlashloanFeeCaption = ({ fee }: { fee: string }) => {
+  return (
+    <Stack justifyContent="space-between">
+      <Trans>Health factor</Trans>
+      <Stack sx={{ mt: 0.5 }} direction="row" alignItems="center">
+        <Typography variant="helperText" color="text.secondary">
+          <Trans>Flash loan fee {fee}</Trans>
+        </Typography>
+        <TextWithTooltip>
+          <Trans>
+            Due to a low health factor (or if a reserve is frozen), a flash loan is required to
+            perform this action, which incurs a fee. A portion of the fee goes to liquidity
+            providers, while the rest goes to the protocol treasury.
+          </Trans>
+        </TextWithTooltip>
+      </Stack>
+    </Stack>
+  );
+};
+
 export interface DetailsHFLineProps {
   healthFactor: string;
   futureHealthFactor: string;
   visibleHfChange: boolean;
   loading?: boolean;
+  caption?: ReactNode;
 }
 
 export const DetailsHFLine = ({
   healthFactor,
   futureHealthFactor,
   visibleHfChange,
   loading = false,
+  caption,
 }: DetailsHFLineProps) => {
   if (healthFactor === '-1' && futureHealthFactor === '-1') return null;
   return (
     <Row
-      caption={<Trans>Health factor</Trans>}
+      caption={caption ? caption : <Trans>Health factor</Trans>}
       captionVariant="description"
       mb={4}
       align="flex-start"

src/components/transactions/Repay/CollateralRepayModalContent.tsx

@@ -20,10 +20,10 @@ import {
 } from 'src/hooks/paraswap/common';
 import { useCollateralRepaySwap } from 'src/hooks/paraswap/useCollateralRepaySwap';
 import { useModalContext } from 'src/hooks/useModal';
-import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { useZeroLTVBlockingWithdraw } from 'src/hooks/useZeroLTVBlockingWithdraw';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { ListSlippageButton } from 'src/modules/dashboard/lists/SlippageList';
+import { useRootStore } from 'src/store/root';
 import { calculateHFAfterRepay } from 'src/utils/hfUtils';
 
 import { Asset, AssetInput } from '../AssetInput';
@@ -32,6 +32,7 @@ import { TxSuccessView } from '../FlowCommons/Success';
 import {
   DetailsHFLine,
   DetailsNumberLineWithSub,
+  HealthFactorFlashloanFeeCaption,
   TxModalDetails,
 } from '../FlowCommons/TxModalDetails';
 import { ErrorType, useFlashloan } from '../utils';
@@ -48,7 +49,12 @@ export function CollateralRepayModalContent({
 }: ModalWrapperProps & { debtType: InterestRate; user: ExtendedFormattedUser }) {
   const { reserves, userReserves } = useAppDataContext();
   const { gasLimit, txError, mainTxState } = useModalContext();
-  const { currentChainId, currentNetworkConfig } = useProtocolDataContext();
+  const [currentChainId, currentNetworkConfig, currentMarketData] = useRootStore((store) => [
+    store.currentChainId,
+    store.currentNetworkConfig,
+    store.currentMarketData,
+  ]);
+
   const { currentAccount } = useWeb3Context();
 
   // List of tokens eligble to repay with, ordered by USD value
@@ -353,6 +359,11 @@ export function CollateralRepayModalContent({
           healthFactor={user?.healthFactor}
           futureHealthFactor={hfAfterSwap.toString(10)}
           loading={loadingSkeleton}
+          caption={
+            shouldUseFlashloan && (
+              <HealthFactorFlashloanFeeCaption fee={currentMarketData.v3 ? '0.05%' : '0.09%'} />
+            )
+          }
         />
         <DetailsNumberLineWithSub
           description={<Trans>Borrow balance after repay</Trans>}

src/components/transactions/Swap/SwapModalContent.tsx

@@ -15,10 +15,10 @@ import { minimumReceivedAfterSlippage } from 'src/hooks/paraswap/common';
 import { useCollateralSwap } from 'src/hooks/paraswap/useCollateralSwap';
 import { getDebtCeilingData } from 'src/hooks/useAssetCaps';
 import { useModalContext } from 'src/hooks/useModal';
-import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { useZeroLTVBlockingWithdraw } from 'src/hooks/useZeroLTVBlockingWithdraw';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { ListSlippageButton } from 'src/modules/dashboard/lists/SlippageList';
+import { useRootStore } from 'src/store/root';
 import { remainingCap } from 'src/utils/getMaxAmountAvailableToSupply';
 import { displayGhoForMintableMarket } from 'src/utils/ghoUtilities';
 import { calculateHFAfterSwap } from 'src/utils/hfUtils';
@@ -47,7 +47,14 @@ export const SwapModalContent = ({
   user,
 }: ModalWrapperProps & { user: ExtendedFormattedUser }) => {
   const { reserves, marketReferencePriceInUsd } = useAppDataContext();
-  const { currentChainId, currentMarket, currentNetworkConfig } = useProtocolDataContext();
+  const [currentChainId, currentMarket, currentMarketData, currentNetworkConfig] = useRootStore(
+    (store) => [
+      store.currentChainId,
+      store.currentMarket,
+      store.currentMarketData,
+      store.currentNetworkConfig,
+    ]
+  );
   const { currentAccount } = useWeb3Context();
   const { gasLimit, mainTxState: supplyTxState, txError } = useModalContext();
 
@@ -330,6 +337,7 @@ export const SwapModalContent = ({
           toAmount={outputAmount}
           fromAmount={amount === '' ? '0' : amount}
           loading={loadingSkeleton}
+          flashloanFee={!shouldUseFlashloan ? undefined : currentMarketData.v3 ? '0.05%' : '0.09%'}
         />
       </TxModalDetails>
 

src/components/transactions/Swap/SwapModalDetails.tsx

@@ -11,6 +11,7 @@ import {
   DetailsHFLine,
   DetailsIncentivesLine,
   DetailsNumberLine,
+  HealthFactorFlashloanFeeCaption,
 } from 'src/components/transactions/FlowCommons/TxModalDetails';
 import { CollateralType } from 'src/helpers/types';
 
@@ -25,6 +26,7 @@ export type SupplyModalDetailsProps = {
   toAmount: string;
   fromAmount: string;
   loading: boolean;
+  flashloanFee?: string;
 };
 
 export const SwapModalDetails = ({
@@ -36,6 +38,7 @@ export const SwapModalDetails = ({
   toAmount,
   fromAmount,
   loading,
+  flashloanFee,
 }: SupplyModalDetailsProps) => {
   const sourceAmountAfterSwap = valueToBigNumber(swapSource.underlyingBalance).minus(
     valueToBigNumber(fromAmount)
@@ -65,6 +68,7 @@ export const SwapModalDetails = ({
           futureHealthFactor={healthFactorAfterSwap}
           visibleHfChange={showHealthFactor}
           loading={loading}
+          caption={flashloanFee && <HealthFactorFlashloanFeeCaption fee={flashloanFee} />}
         />
       )}
       <DetailsNumberLine

src/locales/en/messages.po

@@ -974,6 +974,10 @@ msgstr "Docs"
 msgid "Download"
 msgstr "Download"
 
+#: src/components/transactions/FlowCommons/TxModalDetails.tsx
+msgid "Due to a low health factor (or if a reserve is frozen), a flash loan is required to perform this action, which incurs a fee. A portion of the fee goes to liquidity providers, while the rest goes to the protocol treasury."
+msgstr "Due to a low health factor (or if a reserve is frozen), a flash loan is required to perform this action, which incurs a fee. A portion of the fee goes to liquidity providers, while the rest goes to the protocol treasury."
+
 #: src/components/transactions/Repay/CollateralRepayModalContent.tsx
 #: src/components/transactions/Swap/SwapModalContent.tsx
 msgid "Due to health factor impact, a flashloan is required to perform this transaction, but Aave Governance has disabled flashloan availability for this asset. Try lowering the amount or supplying additional collateral."
@@ -1172,6 +1176,10 @@ msgstr "Filter"
 msgid "Fixed rate"
 msgstr "Fixed rate"
 
+#: src/components/transactions/FlowCommons/TxModalDetails.tsx
+msgid "Flash loan fee {fee}"
+msgstr "Flash loan fee {fee}"
+
 #: src/components/infoTooltips/MigrationDisabledTooltip.tsx
 msgid "Flashloan is disabled for this asset, hence this position cannot be migrated."
 msgstr "Flashloan is disabled for this asset, hence this position cannot be migrated."
@@ -1244,6 +1252,7 @@ msgstr "Governance"
 msgid "Greek"
 msgstr "Greek"
 
+#: src/components/transactions/FlowCommons/TxModalDetails.tsx
 #: src/components/transactions/FlowCommons/TxModalDetails.tsx
 #: src/modules/dashboard/DashboardTopPanel.tsx
 #: src/modules/dashboard/LiquidationRiskParametresModal/LiquidationRiskParametresModal.tsx