chore: permit modifications

src/components/infoTooltips/ApprovalTooltip.tsx

@@ -0,0 +1,19 @@
+import { Trans } from '@lingui/macro';
+
+import { Link } from '../primitives/Link';
+import { TextWithTooltip, TextWithTooltipProps } from '../TextWithTooltip';
+
+export const ApprovalTooltip = ({ ...rest }: TextWithTooltipProps) => {
+  return (
+    <TextWithTooltip {...rest}>
+      <Trans>
+        To continue you need to grant Aave smart contracts permission to move your funds from your
+        wallet. Depending on the asset, it is done by signing the permission message (gas free), or
+        by submitting an approval transaction (requires gas).{' '}
+        <Link href="https://eips.ethereum.org/EIPS/eip-2612" underline="always">
+          Learn more
+        </Link>
+      </Trans>
+    </TextWithTooltip>
+  );
+};

src/components/transactions/Borrow/BorrowActions.tsx

@@ -57,7 +57,7 @@ export const BorrowActions = ({
       handleAction={action}
       actionText={<Trans>Borrow {symbol}</Trans>}
       actionInProgressText={<Trans>Borrowing {symbol}</Trans>}
-      handleApproval={() => approval(amountToBorrow, poolAddress)}
+      handleApproval={() => approval({ amount: amountToBorrow, underlyingAsset: poolAddress })}
       requiresApproval={requiresApproval}
       preparingTransactions={loadingTxns}
       sx={sx}

src/components/transactions/FlowCommons/LeftHelperText.tsx

@@ -1,10 +1,7 @@
 import { CheckIcon } from '@heroicons/react/outline';
 import { Trans } from '@lingui/macro';
 import { Box, Typography, useTheme } from '@mui/material';
-
-import { ApprovalInfoContent } from '../../infoModalContents/ApprovalInfoContent';
-import { RetryWithApprovalInfoContent } from '../../infoModalContents/RetryWithApprovalInfoContent';
-import { TextWithModal } from '../../TextWithModal';
+import { ApprovalTooltip } from 'src/components/infoTooltips/ApprovalTooltip';
 
 export type LeftHelperTextProps = {
   error?: string;
@@ -39,30 +36,13 @@ export const LeftHelperText = ({ error, approvalHash, amount }: LeftHelperTextPr
         </>
       )}
 
-      {error && (
-        <TextWithModal
-          text={<Trans>Retry What?</Trans>}
-          iconSize={13}
-          iconColor={theme.palette.text.secondary}
-          withContentButton
-          variant="helperText"
-          color="text.secondary"
-        >
-          <RetryWithApprovalInfoContent />
-        </TextWithModal>
-      )}
-
       {!approvalHash && !error && amount && (
-        <TextWithModal
+        <ApprovalTooltip
           text={<Trans>Why do I need to approve?</Trans>}
           iconSize={13}
-          iconColor={theme.palette.text.secondary}
-          withContentButton
-          variant="helperText"
+          variant="caption"
           color="text.secondary"
-        >
-          <ApprovalInfoContent />
-        </TextWithModal>
+        />
       )}
     </Box>
   );

src/components/transactions/Repay/CollateralRepayActions.tsx

@@ -85,7 +85,9 @@ export const CollateralRepayActions = ({
       sx={sx}
       {...props}
       handleAction={action}
-      handleApproval={() => approval()}
+      handleApproval={() =>
+        approval({ amount: repayWithAmount, underlyingAsset: poolReserve.aTokenAddress })
+      }
       actionText={<Trans>Repay {symbol}</Trans>}
       actionInProgressText={<Trans>Repaying {symbol}</Trans>}
     />

src/components/transactions/Repay/RepayActions.tsx

@@ -37,12 +37,13 @@ export const RepayActions = ({
   const { currentChainId: chainId, currentMarketData } = useProtocolDataContext();
   const repay = useRootStore((state) => state.repay);
   const repayWithPermit = useRootStore((state) => state.repayWithPermit);
-
+  const tryPermit =
+    currentMarketData.v3 &&
+    permitByChainAndToken[chainId]?.[utils.getAddress(poolAddress).toLowerCase()];
   const { approval, action, requiresApproval, loadingTxns, approvalTxState, mainTxState } =
     useTransactionHandler({
       // move tryPermit to store
-      tryPermit:
-        currentMarketData.v3 && permitByChainAndToken[chainId]?.[utils.getAddress(poolAddress)],
+      tryPermit,
       handleGetTxns: async () => {
         return repay({
           amountToRepay,
@@ -85,9 +86,16 @@ export const RepayActions = ({
       sx={sx}
       {...props}
       handleAction={action}
-      handleApproval={() => approval(amountToRepay, poolAddress)}
+      handleApproval={(forceApproval) =>
+        approval({
+          amount: amountToRepay,
+          underlyingAsset: poolAddress,
+          forceApprovalTx: forceApproval,
+        })
+      }
       actionText={<Trans>Repay {symbol}</Trans>}
       actionInProgressText={<Trans>Repaying {symbol}</Trans>}
+      tryPermit={tryPermit}
     />
   );
 };

src/components/transactions/Stake/StakeActions.tsx

@@ -47,7 +47,7 @@ export const StakeActions = ({
       isWrongNetwork={isWrongNetwork}
       amount={amountToStake}
       handleAction={action}
-      handleApproval={approval}
+      handleApproval={() => approval({ amount: amountToStake, underlyingAsset: selectedToken })}
       symbol={symbol}
       requiresAmount
       actionText={<Trans>Stake</Trans>}

src/components/transactions/Supply/SupplyActions.tsx

@@ -31,12 +31,12 @@ export const SupplyActions = ({
   const { currentChainId: chainId, currentMarketData } = useProtocolDataContext();
   const supply = useRootStore((state) => state.supply);
   const supplyWithPermit = useRootStore((state) => state.supplyWithPermit);
-
+  const tryPermit =
+    currentMarketData.v3 &&
+    permitByChainAndToken[chainId]?.[utils.getAddress(poolAddress).toLowerCase()];
   const { approval, action, requiresApproval, loadingTxns, approvalTxState, mainTxState } =
     useTransactionHandler({
-      // TODO: move tryPermit
-      tryPermit:
-        currentMarketData.v3 && permitByChainAndToken[chainId]?.[utils.getAddress(poolAddress)],
+      tryPermit,
       handleGetTxns: async () => {
         return supply({
           amountToSupply,
@@ -66,12 +66,20 @@ export const SupplyActions = ({
       isWrongNetwork={isWrongNetwork}
       requiresAmount
       amount={amountToSupply}
+      symbol={symbol}
       preparingTransactions={loadingTxns}
       actionText={<Trans>Supply {symbol}</Trans>}
       actionInProgressText={<Trans>Supplying {symbol}</Trans>}
-      handleApproval={() => approval(amountToSupply, poolAddress)}
+      handleApproval={(forceApproval) =>
+        approval({
+          amount: amountToSupply,
+          underlyingAsset: poolAddress,
+          forceApprovalTx: forceApproval,
+        })
+      }
       handleAction={action}
       requiresApproval={requiresApproval}
+      tryPermit={tryPermit}
       sx={sx}
       {...props}
     />

src/components/transactions/Swap/SwapActions.tsx

@@ -74,7 +74,9 @@ export const SwapActions = ({
       handleAction={action}
       requiresAmount
       amount={amountToSwap}
-      handleApproval={() => approval(amountToSwap, poolReserve.aTokenAddress)}
+      handleApproval={() =>
+        approval({ amount: amountToSwap, underlyingAsset: poolReserve.aTokenAddress })
+      }
       requiresApproval={requiresApproval}
       actionText={<Trans>Swap</Trans>}
       actionInProgressText={<Trans>Swapping</Trans>}

src/components/transactions/TxActionsWrapper.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro';
-import { Box, BoxProps, Button, CircularProgress, Typography } from '@mui/material';
+import { Box, BoxProps, Button, CircularProgress, Typography, useTheme } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import { ReactNode } from 'react';
 import { TxStateType, useModalContext } from 'src/hooks/useModal';
@@ -14,7 +14,7 @@ interface TxActionsWrapperProps extends BoxProps {
   actionText: ReactNode;
   amount?: string;
   approvalTxState?: TxStateType;
-  handleApproval?: () => Promise<void>;
+  handleApproval?: (forceApproval?: boolean) => Promise<void>;
   handleAction: () => Promise<void>;
   isWrongNetwork: boolean;
   mainTxState: TxStateType;
@@ -23,6 +23,7 @@ interface TxActionsWrapperProps extends BoxProps {
   requiresApproval: boolean;
   symbol?: string;
   blocked?: boolean;
+  tryPermit?: boolean;
 }
 
 export const TxActionsWrapper = ({
@@ -40,9 +41,10 @@ export const TxActionsWrapper = ({
   sx,
   symbol,
   blocked,
+  tryPermit,
   ...rest
 }: TxActionsWrapperProps) => {
-  const { txError, retryWithApproval } = useModalContext();
+  const { txError } = useModalContext();
   const { watchModeOnlyAddress } = useWeb3Context();
 
   const hasApprovalError =
@@ -78,15 +80,14 @@ export const TxActionsWrapper = ({
       return null;
     if (approvalTxState?.loading)
       return { loading: true, disabled: true, content: <Trans>Approving {symbol}...</Trans> };
-    if (approvalTxState?.success) return { disabled: true, content: <Trans>Approved</Trans> };
-    if (retryWithApproval)
-      return { content: <Trans>Retry with approval</Trans>, handleClick: handleApproval };
-    return { content: <Trans>Approve to continue</Trans>, handleClick: handleApproval };
+    if (approvalTxState?.success)
+      return { disabled: true, content: <Trans>Approve Confirmed</Trans> };
+    return { content: <Trans>Approve {symbol} to continue</Trans>, handleClick: handleApproval };
   }
 
   const { content, disabled, loading, handleClick } = getMainParams();
   const approvalParams = getApprovalParams();
-
+  const theme = useTheme();
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', mt: 12, ...sx }} {...rest}>
       {requiresApproval && !watchModeOnlyAddress && (
@@ -100,7 +101,7 @@ export const TxActionsWrapper = ({
         <Button
           variant="contained"
           disabled={approvalParams.disabled || blocked}
-          onClick={approvalParams.handleClick}
+          onClick={() => approvalParams.handleClick && approvalParams.handleClick()}
           size="large"
           sx={{ minHeight: '44px' }}
           data-cy="approvalButton"
@@ -128,6 +129,25 @@ export const TxActionsWrapper = ({
           <Trans>Watch-only mode. Connect to a wallet to perform transactions.</Trans>
         </Typography>
       )}
+      {tryPermit && approvalParams && (
+        <Box sx={{ display: 'flex', pt: 4 }}>
+          <Trans>
+            <Typography variant="caption" color="text.secondary">
+              Approval doesn&apos;t work?{' '}
+            </Typography>
+            <Typography
+              variant="subheader2"
+              sx={{ color: theme.palette.info.main, cursor: 'pointer', px: 1 }}
+              onClick={() => approvalParams.handleClick && approvalParams.handleClick(true)}
+            >
+              Submit a tx
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              to approve instead.
+            </Typography>
+          </Trans>
+        </Box>
+      )}
     </Box>
   );
 };

src/components/transactions/Withdraw/WithdrawActions.tsx

@@ -51,7 +51,7 @@ export const WithdrawActions = ({
       actionInProgressText={<Trans>Withdrawing {symbol}</Trans>}
       actionText={<Trans>Withdraw {symbol}</Trans>}
       handleAction={action}
-      handleApproval={() => approval(amountToWithdraw, poolAddress)}
+      handleApproval={() => approval({ amount: amountToWithdraw, underlyingAsset: poolAddress })}
       requiresApproval={requiresApproval}
       sx={sx}
     />

src/helpers/useTransactionHandler.tsx

@@ -21,6 +21,12 @@ interface UseTransactionHandlerProps {
   deps?: DependencyList;
 }
 
+interface ApprovalProps {
+  amount?: string;
+  underlyingAsset?: string;
+  forceApprovalTx?: boolean;
+}
+
 export const useTransactionHandler = ({
   handleGetTxns,
   handleGetPermitTxns,
@@ -37,7 +43,6 @@ export const useTransactionHandler = ({
     loadingTxns,
     setLoadingTxns,
     setTxError,
-    setRetryWithApproval,
   } = useModalContext();
   const { signTxData, sendTx, getTxError } = useWeb3Context();
   const { refetchWalletBalances, refetchPoolData, refetchIncentiveData } =
@@ -102,9 +107,9 @@ export const useTransactionHandler = ({
     }
   };
 
-  const approval = async (amount?: string, underlyingAsset?: string) => {
+  const approval = async ({ amount, underlyingAsset, forceApprovalTx }: ApprovalProps) => {
     if (approvalTx) {
-      if (usePermit && amount && underlyingAsset) {
+      if (usePermit && amount && underlyingAsset && !forceApprovalTx) {
         setApprovalTxState({ ...approvalTxState, loading: true });
         try {
           // deadline is an hour after signature
@@ -134,18 +139,10 @@ export const useTransactionHandler = ({
               txHash: undefined,
               loading: false,
             });
-
-            // set use permit to false to retry with normal approval
-            setUsePermit(false);
-            setRetryWithApproval(true);
           }
         } catch (error) {
           if (!mounted.current) return;
 
-          // set use permit to false to retry with normal approval
-          setUsePermit(false);
-          setRetryWithApproval(true);
-
           const parsedError = getErrorTextFromError(error, TxAction.GAS_ESTIMATION, false);
           setTxError(parsedError);
           setApprovalTxState({