wip: fix loading states

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

@@ -93,7 +93,6 @@ export function useUserPools(chainId?: SupportedChainId, user?: string) {
   return useSWR(
     [chainId, user],
     async ([chainId, user]): Promise<IMinimalPool[]> => {
-      console.log({ chainId, user });
       if (!user || !chainId) return [];
       const chainName = BalancerChainName[chainId];
       return await GQL_CLIENT[chainId]

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

@@ -3,10 +3,8 @@
 import { Form } from "@bleu/ui";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm, useWatch } from "react-hook-form";
-import { PoolBalancesPreview } from "#/components/PoolBalancePreview";
-import { WithdrawPctSlider } from "#/components/WithdrawPctSlider";
 import { withdrawSchema } from "#/utils/schema";
 import { useGetHookInfo } from "#/hooks/useGetHookInfo";
 import {
@@ -19,8 +17,7 @@ import { useUserPoolContext } from "#/context/userPools";
 import { useRouter } from "next/navigation";
 import { ALL_SUPPORTED_CHAIN_IDS } from "@cowprotocol/cow-sdk";
 import { decodeHookCallData } from "#/utils/decodeHookCalldata";
-import { SubmitButton } from "#/components/SubmitButton";
-import { useUserPoolBalance } from "#/hooks/useUserPoolBalance";
+import { PoolForm } from "#/components/PoolForm";
 
 export default function Page() {
   const { context, setHookInfo, publicClient } = useIFrameContext();
@@ -40,7 +37,7 @@ export default function Page() {
 
   const { setValue, control, handleSubmit } = form;
 
-  const { withdrawPct, poolId } = useWatch({ control });
+  const poolId = useWatch({ control, name: "poolId" });
 
   useEffect(() => {
     if (!context?.hookToEdit || !context.account || !publicClient) return;
@@ -79,12 +76,6 @@ export default function Page() {
     [onSubmitCallback, handleSubmit]
   );
 
-  const { data: poolBalances } = useUserPoolBalance({
-    user: context?.account,
-    chainId: context?.chainId,
-    poolId,
-  });
-
   if (!context) return null;
 
   if (!context.account) {
@@ -111,7 +102,6 @@ export default function Page() {
     );
   }
 
-  console.log({ selectedPool });
   return (
     <Form
       {...form}
@@ -123,14 +113,7 @@ export default function Page() {
         pools={pools || []}
         selectedPool={selectedPool}
       />
-      {poolId && poolBalances && (
-        <div className="size-full flex flex-col gap-2">
-          <WithdrawPctSlider withdrawPct={withdrawPct || 100} />
-          <PoolBalancesPreview poolBalances={poolBalances} />
-          <SubmitButton withdrawPct={withdrawPct} poolId={poolId} />
-        </div>
-      )}
-      {poolId && !poolBalances && <Spinner size="xl" />}
+      <PoolForm poolId={poolId} />
     </Form>
   );
 }

apps/withdraw-pool/src/app/signing/page.tsx

@@ -88,7 +88,7 @@ export default function Page() {
       hookInfo?.permitData.map((permit) => {
         return {
           label: `Approve ${permit.tokenSymbol}`,
-          description: `Approve proxy to manage the ${permit.tokenSymbol} token`,
+          description: `Approve proxy to spent the ${permit.tokenSymbol} token`,
           id: `approve-${permit.tokenAddress}`,
           callback: async () => {
             await permitCallback(permit);

apps/withdraw-pool/src/components/PoolForm.tsx

@@ -0,0 +1,30 @@
+import { useUserPoolBalance } from "#/hooks/useUserPoolBalance";
+import { Spinner, useIFrameContext } from "@bleu/cow-hooks-ui";
+import { WithdrawPctSlider } from "./WithdrawPctSlider";
+import { PoolBalancesPreview } from "./PoolBalancePreview";
+import { SubmitButton } from "./SubmitButton";
+
+export function PoolForm({ poolId }: { poolId?: string }) {
+  const { context } = useIFrameContext();
+  const {
+    data: poolBalances,
+    isValidating,
+    isLoading,
+  } = useUserPoolBalance({
+    user: context?.account,
+    chainId: context?.chainId,
+    poolId,
+  });
+
+  if (!context || !poolId || !poolBalances || !poolBalances.length) return null;
+
+  if (isValidating || isLoading) return <Spinner size="xl" />;
+
+  return (
+    <div className="size-full flex flex-col gap-2">
+      <WithdrawPctSlider />
+      <PoolBalancesPreview poolBalances={poolBalances} />
+      <SubmitButton poolId={poolId} />
+    </div>
+  );
+}

apps/withdraw-pool/src/components/SubmitButton.tsx

@@ -1,19 +1,15 @@
 import { useIFrameContext } from "@bleu/cow-hooks-ui";
 import { Button } from "@bleu/ui";
 import { useMemo } from "react";
-import { useFormContext, useFormState } from "react-hook-form";
+import { useFormContext, useFormState, useWatch } from "react-hook-form";
 
-export function SubmitButton({
-  withdrawPct,
-  poolId,
-}: {
-  withdrawPct?: number;
-  poolId?: string;
-}) {
+export function SubmitButton({ poolId }: { poolId?: string }) {
   const { control } = useFormContext();
   const { context } = useIFrameContext();
 
   const { isSubmitSuccessful, isSubmitting } = useFormState({ control });
+
+  const withdrawPct = useWatch({ control, name: "withdrawPct" });
   const buttonProps = useMemo(() => {
     if (!withdrawPct || Number(withdrawPct) === 0)
       return { disabled: true, message: "Define percentage" };

apps/withdraw-pool/src/components/WithdrawPctSlider.tsx

@@ -2,13 +2,15 @@
 
 import { Input } from "@bleu/cow-hooks-ui";
 import { Button, Label } from "@bleu/ui";
-import { useFormContext } from "react-hook-form";
+import { useFormContext, useWatch } from "react-hook-form";
 import type { withdrawSchema } from "#/utils/schema";
 
-export function WithdrawPctSlider({ withdrawPct }: { withdrawPct: number }) {
+export function WithdrawPctSlider() {
   const form = useFormContext<typeof withdrawSchema._type>();
 
-  const { setValue } = form;
+  const { setValue, control } = form;
+
+  const withdrawPct = useWatch({ control, name: "withdrawPct" });
 
   return (
     <div className="flex flex-col p-1">

apps/withdraw-pool/src/hooks/useUserPoolBalance.tsx

@@ -117,7 +117,14 @@ export function useUserPoolBalance({
   poolId?: string;
   user?: string;
 }) {
-  return useSWR([chainId, poolId, user], () =>
-    fetchUserPoolBalance(chainId, poolId, user)
+  return useSWR(
+    [chainId, poolId, user],
+    () => fetchUserPoolBalance(chainId, poolId, user),
+    {
+      shouldRetryOnError: false,
+      refreshWhenHidden: false,
+      refreshWhenOffline: false,
+      revalidateOnFocus: false,
+    }
   );
 }

apps/withdraw-pool/src/hooks/useUserPools.ts

@@ -128,6 +128,13 @@ export function useUserPools(chainId?: SupportedChainId, user?: string) {
             },
           }));
         });
+    },
+    {
+      shouldRetryOnError: false,
+      refreshWhenHidden: false,
+      refreshWhenOffline: false,
+      revalidateOnFocus: false,
+      revalidateOnMount: false,
     }
   );
 }