From 1bc4c1b671f28802672ff223e5bdf6e64f09324d Mon Sep 17 00:00:00 2001
From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com>
Date: Wed, 18 Sep 2024 20:16:51 -0300
Subject: [PATCH] refactor: organize txoutput components into their own files

---
 .../component/TxOutput/TxOutput.tsx           | 161 +-----------------
 .../component/TxOutput/TxOutputCoin.tsx       |  79 +++++++++
 .../TxOutput/TxOutputContractCreated.tsx      |  62 +++++++
 .../component/TxOutput/constants.ts           |  24 +++
 .../Transaction/component/TxOutput/styles.ts  |  12 ++
 .../Transaction/component/TxOutput/types.ts   |   6 +
 6 files changed, 189 insertions(+), 155 deletions(-)
 create mode 100644 packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputCoin.tsx
 create mode 100644 packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputContractCreated.tsx
 create mode 100644 packages/app-explorer/src/systems/Transaction/component/TxOutput/constants.ts
 create mode 100644 packages/app-explorer/src/systems/Transaction/component/TxOutput/styles.ts
 create mode 100644 packages/app-explorer/src/systems/Transaction/component/TxOutput/types.ts

diff --git a/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutput.tsx b/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutput.tsx
index 4b245403..a5d00a78 100644
--- a/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutput.tsx
+++ b/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutput.tsx
@@ -2,155 +2,15 @@ import type {
   GQLChangeOutput,
   GQLCoinOutput,
   GQLContractCreated,
-  GQLTransactionOutputFragment,
   GQLVariableOutput,
 } from '@fuel-explorer/graphql';
-import {
-  Address,
-  Badge,
-  Card,
-  Flex,
-  HStack,
-  Icon,
-  Text,
-  VStack,
-  createComponent,
-  cx,
-} from '@fuels/ui';
-import type { CardProps } from '@fuels/ui';
-import { IconArrowUp } from '@tabler/icons-react';
-import { bn } from 'fuels';
-import NextLink from 'next/link';
-import { tv } from 'tailwind-variants';
-import { Routes } from '~/routes';
-import { AssetItem } from '~/systems/Asset/components/AssetItem/AssetItem';
-import { Amount } from '~/systems/Core/components/Amount/Amount';
-import { TxIconType } from '~/systems/Transaction/types';
-import { TxIcon } from '../TxIcon/TxIcon';
+import { memo } from 'react';
 import { isOutput } from './TxOutput.utils';
+import { TxOutputCoin } from './TxOutputCoin';
+import { TxOutputContractCreated } from './TxOutputContractCreated';
+import type { TxOutputProps } from './types';
 
-const typeNameMap: Record<GQLTransactionOutputFragment['__typename'], string> =
-  {
-    ContractOutput: 'OUTPUT',
-    ContractCreated: 'CREATED',
-    VariableOutput: 'VARIABLE',
-    ChangeOutput: 'CHANGE',
-    CoinOutput: 'COIN',
-  };
-
-const txIconTypeMap: Record<
-  GQLTransactionOutputFragment['__typename'],
-  TxIconType
-> = {
-  ContractOutput: 'Contract',
-  ContractCreated: 'Contract Created',
-  VariableOutput: 'Mint',
-  ChangeOutput: 'Wallet',
-  CoinOutput: 'Wallet',
-};
-
-type TxOutputProps<T = GQLTransactionOutputFragment> = CardProps & {
-  output: T;
-};
-
-const TxOutputCoin = createComponent<
-  TxOutputProps<GQLChangeOutput | GQLCoinOutput | GQLVariableOutput>,
-  typeof Card
->({
-  id: 'TxOutputCoin',
-  render: (_, { output, ...props }) => {
-    const classes = styles();
-    if (!output.assetId) return null;
-    const assetId = output.assetId;
-    const amount = output.amount;
-    const badgeLabel = typeNameMap?.[output?.__typename] ?? 'UNKNOWN';
-    const txIconTypeFallback = txIconTypeMap?.[output?.__typename] ?? 'Mint';
-
-    return (
-      <Card {...props} className={cx('py-3', props.className)}>
-        <Card.Header className={classes.header()}>
-          <Badge
-            color="gray"
-            className="font-mono justify-center ml-14 tablet:ml-0 tablet:flex min-w-[70px] w-[70px] max-w-[70px] items-center"
-            size="1"
-          >
-            {badgeLabel}
-          </Badge>
-          <Flex className={classes.content()}>
-            <AssetItem
-              assetId={assetId}
-              txIconTypeFallback={txIconTypeFallback}
-            >
-              <Address
-                prefix="To:"
-                value={output.to || ''}
-                linkProps={{
-                  as: NextLink,
-                  href: Routes.accountAssets(output.to!),
-                }}
-              />
-            </AssetItem>
-          </Flex>
-          <HStack className={classes.amount()}>
-            <Icon icon={IconArrowUp} className="text-success" />
-            {!!amount && (
-              <Amount
-                hideSymbol
-                hideIcon
-                assetId={assetId}
-                value={bn(amount)}
-              />
-            )}
-          </HStack>
-        </Card.Header>
-      </Card>
-    );
-  },
-});
-
-const TxOutputContractCreated = createComponent<
-  TxOutputProps<GQLContractCreated>,
-  typeof Card
->({
-  id: 'TxOutputContractCreated',
-  render: (_, { output, ...props }) => {
-    const classes = styles();
-    const contractId = output.contract;
-    const badgeLabel = typeNameMap?.[output?.__typename] ?? 'UNKNOWN';
-
-    return (
-      <Card {...props} className={cx('py-3', props.className)}>
-        <Card.Header className={classes.header()}>
-          <Flex className={classes.content()}>
-            <Badge
-              color="gray"
-              className="font-mono justify-center ml-14 tablet:ml-0 tablet:flex min-w-[70px] w-[70px] max-w-[70px] items-center"
-              size="1"
-            >
-              {badgeLabel}
-            </Badge>
-            <HStack align="center">
-              <TxIcon status="Success" type="Contract" />
-              <VStack gap="1">
-                <Text className="font-medium">Contract Created</Text>
-                <Address
-                  prefix="Id:"
-                  value={contractId}
-                  linkProps={{
-                    as: NextLink,
-                    href: Routes.contractAssets(contractId),
-                  }}
-                />
-              </VStack>
-            </HStack>
-          </Flex>
-        </Card.Header>
-      </Card>
-    );
-  },
-});
-
-export function TxOutput({ output, ...props }: TxOutputProps) {
+function _TxOutput({ output, ...props }: TxOutputProps) {
   if (
     isOutput<GQLVariableOutput>(output, 'VariableOutput') ||
     isOutput<GQLChangeOutput>(output, 'ChangeOutput') ||
@@ -165,13 +25,4 @@ export function TxOutput({ output, ...props }: TxOutputProps) {
   return null;
 }
 
-const styles = tv({
-  slots: {
-    header:
-      'group gap-2 flex flex-col tablet:flex-row items-start tablet:items-center',
-    amount: 'flex items-center gap-2 ml-14 tablet:ml-0',
-    content: 'gap-4 justify-between items-center flex-1',
-    icon: 'transition-transform group-data-[state=closed]:hover:rotate-180 group-data-[state=open]:rotate-180',
-    utxos: 'bg-gray-2 mx-4 py-3 px-4 rounded',
-  },
-});
+export const TxOutput = memo(_TxOutput);
diff --git a/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputCoin.tsx b/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputCoin.tsx
new file mode 100644
index 00000000..7fb9922d
--- /dev/null
+++ b/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputCoin.tsx
@@ -0,0 +1,79 @@
+import type {
+  GQLChangeOutput,
+  GQLCoinOutput,
+  GQLVariableOutput,
+} from '@fuel-explorer/graphql';
+import {
+  Address,
+  Badge,
+  Card,
+  Flex,
+  HStack,
+  Icon,
+  createComponent,
+  cx,
+} from '@fuels/ui';
+import { IconArrowUp } from '@tabler/icons-react';
+import { bn } from 'fuels';
+import NextLink from 'next/link';
+import { Routes } from '~/routes';
+import { AssetItem } from '~/systems/Asset/components/AssetItem/AssetItem';
+import { Amount } from '~/systems/Core/components/Amount/Amount';
+import { txIconTypeMap, typeNameMap } from './constants';
+import { styles } from './styles';
+import type { TxOutputProps } from './types';
+
+export const TxOutputCoin = createComponent<
+  TxOutputProps<GQLChangeOutput | GQLCoinOutput | GQLVariableOutput>,
+  typeof Card
+>({
+  id: 'TxOutputCoin',
+  render: (_, { output, ...props }) => {
+    const classes = styles();
+    if (!output.assetId) return null;
+    const assetId = output.assetId;
+    const amount = output.amount;
+    const badgeLabel = typeNameMap?.[output?.__typename] ?? 'UNKNOWN';
+    const txIconTypeFallback = txIconTypeMap?.[output?.__typename] ?? 'Mint';
+
+    return (
+      <Card {...props} className={cx('py-3', props.className)}>
+        <Card.Header className={classes.header()}>
+          <Badge
+            color="gray"
+            className="font-mono justify-center ml-14 tablet:ml-0 tablet:flex min-w-[70px] w-[70px] max-w-[70px] items-center"
+            size="1"
+          >
+            {badgeLabel}
+          </Badge>
+          <Flex className={classes.content()}>
+            <AssetItem
+              assetId={assetId}
+              txIconTypeFallback={txIconTypeFallback}
+            >
+              <Address
+                prefix="To:"
+                value={output.to || ''}
+                linkProps={{
+                  as: NextLink,
+                  href: Routes.accountAssets(output.to!),
+                }}
+              />
+            </AssetItem>
+          </Flex>
+          <HStack className={classes.amount()}>
+            <Icon icon={IconArrowUp} className="text-success" />
+            {!!amount && (
+              <Amount
+                hideSymbol
+                hideIcon
+                assetId={assetId}
+                value={bn(amount)}
+              />
+            )}
+          </HStack>
+        </Card.Header>
+      </Card>
+    );
+  },
+});
diff --git a/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputContractCreated.tsx b/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputContractCreated.tsx
new file mode 100644
index 00000000..1ee13405
--- /dev/null
+++ b/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputContractCreated.tsx
@@ -0,0 +1,62 @@
+import type { GQLContractCreated } from '@fuel-explorer/graphql';
+import {
+  Address,
+  Badge,
+  Card,
+  Flex,
+  HStack,
+  Text,
+  VStack,
+  createComponent,
+  cx,
+} from '@fuels/ui';
+
+import NextLink from 'next/link';
+import { Routes } from '~/routes';
+
+import { TxIcon } from '../TxIcon/TxIcon';
+import { typeNameMap } from './constants';
+import { styles } from './styles';
+import type { TxOutputProps } from './types';
+
+export const TxOutputContractCreated = createComponent<
+  TxOutputProps<GQLContractCreated>,
+  typeof Card
+>({
+  id: 'TxOutputContractCreated',
+  render: (_, { output, ...props }) => {
+    const classes = styles();
+    const contractId = output.contract;
+    const badgeLabel = typeNameMap?.[output?.__typename] ?? 'UNKNOWN';
+
+    return (
+      <Card {...props} className={cx('py-3', props.className)}>
+        <Card.Header className={classes.header()}>
+          <Flex className={classes.content()}>
+            <Badge
+              color="gray"
+              className="font-mono justify-center ml-14 tablet:ml-0 tablet:flex min-w-[70px] w-[70px] max-w-[70px] items-center"
+              size="1"
+            >
+              {badgeLabel}
+            </Badge>
+            <HStack align="center">
+              <TxIcon status="Success" type="Contract" />
+              <VStack gap="1">
+                <Text className="font-medium">Contract Created</Text>
+                <Address
+                  prefix="Id:"
+                  value={contractId}
+                  linkProps={{
+                    as: NextLink,
+                    href: Routes.contractAssets(contractId),
+                  }}
+                />
+              </VStack>
+            </HStack>
+          </Flex>
+        </Card.Header>
+      </Card>
+    );
+  },
+});
diff --git a/packages/app-explorer/src/systems/Transaction/component/TxOutput/constants.ts b/packages/app-explorer/src/systems/Transaction/component/TxOutput/constants.ts
new file mode 100644
index 00000000..e4db4df7
--- /dev/null
+++ b/packages/app-explorer/src/systems/Transaction/component/TxOutput/constants.ts
@@ -0,0 +1,24 @@
+import type { GQLTransactionOutputFragment } from '@fuel-explorer/graphql';
+import type { TxIconType } from '~/systems/Transaction/types';
+
+export const typeNameMap: Record<
+  GQLTransactionOutputFragment['__typename'],
+  string
+> = {
+  ContractOutput: 'OUTPUT',
+  ContractCreated: 'CREATED',
+  VariableOutput: 'VARIABLE',
+  ChangeOutput: 'CHANGE',
+  CoinOutput: 'COIN',
+};
+
+export const txIconTypeMap: Record<
+  GQLTransactionOutputFragment['__typename'],
+  TxIconType
+> = {
+  ContractOutput: 'Contract',
+  ContractCreated: 'Contract Created',
+  VariableOutput: 'Mint',
+  ChangeOutput: 'Wallet',
+  CoinOutput: 'Wallet',
+};
diff --git a/packages/app-explorer/src/systems/Transaction/component/TxOutput/styles.ts b/packages/app-explorer/src/systems/Transaction/component/TxOutput/styles.ts
new file mode 100644
index 00000000..9ada9035
--- /dev/null
+++ b/packages/app-explorer/src/systems/Transaction/component/TxOutput/styles.ts
@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    header:
+      'group gap-2 flex flex-col tablet:flex-row items-start tablet:items-center',
+    amount: 'flex items-center gap-2 ml-14 tablet:ml-0',
+    content: 'gap-4 justify-between items-center flex-1',
+    icon: 'transition-transform group-data-[state=closed]:hover:rotate-180 group-data-[state=open]:rotate-180',
+    utxos: 'bg-gray-2 mx-4 py-3 px-4 rounded',
+  },
+});
diff --git a/packages/app-explorer/src/systems/Transaction/component/TxOutput/types.ts b/packages/app-explorer/src/systems/Transaction/component/TxOutput/types.ts
new file mode 100644
index 00000000..831aec4b
--- /dev/null
+++ b/packages/app-explorer/src/systems/Transaction/component/TxOutput/types.ts
@@ -0,0 +1,6 @@
+import type { GQLTransactionOutputFragment } from '@fuel-explorer/graphql';
+import type { CardProps } from '@fuels/ui';
+
+export type TxOutputProps<T = GQLTransactionOutputFragment> = CardProps & {
+  output: T;
+};