chore: permit modifications (#1325)

* feat: use updated permit function

* chore: bump package for proper export

* chore: standardize permitConfig casing

* chore: small styling changes to approval flow

* chore: remove approval component which was replaced with tooltip

* chore: remove retry with approval text placements

* chore: modify approval function for explicit parmeters and allow force overview of permit

* fix: build errors on handleApproval

* chore: run i18n

* chore: revert permit utility modification

* chore rework approval fallback params

* chore: update actions components approval params

* chore: update text and link

* chore: cleanup unused state

* feat: move tryPermit logic to zustand store

* feat: add approval tx to gas estimation

* chore: remove unused import

* feat: design updates for new approve/permit flow

* feat: add wallet approval preferences to walletSlice

* feat: add approval preference button

* feat: apply approval method toggle in TxActionsWrapper

* chore: rework params for approval toggle

* chore: bump utils package to include permit gas estimations

* feat: use wallet approval preference in tx handler

* chor: bump icon size

* chore: handle edge case with already approved action

* chore: rename variable for consistency

* test(fix): fix e-mode for polygon

* chore: review

* chore: review

* fix: localStorage override with multiple wallets

Co-authored-by: bojank93 <[email protected]>
Co-authored-by: NikitaY <[email protected]>

Author: 3 people

cypress/e2e/1-v3-markets/3-polygon-v3-market/e-mode.polygon-v3.cy.ts

@@ -45,7 +45,6 @@ const testData = {
       assets.polygonV3Market.EURS,
       assets.polygonV3Market.jEUR,
       assets.polygonV3Market.agEUR,
-      assets.polygonV3Market.miMATIC,
     ],
   },
 };

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-cae134738b8899ec4f5227d4932cb8f8ab5e4acd.0+6c081d5",
+    "@aave/math-utils": "1.9.1-cae134738b8899ec4f5227d4932cb8f8ab5e4acd.0+6c081d5",
     "@emotion/cache": "11.10.3",
     "@emotion/react": "11.10.4",
     "@emotion/server": "latest",

src/components/TextWithTooltip.tsx

@@ -9,6 +9,7 @@ export interface TextWithTooltipProps extends TypographyProps {
   text?: ReactNode;
   icon?: ReactNode;
   iconSize?: number;
+  iconMargin?: number;
   color?: string;
   // eslint-disable-next-line
   children?: ReactElement<any, string | JSXElementConstructor<any>>;
@@ -18,6 +19,7 @@ export const TextWithTooltip = ({
   text,
   icon,
   iconSize = 14,
+  iconMargin,
   color,
   children,
   ...rest
@@ -39,7 +41,7 @@ export const TextWithTooltip = ({
             borderRadius: '50%',
             p: 0,
             minWidth: 0,
-            ml: 0.5,
+            ml: iconMargin || 0.5,
           }}
         >
           <SvgIcon

src/components/infoModalContents/ApprovalInfoContent.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 and wallet you use, 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/infoModalContents/RetryWithApprovalInfoContent.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/infoTooltips/ApprovalTooltip.tsx

@@ -0,0 +1,93 @@
+import { CheckIcon } from '@heroicons/react/outline';
+import { CogIcon } from '@heroicons/react/solid';
+import { Trans } from '@lingui/macro';
+import {
+  Box,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  SvgIcon,
+  Typography,
+} from '@mui/material';
+import * as React from 'react';
+import { ApprovalMethod } from 'src/store/walletSlice';
+
+interface ApprovalMethodToggleButtonProps {
+  currentMethod: ApprovalMethod;
+  setMethod: (newMethod: ApprovalMethod) => void;
+}
+
+export const ApprovalMethodToggleButton = ({
+  currentMethod,
+  setMethod,
+}: ApprovalMethodToggleButtonProps) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Box onClick={handleClick} sx={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+        <Typography variant="subheader2" color="info.main">
+          <Trans>{currentMethod}</Trans>
+        </Typography>
+        <SvgIcon sx={{ fontSize: 16, ml: 1, color: 'info.main' }}>
+          <CogIcon />
+        </SvgIcon>
+      </Box>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+        }}
+        keepMounted={true}
+        data-cy={`approveMenu_${currentMethod}`}
+      >
+        <MenuItem
+          selected={currentMethod === ApprovalMethod.PERMIT}
+          value={ApprovalMethod.PERMIT}
+          onClick={() => {
+            if (currentMethod === ApprovalMethod.APPROVE) {
+              setMethod(ApprovalMethod.PERMIT);
+            }
+            handleClose();
+          }}
+        >
+          <ListItemText primaryTypographyProps={{ variant: 'subheader1' }}>
+            <Trans>{ApprovalMethod.PERMIT}</Trans>
+          </ListItemText>
+          <ListItemIcon>
+            <SvgIcon>{currentMethod === ApprovalMethod.PERMIT && <CheckIcon />}</SvgIcon>
+          </ListItemIcon>
+        </MenuItem>
+
+        <MenuItem
+          selected={currentMethod === ApprovalMethod.APPROVE}
+          value={ApprovalMethod.APPROVE}
+          onClick={() => {
+            if (currentMethod === ApprovalMethod.PERMIT) {
+              setMethod(ApprovalMethod.APPROVE);
+            }
+            handleClose();
+          }}
+        >
+          <ListItemText primaryTypographyProps={{ variant: 'subheader1' }}>
+            <Trans>{ApprovalMethod.APPROVE}</Trans>
+          </ListItemText>
+          <ListItemIcon>
+            <SvgIcon>{currentMethod === ApprovalMethod.APPROVE && <CheckIcon />}</SvgIcon>
+          </ListItemIcon>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};

src/components/transactions/Borrow/BorrowActions.tsx

@@ -1,11 +1,15 @@
 import { ExternalLinkIcon } from '@heroicons/react/outline';
 import { Trans } from '@lingui/macro';
-import { Box, Link, SvgIcon } from '@mui/material';
+import { Box, Link, SvgIcon, Typography } from '@mui/material';
+import { ApprovalMethodToggleButton } from 'src/components/transactions/FlowCommons/ApprovalMethodToggleButton';
 import { MOCK_SIGNED_HASH } from 'src/helpers/useTransactionHandler';
 import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
+import { useRootStore } from 'src/store/root';
+import { ApprovalMethod } from 'src/store/walletSlice';
 
 export type RightHelperTextProps = {
   approvalHash?: string;
+  tryPermit?: boolean;
 };
 
 const ExtLinkIcon = () => (
@@ -14,32 +18,48 @@ const ExtLinkIcon = () => (
   </SvgIcon>
 );
 
-export const RightHelperText = ({ approvalHash }: RightHelperTextProps) => {
+export const RightHelperText = ({ approvalHash, tryPermit }: RightHelperTextProps) => {
+  const { walletApprovalMethodPreference, setWalletApprovalMethodPreference } = useRootStore();
+  const usingPermit = tryPermit && walletApprovalMethodPreference;
   const { currentNetworkConfig } = useProtocolDataContext();
   const isSigned = approvalHash === MOCK_SIGNED_HASH;
-  // a signature will not be reviewable on etherscan
-  if (!approvalHash || isSigned) return null;
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-      }}
-    >
-      {approvalHash && (
-        <Link
-          variant="helperText"
-          href={currentNetworkConfig.explorerLinkBuilder({ tx: approvalHash })}
-          sx={{ display: 'inline-flex', alignItems: 'center' }}
-          underline="hover"
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          <Trans>Review approval tx details</Trans>
-          <ExtLinkIcon />
-        </Link>
-      )}
-    </Box>
-  );
+  // a signature is not submitted on-chain so there is no link to review
+  if (!approvalHash && !isSigned && tryPermit)
+    return (
+      <Box sx={{ display: 'inline-flex', alignItems: 'center', mb: 2 }}>
+        <Typography variant="subheader2" color="text.secondary">
+          <Trans>Approve with</Trans>&nbsp;
+        </Typography>
+        <ApprovalMethodToggleButton
+          currentMethod={walletApprovalMethodPreference}
+          setMethod={(method: ApprovalMethod) => setWalletApprovalMethodPreference(method)}
+        />
+      </Box>
+    );
+  if (approvalHash && !usingPermit)
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          pb: 1,
+        }}
+      >
+        {approvalHash && (
+          <Link
+            variant="helperText"
+            href={currentNetworkConfig.explorerLinkBuilder({ tx: approvalHash })}
+            sx={{ display: 'inline-flex', alignItems: 'center' }}
+            underline="hover"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            <Trans>Review approval tx details</Trans>
+            <ExtLinkIcon />
+          </Link>
+        )}
+      </Box>
+    );
+  return <></>;
 };