fix: withdraw flow of Pendle vault

.changeset/wet-impalas-dance.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": patch
+---
+
+fix Pendle vault withdraw flow

apps/evm/src/containers/VaultCard/PendleVaultModal/PositionTab/WithdrawForm/index.tsx

@@ -18,6 +18,7 @@ import {
   formatTokensToReadableValue,
 } from 'utilities';
 
+import { useGetContractAddress } from 'hooks/useGetContractAddress';
 import { VError } from 'libs/errors';
 import { useAccountAddress } from 'libs/wallet';
 import type { PendleVaultAction } from '../../types';
@@ -36,6 +37,8 @@ export const WithdrawForm: React.FC<WithdrawFormProps> = ({ vault, onClose }) =>
   const { t, Trans } = useTranslation();
   const now = useNow();
 
+  const { address: pendlePtVaultAddress } = useGetContractAddress({ name: 'PendlePtVault' });
+
   const hasMatured = !!vault.maturityDate && now.getTime() > vault.maturityDate.getTime();
 
   const actionMode: PendleVaultAction = hasMatured ? 'redeemAtMaturity' : 'withdraw';
@@ -159,6 +162,8 @@ export const WithdrawForm: React.FC<WithdrawFormProps> = ({ vault, onClose }) =>
         swapFromToken={actionMode !== 'redeemAtMaturity' ? fromToken : undefined}
         swapToToken={actionMode !== 'redeemAtMaturity' ? toToken : undefined}
         isLoading={isGetSwapQuoteLoading}
+        delegateeAddress={pendlePtVaultAddress}
+        vaultPoolComptrollerContractAddress={vault.poolComptrollerContractAddress}
         footer={
           <Footer
             actionMode={actionMode}

apps/evm/src/containers/VaultCard/TransactionForm/__tests__/index.spec.tsx

@@ -3,7 +3,8 @@ import BigNumber from 'bignumber.js';
 import type { Address } from 'viem';
 import type { Mock } from 'vitest';
 
-import fakeAccountAddress from '__mocks__/models/address';
+import fakeAccountAddress, { altAddress as fakeDelegateeAddress } from '__mocks__/models/address';
+import fakePoolComptrollerContractAddress from '__mocks__/models/address';
 import { busd, xvs } from '__mocks__/models/tokens';
 import type { GetPendleSwapQuoteOutput } from 'clients/api';
 import { useGetBalanceOf } from 'clients/api';
@@ -13,6 +14,7 @@ import {
   MAXIMUM_PRICE_IMPACT_THRESHOLD_PERCENTAGE,
 } from 'constants/swap';
 import { useForm as useVaultForm } from 'containers/VaultCard/useForm';
+import useDelegateApproval from 'hooks/useDelegateApproval';
 import useTokenApproval from 'hooks/useTokenApproval';
 import { en } from 'libs/translations';
 import { renderComponent } from 'testUtils/render';
@@ -32,6 +34,17 @@ const makeUseTokenApprovalOutput = (overrides: Partial<ReturnType<typeof useToke
     ...overrides,
   }) as ReturnType<typeof useTokenApproval>;
 
+const makeUseDelegateApprovalOutput = (
+  overrides: Partial<ReturnType<typeof useDelegateApproval>> = {},
+) =>
+  ({
+    updatePoolDelegateStatus: vi.fn().mockResolvedValue(undefined),
+    isUpdateDelegateStatusLoading: false,
+    isDelegateApproved: true,
+    isDelegateApprovedLoading: false,
+    ...overrides,
+  }) as ReturnType<typeof useDelegateApproval>;
+
 const baseProps: Omit<TransactionFormProps, 'form'> = {
   fromToken: xvs,
   limitFromTokens: new BigNumber(100),
@@ -84,6 +97,8 @@ const renderTransactionForm = ({
   };
 };
 
+vi.mock('hooks/useDelegateApproval');
+
 describe('TransactionForm', () => {
   beforeEach(() => {
     (useGetBalanceOf as Mock).mockReturnValue({
@@ -94,6 +109,7 @@ describe('TransactionForm', () => {
     });
 
     (useTokenApproval as Mock).mockReturnValue(makeUseTokenApprovalOutput());
+    (useDelegateApproval as Mock).mockReturnValue(makeUseDelegateApprovalOutput());
   });
 
   it('renders the disconnected state and skips the transaction fields', () => {
@@ -245,6 +261,67 @@ describe('TransactionForm', () => {
     ).toBeDisabled();
   });
 
+  it('shows delegate approval steps when delegate approval is required', async () => {
+    const limitFromTokens = new BigNumber(12);
+
+    (useDelegateApproval as Mock).mockReturnValue(
+      makeUseDelegateApprovalOutput({
+        isDelegateApproved: false,
+      }),
+    );
+
+    renderTransactionForm({
+      props: {
+        limitFromTokens,
+        spenderAddress: undefined,
+        delegateeAddress: fakeDelegateeAddress as Address,
+        vaultPoolComptrollerContractAddress: fakePoolComptrollerContractAddress as Address,
+      },
+      walletSpendingLimitTokens: limitFromTokens,
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: '12 XVS' }));
+
+    await waitFor(() =>
+      expect(screen.getByText(en.approveDelegateSteps.step1)).toBeInTheDocument(),
+    );
+    expect(
+      screen.getByRole('button', {
+        name: en.approveDelegateSteps.approveDelegateButton.text,
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByText(en.approveTokenSteps.step2)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {
+        name: baseProps.submitButtonLabel,
+      }),
+    ).toBeDisabled();
+  });
+
+  it('skips delegate approval when the vault comptroller address is not provided', async () => {
+    const limitFromTokens = new BigNumber(12);
+
+    renderTransactionForm({
+      props: {
+        limitFromTokens,
+        spenderAddress: undefined,
+        delegateeAddress: fakeDelegateeAddress as Address,
+      },
+      walletSpendingLimitTokens: limitFromTokens,
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: '12 XVS' }));
+
+    expect(screen.queryByText(en.approveDelegateSteps.step1)).not.toBeInTheDocument();
+    await waitFor(() =>
+      expect(
+        screen.getByRole('button', {
+          name: baseProps.submitButtonLabel,
+        }),
+      ).toBeEnabled(),
+    );
+  });
+
   it('submits the form and resets the amount field on success', async () => {
     const onSubmit = vi.fn().mockResolvedValue(undefined);
     const limitFromTokens = new BigNumber(12);

apps/evm/src/containers/VaultCard/TransactionForm/index.tsx

@@ -33,10 +33,12 @@ export interface TransactionFormProps {
   fromTokenFieldLabel: string;
   submitButtonLabel: string;
   onSubmit: () => Promise<unknown>;
+  vaultPoolComptrollerContractAddress?: Address;
   isLoading?: boolean;
   fromTokenPriceCents?: number;
   footer?: React.ReactNode;
   spenderAddress?: Address;
+  delegateeAddress?: Address;
   swapFromToken?: Token;
   swapToToken?: Token;
   swapQuote?: GetPendleSwapQuoteOutput;
@@ -50,6 +52,7 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
   limitFromTokens,
   fromTokenFieldLabel,
   spenderAddress,
+  delegateeAddress,
   submitButtonLabel,
   onSubmit,
   isLoading: isLoadingProp = false,
@@ -58,9 +61,11 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
   swapToToken,
   swapQuote,
   swapQuoteError,
+  vaultPoolComptrollerContractAddress,
 }) => {
   const { t } = useTranslation();
   const { accountAddress } = useAccountAddress();
+
   const fromAmountTokensFieldValue = form.watch('fromAmountTokens');
   const fromAmountTokens = new BigNumber(fromAmountTokensFieldValue || 0);
 
@@ -72,14 +77,21 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({
 
   const isUserAcknowledgingHighPriceImpact = form.watch('acknowledgeHighPriceImpact');
 
-  const approval: Approval | undefined =
-    spenderAddress && fromAmountTokens.isGreaterThan(0)
-      ? {
-          type: 'token',
-          spenderAddress,
-          token: fromToken,
-        }
-      : undefined;
+  let approval: Approval | undefined;
+
+  if (spenderAddress && fromAmountTokens.isGreaterThan(0)) {
+    approval = {
+      type: 'token',
+      spenderAddress,
+      token: fromToken,
+    };
+  } else if (delegateeAddress && vaultPoolComptrollerContractAddress) {
+    approval = {
+      type: 'delegate',
+      delegateeAddress,
+      poolComptrollerContractAddress: vaultPoolComptrollerContractAddress,
+    };
+  }
 
   const {
     isWalletSpendingLimitLoading,

apps/evm/src/libs/errors/handleError/index.ts

@@ -1,4 +1,4 @@
-import { BaseError } from 'viem';
+import type { BaseError } from 'viem';
 
 import { displayNotification } from 'libs/notifications';