Add Perimeter withdrawal delay visibility and release queue

.changeset/perimeter-hold-review-fixes.md

@@ -0,0 +1,5 @@
+---
+'frontend': patch
+---
+
+Perimeter withdraw queue fixes: exclude a just-released hold from the batch release so it cannot revert the whole atomic transaction; stop showing the withdrawal-hold notice on a borrow or add-collateral adjust that removes nothing; correct the "Releasable by the owner" status label and use the full "Sovryn Perimeter withdraw queue" name in the hold notification.

.changeset/perimeter-hold-visibility.md

@@ -0,0 +1,5 @@
+---
+'frontend': minor
+---
+
+Held withdrawals now say where the money went: a visible Perimeter withdraw queue notice with a link in every charged form, and a post-signature notification on the withdrawal itself. The Perimeter withdraw queue page is reached from the Perimeter entry in the account menu and gains a one-transaction release of all ready holds.

.changeset/perimeter-withdrawal-hold.md

@@ -0,0 +1,5 @@
+---
+'frontend': minor
+---
+
+feat: Sovryn Perimeter withdrawal hold. Shows how long a withdrawal will be held before it is paid out, on lending withdrawals, borrower exits and Zero collateral withdrawal/close, and adds a Perimeter withdraw queue page at /perimeter listing the withdrawals currently held for the connected account with the state each is in and a Release action for the ones that are ready. Also corrects the on-chain surface ids after the contracts renamed them, without which the existing fee display would silently stop matching any configured policy. Gated purely on on-chain state and fail-hidden: while the perimeter is undeployed, unwired or disabled every form renders exactly as it does today and the withdraw queue page reads as empty.

apps/frontend/README.md

@@ -15,3 +15,6 @@ yarn --cwd apps/frontend serve
 To use custom environment variables locally, create a file named `.env.local` and add required values (see `.env.example` for sample variables and values).
 
 For environment variables used in deployments see `netlify.toml`.
+
+For optional deployment inputs that keep Perimeter withdrawals discoverable after
+consumer rollback, see [Perimeter queue discovery](docs/perimeter-queue-discovery.md).

apps/frontend/docs/perimeter-queue-discovery.md

@@ -0,0 +1,41 @@
+# Perimeter queue discovery after rollback
+
+The withdraw queue page follows the lending and Zero consumer queue pointers and
+remembers discovered queues for the current tab. A fresh tab after those getters
+are retired also needs a deployment queue recorded in the frontend build.
+
+These optional public build inputs are selected only for the configured Rootstock
+read network. They are compiled into the bundle and must contain no secrets.
+
+| Network            | Queue address                           | Expected code hash                                   |
+| ------------------ | --------------------------------------- | ---------------------------------------------------- |
+| Mainnet (chain 30) | `REACT_APP_PERIMETER_QUEUE_RSK_MAINNET` | `REACT_APP_PERIMETER_QUEUE_RSK_MAINNET_RUNTIME_HASH` |
+| Testnet (chain 31) | `REACT_APP_PERIMETER_QUEUE_RSK_TESTNET` | `REACT_APP_PERIMETER_QUEUE_RSK_TESTNET_RUNTIME_HASH` |
+
+Leave both inputs unset when no Perimeter queue has been deployed. An unset pair
+preserves the existing Phase 1 absence behavior. A nonzero address requires a
+32-byte `0x`-prefixed hash. Mainnet inputs are never reused for testnet or another
+chain. Invalid or incomplete inputs, a provider network mismatch, empty or
+mismatched code, and failed validation reads produce the existing unreadable
+warning; the unverified fallback address is not queried for withdrawals.
+
+The hash is **Keccak-256 of the complete runtime bytes returned by `eth_getCode`
+at the queue address**, including metadata. For an ERC1967Proxy deployment this
+is the **proxy runtime code hash**, not the implementation hash. Matching that
+hash does not establish the proxy's implementation, storage slots, initialization,
+authority or full implementation runtime. Those require independent deployment
+and release verification before these public build inputs are supplied.
+
+Validated fallback queues are unioned with consumer-derived and remembered
+queues. Duplicate queue addresses and request IDs are removed. Consumer read
+failures remain visible even when fallback withdrawals can be listed. Validation
+uses the existing 30-second cache and bounded reads. Each validation asks every
+available JSON-RPC backend for `eth_chainId`; cached static-provider network
+metadata is insufficient. A mismatching or unreadable backend rejects the
+fallback validation. Keep the standalone queue
+inputs in subsequent builds while it has outstanding requests after rollback.
+
+Use the actual deployment address and independently verified expected code hash;
+unit-test addresses and dummy bytecode are not deployment inputs. Changes to
+these values require a new frontend build. This fallback restores discovery;
+release eligibility, signing checks and on-chain payment rules remain separate.

apps/frontend/package.json

@@ -102,6 +102,7 @@
     "test": "craco test --watchAll=false --passWithNoTests",
     "test:staged": "craco test --watchAll=false --passWithNoTests --bail --onlyChanged",
     "lint": "eslint -c .eslintrc.js ./",
+    "typecheck": "tsc -p tsconfig.typecheck.json",
     "generate:graphql": "graphql-codegen",
     "generate:graphql:fetch:testnet": "env-cmd -f .env.development.local graphql-codegen -c codegen.fetch.yml",
     "generate:graphql:fetch:mainnet": "env-cmd -f .env.staging graphql-codegen -c codegen.fetch.yml",

apps/frontend/scripts/typecheck-stubs/opaque.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Stand-in for a dependency whose shipped types this project's TypeScript
+ * cannot parse. `skipLibCheck` does not help: those errors are SYNTACTIC, and
+ * tsc stops before reporting a single semantic diagnostic — which is why the
+ * typecheck passed while nothing in `src/` was being checked at all.
+ * Redirecting the offending modules here keeps them out of the parse, at the
+ * cost of typing them as `any`.
+ */
+declare const opaque: any;
+export = opaque;

apps/frontend/src/app/2_molecules/ConnectWalletButton/ConnectWalletButton.test.tsx

@@ -0,0 +1,108 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import React from 'react';
+
+import 'jest-canvas-mock';
+import { MemoryRouter } from 'react-router-dom';
+
+import { ChainIds } from '@sovryn/ethers-provider';
+
+import { i18n } from '../../../locales/i18n';
+import { ConnectWalletButton } from './ConnectWalletButton';
+
+const ACCOUNT = '0x1111111111111111111111111111111111111111';
+const ID = 'dapp-header-connect';
+
+let mockChainId: string;
+
+jest.mock('nanoid', () => ({ nanoid: () => '1234' }));
+
+jest.mock('../../../contexts/NotificationContext', () => ({
+  useNotificationContext: () => ({ addNotification: jest.fn() }),
+}));
+
+jest.mock('../../../hooks/useChainStore', () => ({
+  useCurrentChain: () => mockChainId,
+}));
+
+const openMenu = (chainId: string = ChainIds.RSK_MAINNET) => {
+  mockChainId = chainId;
+  const view = render(
+    <MemoryRouter>
+      <ConnectWalletButton
+        onConnect={jest.fn()}
+        onDisconnect={jest.fn()}
+        address={ACCOUNT}
+        dataAttribute={ID}
+      />
+    </MemoryRouter>,
+  );
+  userEvent.click(screen.getByText(/^0x11/));
+  return view;
+};
+
+const menuEntry = (name: string) =>
+  document.querySelector(
+    `[data-layout-id="${ID}-menu-${name}"]`,
+  ) as HTMLElement;
+
+describe('ConnectWalletButton account menu', () => {
+  beforeAll(async () => {
+    await i18n;
+  });
+
+  beforeEach(() => {
+    // The address badge draws an identicon on a canvas; the test config resets
+    // the canvas mock before every test, so give the canvas back a minimal
+    // 2d context.
+    HTMLCanvasElement.prototype.getContext = (() => ({
+      fillStyle: '',
+      fillRect: () => {},
+    })) as unknown as HTMLCanvasElement['getContext'];
+    HTMLCanvasElement.prototype.toDataURL = () => '';
+  });
+
+  it('opens the Perimeter page from the account menu', () => {
+    openMenu();
+
+    const entry = menuEntry('perimeter');
+    expect(entry).toHaveTextContent(/^Perimeter queue$/);
+    expect(entry.closest('a')).toHaveAttribute('href', '/perimeter');
+  });
+
+  it('lists the Perimeter entry after History and before Notifications', () => {
+    openMenu();
+
+    const order = Array.from(
+      document.querySelectorAll(`[data-layout-id^="${ID}-menu-"]`),
+    )
+      .map(node =>
+        node.getAttribute('data-layout-id')!.replace(`${ID}-menu-`, ''),
+      )
+      .filter(name =>
+        [
+          'portfolio',
+          'rewards',
+          'history',
+          'perimeter',
+          'notifications',
+        ].includes(name),
+      );
+
+    expect(order).toEqual([
+      'portfolio',
+      'rewards',
+      'history',
+      'perimeter',
+      'notifications',
+    ]);
+  });
+
+  it('shows the Perimeter entry on every chain, unlike Notifications', () => {
+    openMenu(ChainIds.BOB_MAINNET);
+
+    expect(menuEntry('perimeter')).not.toHaveClass('hidden');
+    expect(menuEntry('notifications')).toHaveClass('hidden');
+  });
+});

apps/frontend/src/app/2_molecules/ConnectWalletButton/ConnectWalletButton.tsx

@@ -98,6 +98,12 @@ export const ConnectWalletButton: FC<
                   dataAttribute={`${dataAttribute}-menu-history`}
                 />
               </Link>
+              <Link to="/perimeter" className="no-underline">
+                <MenuItem
+                  text={t(translations.connectWalletButton.perimeter)}
+                  dataAttribute={`${dataAttribute}-menu-perimeter`}
+                />
+              </Link>
               <MenuItem
                 text={t(translations.connectWalletButton.notifications)}
                 onClick={handleSettingsClick}

apps/frontend/src/app/2_molecules/ExitDelayRow/ExitDelayRow.test.tsx

@@ -0,0 +1,123 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import React from 'react';
+
+import 'jest-canvas-mock';
+import { MemoryRouter } from 'react-router-dom';
+
+import { i18n } from '../../../locales/i18n';
+import { ExitDelayRow } from './ExitDelayRow';
+
+jest.mock('nanoid', () => {
+  return { nanoid: () => '1234' };
+});
+
+jest.mock('../../../contexts/NotificationContext', () => {
+  return {
+    useNotificationContext: () => ({
+      addNotification: jest.fn(),
+    }),
+  };
+});
+
+const renderRow = (delaySeconds: number, unknown = false, loading = false) =>
+  render(
+    <MemoryRouter>
+      <ExitDelayRow
+        delaySeconds={delaySeconds}
+        unknown={unknown}
+        loading={loading}
+      />
+    </MemoryRouter>,
+  );
+
+describe('ExitDelayRow', () => {
+  beforeAll(async () => {
+    await i18n;
+  });
+
+  it('renders nothing when the perimeter imposes no delay', () => {
+    const { container } = renderRow(0);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('shows the hold duration in whole units', () => {
+    const { container } = renderRow(172800);
+    expect(screen.getByText('Withdrawal delay')).toBeInTheDocument();
+    expect(
+      container.querySelector('[data-layout-id="exit-delay-duration"]'),
+    ).toHaveTextContent('2 days');
+  });
+
+  it('uses the singular form for a one-unit hold', () => {
+    const { container } = renderRow(3600);
+    expect(
+      container.querySelector('[data-layout-id="exit-delay-duration"]'),
+    ).toHaveTextContent('1 hour');
+  });
+
+  it('rounds a partial unit up, never down', () => {
+    const { container } = renderRow(5400);
+    expect(
+      container.querySelector('[data-layout-id="exit-delay-duration"]'),
+    ).toHaveTextContent('2 hours');
+  });
+
+  it('names the withdraw queue and links to the Perimeter page, visibly', () => {
+    const { container } = renderRow(3600);
+    const notice = container.querySelector(
+      '[data-test-id="exit-delay-vault-notice"]',
+    );
+    expect(notice).toBeInTheDocument();
+    expect(notice).toHaveTextContent(/Perimeter withdraw queue/i);
+    const link = container.querySelector(
+      '[data-test-id="exit-delay-vault-link"]',
+    );
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/perimeter');
+  });
+
+  it('admits it could not check, instead of rendering as an unheld withdrawal', () => {
+    // The delay fails closed on chain: a quote we could not read means the
+    // withdrawal is held or it reverts. Rendering nothing would tell the user
+    // the money arrives now.
+    const { container } = renderRow(0, true);
+    expect(container).not.toBeEmptyDOMElement();
+    expect(
+      container.querySelector('[data-layout-id="exit-delay-unknown"]'),
+    ).toHaveTextContent('Could not be checked');
+    const notice = container.querySelector(
+      '[data-test-id="exit-delay-unknown-notice"]',
+    );
+    expect(notice).toHaveTextContent(/could not check/i);
+    expect(notice).toHaveTextContent(/Perimeter withdraw queue/i);
+    expect(
+      container.querySelector('[data-layout-id="exit-delay-duration"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('says it is still checking while the quote is in flight, instead of rendering as an unheld withdrawal', () => {
+    const { container } = renderRow(0, false, true);
+    expect(
+      container.querySelector('[data-layout-id="exit-delay-checking"]'),
+    ).toHaveTextContent(/Checking/);
+    expect(
+      container.querySelector('[data-layout-id="exit-delay-duration"]'),
+    ).not.toBeInTheDocument();
+    expect(
+      container.querySelector('[data-layout-id="exit-delay-unknown"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('explains where the funds go, on click', () => {
+    const { container } = renderRow(3600);
+    const helper = container.querySelector(
+      '[data-layout-id="exit-delay-helper"]',
+    );
+    expect(helper).toBeInTheDocument();
+    fireEvent.click(helper!);
+    expect(
+      screen.getByText(/held in the Sovryn Perimeter withdraw queue/i),
+    ).toBeInTheDocument();
+  });
+});