feat: let users cap their repay approval, and show the amount needed

src/components/transactions/Repay/RepayActions.tsx

@@ -18,7 +18,8 @@ import { queryKeysFactory } from 'src/ui-config/queries';
 import { useShallow } from 'zustand/shallow';
 
 import { TxActionsWrapper } from '../TxActionsWrapper';
-import { APPROVAL_GAS_LIMIT, checkRequiresApproval } from '../utils';
+import { APPROVAL_GAS_LIMIT, checkRequiresApproval, getRepayAmountToApprove } from '../utils';
+import { RepayAllowance, RepayAllowanceControl } from './RepayAllowanceControl';
 
 export interface RepayActionProps extends BoxProps {
   amountToRepay: string;
@@ -78,6 +79,7 @@ export const RepayActions = ({
   const { sendTx } = useWeb3Context();
   const queryClient = useQueryClient();
   const [signatureParams, setSignatureParams] = useState<SignedParams | undefined>();
+  const [allowance, setAllowance] = useState(RepayAllowance.UNLIMITED);
   const {
     approvalTxState,
     mainTxState,
@@ -104,15 +106,29 @@ export const RepayActions = ({
 
   setLoadingTxns(fetchingApprovedAmount);
 
+  // Single source for what the approval has to cover: the gate below and the approval we
+  // build must never disagree, or a successful approval gets rejected on the next render.
+  const amountRequiringApproval = Number(amountToRepay) === -1 ? maxApproveNeeded : amountToRepay;
+
   const requiresApproval =
     !repayWithATokens &&
     Number(amountToRepay) !== 0 &&
     checkRequiresApproval({
       approvedAmount: approvedAmount?.amount || '0',
-      amount: Number(amountToRepay) === -1 ? maxApproveNeeded : amountToRepay,
+      amount: amountRequiringApproval,
       signedAmount: signatureParams ? signatureParams.amount : '0',
     });
 
+  const amountToApprove = getRepayAmountToApprove({
+    amountRequiringApproval,
+    isMaxRepay: Number(amountToRepay) === -1,
+    decimals: poolReserve.decimals,
+  });
+
+  // Permit already signs for an exact amount, so the choice only applies to approve().
+  const canChooseAllowance = !repayWithATokens && !usePermit && Number(amountToRepay) !== 0;
+  const approveExactAmount = canChooseAllowance && allowance === RepayAllowance.EXACT;
+
   if (requiresApproval && approvalTxState?.success) {
     // There was a successful approval tx, but the approval amount is not enough.
     // Clear the state to prompt for another approval.
@@ -127,6 +143,9 @@ export const RepayActions = ({
     symbol,
     decimals: poolReserve.decimals,
     signatureAmount: amountToRepay,
+    amountToApprove: approveExactAmount
+      ? parseUnits(amountToApprove, poolReserve.decimals).toString()
+      : undefined,
     onApprovalTxConfirmed: fetchApprovedAmount,
     onSignTxCompleted: (signedParams) => setSignatureParams(signedParams),
     chainId,
@@ -256,6 +275,16 @@ export const RepayActions = ({
       actionText={<Trans>Repay {symbol}</Trans>}
       actionInProgressText={<Trans>Repaying {symbol}</Trans>}
       tryPermit={permitAvailable}
+      approvalOptions={
+        canChooseAllowance ? (
+          <RepayAllowanceControl
+            allowance={allowance}
+            setAllowance={setAllowance}
+            exactAmount={amountToApprove}
+            symbol={symbol}
+          />
+        ) : undefined
+      }
       requiresApprovalReset={requiresApprovalReset}
     />
   );

src/components/transactions/Repay/RepayAllowanceControl.tsx

@@ -0,0 +1,113 @@
+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';
+
+export enum RepayAllowance {
+  EXACT = 'exact',
+  UNLIMITED = 'unlimited',
+}
+
+interface RepayAllowanceControlProps {
+  allowance: RepayAllowance;
+  setAllowance: (allowance: RepayAllowance) => void;
+  /** Full-precision amount that will be approved when EXACT is selected. */
+  exactAmount: string;
+  symbol: string;
+}
+
+/**
+ * Repay's own allowance picker, rather than an option on the shared
+ * ApprovalMethodToggleButton. Being Repay-specific is the point: it knows the amount, so
+ * it can show the figure the approval gate is asking for. That number is otherwise
+ * invisible, which is what left users re-approving an allowance they thought was ample.
+ */
+export const RepayAllowanceControl = ({
+  allowance,
+  setAllowance,
+  exactAmount,
+  symbol,
+}: RepayAllowanceControlProps) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const isExact = allowance === RepayAllowance.EXACT;
+
+  const select = (next: RepayAllowance) => {
+    setAllowance(next);
+    setAnchorEl(null);
+  };
+
+  return (
+    <Box sx={{ display: 'inline-flex', alignItems: 'center', mb: 2 }}>
+      <Typography variant="subheader2" color="text.secondary">
+        <Trans>Allowance</Trans>&nbsp;
+      </Typography>
+      <Box
+        onClick={(event: React.MouseEvent<HTMLDivElement>) => setAnchorEl(event.currentTarget)}
+        sx={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}
+        data-cy="repayAllowanceChange"
+      >
+        <Typography variant="subheader2" color="info.main" component="span">
+          {isExact ? `${exactAmount} ${symbol}` : <Trans>Unlimited</Trans>}
+        </Typography>
+        <SvgIcon sx={{ fontSize: 16, ml: 1, color: 'info.main' }}>
+          <CogIcon />
+        </SvgIcon>
+      </Box>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={() => setAnchorEl(null)}
+        keepMounted={true}
+        data-cy={`repayAllowanceMenu_${allowance}`}
+      >
+        <MenuItem
+          data-cy="repayAllowanceOption_exact"
+          selected={isExact}
+          onClick={() => select(RepayAllowance.EXACT)}
+        >
+          <ListItemText
+            primaryTypographyProps={{ variant: 'subheader1' }}
+            secondaryTypographyProps={{ variant: 'caption' }}
+            secondary={
+              <Trans>
+                {exactAmount} {symbol} — covers interest accruing before the transaction lands
+              </Trans>
+            }
+          >
+            <Trans>Exact amount</Trans>
+          </ListItemText>
+          <ListItemIcon>
+            <SvgIcon>{isExact && <CheckIcon />}</SvgIcon>
+          </ListItemIcon>
+        </MenuItem>
+
+        <MenuItem
+          data-cy="repayAllowanceOption_unlimited"
+          selected={!isExact}
+          onClick={() => select(RepayAllowance.UNLIMITED)}
+        >
+          <ListItemText
+            primaryTypographyProps={{ variant: 'subheader1' }}
+            secondaryTypographyProps={{ variant: 'caption' }}
+            secondary={<Trans>No further approvals needed for future repays</Trans>}
+          >
+            <Trans>Unlimited</Trans>
+          </ListItemText>
+          <ListItemIcon>
+            <SvgIcon>{!isExact && <CheckIcon />}</SvgIcon>
+          </ListItemIcon>
+        </MenuItem>
+      </Menu>
+    </Box>
+  );
+};

src/components/transactions/Repay/RepayModalContent.tsx

@@ -29,6 +29,7 @@ import {
   DetailsNumberLineWithSub,
   TxModalDetails,
 } from '../FlowCommons/TxModalDetails';
+import { getSafeAmountToRepayAll } from '../utils';
 import { RepayActions } from './RepayActions';
 
 interface RepayAsset extends Asset {
@@ -82,9 +83,7 @@ export const RepayModalContent = ({
     .multipliedBy(marketReferencePriceInUsd)
     .shiftedBy(-USD_DECIMALS);
 
-  const safeAmountToRepayAll = valueToBigNumber(debt)
-    .multipliedBy('1.0025')
-    .decimalPlaces(poolReserve.decimals, BigNumber.ROUND_UP);
+  const safeAmountToRepayAll = getSafeAmountToRepayAll(debt, poolReserve.decimals);
 
   // calculate max amount abailable to repay
   let maxAmountToRepay: BigNumber;
@@ -293,7 +292,7 @@ export const RepayModalContent = ({
       )}
 
       <RepayActions
-        maxApproveNeeded={safeAmountToRepayAll.toString()}
+        maxApproveNeeded={safeAmountToRepayAll.toString(10)}
         poolReserve={poolReserve}
         amountToRepay={isMaxSelected ? repayMax : amount}
         poolAddress={

src/components/transactions/TxActionsWrapper.tsx

@@ -35,6 +35,8 @@ interface TxActionsWrapperProps extends BoxProps {
   };
   tryPermit?: boolean;
   permitInUse?: boolean;
+  /** Extra approval controls for a specific flow, shown alongside the method toggle. */
+  approvalOptions?: ReactNode;
   event?: TrackEventProps;
 }
 
@@ -59,6 +61,7 @@ export const TxActionsWrapper = ({
   errorParams,
   tryPermit,
   permitInUse = false,
+  approvalOptions,
   event,
   ...rest
 }: TxActionsWrapperProps) => {
@@ -146,12 +149,13 @@ export const TxActionsWrapper = ({
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', mt: 12, ...sx }} {...rest}>
       {approvalParams && !readOnlyModeAddress && (
-        <Box sx={{ display: 'flex', justifyContent: 'end', alignItems: 'center' }}>
+        <Box sx={{ display: 'flex', justifyContent: 'end', alignItems: 'center', gap: 4 }}>
           <RightHelperText
             approvalHash={approvalTxState?.txHash}
             tryPermit={tryPermit}
             permitInUse={permitInUse}
           />
+          {!approvalTxState?.txHash && approvalOptions}
         </Box>
       )}
 

src/components/transactions/__tests__/utils.test.ts

@@ -0,0 +1,103 @@
+import { BigNumber } from 'bignumber.js';
+import { parseUnits } from 'ethers/lib/utils';
+
+import { checkRequiresApproval, getRepayAmountToApprove, getSafeAmountToRepayAll } from '../utils';
+
+/**
+ * Numbers taken from the cbBTC support report on Aave V3 Ethereum
+ * (wallet 0xCA686974913389D42F3C5F61010503DAccDb487a, block 25703709).
+ * The user approved 32.7 by hand, which the UI never accepted.
+ */
+const DEBT = '32.68074616';
+const HAND_SET_APPROVAL = '32.7';
+const DECIMALS = 8;
+
+const gateRequires = (debt: string) => getSafeAmountToRepayAll(debt, DECIMALS).toString(10);
+
+/** Does an allowance of `approved` let the user past the approval gate for this debt? */
+const passesGate = (approved: string, debt: string) =>
+  !checkRequiresApproval({
+    approvedAmount: approved,
+    amount: gateRequires(debt),
+    signedAmount: '0',
+  });
+
+const approvalForMaxRepay = (debt: string) =>
+  getRepayAmountToApprove({
+    amountRequiringApproval: gateRequires(debt),
+    isMaxRepay: true,
+    decimals: DECIMALS,
+  });
+
+describe('getSafeAmountToRepayAll', () => {
+  it('applies the full-repay buffer on top of the debt', () => {
+    expect(gateRequires(DEBT)).toBe('32.76244803');
+  });
+});
+
+describe('getRepayAmountToApprove', () => {
+  it('leaves a partial repay amount untouched', () => {
+    expect(
+      getRepayAmountToApprove({
+        amountRequiringApproval: '10.5',
+        isMaxRepay: false,
+        decimals: DECIMALS,
+      })
+    ).toBe('10.5');
+  });
+
+  it('trims a typed amount to the token decimals so parseUnits cannot throw', () => {
+    // The repay input has no decimalScale, so 7dp on a 6dp token is reachable by typing.
+    const approved = getRepayAmountToApprove({
+      amountRequiringApproval: '1.1234567',
+      isMaxRepay: false,
+      decimals: 6,
+    });
+
+    expect(approved).toBe('1.123457');
+    expect(() => parseUnits(approved, 6)).not.toThrow();
+  });
+
+  it('rounds a typed amount up, so the trimmed approval still clears the gate', () => {
+    const typed = '1.1234567';
+    const approved = getRepayAmountToApprove({
+      amountRequiringApproval: typed,
+      isMaxRepay: false,
+      decimals: 6,
+    });
+
+    expect(new BigNumber(approved).isGreaterThanOrEqualTo(typed)).toBe(true);
+    expect(
+      checkRequiresApproval({ approvedAmount: approved, amount: typed, signedAmount: '0' })
+    ).toBe(false);
+  });
+
+  it('reproduces the reported bug: a hand-set approval above the debt still fails the gate', () => {
+    expect(new BigNumber(HAND_SET_APPROVAL).isGreaterThan(DEBT)).toBe(true);
+    expect(passesGate(HAND_SET_APPROVAL, DEBT)).toBe(false);
+  });
+
+  it('approves an amount that satisfies the gate for a full repay', () => {
+    expect(passesGate(approvalForMaxRepay(DEBT), DEBT)).toBe(true);
+  });
+
+  it('still satisfies the gate after the debt accrues while the approval is in flight', () => {
+    const approved = approvalForMaxRepay(DEBT);
+    // Debt keeps growing, so the gate's target creeps up after we build the approval.
+    const accruedDebt = new BigNumber(DEBT).multipliedBy('1.002').toString(10);
+
+    // Approving exactly what the gate asked for at t0 would now fall short -
+    // this is what the margin exists to absorb.
+    expect(passesGate(gateRequires(DEBT), accruedDebt)).toBe(false);
+    expect(passesGate(approved, accruedDebt)).toBe(true);
+  });
+
+  it('never returns more decimals than the token supports', () => {
+    const approved = approvalForMaxRepay(DEBT);
+    expect(new BigNumber(approved).decimalPlaces()).toBeLessThanOrEqual(DECIMALS);
+  });
+
+  it('does not return exponential notation for dust-sized debts', () => {
+    expect(approvalForMaxRepay('0.00000001')).not.toMatch(/e/i);
+  });
+});