fix: reset active view on claim success

src/components/composite/JumperWidget/JumperWidget.tsx

@@ -15,6 +15,7 @@ import {
 } from 'react';
 import { useForm, useStore } from '@tanstack/react-form';
 import { useStore as useZustandStore } from 'zustand';
+import type { NavigationContextValue } from './context';
 import {
   FormContext,
   NavigationContext,
@@ -237,6 +238,7 @@ const JumperWidgetInner: FC<JumperWidgetInnerProps> = ({
 interface JumperWidgetProps {
   views: WidgetView[];
   statusSheet?: JumperWidgetStatusSheetProp;
+  onNavigationReady?: (navigationContext: NavigationContextValue) => void;
   style?: {
     container?: SxProps<Theme>;
     mainView?: SxProps<Theme>;
@@ -248,6 +250,7 @@ interface JumperWidgetProps {
 export const JumperWidget: FC<JumperWidgetProps> = ({
   views,
   statusSheet,
+  onNavigationReady,
   style,
 }) => {
   const uiStoreRef = useRef<ReturnType<typeof createWidgetStore> | null>(null);
@@ -318,6 +321,10 @@ export const JumperWidget: FC<JumperWidgetProps> = ({
     [currentViewId, goToView, submit, isSubmitting, error, clearError],
   );
 
+  useEffect(() => {
+    onNavigationReady?.({ ...navigationContext });
+  }, [navigationContext, onNavigationReady]);
+
   return (
     <WidgetStoreContext.Provider value={uiStoreRef.current}>
       <FormContext.Provider value={form}>

src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx

@@ -1,11 +1,13 @@
 import { ModalContainer } from '@/components/core/modals/ModalContainer/ModalContainer';
 import type { ModalContainerProps } from '@/components/core/modals/ModalContainer/ModalContainer';
 import type { EarnOpportunityExtended } from '@/stores/depositFlow/DepositFlowStore';
-import { useMemo, useState, useCallback, type FC } from 'react';
+import { useMemo, useState, useCallback, useRef, type FC } from 'react';
 import { useRedeemableClaims } from '@/hooks/earn/useRedeemableClaims';
+import type { FormattedClaim } from './hooks/useFormatRedeemClaimData';
 import { useFormatRedeemClaimData } from './hooks/useFormatRedeemClaimData';
 import { useTransactionForm } from '@/hooks/transactions/useTransactionForm';
 import { JumperWidget } from '@/components/composite/JumperWidget/JumperWidget';
+import type { NavigationContextValue } from '../JumperWidget/context';
 import { createTokenBalance } from '@/types/tokens';
 import { useTranslation } from 'react-i18next';
 import { RequestViewSubmitButton } from './components/RequestViewSubmitButton';
@@ -40,27 +42,28 @@ export const RequestRedeemModal: FC<RequestRedeemModalProps> = ({
   const { t } = useTranslation();
   const accountAddress = useAccountAddress();
 
-  const [selectedClaimId, setSelectedClaimId] = useState<string | null>(null);
+  const [selectedClaim, setSelectedClaim] = useState<FormattedClaim | null>(
+    null,
+  );
   const [amount, setAmount] = useState('0');
 
   const { data: redeemableClaims, refetch: refetchClaims } =
     useRedeemableClaims(earnOpportunity, true);
   const formattedRedeemableClaims = useFormatRedeemClaimData(redeemableClaims);
 
-  const selectedClaim = useMemo(
-    () =>
-      selectedClaimId
-        ? formattedRedeemableClaims.find(
-            (claim) => claim.id === selectedClaimId,
-          )
-        : null,
-    [formattedRedeemableClaims, selectedClaimId],
-  );
-
   const { lpToken, lpTokenAmount, assetToken, refetchLpTokenAmount } =
     useEarnOpportunityTokens(earnOpportunity);
 
-  const isClaimFlow = selectedClaim != null;
+  const widgetNavigationRef = useRef<NavigationContextValue | null>(null);
+
+  const handleWidgetNavigationReady = useCallback(
+    (value: NavigationContextValue) => {
+      widgetNavigationRef.current = value;
+    },
+    [],
+  );
+
+  const isClaimFlow = selectedClaim !== null;
 
   const fetchCallData = useCallback(async () => {
     const client = makeClient();
@@ -133,7 +136,7 @@ export const RequestRedeemModal: FC<RequestRedeemModalProps> = ({
   );
 
   const handleModalClose = () => {
-    setSelectedClaimId(null);
+    setSelectedClaim(null);
     handleResetAmount();
     transactionForm.resetForm();
     onClose?.();
@@ -144,9 +147,18 @@ export const RequestRedeemModal: FC<RequestRedeemModalProps> = ({
     isClaimFlow,
     selectedClaimToTokenBalance,
     requestWithdrawToTokenBalance,
-    resetAmount: () => {
+    onCloseCallback: () => {
+      setSelectedClaim(null);
       handleResetAmount();
       refetchLpTokenAmount();
+      if (
+        widgetNavigationRef.current?.currentViewId !==
+        RequestRedeemModalView.REQUEST_WITHDRAW
+      ) {
+        widgetNavigationRef.current?.goToView(
+          RequestRedeemModalView.REQUEST_WITHDRAW,
+        );
+      }
     },
   });
 
@@ -181,7 +193,7 @@ export const RequestRedeemModal: FC<RequestRedeemModalProps> = ({
         content: (
           <ClaimList
             claims={formattedRedeemableClaims}
-            setSelectedClaimId={setSelectedClaimId}
+            setSelectedClaim={setSelectedClaim}
             fromToken={lpToken}
             toToken={assetToken}
           />
@@ -233,6 +245,7 @@ export const RequestRedeemModal: FC<RequestRedeemModalProps> = ({
         <JumperWidget
           views={views}
           statusSheet={statusSheet}
+          onNavigationReady={handleWidgetNavigationReady}
           style={widgetStyle}
         />
       ) : null}

src/components/composite/RequestRedeemModal/components/ClaimList.tsx

@@ -1,31 +1,34 @@
 import { type FC, useCallback } from 'react';
-import { type useFormatRedeemClaimData } from '../hooks/useFormatRedeemClaimData';
+import type {
+  FormattedClaim,
+  FormattedClaims,
+} from '../hooks/useFormatRedeemClaimData';
 import { ProcessingTransactionCard } from '@/components/composite/cards/ProcessingTransactionCard/ProcessingTransactionCard';
 import { type ProcessingTransactionCardStatus } from '@/components/composite/cards/ProcessingTransactionCard/types';
 import { useWidgetNavigation } from '@/components/composite/JumperWidget/context';
 import type { ExtendedToken } from '@/types/tokens';
 import { RequestRedeemModalView } from '../types';
 
 interface ClaimListProps {
-  claims: ReturnType<typeof useFormatRedeemClaimData>;
-  setSelectedClaimId: (id: string | null) => void;
+  claims: FormattedClaims;
+  setSelectedClaim: (claim: FormattedClaim | null) => void;
   fromToken: ExtendedToken;
   toToken: ExtendedToken;
 }
 
 export const ClaimList: FC<ClaimListProps> = ({
   claims,
-  setSelectedClaimId,
+  setSelectedClaim,
   toToken,
   fromToken,
 }) => {
   const { goToView } = useWidgetNavigation();
   const handleClaimClick = useCallback(
-    (claimId: string) => {
-      setSelectedClaimId(claimId);
+    (claim: FormattedClaim) => {
+      setSelectedClaim(claim);
       goToView(RequestRedeemModalView.CLAIM_REDEEM);
     },
-    [setSelectedClaimId, goToView],
+    [setSelectedClaim, goToView],
   );
   return claims.map((formattedClaim) => (
     <ProcessingTransactionCard
@@ -37,7 +40,7 @@ export const ClaimList: FC<ClaimListProps> = ({
       description={formattedClaim.description}
       onClick={
         formattedClaim.status === 'success'
-          ? () => handleClaimClick(formattedClaim.id)
+          ? () => handleClaimClick(formattedClaim)
           : undefined
       }
     />

src/components/composite/RequestRedeemModal/hooks/useFormatRedeemClaimData.ts

@@ -37,3 +37,6 @@ export const useFormatRedeemClaimData = (
     [claimData, t],
   );
 };
+
+export type FormattedClaims = ReturnType<typeof useFormatRedeemClaimData>;
+export type FormattedClaim = FormattedClaims[number];

src/components/composite/RequestRedeemModal/hooks/useRequestRedeemStatusSheet.tsx

@@ -13,21 +13,21 @@ export const useRequestRedeemStatusSheet = ({
   isClaimFlow,
   selectedClaimToTokenBalance,
   requestWithdrawToTokenBalance,
-  resetAmount,
+  onCloseCallback,
 }: {
   transactionForm: ReturnType<typeof useTransactionForm>;
   isClaimFlow: boolean;
   selectedClaimToTokenBalance: Balance<ExtendedToken>;
   requestWithdrawToTokenBalance: Balance<ExtendedToken>;
-  resetAmount: () => void;
+  onCloseCallback: () => void;
 }) => {
   const lastOpenSheetRef = useRef<JumperWidgetStatusSheetProp | null>(null);
   const { t } = useTranslation();
 
   const handleCloseSuccess = useCallback(() => {
     transactionForm.handleCloseSuccess();
-    resetAmount();
-  }, [transactionForm.handleCloseSuccess, resetAmount]);
+    onCloseCallback();
+  }, [transactionForm.handleCloseSuccess, onCloseCallback]);
 
   const statusContent = useTransactionStatusContent({
     keys: isClaimFlow ? CLAIM_STATUS_KEYS : WITHDRAW_STATUS_KEYS,