feat(Transaction): enhance transaction types and operations with dept…

…h and receipt tracking
FuelLabs · Jan 23, 2025 · 3a769cd · 3a769cd
1 parent f92e013
commit 3a769cd
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 66 deletions.
diff --git a/...Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationContract.tsx b/...Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationContract.tsx
@@ -20,10 +20,17 @@ export function TxOperationContract({ operation }: TxOperationContractProps) {
   const hasAsset = Boolean(operation.amount);
   const isGrouped = metadata?.operationCount && metadata.operationCount > 1;
   const amount = (metadata?.totalAmount || operation.amount || '0').toString();
+  const depth = operation.depth || 0;
 
   return (
     <Box.Flex css={styles.root}>
+      <Box css={styles.depthIndicator(depth)} />
       <Box.Stack gap="$1" css={styles.contentCol}>
+        {operation.isRoot && (
+          <Text fontSize="xs" color="gray8" css={styles.rootTag}>
+            root
+          </Text>
+        )}
         <TxAddressDisplay
           address={operation.to}
           name={projectName}
@@ -95,4 +102,18 @@ const styles = {
     border: 'none',
     padding: '$1',
   }),
+  rootTag: cssObj({
+    backgroundColor: '$gray3',
+    padding: '0 $1',
+    borderRadius: '$xs',
+    alignSelf: 'flex-start',
+  }),
+  depthIndicator: (depth: number) =>
+    cssObj({
+      width: depth ? '2px' : '0',
+      minWidth: depth ? '2px' : '0',
+      backgroundColor: '$gray4',
+      marginLeft: `${depth * 8}px`,
+      alignSelf: 'stretch',
+    }),
 };
diff --git a/...Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationTransfer.tsx b/...Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationTransfer.tsx
@@ -1,5 +1,5 @@
 import { cssObj } from '@fuel-ui/css';
-import { Box } from '@fuel-ui/react';
+import { Box, Text } from '@fuel-ui/react';
 import type { SimplifiedOperation } from '../../../../types';
 import { TxAddressDisplay } from './TxAddressDisplay';
 import { TxAssetDisplay } from './TxAssetDisplay';
@@ -15,10 +15,17 @@ export function TxOperationTransfer({ operation }: TxOperationTransferProps) {
     '0'
   ).toString();
   const operationCount = operation.metadata?.operationCount;
+  const depth = operation.depth || 0;
 
   return (
     <Box.Flex css={styles.root}>
+      <Box css={styles.depthIndicator(depth)} />
       <Box.Stack gap="$1" css={styles.contentCol}>
+        {operation.isRoot && (
+          <Text fontSize="xs" color="gray8" css={styles.rootTag}>
+            root
+          </Text>
+        )}
         <TxAddressDisplay address={operation.from} />
         <TxAssetDisplay
           amount={amount}
@@ -44,4 +51,18 @@ const styles = {
     display: 'flex',
     flex: 1,
   }),
+  rootTag: cssObj({
+    backgroundColor: '$gray3',
+    padding: '0 $1',
+    borderRadius: '$xs',
+    alignSelf: 'flex-start',
+  }),
+  depthIndicator: (depth: number) =>
+    cssObj({
+      width: depth ? '2px' : '0',
+      minWidth: depth ? '2px' : '0',
+      backgroundColor: '$gray4',
+      marginLeft: `${depth * 8}px`,
+      alignSelf: 'stretch',
+    }),
 };
diff --git a/packages/app/src/systems/Transaction/types.tsx b/packages/app/src/systems/Transaction/types.tsx
@@ -7,6 +7,7 @@ import type {
   InputContract,
   OutputContract,
   OutputContractCreated,
+  Receipt,
   TransactionRequest,
   TransactionRequestInput,
   TransactionRequestLike,
@@ -60,6 +61,10 @@ export type ContractCallMetadata = {
   isContractCallGroup?: boolean;
   operationCount?: number;
   totalAmount?: BN;
+  isRoot?: boolean;
+  receipts?: Receipt[];
+  depth?: number;
+  parentReceiptId?: string;
 };
 
 export type SwapMetadata = {
@@ -68,6 +73,9 @@ export type SwapMetadata = {
   receiveAssetId: string;
   totalAmount?: BN;
   operationCount?: number;
+  receipts?: Receipt[];
+  depth?: number;
+  parentReceiptId?: string;
 };
 
 export type SimplifiedOperation = {
@@ -77,7 +85,9 @@ export type SimplifiedOperation = {
   amount?: BN;
   assetId?: string;
   isFromCurrentAccount?: boolean;
+  isRoot?: boolean;
   groupId?: string;
+  depth?: number;
   metadata?: ContractCallMetadata | SwapMetadata;
 };
 
@@ -92,7 +102,6 @@ export type SimplifiedFee = {
 export type SimplifiedTransaction = {
   id?: string;
   operations: SimplifiedOperation[];
-  status: TransactionStatus;
   timestamp?: Date;
   fee: SimplifiedFee;
   origin?: {
@@ -112,3 +121,26 @@ export type SimplifiedTransactionViewProps = {
   isLoading?: boolean;
   footer?: ReactNode;
 };
+
+export interface AssetFlow {
+  assetId: string;
+  amount: BN;
+  from: string;
+  to: string;
+  type: 'in' | 'out'; // from perspective of current user
+}
+
+export interface SimplifiedAssetFlows {
+  assetsIn: AssetFlow[];
+  assetsOut: AssetFlow[];
+  fees: {
+    gasUsed: BN;
+    networkFee: BN;
+    tip: BN;
+    otherFees: AssetFlow[]; // Other fees paid in various assets
+  };
+  contractInteractions: Array<{
+    contractId: string;
+    functionName?: string;
+  }>;
+}