fix(rewards): musd calculator (#30160)

sophieqgu · web-flow · commit 9991a943e084 · 2026-05-14T03:19:13.000Z
## **Description** https://consensyssoftware.atlassian.net/browse/RWDS-1294 https://consensyssoftware.atlassian.net/browse/RWDS-1295 https://consensyssoftware.atlassian.net/browse/RWDS-1297 - Updated the mUSD calculator screen container to align better with other Rewards views and avoid unnecessary nested keyboard handling. - Moved keyboard handling into MusdCalculatorTab with KeyboardAwareScrollView so the amount input stays visible while editing. - Simplified calculator state: raw string for the text input, numeric amount for slider and earnings calculations. - Normalized amount input to strip decorations, limit to two decimal places, and cap values at 10,000. - Reused the shared formatUsd utility instead of local fiat formatter/BigNumber wiring. - Refactored slider gesture handling to separate tap and pan behavior, fixing resets when tapping or long-pressing the slider. - Removed unnecessary input focus/end-edit/submit handlers. - Removed unnecessary useMemo usage for simple labels and earnings calculations. - Added regression tests for keyboard-aware behavior, input normalization, amount capping, and slider reset cases.  ## **Changelog**  CHANGELOG entry: null ## **Related issues** Fixes: ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings**  ### **Before**  ### **After** https://github.com/user-attachments/assets/0a80bef1-8dfa-41db-a41e-8a1432a005b8  ## **Pre-merge author checklist**  - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. #### Performance checks (if applicable) - [x] I've tested on Android - Ideally on a mid-range device; emulator is acceptable - [x] I've tested with a power user scenario - Use these [power-user SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93) to import wallets with many accounts and tokens - [x] I've instrumented key operations with Sentry traces for production performance metrics - See [`trace()`](/app/util/trace.ts) for usage and [`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274) for an example For performance guidelines and tooling, see the [Performance Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers). ## **Pre-merge reviewer checklist**  - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.  --- > [!NOTE] > **Medium Risk** > Moderate risk because it refactors slider gesture handling and amount parsing/formatting, which can affect user-entered values and earnings calculations across iOS/Android keyboard behavior. > > **Overview** > Improves the mUSD calculator UX by **moving keyboard avoidance into the tab** via `KeyboardAwareScrollView` and simplifying the view container (removing the outer `KeyboardAvoidingView` and adjusting padding). > > Refactors `MusdCalculatorTab` to keep **raw numeric input state**, cap input at `MAX_AMOUNT`, and limit decimals to 2, while switching all USD display to the shared `formatUsd` helper. > > Reworks slider interactions to use **simultaneous tap + pan gestures** (instead of `Pressable` press handling) to prevent unintended slider resets, and adds/updates tests to cover keyboard-aware props, input normalization/capping, and gesture regression cases. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit c3d9209. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>
diff --git a/app/components/UI/Rewards/Views/MusdCalculatorView.test.tsx b/app/components/UI/Rewards/Views/MusdCalculatorView.test.tsx
@@ -66,13 +66,6 @@ describe('MusdCalculatorView', () => {
     expect(getByTestId('musd-calculator-tab')).toBeOnTheScreen();
   });
 
-  it('wraps the calculator in a keyboard avoiding view', () => {
-    const { getByTestId } = render(<MusdCalculatorView />);
-    expect(
-      getByTestId('musd-calculator-keyboard-avoiding-view'),
-    ).toBeOnTheScreen();
-  });
-
   it('tracks REWARDS_PAGE_VIEWED on mount with page_type musd_calculator', () => {
     render(<MusdCalculatorView />);
 
diff --git a/app/components/UI/Rewards/Views/MusdCalculatorView.tsx b/app/components/UI/Rewards/Views/MusdCalculatorView.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { HeaderStandard } from '@metamask/design-system-react-native';
 import { useNavigation } from '@react-navigation/native';
-import { KeyboardAvoidingView, Platform } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import ErrorBoundary from '../../../Views/ErrorBoundary';
@@ -19,21 +18,14 @@ const MusdCalculatorView: React.FC = () => {
     <ErrorBoundary navigation={navigation} view="MusdCalculatorView">
       <SafeAreaView
         edges={{ top: 'additive' }}
-        style={tw.style('flex-1 bg-default')}
+        style={tw.style('flex-1 bg-default pb-4')}
       >
         <HeaderStandard
           title={strings('rewards.musd.page_title')}
           onBack={() => navigation.goBack()}
           backButtonProps={{ testID: 'header-back-button' }}
         />
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0}
-          style={tw.style('flex-1')}
-          testID="musd-calculator-keyboard-avoiding-view"
-        >
-          <MusdCalculatorTab />
-        </KeyboardAvoidingView>
+        <MusdCalculatorTab />
       </SafeAreaView>
     </ErrorBoundary>
   );
diff --git a/app/components/UI/Rewards/components/Tabs/MusdCalculatorTab/MusdCalculatorTab.test.tsx b/app/components/UI/Rewards/components/Tabs/MusdCalculatorTab/MusdCalculatorTab.test.tsx
@@ -9,13 +9,27 @@ import { amountToPercent } from '../../../utils/musdCalculatorSlider';
 const mockPanGestureHandlers: {
   onBegin?: (event: { x: number }) => void;
   onUpdate?: (event: { x: number }) => void;
+  onEnd?: (event: { x: number }) => void;
   onFinalize?: (event: { x: number }) => void;
 } = {};
+const mockTapGestureHandlers: {
+  onEnd?: (event: { x: number }) => void;
+} = {};
 
 jest.mock('react-native-gesture-handler', () => ({
   GestureHandlerRootView: jest.requireActual('react-native').View,
   GestureDetector: ({ children }: { children: React.ReactNode }) => children,
   Gesture: {
+    Simultaneous: jest.fn((...gestures: unknown[]) => gestures),
+    Tap: jest.fn(() => ({
+      onEnd: jest.fn(function (
+        this: unknown,
+        handler: (event: { x: number }) => void,
+      ) {
+        mockTapGestureHandlers.onEnd = handler;
+        return this;
+      }),
+    })),
     Pan: jest.fn(() => ({
       minDistance: jest.fn().mockReturnThis(),
       onBegin: jest.fn(function (
@@ -32,6 +46,13 @@ jest.mock('react-native-gesture-handler', () => ({
         mockPanGestureHandlers.onUpdate = handler;
         return this;
       }),
+      onEnd: jest.fn(function (
+        this: unknown,
+        handler: (event: { x: number }) => void,
+      ) {
+        mockPanGestureHandlers.onEnd = handler;
+        return this;
+      }),
       onFinalize: jest.fn(function (
         this: unknown,
         handler: (event: { x: number }) => void,
@@ -60,12 +81,18 @@ jest.mock('../../../../../../../locales/i18n', () => ({
   strings: jest.fn((key: string) => key),
 }));
 
-jest.mock('../../../../SimulationDetails/FiatDisplay/useFiatFormatter', () =>
-  jest.fn(
-    () => (value: { toNumber: () => number }) =>
-      `$${value.toNumber().toLocaleString('en-US')}`,
-  ),
-);
+jest.mock('react-native-keyboard-aware-scroll-view', () => {
+  const ReactActual = jest.requireActual('react');
+  const { ScrollView } = jest.requireActual('react-native');
+  return {
+    KeyboardAwareScrollView: ({
+      children,
+      ...props
+    }: {
+      children?: React.ReactNode;
+    }) => ReactActual.createElement(ScrollView, props, children),
+  };
+});
 
 jest.mock('../../../../../../core/DeeplinkManager', () => ({
   handleDeeplink: jest.fn(),
@@ -90,7 +117,9 @@ describe('MusdCalculatorTab', () => {
     jest.clearAllMocks();
     mockPanGestureHandlers.onBegin = undefined;
     mockPanGestureHandlers.onUpdate = undefined;
+    mockPanGestureHandlers.onEnd = undefined;
     mockPanGestureHandlers.onFinalize = undefined;
+    mockTapGestureHandlers.onEnd = undefined;
     jest.mocked(useAnalytics).mockReturnValue(
       createMockUseAnalyticsHook({
         trackEvent: mockTrackEvent,
@@ -114,6 +143,20 @@ describe('MusdCalculatorTab', () => {
     expect(getByTestId('musd-slider-track')).toBeOnTheScreen();
   });
 
+  it('uses a keyboard-aware scroll container for the amount input', () => {
+    const { getByTestId } = render(<MusdCalculatorTab />);
+    const scrollView = getByTestId(
+      'musd-calculator-keyboard-aware-scroll-view',
+    );
+
+    expect(scrollView).toHaveProp('keyboardShouldPersistTaps', 'handled');
+    expect(scrollView).toHaveProp('keyboardDismissMode', 'none');
+    expect(scrollView).toHaveProp('enableOnAndroid', true);
+    expect(scrollView).toHaveProp('enableAutomaticScroll', true);
+    expect(scrollView).toHaveProp('enableResetScrollToCoords', false);
+    expect(scrollView).toHaveProp('extraScrollHeight', 20);
+  });
+
   it('calls handleDeeplink and tracks buy_musd event when Buy button is pressed', () => {
     const { handleDeeplink } = jest.requireMock(
       '../../../../../../core/DeeplinkManager',
@@ -159,14 +202,14 @@ describe('MusdCalculatorTab', () => {
     });
 
     const locationX = (amountToPercent(5000) / 100) * 300;
-    fireEvent(track, 'pressIn', {
-      nativeEvent: { locationX },
+    await act(async () => {
+      mockTapGestureHandlers.onEnd?.({ x: locationX });
     });
 
     await waitFor(() => {
       expect(getByTestId('musd-slider-amount-display')).toHaveProp(
         'value',
-        '$5,000',
+        '5000',
       );
       expect(
         getByText(/rewards\.musd\.earnings_per_day_suffix/),
@@ -183,52 +226,42 @@ describe('MusdCalculatorTab', () => {
     const { getByTestId, getByText } = render(<MusdCalculatorTab />);
     const amountInput = getByTestId('musd-slider-amount-display');
 
-    fireEvent(amountInput, 'focus');
     fireEvent.changeText(amountInput, '5000');
 
     await waitFor(() => {
       expect(amountInput).toHaveProp('value', '5000');
       expect(getByText(/\$150/)).toBeOnTheScreen();
     });
-
-    fireEvent(amountInput, 'endEditing');
-
-    await waitFor(() => {
-      expect(amountInput).toHaveProp('value', '$5,000');
-    });
   });
 
-  it('accepts amounts over the slider maximum', async () => {
+  it('caps typed amounts at the slider maximum', async () => {
     const { getByTestId, getByText } = render(<MusdCalculatorTab />);
     const amountInput = getByTestId('musd-slider-amount-display');
 
-    fireEvent(amountInput, 'focus');
     fireEvent.changeText(amountInput, '12000');
 
     await waitFor(() => {
-      expect(amountInput).toHaveProp('value', '12000');
-      expect(getByText(/\$360/)).toBeOnTheScreen();
+      expect(amountInput).toHaveProp('value', '10000');
+      expect(getByText(/\$300/)).toBeOnTheScreen();
     });
   });
 
-  it('normalizes decorated decimal input while editing', async () => {
+  it('normalizes decorated decimal input to two decimal places while editing', async () => {
     const { getByTestId, getByText } = render(<MusdCalculatorTab />);
     const amountInput = getByTestId('musd-slider-amount-display');
 
-    fireEvent(amountInput, 'focus');
     fireEvent.changeText(amountInput, '$1,234.56.78');
 
     await waitFor(() => {
-      expect(amountInput).toHaveProp('value', '1234.5678');
-      expect(getByText(/\$37\.037/)).toBeOnTheScreen();
+      expect(amountInput).toHaveProp('value', '1234.56');
+      expect(getByText(/\$37\.04/)).toBeOnTheScreen();
     });
   });
 
   it('treats invalid numeric input as zero', async () => {
     const { getByTestId, getAllByText } = render(<MusdCalculatorTab />);
     const amountInput = getByTestId('musd-slider-amount-display');
 
-    fireEvent(amountInput, 'focus');
     fireEvent.changeText(amountInput, '.');
 
     await waitFor(() => {
@@ -240,13 +273,13 @@ describe('MusdCalculatorTab', () => {
   it('ignores slider presses before the track is measured', () => {
     const { getByTestId } = render(<MusdCalculatorTab />);
 
-    fireEvent(getByTestId('musd-slider-track'), 'pressIn', {
-      nativeEvent: { locationX: 200 },
+    act(() => {
+      mockTapGestureHandlers.onEnd?.({ x: 200 });
     });
 
     expect(getByTestId('musd-slider-amount-display')).toHaveProp(
       'value',
-      '$1,000',
+      '1000',
     );
   });
 
@@ -261,17 +294,79 @@ describe('MusdCalculatorTab', () => {
     act(() => {
       mockPanGestureHandlers.onBegin?.({ x: 150 });
       mockPanGestureHandlers.onUpdate?.({ x: 300 });
+      mockPanGestureHandlers.onEnd?.({ x: 300 });
       mockPanGestureHandlers.onFinalize?.({ x: 300 });
     });
 
     await waitFor(() => {
       expect(getByTestId('musd-slider-amount-display')).toHaveProp(
         'value',
-        '$10,000',
+        '10000',
       );
     });
   });
 
+  it('does not reset the slider when a press finalizes without a pan', async () => {
+    const { getByTestId } = render(<MusdCalculatorTab />);
+    const track = getByTestId('musd-slider-track');
+
+    fireEvent(track, 'layout', {
+      nativeEvent: { layout: { width: 300, height: 32, x: 0, y: 0 } },
+    });
+
+    const locationX = (amountToPercent(5000) / 100) * 300;
+    await act(async () => {
+      mockTapGestureHandlers.onEnd?.({ x: locationX });
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('musd-slider-amount-display')).toHaveProp(
+        'value',
+        '5000',
+      );
+    });
+
+    act(() => {
+      mockPanGestureHandlers.onFinalize?.({ x: 0 });
+    });
+
+    expect(getByTestId('musd-slider-amount-display')).toHaveProp(
+      'value',
+      '5000',
+    );
+  });
+
+  it('does not reset when tapping the same slider position twice', async () => {
+    const { getByTestId } = render(<MusdCalculatorTab />);
+    const track = getByTestId('musd-slider-track');
+
+    fireEvent(track, 'layout', {
+      nativeEvent: { layout: { width: 300, height: 32, x: 0, y: 0 } },
+    });
+
+    const locationX = (amountToPercent(5000) / 100) * 300;
+
+    await act(async () => {
+      mockTapGestureHandlers.onEnd?.({ x: locationX });
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('musd-slider-amount-display')).toHaveProp(
+        'value',
+        '5000',
+      );
+    });
+
+    await act(async () => {
+      mockTapGestureHandlers.onEnd?.({ x: locationX });
+    });
+
+    expect(getByTestId('musd-slider-amount-display')).toHaveProp(
+      'value',
+      '5000',
+    );
+  });
+
   it('ignores pan gesture handlers before the track is measured', () => {
     const { getByTestId } = render(<MusdCalculatorTab />);
 
@@ -282,7 +377,7 @@ describe('MusdCalculatorTab', () => {
 
     expect(getByTestId('musd-slider-amount-display')).toHaveProp(
       'value',
-      '$1,000',
+      '1000',
     );
   });
 });
diff --git a/app/components/UI/Rewards/components/Tabs/MusdCalculatorTab/MusdCalculatorTab.tsx b/app/components/UI/Rewards/components/Tabs/MusdCalculatorTab/MusdCalculatorTab.tsx
