feat: add account_network section to re-designed confirmation page (#11698)

## **Description**

Add account and network section to re-designed confirmation pages.

## **Related issues**

Fixes: #11680

## **Manual testing steps**

1. Enable re-designs locally 
2. Go to test dapp
3. Submit personal sign and check page

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/a47c1f1b-4f69-472c-a35c-5804d46ed6ec

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: jpuri

app/components/Views/confirmations/Confirm/Confirm.styles.ts

@@ -15,8 +15,7 @@ const styleSheet = (params: { theme: Theme }) => {
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       paddingBottom: Device.isIphoneX() ? 20 : 0,
-      alignItems: 'center',
-      justifyContent: 'space-between'
+      justifyContent: 'space-between',
     },
   });
 };

app/components/Views/confirmations/Confirm/Confirm.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 
 import { useStyles } from '../../../../component-library/hooks';
 import BottomModal from '../components/UI/BottomModal';
+import AccountNetworkInfo from '../components/Confirm/AccountNetworkInfo';
 import Footer from '../components/Confirm/Footer';
 import Info from '../components/Confirm/Info';
 import Title from '../components/Confirm/Title';
@@ -22,6 +23,7 @@ const Confirm = () => {
       <View style={styles.container}>
         <View>
           <Title />
+          <AccountNetworkInfo />
           <Info />
         </View>
         <Footer />

app/components/Views/confirmations/Confirm/__snapshots__/Confirm.test.tsx.snap

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import renderWithProvider from '../../../../../../util/test/renderWithProvider';
+import { personalSignatureConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
+import AccountNetworkInfo from './AccountNetworkInfo';
+
+describe('AccountNetworkInfo', () => {
+  it('should match snapshot for personal sign', async () => {
+    const container = renderWithProvider(<AccountNetworkInfo />, {
+      state: personalSignatureConfirmationState,
+    });
+    expect(container).toMatchSnapshot();
+  });
+});

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfo.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { strings } from '../../../../../../../locales/i18n';
+import useApprovalRequest from '../../../hooks/useApprovalRequest';
+import ExpandableSection from '../../UI/ExpandableSection';
+import AccountNetworkInfoCollapsed from './AccountNetworkInfoCollapsed';
+import AccountNetworkInfoExpanded from './AccountNetworkInfoExpanded';
+
+const AccountNetworkInfo = () => {
+  const { approvalRequest } = useApprovalRequest();
+
+  if (!approvalRequest) {
+    return null;
+  }
+
+  return (
+    <ExpandableSection
+      collapsedContent={<AccountNetworkInfoCollapsed />}
+      expandedContent={<AccountNetworkInfoExpanded />}
+      modalTitle={strings('confirm.details')}
+    />
+  );
+};
+
+export default AccountNetworkInfo;

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfo.tsx

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+
+import { Theme } from '../../../../../../../util/theme/models';
+import { fontStyles } from '../../../../../../../styles/common';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+
+  return StyleSheet.create({
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+    },
+    badgeWrapper: {
+      marginRight: 16,
+      alignSelf: 'center',
+    },
+    accountName: {
+      color: theme.colors.text.default,
+      ...fontStyles.normal,
+      fontSize: 14,
+      fontWeight: '500',
+    },
+    networkName: {
+      color: theme.colors.text.default,
+      ...fontStyles.normal,
+      fontSize: 14,
+      fontWeight: '400',
+    },
+  });
+};
+
+export default styleSheet;

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.styles.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
+import { personalSignatureConfirmationState } from '../../../../../../../util/test/confirm-data-helpers';
+import AccountNetworkInfoCollapsed from './AccountNetworkInfoCollapsed';
+
+describe('AccountNetworkInfoCollapsed', () => {
+  it('should match snapshot for personal sign', async () => {
+    const container = renderWithProvider(<AccountNetworkInfoCollapsed />, {
+      state: personalSignatureConfirmationState,
+    });
+    expect(container).toMatchSnapshot();
+  });
+});

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import Avatar, {
+  AvatarAccountType,
+  AvatarVariant,
+} from '../../../../../../../component-library/components/Avatars/Avatar';
+import Badge, {
+  BadgeVariant,
+} from '../../../../../../../component-library/components/Badges/Badge';
+import BadgeWrapper from '../../../../../../../component-library/components/Badges/BadgeWrapper';
+import { RootState } from '../../../../../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.test';
+import { useStyles } from '../../../../../../../component-library/hooks';
+import {
+  selectNetworkImageSource,
+  selectNetworkName,
+} from '../../../../../../../selectors/networkInfos';
+import useAccountInfo from '../../../../hooks/useAccountInfo';
+import useApprovalRequest from '../../../../hooks/useApprovalRequest';
+import styleSheet from './AccountNetworkInfoCollapsed.styles';
+
+const AccountNetworkInfoCollapsed = () => {
+  const { approvalRequest } = useApprovalRequest();
+  const networkName = useSelector(selectNetworkName);
+  const networkImage = useSelector(selectNetworkImageSource);
+  const useBlockieIcon = useSelector(
+    (state: RootState) => state.settings.useBlockieIcon,
+  );
+  const fromAddress = approvalRequest?.requestData?.from;
+  const { accountName } = useAccountInfo(fromAddress);
+  const { styles } = useStyles(styleSheet, {});
+
+  return (
+    <View style={styles.container}>
+      <BadgeWrapper
+        badgeElement={
+          <Badge
+            variant={BadgeVariant.Network}
+            name={networkName}
+            imageSource={networkImage}
+          />
+        }
+        style={styles.badgeWrapper}
+      >
+        <Avatar
+          variant={AvatarVariant.Account}
+          type={
+            useBlockieIcon
+              ? AvatarAccountType.Blockies
+              : AvatarAccountType.JazzIcon
+          }
+          accountAddress={fromAddress}
+        />
+      </BadgeWrapper>
+      <View>
+        <Text style={styles.accountName}>{accountName}</Text>
+        <Text style={styles.networkName}>{networkName}</Text>
+      </View>
+    </View>
+  );
+};
+
+export default AccountNetworkInfoCollapsed;

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx

@@ -0,0 +1 @@
+export { default } from './AccountNetworkInfoCollapsed';