- {status === StatusType.error && (
+ {status === StatusType.error && !notSent && (
{t(translations.transactionStep.transactionFailedTitle)}
@@ -267,6 +275,19 @@ export const TransactionStep: FC = ({
)}
+ {status === StatusType.error && notSent && (
+
+
+ {t(translations.transactionStep.notSentTitle)}
+
+ {notSent.map(reason => (
+
+ {reason}
+
+ ))}
+ {t(translations.transactionStep.notSentSubtitle)}
+
+ )}
{subtitle && status !== StatusType.error && (
{subtitle}
)}
@@ -359,6 +380,7 @@ export const TransactionStep: FC
= ({
updateConfig({
...config,
gasLimit: e.target.value.replace(/[^0-9]/g, ''),
+ gasLimitTypedByUser: true,
})
}
step="0"
diff --git a/apps/frontend/src/app/3_organisms/TransactionStepDialog/components/TransactionSteps/TransactionSteps.test.tsx b/apps/frontend/src/app/3_organisms/TransactionStepDialog/components/TransactionSteps/TransactionSteps.test.tsx
new file mode 100644
index 000000000..031cff2ae
--- /dev/null
+++ b/apps/frontend/src/app/3_organisms/TransactionStepDialog/components/TransactionSteps/TransactionSteps.test.tsx
@@ -0,0 +1,514 @@
+import {
+ act,
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+} from '@testing-library/react';
+
+import React from 'react';
+
+import { BigNumber } from 'ethers';
+import 'jest-canvas-mock';
+
+import { Overlay, StatusType } from '@sovryn/ui';
+
+import { i18n } from '../../../../../locales/i18n';
+import {
+ Transaction,
+ TransactionType,
+} from '../../TransactionStepDialog.types';
+import { sendRefusal } from '../../helpers';
+import { TransactionSteps } from './TransactionSteps';
+
+/**
+ * A transaction may carry a check that runs inside the send step, after the
+ * holder presses Confirm and immediately before the wallet is asked to sign.
+ * What it returns is what the wallet is handed. When it refuses, the wallet is
+ * never asked, and the step says nothing was sent and why, with Retry offered;
+ * the dialog reports a failed transaction only when the wallet was asked.
+ */
+
+const ACCOUNT = '0x1111111111111111111111111111111111111111';
+const QUEUE = '0x9999999999999999999999999999999999999999';
+
+jest.mock('nanoid', () => ({ nanoid: () => '1234' }));
+
+jest.mock('../../../../../contexts/NotificationContext', () => ({
+ useNotificationContext: () => ({ addNotification: () => undefined }),
+}));
+
+jest.mock('../../../../../hooks/useChainStore', () => ({
+ useCurrentChain: () => '0x1e',
+}));
+
+jest.mock('../../../../../hooks/useNativeAssetBalance', () => {
+ const { Decimal } = jest.requireActual('@sovryn/utils');
+ return {
+ useNativeAssetBalance: () => ({ balance: Decimal.from(1), loading: false }),
+ };
+});
+
+jest.mock('../../../../../hooks/useAccount', () => ({
+ useAccount: () => ({ account: '0x1111111111111111111111111111111111111111' }),
+}));
+
+jest.mock('@sovryn/contracts', () => ({
+ ...jest.requireActual('@sovryn/contracts'),
+ findContract: () => Promise.reject(new Error('not a known contract')),
+}));
+
+const mockSend = jest.fn();
+const mockEstimate = jest.fn();
+
+const releaseTransaction = (
+ beforeSend?: Transaction['beforeSend'],
+): Transaction => ({
+ title: 'Release 3 withdrawals from the Perimeter withdraw queue',
+ request: {
+ type: TransactionType.signTransaction,
+ contract: {
+ address: QUEUE,
+ signer: { getAddress: async () => ACCOUNT },
+ provider: { getTransactionCount: async () => 3 },
+ estimateGas: { executeExits: mockEstimate },
+ executeExits: mockSend,
+ } as never,
+ fnName: 'executeExits',
+ args: [['7', '8', '9']],
+ },
+ beforeSend,
+});
+
+const confirm = async () => {
+ const button = await waitFor(() => {
+ const found = document.querySelector(
+ '[data-layout-id="tx-dialog-confirm"]',
+ );
+ expect(found).toBeInTheDocument();
+ return found!;
+ });
+ fireEvent.click(button);
+};
+
+describe('TransactionSteps', () => {
+ beforeAll(async () => {
+ await i18n;
+ });
+
+ beforeEach(() => {
+ // The dialog could not estimate gas when it opened, so it holds its flat
+ // default for the step.
+ mockEstimate.mockRejectedValue(new Error('execution reverted'));
+ mockSend.mockResolvedValue({ hash: '0xabc', wait: async () => ({}) });
+ jest.spyOn(console, 'error').mockImplementation(() => undefined);
+ });
+
+ it("hands the wallet the request and gas its send check returns, not the dialog's own", async () => {
+ const beforeSend = jest.fn(async ({ request, config }) => ({
+ request: { ...request, args: [['7', '9']] },
+ config: { ...config, gasLimit: '50000' },
+ }));
+ render(
+ (resolve => {
+ mined = resolve;
+ }),
+ });
+ const transaction = releaseTransaction(async step => step);
+ const onComplete = jest.fn();
+ transaction.onComplete = onComplete;
+ render(
+ ['beforeSend']>[0]) =>
+ step,
+ );
+
+ const openSettings = async () =>
+ fireEvent.click(
+ await waitFor(() => {
+ const found = document.querySelector(
+ '[data-layout-id="tx-dialog-settings"]',
+ );
+ expect(found).toBeInTheDocument();
+ return found!;
+ }),
+ );
+
+ const typeGasLimit = async (value: string) => {
+ const [gasLimit] = screen.getAllByRole('textbox');
+ fireEvent.change(gasLimit, { target: { value } });
+ // The input reports a change once typing pauses.
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve, 600));
+ });
+ };
+
+ it('reaches the send check marked as typed', async () => {
+ const beforeSend = passThrough();
+ render(
+
+
+ );
+ };
+
+ it('does not ask the wallet once a send check passes after the dialog is closed', async () => {
+ let setOpen: (value: boolean) => void = () => {};
+ let resolveCheck: () => void = () => {};
+ const beforeSend = jest.fn(
+ (step: unknown) =>
+ new Promise(resolve => {
+ resolveCheck = () => resolve(step);
+ }),
+ );
+ render(
+ {
+ setOpen = fn;
+ }}
+ />,
+ );
+
+ await confirm();
+ await waitFor(() => expect(beforeSend).toHaveBeenCalledTimes(1));
+
+ act(() => setOpen(false));
+ await act(async () => {
+ resolveCheck();
+ await Promise.resolve();
+ await Promise.resolve();
+ });
+
+ expect(mockSend).not.toHaveBeenCalled();
+ });
+
+ it('still sends a transaction with no send check regardless of isOpen', async () => {
+ mockEstimate.mockResolvedValue(BigNumber.from(42_000));
+ let setOpen: (value: boolean) => void = () => {};
+ render(
+ {
+ setOpen = fn;
+ }}
+ />,
+ );
+
+ act(() => setOpen(false));
+ await confirm();
+
+ await waitFor(() => expect(mockSend).toHaveBeenCalled());
+ });
+ });
+});
diff --git a/apps/frontend/src/app/3_organisms/TransactionStepDialog/components/TransactionSteps/TransactionSteps.tsx b/apps/frontend/src/app/3_organisms/TransactionStepDialog/components/TransactionSteps/TransactionSteps.tsx
index bb6905baf..fd7407ed2 100644
--- a/apps/frontend/src/app/3_organisms/TransactionStepDialog/components/TransactionSteps/TransactionSteps.tsx
+++ b/apps/frontend/src/app/3_organisms/TransactionStepDialog/components/TransactionSteps/TransactionSteps.tsx
@@ -1,4 +1,11 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+ FC,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
import classNames from 'classnames';
import { BigNumber, ethers } from 'ethers';
@@ -36,8 +43,9 @@ import {
isSignTransactionDataRequest,
isTransactionRequest,
isTypedDataRequest,
+ notSentReasonsOf,
} from '../../helpers';
-import { sendOrSimulateTx } from '../../utils';
+import { resolveGasLimit, sendOrSimulateTx } from '../../utils';
import { TransactionStep } from '../TransactionStep/TransactionStep';
export type TransactionStepsProps = {
@@ -47,6 +55,8 @@ export type TransactionStepsProps = {
gasPrice: string;
onTxStatusChange?: (status: StatusType) => void;
setTxTrigger: (id: string) => void;
+ /** Whether the dialog showing these steps is still open. Defaults to open. */
+ isOpen?: boolean;
};
export const TransactionSteps: FC = ({
@@ -56,15 +66,33 @@ export const TransactionSteps: FC = ({
gasPrice,
onTxStatusChange,
setTxTrigger,
+ isOpen = true,
}) => {
const chainId = useCurrentChain();
const [stepData, setStepData] = useState([]);
const [step, setStep] = useState(-1);
const [error, setError] = useState(false);
+ // Set when the failed step's send check refused it: nothing reached the
+ // wallet, for these reasons.
+ const [notSent, setNotSent] = useState();
const [estimatedGasFee, setEstimatedGasFee] = useState(0);
const { balance: nativeBalance, loading } = useNativeAssetBalance(chainId);
const { account } = useAccount();
+ // Read inside `submit`, so a send check that is still running when the
+ // dialog closes sees the closed state as soon as it finishes, not the open
+ // state it started with. The dialog's Overlay unmounts this component in
+ // the same commit that flips `isOpen` to false, so an unmounted component
+ // never runs this effect again with the closed value; the cleanup covers
+ // that by reading unmounting itself as closed.
+ const isOpenRef = useRef(isOpen);
+ useEffect(() => {
+ isOpenRef.current = isOpen;
+ return () => {
+ isOpenRef.current = false;
+ };
+ }, [isOpen]);
+
const hasEnoughBalance = useMemo(
() => account && !loading && nativeBalance.sub(estimatedGasFee).gt(0),
[account, loading, nativeBalance, estimatedGasFee],
@@ -100,13 +128,17 @@ export const TransactionSteps: FC = ({
args[1] = ethers.constants.MaxUint256;
}
- item.config.gasLimit =
- gasLimit ??
- (await contract.estimateGas[fnName](
- ...[...args, { value: value ?? 0 }],
- )
- .then(gas => gas.toString())
- .catch(() => BigNumber.from(6_000_000).toString()));
+ // A request's own `gasLimit` is a constant sized for the plain
+ // call; the Perimeter's withdrawal delay adds queue-recording cost
+ // on top of it when armed. Re-price that constant against a fresh
+ // estimate rather than trusting it outright — see resolveGasLimit.
+ item.config.gasLimit = await resolveGasLimit(
+ contract,
+ fnName,
+ args,
+ value,
+ gasLimit,
+ );
item.config.gasLimit &&
setEstimatedGasFee(
@@ -210,16 +242,35 @@ export const TransactionSteps: FC = ({
}, [stepData]);
const submit = useCallback(async () => {
+ // Set when a send check refuses: nothing reached the wallet.
+ let notSentReasons: string[] | undefined;
try {
let i = 0;
if (error) {
setError(false);
+ setNotSent(undefined);
i = step;
}
for (; i < transactions.length; i++) {
setStep(i);
- const config = stepData[i].config;
- const { request } = transactions[i];
+ let config = stepData[i].config;
+ let { request } = transactions[i];
+ const { beforeSend } = transactions[i];
+ if (beforeSend) {
+ try {
+ ({ request, config } = await beforeSend({ request, config }));
+ } catch (refusal) {
+ notSentReasons = notSentReasonsOf(refusal);
+ throw refusal;
+ }
+ // The holder may have closed the dialog while the check above was
+ // still reading the chain. Nobody is left to see a wallet prompt,
+ // so a check that passed after that is not acted on.
+ if (!isOpenRef.current) {
+ return;
+ }
+ updateConfig(i, config);
+ }
if (isTransactionRequest(request)) {
const args = [...request.args];
if (request.fnName === APPROVAL_FUNCTION) {
@@ -361,13 +412,18 @@ export const TransactionSteps: FC = ({
setTimeout(() => setTxTrigger(nanoid()), 1000);
} catch (error) {
- onTxStatusChange?.(StatusType.error);
+ // A step its send check refused was never sent, so no failed
+ // transaction is reported for it.
+ if (!notSentReasons) {
+ onTxStatusChange?.(StatusType.error);
+ }
console.error('error:', error);
transactions[0].onChangeStatus?.(StatusType.error);
handleUpdates();
+ setNotSent(notSentReasons);
setError(true);
}
}, [
@@ -375,6 +431,7 @@ export const TransactionSteps: FC = ({
transactions,
step,
stepData,
+ updateConfig,
updateReceipt,
onTxStatusChange,
handleUpdates,
@@ -437,6 +494,7 @@ export const TransactionSteps: FC = ({
receipt={getReceipt(i)}
updateConfig={(config: TransactionConfig) => updateConfig(i, config)}
gasPrice={gasPrice}
+ notSent={i === step ? notSent : undefined}
/>
))}
{!isLoading && transactions.length > step && (
diff --git a/apps/frontend/src/app/3_organisms/TransactionStepDialog/helpers.ts b/apps/frontend/src/app/3_organisms/TransactionStepDialog/helpers.ts
index dbd4491e0..0203731fe 100644
--- a/apps/frontend/src/app/3_organisms/TransactionStepDialog/helpers.ts
+++ b/apps/frontend/src/app/3_organisms/TransactionStepDialog/helpers.ts
@@ -1,4 +1,5 @@
import {
+ SendRefusal,
SignMessageRequest,
SignTransactionDataRequest,
SignTransactionRequest,
@@ -26,3 +27,21 @@ export const isSignTransactionDataRequest = (
request: TransactionRequest,
): request is SignTransactionDataRequest =>
request.type === TransactionType.signTransactionData;
+
+/**
+ * What a send check rejects with when it refuses a transaction: nothing is
+ * sent, and `reasons` are the lines that say why, as the user was told them.
+ */
+export const sendRefusal = (reasons: string[]): SendRefusal =>
+ Object.assign(new Error('The send check refused, so nothing was sent.'), {
+ notSentReasons: reasons,
+ });
+
+/** The reasons a send check's rejection names; none when it names none. */
+export const notSentReasonsOf = (rejection: unknown): string[] => {
+ const reasons = (rejection as Partial | undefined)
+ ?.notSentReasons;
+ return Array.isArray(reasons)
+ ? reasons.filter((reason): reason is string => typeof reason === 'string')
+ : [];
+};
diff --git a/apps/frontend/src/app/3_organisms/TransactionStepDialog/utils.test.ts b/apps/frontend/src/app/3_organisms/TransactionStepDialog/utils.test.ts
new file mode 100644
index 000000000..c9cf9243a
--- /dev/null
+++ b/apps/frontend/src/app/3_organisms/TransactionStepDialog/utils.test.ts
@@ -0,0 +1,106 @@
+import { BigNumber } from 'ethers/lib/ethers';
+import 'jest-canvas-mock';
+
+import { resolveGasLimit } from './utils';
+
+/**
+ * A withdrawal hooked into the Perimeter's withdrawal delay costs more gas
+ * than the same call with the delay off (it enqueues into the delay queue
+ * and updates the receiver index), so a flat constant sized for the
+ * un-hooked call can undershoot once the delay is armed. `resolveGasLimit`
+ * is what `TransactionSteps` (opening a dialog) and `TransactionStep`
+ * ("Reset values") both call to turn a request's configured constant into
+ * the gas limit actually used, re-pricing it against a fresh estimate of
+ * the real call rather than trusting the constant outright.
+ */
+
+// The nested nanoid package under apps/frontend/node_modules ships ESM-only,
+// which Jest's default CJS transform cannot parse; every other suite that
+// reaches utils.ts (via nanoid's use in handleNotification) mocks it the
+// same way rather than fighting the resolution.
+jest.mock('nanoid', () => ({ nanoid: () => 'test-id' }));
+
+const makeContract = (overrides: {
+ estimate?: BigNumber;
+ estimateError?: Error;
+}) => {
+ const estimateFn = jest.fn(async () => {
+ if (overrides.estimateError) {
+ throw overrides.estimateError;
+ }
+ return overrides.estimate;
+ });
+
+ return {
+ estimateGas: { withdraw: estimateFn },
+ } as any;
+};
+
+describe('resolveGasLimit', () => {
+ const floor = BigNumber.from(450_000);
+
+ it('raises the floor when a fresh estimate plus margin exceeds it', async () => {
+ const contract = makeContract({ estimate: BigNumber.from(500_000) });
+
+ const result = await resolveGasLimit(
+ contract,
+ 'withdraw',
+ [],
+ undefined,
+ floor,
+ );
+
+ // 500_000 * 1.30 = 650_000, above the 450_000 floor.
+ expect(result).toBe('650000');
+ });
+
+ it('never goes below the floor when the estimate is cheap', async () => {
+ const contract = makeContract({ estimate: BigNumber.from(100_000) });
+
+ const result = await resolveGasLimit(
+ contract,
+ 'withdraw',
+ [],
+ undefined,
+ floor,
+ );
+
+ // 100_000 * 1.30 = 130_000, below the floor — the floor wins, matching
+ // the delay-off case: the estimate is cheaper, so nothing changes.
+ expect(result).toBe(floor.toString());
+ });
+
+ it('falls back to the floor outright when estimation fails', async () => {
+ const contract = makeContract({
+ estimateError: new Error('execution reverted'),
+ });
+
+ const result = await resolveGasLimit(
+ contract,
+ 'withdraw',
+ [],
+ undefined,
+ floor,
+ );
+
+ expect(result).toBe(floor.toString());
+ });
+
+ it('with no floor, returns the bare estimate unmargined (the pre-existing, unconfigured-limit case)', async () => {
+ const contract = makeContract({ estimate: BigNumber.from(321_000) });
+
+ const result = await resolveGasLimit(contract, 'withdraw', [], undefined);
+
+ expect(result).toBe('321000');
+ });
+
+ it('with no floor, falls back to the flat 6,000,000 default when estimation fails', async () => {
+ const contract = makeContract({
+ estimateError: new Error('execution reverted'),
+ });
+
+ const result = await resolveGasLimit(contract, 'withdraw', [], undefined);
+
+ expect(result).toBe('6000000');
+ });
+});
diff --git a/apps/frontend/src/app/3_organisms/TransactionStepDialog/utils.ts b/apps/frontend/src/app/3_organisms/TransactionStepDialog/utils.ts
index a1b35f473..10a8e8c9f 100644
--- a/apps/frontend/src/app/3_organisms/TransactionStepDialog/utils.ts
+++ b/apps/frontend/src/app/3_organisms/TransactionStepDialog/utils.ts
@@ -3,7 +3,7 @@ import {
TransactionReceipt,
} from '@ethersproject/providers';
-import { BigNumber } from 'ethers/lib/ethers';
+import { BigNumber, BigNumberish, Contract } from 'ethers/lib/ethers';
import { parseUnits } from 'ethers/lib/utils';
import { t } from 'i18next';
import { nanoid } from 'nanoid';
@@ -50,6 +50,59 @@ export const renderNotification = (txStatus: StatusType) => {
return handleNotification(type, title, subtitle);
};
+/**
+ * How far above a fresh gas estimate a configured-gas-limit transaction's
+ * limit is set, in percent. A withdrawal hooked into the Perimeter's
+ * withdrawal delay does more work than a plain transfer (it enqueues into
+ * the delay queue and updates the receiver index), so a constant sized for
+ * the un-hooked call can undershoot; the margin also covers an estimate
+ * reading slightly cheaper state than the block the transaction actually
+ * lands in.
+ */
+const GAS_ESTIMATE_MARGIN_PERCENT = 30;
+
+/** Gas estimation failed and the request named no constant to fall back to. */
+const NO_ESTIMATE_FALLBACK_GAS_LIMIT = BigNumber.from(6_000_000);
+
+/**
+ * The gas limit to open a transaction step with, or to re-derive for its
+ * "Reset values" control.
+ *
+ * With no `floor`, this is a plain estimate of the call — the flat 6,000,000
+ * fallback on failure existed before this function did and is kept as-is.
+ *
+ * With a `floor` (a request that configured a flat constant), the constant
+ * is no longer used outright: it is re-priced against a fresh estimate of
+ * this exact call, raised by `GAS_ESTIMATE_MARGIN_PERCENT`, and never sent
+ * lower than `floor` itself. Falls back to `floor` outright when the
+ * estimate fails — a call that cannot be estimated is either going to
+ * revert regardless of the limit chosen, or the node does not support
+ * estimation, and either way `floor` is the best number left to send.
+ */
+export const resolveGasLimit = async (
+ contract: Contract,
+ fnName: string,
+ args: unknown[],
+ value: BigNumberish | undefined,
+ floor?: BigNumberish,
+): Promise => {
+ try {
+ const estimate = await contract.estimateGas[fnName](...args, {
+ value: value ?? 0,
+ });
+ if (floor === undefined) {
+ return estimate.toString();
+ }
+ const floorBn = BigNumber.from(floor);
+ const withMargin = estimate.mul(100 + GAS_ESTIMATE_MARGIN_PERCENT).div(100);
+ return withMargin.gt(floorBn) ? withMargin.toString() : floorBn.toString();
+ } catch {
+ return floor !== undefined
+ ? BigNumber.from(floor).toString()
+ : NO_ESTIMATE_FALLBACK_GAS_LIMIT.toString();
+ }
+};
+
export const sendOrSimulateTx = async (
request: SignTransactionRequest,
args: string[],
diff --git a/apps/frontend/src/app/3_organisms/ZeroLocForm/CloseCreditLine.test.tsx b/apps/frontend/src/app/3_organisms/ZeroLocForm/CloseCreditLine.test.tsx
index 91d5717ea..7945dc2e2 100644
--- a/apps/frontend/src/app/3_organisms/ZeroLocForm/CloseCreditLine.test.tsx
+++ b/apps/frontend/src/app/3_organisms/ZeroLocForm/CloseCreditLine.test.tsx
@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
import React from 'react';
import 'jest-canvas-mock';
+import { MemoryRouter } from 'react-router-dom';
import { Decimal } from '@sovryn/utils';
@@ -15,6 +16,7 @@ const mockQuote = {
feeAmount: Decimal.from('0.002'),
netAmount: Decimal.from('0.398'),
loading: false,
+ unknown: false,
};
jest.mock('nanoid', () => {
@@ -33,6 +35,12 @@ jest.mock('../../../hooks/exitFee/useZeroExitFee', () => ({
useZeroExitFee: () => mockQuote,
}));
+let mockDelay: { delaySeconds: number; loading: boolean; unknown: boolean };
+
+jest.mock('../../../hooks/exitDelay/useZeroExitDelayQuote', () => ({
+ useZeroExitDelayQuote: () => mockDelay,
+}));
+
jest.mock('./hooks/useZeroData', () => ({
useZeroData: () => ({ isRecoveryMode: false }),
}));
@@ -53,15 +61,34 @@ describe('CloseCreditLine perimeter fee', () => {
await i18n;
});
- it('shows the NET collateral to receive with a fee tooltip', () => {
- const { container } = render(
-
+ ,
);
+
+ it('shows the NET collateral to receive with a fee tooltip', () => {
+ const { container } = renderForm();
expect(screen.getByText('Collateral to receive')).toBeInTheDocument();
expect(screen.getByText(/0\.398/)).toBeInTheDocument();
expect(screen.queryByText(/^0\.4 /)).not.toBeInTheDocument();
@@ -78,19 +105,101 @@ describe('CloseCreditLine perimeter fee', () => {
});
it('shows the gross with no helper icon when the fee is inactive', () => {
- Object.assign(mockQuote, { active: false, rateBps: 0 });
- const { container } = render(
- = ({
const { balance: availableBalance } = useAssetBalance(creditToken);
const exitFee = useZeroExitFee(collateralValue);
+ const {
+ delaySeconds,
+ unknown: exitDelayUnknown,
+ loading: exitDelayLoading,
+ } = useZeroExitDelayQuote();
const exitFeeDisplay = useMemo(
() => getExitFeeDisplay(exitFee, exitFee.feeAmount),
[exitFee],
);
const showExitFee = exitFeeDisplay === 'charged';
+ // The row itself stays hidden for an unread quote — the chain fails open,
+ // so it is not a stated fee — but the collateral figure below states the
+ // whole collateral as what the borrower will get, which needs its own
+ // qualifier when the quote never arrived.
+ const exitFeeUnknown = !showExitFee && exitFee.unknown;
const collateralToReceive = useMemo(
() => (showExitFee ? exitFee.netAmount : collateralValue),
@@ -97,9 +109,22 @@ export const CloseCreditLine: FC = ({
[closeLocked, dllrLocked, creditToken],
);
+ // A close always returns collateral, so it always waits for the delay and
+ // fee quotes.
const submitButtonDisabled = useMemo(
- () => hasError || isInMaintenance || isRecoveryMode,
- [isInMaintenance, hasError, isRecoveryMode],
+ () =>
+ hasError ||
+ isInMaintenance ||
+ isRecoveryMode ||
+ exitDelayLoading ||
+ exitFee.loading,
+ [
+ isInMaintenance,
+ hasError,
+ isRecoveryMode,
+ exitDelayLoading,
+ exitFee.loading,
+ ],
);
const tokenOptions = useMemo(
@@ -187,6 +212,19 @@ export const CloseCreditLine: FC = ({
)
}
/>
+ {exitFeeUnknown && (
+
+ {t(translations.exitFee.unknownNotice)}
+
+ )}
+
+ ,
+ );
+
it('shows the "You will receive" row when withdrawing collateral', () => {
- render( = props => {
unknown: exitFeeUnknown,
loading: exitFeeLoading,
} = useZeroExitFee();
+ const {
+ delaySeconds,
+ unknown: exitDelayUnknown,
+ loading: exitDelayLoading,
+ } = useZeroExitDelayQuote();
const exitFeeGross = useMemo(
() =>
@@ -210,7 +217,9 @@ export const FormContent: FC = props => {
isInMaintenance ||
(isBorrowDisabled && Number(props.debtAmount) > 0) ||
isInvalidOriginationFee ||
- (!props.hasTrove && !hasDisclaimerBeenChecked)
+ (!props.hasTrove && !hasDisclaimerBeenChecked) ||
+ // A collateral withdrawal waits for its delay and fee quotes.
+ (exitFeeGross.gt(0) && (exitDelayLoading || exitFeeLoading))
);
}, [
props.errors,
@@ -224,6 +233,9 @@ export const FormContent: FC = props => {
isBorrowDisabled,
isInvalidOriginationFee,
hasDisclaimerBeenChecked,
+ exitFeeGross,
+ exitDelayLoading,
+ exitFeeLoading,
]);
const handleDebtTypeChange = useCallback(
@@ -515,6 +527,15 @@ export const FormContent: FC = props => {
assetSymbol={COMMON_SYMBOLS.BTC}
precision={BTC_RENDER_PRECISION}
/>
+ {/* Only a collateral withdrawal is held; a borrow or add-collateral
+ adjust removes nothing, so the hold notice must not show for it. */}
+ {exitFeeGross.gt(0) && (
+
+ ,
+ );
+
+/** Enter an amount into the collateral input, the way a borrower would. */
+const enterCollateral = (amount: string) => {
+ const inputs = screen.getAllByPlaceholderText('0');
+ const collateralInput = inputs[inputs.length - 1];
+ fireEvent.change(collateralInput, { target: { value: amount } });
+ fireEvent.blur(collateralInput);
+};
+
+describe('AdjustLoanForm perimeter hold', () => {
+ beforeAll(async () => {
+ await i18n;
+ AdjustLoanForm = require('./AdjustLoanForm').AdjustLoanForm;
+ });
+
+ beforeEach(() => {
+ mockDelay = { delaySeconds: 0, loading: false, unknown: false };
+ mockFee = { active: true, rateBps: 10, unknown: false, loading: false };
+ });
+
+ it('shows no hold for an adjust that takes nothing out', () => {
+ // The default tabs are Borrow and Add collateral: nothing leaves the
+ // protocol, so nothing can be held however long the hold would be.
+ mockDelay = HOLD;
+
+ renderForm();
+
+ expect(screen.queryByText('Withdrawal delay')).not.toBeInTheDocument();
+ });
+
+ it('tells the borrower a collateral withdrawal will be held', () => {
+ mockDelay = HOLD;
+
+ renderForm();
+ fireEvent.click(screen.getByText('Withdraw collateral'));
+ enterCollateral('0.1');
+
+ expect(screen.getByText('Withdrawal delay')).toBeInTheDocument();
+ expect(screen.getByText('2 days')).toBeInTheDocument();
+ });
+
+ it('admits it could not check whether the withdrawal will be held', () => {
+ mockDelay = { delaySeconds: 0, loading: false, unknown: true };
+
+ renderForm();
+ fireEvent.click(screen.getByText('Withdraw collateral'));
+ enterCollateral('0.1');
+
+ expect(screen.getByText('Could not be checked')).toBeInTheDocument();
+ });
+
+ it('shows no hold when a quote arrived saying nothing is held', () => {
+ renderForm();
+ fireEvent.click(screen.getByText('Withdraw collateral'));
+ enterCollateral('0.1');
+
+ expect(screen.queryByText('Withdrawal delay')).not.toBeInTheDocument();
+ expect(screen.queryByText('Could not be checked')).not.toBeInTheDocument();
+ });
+
+ describe('Confirm and the delay quote', () => {
+ const confirm = () =>
+ document.querySelector(
+ '[data-layout-id="adjust-loan-confirm-button"]',
+ ) as HTMLButtonElement;
+
+ const withdrawCollateral = () => {
+ renderForm();
+ fireEvent.click(screen.getByText('Withdraw collateral'));
+ enterCollateral('0.1');
+ };
+
+ it('waits for the delay quote on a collateral withdrawal, and says it is checking', () => {
+ mockDelay = { delaySeconds: 0, loading: true, unknown: false };
+
+ withdrawCollateral();
+
+ expect(screen.getByText(/^Checking/)).toBeInTheDocument();
+ expect(confirm()).toBeDisabled();
+ });
+
+ it('offers Confirm once a quote arrived, and hands the post-signature notice to the withdrawal', () => {
+ mockDelay = HOLD;
+
+ withdrawCollateral();
+ expect(confirm()).toBeEnabled();
+ fireEvent.click(confirm());
+
+ expect(mockHandleWithdrawCollateral).toHaveBeenCalledWith(
+ '0.1',
+ loan.id,
+ expect.any(Function),
+ );
+ });
+
+ it('offers Confirm when the quote could not be read', () => {
+ mockDelay = { delaySeconds: 0, loading: false, unknown: true };
+
+ withdrawCollateral();
+
+ expect(confirm()).toBeEnabled();
+ });
+ });
+
+ describe('Confirm and the fee quote', () => {
+ const confirm = () =>
+ document.querySelector(
+ '[data-layout-id="adjust-loan-confirm-button"]',
+ ) as HTMLButtonElement;
+
+ const withdrawCollateral = () => {
+ renderForm();
+ fireEvent.click(screen.getByText('Withdraw collateral'));
+ enterCollateral('0.1');
+ };
+
+ it('waits for the fee quote even once the delay has settled', () => {
+ mockDelay = HOLD;
+ mockFee.loading = true;
+
+ withdrawCollateral();
+
+ expect(confirm()).toBeDisabled();
+ });
+
+ it('offers Confirm once the fee quote has settled', () => {
+ mockDelay = HOLD;
+ mockFee.loading = false;
+
+ withdrawCollateral();
+
+ expect(confirm()).toBeEnabled();
+ });
+ });
+});
diff --git a/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/AdjustLoanForm.tsx b/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/AdjustLoanForm.tsx
index 605751116..7dad34b7f 100644
--- a/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/AdjustLoanForm.tsx
+++ b/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/AdjustLoanForm.tsx
@@ -21,6 +21,7 @@ import { RSK_CHAIN_ID } from '../../../../../config/chains';
import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { ExitDelayRow } from '../../../../2_molecules/ExitDelayRow/ExitDelayRow';
import { ExitFeeRow } from '../../../../2_molecules/ExitFeeRow/ExitFeeRow';
import { LabelWithTabsAndMaxButton } from '../../../../2_molecules/LabelWithTabsAndMaxButton/LabelWithTabsAndMaxButton';
import { convertLoanTokenToSupportedAssets } from '../../../../5_pages/BorrowPage/components/OpenLoansTable/OpenLoans.utils';
@@ -32,6 +33,8 @@ import {
MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_SOV,
} from '../../../../../constants/lending';
import { getTokenDisplayName } from '../../../../../constants/tokens';
+import { useExitDelayQuote } from '../../../../../hooks/exitDelay/useExitDelayQuote';
+import { usePerimeterHoldToast } from '../../../../../hooks/exitDelay/usePerimeterHoldToast';
import { useExitFeeRate } from '../../../../../hooks/exitFee/useExitFeeRate';
import { useDecimalAmountInput } from '../../../../../hooks/useDecimalAmountInput';
import { useLoadContract } from '../../../../../hooks/useLoadContract';
@@ -39,6 +42,7 @@ import { useMaxAssetBalance } from '../../../../../hooks/useMaxAssetBalance';
import { useQueryRate } from '../../../../../hooks/useQueryRate';
import { translations } from '../../../../../locales/i18n';
import { COMMON_SYMBOLS } from '../../../../../utils/asset';
+import { NO_EXIT_DELAY } from '../../../../../utils/exitDelay';
import { SURFACE_LENDING_BORROWER_WITHDRAW } from '../../../../../utils/exitFee';
import { areValuesIdentical } from '../../../../../utils/helpers';
import { decimalic } from '../../../../../utils/math';
@@ -280,6 +284,11 @@ export const AdjustLoanForm: FC = ({ loan }) => {
loanTokenContract?.address,
);
+ const exitDelay = useExitDelayQuote(
+ SURFACE_LENDING_BORROWER_WITHDRAW,
+ loanTokenContract?.address,
+ );
+
const exitFeeGross = useMemo(
() =>
getBorrowerExitFeeGross({
@@ -304,6 +313,12 @@ export const AdjustLoanForm: FC = ({ loan }) => {
],
);
+ // A debt-only adjust removes nothing, so it is not a withdrawal the
+ // perimeter can hold — the notice must stay silent for it either way.
+ const notifyHold = usePerimeterHoldToast(
+ exitFeeGross.gt(0) ? exitDelay : NO_EXIT_DELAY,
+ );
+
const prepaidInterest = calculatePrepaidInterestFromDuration(
borrowApr,
debtSize.toString(),
@@ -450,6 +465,8 @@ export const AdjustLoanForm: FC = ({ loan }) => {
loan.debt.toString(),
loan.id,
convertLoanTokenToSupportedAssets(loan.debtAsset),
+ false,
+ notifyHold,
);
return;
}
@@ -460,6 +477,7 @@ export const AdjustLoanForm: FC = ({ loan }) => {
loan.id,
convertLoanTokenToSupportedAssets(loan.debtAsset),
true,
+ notifyHold,
);
return;
}
@@ -486,7 +504,7 @@ export const AdjustLoanForm: FC = ({ loan }) => {
}
if (isCollateralWithdrawMode) {
- handleWithdrawCollateral(collateralAmount, loan.id);
+ handleWithdrawCollateral(collateralAmount, loan.id, notifyHold);
}
}, [
collateralAmount,
@@ -496,6 +514,7 @@ export const AdjustLoanForm: FC = ({ loan }) => {
debtSize,
debtToken,
handleBorrow,
+ notifyHold,
handleDepositCollateral,
handleRepay,
handleWithdrawCollateral,
@@ -895,6 +914,13 @@ export const AdjustLoanForm: FC = ({ loan }) => {
assetSymbol={collateralToken}
precision={BTC_RENDER_PRECISION}
/>
+ {exitFeeGross.gt(0) && (
+ = ({ loan }) => {
onClick={handleFormSubmit}
dataAttribute="adjust-loan-confirm-button"
disabled={
- submitButtonDisabled || (isBorrowTab && debtSize.gt(maxBorrow))
+ submitButtonDisabled ||
+ (isBorrowTab && debtSize.gt(maxBorrow)) ||
+ // Collateral leaving the protocol waits for its delay and fee figures.
+ (exitFeeGross.gt(0) && (exitDelay.loading || exitFeeLoading))
}
/>
diff --git a/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/hooks/useRepayLoan.ts b/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/hooks/useRepayLoan.ts
index 7bb38e756..670e05a68 100644
--- a/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/hooks/useRepayLoan.ts
+++ b/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/hooks/useRepayLoan.ts
@@ -28,6 +28,7 @@ export const useRepayLoan = () => {
loanId: string,
borrowToken: string,
isPartialRepay?: boolean,
+ onHeld?: () => void,
) => {
if (!contract || !account || !signer) {
return;
@@ -65,6 +66,7 @@ export const useRepayLoan = () => {
value: isBorrowTokenRbtc ? weiRepayAmount : '0',
gasLimit: GAS_LIMIT.REPAY_LOAN,
},
+ onComplete: onHeld,
});
setTransactions(transactions);
diff --git a/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/hooks/useWithdrawCollateral.test.ts b/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/hooks/useWithdrawCollateral.test.ts
new file mode 100644
index 000000000..c04299c5d
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/hooks/useWithdrawCollateral.test.ts
@@ -0,0 +1,66 @@
+import { act, renderHook } from '@testing-library/react';
+
+import 'jest-canvas-mock';
+
+import { GAS_LIMIT } from '../../../../../../constants/gasLimits';
+import { i18n } from '../../../../../../locales/i18n';
+import { useWithdrawCollateral } from './useWithdrawCollateral';
+
+/**
+ * A fixed-interest loan's collateral withdrawal is one of the four surfaces
+ * the Perimeter withdrawal delay hooks into; resolveGasLimit only applies
+ * its 30% margin on top of whatever floor a request configures, so this
+ * floor must itself already cover the delay-armed cost — see
+ * GAS_LIMIT.WITHDRAW_LOAN_COLLATERAL.
+ */
+
+const ACCOUNT = '0x1111111111111111111111111111111111111111';
+const mockSetTransactions = jest.fn();
+const mockSetIsOpen = jest.fn();
+const mockSetTitle = jest.fn();
+// ethers only accepts a real Signer here; this is the smallest object that
+// satisfies `Signer.isSigner` without reaching a network.
+const mockSigner = { _isSigner: true, provider: {} };
+
+jest.mock('nanoid', () => ({ nanoid: () => '1234' }));
+
+jest.mock('../../../../../../hooks/useLoadContract', () => ({
+ useLoadContract: () => ({
+ address: '0x5A0D867e0D70Fcc6Ade25C3F1B89d618b5B4Eaa7',
+ estimateGas: { withdrawCollateral: jest.fn() },
+ }),
+}));
+
+jest.mock('../../../../../../hooks/useAccount', () => ({
+ useAccount: () => ({ account: ACCOUNT, signer: mockSigner }),
+}));
+
+jest.mock('../../../../../../contexts/TransactionContext', () => ({
+ useTransactionContext: () => ({
+ setTransactions: (...args: unknown[]) => mockSetTransactions(...args),
+ setIsOpen: (...args: unknown[]) => mockSetIsOpen(...args),
+ setTitle: (...args: unknown[]) => mockSetTitle(...args),
+ }),
+}));
+
+describe('useWithdrawCollateral', () => {
+ beforeAll(async () => {
+ await i18n;
+ });
+
+ it('configures a gas-limit floor sized to the delay-armed call', async () => {
+ const { result } = renderHook(() => useWithdrawCollateral());
+
+ await act(async () => {
+ await result.current('0.1', '0xloan', jest.fn());
+ });
+
+ const step = mockSetTransactions.mock.calls[0][0][0];
+ expect(step.request.fnName).toBe('withdrawCollateral');
+ // With the floor too low, resolveGasLimit's own margin never rescues a
+ // failed estimate — a failed live read falls straight back to this
+ // constant outright. It must already cover the delay-armed cost on its
+ // own, not rely on the margin ever landing.
+ expect(step.request.gasLimit).toBe(GAS_LIMIT.WITHDRAW_LOAN_COLLATERAL);
+ });
+});
diff --git a/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/hooks/useWithdrawCollateral.ts b/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/hooks/useWithdrawCollateral.ts
index 7d81648cc..a25ad21da 100644
--- a/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/hooks/useWithdrawCollateral.ts
+++ b/apps/frontend/src/app/5_pages/BorrowPage/components/AdjustLoanForm/hooks/useWithdrawCollateral.ts
@@ -21,7 +21,7 @@ export const useWithdrawCollateral = () => {
const { account, signer } = useAccount();
const handleSubmit = useCallback(
- async (amount: string, loanId: string) => {
+ async (amount: string, loanId: string, onHeld?: () => void) => {
if (!contract || !account || !signer) {
return;
}
@@ -41,6 +41,7 @@ export const useWithdrawCollateral = () => {
args: [loanId, account, weiAmount],
gasLimit: GAS_LIMIT.WITHDRAW_LOAN_COLLATERAL,
},
+ onComplete: onHeld,
},
];
diff --git a/apps/frontend/src/app/5_pages/LendPage/components/AdjustModal/AdjustLendingModalContainer.tsx b/apps/frontend/src/app/5_pages/LendPage/components/AdjustModal/AdjustLendingModalContainer.tsx
index 357fdab6b..6274a2127 100644
--- a/apps/frontend/src/app/5_pages/LendPage/components/AdjustModal/AdjustLendingModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/LendPage/components/AdjustModal/AdjustLendingModalContainer.tsx
@@ -21,6 +21,9 @@ import { translations } from '../../../../../locales/i18n';
import { eventDriven } from '../../../../../store/rxjs/event-driven';
import { asyncCall } from '../../../../../store/rxjs/provider-cache';
import { Nullable } from '../../../../../types/global';
+import { useExitDelayQuote } from '../../../../../hooks/exitDelay/useExitDelayQuote';
+import { usePerimeterHoldToast } from '../../../../../hooks/exitDelay/usePerimeterHoldToast';
+import { SURFACE_LENDING_LENDER_WITHDRAW } from '../../../../../utils/exitFee';
import { LendModalAction } from '../../LendPage.types';
import { FormType, LendingForm } from './LendingForm';
@@ -30,6 +33,7 @@ export type AdjustModalProps = {
amount: Decimal,
token: AssetDetailsData,
pool: Contract,
+ onHeld?: () => void,
) => void;
onClose: () => void;
isOpen: boolean;
@@ -122,6 +126,12 @@ export const AdjustLendingModalContainer: FC
= ({
onClose();
}, [onClose, push]);
+ const exitDelay = useExitDelayQuote(
+ SURFACE_LENDING_LENDER_WITHDRAW,
+ state?.poolTokenContract?.address,
+ );
+ const notifyHold = usePerimeterHoldToast(exitDelay);
+
const handleConfirm = useCallback(
(type: FormType, amount: Decimal) => {
if (state == null) {
@@ -130,10 +140,15 @@ export const AdjustLendingModalContainer: FC = ({
if (type === FormType.Deposit) {
onDeposit(amount, state.tokenDetails, state.poolTokenContract);
} else {
- onWithdraw(amount, state.tokenDetails, state.poolTokenContract);
+ onWithdraw(
+ amount,
+ state.tokenDetails,
+ state.poolTokenContract,
+ notifyHold,
+ );
}
},
- [onDeposit, onWithdraw, state],
+ [notifyHold, onDeposit, onWithdraw, state],
);
return (
diff --git a/apps/frontend/src/app/5_pages/LendPage/components/AdjustModal/LendingForm.test.tsx b/apps/frontend/src/app/5_pages/LendPage/components/AdjustModal/LendingForm.test.tsx
index 3540a53e1..4ae3e6dfa 100644
--- a/apps/frontend/src/app/5_pages/LendPage/components/AdjustModal/LendingForm.test.tsx
+++ b/apps/frontend/src/app/5_pages/LendPage/components/AdjustModal/LendingForm.test.tsx
@@ -4,6 +4,7 @@ import React from 'react';
import { BigNumber } from 'ethers';
import 'jest-canvas-mock';
+import { MemoryRouter } from 'react-router-dom';
import { Decimal } from '@sovryn/utils';
@@ -23,8 +24,21 @@ jest.mock('../../../../../contexts/NotificationContext', () => {
};
});
+let mockFee: {
+ active: boolean;
+ rateBps: number;
+ loading: boolean;
+ unknown: boolean;
+};
+
jest.mock('../../../../../hooks/exitFee/useExitFeeRate', () => ({
- useExitFeeRate: () => ({ active: true, rateBps: 50, loading: false }),
+ useExitFeeRate: () => mockFee,
+}));
+
+let mockDelay: { delaySeconds: number; loading: boolean; unknown: boolean };
+
+jest.mock('../../../../../hooks/exitDelay/useExitDelayQuote', () => ({
+ useExitDelayQuote: () => mockDelay,
}));
jest.mock('../../../../../hooks/useMaxAssetBalance', () => {
@@ -58,10 +72,30 @@ describe('LendingForm perimeter fee', () => {
beforeEach(() => {
(asyncCall as jest.Mock).mockResolvedValue(BigNumber.from(0));
+ mockDelay = { delaySeconds: 0, loading: false, unknown: false };
+ mockFee = { active: true, rateBps: 50, loading: false, unknown: false };
});
+ // The hold row links to the Perimeter page, so the form needs a router the
+ // way it has one in the app.
+ const renderForm = () =>
+ render(
+
+ ,
+ );
+
+ /** Enter an amount on the withdraw tab, the way a lender would. */
+ const withdraw = (amount = '100') => {
+ renderForm();
+ fireEvent.click(screen.getByText('Withdraw'));
+ const input = screen.getByPlaceholderText('0');
+ fireEvent.change(input, { target: { value: amount } });
+ fireEvent.blur(input);
+ };
+
it('shows the "You will receive" row on the withdraw tab once an amount is entered', () => {
- render( = ({ state, onConfirm }) => {
state.poolTokenContract.address,
);
+ const {
+ delaySeconds,
+ unknown: exitDelayUnknown,
+ loading: exitDelayLoading,
+ } = useExitDelayQuote(
+ SURFACE_LENDING_LENDER_WITHDRAW,
+ state.poolTokenContract.address,
+ );
+
const withdrawAmount = useMemo(
() => Decimal.fromBigNumberString(amount.toString()),
[amount],
@@ -200,20 +211,31 @@ export const LendingForm: FC = ({ state, onConfirm }) => {
}
/>
{!isDeposit && (
- ;
+ paused: boolean;
+ loading: boolean;
+ unknown: boolean;
+};
+let mockChainTime: { now: number; blockTime: number; unreadable: boolean };
+let mockCurrentChainId: string;
+let mockWallets: {
+ chains: { id: string }[];
+ accounts: { address: string }[];
+}[];
+
+jest.mock('nanoid', () => ({ nanoid: () => '1234' }));
+
+jest.mock('react-helmet-async', () => ({
+ Helmet: ({ children }: { children: React.ReactNode }) => <>{children},
+}));
+
+jest.mock('../../../contexts/NotificationContext', () => ({
+ useNotificationContext: () => ({ addNotification: jest.fn() }),
+}));
+
+let mockAccount: string | undefined;
+
+jest.mock('../../../hooks/useAccount', () => ({
+ useAccount: () => ({ account: mockAccount, signer: undefined }),
+}));
+
+jest.mock('../../../hooks/exitDelay/usePerimeterVault', () => ({
+ usePerimeterVault: () => mockVault,
+}));
+
+jest.mock('../../../hooks/exitDelay/usePerimeterRelease', () => ({
+ usePerimeterRelease: () => mockRelease,
+}));
+
+jest.mock('../../../hooks/exitDelay/useChainTime', () => ({
+ useChainTime: () => mockChainTime,
+}));
+
+jest.mock('../../../hooks/useChainStore', () => ({
+ useChainStore: () => ({
+ currentChainId: mockCurrentChainId,
+ setCurrentChainId: jest.fn(),
+ }),
+}));
+
+jest.mock('../../../hooks/useWalletConnect', () => ({
+ useWalletConnect: () => ({ wallets: mockWallets }),
+}));
+
+const NOW = 1_800_000_000;
+
+const exit = (overrides: Record = {}) => ({
+ id: '7',
+ queueAddress: QUEUE,
+ amount: Decimal.from(1.5),
+ tokenSymbol: 'BTC',
+ token: '0x0000000000000000000000000000000000000000',
+ createdAt: NOW - 100,
+ unlockAt: NOW - 1,
+ originator: ACCOUNT,
+ owner: ACCOUNT,
+ receiver: RECEIVER,
+ surfaceId: '0x00',
+ subProduct: '0x0000000000000000000000000000000000000000',
+ status: ExitStatus.Queued,
+ unwrapOnDelivery: false,
+ ownerHasCode: false,
+ ...overrides,
+});
+
+/** What a genuinely completed release hands `onReleased` for each row. */
+const asExecuted = (rows: { queueAddress: string; id: string }[]) =>
+ rows.map(row => ({ key: exitKey(row), status: ExitStatus.Executed }));
+
+const releaseButton = (container: HTMLElement, queue: string, id: string) =>
+ container.querySelector(
+ `[data-layout-id="perimeter-release-${exitKey({
+ queueAddress: queue,
+ id,
+ })}"]`,
+ );
+
+describe('PerimeterPage', () => {
+ beforeAll(async () => {
+ await i18n;
+ });
+
+ beforeEach(() => {
+ // Re-applied per test: this project's jest config resets mocks between
+ // tests, and a reset Date.now would make every row read as unlocked.
+ jest.spyOn(Date, 'now').mockReturnValue(NOW * 1000);
+ mockAccount = ACCOUNT;
+ mockChainTime = { now: NOW, blockTime: NOW, unreadable: false };
+ mockCurrentChainId = RSK_CHAIN_ID;
+ mockWallets = [];
+ mockVault = {
+ exits: [],
+ pausedByQueue: {},
+ paused: false,
+ loading: false,
+ unknown: false,
+ };
+ window.localStorage.clear();
+ });
+
+ afterAll(() => {
+ jest.restoreAllMocks();
+ });
+
+ it('asks for a wallet to show delayed withdrawals when none is connected', () => {
+ mockAccount = undefined;
+ render((resolve => {
+ finish = resolve;
+ }),
+ );
+ return () => finish();
+ };
+
+ const releaseAllButton = (container: HTMLElement) =>
+ container.querySelector('[data-layout-id="perimeter-release-all"]');
+
+ it('says Checking… on the pressed Release, and takes no other press until the checks finish', async () => {
+ const finish = releaseThatWaits();
+ mockVault.exits = [exit({ id: '7' }), exit({ id: '8' })];
+ const { container } = render(>(new Set());
+
+ useEffect(() => {
+ setReleasedKeys(new Set());
+ }, [account]);
+
+ // Once, on the first mount of this page: removes local-storage keys under
+ // `perimeter/history/`, the prefix nothing else in this app writes under.
+ useEffect(() => {
+ clearPerimeterHistoryKeys();
+ }, []);
+
+ const markReleased = useCallback((entries: ReleaseEntry[]) => {
+ setReleasedKeys(prev => {
+ const next = new Set(prev);
+ entries.forEach(({ key }) => next.add(key));
+ return next;
+ });
+ }, []);
+
+ const release = usePerimeterRelease();
+
+ // What the page lists: the vault's own rows, minus this session's released
+ // ones and minus any row the vault itself reports as done. A release drops
+ // its row from here at once, ahead of the vault's next read, and a row the
+ // vault reports with a stated status other than Queued — released by
+ // another party, or resolved away by the Owner — is trusted and dropped
+ // the same way the moment that read lands, rather than shown with a label
+ // for what became of it. Neither kind of row ever comes back: the filter
+ // is re-applied on every vault read, not just the read that first dropped
+ // it. A status the vault could not state at all stays listed instead, so a
+ // read failure is never mistaken for a withdrawal that already left.
+ const liveExits = useMemo(
+ () =>
+ exits.filter(
+ exit =>
+ !releasedKeys.has(exitKey(exit)) && isPendingExitStatus(exit.status),
+ ),
+ [exits, releasedKeys],
+ );
+
+ const rows: PerimeterExitRow[] = useMemo(
+ () =>
+ liveExits.map(exit => ({
+ ...exit,
+ state: getPendingExitState(
+ exit,
+ pausedByQueue[exit.queueAddress] ?? paused,
+ account,
+ { now, blockTime },
+ ),
+ })),
+ [account, blockTime, liveExits, now, paused, pausedByQueue],
+ );
+
+ // Whether releases are paused for what is actually listed below, rather
+ // than for every queue the page happens to follow: a queue holding none of
+ // this account's rows must never make the banner speak for the list. The
+ // same per-row fallback the Status column uses keeps a row's own queue
+ // counted even if it is missing from the map.
+ const pausedStatesListed = useMemo(
+ () =>
+ [...new Set(rows.map(row => row.queueAddress))].map(
+ queueAddress => pausedByQueue[queueAddress] ?? paused,
+ ),
+ [rows, pausedByQueue, paused],
+ );
+ const somePausedListed = pausedStatesListed.some(Boolean);
+ const allPausedListed =
+ pausedStatesListed.length > 0 && pausedStatesListed.every(Boolean);
+
+ // The release checks take several round trips before the dialog opens. A
+ // second release started meanwhile would replace the first one's
+ // transaction list in the dialog, so every release control waits while one
+ // runs, and the control that started it says it is checking. The ref stops
+ // a second press that lands before the page renders again.
+ const releaseRunning = useRef(false);
+ const [checking, setChecking] = useState<
+ { keys: string[]; all: boolean } | undefined
+ >();
+ const releaseChecked = useCallback(
+ async (targets: PerimeterExitRow[], all: boolean) => {
+ if (releaseRunning.current) {
+ return;
+ }
+ releaseRunning.current = true;
+ setChecking({ keys: targets.map(exitKey), all });
+ try {
+ await release(targets, markReleased);
+ } finally {
+ releaseRunning.current = false;
+ setChecking(undefined);
+ }
+ },
+ [markReleased, release],
+ );
+
+ const handleRelease = useCallback(
+ (row: PerimeterExitRow) => releaseChecked([row], false),
+ [releaseChecked],
+ );
+
+ // Release all offers exactly the rows the per-row button would. Whether each
+ // one's parties are blocked is read when it is pressed, and only the rows
+ // that read clear are sent.
+ const releasableRows = useMemo(
+ () => (now ? rows.filter(row => canExecuteExit(row.state)) : []),
+ [now, rows],
+ );
+
+ const handleReleaseAll = useCallback(
+ () => releaseChecked(releasableRows, true),
+ [releaseChecked, releasableRows],
+ );
+
+ const columns = useMemo(
+ () => [
+ {
+ id: 'id',
+ title: t(translations.perimeterPage.table.id),
+ cellRenderer: (row: PerimeterExitRow) => `#${row.id}`,
+ },
+ {
+ id: 'amount',
+ title: t(translations.perimeterPage.table.amount),
+ // One queue holds every asset the perimeter covers, so a bare number
+ // says nothing: 1.5 RBTC and 1.5 DOC are three orders of magnitude
+ // apart. An asset whose decimals could not be resolved carries no
+ // amount at all rather than one scaled by a guess.
+ cellRenderer: (row: PerimeterExitRow) =>
+ row.amount ? (
+
+
+ {getStatusLabel(row.state)}
+
+ {row.ownerHasCode && (
+
+ {t(translations.perimeterPage.contractOwnerNotice)}
+
+ )}
+
+ ),
+ },
+ {
+ id: 'action',
+ title: t(translations.perimeterPage.table.action),
+ cellRenderer: (row: PerimeterExitRow) =>
+ // Offered for exactly the states the contract's time, pause and
+ // executor checks accept; the block check runs on the press itself.
+ canExecuteExit(row.state) ? (
+
+ handleRelease(row)}
+ dataAttribute={`perimeter-release-${exitKey(row)}`}
+ />
+
+ }
+ />
+ ) : null,
+ },
+ ],
+ [checking, handleRelease, now, wrongNetwork],
+ );
+
+ // "No delayed withdrawals" is a definitive statement, and only a
+ // completed read earns it. A read that failed says so instead.
+ const emptyMessage = useMemo(() => {
+ if (!account) {
+ return t(translations.perimeterPage.connectWallet);
+ }
+ return readFailed
+ ? t(translations.perimeterPage.unreadable)
+ : t(translations.perimeterPage.inactive);
+ }, [account, readFailed]);
+
+ return (
+ <>
+