feat: perps deposit details

shared/lib/activity/adapters/local-transaction.test.ts

@@ -486,7 +486,7 @@ describe('mapLocalTransaction', () => {
 
     expect(item).toMatchObject({
       type: 'perpsWithdraw',
-      chainId: 'eip155:1',
+      chainId: 'eip155:42161',
       status: 'success',
       timestamp: 1780690942752,
       hash: '0xd5dbb4421d123fd16d16485c394a68b5a28d9b5da9d9973554258a9fd2e9ebf6',
@@ -499,12 +499,10 @@ describe('mapLocalTransaction', () => {
         },
         token: {
           assetId: toAssetId(
-            '0xacA92E438df0B2401fF60dA7E4337B687a2435DA',
-            'eip155:1',
+            '0xaf88d065e77c8cc2239327c5edb3a432268e5831',
+            'eip155:42161',
           ),
-          decimals: 6,
           direction: 'out',
-          symbol: 'mUSD',
         },
       },
     });
@@ -517,7 +515,7 @@ describe('mapLocalTransaction', () => {
 
     expect(item).toMatchObject({
       type: 'perpsAddFunds',
-      chainId: 'eip155:1',
+      chainId: 'eip155:42161',
       status: 'success',
       timestamp: 1781185241609,
       hash: '0x3073fa67020abb1931ed043d7a8b6b020aa1004c9d0dd9ebd43ca5b9c10e9503',
@@ -529,10 +527,11 @@ describe('mapLocalTransaction', () => {
           amount: '0.04143764111397638042',
         },
         token: {
-          assetId: toAssetId(lineaMusd, 'eip155:1'),
-          decimals: 6,
+          assetId: toAssetId(
+            '0xaf88d065e77c8cc2239327c5edb3a432268e5831',
+            'eip155:42161',
+          ),
           direction: 'out',
-          symbol: 'mUSD',
         },
       },
     });

shared/lib/activity/adapters/local-transaction.ts

@@ -1,5 +1,4 @@
 import { TransactionType } from '@metamask/transaction-controller';
-import { toEvmCaipChainId } from '@metamask/multichain-network-controller';
 import { KnownCaipNamespace, toCaipChainId } from '@metamask/utils';
 import { SWAPS_WRAPPED_TOKENS_ADDRESSES } from '../../../constants/swaps';
 import { toAssetId } from '../../asset-utils';
@@ -23,7 +22,6 @@ import {
   getLocalTransactionFees,
   getLocalTransactionStatus,
   getNativeAssetSafe,
-  getTokenMetadataFromKnownToken,
   isNftStandard,
 } from './helpers';
 
@@ -358,16 +356,11 @@ export function mapLocalTransaction(
     case TransactionType.perpsDepositAndOrder:
     case TransactionType.perpsWithdraw: {
       const { metamaskPay } = initialTransaction;
-      const payChainId = metamaskPay?.chainId
-        ? toEvmCaipChainId(metamaskPay.chainId)
-        : undefined;
-
-      const token = payChainId
-        ? getTokenMetadataFromKnownToken(
-            metamaskPay?.tokenAddress,
-            'out',
-            payChainId,
-          )
+      const token = to
+        ? {
+            direction: 'out' as const,
+            assetId: toAssetId(to, chainId),
+          }
         : undefined;
 
       const fiat = metamaskPay?.targetFiat
@@ -383,7 +376,7 @@ export function mapLocalTransaction(
           initialTransaction.type === TransactionType.perpsWithdraw
             ? 'perpsWithdraw'
             : 'perpsAddFunds',
-        chainId: payChainId ?? chainId,
+        chainId,
         status,
         timestamp,
         hash,

ui/pages/details/components/header.tsx

@@ -67,7 +67,7 @@ function getTitleArgs(item: ActivityListItem) {
       return getDefinedArgs(item.data.sourceToken?.symbol);
     }
     default:
-      return [];
+      return [''];
   }
 }
 

ui/pages/details/templates/perps-deposit-details.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { toEvmCaipChainId } from '@metamask/multichain-network-controller';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  Text,
+} from '@metamask/design-system-react';
+import { TransactionStatus as TransactionMetaStatus } from '@metamask/transaction-controller';
+import type { ActivityListItem } from '../../../../shared/lib/activity/types';
+import { CHAIN_IDS } from '../../../../shared/constants/network';
+import { ActivityAvatar } from '../../../components/app/activity-list-item-avatar';
+import { selectLocalTransactionsByHash } from '../../../selectors/activity';
+// eslint-disable-next-line import-x/no-restricted-paths
+import { TransactionDetailsProvider } from '../../confirmations/components/activity/transaction-details-context';
+// eslint-disable-next-line import-x/no-restricted-paths
+import { TransactionDetailsSummary } from '../../confirmations/components/activity/transaction-details-summary';
+import {
+  ARBITRUM_USDC,
+  PERPS_CURRENCY,
+  // eslint-disable-next-line import-x/no-restricted-paths
+} from '../../confirmations/constants/perps';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { TransactionStatus } from '../../../components/app/transaction/transaction-status';
+import { useFormatters } from '../../../hooks/useFormatters';
+import { Footer, Row, Section } from '../components/shared';
+
+const PERPS_USDC_ASSET_ID = `${toEvmCaipChainId(CHAIN_IDS.ARBITRUM)}/erc20:${ARBITRUM_USDC.address}`;
+
+type Props = {
+  item: Extract<
+    ActivityListItem,
+    { type: 'perpsAddFunds' } | { type: 'perpsWithdraw' }
+  >;
+};
+
+function useTransactionMeta(hash: string | undefined) {
+  const localTransactions = useSelector(selectLocalTransactionsByHash);
+  return localTransactions.get(hash || '')?.initialTransaction;
+}
+
+export function PerpsDepositDetails({ item }: Props) {
+  const t = useI18nContext();
+  const navigate = useNavigate();
+  const { formatDateTime, formatCurrencyWithMinThreshold } = useFormatters();
+  const transactionMeta = useTransactionMeta(item.hash);
+
+  if (!transactionMeta) {
+    return null;
+  }
+
+  const { metamaskPay } = transactionMeta;
+  const { targetFiat, networkFeeFiat, bridgeFeeFiat, totalFiat } =
+    metamaskPay || {};
+
+  const formatFiat = (value?: string) =>
+    value
+      ? formatCurrencyWithMinThreshold(Number(value), PERPS_CURRENCY)
+      : null;
+
+  const formattedTargetFiat = formatFiat(targetFiat);
+
+  return (
+    <div className="flex grow flex-col">
+      <div className="divide-y divide-border-muted">
+        <div
+          className="flex items-center gap-2 pb-4"
+          data-testid="transaction-details-hero"
+        >
+          <ActivityAvatar tokens={[PERPS_USDC_ASSET_ID]} />
+          <Text variant="heading-lg" color="text-success-default">
+            +{formattedTargetFiat}
+          </Text>
+        </div>
+
+        <Section>
+          <Row
+            label={t('status')}
+            value={<TransactionStatus status={item.status} />}
+          />
+
+          <Row label={t('date')} value={formatDateTime(item.timestamp)} />
+        </Section>
+
+        <Section>
+          <Row
+            label={t('networkFee')}
+            testId="transaction-base-fee"
+            value={formatFiat(networkFeeFiat)}
+          />
+          {bridgeFeeFiat ? (
+            <Row
+              label={t('bridgeFee')}
+              testId="transaction-bridge-fee"
+              value={formatFiat(bridgeFeeFiat)}
+            />
+          ) : null}
+          <Row
+            label={t('total')}
+            testId="transaction-breakdown-value-amount"
+            value={formatFiat(totalFiat)}
+          />
+        </Section>
+
+        <Section>
+          <TransactionDetailsProvider transactionMeta={transactionMeta}>
+            <TransactionDetailsSummary />
+          </TransactionDetailsProvider>
+        </Section>
+      </div>
+
+      <Footer>
+        {transactionMeta.status === TransactionMetaStatus.confirmed && (
+          <Button
+            className="w-full"
+            size={ButtonSize.Lg}
+            variant={ButtonVariant.Primary}
+            onClick={() => navigate({ pathname: '/', search: 'tab=perps' })}
+          >
+            {t('perpsFundAgain')}
+          </Button>
+        )}
+      </Footer>
+    </div>
+  );
+}

ui/pages/details/templates/template-loader.tsx

@@ -3,6 +3,7 @@ import type { ActivityListItem } from '../../../../shared/lib/activity/types';
 import { ApprovalDetails } from './approval-details';
 import { BridgeDetails } from './bridge-details';
 import { DefaultDetails } from './default-details';
+import { PerpsDepositDetails } from './perps-deposit-details';
 import { PerpsDetails } from './perps-details';
 import { SendDetails } from './send-details';
 import { SwapDetails } from './swap-details';
@@ -34,6 +35,7 @@ export function TemplateLoader({ item }: Props) {
     case 'increaseSpendingCap':
       return <ApprovalDetails item={item} />;
     case 'perpsAddFunds':
+      return <PerpsDepositDetails item={item} />;
     case 'perpsWithdraw':
       return <PerpsDetails item={item} />;
     default: