From 36cf37e718a51986f9b2e61166c4793554ed8583 Mon Sep 17 00:00:00 2001
From: Nelito Junior <ngvjqp@gmail.com>
Date: Thu, 23 Jan 2025 16:32:31 -0300
Subject: [PATCH] delete unused components

---
 .../TxOperationsSimple/TxOperationSend.tsx    | 106 ------------------
 .../operations/TxOperationContract.tsx        |  75 -------------
 .../operations/TxOperationSwap.tsx            |  59 ----------
 .../operations/TxOperationTransfer.tsx        |  96 ----------------
 4 files changed, 336 deletions(-)
 delete mode 100644 packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationSend.tsx
 delete mode 100644 packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationContract.tsx
 delete mode 100644 packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationSwap.tsx
 delete mode 100644 packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationTransfer.tsx

diff --git a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationSend.tsx b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationSend.tsx
deleted file mode 100644
index a89a941d37..0000000000
--- a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/TxOperationSend.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { cssObj } from '@fuel-ui/css';
-import { Avatar, Box, Icon, IconButton, Text } from '@fuel-ui/react';
-import { useAccounts } from '~/systems/Account';
-import { formatAmount, shortAddress } from '~/systems/Core';
-import type { SimplifiedOperation } from '../../../types';
-import { TxCategory } from '../../../types';
-
-type TxOperationSendProps = {
-  operation: SimplifiedOperation;
-};
-
-export function TxOperationSend({ operation }: TxOperationSendProps) {
-  const { accounts } = useAccounts();
-  const amount = operation.metadata?.totalAmount || operation.amount || '0';
-  const operationCount = operation.metadata?.operationCount;
-  const isContractCall = operation.type === TxCategory.CONTRACTCALL;
-
-  // Find if addresses match our accounts
-  const fromAccount = accounts?.find(
-    (acc) => acc.address.toLowerCase() === operation.from.toLowerCase()
-  );
-  const toAccount = accounts?.find(
-    (acc) => acc.address.toLowerCase() === operation.to.toLowerCase()
-  );
-
-  return (
-    <Box.Flex css={styles.line}>
-      <Box css={styles.iconCol}>
-        <Avatar.Generated hash={operation.from} size={24} />
-      </Box>
-      <Box.Stack gap="$1" css={styles.contentCol}>
-        <Box.Flex gap="$2">
-          <Text as="span" fontSize="sm">
-            {fromAccount ? fromAccount.name : shortAddress(operation.from)}
-          </Text>
-          <IconButton
-            size="xs"
-            variant="link"
-            icon="Copy"
-            aria-label="Copy address"
-            onPress={() => navigator.clipboard.writeText(operation.from)}
-          />
-        </Box.Flex>
-        <Box.Stack gap="$2">
-          {isContractCall && !toAccount && (
-            <Text fontSize="sm" color="gray8">
-              Calls contract (sending tokens)
-            </Text>
-          )}
-          <Box.Flex
-            css={{
-              display: 'flex',
-              gap: '$2',
-              alignItems: 'center',
-            }}
-          >
-            <Icon icon="Coins" size={16} />
-            <Text fontSize="sm">
-              {formatAmount({
-                amount,
-                options: { units: 9 },
-              })}{' '}
-              {shortAddress(operation.assetId)}
-            </Text>
-            {operationCount && operationCount > 1 ? (
-              <Text as="span" color="gray8">
-                x{operationCount}
-              </Text>
-            ) : null}
-          </Box.Flex>
-          <Box.Flex gap="$2">
-            <Text as="span" fontSize="sm">
-              {toAccount ? toAccount.name : shortAddress(operation.to)}
-            </Text>
-            <IconButton
-              size="xs"
-              variant="link"
-              icon="Copy"
-              aria-label="Copy address"
-              onPress={() => navigator.clipboard.writeText(operation.to)}
-            />
-          </Box.Flex>
-        </Box.Stack>
-      </Box.Stack>
-    </Box.Flex>
-  );
-}
-
-const styles = {
-  line: cssObj({
-    display: 'flex',
-    alignItems: 'flex-start',
-    gap: '$3',
-  }),
-  iconCol: cssObj({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '24px',
-    flexShrink: 0,
-  }),
-  contentCol: cssObj({
-    display: 'flex',
-    flex: 1,
-  }),
-};
diff --git a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationContract.tsx b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationContract.tsx
deleted file mode 100644
index 0ca89bcacd..0000000000
--- a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationContract.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { cssObj } from '@fuel-ui/css';
-import { Box, Text } from '@fuel-ui/react';
-import type { SimplifiedOperation } from '../../../../types';
-import { TxAddressDisplay } from './TxAddressDisplay';
-import { TxAssetDisplay } from './TxAssetDisplay';
-import { TxOperationNesting } from './TxOperationNesting';
-
-type TxOperationContractProps = {
-  operation: SimplifiedOperation;
-};
-
-export function TxOperationContract({ operation }: TxOperationContractProps) {
-  const metadata = operation.metadata;
-  const amount = metadata?.amount;
-  const assetId = metadata?.assetId;
-  const hasAsset = Boolean(amount && assetId);
-  const depth = metadata?.depth || 0;
-
-  return (
-    <Box.Flex css={styles.root}>
-      <TxOperationNesting depth={depth} />
-      <Box.Stack gap="$1" css={styles.contentCol}>
-        <Box.Flex css={styles.header}>
-          <Text fontSize="xs" css={styles.typeLabel}>
-            Contract Call
-          </Text>
-        </Box.Flex>
-        <TxAddressDisplay address={operation.from} label="From" />
-        <TxAddressDisplay address={operation.to} label="Contract" isContract />
-        {hasAsset && amount && assetId && (
-          <Box.Stack gap="$0">
-            <TxAssetDisplay amount={amount.toString()} assetId={assetId} />
-          </Box.Stack>
-        )}
-        {metadata?.functionName && (
-          <Box css={styles.functionName}>Function: {metadata.functionName}</Box>
-        )}
-      </Box.Stack>
-    </Box.Flex>
-  );
-}
-
-const styles = {
-  root: cssObj({
-    display: 'flex',
-    alignItems: 'flex-start',
-    gap: '$2',
-    padding: '$2',
-    backgroundColor: '$cardBg',
-    borderRadius: '$md',
-    width: '100%',
-    minWidth: 0, // Prevent flex items from overflowing
-  }),
-  contentCol: cssObj({
-    display: 'flex',
-    flex: 1,
-    minWidth: 0, // Allow content to shrink if needed
-  }),
-  header: cssObj({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '$2',
-  }),
-  typeLabel: cssObj({
-    color: '$gray8',
-    backgroundColor: '$gray3',
-    padding: '$1 $2',
-    borderRadius: '$md',
-    fontWeight: '$normal',
-  }),
-  functionName: cssObj({
-    fontSize: '$sm',
-    color: '$gray8',
-  }),
-};
diff --git a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationSwap.tsx b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationSwap.tsx
deleted file mode 100644
index 3bd6393588..0000000000
--- a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationSwap.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { cssObj } from '@fuel-ui/css';
-import { Box, Icon } from '@fuel-ui/react';
-import type { SimplifiedOperation } from '../../../../types';
-import { useEcosystemProject } from '../useEcosystemProject';
-import { isSwapMetadata } from '../utils';
-import { TxAddressDisplay } from './TxAddressDisplay';
-import { TxAssetDisplay } from './TxAssetDisplay';
-
-type TxOperationSwapProps = {
-  operation: SimplifiedOperation;
-};
-
-export function TxOperationSwap({ operation }: TxOperationSwapProps) {
-  const {
-    name: projectName,
-    image: projectImage,
-    isLoading,
-  } = useEcosystemProject(operation.to);
-
-  if (!isSwapMetadata(operation.metadata)) return null;
-
-  return (
-    <>
-      <TxAddressDisplay
-        address={operation.to}
-        name={projectName}
-        image={projectImage}
-        isLoading={isLoading}
-        isContract
-      />
-      <Box.Flex css={styles.line}>
-        <Box css={styles.iconCol}>
-          <Icon icon="ArrowDown" css={{ color: '$blue9' }} size={16} />
-        </Box>
-        <TxAssetDisplay
-          amount={operation.metadata.receiveAmount.toString()}
-          assetId={operation.metadata.receiveAssetId}
-          label="Sends token"
-          showIcon={false}
-        />
-      </Box.Flex>
-    </>
-  );
-}
-
-const styles = {
-  line: cssObj({
-    display: 'flex',
-    alignItems: 'flex-start',
-    gap: '$3',
-  }),
-  iconCol: cssObj({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '24px',
-    flexShrink: 0,
-  }),
-};
diff --git a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationTransfer.tsx b/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationTransfer.tsx
deleted file mode 100644
index c49204a4e7..0000000000
--- a/packages/app/src/systems/Transaction/components/TxViewSimple/TxOperationsSimple/operations/TxOperationTransfer.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { cssObj } from '@fuel-ui/css';
-import { Box, Icon, Text } from '@fuel-ui/react';
-import { ReceiptType } from 'fuels';
-import type { SimplifiedOperation } from '../../../../types';
-import { TxAddressDisplay } from './TxAddressDisplay';
-import { TxAssetDisplay } from './TxAssetDisplay';
-import { TxOperationNesting } from './TxOperationNesting';
-
-type TxOperationTransferProps = {
-  operation: SimplifiedOperation;
-};
-
-export function TxOperationTransfer({ operation }: TxOperationTransferProps) {
-  const depth = operation.metadata?.depth || 0;
-  const receiptType = operation.metadata?.receiptType;
-
-  return (
-    <Box.Flex css={styles.root}>
-      <TxOperationNesting depth={depth} />
-      <Box.Stack gap="$3" css={styles.contentCol}>
-        <Box.Flex css={styles.header}>
-          <Text fontSize="xs" css={styles.typeLabel}>
-            Transfer
-          </Text>
-          {receiptType && (
-            <Text fontSize="xs" css={styles.receiptLabel}>
-              {receiptType}
-            </Text>
-          )}
-        </Box.Flex>
-        {/* From address */}
-        <TxAddressDisplay address={operation.from} label="From" />
-        {/* Asset amount with arrow */}
-        <Box.Flex css={styles.amountRow}>
-          <Icon icon="ArrowDown" css={styles.arrow} />
-          <Box.Stack gap="$0">
-            <TxAssetDisplay
-              amount={operation.amount?.toString() || '0'}
-              assetId={operation.assetId}
-              showLabel
-            />
-          </Box.Stack>
-        </Box.Flex>
-        {/* To address */}
-        <TxAddressDisplay address={operation.to} label="To" />
-      </Box.Stack>
-    </Box.Flex>
-  );
-}
-
-const styles = {
-  root: cssObj({
-    display: 'flex',
-    alignItems: 'flex-start',
-    gap: '$2',
-    padding: '$3',
-    backgroundColor: '$cardBg',
-    borderRadius: '$md',
-    width: '100%',
-    minWidth: 0, // Prevent flex items from overflowing
-  }),
-  contentCol: cssObj({
-    display: 'flex',
-    flex: 1,
-    minWidth: 0, // Allow content to shrink if needed
-  }),
-  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',
-  }),
-  amountRow: cssObj({
-    display: 'flex',
-    alignItems: 'flex-start',
-    gap: '$2',
-    marginLeft: '$2',
-  }),
-  arrow: cssObj({
-    color: '$gray8',
-    marginTop: '$1',
-  }),
-};