chore(runway): cherry-pick fix: cp-7.65.0 hardened bottomsheet component to prevent duplicate onClose and goBack calls from firing (#25922)

- fix: cp-7.65.0 hardened bottomsheet component to prevent duplicate
onClose and goBack calls from firing (#25862)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
Fixes bug where duplicate mUSD conversion transactions could be created
by spam pressing the "Pay with" menu items. The proposed fix is to
harden the `BottomSheet` component to dedupe duplicate events.

Bottomsheet changes:
- Deduped navigation: `navigation.goBack()` now runs at most once per
sheet lifecycle (guards duplicate close events).
- Hardened close requests: `onCloseBottomSheet(callback)` is now
first-wins while closing (ignores subsequent close requests so the
callback can’t be overwritten).
- Single-fire post callback: the `postCallback` now runs at most once on
close (even if multiple close events fire), and is cleared after
running.
- Resets on open: on open we reset the close-state refs so the sheet can
be reused safely.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: updated bottomsheet component to dedupe events

## **Related issues**

Fixes: [MUSD-306: Duplicate mUSD transactions created when spam clicking
token in the "Pay with"
menu](https://consensyssoftware.atlassian.net/browse/MUSD-306)

## **Manual testing steps**

```gherkin
Feature: Idempotent BottomSheet close behavior

  Scenario: user closes a bottom sheet multiple times rapidly
    Given a bottom sheet is open and configured to navigate back on close

    When the user triggers multiple close actions in quick succession
    Then the app navigates back only once
    And any post-close callback runs at most once
    And logs are displayed to display this dedupe behaviour
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->
Video shows the bottomsheet calling `navigation.goBack()` twice.



https://github.com/user-attachments/assets/e56cb0f6-0e54-49c6-8bee-26ebc545e97c

### **After**

<!-- [screenshots/recordings] -->
N/A - Bottomsheet dedupes duplicate events


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

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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**
> Touches a widely used `BottomSheet` close/navigation path, so
regressions could affect modal dismissal behavior across the app, though
the changes are narrow and add guards rather than altering core flows.
> 
> **Overview**
> Prevents duplicate bottom-sheet close side effects by making
`BottomSheet` idempotent across a sheet lifecycle: `navigation.goBack()`
runs at most once, repeated `onCloseBottomSheet()` calls while closing
are ignored, and the post-close callback is guaranteed to run at most
once (then cleared), with state reset on open and logs when duplicates
are skipped.
> 
> Updates `PayWithModal` to pass a single `onClosed` handler to
`onCloseBottomSheet` so token-selection actions (mUSD conversion, perps
deposit/order, or `setPayToken`) occur only after the sheet finishes
closing, reducing risk of duplicate transaction-triggering side effects
from rapid taps.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
9c63858. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[59a8f6a](59a8f6a)

Co-authored-by: Matthew Grainger <46547583+Matt561@users.noreply.github.com>

Author: runway-github[bot]

app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx

@@ -20,6 +20,7 @@ import { useStyles } from '../../../hooks';
 
 // Internal dependencies.
 import styleSheet from './BottomSheet.styles';
+import Logger from '../../../../util/Logger';
 import {
   BottomSheetProps,
   BottomSheetRef,
@@ -47,6 +48,9 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
   ) => {
     const postCallback = useRef<BottomSheetPostCallback>();
     const bottomSheetDialogRef = useRef<BottomSheetDialogRef>(null);
+    const didNavigateBackRef = useRef(false);
+    const closeRequestedRef = useRef(false);
+    const didRunPostCallbackRef = useRef(false);
     const { bottom: screenBottomPadding } = useSafeAreaInsets();
     const { styles } = useStyles(styleSheet, {
       screenBottomPadding,
@@ -55,14 +59,34 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
     const navigation = useNavigation();
 
     const onOpenCB = useCallback(() => {
+      // Reset when the sheet is opened again.
+      didNavigateBackRef.current = false;
+      closeRequestedRef.current = false;
+      didRunPostCallbackRef.current = false;
+
       onOpen?.(!!postCallback.current);
-      postCallback.current?.();
+      const callback = postCallback.current;
+      postCallback.current = undefined;
+      callback?.();
     }, [onOpen]);
 
     const onCloseCB = useCallback(() => {
-      shouldNavigateBack && navigation.goBack();
-      onClose?.(!!postCallback.current);
-      postCallback.current?.();
+      if (shouldNavigateBack && !didNavigateBackRef.current) {
+        didNavigateBackRef.current = true;
+        navigation.goBack();
+      } else if (shouldNavigateBack && didNavigateBackRef.current) {
+        Logger.log('[BottomSheet] navigation.goBack skipped (duplicate close)');
+      }
+      const callback = postCallback.current;
+      const hasCallback = !!callback;
+
+      onClose?.(hasCallback);
+
+      if (!didRunPostCallbackRef.current && hasCallback) {
+        didRunPostCallbackRef.current = true;
+        postCallback.current = undefined;
+        callback?.();
+      }
     }, [navigation, onClose, shouldNavigateBack]);
 
     // Dismiss the sheet when Android back button is pressed.
@@ -79,10 +103,22 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
 
     useImperativeHandle(ref, () => ({
       onCloseBottomSheet: (callback) => {
+        if (closeRequestedRef.current) {
+          Logger.log(
+            '[BottomSheet] onCloseBottomSheet ignored (already closing)',
+          );
+          return;
+        }
+
+        closeRequestedRef.current = true;
         postCallback.current = callback;
         bottomSheetDialogRef.current?.onCloseDialog();
       },
       onOpenBottomSheet: (callback) => {
+        // Opening resets close state; allow new close request afterwards.
+        didNavigateBackRef.current = false;
+        closeRequestedRef.current = false;
+        didRunPostCallbackRef.current = false;
         postCallback.current = callback;
         bottomSheetDialogRef.current?.onOpenDialog();
       },

app/components/Views/confirmations/components/modals/pay-with-modal/pay-with-modal.tsx

@@ -42,28 +42,30 @@ export function PayWithModal() {
 
   const handleTokenSelect = useCallback(
     (token: AssetType) => {
-      if (
-        hasTransactionType(transactionMeta, [TransactionType.musdConversion])
-      ) {
-        close(() => onMusdPaymentTokenChange(token));
-        return;
-      }
+      const onClosed = () => {
+        if (
+          hasTransactionType(transactionMeta, [TransactionType.musdConversion])
+        ) {
+          onMusdPaymentTokenChange(token);
+          return;
+        }
 
-      if (
-        hasTransactionType(transactionMeta, [
-          TransactionType.perpsDepositAndOrder,
-        ])
-      ) {
-        close(() => onPerpsPaymentTokenChange(token));
-        return;
-      }
+        if (
+          hasTransactionType(transactionMeta, [
+            TransactionType.perpsDepositAndOrder,
+          ])
+        ) {
+          onPerpsPaymentTokenChange(token);
+          return;
+        }
 
-      close(() => {
         setPayToken({
           address: token.address as Hex,
           chainId: token.chainId as Hex,
         });
-      });
+      };
+
+      close(onClosed);
     },
     [
       close,