Merge branch 'jose/cow-252-create-withdraw-flow' into pedro/cow-269-f…

…ix-price-information-and-cow-explorer-link
bleu · May 29, 2024 · f9882fc · f9882fc
2 parents 9968e36 + cf48abd
commit f9882fc
Show file tree

Hide file tree

Showing 7 changed files with 1,091 additions and 670 deletions.
diff --git a/apps/cow-amm-deployer/next.config.js b/apps/cow-amm-deployer/next.config.js
@@ -18,6 +18,9 @@ const moduleExports = {
       },
     ];
   },
+  experimental: {
+    reactCompiler: true,
+  },
   transpilePackages: ["@bleu/gql"],
   reactStrictMode: true,
   /**

diff --git a/apps/cow-amm-deployer/package.json b/apps/cow-amm-deployer/package.json
@@ -57,9 +57,9 @@
     "graphql-tag": "^2.12.6",
     "lodash": "^4.17.21",
     "lodash.merge": "^4.6.2",
-    "next": "^14.2.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next": "15.0.0-rc.0",
+    "react": "19.0.0-rc-6f23540c7d-20240528",
+    "react-dom": "19.0.0-rc-6f23540c7d-20240528",
     "react-hook-form": "7.51.5",
     "server-only": "^0.0.1",
     "swr": "^2.2.5",

diff --git a/apps/cow-amm-deployer/src/app/amms/[id]/withdraw/(components)/WithdrawForm.tsx b/apps/cow-amm-deployer/src/app/amms/[id]/withdraw/(components)/WithdrawForm.tsx
@@ -71,11 +71,7 @@ export function WithdrawForm({ cowAmm }: { cowAmm: ICowAmm }) {
   const { withdrawPct } = form.watch();
 
   return (
-    <Form
-      {...form}
-      onSubmit={onSubmit}
-      className="flex flex-col gap-y-3 px-9 pb-9"
-    >
+    <Form {...form} onSubmit={onSubmit} className="flex flex-col gap-y-3">
       <div className="flex flex-col w-full">
         <span className="mb-2 h-5 block">
           Withdraw percentage: {withdrawPct}%

diff --git a/apps/cow-amm-deployer/src/app/amms/[id]/withdraw/page.tsx b/apps/cow-amm-deployer/src/app/amms/[id]/withdraw/page.tsx
@@ -1,63 +1,34 @@
-"use client";
-
-import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk";
 import { ArrowLeftIcon } from "@radix-ui/react-icons";
-import { useEffect, useState } from "react";
 
 import { LinkComponent } from "#/components/Link";
-import { Spinner } from "#/components/Spinner";
-import { UnsuportedChain } from "#/components/UnsuportedChain";
-import WalletNotConnected from "#/components/WalletNotConnected";
-import { fetchAmmData, ICowAmm } from "#/lib/fetchAmmData";
-import { supportedChainIds } from "#/utils/chainsPublicClients";
+import { fetchAmmData } from "#/lib/fetchAmmData";
 
 import { WithdrawForm } from "./(components)/WithdrawForm";
 
-export default function Page({ params }: { params: { id: `0x${string}` } }) {
-  const [ammData, setAmmData] = useState<ICowAmm>();
-
-  async function loadAmmData() {
-    const data = await fetchAmmData(params.id);
-    setAmmData(data);
-  }
-  const { safe, connected } = useSafeAppsSDK();
-  useEffect(() => {
-    loadAmmData();
-  }, [params.id]);
-
-  if (!connected) {
-    return <WalletNotConnected />;
-  }
-
-  if (!supportedChainIds.includes(safe.chainId)) {
-    return <UnsuportedChain />;
-  }
-
-  if (!ammData) {
-    return <Spinner />;
-  }
+export default async function Page({
+  params,
+}: {
+  params: { id: `0x${string}` };
+}) {
+  const ammData = await fetchAmmData(params.id);
 
   return (
     <div className="flex size-full items-center justify-center">
-      <div className="my-4 flex flex-col border-2 border-foreground bg-card border-card-foreground text-card-foreground">
-        <div className="relative flex size-full justify-center">
+      <div className="my-4 flex flex-col border-2 bg-card text-card-foreground w-[530px] p-10">
+        <div className="relative">
           <LinkComponent
             href={`/amms/${params.id}`}
             content={
-              <div className="absolute left-8 flex h-full items-center">
-                <ArrowLeftIcon
-                  height={16}
-                  width={16}
-                  className="text-background duration-200 hover:text-highlight"
-                />{" "}
-              </div>
+              <ArrowLeftIcon
+                height={16}
+                width={16}
+                className="text-background duration-200 hover:text-highlight absolute left-0 flex items-center"
+              />
             }
           />
-          <div className="flex w-[530px] flex-col items-center py-3">
-            <div className="text-xl">Proportional withdraw</div>
-          </div>
+          <p className="text-xl text-center">Proportional withdraw</p>
         </div>
-        <div className="flex flex-col w-[530px] overflow-auto size-full max-h-[550px]">
+        <div className="pt-8">
           <WithdrawForm cowAmm={ammData} />
         </div>
       </div>

diff --git a/apps/cow-amm-deployer/src/app/new/(components)/AmmForm.tsx b/apps/cow-amm-deployer/src/app/new/(components)/AmmForm.tsx
@@ -110,11 +110,7 @@ export function AmmForm({
   }, [safeAddress, setValue]);
 
   return (
-    <Form
-      {...form}
-      onSubmit={onSubmit}
-      className="flex flex-col gap-y-3 px-9 pb-9"
-    >
+    <Form {...form} onSubmit={onSubmit} className="flex flex-col gap-y-3">
       <div className="flex h-fit justify-between gap-x-7">
         <div className="w-full flex flex-col">
           <div className="flex flex-col w-full">

diff --git a/apps/cow-amm-deployer/src/lib/fetchAmmData.ts b/apps/cow-amm-deployer/src/lib/fetchAmmData.ts
@@ -4,6 +4,8 @@ import {
 } from "@bleu/utils";
 import { graphql, ResultOf } from "gql.tada";
 import request from "graphql-request";
+// @ts-expect-error
+import { cache } from "react";
 import { Address } from "viem";
 import { gnosis, sepolia } from "viem/chains";
 
@@ -110,7 +112,7 @@ async function fetchPriceFeedLinks(
   }
 }
 
-export async function fetchAmmData(ammId: string): Promise<ICowAmm> {
+export const fetchAmmData = cache(async (ammId: string): Promise<ICowAmm> => {
   const [ammAddress, _, chainId] = validateAmmId(ammId);
 
   const subgraphData = await request(NEXT_PUBLIC_API_URL, AMM_QUERY, { ammId });
@@ -173,7 +175,7 @@ export async function fetchAmmData(ammId: string): Promise<ICowAmm> {
     chainId,
     priceFeedLinks,
   } as ICowAmm;
-}
+});
 
 export function getUniV2PairUrl(chainId: ChainId, referencePair?: string) {
   if (chainId === gnosis.id) {