Skip to content

Commit 46f6d96

Browse files
defispartanbojanaaveMareskoY
authored and
grothem
committed
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]>
1 parent 06cddce commit 46f6d96

25 files changed

+515
-401
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
"test:ci": "jest --ci"
3232
},
3333
"dependencies": {
34-
"@aave/contract-helpers": "1.9.0",
35-
"@aave/math-utils": "1.9.0",
34+
"@aave/contract-helpers": "1.9.1-cae134738b8899ec4f5227d4932cb8f8ab5e4acd.0+6c081d5",
35+
"@aave/math-utils": "1.9.1-cae134738b8899ec4f5227d4932cb8f8ab5e4acd.0+6c081d5",
3636
"@emotion/cache": "11.10.3",
3737
"@emotion/react": "11.10.4",
3838
"@emotion/server": "latest",

‎src/components/TextWithTooltip.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface TextWithTooltipProps extends TypographyProps {
99
text?: ReactNode;
1010
icon?: ReactNode;
1111
iconSize?: number;
12+
iconMargin?: number;
1213
color?: string;
1314
// eslint-disable-next-line
1415
children?: ReactElement<any, string | JSXElementConstructor<any>>;
@@ -18,6 +19,7 @@ export const TextWithTooltip = ({
1819
text,
1920
icon,
2021
iconSize = 14,
22+
iconMargin,
2123
color,
2224
children,
2325
...rest
@@ -39,7 +41,7 @@ export const TextWithTooltip = ({
3941
borderRadius: '50%',
4042
p: 0,
4143
minWidth: 0,
42-
ml: 0.5,
44+
ml: iconMargin || 0.5,
4345
}}
4446
>
4547
<SvgIcon

‎src/components/infoModalContents/ApprovalInfoContent.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/components/infoModalContents/RetryWithApprovalInfoContent.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/components/infoTooltips/ApprovalTooltip.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Trans } from '@lingui/macro';
2+
3+
import { Link } from '../primitives/Link';
4+
import { TextWithTooltip, TextWithTooltipProps } from '../TextWithTooltip';
5+
6+
export const ApprovalTooltip = ({ ...rest }: TextWithTooltipProps) => {
7+
return (
8+
<TextWithTooltip {...rest}>
9+
<Trans>
10+
To continue, you need to grant Aave smart contracts permission to move your funds from your
11+
wallet. Depending on the asset and wallet you use, it is done by signing the permission
12+
message (gas free), or by submitting an approval transaction (requires gas).{' '}
13+
<Link href="https://eips.ethereum.org/EIPS/eip-2612" underline="always">
14+
Learn more
15+
</Link>
16+
</Trans>
17+
</TextWithTooltip>
18+
);
19+
};

‎src/components/transactions/Borrow/BorrowActions.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const BorrowActions = ({
5757
handleAction={action}
5858
actionText={<Trans>Borrow {symbol}</Trans>}
5959
actionInProgressText={<Trans>Borrowing {symbol}</Trans>}
60-
handleApproval={() => approval(amountToBorrow, poolAddress)}
60+
handleApproval={() => approval({ amount: amountToBorrow, underlyingAsset: poolAddress })}
6161
requiresApproval={requiresApproval}
6262
preparingTransactions={loadingTxns}
6363
sx={sx}

‎src/components/transactions/FlowCommons/ApprovalMethodToggleButton.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { CheckIcon } from '@heroicons/react/outline';
2+
import { CogIcon } from '@heroicons/react/solid';
3+
import { Trans } from '@lingui/macro';
4+
import {
5+
Box,
6+
ListItemIcon,
7+
ListItemText,
8+
Menu,
9+
MenuItem,
10+
SvgIcon,
11+
Typography,
12+
} from '@mui/material';
13+
import * as React from 'react';
14+
import { ApprovalMethod } from 'src/store/walletSlice';
15+
16+
interface ApprovalMethodToggleButtonProps {
17+
currentMethod: ApprovalMethod;
18+
setMethod: (newMethod: ApprovalMethod) => void;
19+
}
20+
21+
export const ApprovalMethodToggleButton = ({
22+
currentMethod,
23+
setMethod,
24+
}: ApprovalMethodToggleButtonProps) => {
25+
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
26+
const open = Boolean(anchorEl);
27+
const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
28+
setAnchorEl(event.currentTarget);
29+
};
30+
const handleClose = () => {
31+
setAnchorEl(null);
32+
};
33+
34+
return (
35+
<>
36+
<Box onClick={handleClick} sx={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
37+
<Typography variant="subheader2" color="info.main">
38+
<Trans>{currentMethod}</Trans>
39+
</Typography>
40+
<SvgIcon sx={{ fontSize: 16, ml: 1, color: 'info.main' }}>
41+
<CogIcon />
42+
</SvgIcon>
43+
</Box>
44+
45+
<Menu
46+
anchorEl={anchorEl}
47+
open={open}
48+
onClose={handleClose}
49+
MenuListProps={{
50+
'aria-labelledby': 'basic-button',
51+
}}
52+
keepMounted={true}
53+
data-cy={`approveMenu_${currentMethod}`}
54+
>
55+
<MenuItem
56+
selected={currentMethod === ApprovalMethod.PERMIT}
57+
value={ApprovalMethod.PERMIT}
58+
onClick={() => {
59+
if (currentMethod === ApprovalMethod.APPROVE) {
60+
setMethod(ApprovalMethod.PERMIT);
61+
}
62+
handleClose();
63+
}}
64+
>
65+
<ListItemText primaryTypographyProps={{ variant: 'subheader1' }}>
66+
<Trans>{ApprovalMethod.PERMIT}</Trans>
67+
</ListItemText>
68+
<ListItemIcon>
69+
<SvgIcon>{currentMethod === ApprovalMethod.PERMIT && <CheckIcon />}</SvgIcon>
70+
</ListItemIcon>
71+
</MenuItem>
72+
73+
<MenuItem
74+
selected={currentMethod === ApprovalMethod.APPROVE}
75+
value={ApprovalMethod.APPROVE}
76+
onClick={() => {
77+
if (currentMethod === ApprovalMethod.PERMIT) {
78+
setMethod(ApprovalMethod.APPROVE);
79+
}
80+
handleClose();
81+
}}
82+
>
83+
<ListItemText primaryTypographyProps={{ variant: 'subheader1' }}>
84+
<Trans>{ApprovalMethod.APPROVE}</Trans>
85+
</ListItemText>
86+
<ListItemIcon>
87+
<SvgIcon>{currentMethod === ApprovalMethod.APPROVE && <CheckIcon />}</SvgIcon>
88+
</ListItemIcon>
89+
</MenuItem>
90+
</Menu>
91+
</>
92+
);
93+
};

‎src/components/transactions/FlowCommons/LeftHelperText.tsx‎

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎src/components/transactions/FlowCommons/RightHelperText.tsx‎

Lines changed: 47 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { ExternalLinkIcon } from '@heroicons/react/outline';
22
import { Trans } from '@lingui/macro';
3-
import { Box, Link, SvgIcon } from '@mui/material';
3+
import { Box, Link, SvgIcon, Typography } from '@mui/material';
4+
import { ApprovalMethodToggleButton } from 'src/components/transactions/FlowCommons/ApprovalMethodToggleButton';
45
import { MOCK_SIGNED_HASH } from 'src/helpers/useTransactionHandler';
56
import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
7+
import { useRootStore } from 'src/store/root';
8+
import { ApprovalMethod } from 'src/store/walletSlice';
69

710
export type RightHelperTextProps = {
811
approvalHash?: string;
12+
tryPermit?: boolean;
913
};
1014

1115
const ExtLinkIcon = () => (
@@ -14,32 +18,48 @@ const ExtLinkIcon = () => (
1418
</SvgIcon>
1519
);
1620

17-
export const RightHelperText = ({ approvalHash }: RightHelperTextProps) => {
21+
export const RightHelperText = ({ approvalHash, tryPermit }: RightHelperTextProps) => {
22+
const { walletApprovalMethodPreference, setWalletApprovalMethodPreference } = useRootStore();
23+
const usingPermit = tryPermit && walletApprovalMethodPreference;
1824
const { currentNetworkConfig } = useProtocolDataContext();
1925
const isSigned = approvalHash === MOCK_SIGNED_HASH;
20-
// a signature will not be reviewable on etherscan
21-
if (!approvalHash || isSigned) return null;
22-
return (
23-
<Box
24-
sx={{
25-
display: 'flex',
26-
justifyContent: 'flex-start',
27-
alignItems: 'center',
28-
}}
29-
>
30-
{approvalHash && (
31-
<Link
32-
variant="helperText"
33-
href={currentNetworkConfig.explorerLinkBuilder({ tx: approvalHash })}
34-
sx={{ display: 'inline-flex', alignItems: 'center' }}
35-
underline="hover"
36-
target="_blank"
37-
rel="noreferrer noopener"
38-
>
39-
<Trans>Review approval tx details</Trans>
40-
<ExtLinkIcon />
41-
</Link>
42-
)}
43-
</Box>
44-
);
26+
// a signature is not submitted on-chain so there is no link to review
27+
if (!approvalHash && !isSigned && tryPermit)
28+
return (
29+
<Box sx={{ display: 'inline-flex', alignItems: 'center', mb: 2 }}>
30+
<Typography variant="subheader2" color="text.secondary">
31+
<Trans>Approve with</Trans>&nbsp;
32+
</Typography>
33+
<ApprovalMethodToggleButton
34+
currentMethod={walletApprovalMethodPreference}
35+
setMethod={(method: ApprovalMethod) => setWalletApprovalMethodPreference(method)}
36+
/>
37+
</Box>
38+
);
39+
if (approvalHash && !usingPermit)
40+
return (
41+
<Box
42+
sx={{
43+
display: 'flex',
44+
justifyContent: 'flex-start',
45+
alignItems: 'center',
46+
pb: 1,
47+
}}
48+
>
49+
{approvalHash && (
50+
<Link
51+
variant="helperText"
52+
href={currentNetworkConfig.explorerLinkBuilder({ tx: approvalHash })}
53+
sx={{ display: 'inline-flex', alignItems: 'center' }}
54+
underline="hover"
55+
target="_blank"
56+
rel="noreferrer noopener"
57+
>
58+
<Trans>Review approval tx details</Trans>
59+
<ExtLinkIcon />
60+
</Link>
61+
)}
62+
</Box>
63+
);
64+
return <></>;
4565
};

‎src/components/transactions/Repay/CollateralRepayActions.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,9 @@ export const CollateralRepayActions = ({
8585
sx={sx}
8686
{...props}
8787
handleAction={action}
88-
handleApproval={() => approval()}
88+
handleApproval={() =>
89+
approval({ amount: repayWithAmount, underlyingAsset: poolReserve.aTokenAddress })
90+
}
8991
actionText={<Trans>Repay {symbol}</Trans>}
9092
actionInProgressText={<Trans>Repaying {symbol}</Trans>}
9193
/>

0 commit comments

Comments
 (0)