Merge branch 'develop' into devx/cli-output-filter

apps/explorer/src/components/checkpoints/CheckpointsTable.tsx

@@ -5,7 +5,6 @@
 import { Select } from '@iota/apps-ui-kit';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { useMemo, useState } from 'react';
-
 import { PlaceholderTable, TableCard, useCursorPagination } from '~/components/ui';
 import { DEFAULT_CHECKPOINTS_LIMIT, useGetCheckpoints } from '~/hooks/useGetCheckpoints';
 import { generateTableDataFromCheckpointsData } from '~/lib/ui';
@@ -49,7 +48,7 @@ export function CheckpointsTable({
     const cardData = data ? generateTableDataFromCheckpointsData(data) : undefined;
 
     return (
-        <div className="flex flex-col space-y-3 text-left xl:pr-10">
+        <div className="flex flex-col gap-md text-left xl:pr-10">
             {isError && (
                 <div className="pt-2 font-sans font-semibold text-issue-dark">
                     Failed to load Checkpoints

apps/explorer/src/components/ui/TableCard.tsx

@@ -78,12 +78,7 @@ export function TableCard<DataType extends object>({
     });
 
     return (
-        <div
-            className={clsx(
-                'w-full overflow-x-auto border-b border-gray-45 pb-4',
-                refetching && 'opacity-50',
-            )}
-        >
+        <div className={clsx('w-full overflow-x-auto', refetching && 'opacity-50')}>
             <Table
                 rowIndexes={table.getRowModel().rows.map((row) => row.index)}
                 paginationOptions={paginationOptions}

apps/explorer/src/index.css

@@ -143,19 +143,19 @@ body,
                 'heroImage description storageRebate'
                 'heroImage objectId version'
                 'heroImage type lastTxBlock';
-            }
+        }
         .address-grid-container-top.no-description.no-image {
             @apply grid grid-cols-3 grid-rows-2;
-            grid-template-areas: 
-            'objectId version owner'
-            'type lastTxBlock storageRebate';
+            grid-template-areas:
+                'objectId version owner'
+                'type lastTxBlock storageRebate';
         }
         .address-grid-container-top.no-image {
             @apply grid grid-cols-3 grid-rows-3;
-            grid-template-areas: 
-            'name description type'
-            'objectId version type'
-            'owner lastTxBlock storageRebate';
+            grid-template-areas:
+                'name description type'
+                'objectId version type'
+                'owner lastTxBlock storageRebate';
         }
     }
 }

apps/explorer/src/lib/ui/utils/generateTableDataFromCheckpointsData.tsx

@@ -9,6 +9,7 @@ import { checkpointSequenceToLink, checkpointToLink } from '~/components';
 interface CheckpointData {
     digest: TableCellProps;
     time: TableCellProps;
+    transactions: TableCellProps;
     sequenceNumber: TableCellProps;
     transactionBlockCount: TableCellProps;
 }
@@ -34,6 +35,10 @@ export function generateTableDataFromCheckpointsData(results: CheckpointPage): C
                     to: checkpointToLink({ digest: checkpoint.digest }),
                 },
                 time: { type: TableCellType.Text, label: checkpoint.timestampMs },
+                transactions: {
+                    type: TableCellType.Text,
+                    label: checkpoint.networkTotalTransactions,
+                },
                 sequenceNumber: {
                     type: TableCellType.Link,
                     label: checkpoint.sequenceNumber,
@@ -53,6 +58,10 @@ export function generateTableDataFromCheckpointsData(results: CheckpointPage): C
                 header: 'Sequence Number',
                 accessorKey: 'sequenceNumber',
             },
+            {
+                header: 'Transactions',
+                accessorKey: 'transactions',
+            },
             {
                 header: 'Time',
                 accessorKey: 'time',

apps/explorer/src/pages/epochs/EpochDetail.tsx

@@ -7,20 +7,17 @@ import { useIotaClientQuery } from '@iota/dapp-kit';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { LoadingIndicator } from '@iota/ui';
 import { useQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import {
+    ButtonSegment,
+    ButtonSegmentType,
+    SegmentedButton,
+    SegmentedButtonType,
+} from '@iota/apps-ui-kit';
 
 import { CheckpointsTable, PageLayout } from '~/components';
-import {
-    Banner,
-    Stats,
-    TableCard,
-    Tabs,
-    TabsContent,
-    TabsList,
-    TabsTrigger,
-    type StatsProps,
-} from '~/components/ui';
+import { Banner, Stats, type StatsProps, TableCard } from '~/components/ui';
 import { useEnhancedRpcClient } from '~/hooks/useEnhancedRpc';
 import { getEpochStorageFundFlow, getSupplyChangeAfterEpochEnd } from '~/lib/utils';
 import { validatorsTableData } from '../validators/Validators';
@@ -50,7 +47,13 @@ function IotaStats({
     );
 }
 
+enum EpochTabs {
+    Checkpoints = 'checkpoints',
+    Validators = 'validators',
+}
+
 export default function EpochDetail() {
+    const [activeTabId, setActiveTabId] = useState(EpochTabs.Checkpoints);
     const { id } = useParams();
     const enhancedRpc = useEnhancedRpcClient();
     const { data: systemState } = useIotaClientQuery('getLatestIotaSystemState');
@@ -155,28 +158,44 @@ export default function EpochDetail() {
                         {isCurrentEpoch ? <ValidatorStatus /> : null}
                     </div>
 
-                    <Tabs size="lg" defaultValue="checkpoints">
-                        <TabsList>
-                            <TabsTrigger value="checkpoints">Checkpoints</TabsTrigger>
-                            <TabsTrigger value="validators">Participating Validators</TabsTrigger>
-                        </TabsList>
-                        <TabsContent value="checkpoints">
-                            <CheckpointsTable
-                                initialCursor={initialCursorPlusOne}
-                                maxCursor={epochData.firstCheckpointId}
-                                initialLimit={20}
-                            />
-                        </TabsContent>
-                        <TabsContent value="validators">
-                            {validatorsTable ? (
+                    <div className="rounded-xl bg-white">
+                        <div className="relative">
+                            <div className="border-shader-inverte-dark-8 absolute bottom-0 left-0 z-0 h-[1px] w-full border-b" />
+                            <SegmentedButton
+                                type={SegmentedButtonType.Transparent}
+                                shape={ButtonSegmentType.Underlined}
+                            >
+                                <ButtonSegment
+                                    type={ButtonSegmentType.Underlined}
+                                    label="Checkpoints"
+                                    selected={activeTabId === EpochTabs.Checkpoints}
+                                    onClick={() => setActiveTabId(EpochTabs.Checkpoints)}
+                                />
+                                <ButtonSegment
+                                    type={ButtonSegmentType.Underlined}
+                                    label="Participating Validators"
+                                    selected={activeTabId === EpochTabs.Validators}
+                                    onClick={() => setActiveTabId(EpochTabs.Validators)}
+                                />
+                            </SegmentedButton>
+                        </div>
+                        <div className="px-lg py-md">
+                            {activeTabId === EpochTabs.Checkpoints ? (
+                                <CheckpointsTable
+                                    initialCursor={initialCursorPlusOne}
+                                    maxCursor={epochData.firstCheckpointId}
+                                    initialLimit={20}
+                                />
+                            ) : null}
+                            {activeTabId === EpochTabs.Validators && validatorsTable ? (
                                 <TableCard
                                     data={validatorsTable.data}
                                     columns={validatorsTable.columns}
                                     sortTable
                                 />
                             ) : null}
-                        </TabsContent>
-                    </Tabs>
+                        </div>
+                    </div>
                 </div>
             }
         />

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>

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}