Merge pull request #25 from bleu/pedro/cow-369-create-add-liquidity-p…

…ool-hook-ui

Create add liquidity pool hook UI

apps/deposit-pool/.gitignore

@@ -0,0 +1,58 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+
+/coverage
+
+# next.js
+
+/.next/
+/out/
+
+# production
+
+/build
+
+# misc
+
+.DS_Store
+\*.pem
+
+# debug
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+
+.env*
+
+# vercel
+
+.vercel
+
+# typescript
+
+\*.tsbuildinfo
+next-env.d.ts
+
+.vscode
+
+# Sentry
+.sentryclirc
+
+.cache/
+
+# Sentry Auth Token
+.sentryclirc
+
+# Sentry Config File
+.sentryclirc

apps/deposit-pool/lint-staged.config.js

@@ -0,0 +1,24 @@
+// @ts-check
+
+/**
+ * This files overrides the base lint-staged.config.js present in the root directory.
+ * It allows to run eslint based the package specific requirements.
+ * {@link https://github.com/okonet/lint-staged#how-to-use-lint-staged-in-a-multi-package-monorepo}
+ * {@link https://github.com/belgattitude/nextjs-monorepo-example/blob/main/docs/about-lint-staged.md}
+ */
+
+const {
+  concatFilesForPrettier,
+  getEslintFixCmd,
+} = require("../../lint-staged.common.js");
+
+/**
+ * @type {Record<string, (filenames: string[]) => string | string[] | Promise<string | string[]>>}
+ */
+const rules = {
+  "**/*.{json,md,mdx,css,html,yml,yaml,scss}": (filenames) => {
+    return [`pnpm biome check --write ${concatFilesForPrettier(filenames)}`];
+  },
+};
+
+module.exports = rules;

apps/deposit-pool/next.config.js

@@ -0,0 +1,22 @@
+/* eslint-env node */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+
+/** @type {import('next').NextConfig} */
+const moduleExports = {
+  transpilePackages: ["@bleu/cow-hooks-ui"],
+  async headers() {
+    return [
+      {
+        source: "/manifest.json",
+        headers: [
+          {
+            key: "Access-Control-Allow-Origin",
+            value: "*",
+          },
+        ],
+      },
+    ];
+  },
+};
+
+module.exports = moduleExports;

apps/deposit-pool/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@bleu/deposit-pool",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "start": "next start",
+    "lint": "eslint '**/*.{ts,tsx}'",
+    "lint:fix": "eslint '**/*.{ts,tsx}' --fix"
+  },
+  "dependencies": {
+    "@balancer-labs/sdk": "1.1.6",
+    "@balancer/sdk": "0.26.1",
+    "@bleu/cow-hooks-ui": "workspace:*",
+    "@bleu/tsconfig": "workspace:*",
+    "@bleu/ui": "0.1.131",
+    "@bleu/utils": "workspace:*",
+    "@cowprotocol/cow-sdk": "^5.5.1",
+    "@cowprotocol/hook-dapp-lib": "1.0.0-RC1",
+    "@cowprotocol/permit-utils": "0.3.1",
+    "@ethersproject/providers": "5.7.2",
+    "@hookform/resolvers": "3.9.0",
+    "@radix-ui/react-icons": "1.3.0",
+    "@uniswap/sdk-core": "5.4.0",
+    "class-variance-authority": "^0.7.0",
+    "date-fns": "^3.3.1",
+    "downshift": "^8.4.0",
+    "ethers": "^5.7.2",
+    "graphql": "^16.9.0",
+    "graphql-request": "^6.1.0",
+    "next": "15.0.0-rc.0",
+    "react": "19.0.0-rc-e4953922-20240919",
+    "react-dom": "19.0.0-rc-e4953922-20240919",
+    "react-hook-form": "7.53.0",
+    "server-only": "^0.0.1",
+    "swr": "2.2.5",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "1.0.7",
+    "tiny-invariant": "^1.3.3",
+    "url": "^0.11.4",
+    "viem": "2.21.14",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.2",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "14.5.2",
+    "@types/jest": "^29.5.13",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.20",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.12",
+    "typescript": "5.6.2"
+  }
+}

apps/deposit-pool/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/deposit-pool/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "homepage_url": "https://swap.cow.fi",
+  "description": "CoW hook dapp: Withdraw Liquidity",
+  "icons": [],
+  "orientation": "portrait",
+  "name": "Withdraw Liquidity",
+  "short_name": "Withdraw Liquidity",
+  "start_url": ".",
+  "theme_color": "#ffffff",
+  "cow_hook_dapp": {
+    "id": "5dc71fa5829d976c462bdf37b38b6fd9bbc289252a5a18e61525f8c8a3c775df",
+    "name": "CoW AMM Deposit",
+    "descriptionShort": "Add liquidity to any of the CoW AMM pools",
+    "description": "Easily increase your position in a liquidity pool, adding both tokens in the right ratio.\n\n Whether you're seeking to increase your exposure to specific tokens or maximize the returns from your assets, this tool offers a quick and efficient way to enhance your liquidity position after a token swap, all in a smooth, efficient process.",
+    "version": "0.0.1",
+    "website": "https://balancer.fi/pools/cow",
+    "image": "http://localhost:3000/icon.png",
+    "conditions": {
+      "position": "post",
+      "walletCompatibility": ["EOA"]
+    }
+  }
+}

apps/deposit-pool/src/app/global-error.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+export default function GlobalError({ error }: { error: Error }) {
+  /* eslint-disable-next-line no-console */
+  console.error(error);
+
+  return (
+    <html lang="en">
+      <body>
+        <h2>Something went wrong!</h2>
+      </body>
+    </html>
+  );
+}

apps/deposit-pool/src/app/layout.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { IFrameContextProvider } from "@bleu/cow-hooks-ui";
+import "#/global.css";
+import Head from "next/head";
+
+import type * as React from "react";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className="h-full">
+      <Head>
+        <link rel="manifest" href="/manifest.json" />
+      </Head>
+      <body className="flex h-full flex-col font-sans font-normal bg-background text-foreground">
+        <IFrameContextProvider>{children}</IFrameContextProvider>
+      </body>
+    </html>
+  );
+}

apps/deposit-pool/src/app/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { Button, Form } from "@bleu/ui";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCallback, useMemo } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { depositSchema } from "#/utils/schema";
+import {
+  BalancesPreview,
+  IMinimalPool,
+  PoolsDropdownMenu,
+  Spinner,
+  useIFrameContext,
+} from "@bleu/cow-hooks-ui";
+import { ALL_SUPPORTED_CHAIN_IDS } from "@cowprotocol/cow-sdk";
+import { useUserPools } from "#/hooks/useUserPools";
+import { useUserPoolBalance } from "#/hooks/useUserPoolBalance";
+
+const PREVIEW_LABELS = ["Pool Balance", "Deposit"];
+
+export default function Page() {
+  const { context } = useIFrameContext();
+  const { data: pools } = useUserPools(context?.chainId, context?.account);
+
+  const form = useForm<typeof depositSchema._type>({
+    resolver: zodResolver(depositSchema),
+    defaultValues: {
+      poolId: "",
+    },
+  });
+
+  const {
+    setValue,
+    control,
+    formState: { isSubmitting, isSubmitSuccessful },
+  } = form;
+
+  const { poolId } = useWatch({ control });
+
+  const selectedPool = useMemo(
+    () => pools?.find((pool) => pool.id === poolId),
+    [pools, poolId]
+  );
+
+  const onSubmitCallback = useCallback(
+    async (data: typeof depositSchema._type) => {
+      console.log(data);
+    },
+    []
+  );
+
+  const onSubmit = useMemo(
+    () => form.handleSubmit(onSubmitCallback),
+    [form, onSubmitCallback]
+  );
+
+  const { data: poolBalances, isLoading } = useUserPoolBalance({
+    poolId,
+    user: context?.account,
+    chainId: context?.chainId,
+  });
+
+  if (!context)
+    return (
+      <div className="w-full text-center mt-10 p-2">
+        <Spinner />
+      </div>
+    );
+
+  if (!context.account) {
+    return <span className="mt-10 text-center">Connect your wallet</span>;
+  }
+
+  if (!ALL_SUPPORTED_CHAIN_IDS.includes(context.chainId)) {
+    return <span className="mt-10 text-center">Unsupported chain</span>;
+  }
+
+  return (
+    <Form
+      {...form}
+      onSubmit={onSubmit}
+      className="w-full flex flex-col gap-1 py-1 px-4"
+    >
+      <PoolsDropdownMenu
+        onSelect={(pool: IMinimalPool) => setValue("poolId", pool.id)}
+        selectedPool={selectedPool}
+        pools={pools || []}
+      />
+      {poolId && (
+        <div className="size-full flex flex-col gap-2">
+          <BalancesPreview
+            labels={PREVIEW_LABELS}
+            balancesList={
+              poolBalances ? [poolBalances, poolBalances] : undefined
+            }
+            isLoading={isLoading}
+          />
+          <Button
+            type="submit"
+            className="my-2"
+            loading={isSubmitting || isSubmitSuccessful}
+            loadingText="Creating hook..."
+          >
+            Add post-hook
+          </Button>
+        </div>
+      )}
+    </Form>
+  );
+}