feat: Perps list display (#17078)

## **Description**

Based of of initial draft here:
#17070 and rebased to
final feature branch for perps.

This adds a view to explore Perps Markets in a list form, including a
search bar to filter results by.

## **Changelog**

CHANGELOG entry: Add Perpetual Markets List

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/20f4ca69-6116-49a4-930c-cd05a1e1d214

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

---------

Co-authored-by: Arthur Breton <arthur.breton@consensys.net>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Matthew Grainger <matthew.grainger@consensys.net>
Co-authored-by: Matthew Grainger <46547583+Matt561@users.noreply.github.com>
Co-authored-by: metamaskbot <metamaskbot@users.noreply.github.com>

Author: 5 people

app/components/UI/Perps/Views/PerpsDepositAmountView/PerpsDepositAmountView.tsx

@@ -442,7 +442,7 @@ const PerpsDepositAmountView: React.FC<PerpsDepositAmountViewProps> = () => {
       const depositResult = await deposit(depositParams);
 
       if (depositResult.success && depositResult.txHash) {
-        navigation.navigate('PerpsDepositProcessing', {
+        navigation.navigate(Routes.PERPS.DEPOSIT_PROCESSING, {
           amount: sourceAmount,
           fromToken: sourceToken.symbol,
           transactionHash: depositResult.txHash,

app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.styles.ts

@@ -0,0 +1,151 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const { colors } = theme;
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      marginVertical: 16,
+    },
+    headerSpacer: {
+      width: 24,
+    },
+    headerTitle: {
+      flex: 1,
+      textAlign: 'center',
+    },
+    closeButton: {
+      padding: 4,
+    },
+    listContainer: {
+      flex: 1,
+    },
+    listHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      marginBottom: 8,
+      marginTop: 30,
+    },
+    listHeaderLeft: {
+      flex: 1,
+    },
+    listHeaderRight: {
+      flex: 1,
+      alignItems: 'flex-end',
+    },
+    errorContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: 24,
+    },
+    errorText: {
+      textAlign: 'center',
+      marginBottom: 16,
+    },
+    flashListContent: {
+      paddingBottom: 16,
+    },
+    skeletonContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+      minHeight: 88,
+    },
+    skeletonLeftSection: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+    },
+    skeletonAvatar: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      marginRight: 16,
+    },
+    skeletonTokenInfo: {
+      flex: 1,
+    },
+    skeletonTokenHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 6,
+    },
+    skeletonTokenSymbol: {
+      width: 60,
+      height: 16,
+      borderRadius: 4,
+      marginRight: 8,
+    },
+    skeletonLeverage: {
+      width: 30,
+      height: 14,
+      borderRadius: 4,
+    },
+    skeletonVolume: {
+      width: 80,
+      height: 12,
+      borderRadius: 4,
+    },
+    skeletonRightSection: {
+      alignItems: 'flex-end',
+      flex: 1,
+    },
+    skeletonPrice: {
+      width: 90,
+      height: 16,
+      borderRadius: 4,
+      marginBottom: 6,
+    },
+    skeletonChange: {
+      width: 70,
+      height: 14,
+      borderRadius: 4,
+    },
+    animatedListContainer: {
+      flex: 1,
+      paddingHorizontal: 16,
+    },
+    searchContainer: {
+      paddingHorizontal: 16,
+    },
+    searchInputContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.muted,
+      borderRadius: 12,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+    },
+    searchIcon: {
+      marginRight: 10,
+      color: colors.icon.muted,
+    },
+    searchInput: {
+      flex: 1,
+      fontSize: 16,
+      color: colors.text.default,
+    },
+    clearButton: {
+      padding: 4,
+      marginLeft: 8,
+    },
+  });
+};
+
+export default styleSheet;