feat: add badge amount and txicon to outputs

FuelLabs · Sep 18, 2024 · 4158a4f · 4158a4f
1 parent 25f8dc1
commit 4158a4f
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 27 deletions.
diff --git a/packages/app-explorer/src/systems/Asset/components/AssetItem/AssetItem.tsx b/packages/app-explorer/src/systems/Asset/components/AssetItem/AssetItem.tsx
@@ -13,6 +13,7 @@ import {
 import Image from 'next/image';
 import { TxIcon } from '~/systems/Transaction/component/TxIcon/TxIcon';
 
+import type { TxIconType } from '~/systems/Transaction/types';
 import { useAsset } from '../../hooks/useAsset';
 
 const ICON_SIZE = 38;
@@ -21,13 +22,15 @@ type AssetItemProps = HStackProps & {
   assetId: string;
   prefix?: string;
   isLoading?: boolean;
+  txIconTypeFallback?: TxIconType;
 };
 
 export function AssetItem({
   prefix,
   assetId,
   children,
   isLoading,
+  txIconTypeFallback,
   ...props
 }: AssetItemProps) {
   const asset = useAsset(assetId);
@@ -47,7 +50,7 @@ export function AssetItem({
               />
             </Flex>
           ) : (
-            <TxIcon type="Mint" status="Submitted" />
+            <TxIcon type={txIconTypeFallback || 'Mint'} status="Submitted" />
           )
         }
       />

diff --git a/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutput.tsx b/packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutput.tsx
@@ -7,7 +7,9 @@ import type {
 } from '@fuel-explorer/graphql';
 import {
   Address,
+  Badge,
   Card,
+  Flex,
   HStack,
   Icon,
   Text,
@@ -23,9 +25,30 @@ 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 { isOutput } from './TxOutput.utils';
 
+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;
 };
@@ -40,21 +63,35 @@ const TxOutputCoin = createComponent<
     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()}>
-          <AssetItem assetId={assetId}>
-            <Address
-              prefix="To:"
-              value={output.to || ''}
-              linkProps={{
-                as: NextLink,
-                href: Routes.accountAssets(output.to!),
-              }}
-            />
-          </AssetItem>
-          <HStack className="hidden tablet:flex items-center gap-2">
+          <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
@@ -79,24 +116,34 @@ const TxOutputContractCreated = createComponent<
   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()}>
-          <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 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>
     );
@@ -120,7 +167,10 @@ export function TxOutput({ output, ...props }: TxOutputProps) {
 
 const styles = tv({
   slots: {
-    header: 'group flex flex-row gap-4 justify-between items-center',
+    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',
   },