Pedro/cow 284 milestone review 2 (#707)

* refactor amm data mutate to context * change cache time to 0 on public clients * fix bleu ui update errors * remove double loading on amm data page * fix: RPC exposition * change loading text on migration button * remove error on the metrics call * fix toaster and overflow on root layout * fix loading on transaction error * remove tx error toast and add success on amm context * check if amm is deployed on migrate * fix typo on token amount deposit * open sucess dialog on migration confirmed * sort amms data * style toast on traction success * change success dialog fetch interval to 1 second * remove codegen of composable cow * remove autoconnect * change default api url to production url * revert page autoconnect * add gnosis config on wagmi * fix conflict on loading status * fix error on multiple txs for disable button * fetch only if status is final or confirmed * separate toast and mutateamm
bleu · Jun 19, 2024 · 701e4e0 · 701e4e0
1 parent 8d6f7fa
commit 701e4e0
Show file tree

Hide file tree

Showing 31 changed files with 345 additions and 1,181 deletions.
diff --git a/apps/cow-amm-deployer/codegen.ts b/apps/cow-amm-deployer/codegen.ts
diff --git a/apps/cow-amm-deployer/src/app/[userId]/amms/(components)/AmmsTable.tsx b/apps/cow-amm-deployer/src/app/[userId]/amms/(components)/AmmsTable.tsx
@@ -4,7 +4,6 @@ import { formatNumber } from "@bleu/ui";
 import { useRouter } from "next/navigation";
 import React from "react";
 
-import { Spinner } from "#/components/Spinner";
 import { StatusBadge } from "#/components/StatusBadge";
 import Table from "#/components/Table";
 import { TokenInfo } from "#/components/TokenInfo";
@@ -18,8 +17,6 @@ export function AmmsTable({
   userId: string;
 }) {
   const router = useRouter();
-  const [isLoading, setIsLoading] = React.useState(false);
-
   return (
     <Table
       color="foreground"
@@ -40,19 +37,12 @@ export function AmmsTable({
               <span className="text-base">No AMMs created yet</span>
             </Table.BodyCell>
           </Table.BodyRow>
-        ) : isLoading ? (
-          <Table.BodyRow>
-            <Table.BodyCell colSpan={5} classNames="text-center">
-              <Spinner />
-            </Table.BodyCell>
-          </Table.BodyRow>
         ) : (
           standaloneAmmData.map((amm) => (
             <Table.BodyRow
               key={amm.id}
               onClick={() => {
                 router.push(`/${userId}/amms/${amm.id}`);
-                setIsLoading(true);
               }}
               classNames="hover:cursor-pointer hover:bg-accent"
             >

diff --git a/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/DisableAmmButton.tsx b/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/DisableAmmButton.tsx
@@ -1,16 +1,15 @@
 "use client";
 
-import { toast } from "@bleu/ui";
 import { StopIcon } from "@radix-ui/react-icons";
-import React, { useEffect } from "react";
+import React 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 { useAmmData } from "#/contexts/ammData";
-import { useManagedTransaction } from "#/hooks/tx-manager/useManagedTransaction";
+import { useAmmData } from "#/contexts/ammDataContext";
+import { useTransactionManagerContext } from "#/contexts/transactionManagerContext";
 import { ICowAmm } from "#/lib/fetchAmmData";
 import {
   AllTransactionArgs,
@@ -21,6 +20,7 @@ import { ChainId } from "#/utils/chainsPublicClients";
 
 export function DisableAmmButton({ ammData }: { ammData: ICowAmm }) {
   const [isOpen, setIsOpen] = React.useState(false);
+  const { isAmmUpdating } = useAmmData();
 
   return (
     <Dialog
@@ -38,6 +38,7 @@ export function DisableAmmButton({ ammData }: { ammData: ICowAmm }) {
         onClick={() => {
           setIsOpen(true);
         }}
+        disabled={isAmmUpdating}
       >
         <StopIcon />
         Disable trading
@@ -48,29 +49,21 @@ export function DisableAmmButton({ ammData }: { ammData: ICowAmm }) {
 
 function DisableTradingDialogContent({
   ammData,
-  setIsOpen,
 }: {
   ammData: ICowAmm;
   setIsOpen: (isOpen: boolean) => void;
 }) {
-  const { mutateAmm } = useAmmData();
+  const { isAmmUpdating } = useAmmData();
   const [withdrawFunds, setWithdrawFunds] = React.useState(false);
   const { chainId } = useAccount();
 
   const {
-    writeContract,
-    writeContractWithSafe,
-    status,
-    isWalletContract,
-    isPonderAPIUpToDate,
-  } = useManagedTransaction();
-
-  useEffect(() => {
-    if (!isPonderAPIUpToDate) return;
-
-    mutateAmm();
-    setIsOpen(false);
-  }, [isPonderAPIUpToDate]);
+    managedTransaction: {
+      writeContract,
+      writeContractWithSafe,
+      isWalletContract,
+    },
+  } = useTransactionManagerContext();
 
   function onDisableAMM() {
     const txArgs = [
@@ -93,20 +86,12 @@ function DisableTradingDialogContent({
       } as WithdrawCoWAMMArgs);
     }
 
-    try {
-      if (isWalletContract) {
-        writeContractWithSafe(txArgs);
-      } else {
-        // TODO: this will need to be refactored once we have EOAs
-        // @ts-ignore
-        writeContract(txArgs);
-      }
-    } catch {
-      toast({
-        title: `Transaction failed`,
-        description: "An error occurred while processing the transaction.",
-        variant: "destructive",
-      });
+    if (isWalletContract) {
+      writeContractWithSafe(txArgs);
+    } else {
+      // TODO: this will need to be refactored once we have EOAs
+      // @ts-ignore
+      writeContract(txArgs);
     }
   }
 
@@ -128,9 +113,7 @@ function DisableTradingDialogContent({
         className="flex items-center gap-1 py-3 px-6"
         variant="destructive"
         onClick={onDisableAMM}
-        loading={
-          !["final", "idle", "confirmed", "error"].includes(status || "")
-        }
+        loading={isAmmUpdating}
         loadingText="Confirming..."
       >
         <StopIcon />

diff --git a/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/EditAMMForm.tsx b/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/EditAMMForm.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { toast } from "@bleu/ui";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlayIcon } from "@radix-ui/react-icons";
-import { useEffect } from "react";
+import React from "react";
 import { useForm } from "react-hook-form";
 import { Address, formatUnits } from "viem";
 import { z } from "zod";
@@ -19,8 +18,8 @@ import {
   AccordionTrigger,
 } from "#/components/ui/accordion";
 import { Form } from "#/components/ui/form";
-import { useAmmData } from "#/contexts/ammData";
-import { useManagedTransaction } from "#/hooks/tx-manager/useManagedTransaction";
+import { useAmmData } from "#/contexts/ammDataContext";
+import { useTransactionManagerContext } from "#/contexts/transactionManagerContext";
 import { ICowAmm } from "#/lib/fetchAmmData";
 import { ammEditSchema } from "#/lib/schema";
 import { buildTxEditAMMArgs } from "#/lib/transactionFactory";
@@ -29,7 +28,8 @@ import { cn } from "#/lib/utils";
 import { DisableAmmButton } from "./DisableAmmButton";
 
 export function EditAMMForm({ ammData }: { ammData: ICowAmm }) {
-  const { mutateAmm } = useAmmData();
+  const [buttonClicked, setButtonClicked] = React.useState<string>();
+  const { isAmmUpdating } = useAmmData();
   const form = useForm<z.input<typeof ammEditSchema>>({
     // @ts-ignore
     resolver: zodResolver(ammEditSchema),
@@ -50,41 +50,28 @@ export function EditAMMForm({ ammData }: { ammData: ICowAmm }) {
   } = form;
 
   const {
-    writeContract,
-    writeContractWithSafe,
-    status,
-    isWalletContract,
-    isPonderAPIUpToDate,
-  } = useManagedTransaction();
+    managedTransaction: {
+      writeContract,
+      writeContractWithSafe,
+      isWalletContract,
+    },
+  } = useTransactionManagerContext();
 
   const onSubmit = async (data: z.output<typeof ammEditSchema>) => {
     const txArgs = buildTxEditAMMArgs({
       data: data,
       ammAddress: ammData.order.owner as Address,
     });
-
-    try {
-      if (isWalletContract) {
-        writeContractWithSafe(txArgs);
-      } else {
-        // TODO: this will need to be refactored once we have EOAs
-        // @ts-ignore
-        writeContract(txArgs);
-      }
-    } catch {
-      toast({
-        title: `Transaction failed`,
-        description: "An error occurred while processing the transaction.",
-        variant: "destructive",
-      });
+    setButtonClicked("edit");
+    if (isWalletContract) {
+      writeContractWithSafe(txArgs);
+    } else {
+      // TODO: this will need to be refactored once we have EOAs
+      // @ts-ignore
+      writeContract(txArgs);
     }
   };
 
-  useEffect(() => {
-    if (!isPonderAPIUpToDate) return;
-    mutateAmm();
-  }, [isPonderAPIUpToDate]);
-
   const submitButtonText = ammData.disabled ? "Enable AMM" : "Update AMM";
 
   return (
@@ -123,14 +110,12 @@ export function EditAMMForm({ ammData }: { ammData: ICowAmm }) {
       <div className="flex space-x-2 space-between mt-2">
         {!ammData.disabled && <DisableAmmButton ammData={ammData} />}
         <Button
-          loading={
-            isSubmitting ||
-            !["final", "idle", "confirmed", "error"].includes(status || "")
-          }
+          loading={isAmmUpdating && buttonClicked === "edit"}
           variant={ammData.disabled ? "default" : "highlight"}
           type="submit"
-          disabled={isSubmitting || ammData.version !== "Standalone"}
-          loadingText="Confirming..."
+          disabled={
+            isSubmitting || ammData.version !== "Standalone" || isAmmUpdating
+          }
         >
           {ammData.disabled ? <PlayIcon className="mr-1" /> : ""}
           <span>{submitButtonText}</span>

diff --git a/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/Header.tsx b/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/Header.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Card } from "@bleu/ui";
+import { Card, CardDescription, CardHeader, CardTitle } from "@bleu/ui";
 import { ArrowLeftIcon, ArrowTopRightIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { Address } from "viem";
@@ -11,7 +11,7 @@ import { LinkComponent } from "#/components/Link";
 import { OldVersionOfAMMAlert } from "#/components/OldVersionOfAmmAlert";
 import { StatusBadge } from "#/components/StatusBadge";
 import { TokenPairLogo } from "#/components/TokenPairLogo";
-import { useAmmData } from "#/contexts/ammData";
+import { useAmmData } from "#/contexts/ammDataContext";
 import { getExplorerAddressLink } from "#/lib/cowExplorer";
 import { IToken } from "#/lib/fetchAmmData";
 import { truncateMiddle } from "#/lib/truncateMiddle";
@@ -25,15 +25,15 @@ export function Header() {
   const poolName = `${ammData.token0.symbol}/${ammData.token1.symbol}`;
 
   return (
-    <Card.Root className="w-full overflow-visible max-w-full rounded-none bg-background">
-      <Card.Header className="p-0 flex flex-col gap-y-2">
+    <Card className="w-full overflow-visible max-w-full rounded-none bg-background text-foreground">
+      <CardHeader className="p-0 flex flex-col gap-y-2">
         <LinkComponent href={`/${ammData.user.id}/amms`}>
           <Button className="flex items-center gap-1 p-1" variant="ghost">
             <ArrowLeftIcon />
             CoW AMMs
           </Button>
         </LinkComponent>
-        <Card.Title className="text-3xl flex flex-row gap-2 my-2 p-0 items-center">
+        <CardTitle className="text-3xl flex flex-row gap-2 my-2 p-0 items-center">
           <TokenPairLogo
             token0={ammData.token0}
             token1={ammData.token1}
@@ -47,8 +47,8 @@ export function Header() {
             networkId={ammData.chainId as ChainId}
           />
           <StatusBadge disabled={ammData.disabled} />
-        </Card.Title>
-        <Card.Description className="flex mt-5 justify-between items-center text-base p-0">
+        </CardTitle>
+        <CardDescription className="flex mt-5 justify-between items-center text-base p-0 text-foreground">
           <div className="flex flex-row gap-2 items-center">
             Price Oracle: <PriceInformation cowAmm={ammData} />
           </div>
@@ -71,10 +71,10 @@ export function Header() {
           </div>
           <TokenLink chainId={ammData.chainId} token={ammData.token0} />
           <TokenLink chainId={ammData.chainId} token={ammData.token1} />
-        </Card.Description>
+        </CardDescription>
         {oldVersionOfAmm && <OldVersionOfAMMAlert ammData={ammData} />}
-      </Card.Header>
-    </Card.Root>
+      </CardHeader>
+    </Card>
   );
 }