[pull] main from MetaMask:main

app/components/Nav/Main/MainNavigator.js

@@ -102,6 +102,9 @@ import {
   PerpsModalStack,
   selectPerpsEnabledFlag,
 } from '../../UI/Perps';
+import PerpsPositionTransactionView from '../../UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView';
+import PerpsOrderTransactionView from '../../UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView';
+import PerpsFundingTransactionView from '../../UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView';
 import TurnOnBackupAndSync from '../../Views/Identity/TurnOnBackupAndSync/TurnOnBackupAndSync';
 import DeFiProtocolPositionDetails from '../../UI/DeFiPositions/DeFiProtocolPositionDetails';
 import UnmountOnBlur from '../../Views/UnmountOnBlur';
@@ -896,6 +899,34 @@ const MainNavigator = () => {
           />
         </>
       )}
+      {isPerpsEnabled && (
+        <>
+          <Stack.Screen
+            name={Routes.PERPS.POSITION_TRANSACTION}
+            component={PerpsPositionTransactionView}
+            options={{
+              title: 'Position Transaction',
+              headerShown: true,
+            }}
+          />
+          <Stack.Screen
+            name={Routes.PERPS.ORDER_TRANSACTION}
+            component={PerpsOrderTransactionView}
+            options={{
+              title: 'Order Transaction',
+              headerShown: true,
+            }}
+          />
+          <Stack.Screen
+            name={Routes.PERPS.FUNDING_TRANSACTION}
+            component={PerpsFundingTransactionView}
+            options={{
+              title: 'Funding Transaction',
+              headerShown: true,
+            }}
+          />
+        </>
+      )}
       <Stack.Screen
         name="SetPasswordFlow"
         component={SetPasswordFlow}

app/components/UI/Navbar/index.js

@@ -1810,6 +1810,39 @@ export function getBridgeTransactionDetailsNavbar(navigation) {
   };
 }
 
+export function getPerpsTransactionsDetailsNavbar(navigation, title) {
+  const innerStyles = StyleSheet.create({
+    perpsTransactionsBackButton: {
+      marginTop: 0,
+    },
+    perpsTransactionsTitle: {
+      fontWeight: '700',
+    },
+  });
+  const leftAction = () => navigation.pop();
+
+  return {
+    headerTitle: () => (
+      <NavbarTitle
+        style={innerStyles.perpsTransactionsTitle}
+        variant={TextVariant.HeadingMD}
+        title={title}
+        disableNetwork
+        showSelectedNetwork={false}
+        translate={false}
+      />
+    ),
+    headerLeft: () => (
+      <TouchableOpacity
+        onPress={leftAction}
+        style={[styles.backButton, innerStyles.perpsTransactionsBackButton]}
+      >
+        <Icon name={IconName.Arrow2Left} />
+      </TouchableOpacity>
+    ),
+  };
+}
+
 /**
  * Function that returns navigation options for deposit flow screens
  *

app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.styles.ts

@@ -0,0 +1,24 @@
+import { createTransactionDetailStyles } from '../../utils/transactionDetailStyles';
+import { Theme } from '../../../../../util/theme/models';
+
+export const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const baseStyles = createTransactionDetailStyles(theme);
+
+  // Override content padding for funding view
+  return {
+    ...baseStyles,
+    content: {
+      ...baseStyles.content,
+      paddingTop: 8, // Different padding for funding view
+    },
+    detailLabel: {
+      ...baseStyles.detailLabel,
+      fontSize: 16, // Larger font for funding view
+    },
+    detailValue: {
+      ...baseStyles.detailValue,
+      fontSize: 16, // Larger font for funding view
+    },
+  };
+};