fixes

Author: mgrabina

src/components/transactions/FlowCommons/TxModalDetails.tsx

@@ -25,6 +25,7 @@ export interface TxModalDetailsProps {
   disabled?: boolean;
   chainId?: number;
   children?: ReactNode;
+  showGasStation?: boolean;
 }
 
 const ArrowRightIcon = (
@@ -40,6 +41,7 @@ export const TxModalDetails: React.FC<TxModalDetailsProps> = ({
   disabled,
   children,
   chainId,
+  showGasStation = true,
 }) => {
   return (
     <Box sx={{ pt: 5 }}>
@@ -59,15 +61,17 @@ export const TxModalDetails: React.FC<TxModalDetailsProps> = ({
       >
         {children}
       </Box>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-        <GasStation
-          chainId={chainId}
-          gasLimit={parseUnits(gasLimit || '0', 'wei')}
-          skipLoad={skipLoad}
-          disabled={disabled}
-          rightComponent={slippageSelector}
-        />
-      </Box>
+      {showGasStation && (
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+          <GasStation
+            chainId={chainId}
+            gasLimit={parseUnits(gasLimit || '0', 'wei')}
+            skipLoad={skipLoad}
+            disabled={disabled}
+            rightComponent={slippageSelector}
+          />
+        </Box>
+      )}
     </Box>
   );
 };

src/components/transactions/GasStation/GasStation.tsx

@@ -1,8 +1,7 @@
 import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers';
 import { normalize } from '@aave/math-utils';
-import { Trans } from '@lingui/macro';
 import LocalGasStationIcon from '@mui/icons-material/LocalGasStation';
-import { Box, CircularProgress, Stack, Typography } from '@mui/material';
+import { Box, CircularProgress, Stack } from '@mui/material';
 import { BigNumber } from 'ethers/lib/ethers';
 import { formatUnits, parseUnits } from 'ethers/lib/utils';
 import React, { ReactNode } from 'react';
@@ -103,9 +102,7 @@ export const GasStation: React.FC<GasStationProps> = ({
               <GasTooltip />
             </>
           ) : (
-            <Typography variant="caption" color="text.secondary">
-              <Trans>This action does not require gas.</Trans>
-            </Typography>
+            '-'
           )}
         </Box>
         {rightComponent}

src/components/transactions/Switch/BaseSwitchModalContent.tsx

@@ -54,6 +54,7 @@ export interface SwitchModalCustomizableProps {
     switchProvider,
     ratesLoading,
     ratesError,
+    showGasStation,
   }: {
     user: string;
     switchRates: SwitchRatesType;
@@ -66,6 +67,7 @@ export interface SwitchModalCustomizableProps {
     switchProvider?: SwitchProvider;
     ratesLoading: boolean;
     ratesError: Error | null;
+    showGasStation?: boolean;
   }) => React.ReactNode;
   inputBalanceTitle?: string;
   outputBalanceTitle?: string;
@@ -116,6 +118,8 @@ export const BaseSwitchModalContent = ({
   });
   const switchProvider = useSwitchProvider({ chainId: selectedChainId });
 
+  const [showGasStation, setShowGasStation] = useState(switchProvider == 'paraswap');
+
   const [cowOpenOrdersTotalAmountFormatted, setCowOpenOrdersTotalAmountFormatted] = useState<
     string | undefined
   >(undefined);
@@ -274,6 +278,17 @@ export const BaseSwitchModalContent = ({
     }
   }, [switchRates, switchProvider]);
 
+  const [showSlippageWarning, setShowSlippageWarning] = useState(false);
+  useEffect(() => {
+    // Debounce to avoid race condition
+    const timeout = setTimeout(() => {
+      setShowSlippageWarning(
+        isCowProtocolRates(switchRates) && Number(slippage) < switchRates?.suggestedSlippage
+      );
+    }, 500);
+    return () => clearTimeout(timeout);
+  }, [slippage, switchRates]);
+
   // Success View
   if (switchRates && switchTxState.success) {
     return (
@@ -311,6 +326,7 @@ export const BaseSwitchModalContent = ({
           maxSlippage: Number(slippage),
           ratesLoading,
           ratesError,
+          showGasStation,
         })
       : null;
 
@@ -449,14 +465,14 @@ export const BaseSwitchModalContent = ({
               )}
 
               {swapDetailsComponent}
-              {isCowProtocolRates(switchRates) &&
-                Number(slippage) < switchRates?.suggestedSlippage && (
-                  <Warning severity="warning" icon={false} sx={{ mt: 5 }}>
-                    <Typography variant="caption">
-                      The slippage is below suggested. It may take longer or fail.
-                    </Typography>
-                  </Warning>
-                )}
+
+              {showSlippageWarning && (
+                <Warning severity="warning" icon={false} sx={{ mt: 5 }}>
+                  <Typography variant="caption">
+                    The slippage is below suggested. It may take longer or fail.
+                  </Typography>
+                </Warning>
+              )}
 
               <SwitchErrors
                 ratesError={ratesError}
@@ -473,6 +489,7 @@ export const BaseSwitchModalContent = ({
                 inputName={selectedInputToken.name}
                 outputName={selectedOutputToken.name}
                 slippage={safeSlippage.toString()}
+                setShowGasStation={setShowGasStation}
                 blocked={
                   !switchRates ||
                   Number(debounceInputAmount) > Number(selectedInputToken.balance) ||

src/components/transactions/Switch/SwitchActions.tsx

@@ -45,6 +45,7 @@ interface SwitchProps {
   switchRates?: SwitchRatesType;
   inputName: string;
   outputName: string;
+  setShowGasStation: (showGasStation: boolean) => void;
 }
 
 interface SignedParams {
@@ -66,6 +67,7 @@ export const SwitchActions = ({
   isWrongNetwork,
   chainId,
   switchRates,
+  setShowGasStation,
 }: SwitchProps) => {
   const [
     user,
@@ -122,6 +124,10 @@ export const SwitchActions = ({
     else return approvedAmount < Number(inputAmount);
   }, [approvedAmount, inputAmount, isWrongNetwork]);
 
+  useEffect(() => {
+    setShowGasStation(requiresApproval);
+  }, [requiresApproval, setShowGasStation]);
+
   const action = async () => {
     setMainTxState({ ...mainTxState, loading: true });
     if (isParaswapRates(switchRates)) {

src/components/transactions/Switch/SwitchModal.tsx

@@ -7,27 +7,22 @@ import { ModalType } from 'src/hooks/useModal';
 import { TxModalDetails } from '../FlowCommons/TxModalDetails';
 import { BaseSwitchModal } from './BaseSwitchModal';
 import { SwitchDetailsParams as SwitchDetailsParams } from './BaseSwitchModalContent';
-import { isNativeToken } from './cowprotocol.helpers';
 
 export const SwitchModal = () => {
   const switchDetails = ({
     user,
     switchRates,
     gasLimit,
     selectedChainId,
-    selectedInputToken,
     selectedOutputToken,
     safeSlippage,
-    switchProvider,
+    showGasStation,
   }: SwitchDetailsParams) => {
-    const requiresGas =
-      switchProvider !== 'cowprotocol' || isNativeToken(selectedInputToken.address);
-
     const usdValue = Number(switchRates.destUSD) * (1 - safeSlippage);
     const maxFee = Number(switchRates.srcUSD) - usdValue;
 
     return switchRates && user ? (
-      <TxModalDetails gasLimit={requiresGas ? gasLimit : undefined} chainId={selectedChainId}>
+      <TxModalDetails gasLimit={gasLimit} chainId={selectedChainId} showGasStation={showGasStation}>
         <Row
           caption={<Trans>{`Minimum ${selectedOutputToken.symbol} received`}</Trans>}
           captionVariant="caption"

src/components/transactions/Switch/cowprotocol.errors.ts

@@ -1,7 +1,7 @@
 const MESSAGE_MAP: { [key: string]: string } = {
   NoLiquidity: 'No liquidity found for the given amount and asset pair.',
   NoRoutesFound: 'No routes found with enough liquidity.',
-  SellAmountDoesNotCoverFee: 'Amount does not cover fee.',
+  SellAmountDoesNotCoverFee: 'Sell amount is too small to cover the fee.',
 };
 
 const MESSAGE_REGEX_MAP: Array<{ regex: RegExp; message: string }> = [