chore: permit modifications

package.json

@@ -31,8 +31,8 @@
     "test:ci": "jest --ci"
   },
   "dependencies": {
-    "@aave/contract-helpers": "1.9.0",
-    "@aave/math-utils": "1.9.0",
+    "@aave/contract-helpers": "1.9.1-adfa074321a897bbe6e354f351a09854dc744430.0+9c2eb60",
+    "@aave/math-utils": "1.9.1-adfa074321a897bbe6e354f351a09854dc744430.0+9c2eb60",
     "@emotion/cache": "11.10.3",
     "@emotion/react": "11.10.4",
     "@emotion/server": "latest",

src/components/infoTooltips/ApprovalTooltip.tsx

@@ -0,0 +1,22 @@
+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://ethereum.org/en/developers/tutorials/transfers-and-approval-of-erc-20-tokens-from-a-solidity-smart-contract/"
+          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: repayAmount, 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,19 @@ export const RepayActions = ({
       sx={sx}
       {...props}
       handleAction={action}
-      handleApproval={() => approval(amountToRepay, poolAddress)}
+      handleApproval={() => approval({ amount: amountToRepay, underlyingAsset: poolAddress })}
       actionText={<Trans>Repay {symbol}</Trans>}
       actionInProgressText={<Trans>Repaying {symbol}</Trans>}
+      approvalFallback={
+        tryPermit
+          ? () =>
+              approval({
+                amount: amountToRepay,
+                underlyingAsset: poolAddress,
+                forceApprovalTx: true,
+              })
+          : undefined
+      }
     />
   );
 };

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,23 @@ 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={() => approval({ amount: amountToSupply, underlyingAsset: poolAddress })}
       handleAction={action}
       requiresApproval={requiresApproval}
+      approvalFallback={
+        tryPermit
+          ? () =>
+              approval({
+                amount: amountToSupply,
+                underlyingAsset: poolAddress,
+                forceApprovalTx: true,
+              })
+          : undefined
+      }
       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';
@@ -23,6 +23,7 @@ interface TxActionsWrapperProps extends BoxProps {
   requiresApproval: boolean;
   symbol?: string;
   blocked?: boolean;
+  approvalFallback?: () => Promise<void>;
 }
 
 export const TxActionsWrapper = ({
@@ -40,9 +41,10 @@ export const TxActionsWrapper = ({
   sx,
   symbol,
   blocked,
+  approvalFallback,
   ...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 && (
@@ -128,6 +129,25 @@ export const TxActionsWrapper = ({
           <Trans>Watch-only mode. Connect to a wallet to perform transactions.</Trans>
         </Typography>
       )}
+      {approvalFallback && 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={() => approvalFallback()}
+            >
+              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({

src/hooks/useModal.tsx

@@ -71,8 +71,6 @@ export interface ModalContextType<T extends ModalArgsType> {
   setLoadingTxns: (loading: boolean) => void;
   txError: TxErrorType | undefined;
   setTxError: (error: TxErrorType | undefined) => void;
-  retryWithApproval: boolean;
-  setRetryWithApproval: (permit: boolean) => void;
 }
 
 export const ModalContext = createContext<ModalContextType<ModalArgsType>>(
@@ -86,7 +84,6 @@ export const ModalContextProvider: React.FC = ({ children }) => {
   // contains arbitrary key-value pairs as a modal context
   const [args, setArgs] = useState<ModalArgsType>({});
   const [approvalTxState, setApprovalTxState] = useState<TxStateType>({});
-  const [retryWithApproval, setRetryWithApproval] = useState<boolean>(false);
   const [mainTxState, setMainTxState] = useState<TxStateType>({});
   const [gasLimit, setGasLimit] = useState<string>('');
   const [loadingTxns, setLoadingTxns] = useState(false);
@@ -165,7 +162,6 @@ export const ModalContextProvider: React.FC = ({ children }) => {
           setGasLimit('');
           setTxError(undefined);
           setSwitchNetworkError(undefined);
-          setRetryWithApproval(false);
         },
         type,
         args,
@@ -179,8 +175,6 @@ export const ModalContextProvider: React.FC = ({ children }) => {
         setLoadingTxns,
         txError,
         setTxError,
-        retryWithApproval,
-        setRetryWithApproval,
       }}
     >
       {children}