Skip to content

fix: reset active view on claim success#2767

Open
mmioana wants to merge 3 commits intodevelopfrom
feature/jum-716-withdraw-position-screen-shows-00-with-active-withdraw
Open

fix: reset active view on claim success#2767
mmioana wants to merge 3 commits intodevelopfrom
feature/jum-716-withdraw-position-screen-shows-00-with-active-withdraw

Conversation

@mmioana
Copy link
Copy Markdown
Contributor

@mmioana mmioana commented Mar 24, 2026

Which Jira task belongs to this PR?

Closes https://linear.app/lifi-linear/issue/JUM-716/withdraw-position-screen-shows-dollar0dollar0-with-active-withdraw

  • Issue found and possibly fixed, need to wait for the claim request to be approved (2nd April)

Why did I implement it this way?

Checklist before requesting a review

  • I have performed a self-review of my code
  • This pull request is as small as possible and only tackles one problem
  • I have added tests that cover the functionality / test the bug
  • If this changed the API, I have updated the documentation
  • I have provided QA instructions for the feature / fix implemented in this PR (if applicable)
  • I have provided instructions for any environment / deployment changes that this PR needs when merged

Summary by CodeRabbit

  • New Features

    • Jumper widget now exposes a navigation-ready callback so parent modals can receive and interact with its navigation context.
  • Refactor

    • Simplified redeem modal selection flow to pass full claim objects instead of ids, improving state clarity and navigation.
    • Reworked modal status handling to use a unified on-close callback and added reusable formatted-claim types for stronger type safety.

@mmioana mmioana self-assigned this Mar 24, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 24, 2026

Walkthrough

The PR adds an optional onNavigationReady callback to JumperWidget to expose its navigation context; refactors RequestRedeemModal and ClaimList to use full FormattedClaim objects (and new exported types), captures JumperWidget's navigation context via a ref, and changes a hook parameter from resetAmount to onCloseCallback to coordinate close behavior.

Changes

Cohort / File(s) Summary
JumperWidget Navigation Callback
src/components/composite/JumperWidget/JumperWidget.tsx
Added optional prop onNavigationReady?: (navigationContext: NavigationContextValue) => void and a useEffect to call it with the built navigation context when context or callback changes.
RequestRedeemModal Refactor & Wiring
src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx
Replaced `selectedClaimId: string
ClaimList Selection API
src/components/composite/RequestRedeemModal/components/ClaimList.tsx
Prop and handler changed to accept FormattedClaim (`setSelectedClaim: (claim: FormattedClaim
Type Exports for Claims
src/components/composite/RequestRedeemModal/hooks/useFormatRedeemClaimData.ts
Exported FormattedClaims = ReturnType<typeof useFormatRedeemClaimData> and FormattedClaim = FormattedClaims[number] for reuse.
Status Sheet Hook Signature
src/components/composite/RequestRedeemModal/hooks/useRequestRedeemStatusSheet.tsx
Hook parameter renamed from resetAmount to onCloseCallback; handleCloseSuccess now calls onCloseCallback() after success handling.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant ClaimList
    participant RequestRedeemModal
    participant JumperWidget
    participant StatusSheet as useRequestRedeemStatusSheet

    User->>ClaimList: click claim
    ClaimList->>RequestRedeemModal: setSelectedClaim(formattedClaim)
    RequestRedeemModal->>RequestRedeemModal: update selectedClaim state
    RequestRedeemModal->>JumperWidget: change view / interact
    JumperWidget->>RequestRedeemModal: onNavigationReady(navigationContext)
    RequestRedeemModal->>RequestRedeemModal: store widgetNavigationRef
    User->>StatusSheet: complete transaction
    StatusSheet->>RequestRedeemModal: onCloseCallback()
    RequestRedeemModal->>RequestRedeemModal: clear selectedClaim, reset amount, refetch LP
    RequestRedeemModal->>JumperWidget: navigate to REQUEST_WITHDRAW (if needed)
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

  • feat: request redeem flow #2693: Related changes touching JumperWidget navigation callback and RequestRedeemModal wiring; strong overlap in modified components and navigation coordination.

Suggested reviewers

  • Kayanski
  • chmanie
  • laurentsenta

Poem

🐇 I hop with joy at claims so bright,
A full claim carried home tonight,
JumperWidget whispers its map so steady,
The modal listens — paws light and ready,
Together we bounce the flow just right. ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix: reset active view on claim success' accurately describes the main objective of the PR, which involves resetting the selected claim and navigating back after a successful claim redemption, as evidenced by the changes to handle close callbacks and state resets.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/jum-716-withdraw-position-screen-shows-00-with-active-withdraw

Comment @coderabbitai help to get the list of available commands and usage tips.

@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 24, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
jumper-exchange Error Error Apr 28, 2026 3:41pm
jumper-exchange-storybook Ready Ready Preview, Comment Apr 28, 2026 3:41pm

Request Review

@mmioana mmioana changed the title Feature/jum 716 withdraw position screen shows 00 with active withdraw fix: withdraw position screen shows 0 with active withdraw Mar 24, 2026
@mmioana mmioana changed the title fix: withdraw position screen shows 0 with active withdraw fix: reset active view on claim success Mar 24, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 24, 2026

✅ All snapshot tests passed

@mmioana mmioana force-pushed the feature/jum-716-withdraw-position-screen-shows-00-with-active-withdraw branch from 2a831ad to ae8a88c Compare March 24, 2026 14:32
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 24, 2026

Playwright test results

passed  54 passed
flaky  2 flaky
skipped  1 skipped

Details

stats  57 tests across 11 suites
duration  4 minutes, 30 seconds
commit  4e408b9

Flaky tests

chromium › mainMenu.spec.ts › Main Menu flows › Should open Resources section inside menu (Qase ID: 13)
chromium › settings.spec.ts › Settings menu [Viewport: Mobile] › Should verify all settings menu functionality (Qase ID: 7)

Skipped tests

chromium › themeManipulation.spec.ts › Switch between dark and light theme and check the background color › Partner theme should appear in theme menu and apply background color (Qase ID: 49)

📋 View Detailed Qase Report

@mmioana mmioana force-pushed the feature/jum-716-withdraw-position-screen-shows-00-with-active-withdraw branch from ae8a88c to 1be7913 Compare April 1, 2026 13:04
@mmioana mmioana marked this pull request as ready for review April 1, 2026 13:07
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
src/components/composite/JumperWidget/JumperWidget.tsx (1)

324-326: Redundant object spread.

navigationContext is already a new object from useMemo, so spreading it into a new object is unnecessary.

♻️ Suggested simplification
   useEffect(() => {
-    onNavigationReady?.({ ...navigationContext });
+    onNavigationReady?.(navigationContext);
   }, [navigationContext, onNavigationReady]);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/composite/JumperWidget/JumperWidget.tsx` around lines 324 -
326, The useEffect in JumperWidget currently calls onNavigationReady?.({
...navigationContext }) and unnecessarily spreads navigationContext (which is
already a fresh object from useMemo); change the effect to call
onNavigationReady?.(navigationContext) instead so you pass the memoized object
directly (keep the effect and dependency array [navigationContext,
onNavigationReady] unchanged), locating this change in the useEffect block where
onNavigationReady is invoked.
src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx (1)

148-160: Wrap onCloseCallback in useCallback to prevent unnecessary re-renders.

The inline function creates a new reference on every render, causing handleCloseSuccess and openSheet in useRequestRedeemStatusSheet to be recreated on each render cycle.

♻️ Suggested fix
+  const handleCloseSuccess = useCallback(() => {
+    setSelectedClaim(null);
+    handleResetAmount();
+    refetchLpTokenAmount();
+    if (
+      widgetNavigationRef.current?.currentViewId !==
+      RequestRedeemModalView.REQUEST_WITHDRAW
+    ) {
+      widgetNavigationRef.current?.goToView(
+        RequestRedeemModalView.REQUEST_WITHDRAW,
+      );
+    }
+  }, [handleResetAmount, refetchLpTokenAmount]);
+
   const statusSheet = useRequestRedeemStatusSheet({
     transactionForm,
     isClaimFlow,
     selectedClaimToTokenBalance,
     requestWithdrawToTokenBalance,
-    onCloseCallback: () => {
-      setSelectedClaim(null);
-      handleResetAmount();
-      refetchLpTokenAmount();
-      if (
-        widgetNavigationRef.current?.currentViewId !==
-        RequestRedeemModalView.REQUEST_WITHDRAW
-      ) {
-        widgetNavigationRef.current?.goToView(
-          RequestRedeemModalView.REQUEST_WITHDRAW,
-        );
-      }
-    },
+    onCloseCallback: handleCloseSuccess,
   });
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx` around
lines 148 - 160, The inline onCloseCallback prop is recreated every render
causing downstream hooks (like useRequestRedeemStatusSheet's handleCloseSuccess
and openSheet) to re-create; wrap the onCloseCallback in useCallback (e.g.,
const onCloseCallback = useCallback(() => { setSelectedClaim(null);
handleResetAmount(); refetchLpTokenAmount(); if
(widgetNavigationRef.current?.currentViewId !==
RequestRedeemModalView.REQUEST_WITHDRAW) {
widgetNavigationRef.current?.goToView(RequestRedeemModalView.REQUEST_WITHDRAW);
} }, [setSelectedClaim, handleResetAmount, refetchLpTokenAmount,
widgetNavigationRef]) and pass that memoized onCloseCallback where currently
provided so the reference remains stable between renders.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/composite/JumperWidget/JumperWidget.tsx`:
- Around line 324-326: The useEffect in JumperWidget currently calls
onNavigationReady?.({ ...navigationContext }) and unnecessarily spreads
navigationContext (which is already a fresh object from useMemo); change the
effect to call onNavigationReady?.(navigationContext) instead so you pass the
memoized object directly (keep the effect and dependency array
[navigationContext, onNavigationReady] unchanged), locating this change in the
useEffect block where onNavigationReady is invoked.

In `@src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx`:
- Around line 148-160: The inline onCloseCallback prop is recreated every render
causing downstream hooks (like useRequestRedeemStatusSheet's handleCloseSuccess
and openSheet) to re-create; wrap the onCloseCallback in useCallback (e.g.,
const onCloseCallback = useCallback(() => { setSelectedClaim(null);
handleResetAmount(); refetchLpTokenAmount(); if
(widgetNavigationRef.current?.currentViewId !==
RequestRedeemModalView.REQUEST_WITHDRAW) {
widgetNavigationRef.current?.goToView(RequestRedeemModalView.REQUEST_WITHDRAW);
} }, [setSelectedClaim, handleResetAmount, refetchLpTokenAmount,
widgetNavigationRef]) and pass that memoized onCloseCallback where currently
provided so the reference remains stable between renders.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1f1e1bc9-a788-4a15-a542-81e31ba73c7d

📥 Commits

Reviewing files that changed from the base of the PR and between 21c7938 and 1be7913.

📒 Files selected for processing (5)
  • src/components/composite/JumperWidget/JumperWidget.tsx
  • src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx
  • src/components/composite/RequestRedeemModal/components/ClaimList.tsx
  • src/components/composite/RequestRedeemModal/hooks/useFormatRedeemClaimData.ts
  • src/components/composite/RequestRedeemModal/hooks/useRequestRedeemStatusSheet.tsx

Copy link
Copy Markdown

@yordanove yordanove left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code reviewed — fix looks correct. After claim success, the onCloseCallback now resets the selected claim, amount, and navigates back to the REQUEST_WITHDRAW view instead of staying on the $0/$0 screen.

Couldn't functionally test due to Lido withdrawal confirmation timing (1-3 days). Prepared a withdrawal transaction for testing once confirmed:

@mmioana mmioana force-pushed the feature/jum-716-withdraw-position-screen-shows-00-with-active-withdraw branch from 1be7913 to 4e408b9 Compare April 28, 2026 15:19
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx (1)

150-162: Consider wrapping onCloseCallback in useCallback for stability.

The inline arrow function creates a new reference on every render. If useRequestRedeemStatusSheet uses this callback in dependencies or memoization, it could trigger unnecessary re-renders or effect re-executions.

♻️ Suggested refactor
+ const handleStatusSheetClose = useCallback(() => {
+   setSelectedClaim(null);
+   handleResetAmount();
+   refetchLpTokenAmount();
+   if (
+     widgetNavigationRef.current?.currentViewId !==
+     RequestRedeemModalView.REQUEST_WITHDRAW
+   ) {
+     widgetNavigationRef.current?.goToView(
+       RequestRedeemModalView.REQUEST_WITHDRAW,
+     );
+   }
+ }, [handleResetAmount, refetchLpTokenAmount]);

  const statusSheet = useRequestRedeemStatusSheet({
    transactionForm,
    isClaimFlow,
    selectedClaimToTokenBalance,
    requestWithdrawToTokenBalance,
-   onCloseCallback: () => {
-     setSelectedClaim(null);
-     handleResetAmount();
-     refetchLpTokenAmount();
-     if (
-       widgetNavigationRef.current?.currentViewId !==
-       RequestRedeemModalView.REQUEST_WITHDRAW
-     ) {
-       widgetNavigationRef.current?.goToView(
-         RequestRedeemModalView.REQUEST_WITHDRAW,
-       );
-     }
-   },
+   onCloseCallback: handleStatusSheetClose,
  });
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx` around
lines 150 - 162, Wrap the inline onCloseCallback in useCallback to stabilize its
identity: create a memoized callback using React.useCallback named
onCloseCallback that performs setSelectedClaim(null), handleResetAmount(),
refetchLpTokenAmount(), and the widgetNavigationRef view check/goToView logic,
and pass that memoized function to useRequestRedeemStatusSheet (or wherever it’s
used). Use dependencies [setSelectedClaim, handleResetAmount,
refetchLpTokenAmount, widgetNavigationRef, RequestRedeemModalView] (omit
.current access) so the callback updates only when those symbols change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx`:
- Around line 150-162: Wrap the inline onCloseCallback in useCallback to
stabilize its identity: create a memoized callback using React.useCallback named
onCloseCallback that performs setSelectedClaim(null), handleResetAmount(),
refetchLpTokenAmount(), and the widgetNavigationRef view check/goToView logic,
and pass that memoized function to useRequestRedeemStatusSheet (or wherever it’s
used). Use dependencies [setSelectedClaim, handleResetAmount,
refetchLpTokenAmount, widgetNavigationRef, RequestRedeemModalView] (omit
.current access) so the callback updates only when those symbols change.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 27bae367-c8a3-4919-b619-8edcc2bb3dc8

📥 Commits

Reviewing files that changed from the base of the PR and between 1be7913 and 4e408b9.

📒 Files selected for processing (5)
  • src/components/composite/JumperWidget/JumperWidget.tsx
  • src/components/composite/RequestRedeemModal/RequestRedeemModal.tsx
  • src/components/composite/RequestRedeemModal/components/ClaimList.tsx
  • src/components/composite/RequestRedeemModal/hooks/useFormatRedeemClaimData.ts
  • src/components/composite/RequestRedeemModal/hooks/useRequestRedeemStatusSheet.tsx
✅ Files skipped from review due to trivial changes (1)
  • src/components/composite/RequestRedeemModal/hooks/useFormatRedeemClaimData.ts
🚧 Files skipped from review as they are similar to previous changes (3)
  • src/components/composite/JumperWidget/JumperWidget.tsx
  • src/components/composite/RequestRedeemModal/hooks/useRequestRedeemStatusSheet.tsx
  • src/components/composite/RequestRedeemModal/components/ClaimList.tsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants