From 7707a2e71c862fae29a22f452dd03cfe96e4aedc Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Fri, 26 Jul 2024 11:21:47 +0200
Subject: [PATCH] feat: add onSettled callback

---
 .../oeth/src/redeem/components/ClaimForm.tsx  | 33 ++++++++++---------
 libs/shared/providers/src/refresher/hooks.ts  |  6 ++++
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/libs/defi/oeth/src/redeem/components/ClaimForm.tsx b/libs/defi/oeth/src/redeem/components/ClaimForm.tsx
index 8db407fd9..f0c644297 100644
--- a/libs/defi/oeth/src/redeem/components/ClaimForm.tsx
+++ b/libs/defi/oeth/src/redeem/components/ClaimForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import {
   Button,
@@ -53,6 +53,10 @@ export const ClaimForm = (props: StackProps) => {
     isResultProcessed: (prev, next) =>
       prev.filter((r) => r.claimed).length <
       next.filter((r) => r.claimed).length,
+    onSettled: () => {
+      setSelectedClaimIds([]);
+      queryClient.invalidateQueries();
+    },
   });
   const args =
     selectedClaimIds.length === 1
@@ -91,13 +95,6 @@ export const ClaimForm = (props: StackProps) => {
     enableGas: true,
   });
 
-  useEffect(() => {
-    if (['timeout', 'processed', 'error'].includes(status)) {
-      setSelectedClaimIds([]);
-      queryClient.invalidateQueries();
-    }
-  }, [address, queryClient, status]);
-
   const handleClaimClick = (requestId: bigint) => () => {
     const idx = selectedClaimIds.findIndex((id) => id === requestId);
     if (idx === -1) {
@@ -170,14 +167,18 @@ export const ClaimForm = (props: StackProps) => {
         callbacks={callbacks}
         variant="action"
         disabled={isNilOrEmpty(selectedClaimIds) || status === 'polling'}
-        label={intl.formatMessage(
-          { defaultMessage: 'Claim{amount}' },
-          {
-            amount: eq(selectedAmount, 0)
-              ? ''
-              : ` ${format(selectedAmount, getFormatPrecision(selectedAmount))} ${tokens.mainnet.WETH.symbol}`,
-          },
-        )}
+        label={
+          status === 'polling'
+            ? intl.formatMessage({ defaultMessage: 'Processing' })
+            : intl.formatMessage(
+                { defaultMessage: 'Claim{amount}' },
+                {
+                  amount: eq(selectedAmount, 0)
+                    ? ''
+                    : ` ${format(selectedAmount, getFormatPrecision(selectedAmount))} ${tokens.mainnet.WETH.symbol}`,
+                },
+              )
+        }
       />
     </Stack>
   );
diff --git a/libs/shared/providers/src/refresher/hooks.ts b/libs/shared/providers/src/refresher/hooks.ts
index e4ecafb3e..3031939a7 100644
--- a/libs/shared/providers/src/refresher/hooks.ts
+++ b/libs/shared/providers/src/refresher/hooks.ts
@@ -17,6 +17,7 @@ export type UseRefresherProps<QueryResult = any> = {
   queryKey: QueryKey;
   queryFn: QueryFunction<QueryResult>;
   isResultProcessed: (prev: QueryResult, next: QueryResult) => boolean;
+  onSettled?: (status: RefreshStatus, next: QueryResult) => void;
   maxRetries?: number;
   interval?: number;
 };
@@ -25,6 +26,7 @@ export const useRefresher = <QueryResult = any>({
   queryKey,
   queryFn,
   isResultProcessed,
+  onSettled,
   maxRetries = 10,
   interval = 2000,
 }: UseRefresherProps<QueryResult>) => {
@@ -58,16 +60,20 @@ export const useRefresher = <QueryResult = any>({
         if (!prev || !next) {
           setPollInterval(undefined);
           setStatus('error');
+          onSettled?.('error', next);
         } else if (retries > maxRetries) {
           setPollInterval(undefined);
           setStatus('timeout');
+          onSettled?.('timeout', next);
         } else if (isResultProcessed(prev, next)) {
           setPollInterval(undefined);
           setStatus('processed');
+          onSettled?.('processed', next);
         }
       } catch {
         setPollInterval(undefined);
         setStatus('error');
+        onSettled?.('error', next);
       }
       setRetries((prev) => prev + 1);
     })();