From 1dea738d8e4e4e14dc0cbf69638200c0bcde6a29 Mon Sep 17 00:00:00 2001
From: David Meister <thedavidmeister@gmail.com>
Date: Sat, 13 Jun 2026 11:04:22 +0000
Subject: [PATCH 1/3] Add "remove and withdraw all" option to order removal

Issue #2024 asks to offer withdrawing an order's vault balances at the same
time as removing the order, without making withdrawal automatic (orders can
share vaults).

In OrderDetail.svelte the standalone Remove button becomes a dropdown (when the
new optional onRemoveAndWithdrawAll callback is provided) offering:
- "Remove" (unchanged behaviour), and
- "Remove and withdraw all vaults".

The webapp wires the new option to handleRemoveOrderAndWithdrawAll, which
mirrors handleVaultsWithdrawAll but builds a single multicall([removeOrder,
withdraw]) so removal and withdrawal execute atomically. Withdraw calldata is
only included when the order actually has withdrawable (positive-balance)
vaults, so an empty order is still removed. When onRemoveAndWithdrawAll is not
supplied, OrderDetail renders the original single Remove button, so existing
callers are unaffected.

Tests:
- ui-components OrderDetail: new tests assert the dropdown replaces the bare
  button, that each item invokes the correct callback (Remove -> onRemove with
  the order; Remove-and-withdraw -> onRemoveAndWithdrawAll with the order and
  its vaultsList), and that the dropdown is hidden for inactive orders.
- webapp handleRemoveOrderAndWithdrawAll: new tests assert the exact multicall
  calldata bytes and decode it to prove the flat [removeOrder, withdraw] order,
  that an empty order produces a remove-only multicall (and never requests
  withdraw calldata), the combined modal title, the remove-order transaction on
  confirm, and that remove/withdraw/lookup errors toast and abort.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/__tests__/OrderDetail.test.ts         |  88 +++++++
 .../lib/components/detail/OrderDetail.svelte  |  47 +++-
 .../handleRemoveOrderAndWithdrawAll.test.ts   | 219 ++++++++++++++++++
 .../handleRemoveOrderAndWithdrawAll.ts        | 118 ++++++++++
 .../+page.svelte                              |  17 ++
 5 files changed, 483 insertions(+), 6 deletions(-)
 create mode 100644 packages/webapp/src/__tests__/handleRemoveOrderAndWithdrawAll.test.ts
 create mode 100644 packages/webapp/src/lib/services/handleRemoveOrderAndWithdrawAll.ts

diff --git a/packages/ui-components/src/__tests__/OrderDetail.test.ts b/packages/ui-components/src/__tests__/OrderDetail.test.ts
index df1d6f54ad..79ea19e0cc 100644
--- a/packages/ui-components/src/__tests__/OrderDetail.test.ts
+++ b/packages/ui-components/src/__tests__/OrderDetail.test.ts
@@ -248,6 +248,94 @@ describe("OrderDetail", () => {
     });
   });
 
+  it("renders a remove dropdown (not a bare remove button) when onRemoveAndWithdrawAll is provided", async () => {
+    mockMatchesAccount.mockReturnValue(true);
+    render(OrderDetail, {
+      props: { ...defaultProps, onRemoveAndWithdrawAll: vi.fn() },
+      context: new Map([["$$_queryClient", queryClient]]),
+    });
+
+    await waitFor(() => {
+      // The dropdown trigger replaces the standalone remove button.
+      expect(screen.getByTestId("remove-order-menu")).toBeInTheDocument();
+    });
+
+    // Dropdown items are hidden until the trigger is opened.
+    expect(
+      screen.queryByTestId("remove-and-withdraw-all-button"),
+    ).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByTestId("remove-order-menu"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("remove-button")).toBeInTheDocument();
+      expect(
+        screen.getByTestId("remove-and-withdraw-all-button"),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("calls onRemove (not onRemoveAndWithdrawAll) when the Remove dropdown item is clicked", async () => {
+    mockMatchesAccount.mockReturnValue(true);
+    const onRemove = vi.fn();
+    const onRemoveAndWithdrawAll = vi.fn();
+    render(OrderDetail, {
+      props: { ...defaultProps, onRemove, onRemoveAndWithdrawAll },
+      context: new Map([["$$_queryClient", queryClient]]),
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("remove-order-menu")).toBeInTheDocument();
+    });
+    await userEvent.click(screen.getByTestId("remove-order-menu"));
+    await userEvent.click(await screen.findByTestId("remove-button"));
+
+    expect(onRemove).toHaveBeenCalledWith(mockRaindexClient, mockOrder);
+    expect(onRemoveAndWithdrawAll).not.toHaveBeenCalled();
+  });
+
+  it("calls onRemoveAndWithdrawAll with the order's vaultsList when that dropdown item is clicked", async () => {
+    mockMatchesAccount.mockReturnValue(true);
+    const onRemove = vi.fn();
+    const onRemoveAndWithdrawAll = vi.fn();
+    render(OrderDetail, {
+      props: { ...defaultProps, onRemove, onRemoveAndWithdrawAll },
+      context: new Map([["$$_queryClient", queryClient]]),
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("remove-order-menu")).toBeInTheDocument();
+    });
+    await userEvent.click(screen.getByTestId("remove-order-menu"));
+    await userEvent.click(
+      await screen.findByTestId("remove-and-withdraw-all-button"),
+    );
+
+    expect(onRemoveAndWithdrawAll).toHaveBeenCalledWith(
+      mockRaindexClient,
+      mockOrder,
+      mockOrder.vaultsList,
+    );
+    expect(onRemove).not.toHaveBeenCalled();
+  });
+
+  it("does not show the remove dropdown for inactive orders even with onRemoveAndWithdrawAll", async () => {
+    mockMatchesAccount.mockReturnValue(true);
+    (mockRaindexClient.getOrderByHash as Mock).mockResolvedValue({
+      value: { ...mockOrder, active: false },
+    });
+    render(OrderDetail, {
+      props: { ...defaultProps, onRemoveAndWithdrawAll: vi.fn() },
+      context: new Map([["$$_queryClient", queryClient]]),
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("Order")).toBeInTheDocument();
+    });
+    expect(screen.queryByTestId("remove-order-menu")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("remove-button")).not.toBeInTheDocument();
+  });
+
   it("does not show remove button if account does not match owner", async () => {
     mockMatchesAccount.mockReturnValue(false);
 
diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
index 058c829ecd..89d4df29d0 100644
--- a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -12,7 +12,7 @@
 	import { QKEY_ORDER } from '../../queries/keys';
 	import CodeMirrorRainlang from '../CodeMirrorRainlang.svelte';
 	import { createQuery, useQueryClient } from '@tanstack/svelte-query';
-	import { Button, TabItem, Tabs, Tooltip } from 'flowbite-svelte';
+	import { Button, Dropdown, DropdownItem, TabItem, Tabs, Tooltip } from 'flowbite-svelte';
 	import { onDestroy } from 'svelte';
 	// import OrderApy from '../tables/OrderAPY.svelte';
 	import type { DebugTradeModalHandler, QuoteDebugModalHandler } from '../../types/modal';
@@ -21,6 +21,7 @@
 	import {
 		ArrowDownToBracketOutline,
 		ArrowUpFromBracketOutline,
+		ChevronDownOutline,
 		InfoCircleOutline,
 		WalletOutline
 	} from 'flowbite-svelte-icons';
@@ -51,6 +52,19 @@
 	 */
 	export let onRemove: (raindexClient: RaindexClient, order: RaindexOrder) => void;
 
+	/** Callback function when remove-and-withdraw-all action is triggered for an order.
+	 * Removes the order and withdraws all of its vault balances in a single transaction.
+	 * @param order The order to remove
+	 * @param vaultsList The VaultsList struct containing the order's vaults to withdraw from
+	 */
+	export let onRemoveAndWithdrawAll:
+		| ((
+				raindexClient: RaindexClient,
+				order: RaindexOrder,
+				vaultsList: RaindexVaultsList
+		  ) => void)
+		| undefined = undefined;
+
 	/** Callback function when deposit action is triggered for a vault
 	 * @param vault The vault to deposit into
 	 */
@@ -142,11 +156,32 @@
 
 			<div class="flex items-center gap-2">
 				{#if matchesAccount(data.owner) && data.active}
-					<Button
-						on:click={() => onRemove(raindexClient, data)}
-						data-testid="remove-button"
-						aria-label="Remove order">Remove</Button
-					>
+					{#if onRemoveAndWithdrawAll}
+						<Button
+							id="remove-order-menu"
+							data-testid="remove-order-menu"
+							aria-label="Remove order">
+							Remove
+							<ChevronDownOutline size="sm" class="ml-2" />
+						</Button>
+						<Dropdown placement="bottom-end" triggeredBy="#remove-order-menu">
+							<DropdownItem
+								on:click={() => onRemove(raindexClient, data)}
+								data-testid="remove-button">Remove</DropdownItem
+							>
+							<DropdownItem
+								on:click={() => onRemoveAndWithdrawAll(raindexClient, data, data.vaultsList)}
+								data-testid="remove-and-withdraw-all-button"
+								>Remove and withdraw all vaults</DropdownItem
+							>
+						</Dropdown>
+					{:else}
+						<Button
+							on:click={() => onRemove(raindexClient, data)}
+							data-testid="remove-button"
+							aria-label="Remove order">Remove</Button
+						>
+					{/if}
 				{/if}
 				{#if data.active && onTakeOrder}
 					<Button
diff --git a/packages/webapp/src/__tests__/handleRemoveOrderAndWithdrawAll.test.ts b/packages/webapp/src/__tests__/handleRemoveOrderAndWithdrawAll.test.ts
new file mode 100644
index 0000000000..f35399a296
--- /dev/null
+++ b/packages/webapp/src/__tests__/handleRemoveOrderAndWithdrawAll.test.ts
@@ -0,0 +1,219 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import {
+  handleRemoveOrderAndWithdrawAll,
+  type HandleRemoveOrderAndWithdrawAllDependencies,
+} from "../lib/services/handleRemoveOrderAndWithdrawAll";
+import type {
+  RaindexClient,
+  RaindexOrder,
+  RaindexVaultsList,
+} from "@rainlanguage/raindex";
+import type { Hex } from "viem";
+import { decodeFunctionData } from "viem";
+import type { TransactionManager } from "@rainlanguage/ui-components";
+
+const MULTICALL_ABI = [
+  {
+    type: "function",
+    name: "multicall",
+    inputs: [{ name: "data", type: "bytes[]" }],
+    outputs: [{ name: "results", type: "bytes[]" }],
+    stateMutability: "nonpayable",
+  },
+] as const;
+
+const REMOVE_CALLDATA = "0xdeadbeef" as Hex;
+const WITHDRAW_CALLDATA = "0xcafe" as Hex;
+
+// Pre-computed via viem: multicall([REMOVE_CALLDATA, WITHDRAW_CALLDATA]).
+const EXPECTED_BOTH =
+  "0xac9650d800000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000800000000000000000000000000000000000000000000000000000000000000004deadbeef000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002cafe000000000000000000000000000000000000000000000000000000000000";
+// Pre-computed via viem: multicall([REMOVE_CALLDATA]).
+const EXPECTED_REMOVE_ONLY =
+  "0xac9650d80000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000004deadbeef00000000000000000000000000000000000000000000000000000000";
+
+const mockHandleTransactionConfirmationModal = vi.fn();
+const mockErrToast = vi.fn();
+const mockCreateRemoveOrderTransaction = vi.fn();
+
+const mockManager = {
+  createRemoveOrderTransaction: mockCreateRemoveOrderTransaction,
+} as unknown as TransactionManager;
+
+const mockRaindexClient = {} as unknown as RaindexClient;
+
+const orderHash = "0xorderhash" as Hex;
+const raindex = "0xraindexaddress" as Hex;
+const chainId = 137;
+
+const makeOrder = (overrides: Partial<RaindexOrder> = {}) =>
+  ({
+    orderHash,
+    raindex,
+    chainId,
+    getRemoveCalldata: vi
+      .fn()
+      .mockReturnValue({ value: REMOVE_CALLDATA, error: undefined }),
+    ...overrides,
+  }) as unknown as RaindexOrder;
+
+const makeVaultsList = (overrides: Partial<RaindexVaultsList> = {}) =>
+  ({
+    getWithdrawableVaults: vi
+      .fn()
+      .mockReturnValue({ value: [{ id: "0xvault" }], error: undefined }),
+    getWithdrawCalldata: vi
+      .fn()
+      .mockResolvedValue({ value: WITHDRAW_CALLDATA, error: undefined }),
+    ...overrides,
+  }) as unknown as RaindexVaultsList;
+
+const makeDeps = (
+  order: RaindexOrder,
+  vaultsList: RaindexVaultsList,
+): HandleRemoveOrderAndWithdrawAllDependencies => ({
+  raindexClient: mockRaindexClient,
+  order,
+  vaultsList,
+  handleTransactionConfirmationModal: mockHandleTransactionConfirmationModal,
+  errToast: mockErrToast,
+  manager: mockManager,
+});
+
+describe("handleRemoveOrderAndWithdrawAll", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockHandleTransactionConfirmationModal.mockResolvedValue({ success: true });
+  });
+
+  it("batches removeOrder + withdraw into a single multicall in that exact order", async () => {
+    const order = makeOrder();
+    const vaultsList = makeVaultsList();
+
+    await handleRemoveOrderAndWithdrawAll(makeDeps(order, vaultsList));
+
+    expect(mockHandleTransactionConfirmationModal).toHaveBeenCalledOnce();
+    const args = mockHandleTransactionConfirmationModal.mock.calls[0][0].args;
+
+    // Exact-bytes assertion: a wrong order, a missing withdraw, or a wrong
+    // selector all change these bytes.
+    expect(args.calldata).toBe(EXPECTED_BOTH);
+
+    // Decode to prove it is a flat multicall containing the two calls in order.
+    const decoded = decodeFunctionData({
+      abi: MULTICALL_ABI,
+      data: args.calldata,
+    });
+    expect(decoded.functionName).toBe("multicall");
+    expect(decoded.args[0]).toEqual([REMOVE_CALLDATA, WITHDRAW_CALLDATA]);
+
+    expect(args.toAddress).toBe(raindex);
+    expect(args.chainId).toBe(chainId);
+    expect(args.entity).toBe(order);
+    expect(mockErrToast).not.toHaveBeenCalled();
+  });
+
+  it("removes the order alone (no withdraw call) when there are no withdrawable vaults", async () => {
+    const order = makeOrder();
+    const vaultsList = makeVaultsList({
+      getWithdrawableVaults: vi
+        .fn()
+        .mockReturnValue({ value: [], error: undefined }),
+    });
+
+    await handleRemoveOrderAndWithdrawAll(makeDeps(order, vaultsList));
+
+    const args = mockHandleTransactionConfirmationModal.mock.calls[0][0].args;
+    expect(args.calldata).toBe(EXPECTED_REMOVE_ONLY);
+
+    const decoded = decodeFunctionData({
+      abi: MULTICALL_ABI,
+      data: args.calldata,
+    });
+    expect(decoded.args[0]).toEqual([REMOVE_CALLDATA]);
+
+    // Must not even ask for withdraw calldata when nothing is withdrawable.
+    expect(vaultsList.getWithdrawCalldata).not.toHaveBeenCalled();
+    expect(mockErrToast).not.toHaveBeenCalled();
+  });
+
+  it("uses the combined-action modal title", async () => {
+    await handleRemoveOrderAndWithdrawAll(
+      makeDeps(makeOrder(), makeVaultsList()),
+    );
+
+    expect(mockHandleTransactionConfirmationModal).toHaveBeenCalledWith(
+      expect.objectContaining({
+        modalTitle: "Removing order and withdrawing all vaults",
+      }),
+    );
+  });
+
+  it("creates a remove-order transaction on confirmation", async () => {
+    const order = makeOrder();
+    const txHash = "0xtxhash" as Hex;
+
+    await handleRemoveOrderAndWithdrawAll(makeDeps(order, makeVaultsList()));
+
+    const onConfirm =
+      mockHandleTransactionConfirmationModal.mock.calls[0][0].args.onConfirm;
+    onConfirm(txHash);
+
+    expect(mockCreateRemoveOrderTransaction).toHaveBeenCalledWith({
+      raindexClient: mockRaindexClient,
+      txHash,
+      queryKey: orderHash,
+      chainId,
+      entity: order,
+    });
+  });
+
+  it("toasts the remove-calldata error and never opens the modal", async () => {
+    const order = makeOrder({
+      getRemoveCalldata: vi.fn().mockReturnValue({
+        value: undefined,
+        error: { msg: "remove failed", readableMsg: "Remove calldata failed" },
+      }),
+    });
+
+    await handleRemoveOrderAndWithdrawAll(makeDeps(order, makeVaultsList()));
+
+    expect(mockErrToast).toHaveBeenCalledWith("Remove calldata failed");
+    expect(mockHandleTransactionConfirmationModal).not.toHaveBeenCalled();
+  });
+
+  it("toasts the withdraw-calldata error and never opens the modal", async () => {
+    const vaultsList = makeVaultsList({
+      getWithdrawCalldata: vi.fn().mockResolvedValue({
+        value: undefined,
+        error: {
+          msg: "withdraw failed",
+          readableMsg: "Withdraw calldata failed",
+        },
+      }),
+    });
+
+    await handleRemoveOrderAndWithdrawAll(makeDeps(makeOrder(), vaultsList));
+
+    expect(mockErrToast).toHaveBeenCalledWith(
+      "Failed to generate withdraw calldata: Withdraw calldata failed",
+    );
+    expect(mockHandleTransactionConfirmationModal).not.toHaveBeenCalled();
+  });
+
+  it("toasts the withdrawable-vaults lookup error and never opens the modal", async () => {
+    const vaultsList = makeVaultsList({
+      getWithdrawableVaults: vi.fn().mockReturnValue({
+        value: undefined,
+        error: { msg: "lookup failed", readableMsg: "Lookup failed" },
+      }),
+    });
+
+    await handleRemoveOrderAndWithdrawAll(makeDeps(makeOrder(), vaultsList));
+
+    expect(mockErrToast).toHaveBeenCalledWith(
+      "Failed to get withdrawable vaults: Lookup failed",
+    );
+    expect(mockHandleTransactionConfirmationModal).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/webapp/src/lib/services/handleRemoveOrderAndWithdrawAll.ts b/packages/webapp/src/lib/services/handleRemoveOrderAndWithdrawAll.ts
new file mode 100644
index 0000000000..95dea0e4f0
--- /dev/null
+++ b/packages/webapp/src/lib/services/handleRemoveOrderAndWithdrawAll.ts
@@ -0,0 +1,118 @@
+import type {
+  RaindexClient,
+  RaindexOrder,
+  RaindexVaultsList,
+} from "@rainlanguage/raindex";
+import { encodeFunctionData, type Hex } from "viem";
+import type {
+  TransactionManager,
+  TransactionConfirmationProps,
+} from "@rainlanguage/ui-components";
+import type { TransactionConfirmationModalResult } from "./modal";
+
+/**
+ * ABI fragment for the Raindex `multicall(bytes[])` function (inherited from
+ * OpenZeppelin `Multicall`). Each entry is delegatecalled into the contract, so
+ * a removeOrder call and the per-vault withdraw calls can be batched into a
+ * single transaction.
+ */
+const MULTICALL_ABI = [
+  {
+    type: "function",
+    name: "multicall",
+    inputs: [{ name: "data", type: "bytes[]" }],
+    outputs: [{ name: "results", type: "bytes[]" }],
+    stateMutability: "nonpayable",
+  },
+] as const;
+
+export interface HandleRemoveOrderAndWithdrawAllDependencies {
+  raindexClient: RaindexClient;
+  order: RaindexOrder;
+  vaultsList: RaindexVaultsList;
+  handleTransactionConfirmationModal: (
+    props: TransactionConfirmationProps,
+  ) => Promise<TransactionConfirmationModalResult>;
+  errToast: (message: string) => void;
+  manager: TransactionManager;
+}
+
+/**
+ * Removes an order and withdraws all of its withdrawable vault balances in a
+ * single transaction.
+ *
+ * Mirrors `handleVaultsWithdrawAll`, but the generated calldata is a
+ * `multicall([removeOrder, ...withdraws])` so that the order removal and the
+ * vault withdrawals execute atomically. The withdraw calldata is sourced from
+ * `vaultsList.getWithdrawCalldata()` (which itself only includes vaults with a
+ * positive balance), so an order whose vaults are all empty is still removed.
+ */
+export async function handleRemoveOrderAndWithdrawAll(
+  deps: HandleRemoveOrderAndWithdrawAllDependencies,
+): Promise<void> {
+  const {
+    raindexClient,
+    order,
+    vaultsList,
+    handleTransactionConfirmationModal,
+    errToast,
+    manager,
+  } = deps;
+
+  try {
+    const removeCalldataResult = order.getRemoveCalldata();
+    if (removeCalldataResult.error) {
+      return errToast(removeCalldataResult.error.readableMsg);
+    }
+    const removeCalldata = removeCalldataResult.value as Hex;
+
+    const calls: Hex[] = [removeCalldata];
+
+    // Only attempt to build withdraw calldata when there is something to
+    // withdraw. Empty vaults must not block the order removal.
+    const withdrawableResult = vaultsList.getWithdrawableVaults();
+    if (withdrawableResult.error) {
+      return errToast(
+        `Failed to get withdrawable vaults: ${withdrawableResult.error.readableMsg}`,
+      );
+    }
+    if (withdrawableResult.value.length > 0) {
+      const withdrawCalldataResult = await vaultsList.getWithdrawCalldata();
+      if (withdrawCalldataResult.error) {
+        return errToast(
+          `Failed to generate withdraw calldata: ${withdrawCalldataResult.error.readableMsg}`,
+        );
+      }
+      calls.push(withdrawCalldataResult.value as Hex);
+    }
+
+    const calldata = encodeFunctionData({
+      abi: MULTICALL_ABI,
+      functionName: "multicall",
+      args: [calls],
+    });
+
+    await handleTransactionConfirmationModal({
+      open: true,
+      modalTitle: "Removing order and withdrawing all vaults",
+      args: {
+        entity: order,
+        toAddress: order.raindex,
+        chainId: order.chainId,
+        calldata,
+        onConfirm: (txHash: Hex) => {
+          manager.createRemoveOrderTransaction({
+            raindexClient,
+            txHash,
+            queryKey: order.orderHash,
+            chainId: order.chainId,
+            entity: order,
+          });
+        },
+      },
+    });
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : "Unknown error";
+    errToast(`Failed to remove order and withdraw all vaults: ${errorMsg}`);
+  }
+}
diff --git a/packages/webapp/src/routes/orders/[chainId]-[raindex]-[orderHash]/+page.svelte b/packages/webapp/src/routes/orders/[chainId]-[raindex]-[orderHash]/+page.svelte
index 8d406ae240..080925ee54 100644
--- a/packages/webapp/src/routes/orders/[chainId]-[raindex]-[orderHash]/+page.svelte
+++ b/packages/webapp/src/routes/orders/[chainId]-[raindex]-[orderHash]/+page.svelte
@@ -24,6 +24,7 @@
 	} from '@rainlanguage/raindex';
 	import type { Hex } from 'viem';
 	import { handleRemoveOrder } from '$lib/services/handleRemoveOrder';
+	import { handleRemoveOrderAndWithdrawAll } from '$lib/services/handleRemoveOrderAndWithdrawAll';
 	import { handleVaultWithdraw } from '$lib/services/handleVaultWithdraw';
 	import { handleVaultDeposit } from '$lib/services/handleVaultDeposit';
 	import { handleVaultsWithdrawAll } from '$lib/services/handleVaultsWithdrawAll';
@@ -48,6 +49,21 @@
 		});
 	}
 
+	async function onRemoveAndWithdrawAll(
+		raindexClient: RaindexClient,
+		order: RaindexOrder,
+		vaultsList: RaindexVaultsList
+	) {
+		await handleRemoveOrderAndWithdrawAll({
+			raindexClient,
+			order,
+			vaultsList,
+			handleTransactionConfirmationModal,
+			errToast,
+			manager
+		});
+	}
+
 	async function onDeposit(raindexClient: RaindexClient, vault: RaindexVault) {
 		await handleVaultDeposit({
 			raindexClient,
@@ -107,6 +123,7 @@
 	{lightweightChartsTheme}
 	{codeMirrorTheme}
 	{onRemove}
+	{onRemoveAndWithdrawAll}
 	{onDeposit}
 	{onWithdraw}
 	{onWithdrawAll}

From 83a09edce292fac65c3f198b30a7fde0934fc587 Mon Sep 17 00:00:00 2001
From: David Meister <thedavidmeister@gmail.com>
Date: Mon, 15 Jun 2026 14:19:33 +0000
Subject: [PATCH 2/3] Rewrite process/mutation comments to
 current-behavior-only

Restate two added test comments as present-tense facts about what the
test asserts now, dropping before/after and hypothetical-mutation framing.
Comment-only; no code or logic changed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/ui-components/src/__tests__/OrderDetail.test.ts      | 2 +-
 .../src/__tests__/handleRemoveOrderAndWithdrawAll.test.ts     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui-components/src/__tests__/OrderDetail.test.ts b/packages/ui-components/src/__tests__/OrderDetail.test.ts
index 49115d4ee8..00cb46dc3c 100644
--- a/packages/ui-components/src/__tests__/OrderDetail.test.ts
+++ b/packages/ui-components/src/__tests__/OrderDetail.test.ts
@@ -256,7 +256,7 @@ describe("OrderDetail", () => {
     });
 
     await waitFor(() => {
-      // The dropdown trigger replaces the standalone remove button.
+      // When onRemoveAndWithdrawAll is provided, the dropdown trigger renders.
       expect(screen.getByTestId("remove-order-menu")).toBeInTheDocument();
     });
 
diff --git a/packages/webapp/src/__tests__/handleRemoveOrderAndWithdrawAll.test.ts b/packages/webapp/src/__tests__/handleRemoveOrderAndWithdrawAll.test.ts
index f35399a296..6ffa703259 100644
--- a/packages/webapp/src/__tests__/handleRemoveOrderAndWithdrawAll.test.ts
+++ b/packages/webapp/src/__tests__/handleRemoveOrderAndWithdrawAll.test.ts
@@ -95,8 +95,8 @@ describe("handleRemoveOrderAndWithdrawAll", () => {
     expect(mockHandleTransactionConfirmationModal).toHaveBeenCalledOnce();
     const args = mockHandleTransactionConfirmationModal.mock.calls[0][0].args;
 
-    // Exact-bytes assertion: a wrong order, a missing withdraw, or a wrong
-    // selector all change these bytes.
+    // The calldata is exactly the multicall of removeOrder then withdraw,
+    // in that order, under the multicall selector.
     expect(args.calldata).toBe(EXPECTED_BOTH);
 
     // Decode to prove it is a flat multicall containing the two calls in order.

From 1da79a795b05f60a64d9a003a03c987ab58d02e9 Mon Sep 17 00:00:00 2001
From: David Meister <thedavidmeister@gmail.com>
Date: Fri, 19 Jun 2026 17:38:44 +0000
Subject: [PATCH 3/3] merge(main): resolve conflicts [merge-update]