refactor: replace remove token ActionSheet with MMDS BottomSheet (MetaMask#24112)

## **Description**

The ActionSheet is buggy on Android (a new layout shift has caused
Android to freeze when the ActionSheet is trying to be visible).

Instead we have replaced it with a more reliable MMDS BottomSheet, which
allows us to control the buttons and other fields with our Design System
components.

## **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: refactor: replace remove token ActionSheet with MMDS
BottomSheet

## **Related issues**

Fixes: MetaMask#23605,
https://consensyssoftware.atlassian.net/browse/ASSETS-1961

## **Manual testing steps**

See issue:
1. Long press non-native tokens
2. See bottom sheet

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

https://www.loom.com/share/8163f10e116646e0b2097aae3a085f0f

## **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]
> Replaces the token removal ActionSheet with a new MMDS BottomSheet,
updates related state/UX, adds targeted tests, and tweaks test IDs and
i18n copy.
> 
> - **UI (Tokens)**:
> - **BottomSheet replacement**: Introduces
`TokenList/RemoveTokenBottomSheet` and refactors `Tokens` to use it
instead of `ActionSheet` (adds `removeTokenState`, `showRemoveMenu`, and
close handlers).
> - **Skeleton**: Adds `testID="token-list-skeleton"` in
`TokenListSkeleton`.
> - **Empty State**: `TokensEmptyState` now sets
`testID="tokens-empty-state"` and passes through props.
> - **Tests**:
> - Overhauls `app/components/UI/Tokens/index.test.tsx` to mock
subcomponents and cover: container render, loading skeleton, empty
state, token list, refresh action, add-token navigation, and EVM/non‑EVM
removal via BottomSheet.
>   - Updates `TokensEmptyState.test.tsx` to assert new `testID`.
> - **i18n**:
>   - Changes `wallet.remove_token_title` to "Hide token?".
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d30881c. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: Prithpal-Sooriya

app/components/UI/Tokens/TokenList/RemoveTokenBottomSheet.tsx

@@ -0,0 +1,81 @@
+import {
+  Box,
+  Button,
+  ButtonVariant,
+  Text,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+import React, { useCallback, useRef } from 'react';
+import { Modal, View } from 'react-native';
+import { strings } from '../../../../../locales/i18n';
+import BottomSheet, {
+  BottomSheetRef,
+} from '../../../../component-library/components/BottomSheets/BottomSheet';
+import BottomSheetHeader from '../../../../component-library/components/BottomSheets/BottomSheetHeader';
+
+interface RemoveTokenBottomSheetProps {
+  isVisible: boolean;
+  onClose: () => void;
+  onRemove: () => void;
+}
+
+const RemoveTokenBottomSheet: React.FC<RemoveTokenBottomSheetProps> = ({
+  isVisible,
+  onClose,
+  onRemove,
+}) => {
+  const sheetRef = useRef<BottomSheetRef>(null);
+
+  const handleSheetClose = useCallback(() => {
+    sheetRef.current?.onCloseBottomSheet();
+  }, []);
+
+  const handleRemove = useCallback(() => {
+    sheetRef.current?.onCloseBottomSheet();
+    onRemove();
+  }, [onRemove]);
+
+  if (!isVisible) return null;
+
+  // Either we use a BottomSheet but need to figure out how to lift this up,
+  // Or we use the Modal approach, but requires some heavy styling
+  return (
+    // Render View - Modal to place bottom sheet on top of stack
+    <View testID="remove-token-bottom-sheet">
+      <Modal visible transparent animationType="none" statusBarTranslucent>
+        {/* Bottom Sheet */}
+        <BottomSheet
+          shouldNavigateBack={false}
+          ref={sheetRef}
+          onClose={onClose}
+        >
+          <BottomSheetHeader onClose={handleSheetClose}>
+            <Text variant={TextVariant.HeadingMd}>
+              {strings('wallet.remove_token_title')}
+            </Text>
+          </BottomSheetHeader>
+
+          <Box twClassName="pt-4 mx-4 flex gap-4">
+            <Button
+              onPress={handleRemove}
+              isFullWidth
+              isDanger
+              testID="remove-token-bottom-sheet-remove-button"
+            >
+              {strings('wallet.remove')}
+            </Button>
+            <Button
+              onPress={handleSheetClose}
+              variant={ButtonVariant.Primary}
+              isFullWidth
+            >
+              {strings('wallet.cancel')}
+            </Button>
+          </Box>
+        </BottomSheet>
+      </Modal>
+    </View>
+  );
+};
+
+export default RemoveTokenBottomSheet;

app/components/UI/Tokens/TokenList/TokenListSkeleton/TokenListSkeleton.tsx

@@ -28,7 +28,7 @@ const TokenListSkeleton = () => {
   const styles = createStyles(colors);
 
   return (
-    <View style={styles.wrapperSkeleton}>
+    <View style={styles.wrapperSkeleton} testID="token-list-skeleton">
       <SkeletonPlaceholder
         backgroundColor={colors.background.section}
         highlightColor={colors.background.subsection}