From 1a6c5ec63f655dfb1eb776eaac1fbf8d47afd1cf Mon Sep 17 00:00:00 2001
From: Nelito Junior <ngvjqp@gmail.com>
Date: Mon, 3 Feb 2025 18:12:00 -0300
Subject: [PATCH] refactor: remove TxContent component and related files

---
 .../TransactionRequest/TransactionRequest.tsx |   2 +-
 .../TxContent/TxContent.stories.tsx           |  90 --------
 .../components/TxContent/TxContent.tsx        | 203 ------------------
 .../components/TxContent/index.tsx            |   1 -
 .../systems/Transaction/components/index.tsx  |   1 -
 5 files changed, 1 insertion(+), 296 deletions(-)
 delete mode 100644 packages/app/src/systems/Transaction/components/TxContent/TxContent.stories.tsx
 delete mode 100644 packages/app/src/systems/Transaction/components/TxContent/TxContent.tsx
 delete mode 100644 packages/app/src/systems/Transaction/components/TxContent/index.tsx

diff --git a/packages/app/src/systems/DApp/pages/TransactionRequest/TransactionRequest.tsx b/packages/app/src/systems/DApp/pages/TransactionRequest/TransactionRequest.tsx
index 22870fb713..067fdb2889 100644
--- a/packages/app/src/systems/DApp/pages/TransactionRequest/TransactionRequest.tsx
+++ b/packages/app/src/systems/DApp/pages/TransactionRequest/TransactionRequest.tsx
@@ -75,8 +75,8 @@ export function TransactionRequest() {
             <TxDetails
               tx={txSummarySimulated}
               txRequest={proposedTxRequest}
-              showDetails
               isLoading={isLoadingInfo || !defaultValues}
+              showDetails
             />
           )}
           {shouldShowTxExecuted && (
diff --git a/packages/app/src/systems/Transaction/components/TxContent/TxContent.stories.tsx b/packages/app/src/systems/Transaction/components/TxContent/TxContent.stories.tsx
deleted file mode 100644
index 1388cefdc6..0000000000
--- a/packages/app/src/systems/Transaction/components/TxContent/TxContent.stories.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Box, Button } from '@fuel-ui/react';
-
-import type { Meta, StoryFn } from '@storybook/react';
-import { TransactionStatus, bn } from 'fuels';
-import { FormProvider, useForm } from 'react-hook-form';
-import type { SendFormValues } from '~/systems/Send/hooks';
-import { TxContent, type TxContentInfoProps } from './TxContent';
-
-export default {
-  component: TxContent.Info,
-  title: 'Transaction/Components/TxContent',
-  decorators: [(Story) => <Story />],
-  parameters: {
-    viewport: {
-      defaultViewport: 'chromeExtension',
-    },
-  },
-} as Meta;
-
-const defaultArgs = {
-  tx: {
-    id: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-  },
-  isLoading: false,
-  showDetails: true,
-  txStatus: TransactionStatus.success,
-  fees: {
-    baseFee: bn(0.01),
-    regularTip: bn(0.01),
-    fastTip: bn(0.01),
-  },
-} as TxContentInfoProps;
-
-const Template: StoryFn<typeof TxContent.Info> = (args) => {
-  const form = useForm<SendFormValues>({
-    defaultValues: {
-      asset: 'BTC',
-      address: '0x1234567890abcdef1234567890abcdef12345678',
-      amount: bn(0.12345678),
-      fees: {
-        tip: {
-          amount: bn(0),
-          text: '0',
-        },
-        gasLimit: {
-          amount: bn(0),
-          text: '0',
-        },
-      },
-    },
-  });
-  return (
-    <Box css={{ maxWidth: 300 }}>
-      <FormProvider {...form}>
-        <TxContent.Info {...args} />
-      </FormProvider>
-    </Box>
-  );
-};
-
-export const Default: StoryFn = Template.bind({});
-Default.args = {
-  ...defaultArgs,
-} as TxContentInfoProps;
-
-export const Errors: StoryFn = Template.bind({});
-Errors.args = {
-  ...defaultArgs,
-  tx: undefined,
-  txStatus: TransactionStatus.failure,
-  errors: 'No assets available',
-  footer: (
-    <Button
-      size="sm"
-      variant="ghost"
-      intent="error"
-      onPress={() => console.log('try again')}
-    >
-      Try again
-    </Button>
-  ),
-} as TxContentInfoProps;
-
-export const Loader = () => (
-  <Box
-    css={{ maxWidth: 300, display: 'flex', flexDirection: 'column', gap: '$4' }}
-  >
-    <TxContent.Loader />
-  </Box>
-);
diff --git a/packages/app/src/systems/Transaction/components/TxContent/TxContent.tsx b/packages/app/src/systems/Transaction/components/TxContent/TxContent.tsx
deleted file mode 100644
index 0079672ab3..0000000000
--- a/packages/app/src/systems/Transaction/components/TxContent/TxContent.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { cssObj } from '@fuel-ui/css';
-import {
-  Alert,
-  Box,
-  CardList,
-  ContentLoader,
-  Copyable,
-  Icon,
-  Text,
-  VStack,
-} from '@fuel-ui/react';
-import type {
-  BN,
-  TransactionRequest,
-  TransactionStatus,
-  TransactionSummary,
-} from 'fuels';
-import { type ReactNode, useMemo } from 'react';
-import { useFormContext } from 'react-hook-form';
-import type { Maybe } from '~/systems/Core';
-import { MotionStack, animations } from '~/systems/Core';
-import type { SendFormValues } from '~/systems/Send/hooks';
-import {
-  type GroupedErrors,
-  TxFee,
-  TxHeader,
-  TxOperations,
-  getGasLimitFromTxRequest,
-} from '~/systems/Transaction';
-import { TxFeeOptions } from '../TxFeeOptions/TxFeeOptions';
-
-const ErrorHeader = ({ errors }: { errors?: GroupedErrors }) => {
-  return (
-    <Alert status="error" css={styles.alert} aria-label="Transaction Error">
-      <Copyable
-        value={errors ?? ''}
-        aria-label={errors}
-        iconProps={{
-          icon: Icon.is('Copy'),
-          'aria-label': 'Copy Error',
-        }}
-        tooltipMessage="Copy Error"
-      >
-        <Alert.Description
-          as="div"
-          css={{
-            wordBreak: 'break-word',
-          }}
-        >
-          {errors}
-        </Alert.Description>
-      </Copyable>
-    </Alert>
-  );
-};
-
-const ConfirmHeader = () => (
-  <Alert status="warning" css={styles.alert} aria-label="Confirm Transaction">
-    <Alert.Description>
-      Carefully check if all the details in your transaction are correct
-    </Alert.Description>
-  </Alert>
-);
-
-const LoaderHeader = () => (
-  <CardList.Item
-    css={{ padding: '$2 !important' }}
-    aria-label="Loading Transaction"
-  >
-    <ContentLoader width={300} height={40} viewBox="0 0 300 40">
-      <rect x="20" y="10" rx="4" ry="4" width="92" height="20" />
-    </ContentLoader>
-  </CardList.Item>
-);
-
-function TxContentLoader() {
-  return (
-    <MotionStack {...animations.slideInTop()} gap="$4">
-      <LoaderHeader />
-      <TxOperations.Loader />
-      <TxFee.Loader />
-    </MotionStack>
-  );
-}
-
-export type TxContentInfoProps = {
-  footer?: ReactNode;
-  tx?: Maybe<TransactionSummary>;
-  txStatus?: Maybe<TransactionStatus>;
-  showDetails?: boolean;
-  isLoading?: boolean;
-  isConfirm?: boolean;
-  errors?: GroupedErrors;
-  fees?: {
-    baseFee?: BN;
-    regularTip?: BN;
-    fastTip?: BN;
-  };
-  txRequest?: TransactionRequest;
-};
-
-function TxContentInfo({
-  tx,
-  txStatus,
-  footer,
-  showDetails,
-  isLoading,
-  isConfirm,
-  errors,
-  fees,
-  txRequest,
-}: TxContentInfoProps) {
-  const { getValues } = useFormContext<SendFormValues>();
-
-  const status = txStatus || tx?.status || txStatus;
-  const hasErrors = Boolean(Object.keys(errors || {}).length);
-  const isExecuted = !!tx?.id;
-  const txRequestGasLimit = getGasLimitFromTxRequest(txRequest);
-
-  const _initialAdvanced = useMemo(() => {
-    if (!fees?.regularTip || !fees?.fastTip) return false;
-
-    // it will start as advanced if the transaction tip is not equal to the regular tip and fast tip
-    const isFeeAmountTheRegularTip = getValues('fees.tip.amount').eq(
-      fees.regularTip
-    );
-    const isFeeAmountTheFastTip = getValues('fees.tip.amount').eq(fees.fastTip);
-    // it will start as advanced if the gasLimit if different from the tx gasLimit
-    const isGasLimitTheTxRequestGasLimit = getValues('fees.gasLimit.amount').eq(
-      txRequestGasLimit
-    );
-
-    return (
-      (!isFeeAmountTheRegularTip && !isFeeAmountTheFastTip) ||
-      !isGasLimitTheTxRequestGasLimit
-    );
-  }, [getValues, fees, txRequestGasLimit]);
-
-  function getHeader() {
-    if (hasErrors) return <ErrorHeader errors={errors} />;
-    if (isConfirm) return <ConfirmHeader />;
-    if (isExecuted)
-      return (
-        <TxHeader id={tx?.id} type={tx?.type} status={status || undefined} />
-      );
-
-    return <ConfirmHeader />;
-  }
-
-  return (
-    <Box.Stack gap="$4">
-      {getHeader()}
-      <TxOperations
-        operations={tx?.operations}
-        status={status}
-        isLoading={isLoading}
-      />
-      {isLoading && !showDetails && <TxFee.Loader />}
-      {/* {showDetails && !fees && <TxFee fee={tx?.fee} />} */}
-      {showDetails &&
-        fees?.baseFee &&
-        txRequestGasLimit &&
-        fees?.regularTip &&
-        fees?.fastTip && (
-          <VStack gap="$3">
-            <Text as="span">Fee (network)</Text>
-            {/* <TxFeeOptions
-              initialAdvanced={initialAdvanced}
-              baseFee={fees.baseFee}
-              gasLimit={txRequestGasLimit}
-              regularTip={fees.regularTip}
-              fastTip={fees.fastTip}
-            /> */}
-          </VStack>
-        )}
-      {footer}
-    </Box.Stack>
-  );
-}
-
-export const TxContent = {
-  Loader: TxContentLoader,
-  Info: TxContentInfo,
-};
-
-const styles = {
-  fees: cssObj({
-    color: '$intentsBase12',
-    fontSize: '$md',
-    fontWeight: '$normal',
-  }),
-  alert: cssObj({
-    '& .fuel_Alert-content': {
-      gap: '$1',
-    },
-    ' & .fuel_Heading': {
-      fontSize: '$sm',
-    },
-    '& .fuel_Icon': {
-      mt: '-2px',
-    },
-  }),
-};
diff --git a/packages/app/src/systems/Transaction/components/TxContent/index.tsx b/packages/app/src/systems/Transaction/components/TxContent/index.tsx
deleted file mode 100644
index 6a894cc09b..0000000000
--- a/packages/app/src/systems/Transaction/components/TxContent/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './TxContent';
diff --git a/packages/app/src/systems/Transaction/components/index.tsx b/packages/app/src/systems/Transaction/components/index.tsx
index 414977cb82..31c5c6b4fe 100644
--- a/packages/app/src/systems/Transaction/components/index.tsx
+++ b/packages/app/src/systems/Transaction/components/index.tsx
@@ -1,4 +1,3 @@
-export * from './TxContent';
 export * from './TxFee';
 export * from './TxFromTo';
 export * from './TxHeader';