fix: withdrawal confirmation modal

OriginProtocol · Sep 5, 2024 · fff0cdc · fff0cdc
1 parent f7d3f3c
commit fff0cdc
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 50 deletions.
diff --git a/libs/defi/oeth/src/redeem/components/ClaimForm.tsx b/libs/defi/oeth/src/redeem/components/ClaimForm.tsx
@@ -81,7 +81,7 @@ export const ClaimForm = (props: StackProps) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     params: args as any,
     callbacks: {
-      onWriteSuccess: () => {
+      onTxSigned: () => {
         startRefresh(data);
       },
     },

diff --git a/libs/defi/oeth/src/redeem/components/Swapper.tsx b/libs/defi/oeth/src/redeem/components/Swapper.tsx
@@ -39,11 +39,12 @@ import {
   useSwapState,
   useWatchBalance,
 } from '@origin/shared/providers';
-import { formatError, isNilOrEmpty } from '@origin/shared/utils';
+import { formatError, isNilOrEmpty, ZERO_ADDRESS } from '@origin/shared/utils';
 import { format, from, mul } from 'dnum';
 import { useIntl } from 'react-intl';
 import { useAccount } from 'wagmi';
 
+import { useWithdrawalRequestsQuery } from '../queries.generated';
 import { RedeemActionCard } from './RedeemActionCard';
 import { WithdrawalRequestModal } from './WithdrawalRequestModal';
 
@@ -72,13 +73,20 @@ export const Swapper = ({
   ...rest
 }: SwapperProps) => {
   const intl = useIntl();
+  const { address } = useAccount();
   const pushNotification = usePushNotification();
   const deleteNotification = useDeleteNotification();
   const pushActivity = usePushActivity();
   const updateActivity = useUpdateActivity();
   const deleteActivity = useDeleteActivity();
   const [open, setOpen] = useState(false);
   const [info, setInfo] = useState<Partial<WithdrawalRequestModalProps>>();
+  const { data, refetch } = useWithdrawalRequestsQuery(
+    {
+      address: address ?? ZERO_ADDRESS,
+    },
+    { enabled: false },
+  );
 
   return (
     <SwapProvider
@@ -166,10 +174,11 @@ export const Swapper = ({
           tokenIdOut: tokenOut.id,
           amountIn,
         });
+        refetch();
 
         return activity.id;
       }}
-      onSwapSigned={({ amountIn, tokenIn, tokenOut }) => {
+      onSwapSigned={({ amountIn, amountOut, tokenIn, tokenOut }) => {
         const activity: Activity = {
           type: 'redeem',
           status: 'pending',
@@ -184,24 +193,20 @@ export const Swapper = ({
           severity: 'pending',
           hideDuration: undefined,
         });
+        setInfo({
+          tokenIn,
+          tokenOut,
+          amountOut,
+          initialRequests: data,
+        });
+        setOpen(true);
 
         return notifId;
       }}
-      onSwapSuccess={({
-        amountOut,
-        tokenIn,
-        tokenOut,
-        trackId,
-        txReceipt,
-        notifId,
-      }) => {
+      onSwapSuccess={({ trackId, txReceipt, notifId }) => {
         setInfo({
-          amountOut,
-          tokenIn,
-          tokenOut,
           txReceipt,
         });
-        setOpen(true);
         deleteNotification(notifId);
         const updated = updateActivity({
           id: trackId,
@@ -248,15 +253,15 @@ export const Swapper = ({
       }}
     >
       <SwapperWrapped {...rest} />
-      <WithdrawalRequestModal
-        key={open ? 'open' : 'reset'}
-        open={open}
-        onClose={() => {
-          setOpen(false);
-        }}
-        keepMounted={false}
-        {...info}
-      />
+      {open && (
+        <WithdrawalRequestModal
+          open
+          onClose={() => {
+            setOpen(false);
+          }}
+          {...info}
+        />
+      )}
     </SwapProvider>
   );
 };

diff --git a/libs/defi/oeth/src/redeem/components/WithdrawalRequestModal.tsx b/libs/defi/oeth/src/redeem/components/WithdrawalRequestModal.tsx
@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import {
   alpha,
   Box,
@@ -21,6 +19,7 @@ import {
 } from '@origin/shared/icons';
 import { BlockExplorerLink, useRefresher } from '@origin/shared/providers';
 import { getFormatPrecision, ZERO_ADDRESS } from '@origin/shared/utils';
+import { useMountEffect } from '@react-hookz/web';
 import { useQueryClient } from '@tanstack/react-query';
 import { format } from 'dnum';
 import { useIntl } from 'react-intl';
@@ -41,13 +40,15 @@ export type WithdrawalRequestModalProps = {
   tokenIn?: Token;
   tokenOut?: Token;
   txReceipt?: TransactionReceipt;
+  initialRequests?: WithdrawalRequestsQuery;
 } & DialogProps;
 
 export const WithdrawalRequestModal = ({
   amountOut,
   tokenIn,
   tokenOut,
   txReceipt,
+  initialRequests,
   open,
   onClose,
   ...rest
@@ -58,9 +59,6 @@ export const WithdrawalRequestModal = ({
   const { update } = useViewSelect();
   const queryClient = useQueryClient();
   const { address } = useAccount();
-  const { data } = useWithdrawalRequestsQuery({
-    address: address ?? ZERO_ADDRESS,
-  });
   const { status, startRefresh } = useRefresher<WithdrawalRequestsQuery>({
     queryKey: useWithdrawalRequestsQuery.getKey({
       address: address ?? ZERO_ADDRESS,
@@ -72,12 +70,9 @@ export const WithdrawalRequestModal = ({
       prev.oethWithdrawalRequests.length < next.oethWithdrawalRequests.length,
   });
 
-  useEffect(() => {
-    if (open) {
-      startRefresh(data);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, startRefresh]);
+  useMountEffect(() => {
+    startRefresh(initialRequests);
+  });
 
   const handleClaimClick = () => {
     update('claim');
@@ -254,13 +249,7 @@ export const WithdrawalRequestModal = ({
             pt: 2,
           }}
         >
-          <Box
-            sx={{
-              mb: 3,
-            }}
-          >
-            {icon}
-          </Box>
+          <Box sx={{ mb: 3 }}>{icon}</Box>
           <Typography
             variant="featured2"
             sx={{

diff --git a/libs/shared/providers/src/refresher/hooks.ts b/libs/shared/providers/src/refresher/hooks.ts
@@ -40,17 +40,19 @@ export const useRefresher = <QueryResult = any>({
 
   const startRefresh = useCallback(
     async (initialData: QueryResult | undefined) => {
-      if (initialData) {
-        prev.current = initialData;
-        setPollInterval(interval);
+      if (status !== 'polling') {
         setStatus('polling');
-      } else {
-        setTimeout(() => {
-          setStatus('processed');
-        }, 12000);
+        if (initialData) {
+          prev.current = initialData;
+          setPollInterval(interval);
+        } else {
+          setTimeout(() => {
+            setStatus('processed');
+          }, 12000);
+        }
       }
     },
-    [interval],
+    [interval, status],
   );
 
   const stopRefresh = useCallback(() => {