add option to withdraw all liquidity on stoping amm

apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/DisableAmmButton.tsx

@@ -2,32 +2,86 @@
 
 import { toast } from "@bleu/ui";
 import { StopIcon } from "@radix-ui/react-icons";
-import React from "react";
+import React, { useEffect } from "react";
+import { parseUnits } from "viem";
 import { useAccount } from "wagmi";
 
 import { Button } from "#/components/Button";
+import { Checkbox } from "#/components/Checkbox";
+import { Dialog } from "#/components/Dialog";
 import { useManagedTransaction } from "#/hooks/tx-manager/useManagedTransaction";
 import { ICowAmm } from "#/lib/fetchAmmData";
-import { DisableCoWAMMArgs, TRANSACTION_TYPES } from "#/lib/transactionFactory";
+import {
+  AllTransactionArgs,
+  TRANSACTION_TYPES,
+  WithdrawCoWAMMArgs,
+} from "#/lib/transactionFactory";
 import { ChainId } from "#/utils/chainsPublicClients";
 
 export function DisableAmmButton({ ammData }: { ammData: ICowAmm }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <Dialog
+      title="Disable"
+      content={
+        <DisableTradingDialogContent ammData={ammData} setIsOpen={setIsOpen} />
+      }
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      setIsOpen={setIsOpen}
+    >
+      <Button
+        className="flex items-center gap-1 py-3 px-6"
+        variant="destructive"
+        onClick={() => {
+          setIsOpen(true);
+        }}
+      >
+        <StopIcon />
+        Disable trading
+      </Button>
+    </Dialog>
+  );
+}
+
+function DisableTradingDialogContent({
+  ammData,
+  setIsOpen,
+}: {
+  ammData: ICowAmm;
+  setIsOpen: (isOpen: boolean) => void;
+}) {
+  const [withdrawFunds, setWithdrawFunds] = React.useState(false);
   const { chainId } = useAccount();
 
   const { writeContract, writeContractWithSafe, status, isWalletContract } =
     useManagedTransaction();
 
   function onDisableAMM() {
-    const txArgs = {
-      type: TRANSACTION_TYPES.DISABLE_COW_AMM,
-      amm: ammData.order.owner,
-      chainId: chainId as ChainId,
-      hash: ammData.order.hash,
-      version: ammData.version,
-    } as DisableCoWAMMArgs;
+    const txArgs = [
+      {
+        type: TRANSACTION_TYPES.DISABLE_COW_AMM,
+        amm: ammData.order.owner,
+        chainId: chainId as ChainId,
+        hash: ammData.order.hash,
+        version: ammData.version,
+      },
+    ] as AllTransactionArgs[];
+
+    if (withdrawFunds) {
+      txArgs.push({
+        type: TRANSACTION_TYPES.WITHDRAW_COW_AMM,
+        amm: ammData.order.owner,
+        amount0: parseUnits(ammData.token0.balance, ammData.token0.decimals),
+        amount1: parseUnits(ammData.token1.balance, ammData.token1.decimals),
+        chainId: chainId as ChainId,
+      } as WithdrawCoWAMMArgs);
+    }
+
     try {
       if (isWalletContract) {
-        writeContractWithSafe([txArgs]);
+        writeContractWithSafe(txArgs);
       } else {
         // TODO: this will need to be refactored once we have EOAs
         // @ts-ignore
@@ -42,16 +96,38 @@ export function DisableAmmButton({ ammData }: { ammData: ICowAmm }) {
     }
   }
 
+  useEffect(() => {
+    if (status === "confirmed") {
+      setIsOpen(false);
+    }
+  }, [status]);
+
   return (
-    <Button
-      className="flex items-center gap-1 py-3 px-6"
-      variant="destructive"
-      onClick={onDisableAMM}
-      loading={!["final", "idle", "confirmed", "error"].includes(status || "")}
-      loadingText="Confirming..."
-    >
-      <StopIcon />
-      Disable trading
-    </Button>
+    <div className="flex flex-col gap-2 text-background bg-foreground">
+      <span>
+        This action will halt the automatic rebalancing of your AMM over time.
+        You retain the ability to withdraw or deposit funds as needed. If
+        desired, you have the option to withdraw all your funds in one single
+        transaction.
+      </span>
+      <Checkbox
+        label="Withdraw all funds"
+        onChange={() => setWithdrawFunds(!withdrawFunds)}
+        checked={withdrawFunds}
+        id="withdraw-funds-checkbox"
+      />
+      <Button
+        className="flex items-center gap-1 py-3 px-6"
+        variant="destructive"
+        onClick={onDisableAMM}
+        loading={
+          !["final", "idle", "confirmed", "error"].includes(status || "")
+        }
+        loadingText="Confirming..."
+      >
+        <StopIcon />
+        Disable trading
+      </Button>
+    </div>
   );
 }

apps/cow-amm-deployer/src/components/Dialog.tsx

@@ -35,14 +35,14 @@ export function Dialog({
         <DialogPrimitive.Overlay
           id="dialog-overlay"
           className={cn(
-            "bg-black/20 data-[state=open]:animate-overlayShow fixed inset-0",
+            "bg-black/20 data-[state=open]:animate-overlayShow fixed inset-0"
           )}
         />
         <DialogPrimitive.Content
           className={cn(
             "data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-darkBrown focus:outline-none bg-input text-background",
             customWidth ? customWidth : "w-[90vw] max-w-[450px]",
-            noPadding ? "p-0" : "p-[25px]",
+            noPadding ? "p-0" : "p-[25px]"
           )}
           onCloseAutoFocus={onClose}
         >
@@ -60,7 +60,7 @@ export function Dialog({
           </div>
           <DialogPrimitive.Close asChild>
             <button
-              className="absolute right-[10px] top-[10px] inline-flex size-[30px] items-center justify-center text-sand12 hover:font-black focus:outline-none"
+              className="absolute right-[10px] top-[10px] inline-flex size-[30px] items-center justify-center text-background hover:font-black focus:outline-none"
               aria-label="Close"
             >
               <Cross2Icon />