[explorer] - various small bugfixes (MystenLabs#10818)

## Description 

- adds formatting to amounts in the Epochs table
- ~~fixes a bug for problem epochs without `endOfEpochInfo` causing them
to show as in progress~~ decided to leave this out for now as it would
require an additional rpc call to fix
- fixes pagination for epochs / checkpoints table
- small style tweaks

## Test Plan 

How did you test the new or updated feature?

---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes

apps/explorer/src/components/Table/SuiAmount.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useFormatCoin } from '@mysten/core';
+import { SUI_TYPE_ARG } from '@mysten/sui.js';
+
+import { Text } from '~/ui/Text';
+
+export function SuiAmount({
+    amount,
+}: {
+    amount?: bigint | number | string | null;
+}) {
+    const [formattedAmount, coinType] = useFormatCoin(amount, SUI_TYPE_ARG);
+    if (!amount) return <Text variant="bodySmall/medium">--</Text>;
+
+    return (
+        <div className="leading-1 flex items-end gap-0.5">
+            <Text variant="bodySmall/medium">{formattedAmount}</Text>
+            <Text variant="captionSmall/normal" color="steel-dark">
+                {coinType}
+            </Text>
+        </div>
+    );
+}

apps/explorer/src/components/transactions/TxCardUtils.tsx

@@ -1,49 +1,22 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useFormatCoin } from '@mysten/core';
 import { X12, Dot12 } from '@mysten/icons';
 import {
     getExecutionStatusType,
     getTotalGasUsed,
     getTransactionSender,
     type JsonRpcProvider,
-    SUI_TYPE_ARG,
     type SuiTransactionBlockResponse,
 } from '@mysten/sui.js';
 import clsx from 'clsx';
 import { type ReactNode } from 'react';
 
+import { SuiAmount } from '../Table/SuiAmount';
 import { TxTimeType } from '../tx-time/TxTimeType';
 
-import styles from './RecentTxCard.module.css';
-
 import { AddressLink, TransactionLink } from '~/ui/InternalLink';
 
-/** @deprecated This styling is not correct, use `<Text>` to create the correctly styled components */
-export function SuiAmount({
-    amount,
-}: {
-    amount: bigint | number | string | undefined | null;
-}) {
-    const [formattedAmount, coinType] = useFormatCoin(amount, SUI_TYPE_ARG);
-
-    if (amount) {
-        const SuiSuffix = <abbr className={styles.suisuffix}>{coinType}</abbr>;
-
-        return (
-            <section>
-                <span className={styles.suiamount}>
-                    {formattedAmount}
-                    {SuiSuffix}
-                </span>
-            </section>
-        );
-    }
-
-    return <span className={styles.suiamount}>--</span>;
-}
-
 function TxTableHeader({ label }: { label: string }) {
     return <div className="pl-3">{label}</div>;
 }

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

@@ -26,7 +26,6 @@ export function CheckpointsTable({
     initialCursor,
     maxCursor,
     disablePagination,
-    refetchInterval,
 }: CheckpointsTableProps) {
     const rpc = useRpcClient();
     const [limit, setLimit] = useState(initialLimit);
@@ -52,7 +51,7 @@ export function CheckpointsTable({
             rpc.getCheckpoints({
                 limit: (cursor &&
                 maxCursor &&
-                Number(cursor) - Number(limit) < Number(maxCursor)
+                Number(cursor) - limit < Number(maxCursor)
                     ? Number(cursor) - Number(maxCursor)
                     : limit
                 ).toString(),

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

@@ -31,7 +31,7 @@ function SuiStats({
 
     return (
         <Stats postfix={symbol} {...props}>
-            {formattedAmount}
+            {formattedAmount || '--'}
         </Stats>
     );
 }

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

@@ -3,14 +3,16 @@
 import { useQuery } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
 
+import { SuiAmount } from '~/components/Table/SuiAmount';
 import { TableFooter } from '~/components/Table/TableFooter';
-import { SuiAmount, TxTableCol } from '~/components/transactions/TxCardUtils';
+import { TxTableCol } from '~/components/transactions/TxCardUtils';
 import { TxTimeType } from '~/components/tx-time/TxTimeType';
 import { useEnhancedRpcClient } from '~/hooks/useEnhancedRpc';
 import { CheckpointSequenceLink, EpochLink } from '~/ui/InternalLink';
 import { usePaginationStack } from '~/ui/Pagination';
 import { PlaceholderTable } from '~/ui/PlaceholderTable';
 import { TableCard } from '~/ui/TableCard';
+import { Text } from '~/ui/Text';
 
 interface EpochsTableProps {
     initialLimit: number;
@@ -21,7 +23,6 @@ interface EpochsTableProps {
 export function EpochsTable({
     initialLimit,
     disablePagination,
-    refetchInterval,
 }: EpochsTableProps) {
     const enhancedRpc = useEnhancedRpcClient();
     const [limit, setLimit] = useState(initialLimit);
@@ -66,7 +67,9 @@ export function EpochsTable({
                           ),
                           transactions: (
                               <TxTableCol>
-                                  {epoch.epochTotalTransactions}
+                                  <Text variant="bodySmall/medium">
+                                      {epoch.epochTotalTransactions}
+                                  </Text>
                               </TxTableCol>
                           ),
                           stakeRewards: (
@@ -95,7 +98,11 @@ export function EpochsTable({
                           ),
                           storageRevenue: (
                               <TxTableCol>
-                                  {epoch.endOfEpochInfo?.storageCharge}
+                                  <SuiAmount
+                                      amount={
+                                          epoch.endOfEpochInfo?.storageCharge
+                                      }
+                                  />
                               </TxTableCol>
                           ),
                           time: (

apps/explorer/src/pages/epochs/stats/EpochProgress.tsx

@@ -46,7 +46,7 @@ export function EpochProgress({
                             {formatDate(start)}
                         </Text>
                     </div>
-                    {!inProgress && end && (
+                    {!inProgress && end ? (
                         <div>
                             <Text
                                 variant="p4/normal"
@@ -59,7 +59,7 @@ export function EpochProgress({
                                 {formatDate(end)}
                             </Text>
                         </div>
-                    )}
+                    ) : null}
                 </div>
                 {inProgress ? (
                     <div className="space-y-1.5">

apps/explorer/src/ui/Pagination.tsx

@@ -30,7 +30,6 @@ export function useBoundedPaginationStack<Cursor = string>(
     const [stack, setStack] = useState<Cursor[]>(
         initialCursor ? [initialCursor] : []
     );
-
     return {
         cursor: stack.at(-1),
         props({
@@ -39,10 +38,7 @@ export function useBoundedPaginationStack<Cursor = string>(
         }: Partial<PaginationResponse<Cursor>> = {}): PaginationProps {
             return {
                 hasPrev: initialCursor ? stack.length > 1 : stack.length > 0,
-                hasNext:
-                    hasNextPage &&
-                    (!maxCursor ||
-                        (nextCursor ? nextCursor > maxCursor : true)),
+                hasNext: hasNextPage && Number(nextCursor) > Number(maxCursor),
                 onFirst() {
                     setStack(initialCursor ? [initialCursor] : []);
                 },