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 (
{ + const poolsSearch = pools?.find( + (pool) => pool.id.toLowerCase() === _poolId.toLowerCase(), + ); + if (poolsSearch) return poolsSearch; + + if (!fetchNewPoolCallback) return; + if (!isAddress(_poolId)) return; + + const fetchedNewPool = await fetchNewPoolCallback(_poolId); + return fetchedNewPool; + }, + [pools, fetchNewPoolCallback], + ); + + return useSWR(poolId, getSelectedPoolCallback); +} diff --git a/apps/withdraw-uni-v2/src/hooks/useUserPools.ts b/apps/withdraw-uni-v2/src/hooks/useUserPools.ts index 73023ca..4c1b96a 100644 --- a/apps/withdraw-uni-v2/src/hooks/useUserPools.ts +++ b/apps/withdraw-uni-v2/src/hooks/useUserPools.ts @@ -3,7 +3,7 @@ import { usePools } from "./usePools"; export function useUserPools() { const { context, publicClient } = useIFrameContext(); - const useSwrData = usePools( + return usePools( context?.account, context?.chainId, context?.orderParams?.sellTokenAddress, @@ -11,8 +11,4 @@ export function useUserPools() { //@ts-ignore context?.balancesDiff as Record>, ); - - const data = useSwrData.data; - - return { ...useSwrData, data }; } diff --git a/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx b/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx index 9e11339..327a4bc 100644 --- a/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx +++ b/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx @@ -32,7 +32,6 @@ export function PoolsDropdownMenu({ isCheckDetailsCentered = true, tooltipText, fetchNewPoolCallback, - // fetchNewPoolCallback = (_address: string) => undefined; }: { onSelect: (pool: IPool) => void; pools: IPool[];