diff --git a/app/components/Nav/Main/MainNavigator.js b/app/components/Nav/Main/MainNavigator.js
index d979dd1ce8b..2597a478fbf 100644
--- a/app/components/Nav/Main/MainNavigator.js
+++ b/app/components/Nav/Main/MainNavigator.js
@@ -14,13 +14,11 @@ import SecuritySettings from '../../Views/Settings/SecuritySettings';
 import ExperimentalSettings from '../../Views/Settings/ExperimentalSettings';
 import NetworksSettings from '../../Views/Settings/NetworksSettings';
 import NotificationsSettings from '../../Views/Settings/NotificationsSettings';
-import NotificationsDetails from '../../Views/Notifications/Details';
 import OptIn from '../../Views/Notifications/OptIn';
 import AppInformation from '../../Views/Settings/AppInformation';
 import Contacts from '../../Views/Settings/Contacts';
 import Wallet from '../../Views/Wallet';
 import Asset from '../../Views/Asset';
-import NotificationsView from '../../Views/Notifications';
 import AssetDetails from '../../Views/AssetDetails';
 import AddAsset from '../../Views/AddAsset';
 import Collectible from '../../Views/Collectible';
@@ -600,22 +598,11 @@ const PaymentRequestView = () => (
 /* eslint-disable react/prop-types */
 const NotificationsModeView = (props) => (
   <Stack.Navigator>
-    <Stack.Screen
-      name={Routes.NOTIFICATIONS.VIEW}
-      component={NotificationsView}
-      options={NotificationsView.navigationOptions}
-    />
     <Stack.Screen
       name={Routes.SETTINGS.NOTIFICATIONS}
       component={NotificationsSettings}
       options={NotificationsSettings.navigationOptions}
     />
-    <Stack.Screen
-      name={Routes.NOTIFICATIONS.DETAILS}
-      component={NotificationsDetails}
-      options={NotificationsDetails.navigationOptions}
-      initialParams={{ notification: props.route.params?.notification }}
-    />
     <Stack.Screen
       mode={'modal'}
       name="NotificationsOptIn"
diff --git a/app/components/UI/Notification/List/__snapshots__/index.test.tsx.snap b/app/components/UI/Notification/List/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 0e82c36eca5..00000000000
--- a/app/components/UI/Notification/List/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationsList should render correctly 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#ffffff",
-      "flex": 1,
-    }
-  }
->
-  <View
-    style={
-      {
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-        "zIndex": 999,
-      }
-    }
-  >
-    <ActivityIndicator
-      color="#0376c9"
-      size="large"
-    />
-  </View>
-</View>
-`;
diff --git a/app/components/UI/Notification/List/index.test.tsx b/app/components/UI/Notification/List/index.test.tsx
deleted file mode 100644
index 76dbc482957..00000000000
--- a/app/components/UI/Notification/List/index.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import NotificationsList from './';
-import renderWithProvider from '../../../../util/test/renderWithProvider';
-import MOCK_NOTIFICATIONS from '../__mocks__/mock_notifications';
-import {
-  FeatureAnnouncementRawNotification,
-  HalRawNotification,
-} from '../../../../util/notifications';
-const navigationMock = {
-  navigate: jest.fn(),
-};
-describe('NotificationsList', () => {
-  it('should render correctly', () => {
-    const { toJSON } = renderWithProvider(
-      <NotificationsList
-        navigation={navigationMock}
-        allNotifications={MOCK_NOTIFICATIONS}
-        walletNotifications={[MOCK_NOTIFICATIONS[1] as HalRawNotification]}
-        annoucementsNotifications={[
-          MOCK_NOTIFICATIONS[0] as FeatureAnnouncementRawNotification,
-        ]}
-        loading
-      />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
diff --git a/app/components/UI/Notification/List/index.tsx b/app/components/UI/Notification/List/index.tsx
deleted file mode 100644
index dd5676ad02c..00000000000
--- a/app/components/UI/Notification/List/index.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { ActivityIndicator, FlatList, View } from 'react-native';
-import ScrollableTabView, {
-  DefaultTabBar,
-} from 'react-native-scrollable-tab-view';
-import { strings } from '../../../../../locales/i18n';
-import { MetaMetricsEvents } from '../../../../core/Analytics';
-
-import { useTheme } from '../../../../util/theme';
-import { createStyles } from './styles';
-import { useMetrics } from '../../../hooks/useMetrics';
-import Empty from '../Empty';
-import { NotificationRow } from '../Row';
-import {
-  FeatureAnnouncementRawNotification,
-  HalRawNotification,
-  Notification,
-  getRowDetails,
-} from '../../../../util/notifications';
-import { NotificationsViewSelectorsIDs } from '../../../../../e2e/selectors/NotificationsView.selectors';
-
-interface NotificationsList {
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  navigation: any;
-  allNotifications: Notification[];
-  walletNotifications: HalRawNotification[];
-  annoucementsNotifications: FeatureAnnouncementRawNotification[];
-  loading: boolean;
-}
-
-const Notifications = ({
-  navigation,
-  allNotifications,
-  walletNotifications,
-  annoucementsNotifications,
-  loading,
-}: NotificationsList) => {
-  const theme = useTheme();
-  const { colors } = theme;
-  const styles = createStyles(theme);
-  const { trackEvent } = useMetrics();
-
-  const onPress = useCallback(
-    (item) => {
-      //TODO: details will be implemented on a separete PR
-      navigation.navigate('NotificationsDetails', { notification: item });
-    },
-    [navigation],
-  );
-
-  const renderTabBar = useCallback(
-    (props) => (
-      <View style={styles.base}>
-        <DefaultTabBar
-          underlineStyle={styles.tabUnderlineStyle}
-          activeTextColor={colors.primary.default}
-          inactiveTextColor={colors.text.default}
-          backgroundColor={colors.background.default}
-          tabStyle={styles.tabStyle}
-          textStyle={styles.textStyle}
-          tabPadding={12}
-          style={styles.tabBar}
-          {...props}
-        />
-      </View>
-    ),
-    [styles, colors],
-  );
-
-  const onChangeTab = useCallback(
-    (obj) => {
-      switch (obj.ref.props.tabLabel) {
-        case strings('notifications.all'):
-          trackEvent(MetaMetricsEvents.ALL_NOTIFICATIONS);
-          break;
-        case strings('notifications.wallet'):
-          trackEvent(MetaMetricsEvents.WALLET_NOTIFICATIONS);
-          break;
-        case strings('notifications.web3'):
-          trackEvent(MetaMetricsEvents.ANNOUCEMENTS_NOTIFICATIONS);
-          break;
-        default:
-          break;
-      }
-    },
-    [trackEvent],
-  );
-
-  const combinedLists = useMemo(
-    () => [allNotifications, walletNotifications, annoucementsNotifications],
-    [allNotifications, walletNotifications, annoucementsNotifications],
-  );
-
-  const renderNotificationRow = useCallback(
-    (notification) => {
-      const hasActions =
-        !!notification.data?.link || !!notification.data?.action;
-      const { title, description, badgeIcon, createdAt, imageUrl, value } =
-        getRowDetails(notification)?.row || {};
-      return (
-        <NotificationRow.Root
-          handleOnPress={() => onPress(notification)}
-          styles={styles}
-        >
-          <NotificationRow.Icon
-            notificationType={notification.type}
-            badgeIcon={badgeIcon}
-            imageUrl={imageUrl}
-            styles={styles}
-          />
-          <NotificationRow.Content
-            title={title}
-            description={description}
-            createdAt={createdAt}
-            value={value}
-            styles={styles}
-          />
-          {hasActions && (
-            <NotificationRow.Actions
-              link={notification.data.link}
-              action={notification.data.action}
-              styles={styles}
-            />
-          )}
-        </NotificationRow.Root>
-      );
-    },
-    [onPress, styles],
-  );
-
-  const renderList = useCallback(
-    (list, idx) => (
-      <FlatList
-        // This has been ts ignored due the need of extend this component to support injected tabLabel prop.
-        // eslint-disable-next-line
-        // @ts-ignore
-        tabLabel={strings(`notifications.list.${idx.toString()}`)}
-        keyExtractor={(_, index) => index.toString()}
-        key={combinedLists.indexOf(list)}
-        data={list}
-        ListEmptyComponent={
-          <Empty
-            testID={NotificationsViewSelectorsIDs.NO_NOTIFICATIONS_CONTAINER}
-          />
-        }
-        contentContainerStyle={styles.list}
-        renderItem={({ item }) => renderNotificationRow(item)}
-        initialNumToRender={10}
-        maxToRenderPerBatch={2}
-        onEndReachedThreshold={0.5}
-      />
-    ),
-    [combinedLists, renderNotificationRow, styles.list],
-  );
-
-  return (
-    <View style={styles.container}>
-      {loading ? (
-        <View style={styles.loaderContainer}>
-          <ActivityIndicator color={colors.primary.default} size="large" />
-        </View>
-      ) : (
-        <ScrollableTabView
-          renderTabBar={renderTabBar}
-          onChangeTab={onChangeTab}
-        >
-          {combinedLists.map((list, idx) => renderList(list, idx))}
-        </ScrollableTabView>
-      )}
-    </View>
-  );
-};
-
-export default Notifications;
diff --git a/app/components/UI/Notification/List/styles.ts b/app/components/UI/Notification/List/styles.ts
deleted file mode 100644
index 672c5acedad..00000000000
--- a/app/components/UI/Notification/List/styles.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { StyleSheet, TextStyle } from 'react-native';
-import type { Theme } from '@metamask/design-tokens';
-
-export const createStyles = ({ colors, typography }: Theme) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: colors.background.default,
-    },
-    wrapper: {
-      flex: 1,
-      paddingHorizontal: 16,
-      paddingVertical: 10,
-      justifyContent: 'center',
-      borderRadius: 10,
-    },
-    loaderContainer: {
-      position: 'absolute',
-      zIndex: 999,
-      width: '100%',
-      height: '100%',
-    },
-    base: {
-      paddingHorizontal: 16,
-    },
-    tabUnderlineStyle: {
-      height: 2,
-      backgroundColor: colors.primary.default,
-    },
-    tabStyle: {
-      paddingBottom: 0,
-      paddingVertical: 8,
-    },
-    tabBar: {
-      borderColor: colors.background.default,
-    },
-    textStyle: {
-      ...(typography.sBodyMD as TextStyle),
-      fontWeight: '500',
-    },
-    loader: {
-      backgroundColor: colors.background.default,
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    TabWrapper: {
-      backgroundColor: colors.background.default,
-      flex: 1,
-    },
-    list: { flexGrow: 1 },
-    fox: {
-      width: 20,
-      height: 20,
-    },
-    badgeWrapper: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      alignSelf: 'flex-start',
-      position: 'absolute',
-      top: '10%',
-    },
-    assetLogo: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      overflow: 'hidden',
-      borderWidth: 0.5,
-      borderColor: colors.background.alternative,
-    },
-    assetPlaceholder: {
-      backgroundColor: colors.background.alternative,
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      borderWidth: 0.5,
-      borderColor: colors.background.alternative,
-    },
-    nftLogo: {
-      width: 32,
-      height: 32,
-      borderRadius: 8,
-      overflow: 'hidden',
-      borderWidth: 0.5,
-      borderColor: colors.background.alternative,
-    },
-    nftPlaceholder: {
-      backgroundColor: colors.background.alternative,
-      width: 32,
-      height: 32,
-      borderRadius: 8,
-      borderWidth: 0.5,
-      borderColor: colors.background.alternative,
-    },
-    rowContainer: { flex: 1, marginLeft: 42, alignItem: 'center' },
-    rowInsider: {
-      flex: 1,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-    },
-    ethLogo: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-    },
-    foxWrapper: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      backgroundColor: colors.background.alternative,
-      alignItems: 'center',
-      justifyContent: 'center',
-      alignSelf: 'flex-start',
-      position: 'absolute',
-      top: '25%',
-    },
-    textBox: {
-      flexShrink: 1,
-      maxWidth: '85%',
-    },
-    button: {
-      marginTop: 16,
-      width: '100%',
-      alignSelf: 'center',
-    },
-    trashIconContainer: {
-      position: 'absolute',
-      paddingHorizontal: 24,
-      flex: 1,
-      flexDirection: 'row',
-      backgroundColor: colors.background.hover,
-      justifyContent: 'flex-end',
-      alignItems: 'center',
-      overflow: 'hidden',
-      height: '100%',
-      right: 0,
-      left: 0,
-      zIndex: -1,
-    },
-  });
diff --git a/app/components/UI/Notification/Row/Actions.test.tsx b/app/components/UI/Notification/Row/Actions.test.tsx
deleted file mode 100644
index 596523d7cdd..00000000000
--- a/app/components/UI/Notification/Row/Actions.test.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import { Linking } from 'react-native';
-import { fireEvent } from '@testing-library/react-native';
-
-import renderWithProvider from '../../../../util/test/renderWithProvider';
-
-import NotificationActions from './Actions';
-import { ACTIONS, PREFIXES } from '../../../../constants/deeplinks';
-import { NOTIFICATION_TEST_ID_TYPES } from './constants';
-
-Linking.openURL = jest.fn(() => Promise.resolve('opened https://metamask.io!'));
-
-describe('NotificationActions', () => {
-  const styles = {
-    button: {},
-  };
-  const action = {
-    actionText: 'Send now!',
-    actionUrl: PREFIXES[ACTIONS.SEND],
-    isExternal: false,
-  };
-  const link = {
-    linkText: 'Learn more',
-    linkUrl: 'https://metamask.io',
-    isExternal: true,
-  };
-
-  it('matches snapshot', () => {
-    const { toJSON } = renderWithProvider(
-      <NotificationActions action={action} link={link} styles={styles} />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('matches snapshot with LINK only', () => {
-    const { toJSON } = renderWithProvider(
-      <NotificationActions link={link} styles={styles} />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders link title', () => {
-    const { getByText } = renderWithProvider(
-      <NotificationActions link={link} styles={styles} />,
-    );
-
-    expect(getByText('Learn more')).toBeTruthy();
-  });
-
-  it('calls Linking.openURL when link CTA is clicked', async () => {
-    const { getByTestId } = renderWithProvider(
-      <NotificationActions link={link} styles={styles} />,
-    );
-
-    fireEvent.press(
-      getByTestId(NOTIFICATION_TEST_ID_TYPES.NOTIFICATION_ACTION_BUTTON),
-    );
-    expect(Linking.openURL).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/app/components/UI/Notification/Row/Actions.tsx b/app/components/UI/Notification/Row/Actions.tsx
deleted file mode 100644
index fa286dcdb5f..00000000000
--- a/app/components/UI/Notification/Row/Actions.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { Linking } from 'react-native';
-import Button, {
-  ButtonVariants,
-} from '../../../../component-library/components/Buttons/Button';
-import { IconName } from '../../../../component-library/components/Icons/Icon';
-import { NOTIFICATION_TEST_ID_TYPES } from './constants';
-
-interface NotificationActionsProps {
-  link?: {
-    linkText: string;
-    linkUrl: string;
-    isExternal: boolean;
-  };
-  action?: {
-    actionText: string;
-    actionUrl: string;
-    isExternal: boolean;
-  };
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  styles: any;
-}
-
-function NotificationActions({
-  action,
-  link,
-  styles,
-}: NotificationActionsProps) {
-  function handleCTAPress() {
-    if (link?.linkUrl) {
-      return Linking.openURL(link.linkUrl);
-    }
-  }
-
-  return (
-    <Button
-      testID={NOTIFICATION_TEST_ID_TYPES.NOTIFICATION_ACTION_BUTTON}
-      variant={ButtonVariants.Secondary}
-      label={link?.linkText || action?.actionText}
-      onPress={handleCTAPress}
-      style={styles.button}
-      endIconName={IconName.Arrow2Upright}
-    />
-  );
-}
-
-export default NotificationActions;
diff --git a/app/components/UI/Notification/Row/Content.test.tsx b/app/components/UI/Notification/Row/Content.test.tsx
deleted file mode 100644
index f0e86d4d6ea..00000000000
--- a/app/components/UI/Notification/Row/Content.test.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import renderWithProvider from '../../../../util/test/renderWithProvider';
-
-import NotificationContent from './Content';
-
-describe('NotificationContent', () => {
-  const styles = {
-    button: {},
-    rowInsider: {},
-    textBox: {},
-  };
-  const title = 'Welcome to the new MyMetaverse!';
-  const createdAt = '2024-04-26T16:35:03.147606Z';
-  const description = {
-    text: 'We are excited to announce the launch of our brand new website and app!',
-    asset: {
-      name: 'Ethereum',
-    },
-  };
-  const value = '100.00';
-
-  it('renders correctly', () => {
-    const { toJSON } = renderWithProvider(
-      <NotificationContent
-        title={title}
-        description={description}
-        createdAt={createdAt}
-        value={value}
-        styles={styles}
-      />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders title with two parts', () => {
-    const titleWithTo = 'Sent 0.01 ETH to 0x10000';
-    const { getByText } = renderWithProvider(
-      <NotificationContent
-        title={titleWithTo}
-        createdAt={createdAt}
-        value={value}
-        styles={styles}
-      />,
-    );
-
-    expect(getByText(titleWithTo)).toBeTruthy();
-  });
-
-  it('renders title with two parts - with from', () => {
-    const titleWithFrom = 'Received 0.01 ETH from 0x10000';
-    const { getByText } = renderWithProvider(
-      <NotificationContent
-        title={titleWithFrom}
-        createdAt={createdAt}
-        value={value}
-        styles={styles}
-      />,
-    );
-
-    expect(getByText(titleWithFrom)).toBeTruthy();
-  });
-
-  it('renders description as asset and value', () => {
-    const { getByText } = renderWithProvider(
-      <NotificationContent
-        title={title}
-        description={description}
-        createdAt={createdAt}
-        value={value}
-        styles={styles}
-      />,
-    );
-
-    expect(getByText(description.asset.name)).toBeTruthy();
-    expect(getByText(value)).toBeTruthy();
-  });
-
-  it('renders description as text and value', () => {
-    const { getByText } = renderWithProvider(
-      <NotificationContent
-        title={title}
-        description={{
-          text: 'We are excited to announce the launch of our brand new website and app!',
-        }}
-        createdAt={createdAt}
-        value={value}
-        styles={styles}
-      />,
-    );
-
-    expect(
-      getByText(
-        'We are excited to announce the launch of our brand new website and app!',
-      ),
-    ).toBeTruthy();
-    expect(getByText(value)).toBeTruthy();
-  });
-});
diff --git a/app/components/UI/Notification/Row/Content.tsx b/app/components/UI/Notification/Row/Content.tsx
deleted file mode 100644
index 29f63db5412..00000000000
--- a/app/components/UI/Notification/Row/Content.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useCallback } from 'react';
-import { View, StyleSheet } from 'react-native';
-import Text, {
-  TextColor,
-  TextVariant,
-} from '../../../../component-library/components/Texts/Text';
-
-interface NotificationContentProps {
-  title: string;
-  description?: {
-    asset?: {
-      symbol?: string;
-      name?: string;
-    };
-    text?: string;
-  };
-  createdAt: string;
-  value: string;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  styles: StyleSheet.NamedStyles<any>;
-}
-
-function NotificationContent({
-  title,
-  description,
-  createdAt,
-  value,
-  styles,
-}: NotificationContentProps) {
-  const useRenderTwoPartsTitles = useCallback(() => {
-    const lowerTitle = title.toLowerCase();
-
-    let parts: string[] = [];
-    if (lowerTitle.includes('sent')) {
-      parts = title.split(/(\bto\b)/g);
-    } else if (lowerTitle.includes('received')) {
-      parts = title.split(/(\bfrom\b)/g);
-    } else {
-      parts = [];
-    }
-
-    if (parts.length > 1) {
-      return (
-        <Text color={TextColor.Alternative} variant={TextVariant.BodySM}>
-          {parts[0]}
-          <Text variant={TextVariant.BodySM} color={TextColor.Info}>
-            {parts[1]}
-            {parts[2]}
-          </Text>
-        </Text>
-      );
-    }
-
-    return (
-      <Text color={TextColor.Alternative} variant={TextVariant.BodySM}>
-        {title}
-      </Text>
-    );
-  }, [title]);
-
-  return (
-    <View style={styles.rowContainer}>
-      <View style={styles.rowInsider}>
-        {useRenderTwoPartsTitles()}
-        <Text color={TextColor.Muted} variant={TextVariant.BodySM}>
-          {createdAt}
-        </Text>
-      </View>
-      <View style={styles.rowInsider}>
-        <Text style={styles.textBox} variant={TextVariant.BodyMD}>
-          {description?.asset?.name || description?.text}
-        </Text>
-        <Text variant={TextVariant.BodyMD}>{value}</Text>
-      </View>
-    </View>
-  );
-}
-
-export default NotificationContent;
diff --git a/app/components/UI/Notification/Row/Icon.test.tsx b/app/components/UI/Notification/Row/Icon.test.tsx
deleted file mode 100644
index ba8081b5346..00000000000
--- a/app/components/UI/Notification/Row/Icon.test.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import { Linking } from 'react-native';
-
-import renderWithProvider from '../../../../util/test/renderWithProvider';
-
-import NotificationIcon from './Icon';
-import { TRIGGER_TYPES } from '../../../../util/notifications';
-import { IconName } from '../../../../component-library/components/Icons/Icon';
-import { backgroundState } from '../../../../util/test/initial-root-state';
-import { CommonSelectorsIDs } from '../../../../../e2e/selectors/Common.selectors';
-
-import SVG_MM_LOGO_PATH from '../../../../images/fox.svg';
-import SVG_ETH_LOGO_PATH from '../../../../component-library/components/Icons/Icon/assets/ethereum.svg';
-
-Linking.openURL = jest.fn(() => Promise.resolve('opened https://metamask.io!'));
-
-const mockInitialState = {
-  engine: {
-    backgroundState: {
-      ...backgroundState,
-    },
-  },
-};
-
-describe('NotificationIcon', () => {
-  const styles = {
-    foxWrapper: {},
-    fox: {},
-    nftLogo: {},
-    nftPlaceholder: {},
-    assetLogo: {},
-    assetPlaceholder: {},
-    badgeWrapper: {},
-    ethLogo: {},
-  };
-
-  const announcementNotification = {
-    notificationType: TRIGGER_TYPES.FEATURES_ANNOUNCEMENT,
-    imageUrl: SVG_MM_LOGO_PATH,
-  };
-
-  const walletNotification = {
-    notificationType: TRIGGER_TYPES.ERC20_SENT,
-    badgeIcon: IconName.Send2,
-    imageUrl: SVG_ETH_LOGO_PATH,
-  };
-
-  it('matches snapshot with Wallet type', () => {
-    const { toJSON } = renderWithProvider(
-      <NotificationIcon
-        notificationType={walletNotification.notificationType}
-        imageUrl={walletNotification.imageUrl.name}
-        badgeIcon={walletNotification.badgeIcon}
-        styles={styles}
-      />,
-      { state: mockInitialState },
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('matches snapshot with Announcement type', () => {
-    const { toJSON } = renderWithProvider(
-      <NotificationIcon
-        notificationType={announcementNotification.notificationType}
-        imageUrl={announcementNotification.imageUrl.name}
-        styles={styles}
-      />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders Fox icon when notification type is FEATURES_ANNOUNCEMENT', () => {
-    const { getByTestId } = renderWithProvider(
-      <NotificationIcon
-        notificationType={announcementNotification.notificationType}
-        imageUrl={announcementNotification.imageUrl.name}
-        styles={styles}
-      />,
-    );
-
-    const foxIcon = getByTestId(CommonSelectorsIDs.FOX_ICON);
-    expect(foxIcon).toBeTruthy();
-  });
-});
diff --git a/app/components/UI/Notification/Row/Icon.tsx b/app/components/UI/Notification/Row/Icon.tsx
deleted file mode 100644
index e3b188bdb20..00000000000
--- a/app/components/UI/Notification/Row/Icon.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react';
-import { View, Image } from 'react-native';
-import BadgeWrapper from '../../../../component-library/components/Badges/BadgeWrapper';
-import Badge, {
-  BadgeVariant,
-} from '../../../../component-library/components/Badges/Badge';
-import { BOTTOM_BADGEWRAPPER_BADGEPOSITION } from '../../../../component-library/components/Badges/BadgeWrapper/BadgeWrapper.constants';
-import { TRIGGER_TYPES } from '../../../../util/notifications';
-import { CommonSelectorsIDs } from '../../../../../e2e/selectors/Common.selectors';
-import NetworkMainAssetLogo from '../../NetworkMainAssetLogo';
-import { IconName } from '../../../../component-library/components/Icons/Icon';
-
-import RemoteImage from '../../../../components/Base/RemoteImage';
-import { ETHEREUM_LOGO } from '../../../../constants/urls';
-/* eslint-disable import/no-commonjs */
-const metamask_fox = require('../../../../images/fox.png'); // eslint-disable-line
-interface NotificationIconProps {
-  notificationType: TRIGGER_TYPES;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  styles: any;
-  badgeIcon?: IconName;
-  imageUrl?: string;
-}
-function NotificationIcon({
-  notificationType,
-  styles,
-  badgeIcon,
-  imageUrl,
-}: NotificationIconProps) {
-  const customStyles = () => {
-    const types = ['erc721', 'erc1155'];
-    if (types.some((type) => notificationType.toLowerCase().includes(type))) {
-      return {
-        style: styles.nftLogo,
-        placeholderStyle: styles.nftPlaceholder,
-      };
-    }
-    return {
-      style: styles.assetLogo,
-      placeholderStyle: styles.assetPlaceholder,
-    };
-  };
-
-  if (notificationType === TRIGGER_TYPES.FEATURES_ANNOUNCEMENT) {
-    return (
-      <View style={styles.foxWrapper}>
-        <Image
-          source={metamask_fox}
-          style={styles.fox}
-          resizeMethod={'auto'}
-          testID={CommonSelectorsIDs.FOX_ICON}
-        />
-      </View>
-    );
-  }
-
-  return (
-    <BadgeWrapper
-      badgePosition={BOTTOM_BADGEWRAPPER_BADGEPOSITION}
-      badgeElement={
-        <Badge variant={BadgeVariant.NotificationsKinds} iconName={badgeIcon} />
-      }
-      style={styles.badgeWrapper}
-    >
-      {notificationType.toLowerCase().includes('eth') ? (
-        <NetworkMainAssetLogo style={styles.ethLogo} />
-      ) : (
-        <RemoteImage
-          source={{
-            uri: imageUrl || ETHEREUM_LOGO,
-          }}
-          style={customStyles().style}
-          placeholderStyle={customStyles().placeholderStyle}
-        />
-      )}
-    </BadgeWrapper>
-  );
-}
-
-export default NotificationIcon;
diff --git a/app/components/UI/Notification/Row/Root.test.tsx b/app/components/UI/Notification/Row/Root.test.tsx
deleted file mode 100644
index 38783f74ede..00000000000
--- a/app/components/UI/Notification/Row/Root.test.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from 'react';
-
-import renderWithProvider from '../../../../util/test/renderWithProvider';
-import { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
-import { useSharedValue, runOnJS, withTiming } from 'react-native-reanimated';
-
-import NotificationRoot from './Root';
-
-const children = <></>;
-const styles = {
-  wrapper: {},
-  trashIconContainer: {},
-};
-const handleOnPress = jest.fn();
-jest.mock('react-native-reanimated', () => ({
-  ...jest.requireActual('react-native-reanimated/mock'),
-  useSharedValue: jest.fn().mockImplementation((init) => ({
-    value: init,
-    withTiming: jest.fn((toValue, _, callback) => ({ toValue, callback })),
-  })),
-  runOnJS: jest.fn((callback) => callback()),
-}));
-
-describe('NotificationRoot', () => {
-  const SWIPE_THRESHOLD = -100;
-  const SCREEN_WIDTH = 300; // Assume some screen width
-
-  // Mock callbacks
-  const onDismiss = jest.fn();
-
-  // Shared values setup
-  const transX = useSharedValue(0);
-  const itemHeight = useSharedValue(100); // Assume initial height
-  const paddingVertical = useSharedValue(20); // Assume initial padding
-  const opacity = useSharedValue(1); // Assume full opacity
-  const onActive = (event: PanGestureHandlerGestureEvent) => {
-    const isSwipingLeft = event.translationX > 0;
-
-    if (isSwipingLeft) {
-      transX.value = 0;
-      return;
-    }
-
-    transX.value = event.translationX;
-  };
-  const onEnd = () => {
-    const isDismissed = transX.value < SWIPE_THRESHOLD;
-    if (isDismissed) {
-      transX.value = withTiming(-SCREEN_WIDTH);
-      itemHeight.value = withTiming(0);
-      paddingVertical.value = withTiming(0);
-      opacity.value = withTiming(0, undefined, (isFinished: boolean) => {
-        if (isFinished && onDismiss) {
-          runOnJS(onDismiss);
-        }
-      });
-    } else {
-      transX.value = withTiming(0);
-    }
-  };
-
-  it('matches snapshot', () => {
-    const { toJSON } = renderWithProvider(
-      <NotificationRoot
-        handleOnPress={handleOnPress}
-        onDismiss={onDismiss}
-        styles={styles}
-      >
-        {children}
-      </NotificationRoot>,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should dismiss the item if transX.value is less than SWIPE_THRESHOLD', () => {
-    transX.value = -150;
-    onEnd();
-    expect(transX.value).toBe(-SCREEN_WIDTH);
-    expect(itemHeight.value).toBe(0);
-    expect(paddingVertical.value).toBe(0);
-    expect(opacity.value).toBe(0);
-    expect(onDismiss).toHaveBeenCalled();
-  });
-
-  it('should set transX.value to 0 if swiping left', () => {
-    const event = {
-      translationX: 10,
-    } as unknown as PanGestureHandlerGestureEvent;
-    onActive(event);
-    expect(transX.value).toBe(0);
-  });
-
-  it('should set transX.value to event.translationX if not swiping left', () => {
-    const event = {
-      translationX: -10,
-    } as unknown as PanGestureHandlerGestureEvent;
-    onActive(event);
-    expect(transX.value).toBe(-10);
-  });
-});
diff --git a/app/components/UI/Notification/Row/Root.tsx b/app/components/UI/Notification/Row/Root.tsx
deleted file mode 100644
index 5e9b18dfd59..00000000000
--- a/app/components/UI/Notification/Row/Root.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
-import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
-  PanGestureHandlerProps,
-} from 'react-native-gesture-handler';
-import Animated, {
-  runOnJS,
-  useAnimatedGestureHandler,
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-} from 'react-native-reanimated';
-import Icon, {
-  IconColor,
-  IconName,
-  IconSize,
-} from '../../../../component-library/components/Icons/Icon';
-
-interface NotificationRootProps
-  extends Pick<PanGestureHandlerProps, 'simultaneousHandlers'> {
-  children: React.ReactNode;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  styles: StyleSheet.NamedStyles<any>;
-  handleOnPress: () => void;
-  onDismiss?: () => void;
-}
-
-const { width: SCREEN_WIDTH } = Dimensions.get('window');
-const DELETE_BUTTON_WIDTH = -SCREEN_WIDTH * 0.3;
-const SWIPE_THRESHOLD = DELETE_BUTTON_WIDTH;
-
-function NotificationRoot({
-  children,
-  handleOnPress,
-  styles,
-  onDismiss,
-  simultaneousHandlers,
-}: NotificationRootProps) {
-  const transX = useSharedValue(0);
-  const itemHeight = useSharedValue();
-  const paddingVertical = useSharedValue(10);
-  const opacity = useSharedValue(1);
-
-  const panGesture = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
-    onActive: (event: PanGestureHandlerGestureEvent) => {
-      const isSwipingLeft = event.translationX > 0;
-
-      if (isSwipingLeft) {
-        transX.value = 0;
-        return;
-      }
-
-      transX.value = event.translationX;
-    },
-    onEnd: () => {
-      const isDismissed = transX.value < SWIPE_THRESHOLD;
-      if (isDismissed) {
-        transX.value = withTiming(-SCREEN_WIDTH);
-        itemHeight.value = withTiming(0);
-        paddingVertical.value = withTiming(0);
-        opacity.value = withTiming(0, undefined, (isFinished: boolean) => {
-          if (isFinished && onDismiss) {
-            runOnJS(onDismiss);
-          }
-        });
-      } else {
-        transX.value = withTiming(0);
-      }
-    },
-  });
-
-  const rChildrenStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: transX.value }],
-    ...styles.container,
-  }));
-
-  const rIconStyle = useAnimatedStyle(() => {
-    const opct = withTiming(transX.value < SWIPE_THRESHOLD ? 1 : 0, {
-      duration: 300,
-    });
-
-    return { opacity: opct };
-  });
-
-  const rContainerStyle = useAnimatedStyle(() => ({
-    height: itemHeight.value,
-    paddingVertical: paddingVertical.value,
-    opacity: opacity.value,
-  }));
-
-  return (
-    <Animated.View style={[styles.wrapper, rContainerStyle]}>
-      <PanGestureHandler
-        simultaneousHandlers={simultaneousHandlers}
-        onGestureEvent={panGesture}
-      >
-        <Animated.View onPress={handleOnPress} style={rChildrenStyle}>
-          <TouchableOpacity onPress={handleOnPress}>
-            {children}
-          </TouchableOpacity>
-        </Animated.View>
-      </PanGestureHandler>
-      <Animated.View style={[styles.trashIconContainer, rIconStyle]}>
-        <Icon
-          size={IconSize.Md}
-          name={IconName.Trash}
-          color={IconColor.Alternative}
-        />
-      </Animated.View>
-    </Animated.View>
-  );
-}
-
-export default NotificationRoot;
diff --git a/app/components/UI/Notification/Row/__snapshots__/Actions.test.tsx.snap b/app/components/UI/Notification/Row/__snapshots__/Actions.test.tsx.snap
deleted file mode 100644
index c0efe11a2f9..00000000000
--- a/app/components/UI/Notification/Row/__snapshots__/Actions.test.tsx.snap
+++ /dev/null
@@ -1,113 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationActions matches snapshot 1`] = `
-<TouchableOpacity
-  accessibilityRole="button"
-  accessible={true}
-  activeOpacity={1}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
-  style={
-    {
-      "alignItems": "center",
-      "alignSelf": "flex-start",
-      "backgroundColor": "transparent",
-      "borderColor": "#0376c9",
-      "borderRadius": 20,
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "height": 40,
-      "justifyContent": "center",
-      "paddingHorizontal": 16,
-    }
-  }
-  testID="notification-actions-button"
-  variant="Secondary"
->
-  <Text
-    accessibilityRole="text"
-    style={
-      {
-        "color": "#0376c9",
-        "fontFamily": "Euclid Circular B",
-        "fontSize": 14,
-        "fontWeight": "400",
-        "letterSpacing": 0,
-        "lineHeight": 22,
-      }
-    }
-  >
-    Learn more
-  </Text>
-  <SvgMock
-    color="#0376c9"
-    height={16}
-    name="Arrow2Upright"
-    style={
-      {
-        "height": 16,
-        "marginLeft": 8,
-        "width": 16,
-      }
-    }
-    width={16}
-  />
-</TouchableOpacity>
-`;
-
-exports[`NotificationActions matches snapshot with LINK only 1`] = `
-<TouchableOpacity
-  accessibilityRole="button"
-  accessible={true}
-  activeOpacity={1}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
-  style={
-    {
-      "alignItems": "center",
-      "alignSelf": "flex-start",
-      "backgroundColor": "transparent",
-      "borderColor": "#0376c9",
-      "borderRadius": 20,
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "height": 40,
-      "justifyContent": "center",
-      "paddingHorizontal": 16,
-    }
-  }
-  testID="notification-actions-button"
-  variant="Secondary"
->
-  <Text
-    accessibilityRole="text"
-    style={
-      {
-        "color": "#0376c9",
-        "fontFamily": "Euclid Circular B",
-        "fontSize": 14,
-        "fontWeight": "400",
-        "letterSpacing": 0,
-        "lineHeight": 22,
-      }
-    }
-  >
-    Learn more
-  </Text>
-  <SvgMock
-    color="#0376c9"
-    height={16}
-    name="Arrow2Upright"
-    style={
-      {
-        "height": 16,
-        "marginLeft": 8,
-        "width": 16,
-      }
-    }
-    width={16}
-  />
-</TouchableOpacity>
-`;
diff --git a/app/components/UI/Notification/Row/__snapshots__/Content.test.tsx.snap b/app/components/UI/Notification/Row/__snapshots__/Content.test.tsx.snap
deleted file mode 100644
index 8d865ddb8ff..00000000000
--- a/app/components/UI/Notification/Row/__snapshots__/Content.test.tsx.snap
+++ /dev/null
@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationContent renders correctly 1`] = `
-<View>
-  <View
-    style={{}}
-  >
-    <Text
-      accessibilityRole="text"
-      style={
-        {
-          "color": "#6a737d",
-          "fontFamily": "Euclid Circular B",
-          "fontSize": 12,
-          "fontWeight": "400",
-          "letterSpacing": 0,
-          "lineHeight": 20,
-        }
-      }
-    >
-      Welcome to the new MyMetaverse!
-    </Text>
-    <Text
-      accessibilityRole="text"
-      style={
-        {
-          "color": "#9fa6ae",
-          "fontFamily": "Euclid Circular B",
-          "fontSize": 12,
-          "fontWeight": "400",
-          "letterSpacing": 0,
-          "lineHeight": 20,
-        }
-      }
-    >
-      2024-04-26T16:35:03.147606Z
-    </Text>
-  </View>
-  <View
-    style={{}}
-  >
-    <Text
-      accessibilityRole="text"
-      style={
-        {
-          "color": "#141618",
-          "fontFamily": "Euclid Circular B",
-          "fontSize": 14,
-          "fontWeight": "400",
-          "letterSpacing": 0,
-          "lineHeight": 22,
-        }
-      }
-    >
-      Ethereum
-    </Text>
-    <Text
-      accessibilityRole="text"
-      style={
-        {
-          "color": "#141618",
-          "fontFamily": "Euclid Circular B",
-          "fontSize": 14,
-          "fontWeight": "400",
-          "letterSpacing": 0,
-          "lineHeight": 22,
-        }
-      }
-    >
-      100.00
-    </Text>
-  </View>
-</View>
-`;
diff --git a/app/components/UI/Notification/Row/__snapshots__/Icon.test.tsx.snap b/app/components/UI/Notification/Row/__snapshots__/Icon.test.tsx.snap
deleted file mode 100644
index 8c51e61a8fe..00000000000
--- a/app/components/UI/Notification/Row/__snapshots__/Icon.test.tsx.snap
+++ /dev/null
@@ -1,96 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationIcon matches snapshot with Announcement type 1`] = `
-<View
-  style={{}}
->
-  <Image
-    resizeMethod="auto"
-    source={
-      {
-        "default": {
-          "uri": "MockImage",
-        },
-      }
-    }
-    style={{}}
-    testID="fox-icon"
-  />
-</View>
-`;
-
-exports[`NotificationIcon matches snapshot with Wallet type 1`] = `
-<View
-  onLayout={[Function]}
-  style={
-    {
-      "alignSelf": "flex-start",
-      "position": "relative",
-    }
-  }
-  testID="badge-wrapper-badge"
->
-  <View>
-    <View
-      style={
-        {
-          "overflow": "hidden",
-        }
-      }
-    />
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "aspectRatio": 1,
-        "bottom": 0,
-        "height": 0,
-        "justifyContent": "center",
-        "position": "absolute",
-        "right": 0,
-        "transform": [
-          {
-            "translateX": 0,
-          },
-          {
-            "translateY": 0,
-          },
-        ],
-      }
-    }
-  >
-    <View
-      onLayout={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "aspectRatio": 1,
-          "backgroundColor": "#0376c9",
-          "borderColor": "#ffffff",
-          "borderRadius": 9,
-          "borderWidth": 1,
-          "height": "50%",
-          "justifyContent": "center",
-          "minHeight": 18,
-          "opacity": 0,
-        }
-      }
-      testID="badge-badgenotifications"
-    >
-      <SvgMock
-        color="#ffffff"
-        height={10}
-        name="Send2"
-        style={
-          {
-            "height": 10,
-            "width": 10,
-          }
-        }
-        width={10}
-      />
-    </View>
-  </View>
-</View>
-`;
diff --git a/app/components/UI/Notification/Row/__snapshots__/Root.test.tsx.snap b/app/components/UI/Notification/Row/__snapshots__/Root.test.tsx.snap
deleted file mode 100644
index d055b2e865b..00000000000
--- a/app/components/UI/Notification/Row/__snapshots__/Root.test.tsx.snap
+++ /dev/null
@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationRoot matches snapshot 1`] = `
-<View
-  style={
-    [
-      {},
-      {
-        "height": undefined,
-        "opacity": 1,
-        "paddingVertical": 10,
-      },
-    ]
-  }
->
-  <View
-    collapsable={false}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[MockFunction]}
-    style={
-      {
-        "transform": [
-          {
-            "translateX": 0,
-          },
-        ],
-      }
-    }
-  >
-    <TouchableOpacity
-      onPress={[MockFunction]}
-    />
-  </View>
-  <View
-    style={
-      [
-        {},
-        {
-          "opacity": 0,
-        },
-      ]
-    }
-  >
-    <SvgMock
-      color="#6a737d"
-      height={20}
-      name="Trash"
-      style={
-        {
-          "height": 20,
-          "width": 20,
-        }
-      }
-      width={20}
-    />
-  </View>
-</View>
-`;
diff --git a/app/components/UI/Notification/Row/constants.ts b/app/components/UI/Notification/Row/constants.ts
deleted file mode 100644
index a69a1bbfc64..00000000000
--- a/app/components/UI/Notification/Row/constants.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export const NOTIFICATION_TEST_ID_TYPES = {
-  NOTIFICATION_ACTION_BUTTON: 'notification-actions-button',
-};
diff --git a/app/components/UI/Notification/Row/index.tsx b/app/components/UI/Notification/Row/index.tsx
deleted file mode 100644
index 23859026392..00000000000
--- a/app/components/UI/Notification/Row/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import NotificationRoot from './Root';
-import NotificationIcon from './Icon';
-import NotificationContent from './Content';
-import NotificationActions from './Actions';
-
-export const NotificationRow = {
-  Root: NotificationRoot,
-  Icon: NotificationIcon,
-  Content: NotificationContent,
-  Actions: NotificationActions,
-};
diff --git a/app/components/UI/Notification/Row/styles.ts b/app/components/UI/Notification/Row/styles.ts
deleted file mode 100644
index 19b5bd45e3c..00000000000
--- a/app/components/UI/Notification/Row/styles.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { StyleSheet } from 'react-native';
-import type { Theme } from '@metamask/design-tokens';
-
-export const createStyles = ({ colors }: Theme) =>
-  StyleSheet.create({
-    wrapper: {
-      flex: 1,
-      backgroundColor: colors.background.default,
-      paddingHorizontal: 16,
-      paddingVertical: 10,
-    },
-    itemWrapper: {
-      flex: 1,
-      flexDirection: 'row',
-    },
-    fox: {
-      width: 20,
-      height: 20,
-    },
-    badgeWrapper: { alignSelf: 'center' },
-    rowContainer: { flex: 1, marginLeft: 16 },
-    rowInsider: {
-      flex: 1,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-    },
-    ethLogo: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-    },
-    foxWrapper: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      backgroundColor: colors.background.alternative,
-      alignItems: 'center',
-      justifyContent: 'center',
-      alignSelf: 'center',
-    },
-    textBox: {
-      flexShrink: 1,
-      maxWidth: '90%',
-    },
-    button: {
-      marginTop: 16,
-      width: '100%',
-      alignSelf: 'center',
-    },
-  });
diff --git a/app/components/Views/Notifications/Details/Announcements/__snapshots__/index.test.tsx.snap b/app/components/Views/Notifications/Details/Announcements/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index ad6748cb0a0..00000000000
--- a/app/components/Views/Notifications/Details/Announcements/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,126 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AnnouncementsDetails should renders correctly 1`] = `
-<View
-  style={
-    {
-      "alignItems": "flex-start",
-      "flex": 1,
-    }
-  }
->
-  <View
-    style={
-      {
-        "alignContent": "center",
-        "borderRadius": 12,
-        "height": 240,
-        "marginBottom": 16,
-        "overflow": "hidden",
-        "width": 718,
-      }
-    }
-  >
-    <Image
-      source={
-        {
-          "uri": "SvgMock",
-        }
-      }
-      style={
-        {
-          "height": 240,
-          "resizeMode": "cover",
-          "width": 718,
-        }
-      }
-    />
-  </View>
-  <Text
-    accessibilityRole="text"
-    style={
-      {
-        "color": "#141618",
-        "fontFamily": "Euclid Circular B",
-        "fontSize": 16,
-        "fontWeight": "500",
-        "letterSpacing": 0,
-        "lineHeight": 24,
-      }
-    }
-  >
-    Welcome to the new MyMetaverse!
-  </Text>
-  <Text
-    accessibilityRole="text"
-    style={
-      {
-        "color": "#6a737d",
-        "fontFamily": "Euclid Circular B",
-        "fontSize": 14,
-        "fontWeight": "400",
-        "letterSpacing": 0,
-        "lineHeight": 22,
-      }
-    }
-  >
-    We are excited to announce the launch of our brand new website and app!
-  </Text>
-  <TouchableOpacity
-    accessibilityRole="button"
-    accessible={true}
-    activeOpacity={1}
-    onPress={[Function]}
-    onPressIn={[Function]}
-    onPressOut={[Function]}
-    style={
-      {
-        "alignItems": "center",
-        "alignSelf": "center",
-        "backgroundColor": "#ffffff",
-        "borderColor": "#0376c9",
-        "borderRadius": 20,
-        "borderWidth": 1,
-        "bottom": 0,
-        "flexDirection": "row",
-        "height": 40,
-        "justifyContent": "center",
-        "margin": 16,
-        "paddingHorizontal": 16,
-        "position": "absolute",
-        "width": "90%",
-      }
-    }
-    variant="Secondary"
-  >
-    <Text
-      accessibilityRole="text"
-      style={
-        {
-          "color": "#0376c9",
-          "fontFamily": "Euclid Circular B",
-          "fontSize": 14,
-          "fontWeight": "400",
-          "letterSpacing": 0,
-          "lineHeight": 22,
-        }
-      }
-    >
-      Learn more
-    </Text>
-    <SvgMock
-      color="#0376c9"
-      height={16}
-      name="Arrow2Right"
-      style={
-        {
-          "height": 16,
-          "marginLeft": 8,
-          "width": 16,
-        }
-      }
-      width={16}
-    />
-  </TouchableOpacity>
-</View>
-`;
diff --git a/app/components/Views/Notifications/Details/Announcements/index.test.tsx b/app/components/Views/Notifications/Details/Announcements/index.test.tsx
deleted file mode 100644
index 11bb5413273..00000000000
--- a/app/components/Views/Notifications/Details/Announcements/index.test.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { NavigationProp, ParamListBase } from '@react-navigation/native';
-import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
-import { render } from '@testing-library/react-native';
-
-import AnnouncementsDetails from '.';
-import { createStyles } from '../styles';
-import MOCK_NOTIFICATIONS from '../../../../../components/UI/Notification/__mocks__/mock_notifications';
-import { backgroundState } from '../../../../../util/test/initial-root-state';
-import { mockTheme } from '../../../../../util/theme';
-import { FeatureAnnouncementRawNotification } from '../../../../../util/notifications/types';
-
-const mockInitialState = {
-  settings: {
-    useBlockieIcon: false,
-  },
-  notificationsSettings: {
-    isEnabled: true,
-  },
-  engine: {
-    backgroundState,
-  },
-};
-
-jest.mock('@react-navigation/native');
-
-describe('AnnouncementsDetails', () => {
-  const mockStore = configureMockStore();
-  const store = mockStore(mockInitialState);
-
-  let navigation: NavigationProp<ParamListBase>;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let styles: Record<string, any>;
-  beforeEach(() => {
-    navigation = {
-      navigate: jest.fn(),
-    } as unknown as NavigationProp<ParamListBase>;
-    styles = createStyles(mockTheme);
-  });
-
-  it('should renders correctly', () => {
-    const { toJSON } = render(
-      <Provider store={store}>
-        <AnnouncementsDetails
-          styles={styles}
-          navigation={navigation}
-          notification={
-            MOCK_NOTIFICATIONS[0] as FeatureAnnouncementRawNotification
-          }
-        />
-      </Provider>,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
diff --git a/app/components/Views/Notifications/Details/Announcements/index.tsx b/app/components/Views/Notifications/Details/Announcements/index.tsx
deleted file mode 100644
index 922b56fd7da..00000000000
--- a/app/components/Views/Notifications/Details/Announcements/index.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import { Image, View } from 'react-native';
-import { NavigationProp, ParamListBase } from '@react-navigation/native';
-import Button, {
-  ButtonVariants,
-} from '../../../../../component-library/components/Buttons/Button';
-
-import Text, {
-  TextColor,
-  TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
-
-import { FeatureAnnouncementRawNotification } from '../../../../../util/notifications';
-import { IconName } from '../../../../../component-library/components/Icons/Icon';
-import { TypeLinkFields } from '../../../../../util/notifications/types/featureAnnouncement/TypeLink';
-
-// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, import/no-commonjs
-const PLACEHOLDER_IMG_URI = require('../../../../../images/no-image-placeholder.jpeg');
-
-interface Props {
-  notification: FeatureAnnouncementRawNotification;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  styles: Record<string, any>;
-  navigation: NavigationProp<ParamListBase>;
-}
-
-const AnnouncementsDetails: React.FC<Props> = ({
-  notification,
-  styles,
-  navigation,
-}: Props) => {
-  const handleCTAPress = () => {
-    // TODO: Currently handling CTAs with external links only. For now, we aren't handling deeplinks.
-    const { link } = notification.data as unknown as {
-      link: TypeLinkFields['fields'];
-    };
-    if (!link) return;
-    navigation.navigate('Webview', {
-      screen: 'SimpleWebview',
-      params: {
-        url: link.linkUrl,
-      },
-    });
-  };
-
-  const IMAGE_URI = notification.data.image?.file?.url || PLACEHOLDER_IMG_URI;
-  return (
-    <View style={styles.renderContainer}>
-      <View style={styles.renderFCMCard}>
-        <Image source={{ uri: IMAGE_URI }} style={styles.FCMImage} />
-      </View>
-      {notification.data.title && (
-        <Text variant={TextVariant.BodyLGMedium}>
-          {notification.data.title}
-        </Text>
-      )}
-
-      <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
-        {notification.data.longDescription}
-      </Text>
-
-      {(notification.data.link || notification.data.action) && (
-        <Button
-          variant={ButtonVariants.Secondary}
-          label={
-            (
-              notification.data?.link as unknown as {
-                linkText: TypeLinkFields['fields']['linkText'];
-              }
-            )?.linkText
-            // TODO: Handle CTAs with external links only. For now, we aren't handleing deeplinks.
-            // (notification.data?.action as { actionText?: string })?.actionText
-          }
-          onPress={handleCTAPress}
-          style={styles.ctaBtn}
-          endIconName={IconName.Arrow2Right}
-        />
-      )}
-    </View>
-  );
-};
-
-export default AnnouncementsDetails;
diff --git a/app/components/Views/Notifications/Details/Badge/__snapshots__/index.test.tsx.snap b/app/components/Views/Notifications/Details/Badge/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index b7901ab01b1..00000000000
--- a/app/components/Views/Notifications/Details/Badge/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,162 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationBadge should renders correctly 1`] = `
-<View
-  onLayout={[Function]}
-  style={
-    {
-      "alignItems": "center",
-      "alignSelf": "flex-start",
-      "justifyContent": "center",
-      "position": "absolute",
-    }
-  }
-  testID="badge-wrapper-badge"
->
-  <View>
-    <View
-      useNativeDriver={true}
-    >
-      <Image
-        fadeIn={true}
-        onError={[Function]}
-        onLoadEnd={[Function]}
-        source={
-          {
-            "uri": undefined,
-          }
-        }
-        style={
-          [
-            {
-              "borderRadius": 12,
-              "height": 24,
-              "width": 24,
-            },
-            undefined,
-            undefined,
-            undefined,
-            {
-              "borderRadius": 16,
-              "height": 32,
-              "width": 32,
-            },
-          ]
-        }
-        testID="network-main-asset-badge"
-      />
-      <View
-        collapsable={false}
-        style={
-          {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 1,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "borderRadius": 16,
-                "height": 32,
-                "width": 32,
-              },
-              {
-                "backgroundColor": "#eee",
-              },
-              undefined,
-            ]
-          }
-        />
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "aspectRatio": 1,
-        "bottom": 0,
-        "height": 0,
-        "justifyContent": "center",
-        "position": "absolute",
-        "right": 0,
-        "transform": [
-          {
-            "translateX": 0,
-          },
-          {
-            "translateY": 0,
-          },
-        ],
-      }
-    }
-  >
-    <View
-      onLayout={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "aspectRatio": 1,
-          "height": "50%",
-          "justifyContent": "center",
-          "maxHeight": 24,
-          "minHeight": 8,
-          "opacity": 0,
-        }
-      }
-      testID="badge-network"
-    >
-      <View
-        style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "#ffffff",
-            "borderColor": "#ffffff",
-            "borderRadius": 16,
-            "borderWidth": 2,
-            "height": 32,
-            "justifyContent": "center",
-            "overflow": "hidden",
-            "shadowColor": "#0000001a",
-            "shadowOffset": {
-              "height": 2,
-              "width": 0,
-            },
-            "shadowOpacity": 1,
-            "shadowRadius": 4,
-            "transform": [
-              {
-                "scale": 1,
-              },
-            ],
-            "width": 32,
-          }
-        }
-      >
-        <Image
-          onError={[Function]}
-          resizeMode="contain"
-          source={
-            {
-              "uri": "badgeImage",
-            }
-          }
-          style={
-            {
-              "height": 32,
-              "width": 32,
-            }
-          }
-          testID="network-avatar-image"
-        />
-      </View>
-    </View>
-  </View>
-</View>
-`;
diff --git a/app/components/Views/Notifications/Details/Badge/index.test.tsx b/app/components/Views/Notifications/Details/Badge/index.test.tsx
deleted file mode 100644
index 33b7e271f81..00000000000
--- a/app/components/Views/Notifications/Details/Badge/index.test.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
-import { render } from '@testing-library/react-native';
-
-import NotificationBadge from '.';
-import { createStyles } from '../styles';
-import { mockTheme } from '../../../../../util/theme';
-import { TRIGGER_TYPES } from '../../../../../util/notifications';
-import { backgroundState } from '../../../../../util/test/initial-root-state';
-
-jest.mock('@react-navigation/native');
-
-const mockedTheme = createStyles(mockTheme);
-const mockStyles = {
-  ...mockedTheme,
-};
-
-const mockInitialState = {
-  engine: {
-    backgroundState,
-  },
-};
-
-describe('NotificationBadge', () => {
-  const mockStore = configureMockStore();
-  const store = mockStore(mockInitialState);
-  const commonProps = {
-    styles: mockStyles,
-    badgeImageSource: { uri: 'badgeImage' },
-    imageUrl:
-      'https://token.api.cx.metamask.io/assets/nativeCurrencyLogos/ethereum.svg',
-  };
-
-  it('should renders correctly', () => {
-    const { toJSON } = render(
-      <Provider store={store}>
-        <NotificationBadge
-          {...commonProps}
-          notificationType={TRIGGER_TYPES.ETH_RECEIVED}
-        />
-      </Provider>,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should renders NetworkMainAssetLogo for ETH notification types', () => {
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <NotificationBadge
-          {...commonProps}
-          notificationType={TRIGGER_TYPES.ETH_RECEIVED}
-        />
-      </Provider>,
-    );
-    expect(getByTestId('network-main-asset-badge')).toBeTruthy();
-  });
-
-  it('should renders AvatarToken for NFT notification types', () => {
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <NotificationBadge
-          {...commonProps}
-          notificationType={TRIGGER_TYPES.ERC721_RECEIVED}
-        />
-      </Provider>,
-    );
-    expect(getByTestId('avatar-asset-badge')).toBeTruthy();
-  });
-
-  it('should renders AvatarToken for non-ETH and non-NFT notification types', () => {
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <NotificationBadge
-          {...commonProps}
-          notificationType={TRIGGER_TYPES.LIDO_STAKE_COMPLETED}
-        />
-      </Provider>,
-    );
-    expect(getByTestId('avatar-asset-badge')).toBeTruthy();
-  });
-});
diff --git a/app/components/Views/Notifications/Details/Badge/index.tsx b/app/components/Views/Notifications/Details/Badge/index.tsx
deleted file mode 100644
index f74ce3d4996..00000000000
--- a/app/components/Views/Notifications/Details/Badge/index.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import { ImageSourcePropType } from 'react-native';
-import BadgeWrapper from '../../../../../component-library/components/Badges/BadgeWrapper';
-import Badge, {
-  BadgeVariant,
-} from '../../../../../component-library/components/Badges/Badge';
-import { BOTTOM_BADGEWRAPPER_BADGEPOSITION } from '../../../../../component-library/components/Badges/BadgeWrapper/BadgeWrapper.constants';
-import { TRIGGER_TYPES } from '../../../../../util/notifications';
-import NetworkMainAssetLogo from '../../../../UI/NetworkMainAssetLogo';
-
-import {
-  AvatarSize,
-  AvatarVariant,
-} from '../../../../../component-library/components/Avatars/Avatar';
-import AvatarToken from '../../../../../component-library/components/Avatars/Avatar/variants/AvatarToken';
-
-interface NotificationBadgeProps {
-  notificationType: TRIGGER_TYPES;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  styles: Record<string, any>;
-  badgeImageSource?: ImageSourcePropType;
-  imageUrl?: string;
-}
-function NotificationBadge({
-  notificationType,
-  styles,
-  badgeImageSource,
-  imageUrl,
-}: NotificationBadgeProps) {
-  const customStyles = () => {
-    if (
-      [
-        TRIGGER_TYPES.ERC1155_RECEIVED,
-        TRIGGER_TYPES.ERC1155_SENT,
-        TRIGGER_TYPES.ERC721_RECEIVED,
-        TRIGGER_TYPES.ERC721_SENT,
-      ].includes(notificationType)
-    ) {
-      return {
-        style: styles.nftLogo,
-        placeholderStyle: styles.nftPlaceholder,
-      };
-    }
-    return {
-      style: styles.assetLogo,
-      placeholderStyle: styles.assetPlaceholder,
-    };
-  };
-
-  return (
-    <BadgeWrapper
-      testID={'badge-wrapper'}
-      badgePosition={BOTTOM_BADGEWRAPPER_BADGEPOSITION}
-      badgeElement={
-        <Badge
-          testID={'badge-element'}
-          variant={BadgeVariant.Network}
-          imageSource={badgeImageSource}
-        />
-      }
-      style={styles.badgeWrapper}
-    >
-      {notificationType.toLowerCase().includes('eth') ? (
-        <NetworkMainAssetLogo
-          testID={'network-main-asset-badge'}
-          style={styles.ethLogo}
-        />
-      ) : (
-        <AvatarToken
-          testID={'avatar-asset-badge'}
-          variant={AvatarVariant.Token}
-          imageSource={{ uri: imageUrl }}
-          size={AvatarSize.Md}
-          style={customStyles().style}
-          placeholderStyle={customStyles().placeholderStyle}
-        />
-      )}
-    </BadgeWrapper>
-  );
-}
-
-export default NotificationBadge;
diff --git a/app/components/Views/Notifications/Details/Header/__snapshots__/index.test.tsx.snap b/app/components/Views/Notifications/Details/Header/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 548edbda275..00000000000
--- a/app/components/Views/Notifications/Details/Header/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Header should render correctly 1`] = `
-<View
-  style={
-    {
-      "alignItems": "center",
-      "marginTop": 4,
-    }
-  }
-  testID="notification-details-header"
->
-  Notification Announcement
-  This is a mock of description
-</View>
-`;
diff --git a/app/components/Views/Notifications/Details/Header/index.test.tsx b/app/components/Views/Notifications/Details/Header/index.test.tsx
deleted file mode 100644
index 4d24b187055..00000000000
--- a/app/components/Views/Notifications/Details/Header/index.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import Header from '.';
-import { render } from '@testing-library/react-native';
-
-jest.mock('../../../../../util/theme');
-jest.mock('@react-navigation/native');
-
-jest.mock('../../../../../component-library/components/Texts/Text', () => {
-  const originalModule = jest.requireActual(
-    '../../../../../component-library/components/Texts/Text',
-  );
-  return {
-    ...originalModule,
-    __esModule: true,
-    default: jest.fn(({ children }) => children),
-  };
-});
-
-describe('Header', () => {
-  const TITLE = 'Notification Announcement';
-  const DESCRIPTION = 'This is a mock of description';
-
-  it('should render correctly', () => {
-    const { toJSON } = render(<Header title={TITLE} subtitle={DESCRIPTION} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
diff --git a/app/components/Views/Notifications/Details/Header/index.tsx b/app/components/Views/Notifications/Details/Header/index.tsx
deleted file mode 100644
index c3d7d092ecb..00000000000
--- a/app/components/Views/Notifications/Details/Header/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import Text, {
-  TextColor,
-  TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
-import { useTheme } from '../../../../../util/theme';
-import { createStyles } from '../styles';
-import NotificationsDetailViewSelectorsIDs from '../../constants';
-
-const Header = ({ title, subtitle }: { title: string; subtitle: string }) => {
-  const theme = useTheme();
-  const styles = createStyles(theme);
-
-  return (
-    <View
-      testID={
-        NotificationsDetailViewSelectorsIDs.NOTIFICATIONS_HEADER_CONTAINER_ID
-      }
-      style={styles.header}
-    >
-      <Text
-        testID={
-          NotificationsDetailViewSelectorsIDs.NOTIFICATIONS_HEADER_TITLE_ID
-        }
-        variant={TextVariant.BodyLGMedium}
-        color={TextColor.Default}
-      >
-        {title}
-      </Text>
-      <Text
-        testID={
-          NotificationsDetailViewSelectorsIDs.NOTIFICATIONS_HEADER_SUBTITLE_ID
-        }
-        variant={TextVariant.BodyMD}
-        color={TextColor.Alternative}
-      >
-        {subtitle}
-      </Text>
-    </View>
-  );
-};
-
-export default Header;
diff --git a/app/components/Views/Notifications/Details/NetworkFee/index.tsx b/app/components/Views/Notifications/Details/NetworkFee/index.tsx
deleted file mode 100644
index e1d962fa7e1..00000000000
--- a/app/components/Views/Notifications/Details/NetworkFee/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { View } from 'react-native';
-
-import { strings } from '../../../../../../locales/i18n';
-
-import BottomSheet, {
-  BottomSheetRef,
-} from '../../../../../component-library/components/BottomSheets/BottomSheet';
-import Text, {
-  TextColor,
-  TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
-
-import type { HalRawNotificationsWithNetworkFields } from '../../../../../util/notifications/types/halNotification';
-import {
-  getNetworkFees,
-  networkFeeDetails,
-} from '../../../../../util/notifications';
-
-type NetworkFees = {
-  transactionFee: {
-    transactionFeeInEther: string;
-    transactionFeeInUsd: string;
-  };
-  gasLimitUnits: number;
-  gasUsedUnits: number;
-  baseFee: string | null;
-  priorityFee: string | null;
-  maxFeePerGas: string | null;
-} | null;
-
-interface NotificationModalNetworkFeeProps {
-  notification: HalRawNotificationsWithNetworkFields;
-  sheetRef: React.RefObject<BottomSheetRef>;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  styles: Record<string, any>;
-  onClosed: () => void;
-}
-
-const NetworkFee = ({
-  notification,
-  sheetRef,
-  styles,
-  onClosed,
-}: NotificationModalNetworkFeeProps) => {
-  const [networkFees, setNetworkFees] = useState<NetworkFees>(null);
-  const [networkFeesError, setNetworkFeesError] = useState<boolean>(false);
-
-  const fetchNetworkFees = useCallback(async () => {
-    try {
-      const fees = await getNetworkFees(notification);
-      if (fees) {
-        setNetworkFees({
-          transactionFee: {
-            transactionFeeInEther: fees.transactionFeeInEth,
-            transactionFeeInUsd: fees.transactionFeeInUsd,
-          },
-          gasLimitUnits: fees.gasLimit,
-          gasUsedUnits: fees.gasUsed,
-          baseFee: fees.baseFee,
-          priorityFee: fees.priorityFee,
-          maxFeePerGas: fees.maxFeePerGas,
-        });
-      }
-    } catch (err) {
-      setNetworkFeesError(true);
-    }
-  }, [notification]);
-
-  useEffect(() => {
-    fetchNetworkFees();
-  }, [fetchNetworkFees]);
-
-  // TODO: Present an error screen when there is an error fetching the network fees
-  return (
-    <BottomSheet ref={sheetRef} shouldNavigateBack={false} onClose={onClosed}>
-      {!networkFeesError && (
-        <View style={styles.gasDetails}>
-          {Object.keys(networkFeeDetails).map((key, value) => (
-            <View key={key} style={styles.row}>
-              <Text color={TextColor.Alternative} variant={TextVariant.BodyMD}>
-                {strings(key)}
-              </Text>
-              <Text
-                color={TextColor.Alternative}
-                style={styles.boxRight}
-                variant={TextVariant.BodyMD}
-              >
-                {networkFees?.[networkFeeDetails[value] as keyof NetworkFees] ||
-                  'N/A'}
-              </Text>
-            </View>
-          ))}
-        </View>
-      )}
-    </BottomSheet>
-  );
-};
-
-export default NetworkFee;
diff --git a/app/components/Views/Notifications/Details/OnChain/__snapshots__/index.test.tsx.snap b/app/components/Views/Notifications/Details/OnChain/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 45c67e1e9dd..00000000000
--- a/app/components/Views/Notifications/Details/OnChain/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,1073 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`OnChainDetails should renders correctly 1`] = `
-<View
-  style={
-    {
-      "alignItems": "flex-start",
-      "flex": 1,
-    }
-  }
->
-  <View
-    style={
-      {
-        "flexDirection": "row",
-        "justifyContent": "flex-start",
-        "minWidth": "100%",
-        "paddingHorizontal": 16,
-        "paddingVertical": 8,
-      }
-    }
-  >
-    <View
-      onLayout={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "justifyContent": "center",
-          "position": "absolute",
-        }
-      }
-      testID="badge-wrapper-badge"
-    >
-      <View>
-        <View
-          placeholderStyle={
-            {
-              "backgroundColor": "#f2f4f6",
-              "borderColor": "#f2f4f6",
-              "borderRadius": 16,
-              "borderWidth": 0.5,
-              "height": 32,
-              "width": 32,
-            }
-          }
-          style={
-            {
-              "backgroundColor": "#ffffff",
-              "borderColor": "#f2f4f6",
-              "borderRadius": 16,
-              "borderWidth": 0.5,
-              "height": 32,
-              "overflow": "hidden",
-              "width": 32,
-            }
-          }
-          testID="avatar-asset-badge"
-          variant="Token"
-        >
-          <Image
-            onError={[Function]}
-            resizeMode="contain"
-            source={
-              {
-                "uri": "https://token.api.cx.metamask.io/assets/nativeCurrencyLogos/ethereum.svg",
-              }
-            }
-            style={
-              {
-                "flex": 1,
-                "height": undefined,
-                "width": undefined,
-              }
-            }
-            testID="token-avatar-image"
-          />
-        </View>
-      </View>
-      <View
-        style={
-          {
-            "alignItems": "center",
-            "aspectRatio": 1,
-            "bottom": 0,
-            "height": 0,
-            "justifyContent": "center",
-            "position": "absolute",
-            "right": 0,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          onLayout={[Function]}
-          style={
-            {
-              "alignItems": "center",
-              "aspectRatio": 1,
-              "height": "50%",
-              "justifyContent": "center",
-              "maxHeight": 24,
-              "minHeight": 8,
-              "opacity": 0,
-            }
-          }
-          testID="badge-network"
-        >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderColor": "#ffffff",
-                "borderRadius": 16,
-                "borderWidth": 2,
-                "height": 32,
-                "justifyContent": "center",
-                "overflow": "hidden",
-                "shadowColor": "#0000001a",
-                "shadowOffset": {
-                  "height": 2,
-                  "width": 0,
-                },
-                "shadowOpacity": 1,
-                "shadowRadius": 4,
-                "transform": [
-                  {
-                    "scale": 1,
-                  },
-                ],
-                "width": 32,
-              }
-            }
-          >
-            <Image
-              onError={[Function]}
-              resizeMode="contain"
-              source="https://raw.githubusercontent.com/MetaMask/contract-metadata/master/images/stETH.svg"
-              style={
-                {
-                  "height": 32,
-                  "width": 32,
-                }
-              }
-              testID="network-avatar-image"
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      style={
-        {
-          "alignSelf": "flex-start",
-        }
-      }
-    >
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#141618",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 16,
-            "fontWeight": "500",
-            "letterSpacing": 0,
-            "lineHeight": 24,
-          }
-        }
-      >
-        Staked
-      </Text>
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#6a737d",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "letterSpacing": 0,
-            "lineHeight": 22,
-          }
-        }
-      >
-        Ethereum
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "alignSelf": "flex-start",
-          "flexDirection": "row",
-          "marginLeft": "auto",
-        }
-      }
-    >
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#141618",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 16,
-            "fontWeight": "500",
-            "letterSpacing": 0,
-            "lineHeight": 24,
-          }
-        }
-      >
-        330303634023928032
-      </Text>
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#6a737d",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "letterSpacing": 0,
-            "lineHeight": 22,
-          }
-        }
-      />
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "flexDirection": "row",
-        "justifyContent": "flex-start",
-        "minWidth": "100%",
-        "paddingHorizontal": 16,
-        "paddingVertical": 8,
-      }
-    }
-  >
-    <View
-      onLayout={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "justifyContent": "center",
-          "position": "absolute",
-        }
-      }
-      testID="badge-wrapper-badge"
-    >
-      <View>
-        <View
-          placeholderStyle={
-            {
-              "backgroundColor": "#f2f4f6",
-              "borderColor": "#f2f4f6",
-              "borderRadius": 16,
-              "borderWidth": 0.5,
-              "height": 32,
-              "width": 32,
-            }
-          }
-          style={
-            {
-              "backgroundColor": "#ffffff",
-              "borderColor": "#f2f4f6",
-              "borderRadius": 16,
-              "borderWidth": 0.5,
-              "height": 32,
-              "overflow": "hidden",
-              "width": 32,
-            }
-          }
-          testID="avatar-asset-badge"
-          variant="Token"
-        >
-          <Image
-            onError={[Function]}
-            resizeMode="contain"
-            source={
-              {
-                "uri": "https://raw.githubusercontent.com/MetaMask/contract-metadata/master/images/stETH.svg",
-              }
-            }
-            style={
-              {
-                "flex": 1,
-                "height": undefined,
-                "width": undefined,
-              }
-            }
-            testID="token-avatar-image"
-          />
-        </View>
-      </View>
-      <View
-        style={
-          {
-            "alignItems": "center",
-            "aspectRatio": 1,
-            "bottom": 0,
-            "height": 0,
-            "justifyContent": "center",
-            "position": "absolute",
-            "right": 0,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          onLayout={[Function]}
-          style={
-            {
-              "alignItems": "center",
-              "aspectRatio": 1,
-              "height": "50%",
-              "justifyContent": "center",
-              "maxHeight": 24,
-              "minHeight": 8,
-              "opacity": 0,
-            }
-          }
-          testID="badge-network"
-        >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderColor": "#ffffff",
-                "borderRadius": 16,
-                "borderWidth": 2,
-                "height": 32,
-                "justifyContent": "center",
-                "overflow": "hidden",
-                "shadowColor": "#0000001a",
-                "shadowOffset": {
-                  "height": 2,
-                  "width": 0,
-                },
-                "shadowOpacity": 1,
-                "shadowRadius": 4,
-                "transform": [
-                  {
-                    "scale": 1,
-                  },
-                ],
-                "width": 32,
-              }
-            }
-          >
-            <Image
-              onError={[Function]}
-              resizeMode="contain"
-              source="https://raw.githubusercontent.com/MetaMask/contract-metadata/master/images/stETH.svg"
-              style={
-                {
-                  "height": 32,
-                  "width": 32,
-                }
-              }
-              testID="network-avatar-image"
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      style={
-        {
-          "alignSelf": "flex-start",
-        }
-      }
-    >
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#141618",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 16,
-            "fontWeight": "500",
-            "letterSpacing": 0,
-            "lineHeight": 24,
-          }
-        }
-      >
-        Received
-      </Text>
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#6a737d",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "letterSpacing": 0,
-            "lineHeight": 22,
-          }
-        }
-      >
-        Liquid staked Ether 2.0
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "alignSelf": "flex-start",
-          "flexDirection": "row",
-          "marginLeft": "auto",
-        }
-      }
-    >
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#141618",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 16,
-            "fontWeight": "500",
-            "letterSpacing": 0,
-            "lineHeight": 24,
-          }
-        }
-      >
-        330303634023928032
-      </Text>
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#6a737d",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "letterSpacing": 0,
-            "lineHeight": 22,
-          }
-        }
-      />
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "flexDirection": "row",
-        "justifyContent": "flex-start",
-        "minWidth": "100%",
-        "paddingHorizontal": 16,
-        "paddingVertical": 8,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#1c82341a",
-          "borderRadius": 16,
-          "height": 32,
-          "justifyContent": "center",
-          "overflow": "hidden",
-          "position": "absolute",
-          "width": 32,
-        }
-      }
-    >
-      <SvgMock
-        color="#1c8234"
-        height={20}
-        name="Check"
-        style={
-          {
-            "height": 20,
-            "width": 20,
-          }
-        }
-        width={20}
-      />
-    </View>
-    <View
-      style={
-        {
-          "alignSelf": "flex-start",
-        }
-      }
-    >
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#141618",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 16,
-            "fontWeight": "500",
-            "letterSpacing": 0,
-            "lineHeight": 24,
-          }
-        }
-      >
-        Status
-      </Text>
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#6a737d",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "letterSpacing": 0,
-            "lineHeight": 22,
-          }
-        }
-      >
-        Confirmed
-      </Text>
-    </View>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        {
-          "bottom": 24,
-          "left": 24,
-          "right": 24,
-          "top": 24,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        {
-          "alignSelf": "flex-start",
-          "flexDirection": "row",
-          "marginLeft": "auto",
-        }
-      }
-    >
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "alignSelf": "flex-start",
-            "color": "#0376c9",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "letterSpacing": 0,
-            "lineHeight": 22,
-          }
-        }
-      >
-        Transaction ID
-      </Text>
-      <SvgMock
-        color="#0376c9"
-        height={20}
-        name="Copy"
-        style={
-          {
-            "height": 20,
-            "marginLeft": 8,
-            "width": 20,
-          }
-        }
-        width={20}
-      />
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "flexDirection": "row",
-        "justifyContent": "flex-start",
-        "minWidth": "100%",
-        "paddingHorizontal": 16,
-        "paddingVertical": 8,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "borderColor": "#f2f4f6",
-          "borderRadius": 16,
-          "borderWidth": 0.5,
-          "height": 32,
-          "overflow": "hidden",
-          "width": 32,
-        }
-      }
-    />
-    <View
-      style={
-        {
-          "alignSelf": "flex-start",
-        }
-      }
-    >
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#141618",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 16,
-            "fontWeight": "500",
-            "letterSpacing": 0,
-            "lineHeight": 24,
-          }
-        }
-      >
-        Staking Provider
-      </Text>
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#6a737d",
-            "fontFamily": "Euclid Circular B",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "letterSpacing": 0,
-            "lineHeight": 22,
-          }
-        }
-      >
-        Lido-staked ETH
-      </Text>
-    </View>
-  </View>
-  <View
-    onLayout={[Function]}
-    style={
-      [
-        {
-          "bottom": 0,
-          "justifyContent": "flex-end",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        },
-        {
-          "paddingBottom": 0,
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "backgroundColor": "#00000099",
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "opacity": 0,
-          },
-        ]
-      }
-    >
-      <TouchableOpacity
-        onPress={[Function]}
-        style={
-          {
-            "flex": 1,
-          }
-        }
-      />
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "paddingBottom": 0,
-          },
-        ]
-      }
-    >
-      <View
-        collapsable={false}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onLayout={[Function]}
-        style={
-          [
-            {
-              "backgroundColor": "#ffffff",
-              "borderColor": "#bbc0c566",
-              "borderTopLeftRadius": 8,
-              "borderTopRightRadius": 8,
-              "borderWidth": 1,
-              "maxHeight": 1334,
-              "overflow": "hidden",
-              "paddingBottom": 0,
-              "shadowColor": "#0000001a",
-              "shadowOffset": {
-                "height": 2,
-                "width": 0,
-              },
-              "shadowOpacity": 1,
-              "shadowRadius": 40,
-            },
-            {
-              "transform": [
-                {
-                  "translateY": 1334,
-                },
-              ],
-            },
-          ]
-        }
-      >
-        <View
-          style={
-            {
-              "alignItems": "center",
-              "alignSelf": "stretch",
-              "padding": 4,
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "backgroundColor": "#bbc0c566",
-                "borderRadius": 2,
-                "height": 4,
-                "width": 40,
-              }
-            }
-          />
-        </View>
-        <View
-          style={
-            {
-              "marginBottom": 80,
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
-                "minWidth": "100%",
-                "paddingHorizontal": 16,
-                "paddingVertical": 8,
-              }
-            }
-          >
-            <Text
-              accessibilityRole="text"
-              style={
-                {
-                  "color": "#6a737d",
-                  "fontFamily": "Euclid Circular B",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
-                }
-              }
-            >
-              Gas Limit (Units)
-            </Text>
-            <Text
-              accessibilityRole="text"
-              style={
-                {
-                  "color": "#6a737d",
-                  "fontFamily": "Euclid Circular B",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
-                  "marginLeft": "auto",
-                }
-              }
-            >
-              N/A
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
-                "minWidth": "100%",
-                "paddingHorizontal": 16,
-                "paddingVertical": 8,
-              }
-            }
-          >
-            <Text
-              accessibilityRole="text"
-              style={
-                {
-                  "color": "#6a737d",
-                  "fontFamily": "Euclid Circular B",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
-                }
-              }
-            >
-              Gas Used (Units)
-            </Text>
-            <Text
-              accessibilityRole="text"
-              style={
-                {
-                  "color": "#6a737d",
-                  "fontFamily": "Euclid Circular B",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
-                  "marginLeft": "auto",
-                }
-              }
-            >
-              N/A
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
-                "minWidth": "100%",
-                "paddingHorizontal": 16,
-                "paddingVertical": 8,
-              }
-            }
-          >
-            <Text
-              accessibilityRole="text"
-              style={
-                {
-                  "color": "#6a737d",
-                  "fontFamily": "Euclid Circular B",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
-                }
-              }
-            >
-              Base Fee (GWEI)
-            </Text>
-            <Text
-              accessibilityRole="text"
-              style={
-                {
-                  "color": "#6a737d",
-                  "fontFamily": "Euclid Circular B",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
-                  "marginLeft": "auto",
-                }
-              }
-            >
-              N/A
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
-                "minWidth": "100%",
-                "paddingHorizontal": 16,
-                "paddingVertical": 8,
-              }
-            }
-          >
-            <Text
-              accessibilityRole="text"
-              style={
-                {
-                  "color": "#6a737d",
-                  "fontFamily": "Euclid Circular B",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
-                }
-              }
-            >
-              Priority Fee (GWEI)
-            </Text>
-            <Text
-              accessibilityRole="text"
-              style={
-                {
-                  "color": "#6a737d",
-                  "fontFamily": "Euclid Circular B",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
-                  "marginLeft": "auto",
-                }
-              }
-            >
-              N/A
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
-                "minWidth": "100%",
-                "paddingHorizontal": 16,
-                "paddingVertical": 8,
-              }
-            }
-          >
-            <Text
-              accessibilityRole="text"
-              style={
-                {
-                  "color": "#6a737d",
-                  "fontFamily": "Euclid Circular B",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
-                }
-              }
-            >
-              Max Fee Per Gas
-            </Text>
-            <Text
-              accessibilityRole="text"
-              style={
-                {
-                  "color": "#6a737d",
-                  "fontFamily": "Euclid Circular B",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
-                  "marginLeft": "auto",
-                }
-              }
-            >
-              N/A
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-  <TouchableOpacity
-    accessibilityRole="button"
-    accessible={true}
-    activeOpacity={1}
-    onPress={[Function]}
-    onPressIn={[Function]}
-    onPressOut={[Function]}
-    style={
-      {
-        "alignItems": "center",
-        "alignSelf": "center",
-        "backgroundColor": "#ffffff",
-        "borderColor": "#0376c9",
-        "borderRadius": 20,
-        "borderWidth": 1,
-        "bottom": 0,
-        "flexDirection": "row",
-        "height": 40,
-        "justifyContent": "center",
-        "margin": 16,
-        "paddingHorizontal": 16,
-        "position": "absolute",
-        "width": "90%",
-      }
-    }
-    variant="Secondary"
-  >
-    <Text
-      accessibilityRole="text"
-      style={
-        {
-          "color": "#0376c9",
-          "fontFamily": "Euclid Circular B",
-          "fontSize": 14,
-          "fontWeight": "400",
-          "letterSpacing": 0,
-          "lineHeight": 22,
-        }
-      }
-    >
-      View on Etherscan
-    </Text>
-    <SvgMock
-      color="#0376c9"
-      height={16}
-      name="Arrow2Upright"
-      style={
-        {
-          "height": 16,
-          "marginLeft": 8,
-          "width": 16,
-        }
-      }
-      width={16}
-    />
-  </TouchableOpacity>
-</View>
-`;
diff --git a/app/components/Views/Notifications/Details/OnChain/index.test.tsx b/app/components/Views/Notifications/Details/OnChain/index.test.tsx
deleted file mode 100644
index d96e0d0898e..00000000000
--- a/app/components/Views/Notifications/Details/OnChain/index.test.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react';
-import { NavigationProp, ParamListBase } from '@react-navigation/native';
-import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
-import { render } from '@testing-library/react-native';
-
-import OnChainDetails from '.';
-import { createStyles } from '../styles';
-import MOCK_NOTIFICATIONS from '../../../../../components/UI/Notification/__mocks__/mock_notifications';
-import { backgroundState } from '../../../../../util/test/initial-root-state';
-import { mockTheme } from '../../../../../util/theme';
-import { HalRawNotification } from '../../../../../util/notifications/types';
-import { AvatarAccountType } from '../../../../../component-library/components/Avatars/Avatar';
-
-const mockInitialState = {
-  settings: {
-    useBlockieIcon: false,
-  },
-  notificationsSettings: {
-    isEnabled: true,
-  },
-  engine: {
-    backgroundState,
-  },
-};
-const accountAvatarType = AvatarAccountType.Blockies;
-const copyToClipboard = jest.fn();
-
-jest.mock('@react-navigation/native');
-jest.mock('react-native-safe-area-context', () => {
-  const inset = { top: 0, right: 0, bottom: 0, left: 0 };
-  const frame = { width: 0, height: 0, x: 0, y: 0 };
-  return {
-    SafeAreaProvider: jest.fn().mockImplementation(({ children }) => children),
-    SafeAreaConsumer: jest
-      .fn()
-      .mockImplementation(({ children }) => children(inset)),
-    useSafeAreaInsets: jest.fn().mockImplementation(() => inset),
-    useSafeAreaFrame: jest.fn().mockImplementation(() => frame),
-  };
-});
-
-describe('OnChainDetails', () => {
-  const mockStore = configureMockStore();
-  const store = mockStore(mockInitialState);
-
-  let navigation: NavigationProp<ParamListBase>;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let styles: Record<string, any>;
-
-  beforeEach(() => {
-    navigation = {
-      navigate: jest.fn(),
-    } as unknown as NavigationProp<ParamListBase>;
-    styles = createStyles(mockTheme);
-  });
-
-  it('should renders correctly', () => {
-    const { toJSON } = render(
-      <Provider store={store}>
-        <OnChainDetails
-          notification={MOCK_NOTIFICATIONS[1] as HalRawNotification}
-          styles={styles}
-          theme={mockTheme}
-          accountAvatarType={accountAvatarType}
-          navigation={navigation}
-          copyToClipboard={copyToClipboard}
-        />
-      </Provider>,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders the notification details correctly', () => {
-    const { getByText } = render(
-      <Provider store={store}>
-        <OnChainDetails
-          notification={MOCK_NOTIFICATIONS[1] as HalRawNotification}
-          styles={styles}
-          theme={mockTheme}
-          accountAvatarType={accountAvatarType}
-          navigation={navigation}
-          copyToClipboard={copyToClipboard}
-        />
-      </Provider>,
-    );
-    expect(getByText('Liquid staked Ether 2.0')).toBeTruthy();
-  });
-});
diff --git a/app/components/Views/Notifications/Details/OnChain/index.tsx b/app/components/Views/Notifications/Details/OnChain/index.tsx
deleted file mode 100644
index c96d5a58fcf..00000000000
--- a/app/components/Views/Notifications/Details/OnChain/index.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useCallback, useRef, useState } from 'react';
-import { Linking, View } from 'react-native';
-import { useSelector } from 'react-redux';
-import { NavigationProp, ParamListBase } from '@react-navigation/native';
-import { strings } from '../../../../../../locales/i18n';
-
-import {
-  getRowDetails,
-  HalRawNotification,
-  HalRawNotificationsWithNetworkFields,
-  Notification,
-  TRIGGER_TYPES,
-} from '../../../../../util/notifications';
-
-import { AvatarAccountType } from '../../../../../component-library/components/Avatars/Avatar';
-import { BottomSheetRef } from '../../../../../component-library/components/BottomSheets/BottomSheet';
-import Button, {
-  ButtonVariants,
-} from '../../../../../component-library/components/Buttons/Button';
-import { IconName } from '../../../../../component-library/components/Icons/Icon';
-
-import { Theme } from '../../../../../util/theme/models';
-import useDetails from '../hooks/useDetails';
-import NetworkFee from '../NetworkFee';
-import {
-  selectNetworkConfigurations,
-  selectProviderConfig,
-} from '../../../../../selectors/networkController';
-
-import useBlockExplorer from '../../../../../components/UI/Swaps/utils/useBlockExplorer.js';
-
-interface OnChainDetailsProps {
-  notification: HalRawNotification;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  styles: Record<string, any>;
-  theme: Theme;
-  accountAvatarType?: AvatarAccountType;
-  navigation: NavigationProp<ParamListBase>;
-  copyToClipboard: (type: string, selectedString?: string) => Promise<void>;
-}
-
-const OnChainDetails = ({
-  notification,
-  styles,
-  theme,
-  accountAvatarType,
-  navigation,
-  copyToClipboard,
-}: OnChainDetailsProps) => {
-  const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
-  const providerConfig = useSelector(selectProviderConfig);
-  const networkConfigurations = useSelector(selectNetworkConfigurations);
-  const explorer = useBlockExplorer(providerConfig, networkConfigurations);
-
-  const handleExplorerLinkPress = useCallback((url: string) => {
-    Linking.openURL(url);
-  }, []);
-
-  const sheetRef = useRef<BottomSheetRef>(null);
-
-  const notificationDetails = getRowDetails(
-    notification as Notification,
-  )?.details;
-
-  const {
-    renderNFT,
-    renderTransfer,
-    renderStake,
-    renderStakeReadyToBeWithdrawn,
-    renderSwap,
-  } = useDetails({
-    theme,
-    accountAvatarType,
-    navigation,
-    copyToClipboard,
-  });
-
-  const renderNotificationDetails = useCallback(() => {
-    switch (notification.type) {
-      case TRIGGER_TYPES.ERC721_SENT:
-      case TRIGGER_TYPES.ERC721_RECEIVED:
-      case TRIGGER_TYPES.ERC1155_SENT:
-      case TRIGGER_TYPES.ERC1155_RECEIVED:
-        return renderNFT(notificationDetails);
-      case TRIGGER_TYPES.LIDO_STAKE_COMPLETED:
-      case TRIGGER_TYPES.LIDO_WITHDRAWAL_COMPLETED:
-      case TRIGGER_TYPES.LIDO_WITHDRAWAL_REQUESTED:
-      case TRIGGER_TYPES.ROCKETPOOL_STAKE_COMPLETED:
-      case TRIGGER_TYPES.ROCKETPOOL_UNSTAKE_COMPLETED:
-        return renderStake(notificationDetails);
-      case TRIGGER_TYPES.ERC20_RECEIVED:
-        return renderTransfer(notificationDetails);
-      case TRIGGER_TYPES.LIDO_STAKE_READY_TO_BE_WITHDRAWN:
-        return renderStakeReadyToBeWithdrawn(notificationDetails);
-      case TRIGGER_TYPES.METAMASK_SWAP_COMPLETED:
-        return renderSwap(notificationDetails);
-      case TRIGGER_TYPES.ERC20_SENT:
-      default:
-        return renderTransfer(notificationDetails);
-    }
-  }, [
-    notification.type,
-    notificationDetails,
-    renderNFT,
-    renderStake,
-    renderStakeReadyToBeWithdrawn,
-    renderSwap,
-    renderTransfer,
-  ]);
-
-  return (
-    <View style={styles.renderContainer}>
-      {renderNotificationDetails()}
-      {!isCollapsed && (
-        <NetworkFee
-          sheetRef={sheetRef}
-          notification={notification as HalRawNotificationsWithNetworkFields}
-          styles={styles}
-          onClosed={() => setIsCollapsed(true)}
-        />
-      )}
-      <Button
-        variant={ButtonVariants.Secondary}
-        label={strings('transactions.view_on_etherscan')}
-        style={styles.ctaBtn}
-        onPress={() =>
-          handleExplorerLinkPress(explorer.tx(notification.tx_hash))
-        }
-        endIconName={IconName.Arrow2Upright}
-      />
-    </View>
-  );
-};
-
-export default OnChainDetails;
diff --git a/app/components/Views/Notifications/Details/__snapshots__/index.test.tsx.snap b/app/components/Views/Notifications/Details/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 1a11adc1d25..00000000000
--- a/app/components/Views/Notifications/Details/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,1089 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationsDetails should renders correctly 1`] = `
-<RCTScrollView
-  collapsable={false}
-  contentContainerStyle={
-    {
-      "alignItems": "flex-start",
-      "backgroundColor": "#ffffff",
-      "flex": 1,
-      "paddingTop": 16,
-    }
-  }
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
->
-  <View>
-    <View
-      style={
-        {
-          "alignItems": "flex-start",
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "flexDirection": "row",
-            "justifyContent": "flex-start",
-            "minWidth": "100%",
-            "paddingHorizontal": 16,
-            "paddingVertical": 8,
-          }
-        }
-      >
-        <View
-          onLayout={[Function]}
-          style={
-            {
-              "alignItems": "center",
-              "alignSelf": "flex-start",
-              "justifyContent": "center",
-              "position": "absolute",
-            }
-          }
-          testID="badge-wrapper-badge"
-        >
-          <View>
-            <View
-              placeholderStyle={
-                {
-                  "backgroundColor": "#f2f4f6",
-                  "borderColor": "#f2f4f6",
-                  "borderRadius": 16,
-                  "borderWidth": 0.5,
-                  "height": 32,
-                  "width": 32,
-                }
-              }
-              style={
-                {
-                  "backgroundColor": "#ffffff",
-                  "borderColor": "#f2f4f6",
-                  "borderRadius": 16,
-                  "borderWidth": 0.5,
-                  "height": 32,
-                  "overflow": "hidden",
-                  "width": 32,
-                }
-              }
-              testID="avatar-asset-badge"
-              variant="Token"
-            >
-              <Image
-                onError={[Function]}
-                resizeMode="contain"
-                source={
-                  {
-                    "uri": "https://token.api.cx.metamask.io/assets/nativeCurrencyLogos/ethereum.svg",
-                  }
-                }
-                style={
-                  {
-                    "flex": 1,
-                    "height": undefined,
-                    "width": undefined,
-                  }
-                }
-                testID="token-avatar-image"
-              />
-            </View>
-          </View>
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "aspectRatio": 1,
-                "bottom": 0,
-                "height": 0,
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": 0,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              onLayout={[Function]}
-              style={
-                {
-                  "alignItems": "center",
-                  "aspectRatio": 1,
-                  "height": "50%",
-                  "justifyContent": "center",
-                  "maxHeight": 24,
-                  "minHeight": 8,
-                  "opacity": 0,
-                }
-              }
-              testID="badge-network"
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "backgroundColor": "#ffffff",
-                    "borderColor": "#ffffff",
-                    "borderRadius": 16,
-                    "borderWidth": 2,
-                    "height": 32,
-                    "justifyContent": "center",
-                    "overflow": "hidden",
-                    "shadowColor": "#0000001a",
-                    "shadowOffset": {
-                      "height": 2,
-                      "width": 0,
-                    },
-                    "shadowOpacity": 1,
-                    "shadowRadius": 4,
-                    "transform": [
-                      {
-                        "scale": 1,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <Image
-                  onError={[Function]}
-                  resizeMode="contain"
-                  source="https://raw.githubusercontent.com/MetaMask/contract-metadata/master/images/stETH.svg"
-                  style={
-                    {
-                      "height": 32,
-                      "width": 32,
-                    }
-                  }
-                  testID="network-avatar-image"
-                />
-              </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            {
-              "alignSelf": "flex-start",
-            }
-          }
-        >
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#141618",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 16,
-                "fontWeight": "500",
-                "letterSpacing": 0,
-                "lineHeight": 24,
-              }
-            }
-          >
-            Staked
-          </Text>
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#6a737d",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0,
-                "lineHeight": 22,
-              }
-            }
-          >
-            Ethereum
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "alignSelf": "flex-start",
-              "flexDirection": "row",
-              "marginLeft": "auto",
-            }
-          }
-        >
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#141618",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 16,
-                "fontWeight": "500",
-                "letterSpacing": 0,
-                "lineHeight": 24,
-              }
-            }
-          >
-            330303634023928032
-          </Text>
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#6a737d",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0,
-                "lineHeight": 22,
-              }
-            }
-          />
-        </View>
-      </View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-            "justifyContent": "flex-start",
-            "minWidth": "100%",
-            "paddingHorizontal": 16,
-            "paddingVertical": 8,
-          }
-        }
-      >
-        <View
-          onLayout={[Function]}
-          style={
-            {
-              "alignItems": "center",
-              "alignSelf": "flex-start",
-              "justifyContent": "center",
-              "position": "absolute",
-            }
-          }
-          testID="badge-wrapper-badge"
-        >
-          <View>
-            <View
-              placeholderStyle={
-                {
-                  "backgroundColor": "#f2f4f6",
-                  "borderColor": "#f2f4f6",
-                  "borderRadius": 16,
-                  "borderWidth": 0.5,
-                  "height": 32,
-                  "width": 32,
-                }
-              }
-              style={
-                {
-                  "backgroundColor": "#ffffff",
-                  "borderColor": "#f2f4f6",
-                  "borderRadius": 16,
-                  "borderWidth": 0.5,
-                  "height": 32,
-                  "overflow": "hidden",
-                  "width": 32,
-                }
-              }
-              testID="avatar-asset-badge"
-              variant="Token"
-            >
-              <Image
-                onError={[Function]}
-                resizeMode="contain"
-                source={
-                  {
-                    "uri": "https://raw.githubusercontent.com/MetaMask/contract-metadata/master/images/stETH.svg",
-                  }
-                }
-                style={
-                  {
-                    "flex": 1,
-                    "height": undefined,
-                    "width": undefined,
-                  }
-                }
-                testID="token-avatar-image"
-              />
-            </View>
-          </View>
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "aspectRatio": 1,
-                "bottom": 0,
-                "height": 0,
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "transform": [
-                  {
-                    "translateX": 0,
-                  },
-                  {
-                    "translateY": 0,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              onLayout={[Function]}
-              style={
-                {
-                  "alignItems": "center",
-                  "aspectRatio": 1,
-                  "height": "50%",
-                  "justifyContent": "center",
-                  "maxHeight": 24,
-                  "minHeight": 8,
-                  "opacity": 0,
-                }
-              }
-              testID="badge-network"
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "backgroundColor": "#ffffff",
-                    "borderColor": "#ffffff",
-                    "borderRadius": 16,
-                    "borderWidth": 2,
-                    "height": 32,
-                    "justifyContent": "center",
-                    "overflow": "hidden",
-                    "shadowColor": "#0000001a",
-                    "shadowOffset": {
-                      "height": 2,
-                      "width": 0,
-                    },
-                    "shadowOpacity": 1,
-                    "shadowRadius": 4,
-                    "transform": [
-                      {
-                        "scale": 1,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <Image
-                  onError={[Function]}
-                  resizeMode="contain"
-                  source="https://raw.githubusercontent.com/MetaMask/contract-metadata/master/images/stETH.svg"
-                  style={
-                    {
-                      "height": 32,
-                      "width": 32,
-                    }
-                  }
-                  testID="network-avatar-image"
-                />
-              </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            {
-              "alignSelf": "flex-start",
-            }
-          }
-        >
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#141618",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 16,
-                "fontWeight": "500",
-                "letterSpacing": 0,
-                "lineHeight": 24,
-              }
-            }
-          >
-            Received
-          </Text>
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#6a737d",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0,
-                "lineHeight": 22,
-              }
-            }
-          >
-            Liquid staked Ether 2.0
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "alignSelf": "flex-start",
-              "flexDirection": "row",
-              "marginLeft": "auto",
-            }
-          }
-        >
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#141618",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 16,
-                "fontWeight": "500",
-                "letterSpacing": 0,
-                "lineHeight": 24,
-              }
-            }
-          >
-            330303634023928032
-          </Text>
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#6a737d",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0,
-                "lineHeight": 22,
-              }
-            }
-          />
-        </View>
-      </View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-            "justifyContent": "flex-start",
-            "minWidth": "100%",
-            "paddingHorizontal": 16,
-            "paddingVertical": 8,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "alignItems": "center",
-              "alignSelf": "flex-start",
-              "backgroundColor": "#1c82341a",
-              "borderRadius": 16,
-              "height": 32,
-              "justifyContent": "center",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": 32,
-            }
-          }
-        >
-          <SvgMock
-            color="#1c8234"
-            height={20}
-            name="Check"
-            style={
-              {
-                "height": 20,
-                "width": 20,
-              }
-            }
-            width={20}
-          />
-        </View>
-        <View
-          style={
-            {
-              "alignSelf": "flex-start",
-            }
-          }
-        >
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#141618",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 16,
-                "fontWeight": "500",
-                "letterSpacing": 0,
-                "lineHeight": 24,
-              }
-            }
-          >
-            Status
-          </Text>
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#6a737d",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0,
-                "lineHeight": 22,
-              }
-            }
-          >
-            Confirmed
-          </Text>
-        </View>
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 24,
-              "left": 24,
-              "right": 24,
-              "top": 24,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "alignSelf": "flex-start",
-              "flexDirection": "row",
-              "marginLeft": "auto",
-            }
-          }
-        >
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "alignSelf": "flex-start",
-                "color": "#0376c9",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0,
-                "lineHeight": 22,
-              }
-            }
-          >
-            Transaction ID
-          </Text>
-          <SvgMock
-            color="#0376c9"
-            height={20}
-            name="Copy"
-            style={
-              {
-                "height": 20,
-                "marginLeft": 8,
-                "width": 20,
-              }
-            }
-            width={20}
-          />
-        </View>
-      </View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-            "justifyContent": "flex-start",
-            "minWidth": "100%",
-            "paddingHorizontal": 16,
-            "paddingVertical": 8,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "borderColor": "#f2f4f6",
-              "borderRadius": 16,
-              "borderWidth": 0.5,
-              "height": 32,
-              "overflow": "hidden",
-              "width": 32,
-            }
-          }
-        />
-        <View
-          style={
-            {
-              "alignSelf": "flex-start",
-            }
-          }
-        >
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#141618",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 16,
-                "fontWeight": "500",
-                "letterSpacing": 0,
-                "lineHeight": 24,
-              }
-            }
-          >
-            Staking Provider
-          </Text>
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#6a737d",
-                "fontFamily": "Euclid Circular B",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0,
-                "lineHeight": 22,
-              }
-            }
-          >
-            Lido-staked ETH
-          </Text>
-        </View>
-      </View>
-      <View
-        onLayout={[Function]}
-        style={
-          [
-            {
-              "bottom": 0,
-              "justifyContent": "flex-end",
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "paddingBottom": 0,
-            },
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "backgroundColor": "#00000099",
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "opacity": 0,
-              },
-            ]
-          }
-        >
-          <TouchableOpacity
-            onPress={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
-          />
-        </View>
-        <View
-          onLayout={[Function]}
-          style={
-            [
-              {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-              },
-              {
-                "paddingBottom": 0,
-              },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onLayout={[Function]}
-            style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "borderColor": "#bbc0c566",
-                  "borderTopLeftRadius": 8,
-                  "borderTopRightRadius": 8,
-                  "borderWidth": 1,
-                  "maxHeight": 1334,
-                  "overflow": "hidden",
-                  "paddingBottom": 0,
-                  "shadowColor": "#0000001a",
-                  "shadowOffset": {
-                    "height": 2,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 1,
-                  "shadowRadius": 40,
-                },
-                {
-                  "transform": [
-                    {
-                      "translateY": 1334,
-                    },
-                  ],
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "stretch",
-                  "padding": 4,
-                }
-              }
-            >
-              <View
-                style={
-                  {
-                    "backgroundColor": "#bbc0c566",
-                    "borderRadius": 2,
-                    "height": 4,
-                    "width": 40,
-                  }
-                }
-              />
-            </View>
-            <View
-              style={
-                {
-                  "marginBottom": 80,
-                }
-              }
-            >
-              <View
-                style={
-                  {
-                    "flexDirection": "row",
-                    "justifyContent": "flex-start",
-                    "minWidth": "100%",
-                    "paddingHorizontal": 16,
-                    "paddingVertical": 8,
-                  }
-                }
-              >
-                <Text
-                  accessibilityRole="text"
-                  style={
-                    {
-                      "color": "#6a737d",
-                      "fontFamily": "Euclid Circular B",
-                      "fontSize": 14,
-                      "fontWeight": "400",
-                      "letterSpacing": 0,
-                      "lineHeight": 22,
-                    }
-                  }
-                >
-                  Gas Limit (Units)
-                </Text>
-                <Text
-                  accessibilityRole="text"
-                  style={
-                    {
-                      "color": "#6a737d",
-                      "fontFamily": "Euclid Circular B",
-                      "fontSize": 14,
-                      "fontWeight": "400",
-                      "letterSpacing": 0,
-                      "lineHeight": 22,
-                      "marginLeft": "auto",
-                    }
-                  }
-                >
-                  N/A
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "flexDirection": "row",
-                    "justifyContent": "flex-start",
-                    "minWidth": "100%",
-                    "paddingHorizontal": 16,
-                    "paddingVertical": 8,
-                  }
-                }
-              >
-                <Text
-                  accessibilityRole="text"
-                  style={
-                    {
-                      "color": "#6a737d",
-                      "fontFamily": "Euclid Circular B",
-                      "fontSize": 14,
-                      "fontWeight": "400",
-                      "letterSpacing": 0,
-                      "lineHeight": 22,
-                    }
-                  }
-                >
-                  Gas Used (Units)
-                </Text>
-                <Text
-                  accessibilityRole="text"
-                  style={
-                    {
-                      "color": "#6a737d",
-                      "fontFamily": "Euclid Circular B",
-                      "fontSize": 14,
-                      "fontWeight": "400",
-                      "letterSpacing": 0,
-                      "lineHeight": 22,
-                      "marginLeft": "auto",
-                    }
-                  }
-                >
-                  N/A
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "flexDirection": "row",
-                    "justifyContent": "flex-start",
-                    "minWidth": "100%",
-                    "paddingHorizontal": 16,
-                    "paddingVertical": 8,
-                  }
-                }
-              >
-                <Text
-                  accessibilityRole="text"
-                  style={
-                    {
-                      "color": "#6a737d",
-                      "fontFamily": "Euclid Circular B",
-                      "fontSize": 14,
-                      "fontWeight": "400",
-                      "letterSpacing": 0,
-                      "lineHeight": 22,
-                    }
-                  }
-                >
-                  Base Fee (GWEI)
-                </Text>
-                <Text
-                  accessibilityRole="text"
-                  style={
-                    {
-                      "color": "#6a737d",
-                      "fontFamily": "Euclid Circular B",
-                      "fontSize": 14,
-                      "fontWeight": "400",
-                      "letterSpacing": 0,
-                      "lineHeight": 22,
-                      "marginLeft": "auto",
-                    }
-                  }
-                >
-                  N/A
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "flexDirection": "row",
-                    "justifyContent": "flex-start",
-                    "minWidth": "100%",
-                    "paddingHorizontal": 16,
-                    "paddingVertical": 8,
-                  }
-                }
-              >
-                <Text
-                  accessibilityRole="text"
-                  style={
-                    {
-                      "color": "#6a737d",
-                      "fontFamily": "Euclid Circular B",
-                      "fontSize": 14,
-                      "fontWeight": "400",
-                      "letterSpacing": 0,
-                      "lineHeight": 22,
-                    }
-                  }
-                >
-                  Priority Fee (GWEI)
-                </Text>
-                <Text
-                  accessibilityRole="text"
-                  style={
-                    {
-                      "color": "#6a737d",
-                      "fontFamily": "Euclid Circular B",
-                      "fontSize": 14,
-                      "fontWeight": "400",
-                      "letterSpacing": 0,
-                      "lineHeight": 22,
-                      "marginLeft": "auto",
-                    }
-                  }
-                >
-                  N/A
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "flexDirection": "row",
-                    "justifyContent": "flex-start",
-                    "minWidth": "100%",
-                    "paddingHorizontal": 16,
-                    "paddingVertical": 8,
-                  }
-                }
-              >
-                <Text
-                  accessibilityRole="text"
-                  style={
-                    {
-                      "color": "#6a737d",
-                      "fontFamily": "Euclid Circular B",
-                      "fontSize": 14,
-                      "fontWeight": "400",
-                      "letterSpacing": 0,
-                      "lineHeight": 22,
-                    }
-                  }
-                >
-                  Max Fee Per Gas
-                </Text>
-                <Text
-                  accessibilityRole="text"
-                  style={
-                    {
-                      "color": "#6a737d",
-                      "fontFamily": "Euclid Circular B",
-                      "fontSize": 14,
-                      "fontWeight": "400",
-                      "letterSpacing": 0,
-                      "lineHeight": 22,
-                      "marginLeft": "auto",
-                    }
-                  }
-                >
-                  N/A
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-      <TouchableOpacity
-        accessibilityRole="button"
-        accessible={true}
-        activeOpacity={1}
-        onPress={[Function]}
-        onPressIn={[Function]}
-        onPressOut={[Function]}
-        style={
-          {
-            "alignItems": "center",
-            "alignSelf": "center",
-            "backgroundColor": "#ffffff",
-            "borderColor": "#0376c9",
-            "borderRadius": 20,
-            "borderWidth": 1,
-            "bottom": 0,
-            "flexDirection": "row",
-            "height": 40,
-            "justifyContent": "center",
-            "margin": 16,
-            "paddingHorizontal": 16,
-            "position": "absolute",
-            "width": "90%",
-          }
-        }
-        variant="Secondary"
-      >
-        <Text
-          accessibilityRole="text"
-          style={
-            {
-              "color": "#0376c9",
-              "fontFamily": "Euclid Circular B",
-              "fontSize": 14,
-              "fontWeight": "400",
-              "letterSpacing": 0,
-              "lineHeight": 22,
-            }
-          }
-        >
-          View on Etherscan
-        </Text>
-        <SvgMock
-          color="#0376c9"
-          height={16}
-          name="Arrow2Upright"
-          style={
-            {
-              "height": 16,
-              "marginLeft": 8,
-              "width": 16,
-            }
-          }
-          width={16}
-        />
-      </TouchableOpacity>
-    </View>
-  </View>
-</RCTScrollView>
-`;
diff --git a/app/components/Views/Notifications/Details/hooks/useDetails.test.tsx b/app/components/Views/Notifications/Details/hooks/useDetails.test.tsx
deleted file mode 100644
index 64d3608cddf..00000000000
--- a/app/components/Views/Notifications/Details/hooks/useDetails.test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useSelector, useDispatch } from 'react-redux';
-import useDetails from './useDetails';
-import { AvatarAccountType } from '../../../../../component-library/components/Avatars/Avatar';
-import { mockTheme } from '../../../../../util/theme';
-import { renderHookWithProvider } from '../../../../../util/test/renderWithProvider';
-
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
-  useDispatch: jest.fn(),
-}));
-
-describe('useDetails', () => {
-  const mockUseSelector = useSelector as jest.Mock;
-  const mockUseDispatch = useDispatch as jest.Mock;
-
-  beforeEach(() => {
-    mockUseSelector.mockReset();
-    mockUseDispatch.mockReset();
-  });
-
-  it('should return renderNFT, renderTransfer, renderStake, renderStakeReadyToBeWithdrawn and renderSwap functions', () => {
-    const { result } = renderHookWithProvider(() =>
-      useDetails({
-        theme: mockTheme,
-        accountAvatarType: AvatarAccountType.JazzIcon,
-        navigation: {},
-        copyToClipboard: () => Promise.resolve(),
-      }),
-    );
-
-    const {
-      renderNFT,
-      renderTransfer,
-      renderStake,
-      renderStakeReadyToBeWithdrawn,
-      renderSwap,
-    } = result.current;
-    expect(renderNFT).toBeDefined();
-    expect(renderTransfer).toBeDefined();
-    expect(renderStake).toBeDefined();
-    expect(renderStakeReadyToBeWithdrawn).toBeDefined();
-    expect(renderSwap).toBeDefined();
-  });
-});
diff --git a/app/components/Views/Notifications/Details/hooks/useDetails.tsx b/app/components/Views/Notifications/Details/hooks/useDetails.tsx
deleted file mode 100644
index 95d8825b9e5..00000000000
--- a/app/components/Views/Notifications/Details/hooks/useDetails.tsx
+++ /dev/null
@@ -1,512 +0,0 @@
-import React, { useCallback } from 'react';
-import { Pressable, View } from 'react-native';
-import { useSelector } from 'react-redux';
-
-import Badge, {
-  BadgeVariant,
-} from '../../../../../component-library/components/Badges/Badge';
-import RemoteImage from '../../../../Base/RemoteImage';
-import NftFallbackImage from '../../../../../../docs/assets/nft-fallback.png';
-import Avatar, {
-  AvatarAccountType,
-  AvatarSize,
-  AvatarVariant,
-} from '../../../../../component-library/components/Avatars/Avatar';
-import EthereumAddress from '../../../../UI/EthereumAddress';
-
-import { strings } from '../../../../../../locales/i18n';
-import Text, {
-  TextColor,
-  TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
-import {
-  selectConversionRate,
-  selectCurrentCurrency,
-} from '../../../../../selectors/currencyRateController';
-import { selectContractExchangeRates } from '../../../../../selectors/tokenRatesController';
-
-import { balanceToFiat } from '../../../../../util/number';
-
-import {
-  TRIGGER_TYPES,
-  TxStatus,
-  returnAvatarProps,
-  STAKING_PROVIDER_MAP,
-} from '../../../../../util/notifications';
-
-import Icon, {
-  IconColor,
-  IconName,
-  IconSize,
-} from '../../../../../component-library/components/Icons/Icon';
-import { createStyles } from '../styles';
-import { Theme } from '../../../../../util/theme/models';
-import NotificationBadge from '../Badge';
-import BadgeWrapper from '../../../../../component-library/components/Badges/BadgeWrapper';
-import { DEFAULT_BADGEWRAPPER_BADGEPOSITION } from '../../../../../component-library/components/Badges/BadgeWrapper/BadgeWrapper.constants';
-
-interface UseDetailsProps {
-  theme: Theme;
-  accountAvatarType?: AvatarAccountType;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  navigation: any;
-  copyToClipboard: (type: string, selectedString?: string) => Promise<void>;
-}
-
-const useDetails = ({
-  theme,
-  accountAvatarType,
-  navigation,
-  copyToClipboard,
-}: UseDetailsProps) => {
-  const ADD = 'add';
-  const conversionRate = useSelector(selectConversionRate);
-  const currentCurrency = useSelector(selectCurrentCurrency);
-  const contractExchangeRates = useSelector(selectContractExchangeRates);
-  const styles = createStyles(theme);
-
-  const renderAddress = useCallback(
-    ({
-      key,
-      address,
-      actionType,
-    }: {
-      key: string;
-      address: string;
-      actionType: TRIGGER_TYPES;
-    }) => {
-      const showsAddContact =
-        (actionType?.includes('received') && key === 'from') ||
-        (actionType?.includes('sent') && key === 'to');
-      return (
-        <View style={styles.row}>
-          <Avatar
-            variant={AvatarVariant.Account}
-            type={accountAvatarType}
-            accountAddress={address}
-            size={AvatarSize.Md}
-            style={styles.badgeWrapper}
-          />
-          <View style={styles.boxLeft}>
-            <Text variant={TextVariant.BodyLGMedium}>
-              {strings(
-                key === 'from' ? 'transactions.from' : 'transactions.to',
-              )}
-            </Text>
-            <Pressable
-              style={styles.descriptionContainer}
-              onPress={() => copyToClipboard('address', address)}
-              hitSlop={{ top: 24, bottom: 24, left: 24, right: 24 }}
-            >
-              <EthereumAddress
-                style={styles.addressLinkLabel}
-                address={address}
-                type={'short'}
-              />
-              <Icon
-                style={styles.copyIconDefault}
-                name={IconName.Copy}
-                size={IconSize.Md}
-              />
-            </Pressable>
-          </View>
-          {showsAddContact && (
-            <Pressable
-              style={styles.rightSection}
-              hitSlop={{ top: 24, bottom: 24, left: 24, right: 24 }}
-              onPress={() => navigation.navigate('ContactForm', { mode: ADD })}
-            >
-              <Text variant={TextVariant.BodyMD} style={styles.copyTextBtn}>
-                {strings('address_book.add_contact')}
-              </Text>
-            </Pressable>
-          )}
-        </View>
-      );
-    },
-    [accountAvatarType, copyToClipboard, navigation, styles],
-  );
-
-  const renderStatus = useCallback(
-    (status: TxStatus, tx_hash: string) => (
-      <View style={styles.row}>
-        <Avatar
-          variant={AvatarVariant.Icon}
-          size={AvatarSize.Md}
-          style={styles.badgeWrapper}
-          {...returnAvatarProps(status, theme)}
-        />
-        <View style={styles.boxLeft}>
-          <Text variant={TextVariant.BodyLGMedium}>
-            {strings('transactions.status')}
-          </Text>
-
-          <Text color={TextColor.Alternative} variant={TextVariant.BodyMD}>
-            {strings(`transaction.${status}`)}
-          </Text>
-        </View>
-        <Pressable
-          style={styles.rightSection}
-          onPress={() => copyToClipboard('transaction', tx_hash)}
-          hitSlop={{ top: 24, bottom: 24, left: 24, right: 24 }}
-        >
-          <Text variant={TextVariant.BodyMD} style={styles.copyTextBtn}>
-            {strings('transaction.transaction_id')}
-          </Text>
-          <Icon
-            color={IconColor.Primary}
-            style={styles.copyIconRight}
-            name={IconName.Copy}
-            size={IconSize.Md}
-          />
-        </Pressable>
-      </View>
-    ),
-    [
-      copyToClipboard,
-      styles.badgeWrapper,
-      styles.boxLeft,
-      styles.copyIconRight,
-      styles.copyTextBtn,
-      styles.rightSection,
-      styles.row,
-      theme,
-    ],
-  );
-
-  const renderNetwork = useCallback(
-    (network) => (
-      <View style={styles.row}>
-        <Avatar
-          variant={AvatarVariant.Network}
-          size={AvatarSize.Md}
-          style={styles.badgeWrapper}
-          imageSource={network.image}
-        />
-
-        <View style={styles.boxLeft}>
-          <Text variant={TextVariant.BodyLGMedium}>
-            {strings('asset_details.network')}
-          </Text>
-
-          <Text color={TextColor.Alternative} variant={TextVariant.BodyMD}>
-            {network.name}
-          </Text>
-        </View>
-      </View>
-    ),
-    [styles.badgeWrapper, styles.boxLeft, styles.row],
-  );
-
-  const renderCollection = useCallback(
-    (collection, network) => (
-      <View style={styles.row}>
-        <BadgeWrapper
-          badgePosition={DEFAULT_BADGEWRAPPER_BADGEPOSITION}
-          badgeElement={
-            <RemoteImage
-              source={{
-                uri:
-                  network.image ||
-                  'https://token.api.cx.metamask.io/assets/nativeCurrencyLogos/ethereum.svg',
-              }}
-            />
-          }
-          style={styles.badgeWrapper}
-        >
-          <RemoteImage
-            source={{
-              uri: collection.image,
-            }}
-            style={styles.nftLogo}
-            placeholderStyle={styles.nftPlaceholder}
-          />
-        </BadgeWrapper>
-        <View style={styles.boxLeft}>
-          <Text variant={TextVariant.BodyLGMedium}>
-            {strings('collectible.collection')}
-          </Text>
-          <Text color={TextColor.Alternative} variant={TextVariant.BodyMD}>
-            {collection.name}
-          </Text>
-        </View>
-      </View>
-    ),
-    [styles],
-  );
-
-  const renderAsset = useCallback(
-    (type, title, token, network) => {
-      const exchangeRate =
-        token.address && contractExchangeRates?.[token.address]?.price;
-      const balanceFiat = token
-        ? balanceToFiat(
-            token.amount || '0',
-            conversionRate,
-            exchangeRate || 0,
-            currentCurrency,
-          )
-        : undefined;
-      return (
-        <View style={styles.row}>
-          <NotificationBadge
-            notificationType={type}
-            styles={styles}
-            badgeImageSource={network.image}
-            imageUrl={token.image}
-          />
-          <View style={styles.boxLeft}>
-            <Text variant={TextVariant.BodyLGMedium}>{title}</Text>
-            <Text color={TextColor.Alternative} variant={TextVariant.BodyMD}>
-              {token.name}
-            </Text>
-          </View>
-          <View style={styles.rightSection}>
-            <Text variant={TextVariant.BodyLGMedium}>
-              {token.amount || 0 + ' ' + token?.symbol}
-            </Text>
-            <Text color={TextColor.Alternative} variant={TextVariant.BodyMD}>
-              {balanceFiat}
-            </Text>
-          </View>
-        </View>
-      );
-    },
-    [contractExchangeRates, conversionRate, currentCurrency, styles],
-  );
-
-  const renderNFT = useCallback(
-    (notificationDetails) => {
-      const { type, nft, from, to, status, tx_hash, collection, network } =
-        // TODO: Replace "any" with type
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        notificationDetails as Record<string, any>;
-      return (
-        <>
-          <Badge
-            variant={BadgeVariant.Network}
-            imageSource={network.image}
-            style={styles.nftBadgeWrapper}
-          />
-          <RemoteImage
-            placeholderStyle={styles.nftPlaceholder}
-            source={nft.image || NftFallbackImage}
-            style={styles.renderTxNFT}
-          />
-          {renderAddress({
-            key: 'from',
-            address: from,
-            actionType: type,
-          })}
-          {renderAddress({
-            key: 'to',
-            address: to,
-            actionType: type,
-          })}
-          {renderStatus(status, tx_hash)}
-          {renderCollection(collection, network)}
-          {renderNetwork(network)}
-        </>
-      );
-    },
-    [
-      renderAddress,
-      renderCollection,
-      renderNetwork,
-      renderStatus,
-      styles.nftBadgeWrapper,
-      styles.nftPlaceholder,
-      styles.renderTxNFT,
-    ],
-  );
-
-  const renderTransfer = useCallback(
-    (notificationDetails) => {
-      const { type, from, to, status, tx_hash, token, network } =
-        // TODO: Replace "any" with type
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        notificationDetails as Record<string, any>;
-      return (
-        <>
-          {renderAddress({
-            key: 'from',
-            address: from,
-            actionType: type,
-          })}
-          {renderAddress({
-            key: 'to',
-            address: to,
-            actionType: type,
-          })}
-          {renderAsset(type, strings('transaction.asset'), token, network)}
-          {renderStatus(status, tx_hash)}
-          {renderNetwork(network)}
-        </>
-      );
-    },
-    [renderAddress, renderAsset, renderNetwork, renderStatus],
-  );
-
-  const renderStakeProvider = useCallback(
-    (type, stake_in) => {
-      //@ts-expect-error most of this types will be refactored to be using sharedlibrary ones.
-      const stakingProvider = STAKING_PROVIDER_MAP[type];
-      return (
-        <View style={styles.row}>
-          <RemoteImage
-            source={{
-              uri:
-                stake_in.image ||
-                'https://token.api.cx.metamask.io/assets/nativeCurrencyLogos/ethereum.svg',
-            }}
-            style={styles.assetLogo}
-            placeholderStyle={styles.assetPlaceholder}
-          />
-          <View style={styles.boxLeft}>
-            <Text variant={TextVariant.BodyLGMedium}>
-              {strings('notifications.staking_provider')}
-            </Text>
-            <Text color={TextColor.Alternative} variant={TextVariant.BodyMD}>
-              {stakingProvider}
-            </Text>
-          </View>
-        </View>
-      );
-    },
-    [styles.assetLogo, styles.assetPlaceholder, styles.boxLeft, styles.row],
-  );
-
-  const renderStake = useCallback(
-    (notificationDetails) => {
-      const { type, status, tx_hash, stake_in, stake_out, network } =
-        // TODO: Replace "any" with type
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        notificationDetails as Record<string, any>;
-      const unstakingInProgress =
-        type?.indexOf(TRIGGER_TYPES.LIDO_WITHDRAWAL_REQUESTED) > -1;
-
-      if (unstakingInProgress) {
-        return;
-      }
-
-      return (
-        <>
-          {/*
-          // TODO: At the moment, we don’t show this data in the UI.
-          The backend team is working to include this information in the notifications API
-          {renderAddress({
-            key: 'from',
-            address: from,
-            actionType: type,
-          })} */}
-          {renderAsset(
-            type,
-            strings('notifications.staked'),
-            stake_in,
-            network,
-          )}
-          {renderAsset(
-            type,
-            strings('notifications.received'),
-            stake_out,
-            network,
-          )}
-          {renderStatus(status, tx_hash)}
-          {renderStakeProvider(type, stake_in)}
-        </>
-      );
-    },
-    [renderAsset, renderStakeProvider, renderStatus],
-  );
-
-  const renderStakeReadyToBeWithdrawn = useCallback(
-    (notificationDetails) => {
-      const { type, staked_eth, tx_hash, status, network } =
-        // TODO: Replace "any" with type
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        notificationDetails as Record<string, any>;
-
-      return (
-        <>
-          {/*
-          // TODO: At the moment, we don’t show this data in the UI.
-          The backend team is working to include this information in the notifications API
-          {renderAddress({
-            key: 'from',
-            address: from, // TODO: how to get from in a stake?
-            actionType: type,
-          })} */}
-          {renderStatus(status, tx_hash)}
-          {renderAsset(
-            type,
-            strings('notifications.unstaking_requested'),
-            staked_eth,
-            network,
-          )}
-          {renderStakeProvider(type, staked_eth)}
-        </>
-      );
-    },
-    [renderAsset, renderStakeProvider, renderStatus],
-  );
-
-  const renderRate = useCallback(
-    (rate) => (
-      <View style={styles.row}>
-        <Avatar
-          variant={AvatarVariant.Icon}
-          size={AvatarSize.Md}
-          style={styles.badgeWrapper}
-          name={IconName.SwapHorizontal}
-          backgroundColor={theme.colors.success.muted}
-          iconColor={IconColor.Success}
-        />
-        <View style={styles.boxLeft}>
-          <Text variant={TextVariant.BodyLGMedium}>
-            {strings('notifications.rate')}
-          </Text>
-          <Text color={TextColor.Alternative} variant={TextVariant.BodyMD}>
-            {rate}
-          </Text>
-        </View>
-      </View>
-    ),
-    [
-      styles.badgeWrapper,
-      styles.boxLeft,
-      styles.row,
-      theme.colors.success.muted,
-    ],
-  );
-
-  const renderSwap = useCallback(
-    (notificationDetails) => {
-      const { type, status, tx_hash, token_in, token_out, rate, network } =
-        // TODO: Replace "any" with type
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        notificationDetails as Record<string, any>;
-      // TODO: on next change from API we need to use render the account involved on the swap.
-      return (
-        <>
-          {renderAsset(type, strings('notifications.swap'), token_in, network)}
-          {renderAsset(type, strings('notifications.to'), token_out, network)}
-          {renderStatus(status, tx_hash)}
-          {renderRate(rate)}
-          {renderNetwork(network)}
-        </>
-      );
-    },
-    [renderAsset, renderNetwork, renderRate, renderStatus],
-  );
-
-  return {
-    renderNFT,
-    renderTransfer,
-    renderStake,
-    renderStakeReadyToBeWithdrawn,
-    renderSwap,
-  };
-};
-
-export default useDetails;
diff --git a/app/components/Views/Notifications/Details/index.test.tsx b/app/components/Views/Notifications/Details/index.test.tsx
deleted file mode 100644
index 5b91d4e6392..00000000000
--- a/app/components/Views/Notifications/Details/index.test.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { NavigationProp, ParamListBase } from '@react-navigation/native';
-import { render } from '@testing-library/react-native';
-import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
-
-import NotificationsDetails from './index';
-import { backgroundState } from '../../../../util/test/initial-root-state';
-import MOCK_NOTIFICATIONS from '../../../../components/UI/Notification/__mocks__/mock_notifications';
-
-const mockInitialState = {
-  settings: {
-    useBlockieIcon: false,
-  },
-  engine: {
-    backgroundState,
-  },
-};
-
-jest.mock('../../../../actions/alert', () => ({
-  showAlert: jest.fn(),
-}));
-
-jest.mock('@react-navigation/native');
-jest.mock('react-native-safe-area-context', () => {
-  const inset = { top: 0, right: 0, bottom: 0, left: 0 };
-  const frame = { width: 0, height: 0, x: 0, y: 0 };
-  return {
-    SafeAreaProvider: jest.fn().mockImplementation(({ children }) => children),
-    SafeAreaConsumer: jest
-      .fn()
-      .mockImplementation(({ children }) => children(inset)),
-    useSafeAreaInsets: jest.fn().mockImplementation(() => inset),
-    useSafeAreaFrame: jest.fn().mockImplementation(() => frame),
-  };
-});
-
-describe('NotificationsDetails', () => {
-  const mockStore = configureMockStore();
-  const store = mockStore(mockInitialState);
-
-  let navigation: NavigationProp<ParamListBase>;
-
-  beforeEach(() => {
-    navigation = {
-      navigate: jest.fn(),
-    } as unknown as NavigationProp<ParamListBase>;
-  });
-
-  it('should renders correctly', () => {
-    const { toJSON } = render(
-      <Provider store={store}>
-        <NotificationsDetails
-          navigation={navigation}
-          route={{
-            params: {
-              notification: MOCK_NOTIFICATIONS[1],
-            },
-          }}
-        />
-      </Provider>,
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
diff --git a/app/components/Views/Notifications/Details/index.tsx b/app/components/Views/Notifications/Details/index.tsx
deleted file mode 100644
index 0198a5f801c..00000000000
--- a/app/components/Views/Notifications/Details/index.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-/* eslint-disable react/display-name */
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import { capitalize } from 'lodash';
-import { ScrollView } from 'react-native-gesture-handler';
-import { useDispatch, useSelector } from 'react-redux';
-
-import {
-  Notification,
-  TRIGGER_TYPES,
-  formatDate,
-  formatNotificationTitle,
-} from '../../../../util/notifications';
-
-import { useTheme } from '../../../../util/theme';
-
-import ClipboardManager from '../../../../core/ClipboardManager';
-import { strings } from '../../../../../locales/i18n';
-
-import Icon, {
-  IconName,
-  IconSize,
-} from '../../../../component-library/components/Icons/Icon';
-import { AvatarAccountType } from '../../../../component-library/components/Avatars/Avatar';
-
-import { showAlert } from '../../../../actions/alert';
-import { protectWalletModalVisible } from '../../../../actions/user';
-
-import { createStyles } from './styles';
-
-import renderAnnouncementsDetails from './Announcements';
-import renderOnChainDetails from './OnChain';
-import Header from './Header';
-
-interface Props {
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  navigation: any;
-  route: {
-    params: {
-      notification: Notification;
-    };
-  };
-}
-
-const NotificationsDetails = ({ navigation, route }: Props) => {
-  const { notification } = route.params;
-
-  const dispatch = useDispatch();
-  const theme = useTheme();
-  const styles = createStyles(theme);
-
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const accountAvatarType = useSelector((state: any) =>
-    state.settings.useBlockieIcon
-      ? AvatarAccountType.Blockies
-      : AvatarAccountType.JazzIcon,
-  );
-
-  const handleShowAlert = (config: {
-    isVisible: boolean;
-    autodismiss: number;
-    content: string;
-    data: { msg: string };
-  }) => dispatch(showAlert(config));
-
-  const handleProtectWalletModalVisible = () =>
-    dispatch(protectWalletModalVisible());
-
-  const copyToClipboard = async (type: string, selectedString?: string) => {
-    if (!selectedString) return;
-    await ClipboardManager.setString(selectedString);
-    handleShowAlert({
-      isVisible: true,
-      autodismiss: 1500,
-      content: 'clipboard-alert',
-      data: {
-        msg:
-          type === 'address'
-            ? strings('notifications.address_copied_to_clipboard')
-            : strings('notifications.transaction_id_copied_to_clipboard'),
-      },
-    });
-    setTimeout(() => handleProtectWalletModalVisible(), 2000);
-  };
-
-  return (
-    <ScrollView contentContainerStyle={styles.contentContainerWrapper}>
-      {notification.type === TRIGGER_TYPES.FEATURES_ANNOUNCEMENT
-        ? renderAnnouncementsDetails({ notification, styles, navigation })
-        : renderOnChainDetails({
-            notification,
-            styles,
-            theme,
-            accountAvatarType,
-            navigation,
-            copyToClipboard,
-          })}
-    </ScrollView>
-  );
-};
-
-export default NotificationsDetails;
-
-NotificationsDetails.navigationOptions = ({
-  route,
-  theme,
-  navigation,
-}: {
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  route: any;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  theme: any;
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  navigation: any;
-}) => ({
-  headerLeft: () => (
-    <TouchableOpacity onPress={() => navigation.goBack()}>
-      <Icon
-        name={IconName.ArrowLeft}
-        size={IconSize.Md}
-        style={createStyles(theme).icon}
-      />
-    </TouchableOpacity>
-  ),
-  headerTitle: () => (
-    <Header
-      title={capitalize(
-        route.params.notification.type === TRIGGER_TYPES.FEATURES_ANNOUNCEMENT
-          ? route.params.notification.title
-          : formatNotificationTitle(route.params.notification.type),
-      )}
-      subtitle={formatDate(route.params.notification.createdAt)}
-    />
-  ),
-});
diff --git a/app/components/Views/Notifications/Details/styles.ts b/app/components/Views/Notifications/Details/styles.ts
deleted file mode 100644
index 3393c2c7bc2..00000000000
--- a/app/components/Views/Notifications/Details/styles.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { StyleSheet } from 'react-native';
-import type { Theme } from '@metamask/design-tokens';
-import Device from '../../../../util/device';
-import { fontStyles } from '../../../../styles/common';
-import scaling from '../../../../util/scaling';
-
-const HEIGHT = scaling.scale(240);
-const DEVICE_WIDTH = Device.getDeviceWidth();
-const COLLECTIBLE_WIDTH = (DEVICE_WIDTH - 30 - 16) / 3;
-
-export const createStyles = ({ colors }: Theme) =>
-  StyleSheet.create({
-    contentContainerWrapper: {
-      flex: 1,
-      alignItems: 'flex-start',
-      backgroundColor: colors.background.default,
-      paddingTop: 16,
-    },
-    headerTitle: { alignItems: 'center', top: 4 },
-    row: {
-      flexDirection: 'row',
-      justifyContent: 'flex-start',
-      minWidth: '100%',
-      paddingVertical: 8,
-      paddingHorizontal: 16,
-    },
-    badgeWrapper: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      alignSelf: 'flex-start',
-      position: 'absolute',
-    },
-    nftBadgeWrapper: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      width: 12,
-      height: 12,
-      borderRadius: 6,
-      alignSelf: 'center',
-    },
-    copyIconDefault: {
-      color: colors.text.alternative,
-      marginHorizontal: 8,
-    },
-    boxLeft: { alignSelf: 'flex-start' },
-    boxRight: { marginLeft: 'auto' },
-    text: {
-      marginBottom: 8,
-      paddingHorizontal: 32,
-      textAlign: 'center',
-    },
-    descriptionContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    addressLinkLabel: {
-      // TODO: Replace "any" with type
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ...(fontStyles.normal as any),
-      color: colors.text.alternative,
-    },
-    icon: { marginHorizontal: 20 },
-    touchableViewOnEtherscan: {
-      marginBottom: 24,
-      marginTop: 12,
-    },
-    viewOnEtherscan: {
-      fontSize: 16,
-      color: colors.primary.default,
-      ...fontStyles.normal,
-      textAlign: 'center',
-    },
-    renderContainer: {
-      alignItems: 'flex-start',
-      flex: 1,
-    },
-    renderFCMText: {
-      textAlign: 'left',
-    },
-    renderFCMCard: {
-      height: HEIGHT,
-      width: Device.getDeviceWidth() - 32,
-      alignContent: 'center',
-      borderRadius: 12,
-      overflow: 'hidden',
-      marginBottom: 16,
-    },
-    FCMImage: {
-      resizeMode: 'cover',
-      height: HEIGHT,
-      width: Device.getDeviceWidth() - 32,
-    },
-    renderTxContainer: {
-      alignSelf: 'center',
-    },
-    renderTxNFT: {
-      height: COLLECTIBLE_WIDTH,
-      width: COLLECTIBLE_WIDTH,
-      alignContent: 'center',
-      borderRadius: 4,
-      overflow: 'hidden',
-      alignSelf: 'center',
-    },
-    ctaBtn: {
-      bottom: 0,
-      position: 'absolute',
-      width: '90%',
-      alignSelf: 'center',
-      margin: 16,
-      backgroundColor: colors.background.default,
-    },
-    rightSection: {
-      alignSelf: 'flex-start',
-      flexDirection: 'row',
-      marginLeft: 'auto',
-    },
-    copyTextBtn: {
-      color: colors.primary.default,
-      alignSelf: 'flex-start',
-    },
-    copyIconRight: {
-      marginLeft: 8,
-    },
-    ethLogo: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-    },
-    gasDetails: {
-      marginBottom: 80,
-    },
-    nftLogo: {
-      width: 32,
-      height: 32,
-      borderRadius: 8,
-      overflow: 'hidden',
-      borderWidth: 0.5,
-      borderColor: colors.background.alternative,
-    },
-    nftPlaceholder: {
-      backgroundColor: colors.background.alternative,
-      width: 32,
-      height: 32,
-      borderRadius: 8,
-      borderWidth: 0.5,
-      borderColor: colors.background.alternative,
-    },
-    assetLogo: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      overflow: 'hidden',
-      borderWidth: 0.5,
-      borderColor: colors.background.alternative,
-    },
-    assetPlaceholder: {
-      backgroundColor: colors.background.alternative,
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      borderWidth: 0.5,
-      borderColor: colors.background.alternative,
-    },
-    foxWrapper: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      backgroundColor: colors.background.alternative,
-      alignItems: 'center',
-      justifyContent: 'center',
-      alignSelf: 'flex-start',
-      position: 'absolute',
-      top: '25%',
-    },
-    header: { alignItems: 'center', marginTop: 4 },
-  });
diff --git a/app/components/Views/Notifications/__snapshots__/index.test.tsx.snap b/app/components/Views/Notifications/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 64533a73808..00000000000
--- a/app/components/Views/Notifications/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationsView matches snapshot 1`] = `null`;
-
-exports[`NotificationsView matches snapshot without notifications 1`] = `null`;
diff --git a/app/components/Views/Notifications/index.test.tsx b/app/components/Views/Notifications/index.test.tsx
deleted file mode 100644
index 12f4a2b4ef8..00000000000
--- a/app/components/Views/Notifications/index.test.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import { NavigationProp, ParamListBase } from '@react-navigation/native';
-
-import NotificationsView from '.';
-import renderWithProvider from '../../../util/test/renderWithProvider';
-import MOCK_NOTIFICATIONS from '../../../components/UI/Notification/__mocks__/mock_notifications';
-import { backgroundState } from '../../../util/test/initial-root-state';
-
-const mockInitialState = {
-  settings: {
-    useBlockieIcon: false,
-  },
-  notificationsSettings: {
-    isEnabled: true,
-  },
-  engine: {
-    backgroundState: {
-      ...backgroundState,
-    },
-  },
-};
-jest.mock('@react-navigation/native');
-
-describe('NotificationsView', () => {
-  let navigation: NavigationProp<ParamListBase>;
-
-  beforeEach(() => {
-    navigation = {
-      navigate: jest.fn(),
-    } as unknown as NavigationProp<ParamListBase>;
-  });
-
-  it('matches snapshot', () => {
-    const { toJSON } = renderWithProvider(
-      <NotificationsView
-        navigation={navigation}
-        selectedAddress={'0x123123123'}
-        notifications={MOCK_NOTIFICATIONS}
-      />,
-      {
-        state: mockInitialState,
-      },
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('matches snapshot without notifications', () => {
-    const { toJSON } = renderWithProvider(
-      <NotificationsView
-        navigation={navigation}
-        selectedAddress={'0x123123123'}
-        notifications={[]}
-      />,
-      {
-        state: mockInitialState,
-      },
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
diff --git a/app/components/Views/Notifications/index.tsx b/app/components/Views/Notifications/index.tsx
deleted file mode 100644
index eab7b912476..00000000000
--- a/app/components/Views/Notifications/index.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-/* eslint-disable react/display-name */
-import React, { useCallback, useEffect, useState } from 'react';
-import { InteractionManager, View, TouchableOpacity } from 'react-native';
-import { useSelector } from 'react-redux';
-
-import { NotificationsViewSelectorsIDs } from '../../../../e2e/selectors/NotificationsView.selectors';
-import { createStyles } from './styles';
-import Notifications from '../../UI/Notification/List';
-import {
-  FeatureAnnouncementRawNotification,
-  HalRawNotification,
-  Notification,
-  TRIGGER_TYPES,
-  sortNotifications,
-} from '../../../util/notifications';
-import Icon, {
-  IconName,
-  IconSize,
-} from '../../../component-library/components/Icons/Icon';
-
-import Text, {
-  TextVariant,
-} from '../../../component-library/components/Texts/Text';
-import Empty from '../../UI/Notification/Empty';
-import { strings } from '../../../../locales/i18n';
-import Routes from '../../../constants/navigation/Routes';
-
-const NotificationsView = ({
-  navigation,
-  selectedAddress,
-  notifications,
-}: {
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  navigation: any;
-  selectedAddress: string;
-  notifications: Notification[];
-}) => {
-  const styles = createStyles();
-  const [allNotifications, setAllNotifications] =
-    useState<Notification[]>(notifications);
-  const [walletNotifications, setWalletNotifications] = useState<
-    HalRawNotification[]
-  >([]);
-  const [annoucementsNotifications, setAnnoucementsNotifications] = useState<
-    FeatureAnnouncementRawNotification[]
-  >([]);
-  const isNotificationEnabled = useSelector(
-    // TODO: Replace "any" with type
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (state: any) => state.notification.notificationsSettings?.isEnabled,
-  );
-  const [loading, setLoading] = useState<boolean>(false);
-
-  const filterNotifications = useCallback(
-    (address) => {
-      if (address === null) {
-        setLoading(false);
-        return;
-      }
-
-      const wallet: HalRawNotification[] = [];
-      const annoucements: FeatureAnnouncementRawNotification[] = [];
-      const uniqueNotifications: Notification[] = [];
-
-      const allNotificationsSorted = sortNotifications(allNotifications);
-      const seenIds = new Set();
-
-      for (const notification of allNotificationsSorted) {
-        if (!seenIds.has(notification.id)) {
-          seenIds.add(notification.id);
-          uniqueNotifications.push(notification);
-          if (notification.type === TRIGGER_TYPES.FEATURES_ANNOUNCEMENT) {
-            annoucements.push(notification);
-          } else {
-            wallet.push(notification);
-          }
-        }
-      }
-
-      setAllNotifications(uniqueNotifications);
-      setWalletNotifications(wallet);
-      setAnnoucementsNotifications(annoucements);
-
-      setLoading(false);
-    },
-    [allNotifications],
-  );
-
-  useEffect(() => {
-    setLoading(true);
-    InteractionManager.runAfterInteractions(() => {
-      filterNotifications(selectedAddress);
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedAddress]);
-
-  const notificationToShow =
-    allNotifications || walletNotifications || annoucementsNotifications;
-
-  /** Current address is an important piece of notification since it is
-   * used by MM auth snap to derivated the token/identifier and to MM storage to store notifications
-   * TODO: Need to figure out the best place to fetch notifications from MM auth when user switches accounts, Maybe on the Engine and store it on the redux store
-   */
-
-  return (
-    <View
-      style={styles.wrapper}
-      testID={NotificationsViewSelectorsIDs.NOTIFICATIONS_CONTAINER}
-    >
-      {isNotificationEnabled && notificationToShow.length > 0 ? (
-        <Notifications
-          navigation={navigation}
-          allNotifications={allNotifications}
-          walletNotifications={walletNotifications}
-          annoucementsNotifications={annoucementsNotifications}
-          loading={loading}
-        />
-      ) : (
-        <Empty
-          testID={NotificationsViewSelectorsIDs.NO_NOTIFICATIONS_CONTAINER}
-        />
-      )}
-    </View>
-  );
-};
-
-export default NotificationsView;
-
-NotificationsView.navigationOptions = ({
-  navigation,
-}: {
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  navigation: any;
-}) => ({
-  headerRight: () => (
-    <TouchableOpacity
-      onPress={() => navigation.navigate(Routes.SETTINGS.NOTIFICATIONS)}
-    >
-      <Icon
-        name={IconName.Setting}
-        size={IconSize.Lg}
-        style={createStyles().icon}
-      />
-    </TouchableOpacity>
-  ),
-  headerLeft: () => (
-    <TouchableOpacity onPress={() => navigation.navigate(Routes.WALLET.HOME)}>
-      <Icon
-        name={IconName.Close}
-        size={IconSize.Md}
-        style={createStyles().icon}
-      />
-    </TouchableOpacity>
-  ),
-  headerTitle: () => (
-    <Text variant={TextVariant.HeadingMD}>
-      {strings('app_settings.notifications_title')}
-    </Text>
-  ),
-});