Merge pull request #60 from bleu/pedro/cow-418-create-balancer-v2-wit…

…hdraw-based-on-cow-amm-withdraw-jean

Create Uni V2 Withdraw Hook

apps/deposit-pool/src/components/PoolItemInfo.tsx

@@ -2,12 +2,13 @@ import { formatNumber } from "@bleu.builders/ui";
 import type { IPool } from "@bleu/cow-hooks-ui";
 
 export function PoolItemInfo({ pool }: { pool: IPool }) {
+  if (!pool.dynamicData) return null;
   const aprSumPct =
     pool.dynamicData.aprItems.reduce((acc, { apr }) => acc + apr, 0) * 100;
 
   return (
     <div className="flex text-right items-end flex-col gap-1 text-xs">
-      <i>TVL: ${formatNumber(pool.dynamicData.totalLiquidity, 2)}</i>
+      <i>TVL: ${formatNumber(pool.dynamicData?.totalLiquidity || 0, 2)}</i>
       <i>APR: {formatNumber(aprSumPct, 2)}%</i>
     </div>
   );

apps/deposit-pool/src/hooks/useCowAmmPools.ts

@@ -1,9 +1,9 @@
-import { useIFrameContext, usePools } from "@bleu/cow-hooks-ui";
+import { useBalancerPools, useIFrameContext } from "@bleu/cow-hooks-ui";
 
 export function useCowAmmPools() {
   const { context } = useIFrameContext();
 
-  return usePools(
+  return useBalancerPools(
     {
       poolTypeIn: ["COW_AMM"],
     },

apps/deposit-pool/src/hooks/useTokenBuyPools.ts

@@ -1,10 +1,10 @@
-import { useIFrameContext, usePools } from "@bleu/cow-hooks-ui";
+import { useBalancerPools, useIFrameContext } from "@bleu/cow-hooks-ui";
 import type { Address } from "viem";
 
 export function useTokenBuyPools() {
   const { context } = useIFrameContext();
 
-  return usePools(
+  return useBalancerPools(
     {
       poolTypeIn: ["COW_AMM"],
       tokensIn: context?.orderParams?.buyTokenAddress

apps/deposit-pool/src/utils/math.ts

@@ -30,7 +30,7 @@ export function calculateProportionalTokenAmounts({
     {
       address: pool.address,
       totalShares: formatUnits(
-        BigInt(pool.dynamicData.totalShares.toString()),
+        BigInt(pool.dynamicData?.totalShares.toString() || "0"),
         pool.decimals,
       ) as `${number}`,
       tokens: poolBalances.map((balance) => ({

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

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

apps/withdraw-pool/src/app/layout.tsx → apps/withdraw-cow-amm/src/app/layout.tsx

@@ -1,12 +1,11 @@
 "use client";
 
 import { RootLayout } from "@bleu/cow-hooks-ui";
-import { UserPoolContextProvider } from "#/context/userPools";
+import { WithdrawFormContextProvider } from "#/context/withdrawHookForm";
 import "@bleu/cow-hooks-ui/global.css";
 import Head from "next/head";
 
 import type * as React from "react";
-import { FormContextProvider } from "#/context/form";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -15,9 +14,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <link rel="manifest" href="/manifest.json" />
       </Head>
       <RootLayout>
-        <UserPoolContextProvider>
-          <FormContextProvider>{children}</FormContextProvider>
-        </UserPoolContextProvider>
+        <WithdrawFormContextProvider poolTypeIn="COW_AMM">
+          {children}
+        </WithdrawFormContextProvider>
       </RootLayout>
     </html>
   );

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

@@ -2,25 +2,26 @@
 
 import {
   type IPool,
+  PoolForm,
+  PoolItemInfo,
   PoolsDropdownMenu,
   Spinner,
+  useBalancerUserPools,
   useIFrameContext,
 } from "@bleu/cow-hooks-ui";
+import {
+  type WithdrawSchemaType,
+  decodeExitPoolHookCalldata,
+} from "@bleu/utils";
 import { ALL_SUPPORTED_CHAIN_IDS } from "@cowprotocol/cow-sdk";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
-import { PoolForm } from "#/components/PoolForm";
-import { PoolItemInfo } from "#/components/PoolItemInfo";
-import { useUserPoolContext } from "#/context/userPools";
-import { decodeExitPoolHookCalldata } from "#/utils/decodeExitPoolHookCalldata";
-import type { WithdrawSchemaType } from "#/utils/schema";
 
 export default function Page() {
   const [isEditHookLoading, setIsEditHookLoading] = useState(true);
   const { context } = useIFrameContext();
-  const {
-    userPoolSwr: { data: pools, isLoading: isLoadingPools },
-  } = useUserPoolContext();
+  const { data: pools, isLoading: isLoadingPools } =
+    useBalancerUserPools("COW_AMM");
 
   const { setValue, control } = useFormContext<WithdrawSchemaType>();
 

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

@@ -11,12 +11,12 @@ import {
   useHandleTokenAllowance,
   useSubmitHook,
 } from "@bleu/cow-hooks-ui";
+import type { WithdrawSchemaType } from "@bleu/utils";
 import { BigNumber, type BigNumberish } from "ethers";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import type { Address } from "viem";
-import type { WithdrawSchemaType } from "#/utils/schema";
 
 export default function Page() {
   const [currentStepIndex, setCurrentStepIndex] = useState(0);

apps/withdraw-pool/src/context/form.tsx → apps/withdraw-cow-amm/src/context/withdrawHookForm.tsx

@@ -1,17 +1,24 @@
 "use client";
 
-import { type PropsWithChildren, useCallback, useEffect, useMemo } from "react";
+import { useBalancerUserPools } from "@bleu/cow-hooks-ui";
+import { type WithdrawSchemaType, withdrawSchema } from "@bleu/utils";
+import { useCallback, useEffect, useMemo } from "react";
 
 import { Form } from "@bleu.builders/ui";
 import { useIFrameContext } from "@bleu/cow-hooks-ui";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm, useWatch } from "react-hook-form";
 import { useGetHookInfo } from "#/hooks/useGetHookInfo";
-import { type WithdrawSchemaType, withdrawSchema } from "#/utils/schema";
-import { useUserPoolContext } from "./userPools";
 
-export function FormContextProvider({ children }: PropsWithChildren) {
+export function WithdrawFormContextProvider({
+  children,
+  poolTypeIn,
+}: {
+  children: React.ReactNode;
+  poolTypeIn: "COW_AMM" | "WEIGHTED";
+}) {
+  const getHookInfo = useGetHookInfo();
   const { context, setHookInfo } = useIFrameContext();
 
   const form = useForm<WithdrawSchemaType>({
@@ -24,9 +31,7 @@ export function FormContextProvider({ children }: PropsWithChildren) {
 
   const { control, handleSubmit, setValue } = form;
 
-  const {
-    userPoolSwr: { data: pools },
-  } = useUserPoolContext();
+  const { data: pools } = useBalancerUserPools(poolTypeIn);
 
   const poolId = useWatch({ control, name: "poolId" });
 
@@ -36,18 +41,17 @@ export function FormContextProvider({ children }: PropsWithChildren) {
     );
   }, [pools, poolId]);
 
-  const getHooksTransactions = useGetHookInfo(selectedPool);
-
   const router = useRouter();
 
   const onSubmitCallback = useCallback(
     async (data: WithdrawSchemaType) => {
-      const hookInfo = await getHooksTransactions(data.withdrawPct);
+      if (!selectedPool) return;
+      const hookInfo = await getHookInfo(selectedPool, data.withdrawPct);
       if (!hookInfo) return;
       setHookInfo(hookInfo);
       router.push("/signing");
     },
-    [getHooksTransactions, setHookInfo, router],
+    [getHookInfo, setHookInfo, router, selectedPool],
   );
 
   // biome-ignore lint:

apps/withdraw-cow-amm/src/hooks/useGetHookInfo.ts

@@ -0,0 +1,49 @@
+import type { IHooksInfo, IPool } from "@bleu/cow-hooks-ui";
+import { multiplyValueByPct } from "@bleu/utils";
+import {
+  TRANSACTION_TYPES,
+  TransactionFactory,
+} from "@bleu/utils/transactionFactory";
+import { useCallback } from "react";
+import { useGetPoolWithdrawArgs } from "./useGetPoolWithdrawArgs";
+
+export function useGetHookInfo() {
+  const getPoolWithdrawArgs = useGetPoolWithdrawArgs();
+
+  return useCallback(
+    async (
+      pool: IPool,
+      withdrawPct: number,
+    ): Promise<IHooksInfo | undefined> => {
+      if (!pool) return;
+
+      const bptAmount = multiplyValueByPct(
+        pool.userBalance.walletBalance,
+        withdrawPct,
+      );
+      const poolWithdrawArgs = await getPoolWithdrawArgs(pool, bptAmount);
+      if (!poolWithdrawArgs) return;
+
+      const txs = await Promise.all(
+        poolWithdrawArgs.map((arg) => {
+          return TransactionFactory.createRawTx(arg.type, arg);
+        }),
+      );
+
+      const permitData = poolWithdrawArgs
+        .filter((arg) => arg.type === TRANSACTION_TYPES.ERC20_TRANSFER_FROM)
+        .map((arg) => {
+          return {
+            tokenAddress: arg.token,
+            amount: arg.amount,
+            tokenSymbol: arg.symbol,
+          };
+        });
+      return {
+        txs,
+        permitData: permitData,
+      };
+    },
+    [getPoolWithdrawArgs],
+  );
+}

apps/withdraw-pool/src/hooks/useGetPoolWithdrawArgs.ts → apps/withdraw-cow-amm/src/hooks/useGetPoolWithdrawArgs.ts

@@ -12,9 +12,8 @@ import {
 import { BigNumber } from "ethers";
 import { useCallback } from "react";
 
-export function useGetPoolWithdrawArgs(
-  pool?: IPool,
-): (
+export function useGetPoolWithdrawArgs(): (
+  pool: IPool,
   bptAMount: BigNumber,
 ) => Promise<
   | (
@@ -27,7 +26,7 @@ export function useGetPoolWithdrawArgs(
   const { context, cowShedProxy } = useIFrameContext();
 
   return useCallback(
-    async (bptAmount: BigNumber) => {
+    async (pool: IPool, bptAmount: BigNumber) => {
       if (!context?.account || !cowShedProxy || !pool) return;
       const poolState = await fetchPoolState(pool.id, context.chainId);
       const bptWalletAmount = bptAmount.gte(pool.userBalance.walletBalance)
@@ -78,6 +77,6 @@ export function useGetPoolWithdrawArgs(
         | ERC20TransferFromAllWeirollArgs
       )[];
     },
-    [context, cowShedProxy, pool],
+    [context, cowShedProxy],
   );
 }