feat: Implement staking advanced details

app/components/UI/Name/Name.tsx

@@ -1,21 +1,23 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { TextProps, View, ViewStyle } from 'react-native';
-
-import { useStyles } from '../../../component-library/hooks';
-import Text, {
-  TextVariant,
-} from '../../../component-library/components/Texts/Text';
+import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
+import Badge, { BadgeVariant } from '../../../component-library/components/Badges/Badge';
 import Icon, {
   IconName,
 } from '../../../component-library/components/Icons/Icon';
+import Text, {
+  TextVariant,
+} from '../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../component-library/hooks';
+import images from '../../../images/image-icons';
 import { renderShortAddress } from '../../../util/address';
 import useDisplayName, {
   DisplayNameVariant,
 } from '../../hooks/DisplayName/useDisplayName';
 import Identicon from '../Identicon';
-import { NameProperties, NameType } from './Name.types';
 import styleSheet from './Name.styles';
+import { NameProperties, NameType } from './Name.types';
 
 const NameLabel: React.FC<{
   displayNameVariant: DisplayNameVariant;
@@ -59,7 +61,7 @@ const Name: React.FC<NameProperties> = ({
     throw new Error('Unsupported NameType: ' + type);
   }
 
-  const { image, name, variant } = useDisplayName({
+  const { image, name, variant, isFirstPartyContractName } = useDisplayName({
     preferContractSymbol,
     type,
     value,
@@ -74,16 +76,33 @@ const Name: React.FC<NameProperties> = ({
     return <UnknownEthereumAddress address={value} style={style} />;
   }
 
+  const MAX_CHAR_LENGTH = 21;
+  const MIDDLE_SECTION_ELLIPSIS = '...';
+  const truncatedName =
+    name && name.length > MAX_CHAR_LENGTH
+      ? `${name.slice(0, (MAX_CHAR_LENGTH - MIDDLE_SECTION_ELLIPSIS.length) / 2)}${MIDDLE_SECTION_ELLIPSIS}${name.slice(-(MAX_CHAR_LENGTH - MIDDLE_SECTION_ELLIPSIS.length) / 2)}`
+      : name;
+
+
   return (
     <View style={[styles.base, style]}>
-      <Identicon
+      {isFirstPartyContractName ? (
+        <Badge
+          size={AvatarSize.Xs}
+          imageSource={images.FOX_LOGO}
+          variant={BadgeVariant.Network}
+          isScaled={false}
+        />
+      ) : (
+        <Identicon
         address={value}
         diameter={16}
         imageUri={image}
         customStyle={styles.image}
-      />
+        />
+      )}
       <NameLabel displayNameVariant={variant} ellipsizeMode="tail">
-        {name}
+        {truncatedName}
       </NameLabel>
     </View>
   );

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

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () =>
+  StyleSheet.create({
+    container: {
+      paddingVertical: 8,
+    },
+    networkContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+  });
+
+export default styleSheet;

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

@@ -0,0 +1,28 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { stakingDepositConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
+import renderWithProvider from '../../../../../../util/test/renderWithProvider';
+import AdvancedDetails from './AdvancedDetails';
+
+describe('AdvancedDetails', () => {
+  it('contains values for staking deposit', async () => {
+    const { getByText } = renderWithProvider(<AdvancedDetails />, {
+      state: stakingDepositConfirmationState,
+    });
+
+    expect(getByText('Advanced details')).toBeDefined();
+
+    fireEvent(getByText('Advanced details'), 'onPress');
+
+    expect(getByText('Advanced details')).toBeDefined();
+
+    expect(getByText('Staking from')).toBeDefined();
+    expect(getByText('0xDc477...0c164')).toBeDefined();
+
+    expect(getByText('Interacting with')).toBeDefined();
+    expect(getByText('Pooled Staking')).toBeDefined();
+
+    expect(getByText('Network')).toBeDefined();
+    expect(getByText('Ethereum Mainnet')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,63 @@
+import { CHAIN_IDS, TransactionMeta } from '@metamask/transaction-controller';
+import React from 'react';
+import { View } from 'react-native';
+import { strings } from '../../../../../../../locales/i18n';
+import { AvatarSize } from '../../../../../../component-library/components/Avatars/Avatar';
+import Badge, { BadgeVariant } from '../../../../../../component-library/components/Badges/Badge';
+import Text from '../../../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../../../component-library/hooks';
+import images from '../../../../../../images/image-icons';
+import Name from '../../../../../UI/Name';
+import { NameType } from '../../../../../UI/Name/Name.types';
+import { useTransactionMetadataRequest } from '../../../hooks/useTransactionMetadataRequest';
+import InfoRow from '../../UI/InfoRow';
+import InfoSectionAccordion from '../../UI/InfoSectionAccordion';
+import InfoRowDivider from '../InfoRowDivider';
+import styleSheet from './AdvancedDetails.styles';
+
+const AdvancedDetails = () => {
+  const { styles } = useStyles(styleSheet, {});
+  const transactionMeta = useTransactionMetadataRequest();
+
+  return (
+    <View style={styles.container}>
+      <InfoSectionAccordion header={strings('stake.advanced_details')}>
+        <InfoRow
+          label={strings('confirm.staking_from')}
+        >
+          <Name
+            type={NameType.EthereumAddress}
+            value={(transactionMeta as TransactionMeta).txParams.from}
+            variation={CHAIN_IDS.MAINNET}
+          />
+        </InfoRow>
+        <InfoRow
+          label={strings('confirm.label.interacting_with')}
+        >
+          <Name
+            type={NameType.EthereumAddress}
+            value={(transactionMeta as TransactionMeta).txParams.to as string}
+            variation={CHAIN_IDS.MAINNET}
+          />
+        </InfoRow>
+        <InfoRowDivider />
+        <InfoRow
+          label={strings('confirm.label.network')}
+        >
+          <View style={styles.networkContainer}>
+            <Badge
+              size={AvatarSize.Xs}
+              imageSource={images.ETHEREUM}
+              variant={BadgeVariant.Network}
+              isScaled={false}
+            />
+            <Text>{'  '}</Text>
+            <Text>{strings('stake.ethereum_mainnet')}</Text>
+          </View>
+        </InfoRow>
+      </InfoSectionAccordion>
+    </View>
+  );
+};
+
+export default AdvancedDetails;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-
 import { strings } from '../../../../../../../../locales/i18n';
+import AdvancedDetails from '../../AdvancedDetails/AdvancedDetails';
 import FlatNavHeader from '../../FlatNavHeader';
 import StakingDetails from '../../StakingDetails';
 import TokenHero from '../../TokenHero';
@@ -10,6 +10,7 @@ const StakingDeposit = () => (
     <FlatNavHeader title={strings('stake.stake')} />
     <TokenHero />
     <StakingDetails />
+    <AdvancedDetails />
   </>
 );
 export default StakingDeposit;

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

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+
+  return StyleSheet.create({
+    infoRowDivider:{
+      height: 1,
+      backgroundColor: theme.colors.border.muted,
+      marginVertical: 8,
+      marginLeft: -8,
+      marginRight: -8,
+    },
+  });
+};
+
+export default styleSheet;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { stakingDepositConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
+import renderWithProvider from '../../../../../../util/test/renderWithProvider';
+import InfoRowDivider from './InfoRowDivider';
+
+describe('InfoRowDivider', () => {
+  it('matches snapshot', async () => {
+    const { toJSON } = renderWithProvider(<InfoRowDivider />, {
+      state: stakingDepositConfirmationState,
+    });
+
+    expect(toJSON()).toMatchInlineSnapshot(`
+      <View
+        style={
+          {
+            "backgroundColor": "#BBC0C566",
+            "height": 1,
+            "marginLeft": -8,
+            "marginRight": -8,
+            "marginVertical": 8,
+          }
+        }
+      />
+    `);
+  });
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useStyles } from '../../../../../../component-library/hooks';
+import styleSheet from './InfoRowDivider.styles';
+
+const InfoRowDivider = () => {
+  const { styles } = useStyles(styleSheet, {});
+
+  return (
+    <View style={styles.infoRowDivider} />
+  );
+};
+
+export default InfoRowDivider;

app/components/Views/confirmations/components/Confirm/InfoRowDivider/index.ts

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

app/components/Views/confirmations/components/UI/InfoSectionAccordion/InfoSectionAccordion.styles.ts

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+
+  return StyleSheet.create({
+    container: {
+      overflow: 'hidden',
+      backgroundColor: theme.colors.background.default,
+      borderRadius: 8,
+      padding: 8,
+      marginBottom: 8,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 8,
+      paddingVertical: 16,
+    },
+    headerTitle: {
+      color: theme.colors.text.default,
+      fontSize: 14,
+      fontWeight: '500',
+    },
+    icon: {
+      color: theme.colors.text.muted,
+    },
+    content: {},
+    iconContainer: {},
+  });
+};
+
+export default styleSheet;

app/components/Views/confirmations/components/UI/InfoSectionAccordion/InfoSectionAccordion.test.tsx

@@ -0,0 +1,62 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import Text from '../../../../../../component-library/components/Texts/Text';
+import { stakingDepositConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
+import renderWithProvider from '../../../../../../util/test/renderWithProvider';
+import InfoSectionAccordion from './InfoSectionAccordion';
+
+describe('InfoSectionAccordion', () => {
+  it("opens and closes the accordion when it's collapsed by default", async () => {
+    const testHeader = 'Test Header';
+    const testContent = 'Test Content';
+
+    const { getByText, queryByText } = renderWithProvider(
+        <InfoSectionAccordion header={testHeader}>
+            <Text>{testContent}</Text>
+        </InfoSectionAccordion>,
+        {
+            state: stakingDepositConfirmationState,
+        },
+    );
+
+    expect(getByText(testHeader)).toBeDefined();
+    expect(queryByText(testContent)).toBeNull();
+
+    fireEvent(getByText(testHeader), 'onPress');
+
+    expect(getByText(testHeader)).toBeDefined();
+    expect(getByText(testContent)).toBeDefined();
+
+    fireEvent(getByText(testHeader), 'onPress');
+
+    expect(getByText(testHeader)).toBeDefined();
+    expect(queryByText(testContent)).toBeNull();
+  });
+
+  it("opens and closes the accordion when it's expanded by default", async () => {
+    const testHeader = 'Test Header';
+    const testContent = 'Test Content';
+
+    const { getByText, queryByText } = renderWithProvider(
+        <InfoSectionAccordion header={testHeader} initiallyExpanded>
+            <Text>{testContent}</Text>
+        </InfoSectionAccordion>,
+        {
+            state: stakingDepositConfirmationState,
+        },
+    );
+
+    expect(getByText(testHeader)).toBeDefined();
+    expect(getByText(testContent)).toBeDefined();
+
+    fireEvent(getByText(testHeader), 'onPress');
+
+    expect(getByText(testHeader)).toBeDefined();
+    expect(queryByText(testContent)).toBeNull();
+
+    fireEvent(getByText(testHeader), 'onPress');
+
+    expect(getByText(testHeader)).toBeDefined();
+    expect(getByText(testContent)).toBeDefined();
+  });
+});