refactor: update transaction operation bidirectional info handling

Author: nelitow

.gitignore

@@ -88,4 +88,5 @@ act-actions
 playwright-results
 playwright-html
 
-packages/e2e-contract-tests/src/contract-ids.json
+packages/e2e-contract-tests/src/contract-ids.json
+.vscode/settings.json

.vscode/settings.json

@@ -15,4 +15,7 @@
   "typescript.suggest.paths": true,
   "typescript.suggest.enabled": true,
   "typescript.suggest.completeFunctionCalls": true,
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
 }

packages/app/src/systems/Transaction/components/TxContent/TxOperationsSimple/TxOperationsGroup.tsx

@@ -12,29 +12,6 @@ type TxOperationsGroupProps = {
   numberLabel?: string;
 };
 
-export type BidirectionalInfo = 'atob' | 'btoa' | null;
-
-function getBidirectionalInfo(
-  current: SimplifiedOperation,
-  next: SimplifiedOperation
-): BidirectionalInfo {
-  if (
-    current?.to?.address === next?.from?.address &&
-    current?.from?.address === next?.to?.address
-  ) {
-    return 'atob';
-  }
-
-  if (
-    current?.from?.address === next?.from?.address &&
-    current?.to?.address === next?.to?.address
-  ) {
-    return 'btoa';
-  }
-
-  return null;
-}
-
 export function TxOperationsGroup({
   title,
   operations,
@@ -83,10 +60,6 @@ export function TxOperationsGroup({
             <TxOperation
               key={`${operation.type}-${operation.from}-${operation.to}-${index}`}
               operation={operation}
-              bidirectionalInfo={getBidirectionalInfo(
-                operation,
-                operations[index + 1]
-              )}
             />
           ) : null
         )}
@@ -128,7 +101,7 @@ const styles = {
   content: cssObj({
     display: 'flex',
     flexDirection: 'column',
-    gap: '4px 0',
+    gap: '0',
   }),
   numberLabel: cssObj({
     backgroundColor: '$gray1',

packages/app/src/systems/Transaction/components/TxOperation/TxOperation.tsx

@@ -3,13 +3,11 @@ import { Box, Icon, Text } from '@fuel-ui/react';
 import { useState } from 'react';
 import { MotionBox, MotionStack, animations } from '~/systems/Core';
 import { useAssetsAmount } from '../../hooks/useAssetsAmount';
-import type { SimplifiedOperation } from '../../types';
-import type { BidirectionalInfo } from '../TxContent/TxOperationsSimple/TxOperationsGroup';
+import type { BidirectionalInfo, SimplifiedOperation } from '../../types.tsx';
 import { TxOperationCard } from './TxOperationCard';
 
 export type TxOperationProps = {
   operation: SimplifiedOperation;
-  bidirectionalInfo?: BidirectionalInfo;
 };
 
 type IdenticalOpsProps = {
@@ -53,10 +51,7 @@ function IdenticalOperations({ count, instances }: IdenticalOpsProps) {
   );
 }
 
-export function TxOperation({
-  operation,
-  bidirectionalInfo,
-}: TxOperationProps) {
+export function TxOperation({ operation }: TxOperationProps) {
   const { metadata, assets } = operation;
   const amounts = useAssetsAmount({
     operationsCoin: assets,
@@ -70,7 +65,6 @@ export function TxOperation({
       <TxOperationCard
         operation={operation}
         assetsAmount={amounts}
-        bidirectionalInfo={bidirectionalInfo}
         css={styles.card}
       />
       {metadata.childOperations && metadata.childOperations.length > 1 && (

packages/app/src/systems/Transaction/components/TxOperation/TxOperationCard.tsx

@@ -9,19 +9,19 @@ import { useProvider } from '~/systems/Network/hooks/useProvider';
 import { type SimplifiedOperation, TxCategory } from '../../types';
 import type { BidirectionalInfo } from '../TxContent/TxOperationsSimple/TxOperationsGroup';
 import { TxOperationAssets } from './TxOperationAssets';
-type TxOperationCardProps = {
+
+export type TxOperationCardProps = {
   operation: SimplifiedOperation;
   assetsAmount?: AssetFuelAmount[];
-  bidirectionalInfo?: BidirectionalInfo;
-  css?: ThemeUtilsCSS;
+  css?: CSS;
 };
 
 export function TxOperationCard({
   operation,
   assetsAmount,
-  bidirectionalInfo = null,
   css,
 }: TxOperationCardProps) {
+  const { bidirectionalInfo } = operation;
   const { accounts } = useAccounts();
   const provider = useProvider();
   const [baseAsset, setBaseAsset] = useState<AssetFuelData | undefined>();

packages/app/src/systems/Transaction/components/TxOperations/TxOperationsDrawer.tsx

@@ -24,37 +24,6 @@ export function TxOperationsDrawer({ operations }: TxOperationsDrawerProps) {
     setIsExpanded(!isExpanded);
   };
 
-  function getBidirectionalInfo(
-    previous: SimplifiedOperation,
-    current: SimplifiedOperation,
-    next: SimplifiedOperation
-  ) {
-    console.log('previous', previous);
-    console.log('current', current);
-    console.log('next', next);
-    // if next operation is the reverse of the current operation, return 'atob'
-    // if previous operation is the reverse of the current operation, return 'btoa'
-    // otherwise return null
-    if (
-      next &&
-      next.from.address === current.to.address &&
-      next.to.address === current.from.address &&
-      (!next.metadata?.identicalOps || next.metadata.identicalOps.size === 0)
-    ) {
-      return 'atob';
-    }
-    if (
-      previous &&
-      previous.from.address === current.to.address &&
-      previous.to.address === current.from.address &&
-      (!previous.metadata?.identicalOps ||
-        previous.metadata.identicalOps.size === 0)
-    ) {
-      return 'btoa';
-    }
-    return null;
-  }
-
   return (
     <Box css={styles.drawer} data-expanded={isExpanded}>
       {operations.length > 1 && (
@@ -91,14 +60,7 @@ export function TxOperationsDrawer({ operations }: TxOperationsDrawerProps) {
               key={`${operation.type}-${operation.from}-${operation.to}-${index}`}
               css={styles.operation}
             >
-              <TxOperation
-                operation={operation}
-                bidirectionalInfo={getBidirectionalInfo(
-                  operations[index - 1],
-                  operation,
-                  operations[index + 1]
-                )}
-              />
+              <TxOperation operation={operation} />
             </Box.Flex>
           ) : null
         )}

packages/app/src/systems/Transaction/types.tsx

@@ -80,7 +80,7 @@ export type ContractCallMetadata = {
   operationCount?: number;
   groupedAssets?: Record<string, SimplifiedOperation['assets'][0]>;
   childOperations?: SimplifiedOperation[];
-  identicalOps?: Map<string, IdenticalOpsGroup>;
+  identicalOps?: Array<IdenticalOpsGroup>;
 };
 
 export type SwapMetadata = {
@@ -99,6 +99,8 @@ export type SimplifiedAddress = {
   type: number; // 0 for contract, 1 for account
 };
 
+export type BidirectionalInfo = 'atob' | 'btoa' | null;
+
 export type SimplifiedOperation = {
   type: TxCategory;
   from: SimplifiedAddress;
@@ -111,6 +113,7 @@ export type SimplifiedOperation = {
   }>;
   metadata: ContractCallMetadata;
   assetAmount?: AssetFuelAmount;
+  bidirectionalInfo?: BidirectionalInfo;
 };
 
 export type SimplifiedFee = {

packages/app/src/systems/Transaction/utils/simplifyTransaction.ts

@@ -11,10 +11,13 @@ import {
   ReceiptType,
   type TransactionResultReceipt,
 } from 'fuels';
-import type { ContractCallMetadata, SimplifiedOperation } from '../types';
+import type {
+  BidirectionalInfo,
+  ContractCallMetadata,
+  SimplifiedOperation,
+} from '../types';
 import { TxCategory } from '../types';
-import type { CategorizedOperations } from '../types';
-import type { SimplifiedTransaction } from '../types.tsx';
+import type { CategorizedOperations, SimplifiedTransaction } from '../types';
 
 type TransactionRequestWithOrigin = TransactionRequest & {
   origin?: string;
@@ -116,6 +119,33 @@ function transformOperation(
   return baseOperation;
 }
 
+function calculateBidirectionalInfo(
+  operations: SimplifiedOperation[],
+  currentIndex: number
+): BidirectionalInfo {
+  const current = operations[currentIndex];
+  const next = operations[currentIndex + 1];
+  const previous = operations[currentIndex - 1];
+
+  if (
+    next &&
+    next.from.address === current.to.address &&
+    next.to.address === current.from.address
+  ) {
+    return 'atob';
+  }
+
+  if (
+    previous &&
+    previous.from.address === current.to.address &&
+    previous.to.address === current.from.address
+  ) {
+    return 'btoa';
+  }
+
+  return null;
+}
+
 export function transformOperations(
   summary: TransactionSummary,
   currentAccount?: string
@@ -155,18 +185,11 @@ export function transformOperations(
     (a, b) => (a.metadata?.depth || 0) - (b.metadata?.depth || 0)
   );
 
-  return operations;
-}
-
-// Helper to create a unique key for identical operations
-function getOperationKey(op: SimplifiedOperation) {
-  return JSON.stringify({
-    type: op.type,
-    from: op.from.address,
-    to: op.to.address,
-    // Sort assets to ensure consistent key regardless of array order
-    assets: (op.assets || []).map((a) => `${a.assetId}-${a.amount}`).sort(),
-  });
+  // Calculate bidirectional info for each operation
+  return operations.map((op, index) => ({
+    ...op,
+    bidirectionalInfo: calculateBidirectionalInfo(operations, index),
+  }));
 }
 
 function groupSimilarOperations(
@@ -187,7 +210,7 @@ function groupSimilarOperations(
             groupedAssets: {},
             childOperations: [op],
             // New: track identical operations within group
-            identicalOps: new Map(),
+            identicalOps: [],
           },
         };
       } else {
@@ -196,17 +219,18 @@ function groupSimilarOperations(
         acc[key].metadata.childOperations!.push(op);
 
         // Group identical operations
-        const identicalKey = getOperationKey(op);
-        const identicalGroup = acc[key].metadata?.identicalOps?.get(
-          identicalKey
+        const identicalGroup = acc[key].metadata?.identicalOps?.find(
+          (g) =>
+            g.operation.from.address === op.from.address &&
+            g.operation.to.address === op.to.address
         ) || {
           operation: op,
           count: 0,
           instances: [],
         };
         identicalGroup.count += 1;
         identicalGroup.instances.push(op);
-        acc[key].metadata?.identicalOps?.set(identicalKey, identicalGroup);
+        acc[key].metadata?.identicalOps?.push(identicalGroup);
 
         // Combine assets as before
         for (const asset of op.assets || []) {
@@ -232,7 +256,7 @@ function groupSimilarOperations(
     metadata: {
       ...group.metadata,
       // Only include groups with multiple identical operations
-      identicalOps: Array.from(group.metadata.identicalOps.values()).filter(
+      identicalOps: Array.from(group.metadata?.identicalOps || []).filter(
         (g) => g.count > 1
       ),
     },