chore: Updated empty states for Activity page to use TabEmptyState (#23304)

<!--
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**
This PR updates the empty states for the Activity page to use
TabEmptyState
<!--
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: null

## **Related issues**

Fixes:
https://consensyssoftware.atlassian.net/jira/software/c/projects/MDP/boards/2972?assignee=62afb43d33a882e2be47c36f&selectedIssue=MDP-414

## **Manual testing steps**

```gherkin
Feature: Activity Empty States

  Scenario: user navigates to Activity page
    Given user does not have any transactions/activities

    When user navigates to Activity page
    Then they see the empty state consistent with the empty state on the homepage
```

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

https://github.com/user-attachments/assets/1b6eccce-7511-4fec-941a-b29922da7797

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

## **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 inline empty-state text with `TabEmptyState` across Perps,
Predict, Ramp Orders, and Transactions views, updating i18n and
tests/snapshots accordingly.
> 
> - **UI/Empty States**:
>   - Replace inline `Text` empty states with `TabEmptyState` in:
> - `PerpsTransactionsView`, `PredictTransactionsView`, `OrdersList`,
`Transactions`, `MultichainTransactionsView`, and
`UnifiedTransactionsView`.
>   - Remove obsolete styles (e.g., `emptyText`, `emptyMessage`).
> - **Localization**:
> - Update Perps empty-state copy to a single combined string in
`en.json`.
> - **Tests**:
> - Update unit tests and Jest snapshots to assert/use `TabEmptyState`
content.
> - **Misc**:
>   - Minor import cleanup in `Transactions/index.js`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5ec92b8. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: brianacnguyen

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

@@ -106,11 +106,6 @@ export const styleSheet = (params: { theme: Theme }) => {
       alignItems: 'center' as const,
       paddingVertical: 48,
     },
-    emptyText: {
-      textAlign: 'center' as const,
-      marginTop: 16,
-      color: colors.text.muted,
-    },
     fillTag: {
       flexDirection: 'row' as const,
       alignItems: 'center' as const,

app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.test.tsx

@@ -265,9 +265,10 @@ describe('PerpsTransactionsView', () => {
     });
 
     await waitFor(() => {
-      expect(component.getByText('No trades transactions yet')).toBeTruthy();
       expect(
-        component.getByText('Your trading history will appear here'),
+        component.getByText(
+          'No trades transactions yet. Your trading history will appear here',
+        ),
       ).toBeTruthy();
     });
   });
@@ -287,7 +288,11 @@ describe('PerpsTransactionsView', () => {
 
     await waitFor(() => {
       // Should show empty state when API fails
-      expect(component.getByText('No trades transactions yet')).toBeTruthy();
+      expect(
+        component.getByText(
+          'No trades transactions yet. Your trading history will appear here',
+        ),
+      ).toBeTruthy();
     });
   });
 
@@ -391,7 +396,11 @@ describe('PerpsTransactionsView', () => {
     });
 
     await waitFor(() => {
-      expect(component.getByText('No trades transactions yet')).toBeTruthy();
+      expect(
+        component.getByText(
+          'No trades transactions yet. Your trading history will appear here',
+        ),
+      ).toBeTruthy();
     });
   });
 

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

@@ -38,6 +38,7 @@ import { usePerpsMeasurement } from '../../hooks/usePerpsMeasurement';
 import { TraceName } from '../../../../../util/trace';
 import ButtonFilter from '../../../../../component-library/components-temp/ButtonFilter';
 import { ButtonSize } from '@metamask/design-system-react-native';
+import { TabEmptyState } from '../../../../../component-library/components-temp/TabEmptyState';
 
 const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
   const { styles } = useStyles(styleSheet, {});
@@ -331,14 +332,11 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
 
   const renderEmptyState = () => (
     <View style={styles.emptyContainer}>
-      <Text style={styles.emptyText}>
-        {strings('perps.transactions.empty_state.no_transactions', {
+      <TabEmptyState
+        description={strings('perps.transactions.empty_state.no_transactions', {
           type: activeFilter.toLowerCase(),
         })}
-      </Text>
-      <Text style={styles.emptyText}>
-        {strings('perps.transactions.empty_state.history_will_appear')}
-      </Text>
+      ></TabEmptyState>
     </View>
   );
 

app/components/UI/Predict/views/PredictTransactionsView/PredictTransactionsView.tsx

@@ -11,7 +11,7 @@ import Engine from '../../../../../core/Engine';
 import { PredictEventValues } from '../../constants/eventNames';
 import { TraceName } from '../../../../../util/trace';
 import { usePredictMeasurement } from '../../hooks/usePredictMeasurement';
-
+import { TabEmptyState } from '../../../../../component-library/components-temp/TabEmptyState';
 interface PredictTransactionsViewProps {
   transactions?: unknown[];
   tabLabel?: string;
@@ -254,13 +254,10 @@ const PredictTransactionsView: React.FC<PredictTransactionsViewProps> = ({
           <ActivityIndicator size="small" testID="activity-indicator" />
         </Box>
       ) : sections.length === 0 ? (
-        <Box twClassName="px-4">
-          <Text
-            variant={TextVariant.BodySm}
-            twClassName="text-alternative py-2"
-          >
-            {strings('predict.transactions.no_transactions')}
-          </Text>
+        <Box twClassName="items-center justify-center py-10">
+          <TabEmptyState
+            description={strings('predict.transactions.no_transactions')}
+          />
         </Box>
       ) : (
         // TODO: Improve loading state, pagination, consider FlashList for better performance, pull down to refresh, etc.

app/components/UI/Ramp/Aggregator/Views/OrdersList/OrdersList.styles.ts

@@ -3,9 +3,6 @@ import { Colors } from '../../../../../../util/theme/models';
 
 const createStyles = (colors: Colors) =>
   StyleSheet.create({
-    emptyMessage: {
-      textAlign: 'center',
-    },
     row: {
       borderBottomWidth: StyleSheet.hairlineWidth,
       borderColor: colors.border.muted,

app/components/UI/Ramp/Aggregator/Views/OrdersList/OrdersList.tsx

@@ -8,13 +8,8 @@ import { OrderOrderTypeEnum } from '@consensys/on-ramp-sdk/dist/API';
 import { createOrderDetailsNavDetails } from '../OrderDetails/OrderDetails';
 import { useRampNavigation } from '../../../hooks/useRampNavigation';
 import OrderListItem from '../../components/OrderListItem';
-import Row from '../../components/Row';
 import createStyles from './OrdersList.styles';
-
-import Text, {
-  TextColor,
-  TextVariant,
-} from '../../../../../../component-library/components/Texts/Text';
+import { TabEmptyState } from '../../../../../../component-library/components-temp/TabEmptyState';
 
 import {
   FIAT_ORDER_PROVIDERS,
@@ -141,23 +136,17 @@ function OrdersList() {
       renderItem={renderItem}
       keyExtractor={(item) => item.id}
       ListEmptyComponent={
-        <Row>
-          <Text
-            variant={TextVariant.HeadingMD}
-            color={TextColor.Muted}
-            style={styles.emptyMessage}
-          >
-            {currentFilter === 'ALL'
-              ? strings('fiat_on_ramp_aggregator.empty_orders_list')
-              : null}
-            {currentFilter === 'PURCHASE'
-              ? strings('fiat_on_ramp_aggregator.empty_buy_orders_list')
-              : null}
-            {currentFilter === 'SELL'
-              ? strings('fiat_on_ramp_aggregator.empty_sell_orders_list')
-              : null}
-          </Text>
-        </Row>
+        <Box twClassName="w-full items-center py-10">
+          <TabEmptyState
+            description={
+              currentFilter === 'ALL'
+                ? strings('fiat_on_ramp_aggregator.empty_orders_list')
+                : currentFilter === 'PURCHASE'
+                  ? strings('fiat_on_ramp_aggregator.empty_buy_orders_list')
+                  : strings('fiat_on_ramp_aggregator.empty_sell_orders_list')
+            }
+          />
+        </Box>
       }
     />
   );