feat: use account API v4 transactions

app/components/UI/MultichainBridgeTransactionListItem/MultichainBridgeTransactionListItem.tsx

@@ -27,6 +27,7 @@ import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrap
 import Badge, {
   BadgeVariant,
 } from '../../../component-library/components/Badges/Badge';
+import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
 import { getNetworkImageSource } from '../../../util/networks';
 import { parseCaipAssetType } from '@metamask/utils';
 import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
@@ -102,10 +103,13 @@ const MultichainBridgeTransactionListItem = ({
     const networkImageSource = getNetworkImageSource({ chainId });
     return (
       <BadgeWrapper
+        badgePosition={{ bottom: -4, right: -4 }}
         badgeElement={
           <Badge
             variant={BadgeVariant.Network}
             imageSource={networkImageSource}
+            isScaled={false}
+            size={AvatarSize.Xs}
           />
         }
       >

app/components/UI/MultichainTransactionListItem/MultichainTransactionListItem.tsx

@@ -21,6 +21,7 @@ import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrap
 import Badge, {
   BadgeVariant,
 } from '../../../component-library/components/Badges/Badge';
+import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
 import { getNetworkImageSource } from '../../../util/networks';
 import Routes from '../../../constants/navigation/Routes';
 import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
@@ -91,10 +92,13 @@ const MultichainTransactionListItem = ({
 
     return (
       <BadgeWrapper
+        badgePosition={{ bottom: -4, right: -4 }}
         badgeElement={
           <Badge
             variant={BadgeVariant.Network}
             imageSource={networkImageSource}
+            isScaled={false}
+            size={AvatarSize.Xs}
           />
         }
       >

app/components/UI/TransactionElement/index.js

@@ -46,6 +46,7 @@ import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrap
 import Badge, {
   BadgeVariant,
 } from '../../../component-library/components/Badges/Badge';
+import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
 import { NetworkBadgeSource } from '../AssetOverview/Balance/Balance';
 import {
   getFontFamily,
@@ -98,6 +99,10 @@ const createStyles = (colors, typography) =>
       width: 32,
       height: 32,
     },
+    iconBadgePosition: {
+      bottom: -4,
+      right: -4,
+    },
     importText: {
       color: colors.text.alternative,
       fontSize: 14,
@@ -264,13 +269,13 @@ class TransactionElement extends PureComponent {
   mounted = false;
 
   componentDidMount = async () => {
+    this.mounted = true;
     const [transactionElement, transactionDetails] = await decodeTransaction({
       ...this.props,
       swapsTransactions: this.props.swapsTransactions,
       assetSymbol: this.props.assetSymbol,
       ticker: this.props.ticker,
     });
-    this.mounted = true;
 
     this.mounted && this.setState({ transactionElement, transactionDetails });
   };
@@ -461,10 +466,13 @@ class TransactionElement extends PureComponent {
 
     return (
       <BadgeWrapper
+        badgePosition={styles.iconBadgePosition}
         badgeElement={
           <Badge
             variant={BadgeVariant.Network}
             imageSource={NetworkBadgeSource(chainId)}
+            isScaled={false}
+            size={AvatarSize.Xs}
           />
         }
       >
@@ -707,14 +715,43 @@ class TransactionElement extends PureComponent {
     );
   };
 
+  renderPendingElement = () => {
+    const { i, tx } = this.props;
+    const { colors, typography } = this.context || mockTheme;
+    const styles = createStyles(colors, typography);
+
+    return (
+      <ListItem>
+        <ListItem.Date style={styles.listItemDate}>
+          {this.renderTxTime()}
+        </ListItem.Date>
+        <ListItem.Content style={styles.listItemContent}>
+          <ListItem.Icon>
+            <View style={styles.icon} />
+          </ListItem.Icon>
+          <ListItem.Body>
+            <ListItem.Title numberOfLines={1} style={styles.listItemTitle}>
+              ...
+            </ListItem.Title>
+            <StatusText
+              testID={`transaction-status-${i}`}
+              status={tx.status}
+              style={styles.listItemStatus}
+            />
+          </ListItem.Body>
+        </ListItem.Content>
+      </ListItem>
+    );
+  };
+
   render() {
     const { tx, selectedInternalAccount } = this.props;
     const { transactionElement, transactionDetails } = this.state;
 
     const { colors, typography } = this.context || mockTheme;
     const styles = createStyles(colors, typography);
 
-    if (!transactionElement || !transactionDetails) return null;
+    const isReady = Boolean(transactionElement && transactionDetails);
 
     const accountImportTime = selectedInternalAccount?.metadata.importTime;
     const { time } = tx;
@@ -726,11 +763,13 @@ class TransactionElement extends PureComponent {
           style={
             this.props.showBottomBorder ? styles.rowWithBorder : styles.row
           }
-          onPress={this.onPressItem}
+          onPress={isReady ? this.onPressItem : undefined}
           underlayColor={colors.background.alternative}
           activeOpacity={1}
         >
-          {this.renderTxElement(transactionElement)}
+          {isReady
+            ? this.renderTxElement(transactionElement)
+            : this.renderPendingElement()}
         </TouchableHighlight>
         {accountImportTime <= time && this.renderImportTime()}
       </>