From b3126dc0ad800f3c4af8da0f0c910f8d018a6596 Mon Sep 17 00:00:00 2001
From: Jibz1 <godwinjibs@gmail.com>
Date: Fri, 15 Jul 2022 14:30:47 -0400
Subject: [PATCH] explorer landing page update (#3217)

* explorer landing page update

* rm the temp pagination code from RecentTxCard component

* comment update

* fixed pagination, added pag cont number and rm unnessary var

* style update

* lint

* error msg display added on tx result page

* rm background from module code view

* update rm codeview background offwhite color
---
 .../components/longtext/Longtext.module.css   |   2 +-
 .../pagination/Pagination.module.css          |  25 +++-
 .../src/components/pagination/Pagination.tsx  |  81 ++++++++-----
 .../src/components/table/TableCard.module.css |  20 ++-
 .../src/components/tabs/Tabs.module.css       |   8 +-
 .../transaction-card/RecentTxCard.module.css  |  12 +-
 .../transaction-card/RecentTxCard.tsx         | 114 ++++++++++++------
 .../client/src/pages/config/AppRoutes.tsx     |   5 +-
 explorer/client/src/pages/home/Home.tsx       |   3 -
 .../transaction-result/TransactionView.tsx    |   1 +
 .../TxModuleView.module.css                   |   2 +
 .../TxResultHeader.module.css                 |  12 +-
 .../transaction-result/TxResultHeader.tsx     |  23 +++-
 .../transactions/Transactions.module.css      |  11 ++
 .../src/pages/transactions/Transactions.tsx   |  95 +++++++++++++++
 15 files changed, 325 insertions(+), 89 deletions(-)
 create mode 100644 explorer/client/src/pages/transactions/Transactions.module.css
 create mode 100644 explorer/client/src/pages/transactions/Transactions.tsx

diff --git a/explorer/client/src/components/longtext/Longtext.module.css b/explorer/client/src/components/longtext/Longtext.module.css
index 28de5fab7ad49..5521dbc9aa627 100644
--- a/explorer/client/src/components/longtext/Longtext.module.css
+++ b/explorer/client/src/components/longtext/Longtext.module.css
@@ -8,5 +8,5 @@
 
 .longtext,
 .longtext > a {
-    @apply no-underline text-sky-600 hover:text-sky-900 cursor-pointer break-all;
+    @apply no-underline text-sui-dark hover:text-[#1F6493] cursor-pointer break-all;
 }
diff --git a/explorer/client/src/components/pagination/Pagination.module.css b/explorer/client/src/components/pagination/Pagination.module.css
index 5e89837536b4e..a66bbc69b4d15 100644
--- a/explorer/client/src/components/pagination/Pagination.module.css
+++ b/explorer/client/src/components/pagination/Pagination.module.css
@@ -1,22 +1,35 @@
 .pagination {
-    @apply flex flex-row items-center justify-center list-none;
+    @apply flex flex-row items-center justify-start list-none w-full;
 }
 
 .pagination ul {
-    @apply flex flex-row items-center justify-center list-none pl-0;
+    @apply flex flex-row items-center justify-center list-none  p-0 m-0;
 }
 
 .pagination ul li {
-    @apply mr-2;
+    @apply mr-2 hidden md:block;
 }
 
 .pagination ul li button {
-    @apply bg-gray-200 hover:bg-gray-300 focus:bg-gray-300 text-gray-800 hover:text-gray-800 focus:text-gray-800 font-medium py-2 px-4 rounded-none border-0 cursor-pointer 
-     md:pr-3  md:pl-3  pr-1.5  pl-1.5;
+    @apply text-gray-600 hover:text-gray-800 focus:text-gray-800 font-medium py-2 px-4 cursor-pointer 
+     md:pr-3  md:pl-3  pr-3  pl-3 border-[1px] rounded-[6px] border-white bg-[#FFFFFF] hover:bg-[#F4FBFF];
 
+    border: 1px solid #e9eaeb;
     transition: all 0.4s ease;
 }
 
+.arrow {
+    @apply block !important;
+}
+
 .activepag {
-    @apply bg-sui text-white !important;
+    @apply bg-[#F4FBFF] text-sui-dark border-sui-dark !important;
+}
+
+.paginationleft svg {
+    transform: rotate(180deg);
+}
+
+.paginationdot:hover {
+    @apply bg-[#FFFFFF] hover:bg-[#FFFFFF];
 }
diff --git a/explorer/client/src/components/pagination/Pagination.tsx b/explorer/client/src/components/pagination/Pagination.tsx
index a7e1b9da0457a..9412a03e62f2f 100644
--- a/explorer/client/src/components/pagination/Pagination.tsx
+++ b/explorer/client/src/components/pagination/Pagination.tsx
@@ -1,8 +1,12 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
+
+import cl from 'classnames';
 import { useState, useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
+import { ReactComponent as ContentForwardArrowDark } from '../../assets/SVGIcons/forward-arrow-dark.svg';
+
 import styles from './Pagination.module.css';
 function generatePaginationArr(
     startAt: number,
@@ -10,7 +14,7 @@ function generatePaginationArr(
     totalItems: number
 ) {
     // number of list items to show before truncating
-    const range: number = 4;
+    const range: number = 2;
     const max = Math.ceil((totalItems - 1) / itemsPerPage);
     const maxRange = (Math.floor(startAt / range) + 1) * range;
     // set the min range to be the max range minus the range if it is less than the max - range
@@ -56,26 +60,35 @@ function Pagination({
             <nav className={styles.pagination}>
                 <ul>
                     {pageIndex > 1 && (
-                        <li className="page-item">
+                        <li className={styles.arrow}>
                             <button
-                                className={
-                                    pageIndex === 1 ? styles.activepag : ''
-                                }
+                                className={cl([
+                                    pageIndex === 1 ? styles.activepag : '',
+                                    styles.paginationleft,
+                                ])}
                                 onClick={changePage(pageIndex - 1)}
                             >
-                                &larr;
+                                <ContentForwardArrowDark />
                             </button>
                         </li>
                     )}
                     {pageIndex > pagiData.range - 1 && (
+                        <>
+                            <li className="page-item">
+                                <button
+                                    className="page-link"
+                                    onClick={changePage(1)}
+                                >
+                                    1
+                                </button>
+                            </li>
+                        </>
+                    )}
+                    {pageIndex > pagiData.range && (
                         <li className="page-item">
-                            <button
-                                className="page-link"
-                                onClick={changePage(1)}
-                            >
-                                1
+                            <button className={styles.paginationdot}>
+                                ...
                             </button>
-                            {' ... '}
                         </li>
                     )}
                     {pagiData.listItems.map((itm: any, index: number) => (
@@ -92,27 +105,41 @@ function Pagination({
                     ))}
 
                     {pageIndex < pagiData.max - 1 && (
-                        <li className="page-item">
-                            {' ... '}
-                            <button
-                                className={
-                                    pageIndex === pagiData.max
-                                        ? styles.activepag
-                                        : ''
-                                }
-                                onClick={changePage(pagiData.max)}
-                            >
-                                {pagiData.max}
-                            </button>
-                        </li>
+                        <>
+                            <li className="page-item">
+                                <button
+                                    className={cl(
+                                        pageIndex === pagiData.max
+                                            ? styles.activepag
+                                            : '',
+                                        styles.paginationdot
+                                    )}
+                                >
+                                    ...
+                                </button>
+                            </li>
+
+                            <li className="page-item">
+                                <button
+                                    className={
+                                        pageIndex === pagiData.max
+                                            ? styles.activepag
+                                            : ''
+                                    }
+                                    onClick={changePage(pagiData.max)}
+                                >
+                                    {pagiData.max}
+                                </button>
+                            </li>
+                        </>
                     )}
                     {pageIndex < pagiData.max && (
-                        <li className="page-item">
+                        <li className={styles.arrow}>
                             <button
                                 className="page-link"
                                 onClick={changePage(pageIndex + 1)}
                             >
-                                →
+                                <ContentForwardArrowDark />
                             </button>
                         </li>
                     )}
diff --git a/explorer/client/src/components/table/TableCard.module.css b/explorer/client/src/components/table/TableCard.module.css
index 31e52a038da58..756eafa836460 100644
--- a/explorer/client/src/components/table/TableCard.module.css
+++ b/explorer/client/src/components/table/TableCard.module.css
@@ -9,15 +9,23 @@
 }
 
 .table th {
-    @apply text-left font-normal uppercase text-[#767A81] text-xs;
+    @apply text-left font-semibold uppercase text-[#767A81] text-xs;
 }
 
 .table td {
-    @apply pr-5 text-[#4E555D];
+    @apply pr-5 text-[#767A81] text-sm;
 }
 
 .table tbody tr {
-    @apply space-y-10 mt-10;
+    @apply space-y-10 mt-10 hover:bg-[#6fbcf014];
+}
+
+td:nth-child(1) {
+    @apply text-xs;
+}
+
+.table tbody tr:hover td {
+    @apply text-black;
 }
 
 .addresses {
@@ -29,5 +37,9 @@
 }
 
 .tablespacing {
-    @apply pb-1 pt-1;
+    @apply pb-2 pt-2;
+}
+
+td a {
+    @apply font-mono text-[#4E555D];
 }
diff --git a/explorer/client/src/components/tabs/Tabs.module.css b/explorer/client/src/components/tabs/Tabs.module.css
index a81d96b428264..dbc0c83e133df 100644
--- a/explorer/client/src/components/tabs/Tabs.module.css
+++ b/explorer/client/src/components/tabs/Tabs.module.css
@@ -22,7 +22,7 @@
 }
 
 .tabsfooter {
-    @apply flex justify-between text-xs text-gray-500 capitalize items-center p-1;
+    @apply flex justify-between text-xs text-gray-500 capitalize items-center p-0;
 }
 
 .tabsfooter a {
@@ -30,5 +30,9 @@
 }
 
 .stats {
-    @apply ml-auto;
+    @apply ml-auto w-full text-right;
+}
+
+.tabsfooter nav {
+    @apply flex flex-row items-center;
 }
diff --git a/explorer/client/src/components/transaction-card/RecentTxCard.module.css b/explorer/client/src/components/transaction-card/RecentTxCard.module.css
index 7dea99b7e5022..8a7dc141ad532 100644
--- a/explorer/client/src/components/transaction-card/RecentTxCard.module.css
+++ b/explorer/client/src/components/transaction-card/RecentTxCard.module.css
@@ -75,5 +75,15 @@ div.txadd {
 }
 
 .moretxbtn {
-    @apply text-left bg-transparent cursor-pointer border-0 pl-0 pr-0 text-[#636870]  hover:text-gray-400 transition-colors duration-200 ease-in-out font-normal text-sm;
+    @apply text-left bg-transparent cursor-pointer border-0 pl-0 pr-0 text-sui-grey-90  hover:text-gray-400 transition-colors duration-200 ease-in-out font-normal text-sm w-full;
+
+    text-decoration: none;
+}
+
+.txlatestresults td a {
+    @apply font-mono text-[#4E555D];
+}
+
+.txlatestresults td:nth-child(1) {
+    @apply text-xs;
 }
diff --git a/explorer/client/src/components/transaction-card/RecentTxCard.tsx b/explorer/client/src/components/transaction-card/RecentTxCard.tsx
index 5b02afa2145f6..002628ba6c1c7 100644
--- a/explorer/client/src/components/transaction-card/RecentTxCard.tsx
+++ b/explorer/client/src/components/transaction-card/RecentTxCard.tsx
@@ -1,9 +1,9 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-// import cl from 'classnames';
-import { useEffect, useState, useContext, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import cl from 'classnames';
+import { useEffect, useState, useContext } from 'react';
+import { useSearchParams, Link } from 'react-router-dom';
 
 import { ReactComponent as ContentForwardArrowDark } from '../../assets/SVGIcons/forward-arrow-dark.svg';
 import TableCard from '../../components/table/TableCard';
@@ -22,6 +22,7 @@ import { getAllMockTransaction } from '../../utils/static/searchUtil';
 import { truncate } from '../../utils/stringUtils';
 import { timeAgo } from '../../utils/timeUtils';
 import ErrorResult from '../error-result/ErrorResult';
+import Pagination from '../pagination/Pagination';
 
 import type {
     GetTxnDigestsResponse,
@@ -33,15 +34,24 @@ import styles from './RecentTxCard.module.css';
 
 const TRUNCATE_LENGTH = 10;
 const NUMBER_OF_TX_PER_PAGE = 15;
+const DEFAULT_PAGI_TYPE = 'more button';
+
+type PaginationType = 'more button' | 'pagination' | 'none';
 
 const initState: {
     loadState: string;
     latestTx: TxnData[];
     totalTxcount?: number;
+    txPerPage?: number;
+    truncateLength?: number;
+    paginationtype?: PaginationType;
 } = {
     loadState: 'pending',
     latestTx: [],
     totalTxcount: 0,
+    txPerPage: NUMBER_OF_TX_PER_PAGE,
+    truncateLength: TRUNCATE_LENGTH,
+    paginationtype: 'pagination',
 };
 
 type TxnData = {
@@ -103,26 +113,24 @@ async function getRecentTransactions(
     }
 }
 
+// Pass Props txPerPage, truncateLength, paginationtype to the component so that this component can be used for both the Home Page and trnasaction page
+// TODO - rework this - gets confusing
 function LatestTxView({
     results,
 }: {
-    results: { loadState: string; latestTx: TxnData[]; totalTxcount?: number };
+    results: {
+        loadState: string;
+        latestTx: TxnData[];
+        totalTxcount?: number;
+        txPerPage?: number;
+        truncateLength?: number;
+        paginationtype?: PaginationType;
+    };
 }) {
-    // This is temporary, pagination component already does this
     const totalCount = results.totalTxcount || 1;
-    const [searchParams, setSearchParams] = useSearchParams();
-    const pageParam = parseInt(searchParams.get('p') || '1', 10);
-    const [showNextPage, setShowNextPage] = useState(
-        NUMBER_OF_TX_PER_PAGE < totalCount
-    );
-
-    const changePage = useCallback(() => {
-        const nextpage = pageParam + (showNextPage ? 1 : 0);
-        setSearchParams({ p: nextpage.toString() });
-        setShowNextPage(
-            Math.ceil(NUMBER_OF_TX_PER_PAGE * nextpage) < totalCount
-        );
-    }, [pageParam, totalCount, showNextPage, setSearchParams]);
+    const txPerPage = results.txPerPage || NUMBER_OF_TX_PER_PAGE;
+    const truncateLength = results.truncateLength || TRUNCATE_LENGTH;
+    const paginationtype = results.paginationtype || DEFAULT_PAGI_TYPE;
 
     //TODO update initial state and match the latestTx table data
     const defaultActiveTab = 0;
@@ -132,7 +140,7 @@ function LatestTxView({
             transactionId: [
                 {
                     url: txn.txId,
-                    name: truncate(txn.txId, TRUNCATE_LENGTH),
+                    name: truncate(txn.txId, truncateLength),
                     category: 'transactions',
                     isLink: true,
                     copy: false,
@@ -141,7 +149,7 @@ function LatestTxView({
             addresses: [
                 {
                     url: txn.From,
-                    name: truncate(txn.From, TRUNCATE_LENGTH),
+                    name: truncate(txn.From, truncateLength),
                     category: 'addresses',
                     isLink: true,
                     copy: false,
@@ -150,7 +158,7 @@ function LatestTxView({
                     ? [
                           {
                               url: txn.To,
-                              name: truncate(txn.To, TRUNCATE_LENGTH),
+                              name: truncate(txn.To, truncateLength),
                               category: 'addresses',
                               isLink: true,
                               copy: false,
@@ -167,7 +175,7 @@ function LatestTxView({
         })),
         columns: [
             {
-                headerLabel: 'Date',
+                headerLabel: 'Time',
                 accessorKey: 'date',
             },
             {
@@ -175,7 +183,7 @@ function LatestTxView({
                 accessorKey: 'txTypes',
             },
             {
-                headerLabel: 'Transactions ID',
+                headerLabel: 'Transaction ID',
                 accessorKey: 'transactionId',
             },
             {
@@ -191,23 +199,28 @@ function LatestTxView({
     const tabsFooter = {
         stats: {
             count: totalCount || 0,
-            stats_text: 'total transactions',
+            stats_text: 'Total transactions',
         },
     };
+
     return (
-        <div className={styles.txlatestresults}>
+        <div className={cl(styles.txlatestresults, styles[paginationtype])}>
             <Tabs selected={defaultActiveTab}>
                 <div title="Transactions">
                     <TableCard tabledata={recentTx} />
                     <TabFooter stats={tabsFooter.stats}>
-                        {showNextPage ? (
-                            <button
-                                type="button"
-                                className={styles.moretxbtn}
-                                onClick={changePage}
-                            >
-                                More Transactions <ContentForwardArrowDark />
-                            </button>
+                        {paginationtype !== 'none' ? (
+                            paginationtype === 'pagination' ? (
+                                <Pagination
+                                    totalTxCount={totalCount}
+                                    txNum={txPerPage}
+                                />
+                            ) : (
+                                <Link className={styles.moretxbtn} to={`/`}>
+                                    More Transactions{' '}
+                                    <ContentForwardArrowDark />
+                                </Link>
+                            )
                         ) : (
                             <></>
                         )}
@@ -236,17 +249,29 @@ function LatestTxCardStatic() {
     );
 }
 
-function LatestTxCardAPI({ count }: { count: number }) {
+type RecentTx = {
+    count?: number;
+    paginationtype?: PaginationType;
+    txPerPage?: number;
+    truncateLength?: number;
+};
+
+function LatestTxCardAPI({ ...data }: RecentTx) {
+    const {
+        count = 0,
+        txPerPage = NUMBER_OF_TX_PER_PAGE,
+        truncateLength = TRUNCATE_LENGTH,
+        paginationtype = DEFAULT_PAGI_TYPE,
+    } = data;
     const [isLoaded, setIsLoaded] = useState(false);
     const [results, setResults] = useState(initState);
     const [network] = useContext(NetworkContext);
     const [searchParams] = useSearchParams();
-    const [txNumPerPage] = useState(NUMBER_OF_TX_PER_PAGE);
 
     useEffect(() => {
         let isMounted = true;
         const pagedNum: number = parseInt(searchParams.get('p') || '1', 10);
-        getRecentTransactions(network, count, txNumPerPage, pagedNum)
+        getRecentTransactions(network, count, txPerPage, pagedNum)
             .then(async (resp: any) => {
                 if (isMounted) {
                     setIsLoaded(true);
@@ -255,6 +280,9 @@ function LatestTxCardAPI({ count }: { count: number }) {
                     loadState: 'loaded',
                     latestTx: resp,
                     totalTxcount: count,
+                    txPerPage: txPerPage,
+                    truncateLength: truncateLength,
+                    paginationtype,
                 });
             })
             .catch((err) => {
@@ -272,7 +300,14 @@ function LatestTxCardAPI({ count }: { count: number }) {
         return () => {
             isMounted = false;
         };
-    }, [count, network, searchParams, txNumPerPage]);
+    }, [
+        count,
+        network,
+        paginationtype,
+        searchParams,
+        truncateLength,
+        txPerPage,
+    ]);
 
     if (results.loadState === 'pending') {
         return (
@@ -302,7 +337,8 @@ function LatestTxCardAPI({ count }: { count: number }) {
     );
 }
 
-const LatestTxCard = ({ count }: { count: number }) =>
-    IS_STATIC_ENV ? <LatestTxCardStatic /> : <LatestTxCardAPI count={count} />;
+// Provide option to show pagination or not, so we can reuse this component for both homepage and the transactions page
+const LatestTxCard = ({ ...data }: RecentTx) =>
+    IS_STATIC_ENV ? <LatestTxCardStatic /> : <LatestTxCardAPI {...data} />;
 
 export default LatestTxCard;
diff --git a/explorer/client/src/pages/config/AppRoutes.tsx b/explorer/client/src/pages/config/AppRoutes.tsx
index fb5c633eb4ca1..3d2b1cfc67673 100644
--- a/explorer/client/src/pages/config/AppRoutes.tsx
+++ b/explorer/client/src/pages/config/AppRoutes.tsx
@@ -9,11 +9,14 @@ import { ObjectResult } from '../object-result/ObjectResult';
 import SearchResult from '../search-result/SearchResult';
 import SearchError from '../searcherror/SearchError';
 import TransactionResult from '../transaction-result/TransactionResult';
+import Transactions from '../transactions/Transactions';
 
+// Temporary use Transactions page as the default page.
 const AppRoutes = () => {
     return (
         <Routes>
-            <Route path="/" element={<Home />} />
+            <Route path="/" element={<Transactions />} />
+            <Route path="/home-other" element={<Home />} />
             <Route path="/objects/:id" element={<ObjectResult />} />
             <Route path="/transactions/:id" element={<TransactionResult />} />
             <Route path="/addresses/:id" element={<AddressResult />} />
diff --git a/explorer/client/src/pages/home/Home.tsx b/explorer/client/src/pages/home/Home.tsx
index a5752d3f250db..f1f9501fc64d0 100644
--- a/explorer/client/src/pages/home/Home.tsx
+++ b/explorer/client/src/pages/home/Home.tsx
@@ -4,9 +4,6 @@ import cl from 'classnames';
 import { useEffect, useState, useContext } from 'react';
 
 import ErrorResult from '../../components/error-result/ErrorResult';
-// import SuiNetworkStats from '../../components/network-stats/SuiNetworkStats';
-// import TopGroupsCard from '../../components/top-groups/TopGroups';
-// import TopValidatorsCard from '../../components/top-validators-card/TopValidatorsCard';
 import LastestTxCard from '../../components/transaction-card/RecentTxCard';
 import { NetworkContext } from '../../context';
 import {
diff --git a/explorer/client/src/pages/transaction-result/TransactionView.tsx b/explorer/client/src/pages/transaction-result/TransactionView.tsx
index 2f51a9393fb74..c96dbce11612f 100644
--- a/explorer/client/src/pages/transaction-result/TransactionView.tsx
+++ b/explorer/client/src/pages/transaction-result/TransactionView.tsx
@@ -201,6 +201,7 @@ function TransactionView({ txdata }: { txdata: DataType }) {
         txId: txdata.txId,
         status: txdata.status,
         txKindName: txKindName,
+        ...(txdata.txError ? { error: txdata.txError } : {}),
     };
 
     const transactionSignatureData = {
diff --git a/explorer/client/src/pages/transaction-result/TxModuleView.module.css b/explorer/client/src/pages/transaction-result/TxModuleView.module.css
index 963ca4afaeeb4..3e6334dba3a2f 100644
--- a/explorer/client/src/pages/transaction-result/TxModuleView.module.css
+++ b/explorer/client/src/pages/transaction-result/TxModuleView.module.css
@@ -36,6 +36,8 @@ section .codeview {
 
 section .codeview pre {
     @apply m-0 p-0;
+
+    background: transparent;
 }
 
 .moretxbtn {
diff --git a/explorer/client/src/pages/transaction-result/TxResultHeader.module.css b/explorer/client/src/pages/transaction-result/TxResultHeader.module.css
index 2f7af9671a500..66f2bdf6460af 100644
--- a/explorer/client/src/pages/transaction-result/TxResultHeader.module.css
+++ b/explorer/client/src/pages/transaction-result/TxResultHeader.module.css
@@ -17,7 +17,7 @@
 }
 
 .txid {
-    @apply text-offblack font-[600] text-lg md:text-2xl font-mono break-all block md:flex items-center;
+    @apply text-offblack font-[600] text-lg md:text-2xl font-mono break-all block  items-center;
 }
 
 .txresulttype {
@@ -29,5 +29,13 @@
 }
 
 .failed {
-    @apply bg-[#FBE9E7] capitalize text-sm font-sans text-[#D0021B] font-normal p-0 pr-3 pl-3 rounded-[10px] inline-block m-0 md:ml-2 md:mr-2;
+    @apply bg-[#EB5A291A] capitalize text-sm font-sans text-[#B94118] font-normal p-0 pr-3 pl-3 rounded-[10px] inline-block m-0 md:ml-2 md:mr-2;
+}
+
+.longtext {
+    @apply bg-transparent border-0 font-sans text-sm text-[#1F6493] font-[500] cursor-pointer hover:text-sui-grey-80;
+}
+
+.error {
+    @apply w-full rounded-none m-0 text-sm p-1 pl-2 pr-2 font-normal mt-2 w-fit md:w-full;
 }
diff --git a/explorer/client/src/pages/transaction-result/TxResultHeader.tsx b/explorer/client/src/pages/transaction-result/TxResultHeader.tsx
index 51a7be77a9a75..85715ce60f6ea 100644
--- a/explorer/client/src/pages/transaction-result/TxResultHeader.tsx
+++ b/explorer/client/src/pages/transaction-result/TxResultHeader.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 import cl from 'classnames';
-import { Link } from 'react-router-dom';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { ReactComponent as CallTypeIcon } from '../../assets/SVGIcons/Call.svg';
 import { ReactComponent as PublishTypeIcon } from '../../assets/SVGIcons/Publish.svg';
@@ -22,6 +23,7 @@ type TxResultState = {
     txId: string;
     status: ExecutionStatusType;
     txKindName: TransactionKindName;
+    error?: string;
 };
 
 function TxAddressHeader({ data }: { data: TxResultState }) {
@@ -39,12 +41,16 @@ function TxAddressHeader({ data }: { data: TxResultState }) {
     const statusName = data.status === 'success' ? 'success' : 'failed';
     const TxResultStatus = TxStatus[statusName];
 
+    const navigate = useNavigate();
+
+    const previousPage = useCallback(() => navigate(-1), [navigate]);
+
     return (
         <div className={styles.txheader}>
             <div className={styles.txback}>
-                <Link className={styles.longtext} to={`/`}>
+                <button className={styles.longtext} onClick={previousPage}>
                     <ContentBackArrowDark /> Go Back
-                </Link>
+                </button>
             </div>
             <div className={styles.txtypes}>
                 <Icon /> {TxKindName}
@@ -65,6 +71,17 @@ function TxAddressHeader({ data }: { data: TxResultState }) {
                         {' '}
                         <TxResultStatus /> {statusName}
                     </div>
+                    {data.error && (
+                        <div
+                            className={cl([
+                                styles.txresulttype,
+                                styles.failed,
+                                styles.error,
+                            ])}
+                        >
+                            {data.error}
+                        </div>
+                    )}
                 </div>
             </div>
         </div>
diff --git a/explorer/client/src/pages/transactions/Transactions.module.css b/explorer/client/src/pages/transactions/Transactions.module.css
new file mode 100644
index 0000000000000..771db175bf465
--- /dev/null
+++ b/explorer/client/src/pages/transactions/Transactions.module.css
@@ -0,0 +1,11 @@
+div.container {
+    @apply mx-auto;
+}
+
+.title {
+    @apply text-2xl font-[700];
+}
+
+.container td a {
+    @apply text-sui-grey-85;
+}
diff --git a/explorer/client/src/pages/transactions/Transactions.tsx b/explorer/client/src/pages/transactions/Transactions.tsx
new file mode 100644
index 0000000000000..d367b0421b6da
--- /dev/null
+++ b/explorer/client/src/pages/transactions/Transactions.tsx
@@ -0,0 +1,95 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useState, useContext } from 'react';
+
+import ErrorResult from '../../components/error-result/ErrorResult';
+import LastestTxCard from '../../components/transaction-card/RecentTxCard';
+import { NetworkContext } from '../../context';
+import {
+    DefaultRpcClient as rpc,
+    type Network,
+} from '../../utils/api/DefaultRpcClient';
+import { IS_STATIC_ENV } from '../../utils/envUtil';
+
+import styles from './Transactions.module.css';
+
+const initState = { count: 0, loadState: 'pending' };
+const TXN_PER_PAGE = 20;
+const TRUNCATE_LENGTH = 45;
+// Moved this method to the Home.tsx file so getTotalTransactionNumber can be called once across the entire component.
+async function getTransactionCount(network: Network | string): Promise<number> {
+    return rpc(network).getTotalTransactionNumber();
+}
+
+function TransactionsStatic() {
+    const [count] = useState(500);
+    return (
+        <div data-testid="home-page" id="home" className={styles.home}>
+            <LastestTxCard count={count} />
+        </div>
+    );
+}
+
+function TransactionsAPI() {
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [results, setResults] = useState(initState);
+    const [network] = useContext(NetworkContext);
+    useEffect(() => {
+        let isMounted = true;
+        getTransactionCount(network)
+            .then((resp: number) => {
+                if (isMounted) {
+                    setIsLoaded(true);
+                }
+                setResults({
+                    loadState: 'loaded',
+                    count: resp,
+                });
+            })
+            .catch((err) => {
+                setResults({
+                    ...initState,
+                    loadState: 'fail',
+                });
+                setIsLoaded(false);
+            });
+
+        return () => {
+            isMounted = false;
+        };
+    }, [network]);
+
+    if (results.loadState === 'pending') {
+        return <div className={styles.gray}>loading...</div>;
+    }
+
+    if (!isLoaded && results.loadState === 'fail') {
+        return (
+            <ErrorResult
+                id=""
+                errorMsg="Error getting total transaction count"
+            />
+        );
+    }
+    return (
+        <div
+            data-testid="transaction-page"
+            id="transaction"
+            className={styles.container}
+        >
+            <h1 className={styles.title}>Transactions</h1>
+            <LastestTxCard
+                count={results.count}
+                txPerPage={TXN_PER_PAGE}
+                paginationtype="pagination"
+                truncateLength={TRUNCATE_LENGTH}
+            />
+        </div>
+    );
+}
+
+const Transactions = () =>
+    IS_STATIC_ENV ? <TransactionsStatic /> : <TransactionsAPI />;
+
+export default Transactions;