index.js

import React, { PureComponent, useCallback } from 'react';
import PropTypes from 'prop-types';
import {
  TouchableOpacity,
  TouchableHighlight,
  StyleSheet,
  Image,
  Text,
  View,
} from 'react-native';
import { fontStyles } from '../../../styles/common';
import FAIcon from 'react-native-vector-icons/FontAwesome';
import { strings } from '../../../../locales/i18n';
import { toDateFormat } from '../../../util/date';
import { safeToChecksumAddress } from '../../../util/address';
import { connect, useSelector } from 'react-redux';
import StyledButton from '../StyledButton';
import decodeTransaction from './utils';
import { TRANSACTION_TYPES } from '../../../util/transactions';
import ListItem from '../../Base/ListItem';
import StatusText from '../../Base/StatusText';
import { isTestNet, getDecimalChainId } from '../../../util/networks';
import {
  TransactionType,
  WalletDevice,
} from '@metamask/transaction-controller';
import { ThemeContext, mockTheme } from '../../../util/theme';
import { selectTickerByChainId } from '../../../selectors/networkController';
import {
  selectSelectedInternalAccount,
  selectSelectedInternalAccountAddress,
} from '../../../selectors/accountsController';
import { selectSelectedAccountGroupInternalAccounts } from '../../../selectors/multichainAccounts/accountTreeController';
import { selectPrimaryCurrency } from '../../../selectors/settings';
import {
  selectSwapsTransactions,
  selectTransactions,
} from '../../../selectors/transactionController';
import {
  FINAL_NON_CONFIRMED_STATUSES,
  useBridgeTxHistoryData,
} from '../../../util/bridge/hooks/useBridgeTxHistoryData';
import BridgeActivityItemTxSegments from '../Bridge/components/TransactionDetails/BridgeActivityItemTxSegments';
import {
  getSwapBridgeTxActivityTitle,
  handleUnifiedSwapsTxHistoryItemClick,
} from '../Bridge/utils/transaction-history';
import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrapper';
import Badge, {
  BadgeVariant,
} from '../../../component-library/components/Badges/Badge';
import { NetworkBadgeSource } from '../AssetOverview/Balance/Balance';
import {
  getFontFamily,
  TextVariant,
} from '../../../component-library/components/Texts/Text';
import {
  selectConversionRateByChainId,
  selectCurrencyRates,
} from '../../../selectors/currencyRateController';
import { selectContractExchangeRatesByChainId } from '../../../selectors/tokenRatesController';
import { selectTokensByChainIdAndWalletAddress } from '../../../selectors/tokensController';
import Routes from '../../../constants/navigation/Routes';
import {
  hasGasFeeTokenSelected,
  hasTransactionType,
} from '../../Views/confirmations/utils/transaction';
import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
import {
  TRANSACTION_DETAIL_EVENTS,
  TransactionDetailLocation,
  getMonetizedPrimitive,
} from '../../../core/Analytics/events/transactions';
import { getTransactionTypeValue } from '../../../core/Engine/controllers/transaction-controller/metrics_properties/base';

const createStyles = (colors, typography) =>
  StyleSheet.create({
    row: {
      backgroundColor: colors.background.default,
      flex: 1,
    },
    rowWithBorder: {
      backgroundColor: colors.background.default,
      flex: 1,
      borderBottomWidth: 1,
      borderBottomColor: colors.border.muted,
    },
    actionContainerStyle: {
      height: 25,
      padding: 0,
    },
    speedupActionContainerStyle: {
      marginRight: 10,
    },
    actionStyle: {
      fontSize: 10,
      padding: 0,
      paddingHorizontal: 10,
    },
    icon: {
      width: 32,
      height: 32,
    },
    importText: {
      color: colors.text.alternative,
      fontSize: 14,
      ...fontStyles.bold,
      alignContent: 'center',
    },
    importRowBody: {
      alignItems: 'center',
      paddingTop: 10,
    },
    listItemDate: {
      marginBottom: 10,
      paddingBottom: 0,
    },
    listItemContent: {
      alignItems: 'flex-start',
      marginTop: 0,
      paddingTop: 0,
    },
    listItemTitle: {
      ...typography.sBodyLGMedium,
      fontFamily: getFontFamily(TextVariant.BodyLGMedium),
      marginTop: 0,
    },
    listItemStatus: {
      ...typography.sBodyMDBold,
      fontFamily: getFontFamily(TextVariant.BodyMDBold),
    },
    listItemFiatAmount: {
      ...typography.sBodyLGMedium,
      fontFamily: getFontFamily(TextVariant.BodyLGMedium),
      marginTop: 0,
    },
    listItemAmount: {
      ...typography.sBodyMD,
      fontFamily: getFontFamily(TextVariant.BodyMD),
      color: colors.text.alternative,
    },
  });

/* eslint-disable import-x/no-commonjs */
const transactionIconApprove = require('../../../images/transaction-icons/approve.png');
const transactionIconInteraction = require('../../../images/transaction-icons/interaction.png');
const transactionIconSent = require('../../../images/transaction-icons/send.png');
const transactionIconReceived = require('../../../images/transaction-icons/receive.png');
const transactionIconSwap = require('../../../images/transaction-icons/swap.png');

const transactionIconApproveFailed = require('../../../images/transaction-icons/approve-failed.png');
const transactionIconInteractionFailed = require('../../../images/transaction-icons/interaction-failed.png');
const transactionIconSentFailed = require('../../../images/transaction-icons/send-failed.png');
const transactionIconReceivedFailed = require('../../../images/transaction-icons/receive-failed.png');
const transactionIconSwapFailed = require('../../../images/transaction-icons/swap-failed.png');
/* eslint-enable import-x/no-commonjs */

const NEW_TRANSACTION_DETAILS_TYPES = [
  TransactionType.musdClaim,
  TransactionType.musdConversion,
  TransactionType.moneyAccountDeposit,
  TransactionType.moneyAccountWithdraw,
  TransactionType.perpsDeposit,
  TransactionType.perpsDepositAndOrder,
  TransactionType.perpsWithdraw,
  TransactionType.predictClaim,
  TransactionType.predictDeposit,
  TransactionType.predictWithdraw,
];

const INTENT_STATUS = {
  SUBMITTED: 'SUBMITTED',
  PENDING: 'PENDING',
  COMPLETE: 'COMPLETE',
  FAILED: 'FAILED',
  UNKNOWN: 'UNKNOWN',
};

const TRANSACTION_STATUS = {
  SUBMITTED: 'submitted',
  PENDING: 'pending',
  CONFIRMED: 'confirmed',
  FAILED: 'failed',
};
/**
 * View that renders a transaction item part of transactions list
 */
class TransactionElement extends PureComponent {
  static propTypes = {
    assetSymbol: PropTypes.string,
    /**
     * Asset object (in this case ERC721 token)
     */
    tx: PropTypes.object,
    /**
    /* InternalAccount object required to get import time name
    */
    selectedInternalAccount: PropTypes.object,
    /**
     * Internal accounts for the selected account group
     */
    selectSelectedAccountGroupInternalAccounts: PropTypes.array,
    /**
     * Current element of the list index
     */
    i: PropTypes.number,
    /**
     * Callback to render transaction details view
     */
    onPressItem: PropTypes.func,
    /**
     * Callback to speed up tx
     */
    onSpeedUpAction: PropTypes.func,
    /**
     * Callback to cancel tx
     */
    onCancelAction: PropTypes.func,
    swapsTransactions: PropTypes.object,
    signQRTransaction: PropTypes.func,
    cancelUnsignedQRTransaction: PropTypes.func,
    isQRHardwareAccount: PropTypes.bool,
    isLedgerAccount: PropTypes.bool,
    signLedgerTransaction: PropTypes.func,
    bridgeTxHistoryData: PropTypes.object,
    /**
     * Chain Id
     */
    txChainId: PropTypes.string,
    /**
     * Selected wallet address for decoding and token map (optional override from parent)
     */
    selectedAddress: PropTypes.string,
    /**
     * Ticker
     */
    ticker: PropTypes.string,
    /**
     * Navigation object for routing
     */
    navigation: PropTypes.shape({
      navigate: PropTypes.func.isRequired,
    }).isRequired,
    /**
     * Whether to render a bottom border for row separation (used in unified list)
     */
    showBottomBorder: PropTypes.bool,
    /**
     * All EVM transactions in controller state
     */
    transactions: PropTypes.arrayOf(PropTypes.object).isRequired,
    /**
     * Callback to track transaction detail click analytics
     */
    trackTransactionDetailClicked: PropTypes.func,
  };

  state = {
    actionKey: undefined,
    cancelIsOpen: false,
    speedUpIsOpen: false,
    transactionGas: {
      gasBN: undefined,
      gasPriceBN: undefined,
      gasTotal: undefined,
    },
    transactionElement: undefined,
    transactionDetails: undefined,
  };

  mounted = false;

  componentDidMount = async () => {
    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 });
  };

  componentDidUpdate(prevProps) {
    if (
      prevProps.txChainId !== this.props.txChainId ||
      prevProps.swapsTransactions !== this.props.swapsTransactions ||
      prevProps.selectedAddress !== this.props.selectedAddress
    ) {
      this.componentDidMount();
    }
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  onPressItem = () => {
    const { tx, i, onPressItem, trackTransactionDetailClicked } = this.props;
    onPressItem && onPressItem(tx.id, i);
    trackTransactionDetailClicked && trackTransactionDetailClicked();

    const isUnifiedSwap =
      tx.type === TransactionType.swap &&
      this.props.bridgeTxHistoryData?.bridgeTxHistoryItem;

    if (tx.type === TransactionType.bridge || isUnifiedSwap) {
      handleUnifiedSwapsTxHistoryItemClick({
        navigation: this.props.navigation,
        evmTxMeta: tx,
        bridgeTxHistoryItem:
          this.props.bridgeTxHistoryData?.bridgeTxHistoryItem,
      });
    } else if (hasTransactionType(tx, NEW_TRANSACTION_DETAILS_TYPES)) {
      // Navigate to TRANSACTIONS_VIEW first to ensure correct navigation context,
      // then navigate to TRANSACTION_DETAILS (pattern from usePerpsToasts)
      this.props.navigation.navigate(Routes.TRANSACTIONS_VIEW);
      setTimeout(() => {
        this.props.navigation.navigate(Routes.TRANSACTION_DETAILS, {
          transactionId: tx.id,
        });
      }, 100);
    } else {
      const { transactionElement, transactionDetails } = this.state;
      this.props.navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
        screen: Routes.SHEET.TRANSACTION_DETAILS,
        params: {
          tx,
          transactionElement,
          transactionDetails,
          showSpeedUpModal: this.showSpeedUpModal,
          showCancelModal: this.showCancelModal,
        },
      });
    }
  };

  onPressImportWalletTip = () => {
    this.props.navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
      screen: Routes.SHEET.IMPORT_WALLET_TIP,
    });
  };

  renderTxTime = () => {
    const {
      tx,
      selectedInternalAccount,
      selectSelectedAccountGroupInternalAccounts,
    } = this.props;

    let incoming = false;
    let selfSent = false;

    const selectedAddresses = selectSelectedAccountGroupInternalAccounts.map(
      (account) => account.address,
    );
    incoming = selectedAddresses.includes(
      safeToChecksumAddress(tx.txParams.to),
    );
    selfSent =
      incoming &&
      selectedAddresses.includes(safeToChecksumAddress(tx.txParams.from));
    const shouldShowFromDevice =
      (!incoming || selfSent) &&
      tx.deviceConfirmedOn === WalletDevice.MM_MOBILE;
    const hasNonce = tx.txParams?.nonce;

    if (shouldShowFromDevice && hasNonce) {
      return `#${parseInt(tx.txParams.nonce, 16)} - ${toDateFormat(
        tx.time,
      )} ${strings('transactions.from_device_label')}`;
    }
    if (shouldShowFromDevice && !hasNonce) {
      return `${toDateFormat(tx.time)} ${strings('transactions.from_device_label')}`;
    }
    return `${toDateFormat(tx.time)}`;
  };

  /**
   * Function that evaluates tx to see if the Added Wallet label should be rendered.
   * @returns Account added to wallet view
   */
  renderImportTime = () => {
    const { tx, selectedInternalAccount } = this.props;
    const { colors, typography } = this.context || mockTheme;
    const styles = createStyles(colors, typography);
    const accountImportTime = selectedInternalAccount?.metadata.importTime;
    if (tx.insertImportTime && accountImportTime) {
      return (
        <View style={styles.row}>
          <TouchableOpacity
            onPress={this.onPressImportWalletTip}
            style={styles.importRowBody}
          >
            <Text style={styles.importText}>
              {`${strings('transactions.import_wallet_row')} `}
              <FAIcon name="info-circle" style={styles.infoIcon} />
            </Text>
            <ListItem.Date>{toDateFormat(accountImportTime)}</ListItem.Date>
          </TouchableOpacity>
        </View>
      );
    }
    return null;
  };

  renderTxElementIcon = (transactionElement, tx) => {
    const { chainId: txChainId, requiredTransactionIds, status, type } = tx;
    const { transactionType } = transactionElement;
    const { colors, typography } = this.context || mockTheme;
    const styles = createStyles(colors, typography);
    const { transactions } = this.props;

    const isFailedTransaction = status === 'cancelled' || status === 'failed';
    let icon;
    switch (transactionType) {
      case TRANSACTION_TYPES.SENT_TOKEN:
      case TRANSACTION_TYPES.SENT_COLLECTIBLE:
      case TRANSACTION_TYPES.SENT:
        icon = isFailedTransaction
          ? transactionIconSentFailed
          : transactionIconSent;
        break;
      case TRANSACTION_TYPES.RECEIVED_TOKEN:
      case TRANSACTION_TYPES.RECEIVED_COLLECTIBLE:
      case TRANSACTION_TYPES.RECEIVED:
        icon = isFailedTransaction
          ? transactionIconReceivedFailed
          : transactionIconReceived;
        break;
      case TRANSACTION_TYPES.SITE_INTERACTION:
        icon = isFailedTransaction
          ? transactionIconInteractionFailed
          : transactionIconInteraction;
        break;
      case TRANSACTION_TYPES.SWAPS_TRANSACTION:
        icon = isFailedTransaction
          ? transactionIconSwapFailed
          : transactionIconSwap;
        break;
      case TRANSACTION_TYPES.BRIDGE_TRANSACTION:
        icon = isFailedTransaction
          ? transactionIconSwapFailed
          : transactionIconSwap;
        break;
      case TRANSACTION_TYPES.APPROVE:
      case TRANSACTION_TYPES.INCREASE_ALLOWANCE:
      case TRANSACTION_TYPES.SET_APPROVAL_FOR_ALL:
        icon = isFailedTransaction
          ? transactionIconApproveFailed
          : transactionIconApprove;
        break;
    }

    const perpsDepositChainId =
      type === TransactionType.perpsDeposit && requiredTransactionIds?.length
        ? transactions?.find((t) => t.id === requiredTransactionIds[0])?.chainId
        : undefined;

    const withdrawChainId = hasTransactionType(this.props.tx, [
      TransactionType.predictWithdraw,
      TransactionType.perpsWithdraw,
    ])
      ? this.props.tx.metamaskPay?.chainId
      : undefined;

    const chainId = perpsDepositChainId ?? withdrawChainId ?? txChainId;

    return (
      <BadgeWrapper
        badgeElement={
          <Badge
            variant={BadgeVariant.Network}
            imageSource={NetworkBadgeSource(chainId)}
          />
        }
      >
        <Image source={icon} style={styles.icon} resizeMode="stretch" />
      </BadgeWrapper>
    );
  };

  mapIntentStatusToTransactionStatus = (intentStatus) => {
    if (intentStatus === INTENT_STATUS.PENDING) {
      return TRANSACTION_STATUS.PENDING;
    }
    if (intentStatus === INTENT_STATUS.COMPLETE) {
      return TRANSACTION_STATUS.CONFIRMED;
    }
    if (intentStatus === INTENT_STATUS.FAILED) {
      return TRANSACTION_STATUS.FAILED;
    }
    if (intentStatus === INTENT_STATUS.SUBMITTED) {
      return TRANSACTION_STATUS.SUBMITTED;
    }

    // if it is unknown status, default to failed
    return TRANSACTION_STATUS.FAILED;
  };

  /**
   * Renders an horizontal bar with basic tx information
   *
   * @param {object} transactionElement - Transaction information to render, containing addressTo, actionKey, value, fiatValue, contractDeployment
   */
  renderTxElement = (transactionElement) => {
    const {
      isQRHardwareAccount,
      isLedgerAccount,
      i,
      tx: { status, isSmartTransaction, chainId, type },
      tx,
      bridgeTxHistoryData: { bridgeTxHistoryItem, isBridgeComplete },
    } = this.props;
    const isBridgeTransaction = type === TransactionType.bridge;
    const isUnifiedSwap = type === TransactionType.swap && bridgeTxHistoryItem;
    const { colors, typography } = this.context || mockTheme;
    const styles = createStyles(colors, typography);
    const { value, fiatValue = false, actionKey } = transactionElement;
    const transactionStatus =
      bridgeTxHistoryItem?.status && bridgeTxHistoryItem.quote.intent
        ? this.mapIntentStatusToTransactionStatus(
            bridgeTxHistoryItem.status.status,
          )
        : status;

    const renderNormalActions =
      (transactionStatus === 'submitted' ||
        (transactionStatus === 'approved' &&
          !isQRHardwareAccount &&
          !isLedgerAccount)) &&
      !isSmartTransaction &&
      !isBridgeTransaction &&
      !hasGasFeeTokenSelected(tx);
    const renderUnsignedQRActions =
      transactionStatus === 'approved' && isQRHardwareAccount;
    const renderLedgerActions =
      transactionStatus === 'approved' && isLedgerAccount;
    let title = actionKey;
    if ((isBridgeTransaction || isUnifiedSwap) && bridgeTxHistoryItem) {
      title = getSwapBridgeTxActivityTitle(bridgeTxHistoryItem) ?? title;
    }

    return (
      <ListItem>
        <ListItem.Date style={styles.listItemDate}>
          {this.renderTxTime()}
        </ListItem.Date>
        <ListItem.Content style={styles.listItemContent}>
          <ListItem.Icon>
            {this.renderTxElementIcon(transactionElement, tx)}
          </ListItem.Icon>
          <ListItem.Body>
            <ListItem.Title numberOfLines={1} style={styles.listItemTitle}>
              {title}
            </ListItem.Title>
            {!FINAL_NON_CONFIRMED_STATUSES.includes(transactionStatus) &&
            isBridgeTransaction &&
            !isBridgeComplete ? (
              <BridgeActivityItemTxSegments
                bridgeTxHistoryItem={bridgeTxHistoryItem}
                transactionStatus={transactionStatus}
              />
            ) : (
              <StatusText
                testID={`transaction-status-${i}`}
                status={transactionStatus}
                style={styles.listItemStatus}
              />
            )}
          </ListItem.Body>
          {Boolean(value) && (
            <ListItem.Amounts>
              {!isTestNet(chainId) && (
                <ListItem.FiatAmount style={styles.listItemFiatAmount}>
                  {fiatValue}
                </ListItem.FiatAmount>
              )}
              <ListItem.Amount style={styles.listItemAmount}>
                {value}
              </ListItem.Amount>
            </ListItem.Amounts>
          )}
        </ListItem.Content>
        {renderNormalActions && (
          <ListItem.Actions>
            {this.renderSpeedUpButton()}
            {this.renderCancelButton()}
          </ListItem.Actions>
        )}
        {renderUnsignedQRActions && (
          <ListItem.Actions>
            {this.renderQRSignButton()}
            {this.renderCancelUnsignedButton()}
          </ListItem.Actions>
        )}
        {renderLedgerActions && (
          <ListItem.Actions>{this.renderLedgerSignButton()}</ListItem.Actions>
        )}
      </ListItem>
    );
  };

  renderCancelButton = () => {
    const { colors, typography } = this.context || mockTheme;
    const styles = createStyles(colors, typography);

    return (
      <StyledButton
        type={'cancel'}
        containerStyle={styles.actionContainerStyle}
        style={styles.actionStyle}
        onPress={this.showCancelModal}
      >
        {strings('transaction.cancel')}
      </StyledButton>
    );
  };

  showCancelModal = () => {
    this.mounted && this.props.onCancelAction(true, this.props.tx);
  };

  showSpeedUpModal = () => {
    this.mounted && this.props.onSpeedUpAction(true, this.props.tx);
  };

  hideSpeedUpModal = () => {
    this.mounted && this.props.onSpeedUpAction(false);
  };

  showQRSigningModal = () => {
    this.mounted && this.props.signQRTransaction(this.props.tx);
  };

  showLedgerSigninModal = () => {
    this.mounted && this.props.signLedgerTransaction(this.props.tx);
  };

  cancelUnsignedQRTransaction = () => {
    this.mounted && this.props.cancelUnsignedQRTransaction(this.props.tx);
  };

  renderSpeedUpButton = () => {
    const { colors, typography } = this.context || mockTheme;
    const styles = createStyles(colors, typography);

    return (
      <StyledButton
        type={'normal'}
        containerStyle={[
          styles.actionContainerStyle,
          styles.speedupActionContainerStyle,
        ]}
        style={styles.actionStyle}
        onPress={this.showSpeedUpModal}
      >
        {strings('transaction.speedup')}
      </StyledButton>
    );
  };

  renderQRSignButton = () => {
    const { colors, typography } = this.context || mockTheme;
    const styles = createStyles(colors, typography);
    return (
      <StyledButton
        type={'normal'}
        containerStyle={[
          styles.actionContainerStyle,
          styles.speedupActionContainerStyle,
        ]}
        style={styles.actionStyle}
        onPress={this.showQRSigningModal}
      >
        {strings('transaction.sign_with_keystone')}
      </StyledButton>
    );
  };

  renderLedgerSignButton = () => {
    const { colors, typography } = this.context || mockTheme;
    const styles = createStyles(colors, typography);
    return (
      <StyledButton
        type={'normal'}
        containerStyle={[
          styles.actionContainerStyle,
          styles.speedupActionContainerStyle,
        ]}
        style={styles.actionStyle}
        onPress={this.showLedgerSigninModal}
      >
        {strings('transaction.sign_with_ledger')}
      </StyledButton>
    );
  };

  renderCancelUnsignedButton = () => {
    const { colors, typography } = this.context || mockTheme;
    const styles = createStyles(colors, typography);
    return (
      <StyledButton
        type={'cancel'}
        containerStyle={[
          styles.actionContainerStyle,
          styles.speedupActionContainerStyle,
        ]}
        style={styles.actionStyle}
        onPress={this.cancelUnsignedQRTransaction}
      >
        {strings('transaction.cancel')}
      </StyledButton>
    );
  };

  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 accountImportTime = selectedInternalAccount?.metadata.importTime;
    const { time } = tx;

    return (
      <>
        {accountImportTime > time && this.renderImportTime()}
        <TouchableHighlight
          style={
            this.props.showBottomBorder ? styles.rowWithBorder : styles.row
          }
          onPress={this.onPressItem}
          underlayColor={colors.background.alternative}
          activeOpacity={1}
        >
          {this.renderTxElement(transactionElement)}
        </TouchableHighlight>
        {accountImportTime <= time && this.renderImportTime()}
      </>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  const walletAddressForTokens =
    ownProps.selectedAddress ?? selectSelectedInternalAccountAddress(state);
  return {
    selectedInternalAccount: selectSelectedInternalAccount(state),
    selectSelectedAccountGroupInternalAccounts:
      selectSelectedAccountGroupInternalAccounts(state),
    primaryCurrency: selectPrimaryCurrency(state),
    swapsTransactions: selectSwapsTransactions(state),
    ticker: selectTickerByChainId(state, ownProps.txChainId),
    conversionRate: selectConversionRateByChainId(state, ownProps.txChainId),
    currencyRates: selectCurrencyRates(state),
    contractExchangeRates: selectContractExchangeRatesByChainId(
      state,
      ownProps.txChainId,
    ),
    tokens: selectTokensByChainIdAndWalletAddress(
      state,
      ownProps.txChainId,
      walletAddressForTokens,
    ),
  };
};

TransactionElement.contextType = ThemeContext;

// Create a wrapper functional component
const TransactionElementWithBridge = (props) => {
  const bridgeTxHistoryData = useBridgeTxHistoryData({ evmTxMeta: props.tx });
  const transactions = useSelector(selectTransactions);
  const { trackEvent, createEventBuilder } = useAnalytics();

  const trackTransactionDetailClicked = useCallback(() => {
    const tx = props.tx;
    const chainId = tx.chainId ?? '';
    const decimalChainId = getDecimalChainId(chainId);
    const monetizedPrimitive = getMonetizedPrimitive(tx.type);
    const destChainId =
      bridgeTxHistoryData?.bridgeTxHistoryItem?.quote?.destChainId;

    trackEvent(
      createEventBuilder(TRANSACTION_DETAIL_EVENTS.LIST_ITEM_CLICKED)
        .addProperties({
          transaction_type: getTransactionTypeValue(tx.type, tx),
          transaction_status: tx.status,
          location: props.location ?? TransactionDetailLocation.Home,
          chain_id_source: String(decimalChainId),
          chain_id_destination: String(destChainId ?? decimalChainId),
          ...(monetizedPrimitive && {
            monetized_primitive: monetizedPrimitive,
          }),
        })
        .build(),
    );
  }, [
    props.tx,
    props.location,
    bridgeTxHistoryData,
    trackEvent,
    createEventBuilder,
  ]);

  return (
    <TransactionElement
      {...props}
      bridgeTxHistoryData={bridgeTxHistoryData}
      transactions={transactions}
      trackTransactionDetailClicked={trackTransactionDetailClicked}
    />
  );
};

TransactionElementWithBridge.propTypes = {
  tx: PropTypes.object.isRequired,
  location: PropTypes.string,
};

export default connect(mapStateToProps)(TransactionElementWithBridge);