diff --git a/libs/defi/oeth/src/redeem/components/ClaimForm.tsx b/libs/defi/oeth/src/redeem/components/ClaimForm.tsx index 164dc1caa..38678da5c 100644 --- 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 index 333081b9a..34538ab8c 100644 --- 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,6 +73,7 @@ export const Swapper = ({ ...rest }: SwapperProps) => { const intl = useIntl(); + const { address } = useAccount(); const pushNotification = usePushNotification(); const deleteNotification = useDeleteNotification(); const pushActivity = usePushActivity(); @@ -79,6 +81,12 @@ export const Swapper = ({ const deleteActivity = useDeleteActivity(); const [open, setOpen] = useState(false); const [info, setInfo] = useState>(); + const { data, refetch } = useWithdrawalRequestsQuery( + { + address: address ?? ZERO_ADDRESS, + }, + { enabled: false }, + ); return ( { + 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 = ({ }} > - { - setOpen(false); - }} - keepMounted={false} - {...info} - /> + {open && ( + { + setOpen(false); + }} + {...info} + /> + )} ); }; diff --git a/libs/defi/oeth/src/redeem/components/WithdrawalRequestModal.tsx b/libs/defi/oeth/src/redeem/components/WithdrawalRequestModal.tsx index 9b9a79bb3..d1f478662 100644 --- 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,6 +40,7 @@ export type WithdrawalRequestModalProps = { tokenIn?: Token; tokenOut?: Token; txReceipt?: TransactionReceipt; + initialRequests?: WithdrawalRequestsQuery; } & DialogProps; export const WithdrawalRequestModal = ({ @@ -48,6 +48,7 @@ export const WithdrawalRequestModal = ({ 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({ 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, }} > - - {icon} - + {icon} ({ 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(() => {