fix(ramps): Preserve user-entered amount during Transak navigation reset -> cp-7.71.0 (#27742)

## **Description**

Fixes the Buy flow amount reverting from the user-entered value back to
the default $100 during the Transak native provider loading transition.

When a user enters a custom amount (e.g. $30) and taps Continue, the
Transak routing callbacks use `navigation.reset()` to rebuild the
navigation stack with a fresh `BuildQuote` screen as the base route.
This fresh instance initialized with `DEFAULT_AMOUNT = 100`, causing a
visible flash of $100 during the transition to the checkout/KYC screen.

The fix passes the current `quote.fiatAmount` as a route param
(`amount`) to the `AMOUNT_INPUT` base route in every
`navigation.reset()` call. `BuildQuote` now reads `params?.amount` as
the initial state, preserving the user-entered amount through stack
resets.

## **Changelog**

CHANGELOG entry: Fixed Buy flow amount input reverting to $100 during
Transak native provider checkout transition.

## **Related issues**

Fixes:
[TRAM-3348](https://consensyssoftware.atlassian.net/browse/TRAM-3348)

## **Manual testing steps**

```gherkin
Feature: Amount persists through Transak native provider checkout transition

  Scenario: Custom amount does not revert to default during Continue loading
    Given the user is on the Buy screen with Transak Native provider
    And the default amount is $100
    When the user changes the amount to $30
    And the user taps Continue
    Then the displayed amount remains $30 during the loading transition
    And the amount does not flash back to $100

  Scenario: Default amount is preserved when no custom amount is entered
    Given the user is on the Buy screen with Transak Native provider
    And the default amount is $100
    When the user taps Continue without changing the amount
    Then the displayed amount remains $100 throughout the flow

  Scenario: Amount persists when navigating back from KYC/checkout screens
    Given the user entered $50 and proceeded through Continue
    When the user navigates back to the Buy screen
    Then the amount input shows $50 (not $100)
```

## **Screenshots/Recordings**

### **Before**

<!-- Screenshot/video showing amount reverting from $30 to $100 during
loading -->



https://github.com/user-attachments/assets/ba7fb42b-c43a-43f8-b438-0484090d7895



### **After**

<!-- Screenshot/video showing amount staying at $30 during loading
transition -->



https://github.com/user-attachments/assets/6d60c1ae-f0eb-448b-b7f3-297efbce85df



https://github.com/user-attachments/assets/099ebf69-face-4bb0-8568-80357f59b35e

<img width="523" height="877" alt="Screenshot 2026-03-20 175035"
src="https://github.com/user-attachments/assets/6bebcd4a-c04d-40c6-90d4-7e50ed683824"
/>


## **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
- [ ] 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.

## **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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Updates Transak native-provider navigation/reset logic and initial
screen state; mistakes could regress Buy/KYC routing or amount display
during transitions, but changes are localized and covered by tests.
> 
> **Overview**
> Fixes the Transak native Buy flow so the user-entered fiat amount is
preserved when the app uses `navigation.reset()` during KYC/checkout
transitions.
> 
> `BuildQuote` now supports an `amount` route param to initialize the
amount state (and to prevent region defaults from overriding it), and
`useTransakRouting` propagates this amount through all reset-based
navigation paths (KYC approved → checkout, KYC forms, additional
verification, verify identity, and KYC webview). Tests are updated/added
to assert the amount is passed through routing callbacks and used as the
initial displayed value.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
a8bdee0. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: imyugioh

app/components/UI/Ramp/Views/BuildQuote/BuildQuote.test.tsx

@@ -402,6 +402,41 @@ describe('BuildQuote', () => {
     });
   });
 
+  describe('amount param initialization', () => {
+    it('uses DEFAULT_AMOUNT (100) when no amount param is provided', () => {
+      mockUseParams.mockReturnValue({});
+
+      const { getByTestId } = renderWithProvider(<BuildQuote />, {
+        state: initialRootState,
+      });
+
+      const amountInput = getByTestId(BuildQuoteSelectors.AMOUNT_INPUT);
+      expect(amountInput.props.children).toContain('100');
+    });
+
+    it('uses amount param as initial value when provided via route params', () => {
+      mockUseParams.mockReturnValue({ amount: 30 });
+
+      const { getByTestId } = renderWithProvider(<BuildQuote />, {
+        state: initialRootState,
+      });
+
+      const amountInput = getByTestId(BuildQuoteSelectors.AMOUNT_INPUT);
+      expect(amountInput.props.children).toContain('30');
+    });
+
+    it('does not override amount with region default when amount param is provided', () => {
+      mockUseParams.mockReturnValue({ amount: 50 });
+
+      const { getByTestId } = renderWithProvider(<BuildQuote />, {
+        state: initialRootState,
+      });
+
+      const amountInput = getByTestId(BuildQuoteSelectors.AMOUNT_INPUT);
+      expect(amountInput.props.children).toContain('50');
+    });
+  });
+
   describe('navigateAfterExternalBrowser', () => {
     it('resets to BuildQuote when returnDestination is buildQuote (Android external browser path)', async () => {
       mockDeviceIsAndroid.mockReturnValue(true);
@@ -725,7 +760,7 @@ describe('BuildQuote', () => {
         '/payments/debit-credit-card',
         '100',
       );
-      expect(mockRouteAfterAuth).toHaveBeenCalledWith(MOCK_TRANSAK_QUOTE);
+      expect(mockRouteAfterAuth).toHaveBeenCalledWith(MOCK_TRANSAK_QUOTE, 100);
     });
 
     it('navigates to VerifyIdentity when user has no token', async () => {

app/components/UI/Ramp/Views/BuildQuote/BuildQuote.tsx

@@ -109,6 +109,8 @@ export interface BuildQuoteParams {
   nativeFlowError?: string;
   /** Which flow the user used to enter the Buy screen. */
   buyFlowOrigin?: BuyFlowOrigin;
+  /** Pre-fill the amount input (e.g. when restoring state after a navigation reset). */
+  amount?: number;
 }
 
 /**
@@ -148,13 +150,17 @@ function BuildQuote() {
   const { formatCurrency } = useFormatters();
   const cursorOpacity = useBlinkingCursor();
 
-  const [amount, setAmount] = useState<string>(() => String(DEFAULT_AMOUNT));
-  const [amountAsNumber, setAmountAsNumber] = useState<number>(DEFAULT_AMOUNT);
-  const [userHasEnteredAmount, setUserHasEnteredAmount] = useState(false);
+  const params = useParams<BuildQuoteParams>();
+  const initialAmount = params?.amount ?? DEFAULT_AMOUNT;
+
+  const [amount, setAmount] = useState<string>(() => String(initialAmount));
+  const [amountAsNumber, setAmountAsNumber] = useState<number>(initialAmount);
+  const [userHasEnteredAmount, setUserHasEnteredAmount] = useState(
+    params?.amount != null,
+  );
   const [keyboardIsDirty, setKeyboardIsDirty] = useState(false);
   const [isContinueLoading, setIsContinueLoading] = useState(false);
   const [rampsError, setRampsError] = useState<string | null>(null);
-  const params = useParams<BuildQuoteParams>();
 
   useEffect(() => {
     if (params?.nativeFlowError) {
@@ -573,7 +579,7 @@ function BuildQuote() {
         if (!quote) {
           throw new Error(strings('deposit.buildQuote.unexpectedError'));
         }
-        await transakRouteAfterAuth(quote);
+        await transakRouteAfterAuth(quote, amountAsNumber);
       } else {
         navigation.navigate(
           ...createV2VerifyIdentityNavDetails({

app/components/UI/Ramp/Views/NativeFlow/AdditionalVerification.test.tsx

@@ -71,6 +71,7 @@ describe('V2AdditionalVerification', () => {
 
     expect(mockNavigateToKycWebview).toHaveBeenCalledWith({
       kycUrl: 'https://kyc.example.com',
+      amount: 100,
     });
   });
 

app/components/UI/Ramp/Views/NativeFlow/AdditionalVerification.tsx

@@ -27,7 +27,7 @@ interface V2AdditionalVerificationParams {
 
 const V2AdditionalVerification = () => {
   const navigation = useNavigation();
-  const { kycUrl } = useParams<V2AdditionalVerificationParams>();
+  const { kycUrl, quote } = useParams<V2AdditionalVerificationParams>();
 
   const { styles, theme } = useStyles(styleSheet, {});
 
@@ -46,8 +46,8 @@ const V2AdditionalVerification = () => {
   }, [navigation, theme]);
 
   const handleContinuePress = useCallback(() => {
-    navigateToKycWebview({ kycUrl });
-  }, [navigateToKycWebview, kycUrl]);
+    navigateToKycWebview({ kycUrl, amount: quote?.fiatAmount });
+  }, [navigateToKycWebview, kycUrl, quote?.fiatAmount]);
 
   return (
     <ScreenLayout>