refactor: transaction inputs (#514)

FuelLabs · Sep 15, 2024 · 7def4cc · 7def4cc
1 parent 2ed0a23
commit 7def4cc
Show file tree

Hide file tree

Showing 22 changed files with 561 additions and 255 deletions.
diff --git a/packages/app-explorer/src/systems/Core/components/BalanceItem/BalanceItem.tsx b/packages/app-explorer/src/systems/Core/components/BalanceItem/BalanceItem.tsx
@@ -13,7 +13,8 @@ import { AssetItem } from '~/systems/Asset/components/AssetItem/AssetItem';
 
 import type { GQLBalanceItemFragment } from '@fuel-explorer/graphql';
 import { Amount } from '../Amount/Amount';
-import type { UtxoItem } from '../Utxos/Utxos';
+
+import { UtxoItemType } from '~/systems/Core/components/Utxos/types';
 import { Utxos } from '../Utxos/Utxos';
 
 type BalanceItemProps = BaseProps<{
@@ -56,7 +57,9 @@ export function BalanceItem({ item, isLoading, ...props }: BalanceItemProps) {
           </Box>
         </Flex>
       </Collapsible.Header>
-      {hasUTXOs && <Utxos items={item.utxos as UtxoItem[]} assetId={assetId} />}
+      {hasUTXOs && (
+        <Utxos items={item.utxos as Array<UtxoItemType>} assetId={assetId} />
+      )}
     </Collapsible>
   );
 }
diff --git a/packages/app-explorer/src/systems/Core/components/UtxoItem/UtxoItem.tsx b/packages/app-explorer/src/systems/Core/components/UtxoItem/UtxoItem.tsx
@@ -0,0 +1,50 @@
+import { Address, Box, useBreakpoints } from '@fuels/ui';
+import { bn, toBytes, toHex } from 'fuels';
+import NextLink from 'next/link';
+import { useMemo } from 'react';
+import { Routes } from '~/routes';
+
+import { Amount } from '../Amount/Amount';
+import { TX_ID_SIZE, UTXO_ID_SIZE } from './constants';
+import { styles } from './styles';
+import { UtxoItemProps } from './types';
+
+export function UtxoItem({ item, style, assetId, index }: UtxoItemProps) {
+  const { isMobile } = useBreakpoints();
+
+  const txId = useMemo<string | null>(() => {
+    if (!item.utxoId) return null;
+    const bytes = toBytes(item.utxoId, UTXO_ID_SIZE).slice(0, TX_ID_SIZE);
+    return toHex(bytes, TX_ID_SIZE);
+  }, []);
+
+  if (!txId) return null;
+
+  const trim = isMobile ? 8 : 16;
+  const { item: itemStyle } = styles({
+    color: index % 2 !== 0 ? 'odd' : undefined,
+  });
+
+  return (
+    <Box style={style} className={itemStyle()}>
+      <Address
+        prefix="ID:"
+        value={item.utxoId}
+        className="flex-col items-start gap-1 flex-1 tablet:flex-row tablet:items-center tablet:gap-4"
+        addressOpts={{ trimLeft: trim, trimRight: trim }}
+        linkProps={{
+          as: NextLink,
+          href: Routes.txSimple(txId),
+        }}
+      />
+      <Amount
+        hideSymbol
+        hideIcon
+        assetId={assetId}
+        value={bn(item.amount)}
+        className="text-xs"
+        iconSize={14}
+      />
+    </Box>
+  );
+}
diff --git a/packages/app-explorer/src/systems/Core/components/UtxoItem/constants.ts b/packages/app-explorer/src/systems/Core/components/UtxoItem/constants.ts
@@ -0,0 +1,2 @@
+export const UTXO_ID_SIZE = 34;
+export const TX_ID_SIZE = 32;
diff --git a/packages/app-explorer/src/systems/Core/components/UtxoItem/styles.ts b/packages/app-explorer/src/systems/Core/components/UtxoItem/styles.ts
@@ -0,0 +1,19 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    item: [
+      'flex flex-col p-2 px-4 gap-2',
+      'tablet:flex-row',
+      'last:rounded-b-sm',
+      'fuel-[Address]:text-[0.8rem] fuel-[Address]:leading-none',
+    ],
+  },
+  variants: {
+    color: {
+      odd: {
+        item: 'bg-gray-4',
+      },
+    },
+  },
+});
diff --git a/packages/app-explorer/src/systems/Core/components/UtxoItem/types.ts b/packages/app-explorer/src/systems/Core/components/UtxoItem/types.ts
@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+import type { UtxoItemType } from '~/systems/Core/components/Utxos/types';
+
+export type UtxoItemProps = {
+  item: UtxoItemType;
+  assetId?: string;
+  style?: CSSProperties;
+  index: number;
+};
diff --git a/packages/app-explorer/src/systems/Core/components/Utxos/Utxos.tsx b/packages/app-explorer/src/systems/Core/components/Utxos/Utxos.tsx
@@ -1,72 +1,9 @@
-import type { GQLUtxoItem as TUtxoItem } from '@fuel-explorer/graphql';
-import { Address, Box, Collapsible, useBreakpoints } from '@fuels/ui';
-import type { BoxProps } from '@fuels/ui';
+import { Collapsible, useBreakpoints } from '@fuels/ui';
 import { IconCoins } from '@tabler/icons-react';
-import { bn, toBytes, toHex } from 'fuels';
-import NextLink from 'next/link';
 import { FixedSizeList as List } from 'react-window';
-import { tv } from 'tailwind-variants';
-import { Routes } from '~/routes';
 
-import { useMemo } from 'react';
-import { Amount } from '../Amount/Amount';
-
-export type UtxoItem = Partial<Omit<TUtxoItem, '__typename'>>;
-
-type UtxoItemProps = {
-  item: UtxoItem;
-  assetId?: string;
-  style?: React.CSSProperties;
-  index: number;
-};
-
-const UTXO_ID_SIZE = 34;
-const TX_ID_SIZE = 32;
-
-function UtxoItem({ item, style, assetId, index }: UtxoItemProps) {
-  const { isMobile } = useBreakpoints();
-
-  const txId = useMemo<string | null>(() => {
-    if (!item.utxoId) return null;
-    const bytes = toBytes(item.utxoId, UTXO_ID_SIZE).slice(0, TX_ID_SIZE);
-    return toHex(bytes, TX_ID_SIZE);
-  }, []);
-
-  if (!txId) return null;
-
-  const trim = isMobile ? 8 : 16;
-  const { item: itemStyle } = styles({
-    color: index % 2 !== 0 ? 'odd' : undefined,
-  });
-
-  return (
-    <Box style={style} className={itemStyle()}>
-      <Address
-        prefix="ID:"
-        value={item.utxoId}
-        className="flex-col items-start gap-1 flex-1 tablet:flex-row tablet:items-center tablet:gap-4"
-        addressOpts={{ trimLeft: trim, trimRight: trim }}
-        linkProps={{
-          as: NextLink,
-          href: Routes.txSimple(txId),
-        }}
-      />
-      <Amount
-        hideSymbol
-        hideIcon
-        assetId={assetId}
-        value={bn(item.amount)}
-        className="text-xs"
-        iconSize={14}
-      />
-    </Box>
-  );
-}
-
-type UtxosProps = BoxProps & {
-  assetId?: string;
-  items?: UtxoItem[] | null;
-};
+import { UtxoItem } from '~/systems/Core/components/UtxoItem/UtxoItem';
+import { UtxosProps } from './types';
 
 function VirtualList({ items, assetId }: UtxosProps) {
   const { isMobile } = useBreakpoints();
@@ -110,21 +47,3 @@ export function Utxos({ items, assetId, ...props }: UtxosProps) {
     </Collapsible.Content>
   );
 }
-
-const styles = tv({
-  slots: {
-    item: [
-      'flex flex-col p-2 px-4 gap-2',
-      'tablet:flex-row',
-      'last:rounded-b-sm',
-      'fuel-[Address]:text-[0.8rem] fuel-[Address]:leading-none',
-    ],
-  },
-  variants: {
-    color: {
-      odd: {
-        item: 'bg-gray-4',
-      },
-    },
-  },
-});
diff --git a/packages/app-explorer/src/systems/Core/components/Utxos/types.ts b/packages/app-explorer/src/systems/Core/components/Utxos/types.ts
@@ -0,0 +1,8 @@
+import type { GQLUtxoItem as TUtxoItem } from '@fuel-explorer/graphql/sdk';
+import type { BoxProps } from '@fuels/ui';
+
+export type UtxoItemType = Partial<Omit<TUtxoItem, '__typename'>>;
+export type UtxosProps = BoxProps & {
+  assetId?: string;
+  items?: UtxoItemType[] | null;
+};
diff --git a/packages/app-explorer/src/systems/Transaction/__mocks__/tx.ts b/packages/app-explorer/src/systems/Transaction/__mocks__/tx.ts
@@ -1,4 +1,4 @@
-import { GQLInputCoin, mocks } from '@fuel-explorer/graphql';
+import { mocks } from '@fuel-explorer/graphql';
 import { dayjs } from '~/systems/Core/utils/dayjs';
 
 const date = dayjs().subtract(1, 'day');
@@ -9,10 +9,22 @@ const status = mocks.aSuccessStatus({
   }),
 });
 
-function input(typename: GQLInputCoin['__typename']) {
-  return mocks.anInputCoin({ __typename: typename });
+function mockedInputCoinFactory() {
+  return mocks.anInputCoin({ __typename: 'InputCoin' });
 }
 
+function mockedInputMessageFactory() {
+  return mocks.anInputMessage({ __typename: 'InputMessage' });
+}
+
+function mockedInputContractFactory() {
+  return mocks.anInputContract({ __typename: 'InputContract' });
+}
+
+export const MOCKED_COIN = mockedInputCoinFactory();
+export const MOCKED_MESSAGE = mockedInputMessageFactory();
+export const MOCKED_CONTRACT = mockedInputContractFactory();
+
 const ADDRS = {
   to: '0xf65d6448a273b531ee942c133bb91a6f904c7d7f3104cdaf6b9f7f50d3518871',
   owner: '0xf65d6448a273b531ee942c133bb91a6f904c7d7f3104cdaf6b9f7f50d3518871',
@@ -23,18 +35,26 @@ const ADDRS = {
     '0x4c6be4ed66b783f55e44a6d36290a73970a616ba33256636cf15ad5cded228d9',
 };
 
-export const GROUPED_INPUT_ASSET = mocks.aGroupedInputCoin({
+const GROUPED_INPUT_ASSET = mocks.aGroupedInputCoin({
   ...ADDRS,
   assetId: '0x0000000000000000000000000000000000000000',
-  inputs: [input('InputCoin'), input('InputCoin'), input('InputCoin')],
+  inputs: [
+    mockedInputCoinFactory(),
+    mockedInputCoinFactory(),
+    mockedInputCoinFactory(),
+  ],
 });
 
-export const GROUPED_INPUT_ASSET_UNKNOWN = mocks.aGroupedInputCoin({
+const GROUPED_INPUT_ASSET_UNKNOWN = mocks.aGroupedInputCoin({
   ...ADDRS,
-  inputs: [input('InputCoin'), input('InputCoin'), input('InputCoin')],
+  inputs: [
+    mockedInputCoinFactory(),
+    mockedInputCoinFactory(),
+    mockedInputCoinFactory(),
+  ],
 });
 
-export const GROUPED_INPUT_MESSAGE = mocks.aGroupedInputMessage({
+const GROUPED_INPUT_MESSAGE = mocks.aGroupedInputMessage({
   ...ADDRS,
 });
 
@@ -65,6 +85,12 @@ export const TX_MOCK = mocks.aTransaction({
     GROUPED_INPUT_ASSET,
     GROUPED_INPUT_MESSAGE,
   ],
+  // @TODO: Fix maximum call stack size exceeded and remove override below
+  operations: [
+    mocks.anOperation({
+      receipts: [mocks.anOperationReceipt({ receipts: [] })] ?? [],
+    }),
+  ],
   groupedOutputs: [],
   outputs: [OUTPUT_ASSET, OUTPUT_ASSET_UNKNOWN, OUTPUT_CONTRACT_CREATED],
 });
diff --git a/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInput.stories.tsx b/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInput.stories.tsx
@@ -2,9 +2,9 @@ import { VStack } from '@fuels/ui';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
-  GROUPED_INPUT_ASSET,
-  GROUPED_INPUT_ASSET_UNKNOWN,
-  GROUPED_INPUT_MESSAGE,
+  MOCKED_COIN,
+  MOCKED_CONTRACT,
+  MOCKED_MESSAGE,
 } from '../../__mocks__/tx';
 
 import { TxInput } from './TxInput';
@@ -17,15 +17,30 @@ const meta: Meta<typeof TxInput> = {
 export default meta;
 type Story = StoryObj<typeof TxInput>;
 
-export const Asset: Story = {
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <VStack className="w-[600px]">{children}</VStack>;
+}
+
+export const Coin: Story = {
   render: () => (
-    <VStack className="w-[600px]">
-      <TxInput input={GROUPED_INPUT_ASSET} />
-      <TxInput input={GROUPED_INPUT_ASSET_UNKNOWN} />
-    </VStack>
+    <Wrapper>
+      <TxInput input={MOCKED_COIN} />
+    </Wrapper>
   ),
 };
 
 export const Message: Story = {
-  render: () => <TxInput className="w-[600px]" input={GROUPED_INPUT_MESSAGE} />,
+  render: () => (
+    <Wrapper>
+      <TxInput input={MOCKED_MESSAGE} />
+    </Wrapper>
+  ),
+};
+
+export const Contract: Story = {
+  render: () => (
+    <Wrapper>
+      <TxInput input={MOCKED_CONTRACT} />
+    </Wrapper>
+  ),
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const UTXO_ID_SIZE = 34;
		export const TX_ID_SIZE = 32;