diff --git a/src/components/composite/JumperWidget/JumperWidget.tsx b/src/components/composite/JumperWidget/JumperWidget.tsx index 8b44641df1..14dc62bba5 100644 --- a/src/components/composite/JumperWidget/JumperWidget.tsx +++ b/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 = ({ interface JumperWidgetProps { views: WidgetView[]; statusSheet?: JumperWidgetStatusSheetProp; + onNavigationReady?: (navigationContext: NavigationContextValue) => void; style?: { container?: SxProps; mainView?: SxProps; @@ -248,6 +250,7 @@ interface JumperWidgetProps { export const JumperWidget: FC = ({ views, statusSheet, + onNavigationReady, style, }) => { const uiStoreRef = useRef | null>(null); @@ -318,6 +321,10 @@ export const JumperWidget: FC = ({ [currentViewId, goToView, submit, isSubmitting, error, clearError], ); + useEffect(() => { + onNavigationReady?.({ ...navigationContext }); + }, [navigationContext, onNavigationReady]); + return ( diff --git a/src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx b/src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx index 91890bd707..73ca204cb9 100644 --- a/src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx +++ b/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 = ({ const { t } = useTranslation(); const accountAddress = useAccountAddress(); - const [selectedClaimId, setSelectedClaimId] = useState(null); + const [selectedClaim, setSelectedClaim] = useState( + 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(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 = ({ ); const handleModalClose = () => { - setSelectedClaimId(null); + setSelectedClaim(null); handleResetAmount(); transactionForm.resetForm(); onClose?.(); @@ -144,9 +147,18 @@ export const RequestRedeemModal: FC = ({ 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 = ({ content: ( @@ -233,6 +245,7 @@ export const RequestRedeemModal: FC = ({ ) : null} diff --git a/src/components/composite/RequestRedeemModal/components/ClaimList.tsx b/src/components/composite/RequestRedeemModal/components/ClaimList.tsx index b381d8b5f7..ddfc9a9a7e 100644 --- a/src/components/composite/RequestRedeemModal/components/ClaimList.tsx +++ b/src/components/composite/RequestRedeemModal/components/ClaimList.tsx @@ -1,5 +1,8 @@ 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'; @@ -7,25 +10,25 @@ import type { ExtendedToken } from '@/types/tokens'; import { RequestRedeemModalView } from '../types'; interface ClaimListProps { - claims: ReturnType; - setSelectedClaimId: (id: string | null) => void; + claims: FormattedClaims; + setSelectedClaim: (claim: FormattedClaim | null) => void; fromToken: ExtendedToken; toToken: ExtendedToken; } export const ClaimList: FC = ({ 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) => ( = ({ description={formattedClaim.description} onClick={ formattedClaim.status === 'success' - ? () => handleClaimClick(formattedClaim.id) + ? () => handleClaimClick(formattedClaim) : undefined } /> diff --git a/src/components/composite/RequestRedeemModal/hooks/useFormatRedeemClaimData.ts b/src/components/composite/RequestRedeemModal/hooks/useFormatRedeemClaimData.ts index 6a71b84b99..0b36a77c7d 100644 --- a/src/components/composite/RequestRedeemModal/hooks/useFormatRedeemClaimData.ts +++ b/src/components/composite/RequestRedeemModal/hooks/useFormatRedeemClaimData.ts @@ -37,3 +37,6 @@ export const useFormatRedeemClaimData = ( [claimData, t], ); }; + +export type FormattedClaims = ReturnType; +export type FormattedClaim = FormattedClaims[number]; diff --git a/src/components/composite/RequestRedeemModal/hooks/useRequestRedeemStatusSheet.tsx b/src/components/composite/RequestRedeemModal/hooks/useRequestRedeemStatusSheet.tsx index 35087e50f4..263c540165 100644 --- a/src/components/composite/RequestRedeemModal/hooks/useRequestRedeemStatusSheet.tsx +++ b/src/components/composite/RequestRedeemModal/hooks/useRequestRedeemStatusSheet.tsx @@ -13,21 +13,21 @@ export const useRequestRedeemStatusSheet = ({ isClaimFlow, selectedClaimToTokenBalance, requestWithdrawToTokenBalance, - resetAmount, + onCloseCallback, }: { transactionForm: ReturnType; isClaimFlow: boolean; selectedClaimToTokenBalance: Balance; requestWithdrawToTokenBalance: Balance; - resetAmount: () => void; + onCloseCallback: () => void; }) => { const lastOpenSheetRef = useRef(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,