diff --git a/packages/app/src/systems/Transaction/component/TxIcon/TxIcon.tsx b/packages/app/src/systems/Transaction/component/TxIcon/TxIcon.tsx index d164f51df..ca2246389 100644 --- 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 = { + '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 index a1c68bc4d..f1e96db93 100644 --- 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 ( - - - {name} - - - {children} - - - {description || ' '} - - + + {name && ( + + {name} + + )} + {children} + {description} + ); } 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 index 709788b96..1c985a6ea 100644 --- 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 ( @@ -66,7 +69,11 @@ function TxScriptRow({ item }: TxScriptRowProps) { data-state={opened ? 'opened' : 'closed'} > - + {item.receiptType}
@@ -141,7 +148,7 @@ function TxScriptsContent({ tx, opened, setOpened }: TxScriptsContentProps) { ); } - if (!opened && receipts.length > 1) { + if (!opened && receipts.length > 3) { return ( <> @@ -158,7 +165,7 @@ function TxScriptsContent({ tx, opened, setOpened }: TxScriptsContentProps) { - + ); } diff --git a/packages/app/src/systems/Transaction/screens/TxScreen/TxScreen.tsx b/packages/app/src/systems/Transaction/screens/TxScreen/TxScreen.tsx index e9970fc47..b12bb742f 100644 --- 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; @@ -35,6 +36,7 @@ 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 ( @@ -42,25 +44,33 @@ export function TxScreen({ transaction: tx }: TxScreenProps) { - - - - {tx.statusType} - - - - - {tx.title} - - - + + + + + + + + + {tx.statusType} + + + + + {tx.time?.fromNow} - #{tx.blockHeight} + {tx.blockHeight && ( + #{tx.blockHeight} + )} & export type EntityItemSlotProps = BoxProps; export type EntityItemInfo = BoxProps & { title: ReactNode; - id: string; + id?: string; shortId?: boolean; idPrefix?: ReactNode; }; @@ -50,10 +50,12 @@ export const EntityItemInfo = createComponent({ {title} - - {idPrefix} - {shortId ? shortAddress(id) : id} - + {id && ( + + {idPrefix} + {shortId ? shortAddress(id) : id} + + )} {children} );