feat: add TxOutput component

FuelLabs · Sep 27, 2023 · 3ee3d7f · 3ee3d7f
1 parent 54a1b88
commit 3ee3d7f
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 38 deletions.
diff --git a/packages/app/src/systems/Transaction/component/TxInput/TxInput.stories.tsx b/packages/app/src/systems/Transaction/component/TxInput/TxInput.stories.tsx
@@ -1,3 +1,4 @@
+import { VStack } from '@fuels/ui';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
@@ -18,12 +19,11 @@ export default meta;
 type Story = StoryObj<typeof TxInput>;
 
 export const Asset: Story = {
-  render: () => <TxInput className="w-[500px]" input={GROUPED_INPUT_ASSET} />,
-};
-
-export const AssetUnknown: Story = {
   render: () => (
-    <TxInput className="w-[500px]" input={GROUPED_INPUT_ASSET_UNKNOWN} />
+    <VStack>
+      <TxInput className="w-[500px]" input={GROUPED_INPUT_ASSET} />
+      <TxInput className="w-[500px]" input={GROUPED_INPUT_ASSET_UNKNOWN} />
+    </VStack>
   ),
 };
 

diff --git a/packages/app/src/systems/Transaction/component/__mocks__/tx.ts b/packages/app/src/systems/Transaction/component/__mocks__/tx.ts
diff --git a/packages/app/src/systems/Transaction/screens/TxScreen/TxScreen.tsx b/packages/app/src/systems/Transaction/screens/TxScreen/TxScreen.tsx
@@ -1,13 +1,18 @@
 'use client';
 
-import type { GroupedInput, Maybe } from '@fuel-explorer/graphql';
+import type {
+  GroupedInput,
+  GroupedOutput,
+  Maybe,
+} from '@fuel-explorer/graphql';
 import { bn } from '@fuel-ts/math';
 import { Grid, Heading, VStack } from '@fuels/ui';
 
 import { TxAccountItem } from '../../component/TxAccountItem/TxAccountItem';
 import { TxAssetItem } from '../../component/TxAssetItem/TxAssetItem';
 import { TxBreadcrumb } from '../../component/TxBreadcrumb/TxBreadcrumb';
 import { TxInput } from '../../component/TxInput/TxInput';
+import { TxOutput } from '../../component/TxOutput/TxOutput';
 import { TxSummary } from '../../component/TxSummary/TxSummary';
 import type { TransactionNode, TxAccountType } from '../../types';
 
@@ -67,6 +72,17 @@ export function TxScreen({ transaction: tx }: TxScreenProps) {
             />
           ))}
         </VStack>
+        <VStack>
+          <Heading as="h2" size="3">
+            Outputs
+          </Heading>
+          {tx.groupedOutputs?.map((output) => (
+            <TxOutput
+              key={getOutputId(output as GroupedOutput)}
+              output={output as GroupedOutput}
+            />
+          ))}
+        </VStack>
       </Grid>
     </VStack>
   );
@@ -78,3 +94,11 @@ function getInputId(input?: Maybe<GroupedInput>) {
   if (input.type === 'InputContract') return input.contractId;
   return input.sender;
 }
+
+function getOutputId(output?: Maybe<GroupedOutput>) {
+  if (!output) return 0;
+  if (output.type === 'ContractOutput') return output.inputIndex;
+  if (output.type === 'ContractCreated') return output.contract?.id ?? 0;
+  if (output.type === 'MessageOutput') return output.recipient;
+  return output.assetId;
+}
diff --git a/packages/graphql/src/queries/tx-fragments.graphql b/packages/graphql/src/queries/tx-fragments.graphql
@@ -160,4 +160,18 @@ fragment TransactionItem on Transaction {
     data
     owner
   }
+  groupedOutputs {
+    type
+    totalAmount
+    outputs {
+      ...TransactionOutput
+    }
+    contract {
+      id
+    }
+    to
+    assetId
+    inputIndex
+    recipient
+  }
 }
diff --git a/packages/graphql/src/schemas/fullschema.graphql b/packages/graphql/src/schemas/fullschema.graphql
@@ -224,12 +224,6 @@ type Genesis {
   messagesRoot: Bytes32!
 }
 
-enum GroupedInputType {
-  InputCoin
-  InputContract
-  InputMessage
-}
-
 type GroupedInput {
   assetId: AssetId
   contractId: ContractId
@@ -242,6 +236,12 @@ type GroupedInput {
   type: GroupedInputType
 }
 
+enum GroupedInputType {
+  InputCoin
+  InputContract
+  InputMessage
+}
+
 type GroupedOutput {
   assetId: AssetId
   contract: Contract