[explorer] Update transaction to use new block terminology (MystenLab…

…s#9958) ## Description This makes some changes to the explorer to use new terminology. ## Test Plan Tests should still pass
ritic89 · Mar 28, 2023 · 5abb611 · 5abb611
1 parent 76c1ef9
commit 5abb611
Show file tree

Hide file tree

Showing 22 changed files with 102 additions and 122 deletions.
diff --git a/apps/explorer/src/components/Activity/index.tsx b/apps/explorer/src/components/Activity/index.tsx
@@ -11,6 +11,7 @@ import { PlayPause } from '~/ui/PlayPause';
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '~/ui/Tabs';
 
 type Props = {
+    initialTab?: string | null;
     initialLimit: number;
     disablePagination?: boolean;
 };
@@ -19,7 +20,14 @@ const AUTO_REFRESH_ID = 'auto-refresh';
 const REFETCH_INTERVAL_SECONDS = 10;
 const REFETCH_INTERVAL = REFETCH_INTERVAL_SECONDS * 1000;
 
-export function Activity({ initialLimit, disablePagination }: Props) {
+export function Activity({
+    initialTab,
+    initialLimit,
+    disablePagination,
+}: Props) {
+    const [selectedIndex, setSelectedIndex] = useState(
+        initialTab === 'checkpoints' ? 1 : 0
+    );
     const [paused, setPaused] = useState(false);
 
     const handlePauseChange = () => {
@@ -39,10 +47,14 @@ export function Activity({ initialLimit, disablePagination }: Props) {
 
     return (
         <div>
-            <TabGroup size="lg">
+            <TabGroup
+                size="lg"
+                selectedIndex={selectedIndex}
+                onChange={setSelectedIndex}
+            >
                 <div className="relative">
                     <TabList>
-                        <Tab>Transactions</Tab>
+                        <Tab>Transaction Blocks</Tab>
                         <Tab>Checkpoints</Tab>
                     </TabList>
 

diff --git a/apps/explorer/src/components/HomeMetrics/index.tsx b/apps/explorer/src/components/HomeMetrics/index.tsx
@@ -101,8 +101,8 @@ export function HomeMetrics() {
                         {formatAmount(countsData?.objects)}
                     </StatsWrapper>
                     <StatsWrapper
-                        label="Transactions"
-                        tooltip="Total transactions counter (updates every one min)"
+                        label="Transaction Blocks"
+                        tooltip="Total transaction blocks counter (updates every one min)"
                     >
                         {formatAmount(countsData?.transactions)}
                     </StatsWrapper>

diff --git a/apps/explorer/src/components/Table/TableFooter.tsx b/apps/explorer/src/components/Table/TableFooter.tsx
@@ -20,6 +20,7 @@ interface Props {
     data?: PaginationResponse<any>;
     limit: number;
     onLimitChange(value: number): void;
+    href: string;
 }
 
 export function TableFooter({
@@ -30,12 +31,13 @@ export function TableFooter({
     count,
     limit,
     onLimitChange,
+    href,
 }: Props) {
     return (
         <div className="flex items-center justify-between">
             {disablePagination ? (
                 <>
-                    <Link to="/transactions" after={<ArrowRight12 />}>
+                    <Link to={href} after={<ArrowRight12 />}>
                         More {label}
                     </Link>
                     <Text variant="body/medium" color="steel-dark">

diff --git a/apps/explorer/src/components/module/module-functions-interaction/FunctionExecutionResult.tsx b/apps/explorer/src/components/module/module-functions-interaction/FunctionExecutionResult.tsx
@@ -48,13 +48,13 @@ export function FunctionExecutionResult({
         >
             <div className="space-y-4 text-bodySmall">
                 <LinkGroup
-                    title="Transaction ID"
+                    title="Digest"
                     links={
                         result
                             ? [
                                   {
                                       text: getTransactionDigest(result),
-                                      to: `/transaction/${encodeURIComponent(
+                                      to: `/txblock/${encodeURIComponent(
                                           getTransactionDigest(result)
                                       )}`,
                                   },

diff --git a/apps/explorer/src/components/transactions/TransactionsForAddress.tsx b/apps/explorer/src/components/transactions/TransactionsForAddress.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useRpcClient } from '@mysten/core';
+import { type SuiTransactionBlockResponse } from '@mysten/sui.js';
 import { useQuery } from '@tanstack/react-query';
 
 import { genTableDataFromTxData } from './TxCardUtils';
@@ -41,9 +42,18 @@ export function TransactionsForAddress({ address, type }: Props) {
                 )
             );
 
-            return [...results[0].data, ...results[1].data].sort(
-                (a, b) => (b.timestampMs ?? 0) - (a.timestampMs ?? 0)
-            );
+            const inserted = new Map();
+            const uniqueList: SuiTransactionBlockResponse[] = [];
+
+            [...results[0].data, ...results[1].data]
+                .sort((a, b) => (b.timestampMs ?? 0) - (a.timestampMs ?? 0))
+                .forEach((txb) => {
+                    if (inserted.get(txb.digest)) return;
+                    uniqueList.push(txb);
+                    inserted.set(txb.digest, true);
+                });
+
+            return uniqueList;
         }
     );
 

diff --git a/apps/explorer/src/components/transactions/TxCardUtils.tsx b/apps/explorer/src/components/transactions/TxCardUtils.tsx
@@ -91,7 +91,7 @@ export const genTableDataFromTxData = (
                     <TxTimeType timestamp={transaction.timestampMs} />
                 </TxTableCol>
             ),
-            transactionId: (
+            digest: (
                 <TxTableCol isFirstCol isHighlightedOnHover>
                     <TransactionLink
                         digest={transaction.digest}
@@ -124,8 +124,8 @@ export const genTableDataFromTxData = (
     }),
     columns: [
         {
-            header: 'Transaction ID',
-            accessorKey: 'transactionId',
+            header: 'Digest',
+            accessorKey: 'digest',
         },
         {
             header: () => <TxTableHeader label="Sender" />,

diff --git a/apps/explorer/src/components/transactions/index.tsx b/apps/explorer/src/components/transactions/index.tsx
@@ -82,26 +82,21 @@ export function Transactions({
                 <PlaceholderTable
                     rowCount={initialLimit}
                     rowHeight="16px"
-                    colHeadings={[
-                        'Transaction ID',
-                        'Sender',
-                        'Amount',
-                        'Gas',
-                        'Time',
-                    ]}
+                    colHeadings={['Digest', 'Sender', 'Amount', 'Gas', 'Time']}
                     colWidths={['100px', '120px', '204px', '90px', '38px']}
                 />
             )}
 
             <div className="py-3">
                 <TableFooter
-                    label="Transactions"
+                    label="Transaction Blocks"
                     count={Number(countQuery.data)}
                     data={transactionQuery.data}
                     disablePagination={disablePagination}
                     pagination={pagination}
                     limit={limit}
                     onLimitChange={setLimit}
+                    href="/recent"
                 />
             </div>
         </div>

diff --git a/apps/explorer/src/pages/address-result/AddressResult.tsx b/apps/explorer/src/pages/address-result/AddressResult.tsx
@@ -31,7 +31,7 @@ function AddressResult() {
             <div>
                 <div className="border-b border-gray-45 pb-5">
                     <Heading color="gray-90" variant="heading4/semibold">
-                        Transactions
+                        Transaction Blocks
                     </Heading>
                 </div>
                 <ErrorBoundary>

diff --git a/apps/explorer/src/pages/checkpoints/CheckpointsTable.tsx b/apps/explorer/src/pages/checkpoints/CheckpointsTable.tsx
@@ -138,6 +138,7 @@ export function CheckpointsTable({
                     onLimitChange={setLimit}
                     pagination={pagination}
                     disablePagination={disablePagination}
+                    href="/recent?tab=checkpoints"
                 />
             </div>
         </div>

diff --git a/apps/explorer/src/pages/index.tsx b/apps/explorer/src/pages/index.tsx
@@ -14,9 +14,8 @@ import CheckpointDetail from './checkpoints/CheckpointDetail';
 import EpochDetail from './epochs/EpochDetail';
 import Home from './home/Home';
 import { ObjectResult } from './object-result/ObjectResult';
-import SearchError from './searcherror/SearchError';
+import { Recent } from './recent';
 import TransactionResult from './transaction-result/TransactionResult';
-import Transactions from './transactions/Transactions';
 import { ValidatorDetails } from './validator/ValidatorDetails';
 import { ValidatorPageResult } from './validators/Validators';
 
@@ -36,25 +35,32 @@ export const router = sentryCreateBrowserRouter([
         element: <Layout />,
         children: [
             { path: '/', element: <Home /> },
-            { path: 'transactions', element: <Transactions /> },
+            { path: 'recent', element: <Recent /> },
             { path: 'object/:id', element: <ObjectResult /> },
             { path: 'checkpoint/:id', element: <CheckpointDetail /> },
             { path: 'epoch/current', element: <EpochDetail /> },
-            { path: 'transaction/:id', element: <TransactionResult /> },
+            { path: 'txblock/:id', element: <TransactionResult /> },
             { path: 'address/:id', element: <AddressResult /> },
             { path: 'validators', element: <ValidatorPageResult /> },
             { path: 'validator/:id', element: <ValidatorDetails /> },
-            { path: 'error/:category/:id', element: <SearchError /> },
         ],
     },
-    // Support legacy plural routes:
+    {
+        path: '/transactions',
+        element: <Navigate to="/recent" replace />,
+    },
+    // Support legacy routes:
     {
         path: '/objects/:id',
         element: <RedirectWithId base="object" />,
     },
+    {
+        path: '/transaction/:id',
+        element: <RedirectWithId base="txblock" />,
+    },
     {
         path: '/transactions/:id',
-        element: <RedirectWithId base="transaction" />,
+        element: <RedirectWithId base="txblock" />,
     },
     {
         path: '/addresses/:id',

diff --git a/apps/explorer/src/pages/object-result/views/PkgView.tsx b/apps/explorer/src/pages/object-result/views/PkgView.tsx
@@ -106,7 +106,7 @@ function PkgView({ data }: { data: DataType }) {
                     <PkgModulesWrapper id={data.id} modules={properties} />
                 </ErrorBoundary>
                 <div className={styles.txsection}>
-                    <h2 className={styles.header}>Transactions</h2>
+                    <h2 className={styles.header}>Transaction Blocks</h2>
                     <ErrorBoundary>
                         <TransactionsForAddress
                             address={viewedData.id}

diff --git a/apps/explorer/src/pages/object-result/views/TokenView.tsx b/apps/explorer/src/pages/object-result/views/TokenView.tsx
@@ -128,7 +128,7 @@ export function TokenView({ data }: { data: DataType }) {
                                                 {data.version}
                                             </Text>
                                         </DescriptionItem>
-                                        <DescriptionItem title="Last Transaction ID">
+                                        <DescriptionItem title="Last Transaction Block Digest">
                                             <TransactionLink
                                                 digest={data.data.tx_digest!}
                                                 noTruncate
@@ -267,7 +267,7 @@ export function TokenView({ data }: { data: DataType }) {
                 </div>
             </div>
             <div>
-                <h2 className={styles.header}>Transactions</h2>
+                <h2 className={styles.header}>Transaction Blocks</h2>
                 <TransactionsForAddress address={data.id} type="object" />
             </div>
         </div>

diff --git a/...r/src/pages/transactions/Transactions.tsx → apps/explorer/src/pages/recent/index.tsx b/...r/src/pages/transactions/Transactions.tsx → apps/explorer/src/pages/recent/index.tsx
@@ -4,20 +4,25 @@
 import { Activity } from '../../components/Activity';
 import { ErrorBoundary } from '../../components/error-boundary/ErrorBoundary';
 
+import { useSearchParamsMerged } from '~/ui/utils/LinkWithQuery';
+
 const TRANSACTIONS_LIMIT = 20;
 
-function Transactions() {
+export function Recent() {
+    const [searchParams] = useSearchParamsMerged();
+
     return (
         <div
             data-testid="transaction-page"
             id="transaction"
             className="mx-auto"
         >
             <ErrorBoundary>
-                <Activity initialLimit={TRANSACTIONS_LIMIT} />
+                <Activity
+                    initialLimit={TRANSACTIONS_LIMIT}
+                    initialTab={searchParams.get('tab')}
+                />
             </ErrorBoundary>
         </div>
     );
 }
-
-export default Transactions;
diff --git a/apps/explorer/src/pages/searcherror/SearchError.tsx b/apps/explorer/src/pages/searcherror/SearchError.tsx