diff --git a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationDrawer.tsx b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationDrawer.tsx
index 295550a9f7..1ad26bb471 100644
--- a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationDrawer.tsx
+++ b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationDrawer.tsx
@@ -39,7 +39,7 @@ export function TxOperationDrawer({
Function: {operation.metadata.functionName}
)}
- Contract: {operation.to}
+ {operation.to}
{operation.metadata?.operationCount && (
Total Calls: {operation.metadata.operationCount}
diff --git a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationsList.tsx b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationsList.tsx
index 0c85a871af..7ba885b060 100644
--- a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationsList.tsx
+++ b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationsList.tsx
@@ -1,9 +1,7 @@
import { Box } from '@fuel-ui/react';
import { useMemo } from 'react';
import type { SimplifiedOperation } from '../../../types';
-import { TxCategory } from '../../../types';
-import { TxOperationContract } from './operations/TxOperationContract';
-import { TxOperationTransfer } from './operations/TxOperationTransfer';
+import { TxOperation } from './operations/TxOperation';
type TxOperationsListProps = {
operations: SimplifiedOperation[];
@@ -14,12 +12,7 @@ export function TxOperationsList({ operations }: TxOperationsListProps) {
return operations.map((operation, index) => {
console.log('Rendering operation:', operation);
const key = `${operation.type}-${operation.from}-${operation.to}-${index}`;
-
- if (operation.type === TxCategory.SEND) {
- return ;
- }
-
- return ;
+ return ;
});
}, [operations]);
diff --git a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/index.ts b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/index.ts
index ecb55f59a5..3e30024286 100644
--- a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/index.ts
+++ b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/index.ts
@@ -1,4 +1,3 @@
export * from './TxOperationDrawer';
export * from './TxOperationHeader';
-export * from './TxOperationSend';
export * from './utils';
diff --git a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperation.tsx b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperation.tsx
new file mode 100644
index 0000000000..e1d414e6b1
--- /dev/null
+++ b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperation.tsx
@@ -0,0 +1,110 @@
+import { cssObj } from '@fuel-ui/css';
+import { Box, Icon, Text } from '@fuel-ui/react';
+import { ReceiptType } from 'fuels';
+import { TxCategory } from '../../../../types';
+import type { SimplifiedOperation } from '../../../../types';
+import { TxAddressDisplay } from './TxAddressDisplay';
+import { TxAssetDisplay } from './TxAssetDisplay';
+import { TxOperationNesting } from './TxOperationNesting';
+
+type TxOperationProps = {
+ operation: SimplifiedOperation;
+};
+
+export function TxOperation({ operation }: TxOperationProps) {
+ const metadata = operation.metadata;
+ const amount = metadata?.amount || operation.amount;
+ const assetId = metadata?.assetId || operation.assetId;
+ const hasAsset = Boolean(amount && assetId);
+ const depth = metadata?.depth || 0;
+ const receiptType = metadata?.receiptType;
+ const isContract = operation.type === TxCategory.CONTRACTCALL;
+
+ const receiptTypeLabel = receiptType ? ReceiptType[receiptType] : null;
+
+ if (depth !== 0) return null;
+
+ return (
+
+
+
+
+
+ {isContract ? 'Contract Call' : 'Transfer'}
+
+ {receiptType && (
+
+ {receiptTypeLabel}
+
+ )}
+
+
+
+ {hasAsset && amount && assetId && (
+
+ {!isContract && }
+
+
+ )}
+ {metadata?.functionName && (
+ Function: {metadata.functionName}
+ )}
+
+
+ );
+}
+// root level rule is only for contract calls, all transfers should show as well
+// we also have the operations not related to the account in a group, and intermediate contract calls
+const styles = {
+ root: cssObj({
+ display: 'flex',
+ alignItems: 'flex-start',
+ gap: '$2',
+ padding: '$3',
+ backgroundColor: '$cardBg',
+ borderRadius: '$md',
+ width: '100%',
+ minWidth: 0,
+ }),
+ contentCol: cssObj({
+ display: 'flex',
+ flex: 1,
+ minWidth: 0,
+ }),
+ header: cssObj({
+ display: 'flex',
+ alignItems: 'center',
+ gap: '$2',
+ }),
+ typeLabel: cssObj({
+ color: '$gray8',
+ backgroundColor: '$gray3',
+ padding: '$1 $2',
+ borderRadius: '$md',
+ fontWeight: '$normal',
+ }),
+ receiptLabel: cssObj({
+ color: '$blue9',
+ backgroundColor: '$blue3',
+ padding: '$1 $2',
+ borderRadius: '$md',
+ fontWeight: '$normal',
+ }),
+ arrow: cssObj({
+ color: '$gray8',
+ marginTop: '$1',
+ marginLeft: '$2',
+ }),
+ functionName: cssObj({
+ fontSize: '$sm',
+ color: '$gray8',
+ }),
+};