Create deposit-uni-v2 app and rename deposit-pool to deposit-cow-amm (#…

…68)

* refactor: rename deposit-pool app to deposit-cow-amm

* refactor: move deposit common components to packages

* chore: run lint

* refactor: move common hooks and utils from uni withdraw to packages

* feat: add uni v2 deposit

* chore: change slippage to 2%

* fix: update pacakges

* fix: build errors

apps/deposit-pool/package.json → apps/deposit-cow-amm/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@bleu/deposit-pool",
+  "name": "@bleu/deposit-cow-amm",
   "version": "0.0.0",
   "private": true,
   "scripts": {

apps/deposit-pool/src/app/page.tsx → apps/deposit-cow-amm/src/app/page.tsx

@@ -6,25 +6,27 @@ import {
   Spinner,
   getBalancerCoWPoolLink,
   useIFrameContext,
+  useSelectedPool,
+  useTokenBalanceAfterSwap,
 } from "@bleu/cow-hooks-ui";
-import { COW_NATIVE_TOKEN_ADDRESS } from "@bleu/utils";
+import {
+  COW_NATIVE_TOKEN_ADDRESS,
+  type DepositFormType,
+  decodeDepositCalldata,
+} from "@bleu/utils";
 import { ALL_SUPPORTED_CHAIN_IDS, type Address } from "@cowprotocol/cow-sdk";
 import { useCallback, useMemo, useState } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { PoolForm } from "#/components/PoolForm";
 import { PoolItemInfo } from "#/components/PoolItemInfo";
 import { useCowAmmPools } from "#/hooks/useCowAmmPools";
-import { useSelectedPool } from "#/hooks/useSelectedPool";
-import { useTokenBalanceAfterSwap } from "#/hooks/useTokenBalanceAfterSwap";
-import type { FormType } from "#/types";
-import { decodeCalldata } from "#/utils/decodeCalldata";
 
 export default function Page() {
   const { context, publicClient } = useIFrameContext();
   const { data: pools, isLoading: isLoadingPools } = useCowAmmPools();
   const [isEditHookLoading, setIsEditHookLoading] = useState(true);
 
-  const { setValue, reset, control } = useFormContext<FormType>();
+  const { setValue, reset, control } = useFormContext<DepositFormType>();
   const referenceTokenAddress = useWatch({
     control,
     name: "referenceTokenAddress",
@@ -56,7 +58,7 @@ export default function Page() {
       referenceTokenAddress
     )
       return;
-    const data = await decodeCalldata(
+    const data = await decodeDepositCalldata(
       context?.hookToEdit.hook.callData as `0x${string}`,
       publicClient,
     );

apps/deposit-pool/src/app/signing/page.tsx → apps/deposit-cow-amm/src/app/signing/page.tsx

@@ -3,6 +3,7 @@
 import {
   SignatureSteps,
   WaitingSignature,
+  useDepositAmounts,
   useIFrameContext,
 } from "@bleu/cow-hooks-ui";
 import {
@@ -11,14 +12,12 @@ import {
   useHandleTokenAllowance,
   useSubmitHook,
 } from "@bleu/cow-hooks-ui";
+import { type DepositFormType, encodeDepositFormData } from "@bleu/utils";
 import { BigNumber, type BigNumberish } from "ethers";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import type { Address } from "viem";
-import { useDepositAmounts } from "#/hooks/useDepositAmounts";
-import type { FormType } from "#/types";
-import { encodeFormData } from "#/utils/encodeFormData";
 
 export default function Page() {
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
@@ -38,7 +37,7 @@ export default function Page() {
     spender: cowShedProxy,
   });
 
-  const { control } = useFormContext<FormType>();
+  const { control } = useFormContext<DepositFormType>();
   const values = useWatch({ control });
 
   useEffect(() => {
@@ -62,8 +61,8 @@ export default function Page() {
     const cowShedCall = await cowShedSignature(txs);
     if (!cowShedCall) throw new Error("Error signing hooks");
 
-    const encodedFormData = encodeFormData(
-      values as FormType,
+    const encodedFormData = encodeDepositFormData(
+      values as DepositFormType,
       depositAmountsWithDecimals,
     );
 

apps/deposit-pool/src/app/updaters/SelectedPoolUpdater.tsx → apps/deposit-cow-amm/src/app/updaters/SelectedPoolUpdater.tsx

@@ -1,4 +1,4 @@
-import { useIFrameContext } from "@bleu/cow-hooks-ui";
+import { selectedPoolAtom, useIFrameContext } from "@bleu/cow-hooks-ui";
 import { BALANCER_GQL_CLIENT, BalancerChainName } from "@bleu/utils";
 import type { SupportedChainId } from "@cowprotocol/cow-sdk";
 import { gql } from "graphql-request";
@@ -7,7 +7,6 @@ import { useEffect } from "react";
 import { useWatch } from "react-hook-form";
 import { type Address, parseUnits } from "viem";
 import { useCowAmmPools } from "#/hooks/useCowAmmPools";
-import { selectedPoolAtom } from "../states/selectedPool";
 
 interface IQuery {
   pool: {

apps/deposit-pool/src/components/PoolForm.tsx → apps/deposit-cow-amm/src/components/PoolForm.tsx

@@ -1,23 +1,24 @@
 import { Label, formatNumber } from "@bleu.builders/ui";
 import {
+  FormButton,
   type IPool,
   Info,
+  InfoContent,
   Spinner,
+  TokenAmountInputDeposit,
+  calculateProportionalTokenAmounts,
+  getTokenPrice,
   useIFrameContext,
 } from "@bleu/cow-hooks-ui";
+import type { DepositFormType } from "@bleu/utils";
 import { useCallback, useMemo } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { type Address, formatUnits } from "viem";
 import { usePoolBalance } from "#/hooks/usePoolBalance";
-import type { FormType } from "#/types";
-import { calculateProportionalTokenAmounts, getTokenPrice } from "#/utils/math";
-import { FormButton } from "./FormButton";
-import { InfoContent } from "./InfoContent";
-import { TokenAmountInput } from "./TokenAmountInput";
 
 export function PoolForm({ pool }: { pool: IPool | undefined }) {
   const { context } = useIFrameContext();
-  const { control, setValue } = useFormContext<FormType>();
+  const { control, setValue } = useFormContext<DepositFormType>();
 
   const { data: poolBalances, isLoading: isBalanceLoading } = usePoolBalance({
     poolId: pool?.id,
@@ -91,7 +92,7 @@ export function PoolForm({ pool }: { pool: IPool | undefined }) {
       <Label className="block text-md mt-1">Add liquidity</Label>
       <div className="flex flex-col gap-2">
         {poolBalances.map((poolBalance, index) => (
-          <TokenAmountInput
+          <TokenAmountInputDeposit
             key={poolBalance.token.address}
             poolBalance={poolBalance}
             tokenPrice={tokenPrices?.[index]}

apps/deposit-pool/src/contexts/form.tsx → apps/deposit-cow-amm/src/contexts/form.tsx

@@ -3,16 +3,15 @@
 import { type PropsWithChildren, useCallback } from "react";
 
 import { Form } from "@bleu.builders/ui";
-import { useIFrameContext } from "@bleu/cow-hooks-ui";
+import { useIFrameContext, useSelectedPool } from "@bleu/cow-hooks-ui";
+import type { DepositFormType } from "@bleu/utils";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { useGetHookInfo } from "#/hooks/useGetHookInfo";
-import { useSelectedPool } from "#/hooks/useSelectedPool";
-import type { FormType } from "#/types";
 
 export function FormContextProvider({ children }: PropsWithChildren) {
   const { setHookInfo } = useIFrameContext();
-  const form = useForm<FormType>({});
+  const form = useForm<DepositFormType>({});
 
   const { handleSubmit } = form;
 
@@ -23,7 +22,7 @@ export function FormContextProvider({ children }: PropsWithChildren) {
   const getHookInfo = useGetHookInfo(selectedPool);
 
   const onSubmitCallback = useCallback(
-    async (data: FormType) => {
+    async (data: DepositFormType) => {
       const hookInfo = await getHookInfo(data);
       if (!hookInfo) return;
       setHookInfo(hookInfo);

apps/deposit-pool/src/hooks/useGetHookInfo.ts → apps/deposit-cow-amm/src/hooks/useGetHookInfo.ts

@@ -11,6 +11,7 @@ import {
   useIFrameContext,
   useTokensAllowances,
 } from "@bleu/cow-hooks-ui";
+import type { DepositFormType } from "@bleu/utils";
 import {
   type BalancerDepositArgs,
   type ERC20ApproveArgs,
@@ -23,7 +24,6 @@ import {
 import { BigNumber } from "ethers";
 import { useCallback, useMemo } from "react";
 import { type Address, maxUint256, parseUnits } from "viem";
-import type { FormType } from "#/types";
 
 const addLiquidity = new AddLiquidity();
 
@@ -45,7 +45,7 @@ export function useGetHookInfo(pool?: IPool) {
   }, [pool]);
 
   const getPermitData = useCallback(
-    (params: FormType) => {
+    (params: DepositFormType) => {
       if (!pool) throw new Error("Missing pool");
 
       if (!tokenAllowances) return defaultPermitData;
@@ -85,7 +85,7 @@ export function useGetHookInfo(pool?: IPool) {
   );
 
   const getPoolDepositTxs = useCallback(
-    async (params: FormType) => {
+    async (params: DepositFormType) => {
       if (!pool || !context || !context.account || !cowShedProxy)
         throw new Error("Missing context");
       const poolState = await fetchPoolState(pool.id, context.chainId);
@@ -170,7 +170,7 @@ export function useGetHookInfo(pool?: IPool) {
   }, [context?.account, cowShedProxy, pool]);
 
   return useCallback(
-    async (args: FormType): Promise<IHooksInfo> => {
+    async (args: DepositFormType): Promise<IHooksInfo> => {
       const [permitData, poolDepositTxs, transferTx] = await Promise.all([
         getPermitData(args),
         getPoolDepositTxs(args),

apps/deposit-uni-v2/.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-uni-v2/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-uni-v2/next.config.js

@@ -0,0 +1,31 @@
+/** @type {import('next').NextConfig} */
+const moduleExports = {
+  transpilePackages: ["@bleu/cow-hooks-ui"],
+  async headers() {
+    return [
+      {
+        source: "/manifest.json",
+        headers: [
+          {
+            key: "Access-Control-Allow-Origin",
+            value: "*",
+          },
+          {
+            key: "Access-Control-Allow-Methods",
+            value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
+          },
+          {
+            key: "Access-Control-Allow-Headers",
+            value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
+          },
+          {
+            key: "Access-Control-Allow-Credentials",
+            value: "true",
+          }
+        ],
+      },
+    ];
+  },
+};
+
+module.exports = moduleExports;