diff --git a/apps/withdraw-uni-v2/src/app/page.tsx b/apps/withdraw-uni-v2/src/app/page.tsx
index f6726b9..b38d19c 100644
--- a/apps/withdraw-uni-v2/src/app/page.tsx
+++ b/apps/withdraw-uni-v2/src/app/page.tsx
@@ -12,10 +12,11 @@ import {
decodeExitPoolHookCalldata,
} from "@bleu/utils";
import { SupportedChainId } from "@cowprotocol/cow-sdk";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
import { useFormContext, useWatch } from "react-hook-form";
import { PoolForm } from "#/components/PoolForm";
import { useFetchNewPoolCallback } from "#/hooks/useFetchNewPoolCallback";
+import { useSelectedPool } from "#/hooks/useSelectedPool";
import { useUserPools } from "#/hooks/useUserPools";
const ALL_SUPPORTED_CHAIN_IDS = [
@@ -45,11 +46,8 @@ export default function Page() {
}
}, [context?.account, context?.hookToEdit, setValue]);
- const selectedPool = useMemo(() => {
- return pools?.find(
- (pool) => pool.id.toLowerCase() === poolId?.toLowerCase(),
- );
- }, [pools, poolId]);
+ const { data: selectedPool, isLoading: isLoadingSelectedPool } =
+ useSelectedPool(poolId);
useEffect(() => {
if (poolId) {
@@ -71,7 +69,11 @@ export default function Page() {
return Unsupported chain;
}
- if (isLoadingPools || (isEditHookLoading && context.hookToEdit)) {
+ if (
+ isLoadingPools ||
+ (isEditHookLoading && context.hookToEdit) ||
+ isLoadingSelectedPool
+ ) {
return (
diff --git a/apps/withdraw-uni-v2/src/context/withdrawHookForm.tsx b/apps/withdraw-uni-v2/src/context/withdrawHookForm.tsx
index eff6429..11c31a7 100644
--- a/apps/withdraw-uni-v2/src/context/withdrawHookForm.tsx
+++ b/apps/withdraw-uni-v2/src/context/withdrawHookForm.tsx
@@ -5,10 +5,10 @@ import { Form } from "@bleu/ui";
import { type WithdrawSchemaType, withdrawSchema } from "@bleu/utils";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect } from "react";
import { useForm, useWatch } from "react-hook-form";
import { useGetHookInfo } from "#/hooks/useGetHookInfo";
-import { useUserPools } from "#/hooks/useUserPools";
+import { useSelectedPool } from "#/hooks/useSelectedPool";
export function WithdrawFormContextProvider({
children,
@@ -28,15 +28,9 @@ export function WithdrawFormContextProvider({
const { control, handleSubmit, setValue } = form;
- const { data: pools } = useUserPools();
-
const poolId = useWatch({ control, name: "poolId" });
- const selectedPool = useMemo(() => {
- return pools?.find(
- (pool) => pool.id.toLowerCase() === poolId?.toLowerCase(),
- );
- }, [pools, poolId]);
+ const { data: selectedPool } = useSelectedPool(poolId);
const router = useRouter();
@@ -54,7 +48,7 @@ export function WithdrawFormContextProvider({
// biome-ignore lint:
useEffect(() => {
setValue("poolId", "");
- }, [context?.account]);
+ }, [context?.account, setValue]);
return (