feat: Add advanced details row into transfer confirmations

app/components/Views/confirmations/components/UI/expandable-section/expandable-section.styles.ts → app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts

@@ -38,10 +38,6 @@ const styleSheet = (params: { theme: Theme, vars: { isCompact: boolean | undefin
       width: '90%',
       textAlign: 'center',
     },
-    expandIcon: {
-      position: 'absolute',
-      right: 16,
-    },
   });
 };
 

app/components/Views/confirmations/components/UI/expandable-section/expandable-section.test.tsx → app/components/Views/confirmations/components/UI/expandable/expandable.test.tsx

@@ -4,12 +4,12 @@ import { fireEvent, render } from '@testing-library/react-native';
 
 import InfoSection from '../info-row/info-section';
 import InfoRow from '../info-row/info-row';
-import ExpandableSection from './expandable-section';
+import Expandable from './expandable';
 
-describe('ExpandableSection', () => {
-  it('should render correctly for simple ExpandableSection', async () => {
+describe('Expandable', () => {
+  it('should render correctly for simple Expandable', async () => {
     const { getByText } = render(
-      <ExpandableSection
+      <Expandable
         collapsedContent={
           <View>
             <Text>Open</Text>
@@ -28,7 +28,7 @@ describe('ExpandableSection', () => {
 
   it('should display default content', async () => {
     const { getByText } = render(
-      <ExpandableSection
+      <Expandable
         collapsedContent={
           <View>
             <Text>Open</Text>
@@ -47,7 +47,7 @@ describe('ExpandableSection', () => {
 
   it('should open modal when right icon is pressed', async () => {
     const { getByTestId, getByText } = render(
-      <ExpandableSection
+      <Expandable
         collapsedContent={
           <View>
             <Text>Open</Text>

app/components/Views/confirmations/components/UI/expandable-section/expandable-section.tsx → app/components/Views/confirmations/components/UI/expandable/expandable.tsx

@@ -4,21 +4,19 @@ import { TouchableOpacity, View } from 'react-native';
 import ButtonIcon, {
   ButtonIconSizes,
 } from '../../../../../../component-library/components/Buttons/ButtonIcon';
-import Icon, {
+import {
   IconColor,
   IconName,
-  IconSize,
 } from '../../../../../../component-library/components/Icons/Icon';
 import Text from '../../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../../component-library/hooks';
 import BottomModal from '../bottom-modal';
-import styleSheet from './expandable-section.styles';
+import styleSheet from './expandable.styles';
 
-interface ExpandableSectionProps {
+interface ExpandableProps {
   collapsedContent: ReactNode;
   expandedContent: ReactNode;
   expandedContentTitle: string;
-  iconVerticalPosition?: IconVerticalPosition;
   collapseButtonTestID?: string;
   testID?: string;
   isCompact?: boolean;
@@ -28,21 +26,17 @@ export enum IconVerticalPosition {
   Top = 'top',
 }
 
-const ExpandableSection = ({
+const Expandable = ({
   collapsedContent,
   expandedContent,
   expandedContentTitle,
-  iconVerticalPosition,
   collapseButtonTestID,
   testID,
   isCompact,
-}: ExpandableSectionProps) => {
+}: ExpandableProps) => {
   const { styles } = useStyles(styleSheet, { isCompact });
   const [expanded, setExpanded] = useState(false);
 
-  const iconStyle =
-    iconVerticalPosition === IconVerticalPosition.Top ? { top: 20 } : {};
-
   return (
     <>
       <TouchableOpacity
@@ -53,18 +47,7 @@ const ExpandableSection = ({
         activeOpacity={1}
         testID={testID ?? 'expandableSection'}
       >
-        <View style={styles.container}>
-          {collapsedContent}
-          <Icon
-            color={IconColor.Muted}
-            size={IconSize.Sm}
-            name={IconName.ArrowRight}
-            style={{
-              ...styles.expandIcon,
-              ...iconStyle,
-            }}
-          />
-        </View>
+        {collapsedContent}
       </TouchableOpacity>
       {expanded && (
         <BottomModal onClose={() => setExpanded(false)}>
@@ -89,4 +72,4 @@ const ExpandableSection = ({
   );
 };
 
-export default ExpandableSection;
+export default Expandable;

app/components/Views/confirmations/components/UI/expandable/index.ts

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

app/components/Views/confirmations/components/UI/info-row/alert-row/alert-row.styles.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () => StyleSheet.create({
+    infoRowOverride: {
+      paddingBottom: 4,
+      paddingHorizontal: 8,
+    },
+  });
+
+export default styleSheet;

app/components/Views/confirmations/components/UI/info-row/alert-row/alert-row.tsx

@@ -4,7 +4,9 @@ import { useAlerts } from '../../../../context/alert-system-context';
 import { useConfirmationAlertMetrics } from '../../../../hooks/metrics/useConfirmationAlertMetrics';
 import { Severity } from '../../../../types/alerts';
 import { TextColor } from '../../../../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../../../../component-library/hooks';
 import InfoRow, { InfoRowProps } from '../info-row';
+import styleSheet from './alert-row.styles';
 
 function getAlertTextColors(
   severity?: Severity,
@@ -29,6 +31,7 @@ const AlertRow = ({ alertField, isShownWithAlertsOnly, ...props }: AlertRowProps
   const { fieldAlerts, showAlertModal, setAlertKey } = useAlerts();
   const { trackInlineAlertClicked } = useConfirmationAlertMetrics();
   const alertSelected = fieldAlerts.find((a) => a.field === alertField);
+  const { styles } = useStyles(styleSheet, {});
 
   const handleInlineAlertClick = () => {
     if(!alertSelected) return;
@@ -53,7 +56,13 @@ const AlertRow = ({ alertField, isShownWithAlertsOnly, ...props }: AlertRowProps
     />
   ) : null;
 
-  return <InfoRow {...alertRowProps} labelChildren={inlineAlert} />;
+  return (
+    <InfoRow
+      {...alertRowProps}
+      style={styles.infoRowOverride}
+      labelChildren={inlineAlert}
+    />
+  );
 };
 
 export default AlertRow;

app/components/Views/confirmations/components/UI/info-row/info-row.tsx

@@ -1,9 +1,13 @@
 import React, { ReactNode } from 'react';
 import { View } from 'react-native';
-import { IconColor } from '../../../../../../component-library/components/Icons/Icon';
+import Icon, {
+  IconColor,
+  IconName,
+  IconSize,
+} from '../../../../../../component-library/components/Icons/Icon';
 import Text, {
   TextColor,
-  TextVariant
+  TextVariant,
 } from '../../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../../component-library/hooks';
 import Tooltip from '../Tooltip/Tooltip';
@@ -21,6 +25,11 @@ export interface InfoRowProps {
   variant?: TextColor;
   copyText?: string;
   valueOnNewLine?: boolean;
+  withIcon?: {
+    color: IconColor;
+    size: IconSize;
+    name: IconName;
+  };
 }
 
 const InfoRow = ({
@@ -34,6 +43,7 @@ const InfoRow = ({
   variant = TextColor.Default,
   copyText,
   valueOnNewLine = false,
+  withIcon,
 }: InfoRowProps) => {
   const { styles } = useStyles(styleSheet, {});
 
@@ -65,6 +75,13 @@ const InfoRow = ({
             color={IconColor.Muted}
           />
         )}
+        {withIcon && (
+          <Icon
+            color={withIcon.color}
+            size={withIcon.size}
+            name={withIcon.name}
+          />
+        )}
       </View>
       {valueOnNewLine ? (
         <View style={styles.valueOnNewLineContainer}>

app/components/Views/confirmations/components/info/transfer/transfer.test.tsx

@@ -19,6 +19,12 @@ jest.mock('../../../../../../core/Engine', () => ({
     TokenListController: {
       fetchTokenList: jest.fn(),
     },
+    TransactionController: {
+      updateTransaction: jest.fn(),
+      getNonceLock: jest
+        .fn()
+        .mockResolvedValue({ nextNonce: 2, releaseLock: jest.fn() }),
+    },
   },
 }));
 

app/components/Views/confirmations/components/info/transfer/transfer.tsx

@@ -9,6 +9,7 @@ import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTr
 import useNavbar from '../../../hooks/ui/useNavbar';
 import FromTo from '../../rows/transactions/from-to';
 import GasFeesDetails from '../../rows/transactions/gas-fee-details';
+import AdvancedDetailsRow from '../../rows/transactions/advanced-details-row/advanced-details-row';
 import TokenHero from '../../rows/transactions/token-hero';
 import styleSheet from './transfer.styles';
 
@@ -33,6 +34,7 @@ const Transfer = () => {
         />
       </View>
       <GasFeesDetails />
+      <AdvancedDetailsRow />
     </View>
   );
 };

app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-collapsed/account-network-info-collapsed.styles.ts

@@ -13,16 +13,21 @@ const styleSheet = (params: {
   } = params;
 
   return StyleSheet.create({
-    container: {
-      display: 'flex',
+    container:{
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 8,
+      paddingBottom: 4,
+    },
+    accountContainer: {
+      flex: 1,
       flexDirection: 'row',
     },
     badgeWrapper: {
       marginRight: 16,
       alignSelf: 'center',
     },
     accountInfo: {
-      display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
       width: '100%',

app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-collapsed/account-network-info-collapsed.tsx

@@ -20,6 +20,12 @@ import TagBase, {
 import { getLabelTextByAddress } from '../../../../../../../util/address';
 import { useStyles } from '../../../../../../../component-library/hooks';
 import { RootState } from '../../../../../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.test';
+import InfoSection from '../../../UI/info-row/info-section';
+import Icon, {
+  IconColor,
+  IconName,
+  IconSize,
+} from '../../../../../../../component-library/components/Icons/Icon';
 import useAccountInfo from '../../../../hooks/useAccountInfo';
 import useNetworkInfo from '../../../../hooks/useNetworkInfo';
 import { useSignatureRequest } from '../../../../hooks/signatures/useSignatureRequest';
@@ -53,50 +59,59 @@ const AccountNetworkInfoCollapsed = () => {
   const { networkName, networkImage } = useNetworkInfo(chainId);
 
   return (
-    <View style={styles.container}>
-      <BadgeWrapper
-        badgePosition={BadgePosition.BottomRight}
-        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>
-        <View style={styles.accountInfo}>
-          <Text
-            ellipsizeMode="tail"
-            numberOfLines={1}
-            style={styles.accountName}
+    <InfoSection>
+      <View style={styles.container}>
+        <View style={styles.accountContainer}>
+          <BadgeWrapper
+            badgePosition={BadgePosition.BottomRight}
+            badgeElement={
+              <Badge
+                variant={BadgeVariant.Network}
+                name={networkName}
+                imageSource={networkImage}
+              />
+            }
+            style={styles.badgeWrapper}
           >
-            {accountName}
-          </Text>
-          {accountLabel && (
-            <TagBase
-              style={styles.accountLabel}
-              severity={TagSeverity.Neutral}
-              shape={TagShape.Rectangle}
-            >
-              {accountLabel}
-            </TagBase>
-          )}
+            <Avatar
+              variant={AvatarVariant.Account}
+              type={
+                useBlockieIcon
+                  ? AvatarAccountType.Blockies
+                  : AvatarAccountType.JazzIcon
+              }
+              accountAddress={fromAddress}
+            />
+          </BadgeWrapper>
+          <View>
+            <View style={styles.accountInfo}>
+              <Text
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={styles.accountName}
+              >
+                {accountName}
+              </Text>
+              {accountLabel && (
+                <TagBase
+                  style={styles.accountLabel}
+                  severity={TagSeverity.Neutral}
+                  shape={TagShape.Rectangle}
+                >
+                  {accountLabel}
+                </TagBase>
+              )}
+            </View>
+            <Text style={styles.networkName}>{networkName}</Text>
+          </View>
         </View>
-        <Text style={styles.networkName}>{networkName}</Text>
+        <Icon
+          color={IconColor.Muted}
+          size={IconSize.Sm}
+          name={IconName.ArrowRight}
+        />
       </View>
-    </View>
+    </InfoSection>
   );
 };