chore: adjust txscreen info

FuelLabs · Oct 20, 2023 · ba45038 · ba45038
1 parent 1e1454a
commit ba45038
Show file tree

Hide file tree

Showing 8 changed files with 365 additions and 150 deletions.
diff --git a/packages/app/src/systems/Transaction/component/TxIcon/TxIcon.tsx b/packages/app/src/systems/Transaction/component/TxIcon/TxIcon.tsx
@@ -16,6 +16,7 @@ import { tv } from 'tailwind-variants';
 import type { TxIconType, TxStatus } from '../../types';
 
 const TX_ICON_MAP: Record<TxIconType, IconComponent> = {
+  'Contract Created': IconCode,
   ContractCall: IconCode,
   Mint: IconCoins,
   Transfer: IconTransfer,

diff --git a/packages/app/src/systems/Transaction/component/TxInfo/TxInfo.tsx b/packages/app/src/systems/Transaction/component/TxInfo/TxInfo.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { Card } from '@fuels/ui';
+import { Box, Card, Text } from '@fuels/ui';
 import type { BaseProps } from '@fuels/ui';
 import type { ReactNode } from 'react';
 import { tv } from 'tailwind-variants';
 
 type TxInfoProps = BaseProps<{
-  name: string;
+  name?: string;
   description?: string | null;
   children?: ReactNode;
 }>;
@@ -21,23 +21,23 @@ export function TxInfo({
   const classes = styles();
   return (
     <Card {...props} className={classes.root({ className })}>
-      <Card.Header className="gap-0">
-        <Card.Description className="font-medium text-sm h-6 flex items-center">
-          {name}
-        </Card.Description>
-        <Card.Description className="font-medium text-md text-current my-1 h-6 flex items-center color-2">
-          {children}
-        </Card.Description>
-        <Card.Description className="text-sm flex items-center">
-          {description || '  '}
-        </Card.Description>
-      </Card.Header>
+      <Card.Body className={classes.body()}>
+        {name && (
+          <Text as="h3" className={classes.name()}>
+            {name}
+          </Text>
+        )}
+        <Box>{children}</Box>
+        <Text className="text-xs text-muted">{description}</Text>
+      </Card.Body>
     </Card>
   );
 }
 
 const styles = tv({
   slots: {
-    root: ['py-0 gap-0 border border-card-border fuel-[CardHeader]:py-4'],
+    root: 'py-2 gap-0 border border-card-border',
+    name: 'mb-2 text-sm text-muted leading-1',
+    body: 'py-2',
   },
 });
diff --git a/packages/app/src/systems/Transaction/component/TxScripts/TxScripts.tsx b/packages/app/src/systems/Transaction/component/TxScripts/TxScripts.tsx
@@ -58,6 +58,9 @@ function TxScriptRow({ item }: TxScriptRowProps) {
   const classes = styles();
   const ctx = useRadixTheme();
   const amount = bn(item.amount);
+  const isDanger =
+    item.receiptType === 'PANIC' ||
+    (item.receiptType === 'SCRIPT_RESULT' && item.result === '2');
 
   return (
     <Card className="py-0 gap-0">
@@ -66,7 +69,11 @@ function TxScriptRow({ item }: TxScriptRowProps) {
         data-state={opened ? 'opened' : 'closed'}
       >
         <HStack align="center">
-          <Badge color="gray" size="2">
+          <Badge
+            size="2"
+            color={isDanger ? 'crimson' : 'gray'}
+            variant={isDanger ? 'outline' : 'surface'}
+          >
             {item.receiptType}
           </Badge>
           <div className="flex-1">
@@ -141,7 +148,7 @@ function TxScriptsContent({ tx, opened, setOpened }: TxScriptsContentProps) {
     );
   }
 
-  if (!opened && receipts.length > 1) {
+  if (!opened && receipts.length > 3) {
     return (
       <>
         <TxScriptRow item={receipts[0]} />
@@ -158,7 +165,7 @@ function TxScriptsContent({ tx, opened, setOpened }: TxScriptsContentProps) {
           </Button>
           <Box className={classes.lines()} />
         </HStack>
-        <TxScriptRow item={receipts[1]} />
+        <TxScriptRow item={receipts[receipts.length - 1]} />
       </>
     );
   }

diff --git a/packages/app/src/systems/Transaction/screens/TxScreen/TxScreen.tsx b/packages/app/src/systems/Transaction/screens/TxScreen/TxScreen.tsx
@@ -8,24 +8,25 @@ import type {
 import {
   Badge,
   Box,
+  EntityItem,
   Flex,
   Grid,
-  HStack,
   Heading,
   Icon,
   VStack,
+  Text,
 } from '@fuels/ui';
 import { IconArrowDown } from '@tabler/icons-react';
 import { bn } from 'fuels';
 import { EmptyCard } from '~/systems/Core/components/EmptyCard/EmptyCard';
 
 import { TxBreadcrumb } from '../../component/TxBreadcrumb/TxBreadcrumb';
-import { TX_INTENT_MAP } from '../../component/TxIcon/TxIcon';
+import { TX_INTENT_MAP, TxIcon } from '../../component/TxIcon/TxIcon';
 import { TxInfo } from '../../component/TxInfo/TxInfo';
 import { TxInput } from '../../component/TxInput/TxInput';
 import { TxOutput } from '../../component/TxOutput/TxOutput';
 import { TxScripts } from '../../component/TxScripts/TxScripts';
-import type { TransactionNode } from '../../types';
+import type { TransactionNode, TxStatus } from '../../types';
 
 type TxScreenProps = {
   transaction?: Maybe<TransactionNode>;
@@ -35,32 +36,41 @@ export function TxScreen({ transaction: tx }: TxScreenProps) {
   if (!tx) return null;
   const hasInputs = tx.groupedInputs?.length ?? 0 > 0;
   const hasOutputs = tx.groupedOutputs?.length ?? 0 > 0;
+  const title = tx.title as string;
 
   return (
     <VStack gap="9" className="min-h-[75vh]">
       <TxBreadcrumb transactionId={tx.id} />
       <Grid columns="6" gap="9">
         <Box className="col-span-2">
           <VStack>
-            <HStack>
-              <TxInfo name={'Status'} className="flex-1">
-                <Badge
-                  color={TX_INTENT_MAP[tx.statusType as string]}
-                  variant="solid"
-                >
-                  {tx.statusType}
-                </Badge>
-              </TxInfo>
-              <TxInfo name={'Type'} className="flex-1">
-                <Badge color="gray" variant="solid">
-                  {tx.title}
-                </Badge>
-              </TxInfo>
-            </HStack>
+            <TxInfo>
+              <EntityItem>
+                <EntityItem.Slot>
+                  <TxIcon
+                    status={tx.statusType as TxStatus}
+                    type={title}
+                    size="lg"
+                  />
+                </EntityItem.Slot>
+                <EntityItem.Info title={title}>
+                  <Text as="span" className="text-muted">
+                    <Badge
+                      color={TX_INTENT_MAP[tx.statusType as string]}
+                      variant="ghost"
+                    >
+                      {tx.statusType}
+                    </Badge>
+                  </Text>
+                </EntityItem.Info>
+              </EntityItem>
+            </TxInfo>
             <TxInfo name={'Timestamp'} description={tx.time?.full}>
               {tx.time?.fromNow}
             </TxInfo>
-            <TxInfo name={'Block'}>#{tx.blockHeight}</TxInfo>
+            {tx.blockHeight && (
+              <TxInfo name={'Block'}>#{tx.blockHeight}</TxInfo>
+            )}
             <TxInfo
               name={'Gas spent'}
               description={`Gas limit: ${bn(tx.gasLimit).format()}`}

diff --git a/packages/app/src/systems/Transaction/types.ts b/packages/app/src/systems/Transaction/types.ts
@@ -22,7 +22,11 @@ export enum TxAccountTypeEnum {
 export type TxStatus = keyof typeof TxStatusEnum;
 export type TxType = keyof typeof TxTypeEnum;
 export type TxAccountType = keyof typeof TxAccountTypeEnum;
-export type TxIconType = TxType | TxAccountType | 'Message';
+export type TxIconType =
+  | TxType
+  | TxAccountType
+  | 'Message'
+  | 'Contract Created';
 
 export const TX_TYPES = Object.keys({ ...TxTypeEnum, ...TxAccountTypeEnum });
 export const TX_STATUS = Object.keys(TxStatusEnum);