feat(money-account): add real activity to the money account

app/components/UI/Money/Views/MoneyActivityView/MoneyActivityView.test.tsx

@@ -74,6 +74,7 @@ describe('MoneyActivityView', () => {
       transfers: MOCK_TRANSFERS,
       submittedTransactions: [],
       moneyAddress: '0x0000000000000000000000000000000000000001',
+      mockDataEnabled: false,
     });
   });
 
@@ -144,6 +145,7 @@ describe('MoneyActivityView', () => {
       transfers: [],
       submittedTransactions: [],
       moneyAddress: '0x0000000000000000000000000000000000000001',
+      mockDataEnabled: false,
     });
 
     const { getByTestId } = renderWithProvider(<MoneyActivityView />);

app/components/UI/Money/Views/MoneyActivityView/MoneyActivityView.tsx

@@ -25,7 +25,7 @@ import MoneyActivityItem from '../../components/MoneyActivityItem';
 import { useMoneyAccountTransactions } from '../../hooks/useMoneyAccountTransactions';
 import { getMoneyActivityDateKeyUtc } from '../../constants/moneyActivityFilters';
 import { MoneyActivityFilter } from '../../constants/mockActivityData';
-import { showMoneyActivityUnderConstructionAlert } from '../../constants/showMoneyActivityUnderConstructionAlert';
+import Routes from '../../../../../constants/navigation/Routes';
 import { MoneyActivityViewTestIds } from './MoneyActivityView.testIds';
 
 const styles = StyleSheet.create({
@@ -67,16 +67,22 @@ const MoneyActivityView = () => {
   const { colors } = useTheme();
   const [filter, setFilter] = useState(MoneyActivityFilter.All);
 
-  const { allTransactions, deposits, transfers, moneyAddress } =
+  const { allTransactions, deposits, transfers, moneyAddress, mockDataEnabled } =
     useMoneyAccountTransactions();
 
   const handleBackPress = useCallback(() => {
     navigation.goBack();
   }, [navigation]);
 
-  const handleItemPress = useCallback(() => {
-    showMoneyActivityUnderConstructionAlert();
-  }, []);
+  const handleItemPress = useCallback(
+    (transactionId: string) => {
+      navigation.navigate(Routes.MONEY.MODALS.ROOT, {
+        screen: Routes.MONEY.MODALS.TRANSACTION_DETAILS_SHEET,
+        params: { transactionId },
+      });
+    },
+    [navigation],
+  );
 
   const filtered = useMemo(() => {
     if (filter === MoneyActivityFilter.All) {
@@ -110,7 +116,7 @@ const MoneyActivityView = () => {
     <MoneyActivityItem
       tx={item}
       moneyAddress={moneyAddress}
-      onPress={handleItemPress}
+      onPress={mockDataEnabled ? undefined : handleItemPress}
     />
   );
 

app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.test.tsx

@@ -236,6 +236,7 @@ describe('MoneyHomeView', () => {
       transfers: [],
       submittedTransactions: [],
       moneyAddress: '0x0000000000000000000000000000000000000001',
+      mockDataEnabled: false,
     });
   });
 
@@ -432,6 +433,7 @@ describe('MoneyHomeView', () => {
       transfers: [],
       submittedTransactions: [],
       moneyAddress: '0x0000000000000000000000000000000000000001',
+      mockDataEnabled: false,
     });
 
     const { getByTestId } = renderWithProvider(<MoneyHomeView />);
@@ -530,6 +532,7 @@ describe('MoneyHomeView', () => {
         transfers: [],
         submittedTransactions: [],
         moneyAddress: '0x0000000000000000000000000000000000000001',
+        mockDataEnabled: false,
       });
     });
 
@@ -591,6 +594,7 @@ describe('MoneyHomeView', () => {
         transfers: [],
         submittedTransactions: [],
         moneyAddress: '0x0000000000000000000000000000000000000001',
+        mockDataEnabled: false,
       });
       mockSelectIsCardholder.mockReturnValue(true);
       // Non-US so MetaMask card renders in link mode (manage mode is US-only).
@@ -774,6 +778,7 @@ describe('MoneyHomeView', () => {
         transfers: [],
         submittedTransactions: [],
         moneyAddress: '0x0000000000000000000000000000000000000001',
+        mockDataEnabled: false,
       });
     });
 
@@ -996,6 +1001,7 @@ describe('MoneyHomeView', () => {
         transfers: [],
         submittedTransactions: [],
         moneyAddress: '0x0000000000000000000000000000000000000001',
+        mockDataEnabled: false,
       });
     });
 

app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.tsx

@@ -26,7 +26,6 @@ import styleSheet from './MoneyHomeView.styles';
 import { useMusdConversionTokens } from '../../../Earn/hooks/useMusdConversionTokens';
 import { useMusdConversion } from '../../../Earn/hooks/useMusdConversion';
 import { useMoneyAccountTransactions } from '../../hooks/useMoneyAccountTransactions';
-import { showMoneyActivityUnderConstructionAlert } from '../../constants/showMoneyActivityUnderConstructionAlert';
 import useMoneyAccountBalance from '../../hooks/useMoneyAccountBalance';
 import { selectCurrentCurrency } from '../../../../../selectors/currencyRateController';
 import { moneyFormatFiat } from '../../utils/moneyFormatFiat';
@@ -68,7 +67,7 @@ const MoneyHomeView = () => {
 
   const { tokens: conversionTokens } = useMusdConversionTokens();
   const { initiateCustomConversion } = useMusdConversion();
-  const { allTransactions, moneyAddress } = useMoneyAccountTransactions();
+  const { allTransactions, moneyAddress, mockDataEnabled } = useMoneyAccountTransactions();
 
   const isCardholder = useSelector(selectIsCardholder);
   const { canLink, openLinkCardSheet } = useMoneyAccountCardLinkage();
@@ -206,9 +205,15 @@ const MoneyHomeView = () => {
   }, [navigation]);
   const handleActivityHeaderPress = handleViewAllActivityPress;
 
-  const handleActivityItemPress = useCallback(() => {
-    showMoneyActivityUnderConstructionAlert();
-  }, []);
+  const handleActivityItemPress = useCallback(
+    (transactionId: string) => {
+      navigation.navigate(Routes.MONEY.MODALS.ROOT, {
+        screen: Routes.MONEY.MODALS.TRANSACTION_DETAILS_SHEET,
+        params: { transactionId },
+      });
+    },
+    [navigation],
+  );
 
   const handleOnboardingCtaPress = useCallback(() => {
     if (isCardholderWithMilestone) {
@@ -305,7 +310,7 @@ const MoneyHomeView = () => {
                   : handleViewAllActivityPress
               }
               onHeaderPress={handleActivityHeaderPress}
-              onItemPress={handleActivityItemPress}
+              onItemPress={mockDataEnabled ? undefined : handleActivityItemPress}
             />
             <Divider />
           </>

app/components/UI/Money/components/MoneyActivityItem/MoneyActivityItem.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
 import {
   type TransactionMeta,
+  TransactionStatus,
   TransactionType,
 } from '@metamask/transaction-controller';
 import type { Hex } from '@metamask/utils';
@@ -83,6 +84,9 @@ describe('MoneyActivityItem', () => {
       primaryAmount: '+$0.00',
       fiatAmount: '$0.00',
       isIncoming: true,
+      sourceTokenSymbol: undefined,
+      sourceTokenImage: undefined,
+      sourceTokenChainId: undefined,
     });
   });
 
@@ -107,6 +111,9 @@ describe('MoneyActivityItem', () => {
       primaryAmount: '+$0.00',
       fiatAmount: '$0.00',
       isIncoming: false,
+      sourceTokenSymbol: undefined,
+      sourceTokenImage: undefined,
+      sourceTokenChainId: undefined,
     });
 
     const { queryByText } = renderWithProvider(
@@ -127,6 +134,21 @@ describe('MoneyActivityItem', () => {
     expect(onPress).toHaveBeenCalledTimes(1);
   });
 
+  it('shows "Failed" in the description slot for a failed transaction', () => {
+    const failedTx = {
+      ...baseTx,
+      status: TransactionStatus.failed,
+    } as unknown as TransactionMeta;
+
+    const { getByText, queryByText } = renderWithProvider(
+      <MoneyActivityItem tx={failedTx} moneyAddress="0x1" />,
+    );
+
+    expect(getByText('Failed')).toBeOnTheScreen();
+    // Normal description should not appear for failed rows
+    expect(queryByText('Description')).toBeNull();
+  });
+
   it('renders network badge subtree when showNetworkBadge is true', () => {
     const { getByTestId } = renderWithProvider(
       <MoneyActivityItem tx={baseTx} moneyAddress="0x1" showNetworkBadge />,

app/components/UI/Money/components/MoneyActivityItem/MoneyActivityItem.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Pressable } from 'react-native';
 import {
   Box,
@@ -9,7 +9,11 @@
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import type { TransactionMeta } from '@metamask/transaction-controller';
+import {
+  type TransactionMeta,
+  TransactionStatus,
+} from '@metamask/transaction-controller';
+import { strings } from '../../../../../../locales/i18n';
 import { getNetworkImageSource } from '../../../../../util/networks';
 import AvatarToken from '../../../../../component-library/components/Avatars/Avatar/variants/AvatarToken';
 import { AvatarSize } from '../../../../../component-library/components/Avatars/Avatar';
@@ -28,7 +32,7 @@
 export interface MoneyActivityItemProps {
   tx: TransactionMeta;
   moneyAddress: string | undefined;
-  onPress?: () => void;
+  onPress?: (transactionId: string) => void;
   /** When true, shows the chain network badge on the token avatar. Defaults to false. */
   showNetworkBadge?: boolean;
 }
@@ -43,22 +47,29 @@
 
   const display = useMoneyTransactionDisplayInfo(tx, moneyAddress);
 
-  const networkImageSource = useMemo(
-    () =>
-      showNetworkBadge
-        ? getNetworkImageSource({ chainId: tx.chainId })
-        : undefined,
-    [tx.chainId, showNetworkBadge],
-  );
+  const networkImageSource = showNetworkBadge
+    ? getNetworkImageSource({ chainId: tx.chainId })
+    : undefined;
+
+  // use the token's own image URI, or the source chain's network icon, or the mUSD icon
+  const tokenAvatarImageSource = display.sourceTokenImage
+    ? { uri: display.sourceTokenImage }
+    : display.sourceTokenChainId
+    ? getNetworkImageSource({ chainId: display.sourceTokenChainId })
+    : MUSD_TOKEN.imageSource;
 
-  const amountColor = display.isIncoming
+  const isFailed = tx.status === TransactionStatus.failed;
+
+  const amountColor = isFailed
+    ? TextColor.TextAlternative
+    : display.isIncoming
     ? TextColor.SuccessDefault
     : TextColor.TextDefault;
 
   return (
     <Pressable
       accessibilityRole="button"
-      onPress={onPress}
+      onPress={onPress ? () => onPress(tx.id) : undefined}
       testID={`${MoneyActivityItemTestIds.ROW}-${tx.id}`}
       style={({ pressed }) =>
         tw.style(
@@ -81,16 +92,16 @@
           }
         >
           <AvatarToken
-            name={MUSD_TOKEN.name}
-            imageSource={MUSD_TOKEN.imageSource}
+            name={display.sourceTokenSymbol ?? MUSD_TOKEN.name}
+            imageSource={tokenAvatarImageSource}
             size={AvatarSize.Lg}
           />
         </BadgeWrapper>
       ) : (
         <Box twClassName="self-center">
           <AvatarToken
-            name={MUSD_TOKEN.name}
-            imageSource={MUSD_TOKEN.imageSource}
+            name={display.sourceTokenSymbol ?? MUSD_TOKEN.name}
+            imageSource={tokenAvatarImageSource}
             size={AvatarSize.Lg}
           />
         </Box>
@@ -104,16 +115,25 @@
         >
           {display.label}
         </Text>
-        {display.description ? (
+        {isFailed ? (
+          <Text
+            variant={TextVariant.BodySm}
+            fontWeight={FontWeight.Medium}
+            color={TextColor.ErrorDefault}
+            numberOfLines={1}
+          >
+            {strings('money.transaction.failed')}
+          </Text>
+        ) : display.description ? (
           <Text
             variant={TextVariant.BodySm}
             fontWeight={FontWeight.Medium}
             color={TextColor.TextAlternative}
             numberOfLines={1}
           >
             {display.description}
           </Text>
         ) : null}
       </Box>
       <Box alignItems={BoxAlignItems.End} twClassName="shrink-0 gap-0.5">
         <Text

app/components/UI/Money/components/MoneyActivityList/MoneyActivityList.tsx

@@ -17,7 +17,7 @@ interface MoneyActivityListProps {
   moneyAddress?: string;
   onViewAllPress?: () => void;
   onHeaderPress?: () => void;
-  onItemPress?: () => void;
+  onItemPress?: (transactionId: string) => void;
 }
 
 const MoneyActivityList = ({

app/components/UI/Money/components/MoneyTransactionDetailsSheet/MoneyTransactionDetailsSheet.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useRef } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import {
+  BottomSheet,
+  type BottomSheetRef,
+  BottomSheetHeader,
+  Text,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+import {
+  type TransactionMeta,
+  TransactionType,
+} from '@metamask/transaction-controller';
+import { strings } from '../../../../../../locales/i18n';
+import { TransactionDetails } from '../../../../Views/confirmations/components/activity/transaction-details/transaction-details';
+import { useTransactionDetails } from '../../../../Views/confirmations/hooks/activity/useTransactionDetails';
+
+const TITLE_KEYS: Partial<Record<TransactionType, string>> = {
+  [TransactionType.moneyAccountDeposit]:
+    'transaction_details.title.money_account_deposit',
+  [TransactionType.moneyAccountWithdraw]:
+    'transaction_details.title.money_account_withdraw',
+  [TransactionType.musdConversion]: 'transaction_details.title.musd_conversion',
+  [TransactionType.musdClaim]: 'transaction_details.title.musd_claim',
+  [TransactionType.perpsDeposit]: 'transaction_details.title.perps_deposit',
+  [TransactionType.perpsWithdraw]: 'transaction_details.title.perps_withdraw',
+  [TransactionType.predictClaim]: 'transaction_details.title.predict_claim',
+  [TransactionType.predictDeposit]: 'transaction_details.title.predict_deposit',
+  [TransactionType.predictWithdraw]:
+    'transaction_details.title.predict_withdraw',
+};
+
+function getTitle(tx: TransactionMeta | undefined): string {
+  const type =
+    tx?.type === TransactionType.batch
+      ? ((tx.nestedTransactions?.find((n) => n.type && n.type in TITLE_KEYS)
+          ?.type as TransactionType | undefined) ?? tx.type)
+      : tx?.type;
+  return strings(
+    (type && TITLE_KEYS[type]) ?? 'transaction_details.title.default',
+  );
+}
+
+const MoneyTransactionDetailsSheet = () => {
+  const sheetRef = useRef<BottomSheetRef>(null);
+  const navigation = useNavigation();
+  const { transactionMeta } = useTransactionDetails();
+  const title = getTitle(transactionMeta);
+
+  const handleClose = useCallback(() => {
+    sheetRef.current?.onCloseBottomSheet();
+  }, []);
+
+  return (
+    <BottomSheet
+      ref={sheetRef}
+      isFullscreen
+      goBack={navigation.goBack}
+      keyboardAvoidingViewEnabled={false}
+    >
+      <BottomSheetHeader onClose={handleClose}>
+        <Text variant={TextVariant.HeadingMd}>{title}</Text>
+      </BottomSheetHeader>
+      <TransactionDetails />
+    </BottomSheet>
+  );
+};
+
+export default MoneyTransactionDetailsSheet;

app/components/UI/Money/components/MoneyTransactionDetailsSheet/index.ts

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