feat: add account_network section to re-designed confirmation page

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/components/Confirm/AccountNetworkInfo/AccountNetworkInfo.test.tsx

@@ -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.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/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.styles.ts

@@ -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.test.tsx

@@ -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.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/index.ts

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

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

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

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { strings } from '../../../../../../../../locales/i18n';
+import { selectRpcUrl } from '../../../../../../../selectors/networkController';
+import { selectNetworkName } from '../../../../../../../selectors/networkInfos';
+import useAccountInfo from '../../../../hooks/useAccountInfo';
+import useApprovalRequest from '../../../../hooks/useApprovalRequest';
+import InfoSection from '../../../UI/InfoRow/InfoSection';
+import InfoRow from '../../../UI/InfoRow';
+import InfoURL from '../../../UI/InfoRow/InfoValue/InfoURL';
+
+// todo: use value component for address, network, currency value
+const AccountNetworkInfoExpanded = () => {
+  const { approvalRequest } = useApprovalRequest();
+  const networkName = useSelector(selectNetworkName);
+  const networkRpcUrl = useSelector(selectRpcUrl);
+  const fromAddress = approvalRequest?.requestData?.from;
+  const { accountAddress, accountBalance } = useAccountInfo(fromAddress);
+
+  return (
+    <View>
+      <InfoSection>
+        <InfoRow label={strings('confirm.account')}>{accountAddress}</InfoRow>
+        <InfoRow label={strings('confirm.balance')}>{accountBalance}</InfoRow>
+      </InfoSection>
+      <InfoSection>
+        <InfoRow
+          label={strings('confirm.network')}
+          // todo: add tooltip content when available
+          tooltip={strings('confirm.network')}
+        >
+          {networkName}
+        </InfoRow>
+        <InfoRow label={strings('confirm.rpc_url')}>
+          <InfoURL url={networkRpcUrl} />
+        </InfoRow>
+      </InfoSection>
+    </View>
+  );
+};
+
+export default AccountNetworkInfoExpanded;