From 955a90e035a46fd0ce2d0428344105ecd0384277 Mon Sep 17 00:00:00 2001
From: Nelito Junior <ngvjqp@gmail.com>
Date: Mon, 3 Feb 2025 17:59:30 -0300
Subject: [PATCH] refactor: consolidate transaction operations components

---
 .../components/TxDetails/TxDetails.tsx        |  6 +-
 .../TxOperationsSimple/TxOperationsList.tsx   | 67 -------------
 .../components/TxDetails/index.tsx            |  1 -
 .../components/TxOperations/TxOperations.tsx  | 98 +++++++++++--------
 4 files changed, 61 insertions(+), 111 deletions(-)
 delete mode 100644 packages/app/src/systems/Transaction/components/TxDetails/TxOperationsSimple/TxOperationsList.tsx

diff --git a/packages/app/src/systems/Transaction/components/TxDetails/TxDetails.tsx b/packages/app/src/systems/Transaction/components/TxDetails/TxDetails.tsx
index 24ab0a3887..0e6ab79c2b 100644
--- a/packages/app/src/systems/Transaction/components/TxDetails/TxDetails.tsx
+++ b/packages/app/src/systems/Transaction/components/TxDetails/TxDetails.tsx
@@ -8,11 +8,11 @@ import type {
   TransactionSummary,
 } from 'fuels';
 import { useState } from 'react';
-import { TxFeeOptions } from '.';
 import { useSimplifiedTransaction } from '../../hooks/useSimplifiedTransaction';
 import { TxFee } from '../TxFee';
+import { TxFeeOptions } from '../TxFeeOptions/TxFeeOptions';
+import { TxOperations } from '../TxOperations';
 import { TxHeaderSimple } from './TxHeaderSimple';
-import { TxOperationsList } from './TxOperationsSimple/TxOperationsList';
 
 export type TxViewVariant = 'default' | 'history';
 
@@ -48,7 +48,7 @@ export function TxDetails({
     <Box css={styles.root}>
       {!isHistory && <TxHeaderSimple />}
       <Box css={styles.content}>
-        <TxOperationsList operations={transaction.categorizedOperations} />
+        <TxOperations operations={transaction.categorizedOperations} />
         {showDetails && !isHistory && (
           <Box>
             <Box.Flex gap="18px" align="center" css={styles.feeContainer}>
diff --git a/packages/app/src/systems/Transaction/components/TxDetails/TxOperationsSimple/TxOperationsList.tsx b/packages/app/src/systems/Transaction/components/TxDetails/TxOperationsSimple/TxOperationsList.tsx
deleted file mode 100644
index 52f2f29c0d..0000000000
--- a/packages/app/src/systems/Transaction/components/TxDetails/TxOperationsSimple/TxOperationsList.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Box } from '@fuel-ui/react';
-import type { CategorizedOperations } from '../../../types';
-import { TxOperationsGroup } from './TxOperationsGroup';
-import { TxOperation } from './operations/TxOperation';
-
-type TxOperationsListProps = {
-  operations: CategorizedOperations;
-};
-
-export function TxOperationsList({ operations }: TxOperationsListProps) {
-  const { mainOperations, otherRootOperations, intermediateOperations } =
-    operations;
-
-  return (
-    <>
-      {/* Main operations (transfers and root contract calls related to current account) */}
-      {mainOperations.map((operation, index) => (
-        <Box.Flex
-          key={`${operation.type}-${operation.from}-${operation.to}-${index}`}
-          css={{
-            borderRadius: '12px',
-            flex: 1,
-            boxSizing: 'border-box',
-            marginBottom: '16px',
-          }}
-        >
-          <TxOperation operation={operation} showNesting={false} />
-        </Box.Flex>
-      ))}
-
-      {/* Other root operations not related to current account */}
-      <TxOperationsGroup
-        title="Other Contract Calls"
-        operations={otherRootOperations}
-        showNesting={false}
-        numberLabel="1"
-      />
-
-      {/* Intermediate operations with nesting */}
-      {/* Intermediate opreations exist in the current setup? Wont they all be under the nesting of a root level operation? */}
-      <TxOperationsGroup
-        title="Intermediate Operations"
-        operations={intermediateOperations}
-        showNesting={true}
-        numberLabel={otherRootOperations.length ? '2' : '1'}
-      />
-    </>
-  );
-}
-
-TxOperationsList.Loader = function TxOperationsListLoader() {
-  return (
-    <Box.Stack gap="$1">
-      {[1, 2].map((i) => (
-        <Box
-          key={i}
-          css={{
-            height: '80px',
-            backgroundColor: '$gray2',
-            borderRadius: '$md',
-            animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-          }}
-        />
-      ))}
-    </Box.Stack>
-  );
-};
diff --git a/packages/app/src/systems/Transaction/components/TxDetails/index.tsx b/packages/app/src/systems/Transaction/components/TxDetails/index.tsx
index 8d55c16e40..82117524c8 100644
--- a/packages/app/src/systems/Transaction/components/TxDetails/index.tsx
+++ b/packages/app/src/systems/Transaction/components/TxDetails/index.tsx
@@ -1,4 +1,3 @@
 export * from './TxOperationsSimple';
 export * from './TxHeaderSimple';
 export * from './TxDetails';
-export * from './TxFeeOptions';
diff --git a/packages/app/src/systems/Transaction/components/TxOperations/TxOperations.tsx b/packages/app/src/systems/Transaction/components/TxOperations/TxOperations.tsx
index 28200e7d6a..447e136695 100644
--- a/packages/app/src/systems/Transaction/components/TxOperations/TxOperations.tsx
+++ b/packages/app/src/systems/Transaction/components/TxOperations/TxOperations.tsx
@@ -1,49 +1,67 @@
-import { Alert, Box } from '@fuel-ui/react';
-import type { AssetData } from '@fuel-wallet/types';
-import type { Operation, TransactionStatus } from 'fuels';
-import type { Maybe } from '~/systems/Core';
+import { Box } from '@fuel-ui/react';
+import type { CategorizedOperations } from '../../types';
+import { TxOperationsGroup } from '../TxDetails/TxOperationsSimple/TxOperationsGroup';
+import { TxOperation } from '../TxDetails/TxOperationsSimple/operations/TxOperation';
 
-import { useNetworks } from '~/systems/Network';
-import { TxOperation } from '../TxOperation/TxOperation';
-
-export type TxOperationsProps = {
-  operations?: Operation[];
-  status?: Maybe<TransactionStatus>;
-  isLoading?: boolean;
+type TxOperationsListProps = {
+  operations: CategorizedOperations;
 };
 
-export function TxOperations({
-  operations,
-  status,
-  isLoading,
-}: TxOperationsProps) {
-  if (operations?.length === 0) {
-    return (
-      <Alert status="info">
-        <Alert.Description>
-          No operations found in this transaction
-        </Alert.Description>
-      </Alert>
-    );
-  }
+export function TxOperations({ operations }: TxOperationsListProps) {
+  const { mainOperations, otherRootOperations, intermediateOperations } =
+    operations;
 
   return (
-    <Box.Stack gap="$0">
-      {operations?.map((operation, index) => (
-        <TxOperation
-          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-          key={index}
-          operation={operation}
-          status={status}
-          isLoading={isLoading}
-        />
+    <>
+      {/* Main operations (transfers and root contract calls related to current account) */}
+      {mainOperations.map((operation, index) => (
+        <Box.Flex
+          key={`${operation.type}-${operation.from}-${operation.to}-${index}`}
+          css={{
+            borderRadius: '12px',
+            flex: 1,
+            boxSizing: 'border-box',
+            marginBottom: '16px',
+          }}
+        >
+          <TxOperation operation={operation} showNesting={false} />
+        </Box.Flex>
       ))}
-    </Box.Stack>
+
+      {/* Other root operations not related to current account */}
+      <TxOperationsGroup
+        title="Other Contract Calls"
+        operations={otherRootOperations}
+        showNesting={false}
+        numberLabel="1"
+      />
+
+      {/* Intermediate operations with nesting */}
+      {/* Intermediate opreations exist in the current setup? Wont they all be under the nesting of a root level operation? */}
+      <TxOperationsGroup
+        title="Intermediate Operations"
+        operations={intermediateOperations}
+        showNesting={true}
+        numberLabel={otherRootOperations.length ? '2' : '1'}
+      />
+    </>
   );
 }
 
-TxOperations.Loader = () => (
-  <Box.Stack gap="$0">
-    <TxOperation.Loader />
-  </Box.Stack>
-);
+TxOperations.Loader = function TxOperationsLoader() {
+  return (
+    <Box.Stack gap="$1">
+      {[1, 2].map((i) => (
+        <Box
+          key={i}
+          css={{
+            height: '80px',
+            backgroundColor: '$gray2',
+            borderRadius: '$md',
+            animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+          }}
+        />
+      ))}
+    </Box.Stack>
+  );
+};