feat(explorer): rebrand tx block quick overview (#2479)

* feat: add displaystats component * feat: rename prop, updtae styles and colors * feat: add icon prop * feat: add w-full * feat: update display stats component * feat: rebrand object page * feat: add div to prevent wrong gap * feat: rebrand transaction blocks * feat: refine grid * eat: add word break and height full * feat: improve accordion * feat: improve styles * feat: add truncate and width * feat: cleanup * feat: uodate grid * feat: update modal bg * feat: refinements * feat: rebrand txblock details * minor fix * feat: bring back domainName * feat: add isTuncated to storybook * feat: update truncate --------- Co-authored-by: Begoña Alvarez <[email protected]>
iotaledger · Sep 13, 2024 · c6c4d54 · c6c4d54
1 parent 8f6ea50
commit c6c4d54
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 108 deletions.
diff --git a/apps/explorer/src/pages/transaction-result/TransactionData.tsx b/apps/explorer/src/pages/transaction-result/TransactionData.tsx
@@ -7,8 +7,6 @@ import {
     type ProgrammableTransaction,
     type IotaTransactionBlockResponse,
 } from '@iota/iota-sdk/client';
-
-import { TransactionDetailCard } from './transaction-summary/TransactionDetailCard';
 import { GasBreakdown } from '~/components';
 import { useRecognizedPackages } from '~/hooks/useRecognizedPackages';
 import { InputsCard } from '~/pages/transaction-result/programmable-transaction-view/InputsCard';
@@ -32,15 +30,8 @@ export function TransactionData({ transaction }: TransactionDataProps): JSX.Elem
     const programmableTxn = transaction.transaction!.data.transaction as ProgrammableTransaction;
 
     return (
-        <div className="flex flex-wrap gap-3 pl-1 pr-2 md:gap-6">
-            <section className="flex w-96 flex-1 flex-col gap-3 max-md:min-w-[50%] md:gap-6">
-                <TransactionDetailCard
-                    timestamp={summary?.timestamp}
-                    sender={summary?.sender}
-                    checkpoint={transaction.checkpoint}
-                    executedEpoch={transaction.effects?.executedEpoch}
-                />
-
+        <div className="flex w-full flex-col gap-3 pl-1 pr-2 md:gap-6">
+            <section className="flex w-full flex-1 flex-col gap-3  md:gap-6">
                 {isProgrammableTransaction && (
                     <div data-testid="inputs-card">
                         <InputsCard inputs={programmableTxn.inputs} />
@@ -49,7 +40,7 @@ export function TransactionData({ transaction }: TransactionDataProps): JSX.Elem
             </section>
 
             {isProgrammableTransaction && (
-                <section className="flex w-96 flex-1 flex-col gap-3 md:min-w-transactionColumn md:gap-6">
+                <section className="flex w-full flex-1 flex-col gap-3 md:min-w-transactionColumn md:gap-6">
                     <div data-testid="transactions-card">
                         <TransactionsCard transactions={programmableTxn.transactions} />
                     </div>

diff --git a/apps/explorer/src/pages/transaction-result/TransactionView.tsx b/apps/explorer/src/pages/transaction-result/TransactionView.tsx
@@ -16,6 +16,9 @@ import { Signatures } from './Signatures';
 
 import { LocalStorageSplitPaneKey } from '~/lib/enums';
 import styles from './TransactionResult.module.css';
+import { TransactionDetails } from './transaction-summary/TransactionDetails';
+import { useTransactionSummary } from '@iota/core';
+import { useRecognizedPackages } from '~/hooks';
 
 interface TabsContentContainerProps {
     value: string;
@@ -91,10 +94,22 @@ export function TransactionView({ transaction }: TransactionViewProps): JSX.Elem
         minSize: 40,
         defaultSize: isProgrammableTransaction ? 65 : 50,
     };
-
+    const recognizedPackagesList = useRecognizedPackages();
+    const summary = useTransactionSummary({
+        transaction,
+        recognizedPackagesList,
+    });
     return (
         <div className={clsx(styles.txdetailsbg)}>
-            <div className="h-screen md:h-full">
+            <div className="flex h-screen flex-col gap-2xl md:h-full">
+                <div>
+                    <TransactionDetails
+                        timestamp={summary?.timestamp}
+                        sender={summary?.sender}
+                        checkpoint={transaction.checkpoint}
+                        executedEpoch={transaction.effects?.executedEpoch}
+                    />
+                </div>
                 <SplitPanes
                     autoSaveId={LocalStorageSplitPaneKey.TransactionView}
                     onCollapse={setIsCollapsed}

diff --git a/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetailCard.tsx b/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetailCard.tsx
diff --git a/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetails.tsx b/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetails.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { DisplayStats } from '@iota/apps-ui-kit';
+import { formatDate, useResolveIotaNSName } from '@iota/core';
+
+interface TransactionDetailsProps {
+    sender?: string;
+    checkpoint?: string | null;
+    executedEpoch?: string;
+    timestamp?: string | null;
+}
+
+export function TransactionDetails({
+    sender,
+    checkpoint,
+    executedEpoch,
+    timestamp,
+}: TransactionDetailsProps): JSX.Element {
+    const { data: domainName } = useResolveIotaNSName(sender);
+
+    return (
+        <div className="grid grid-cols-1 gap-sm md:grid-cols-4">
+            {sender && (
+                <DisplayStats
+                    label="Sender"
+                    value={sender}
+                    valueLink={domainName ?? `/address/${sender}`}
+                    isTruncated
+                />
+            )}
+            {checkpoint && (
+                <DisplayStats
+                    label="Checkpoint"
+                    value={Number(checkpoint).toLocaleString()}
+                    valueLink={`/checkpoint/${checkpoint}`}
+                />
+            )}
+            {executedEpoch && (
+                <DisplayStats
+                    label="Epoch"
+                    value={executedEpoch}
+                    valueLink={`/epoch/${executedEpoch}`}
+                />
+            )}
+
+            {timestamp && <DisplayStats label="Date" value={formatDate(Number(timestamp))} />}
+        </div>
+    );
+}
diff --git a/apps/ui-kit/src/lib/components/molecules/display-stats/DisplayStats.tsx b/apps/ui-kit/src/lib/components/molecules/display-stats/DisplayStats.tsx
@@ -56,6 +56,10 @@ interface DisplayStatsProps {
      * The value link is external.
      */
     isExternalLink?: boolean;
+    /**
+     * The value is truncated
+     */
+    isTruncated?: boolean;
 }
 
 export function DisplayStats({
@@ -69,13 +73,19 @@ export function DisplayStats({
     icon,
     valueLink,
     isExternalLink = false,
+    isTruncated = false,
 }: DisplayStatsProps): React.JSX.Element {
     const backgroundClass = BACKGROUND_CLASSES[type];
     const sizeClass = SIZE_CLASSES[size];
     const textClass = TEXT_CLASSES[type];
     const valueTextClass = VALUE_TEXT_CLASSES[size];
     const labelTextClass = LABEL_TEXT_CLASSES[size];
     const supportingLabelTextClass = SUPPORTING_LABEL_TEXT_CLASSES[size];
+    function truncate(value: string, startLength: number, endLength: number): string {
+        return value.length > startLength + endLength && isTruncated
+            ? `${value.slice(0, startLength)}...${value.slice(-endLength)}`
+            : value;
+    }
     return (
         <div
             className={cx(
@@ -100,19 +110,19 @@ export function DisplayStats({
                 </div>
                 {icon && <span className="text-neutral-10 dark:text-neutral-92">{icon}</span>}
             </div>
-            <div className="flex flex-row items-baseline gap-xxs break-all">
+            <div className="flex w-full flex-row items-baseline gap-xxs">
                 {valueLink ? (
                     <a
                         href={valueLink}
                         target={isExternalLink ? '_blank' : '_self'}
                         rel="noreferrer"
                         className={cx('text-primary-30 dark:text-primary-80', valueTextClass)}
                     >
-                        {value}
+                        {truncate(value, 6, 6)}
                     </a>
                 ) : (
                     <>
-                        <span className={cx(valueTextClass)}>{value}</span>
+                        <span className={cx(valueTextClass)}>{truncate(value, 6, 6)}</span>
                         {supportingLabel && (
                             <span className={cx('opacity-40', supportingLabelTextClass)}>
                                 {supportingLabel}

diff --git a/apps/ui-kit/src/storybook/stories/molecules/DisplayStats.stories.tsx b/apps/ui-kit/src/storybook/stories/molecules/DisplayStats.stories.tsx
@@ -66,5 +66,8 @@ export const Default: Story = {
         isExternalLink: {
             control: 'boolean',
         },
+        isTruncated: {
+            control: 'boolean',
+        },
     },
 };