fix: MUSD-151: Refactored useNavbar to allow render overrides (MetaMask#24171)

<!--
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**
### Bug
This PR fixes an app crash caused by the mUSD conversion flow.. When
navigating away from the conversion screen, we didn't reject the
transaction (`onReject`) which caused subsequent redirects to the
redesigned confirmations to render the conversion screen and crash due
to missing route params.

### Fix
The mUSD conversion flow now extends `useNavbar` to ensure transactions
are rejected when navigating away (e.g. via back button).

### Changes
- Add render overrides options to `useNavbar` to allow experiences to
customize their confirmations navbars while still inheriting behaviour
(e.g. `onReject` called when clicking back button)
<!--
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: fixed mUSD conversion flow not rejecting transactions
when navigating away

## **Related issues**

Fixes: [MUSD-151: Stale mUSD conversion transaction not cleared causing
app crash](https://consensyssoftware.atlassian.net/browse/MUSD-151)

## **Manual testing steps**

```gherkin
Feature: mUSD Conversion Navbar

  Scenario: user navigates back from mUSD conversion confirmation
    Given user is on the mUSD conversion confirmation screen

    When user taps the back button
    Then the pending mUSD conversion transaction is rejected
    And user returns to the previous screen
```

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/d178ecdb-e703-44eb-8402-bdbc1daa6be6

### **After**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/a481fc63-50e5-4f38-a103-7086f3df742f

## **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]
> Introduces navbar render overrides and migrates mUSD conversion to a
new hook using them, removes old navbar options, updates routes, and
expands tests.
> 
> - **Confirmations UI**:
> - **Navbar overrides**: Extend `getNavbar` to accept `overrides`
(`headerTitle`, `headerLeft(onBackPress)`, `headerTitleAlign`,
`headerStyle` merged) with default center alignment.
> - **Hook update**: `useNavbar(title, addBackButton, overrides)` now
forwards overrides;
`getEmptyNavHeader`/`useEmptyNavHeaderForConfirmations` aligned; tests
added for overrides and defaults.
> - **mUSD Conversion**:
> - **New hook**: Add `useMusdConversionNavbar(chainId)` rendering
`MUSD` icon with network `Badge` and a back `ButtonIcon`; passes
`chainId` to `getNetworkImageSource`.
> - **Integration**: `MusdConversionInfo` calls
`useMusdConversionNavbar(outputChainId)` and retains `useAddToken`;
tests added.
>   - **Cleanup**: Remove `Navbars/musdNavbarOptions.tsx` and its tests.
> - **Navigation**:
> - Use `useEmptyNavHeaderForConfirmations` for
`Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
9eca8af. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Matt561

app/components/UI/Earn/Navbars/musdNavbarOptions.test.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { renderHook } from '@testing-library/react-hooks';
+import { CHAIN_IDS } from '@metamask/transaction-controller';
+import { useMusdConversionNavbar } from './useMusdConversionNavbar';
+import useNavbar from '../../../Views/confirmations/hooks/ui/useNavbar';
+import { strings } from '../../../../../locales/i18n';
+import { NavbarOverrides } from '../../../Views/confirmations/components/UI/navbar/navbar';
+import { getNetworkImageSource } from '../../../../util/networks';
+
+jest.mock('../../../../../locales/i18n', () => ({
+  strings: jest.fn((key: string) => key),
+}));
+
+jest.mock('../../../Views/confirmations/hooks/ui/useNavbar');
+
+jest.mock('../../../../util/networks', () => ({
+  getNetworkImageSource: jest.fn(),
+}));
+
+const mockUseNavbar = useNavbar as jest.MockedFunction<typeof useNavbar>;
+const mockStrings = strings as jest.MockedFunction<typeof strings>;
+const mockGetNetworkImageSource = getNetworkImageSource as jest.MockedFunction<
+  typeof getNetworkImageSource
+>;
+
+describe('useMusdConversionNavbar', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls useNavbar with correct title and addBackButton parameters', () => {
+    renderHook(() => useMusdConversionNavbar(CHAIN_IDS.MAINNET));
+
+    expect(mockUseNavbar).toHaveBeenCalledTimes(1);
+    expect(mockStrings).toHaveBeenCalledWith(
+      'earn.musd_conversion.convert_to_musd',
+    );
+    expect(mockUseNavbar).toHaveBeenCalledWith(
+      'earn.musd_conversion.convert_to_musd',
+      true,
+      expect.objectContaining({
+        headerTitle: expect.any(Function),
+        headerLeft: expect.any(Function),
+      }),
+    );
+  });
+
+  it('provides headerTitle override that renders mUSD icon with network badge', () => {
+    let capturedOverrides: NavbarOverrides | undefined;
+    mockUseNavbar.mockImplementation((_title, _addBackButton, overrides) => {
+      capturedOverrides = overrides;
+    });
+
+    renderHook(() => useMusdConversionNavbar(CHAIN_IDS.MAINNET));
+
+    expect(capturedOverrides?.headerTitle).toBeDefined();
+
+    const HeaderTitle = capturedOverrides?.headerTitle as React.FC;
+    const { getByTestId, getByText } = render(<HeaderTitle />);
+
+    expect(getByTestId('musd-token-icon')).toBeOnTheScreen();
+    expect(getByTestId('badge-wrapper-badge')).toBeOnTheScreen();
+    expect(getByTestId('badgenetwork')).toBeOnTheScreen();
+    expect(getByText('earn.musd_conversion.convert_to_musd')).toBeOnTheScreen();
+  });
+
+  it('provides headerLeft override that renders back button', () => {
+    let capturedOverrides: NavbarOverrides | undefined;
+    mockUseNavbar.mockImplementation((_title, _addBackButton, overrides) => {
+      capturedOverrides = overrides;
+    });
+
+    renderHook(() => useMusdConversionNavbar(CHAIN_IDS.MAINNET));
+
+    expect(capturedOverrides?.headerLeft).toBeDefined();
+
+    const mockOnBackPress = jest.fn();
+    const headerLeftFn = capturedOverrides?.headerLeft as (
+      onBackPress: () => void,
+    ) => React.ReactNode;
+    const HeaderLeft = () => <>{headerLeftFn(mockOnBackPress)}</>;
+
+    const { getByTestId } = render(<HeaderLeft />);
+
+    const backButton = getByTestId('button-icon');
+    expect(backButton).toBeOnTheScreen();
+  });
+
+  it('calls provided onBackPress when back button is pressed', () => {
+    let capturedOverrides: NavbarOverrides | undefined;
+    mockUseNavbar.mockImplementation((_title, _addBackButton, overrides) => {
+      capturedOverrides = overrides;
+    });
+
+    renderHook(() => useMusdConversionNavbar(CHAIN_IDS.MAINNET));
+
+    const mockOnBackPress = jest.fn();
+    const headerLeftFn = capturedOverrides?.headerLeft as (
+      onBackPress: () => void,
+    ) => React.ReactNode;
+    const HeaderLeft = () => <>{headerLeftFn(mockOnBackPress)}</>;
+
+    const { getByTestId } = render(<HeaderLeft />);
+
+    const backButton = getByTestId('button-icon');
+    fireEvent.press(backButton);
+
+    expect(mockOnBackPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('passes Linea chainId to getNetworkImageSource', () => {
+    renderHook(() => useMusdConversionNavbar(CHAIN_IDS.LINEA_MAINNET));
+
+    expect(mockGetNetworkImageSource).toHaveBeenCalledWith({
+      chainId: CHAIN_IDS.LINEA_MAINNET,
+    });
+  });
+
+  it('passes Mainnet chainId to getNetworkImageSource', () => {
+    renderHook(() => useMusdConversionNavbar(CHAIN_IDS.MAINNET));
+
+    expect(mockGetNetworkImageSource).toHaveBeenCalledWith({
+      chainId: CHAIN_IDS.MAINNET,
+    });
+  });
+});