[explorer] Various code cleanup (#7366)

This is some assorted code cleanup to remove old components and some CSS
modules that we don't need on the explorer. I ported like-for-like for
now, with the idea being that we'll rework a lot of these components in
the future.

apps/core/tailwind.config.js

@@ -75,8 +75,8 @@ module.exports = {
 
     extend: {
       colors: {
-        'gradient-blue-start': '#589AEA',
-        'gradient-blue-end': '#4C75A6',
+        "gradient-blue-start": "#589AEA",
+        "gradient-blue-end": "#4C75A6",
       },
       // Line-heights that are found in the design:
       lineHeight: {
@@ -132,8 +132,7 @@ module.exports = {
         1.25: "0.3125rem",
         3.75: "0.9375rem",
         4.5: "1.125rem",
-        7.5: '1.875rem',
-        50: '12.5rem',
+        50: "12.5rem",
         verticalListShort: "13.0625rem",
         verticalListLong: "35.6875rem",
       },
@@ -154,6 +153,8 @@ module.exports = {
       backgroundImage: {
         placeholderGradient01:
           "linear-gradient(165.96deg, #e6f5ff 10%, #ebecff 95%)",
+        placeholderShimmer:
+          "linear-gradient(90deg, #ecf1f4 -24.18%, rgba(237 242 245 / 40%) 73.61%, #f3f7f9 114.81%, #ecf1f4 114.82%)",
       },
       rotate: {
         135: "135deg",

apps/explorer/src/components/transaction-card/TxForID.tsx

@@ -6,7 +6,6 @@ import { useState, useEffect, useContext } from 'react';
 
 import { NetworkContext } from '../../context';
 import { DefaultRpcClient as rpc } from '../../utils/api/DefaultRpcClient';
-import ErrorResult from '../error-result/ErrorResult';
 import PaginationLogic from '../pagination/PaginationLogic';
 import {
     type TxnData,
@@ -15,6 +14,7 @@ import {
 } from './TxCardUtils';
 
 import { useRpc } from '~/hooks/useRpc';
+import { Banner } from '~/ui/Banner';
 import { TableCard } from '~/ui/TableCard';
 
 const TRUNCATE_LENGTH = 14;
@@ -100,10 +100,10 @@ function TxForID({ id, category }: { id: string; category: categoryType }) {
     }
 
     return (
-        <ErrorResult
-            id={id}
-            errorMsg="Transactions could not be extracted on the following specified ID"
-        />
+        <Banner variant="error" fullWidth>
+            Transactions could not be extracted on the following specified ID:{' '}
+            {id}
+        </Banner>
     );
 }
 

apps/explorer/src/components/validator/ValidatorMeta.tsx

@@ -36,7 +36,7 @@ export function ValidatorMeta({ validatorData }: ValidatorMetaProps) {
 
     return (
         <>
-            <div className="flex basis-full gap-5 border-r border-solid border-transparent border-r-gray-45 capitalize md:mr-7.5 md:basis-1/4">
+            <div className="md:mr-7.5 flex basis-full gap-5 border-r border-solid border-transparent border-r-gray-45 capitalize md:basis-1/4">
                 <ImageIcon
                     src={logo}
                     label={validatorName}

apps/explorer/src/pages/address-result/AddressResult.tsx

@@ -4,10 +4,10 @@
 import { useParams } from 'react-router-dom';
 
 import { ErrorBoundary } from '../../components/error-boundary/ErrorBoundary';
-import ErrorResult from '../../components/error-result/ErrorResult';
 import OwnedObjects from '../../components/ownedobjects/OwnedObjects';
 import TxForID from '../../components/transaction-card/TxForID';
 
+import { Banner } from '~/ui/Banner';
 import { PageHeader } from '~/ui/PageHeader';
 
 type DataType = {
@@ -50,7 +50,11 @@ function AddressResult() {
             </>
         );
     } else {
-        return <ErrorResult id={addressID} errorMsg="Something went wrong" />;
+        return (
+            <Banner variant="error" spacing="lg" fullWidth>
+                Something went wrong
+            </Banner>
+        );
     }
 }
 

apps/explorer/src/pages/home/Home.tsx

@@ -1,15 +1,12 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-import cl from 'clsx';
 import { lazy, Suspense } from 'react';
 
 import { ErrorBoundary } from '../../components/error-boundary/ErrorBoundary';
 import { RecentModulesCard } from '../../components/recent-packages-card/RecentPackagesCard';
 import { TopValidatorsCard } from '../../components/top-validators-card/TopValidatorsCard';
 import { LatestTxCard } from '../../components/transaction-card/RecentTxCard';
 
-import styles from './Home.module.css';
-
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '~/ui/Tabs';
 
 const NodeMap = lazy(() => import('../../components/node-map'));
@@ -21,7 +18,7 @@ function Home() {
         <div
             data-testid="home-page"
             id="home"
-            className={cl([styles.home, styles.container])}
+            className="mx-auto grid grid-cols-1 gap-2 bg-white md:grid-cols-2"
         >
             <section className="left-item mb-4 md:mb-0">
                 <ErrorBoundary>

apps/explorer/src/pages/object-result/ObjectResult.tsx

@@ -6,8 +6,6 @@ import { useEffect, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 
 import { ErrorBoundary } from '../../components/error-boundary/ErrorBoundary';
-import ErrorResult from '../../components/error-result/ErrorResult';
-import theme from '../../styles/theme.module.css';
 import {
     instanceOfDataType,
     translate,
@@ -16,6 +14,7 @@ import {
 import ObjectView from './views/ObjectView';
 
 import { useRpc } from '~/hooks/useRpc';
+import { Banner } from '~/ui/Banner';
 import { LoadingSpinner } from '~/ui/LoadingSpinner';
 
 const DATATYPE_DEFAULT: DataType = {
@@ -34,10 +33,10 @@ const DATATYPE_DEFAULT: DataType = {
 
 function Fail({ objID }: { objID: string | undefined }) {
     return (
-        <ErrorResult
-            id={objID}
-            errorMsg="Data could not be extracted on the following specified object ID"
-        />
+        <Banner variant="error" spacing="lg" fullWidth>
+            Data could not be extracted on the following specified object ID:{' '}
+            {objID}
+        </Banner>
     );
 }
 
@@ -95,11 +94,7 @@ function ObjectResultAPI({ objID }: { objID: string }) {
         return <ObjectView data={showObjectState as DataType} />;
     }
     if (showObjectState.loadState === 'pending') {
-        return (
-            <div className={theme.pending}>
-                <LoadingSpinner text="Loading data" />
-            </div>
-        );
+        return <LoadingSpinner text="Loading data" />;
     }
     if (showObjectState.loadState === 'fail') {
         return <Fail objID={objID} />;

apps/explorer/src/pages/other-details/OtherDetails.tsx

@@ -3,12 +3,10 @@
 
 import { useParams } from 'react-router-dom';
 
-import styles from './OtherDetails.module.css';
-
 function OtherDetails() {
     const { term } = useParams();
     return (
-        <div className={styles.explain}>
+        <div className="ml-[5vw] mt-[1rem] font-sans text-2xl">
             Search results for &ldquo;{term}&rdquo;
         </div>
     );

apps/explorer/src/pages/search-result/SearchResult.tsx

@@ -5,10 +5,8 @@ import { isValidTransactionDigest, isValidSuiAddress } from '@mysten/sui.js';
 import { useEffect, useState, useContext } from 'react';
 import { useParams } from 'react-router-dom';
 
-import ErrorResult from '../../components/error-result/ErrorResult';
 import Longtext from '../../components/longtext/Longtext';
 import { NetworkContext } from '../../context';
-import theme from '../../styles/theme.module.css';
 import {
     DefaultRpcClient as rpc,
     type Network,
@@ -17,6 +15,9 @@ import { isGenesisLibAddress } from '../../utils/api/searchUtil';
 
 import styles from './SearchResult.module.css';
 
+import { Banner } from '~/ui/Banner';
+import { LoadingSpinner } from '~/ui/LoadingSpinner';
+
 type SearchDataType = {
     resultdata: any[];
     loadState?: 'loaded' | 'pending' | 'fail';
@@ -106,11 +107,7 @@ function SearchResult() {
     }, [id, network]);
 
     if (resultData.loadState === 'pending') {
-        return (
-            <div className={theme.textresults}>
-                <div className={styles.textcenter}>Loading...</div>
-            </div>
-        );
+        return <LoadingSpinner text="Loading..." />;
     }
 
     if (
@@ -119,14 +116,11 @@ function SearchResult() {
         !id
     ) {
         return (
-            <ErrorResult
-                id={id}
-                errorMsg={
-                    id
-                        ? 'ID not a valid string'
-                        : 'Data on the following query could not be found'
-                }
-            />
+            <Banner variant="error" spacing="lg" fullWidth>
+                {id
+                    ? 'ID not a valid string'
+                    : `Data on the following query could not be found: ${id}`}
+            </Banner>
         );
     }
 

apps/explorer/src/pages/searcherror/SearchError.tsx

@@ -3,13 +3,13 @@
 
 import { useParams } from 'react-router-dom';
 
-import ErrorResult from '../../components/error-result/ErrorResult';
+import { Banner } from '~/ui/Banner';
 
 const addressErrEnd =
     'must be a hex string encoding 20 bytes, with or without the "0x" prefix.';
 
 function SearchError() {
-    const { category, id } = useParams();
+    const { category } = useParams();
 
     let msg = 'unknown';
     switch (category) {
@@ -31,7 +31,11 @@ function SearchError() {
             msg = 'Data on the following query could not be found';
     }
 
-    return <ErrorResult id={id} errorMsg={msg} />;
+    return (
+        <Banner variant="error" spacing="lg" fullWidth>
+            {msg}
+        </Banner>
+    );
 }
 
 export default SearchError;

apps/explorer/src/pages/transaction-result/TransactionResult.tsx

@@ -3,24 +3,21 @@
 
 import { useLocation, useParams } from 'react-router-dom';
 
-import ErrorResult from '../../components/error-result/ErrorResult';
-import theme from '../../styles/theme.module.css';
 import TransactionView from './TransactionView';
 
 import type { SuiTransactionResponse } from '@mysten/sui.js';
 
 import { useGetTransaction } from '~/hooks/useGetTransaction';
+import { Banner } from '~/ui/Banner';
+import { LoadingSpinner } from '~/ui/LoadingSpinner';
 
 function FailedToGetTxResults({ id }: { id: string }) {
     return (
-        <ErrorResult
-            id={id}
-            errorMsg={
-                !id
-                    ? "Can't search for a transaction without a digest"
-                    : 'Data could not be extracted for the following specified transaction ID'
-            }
-        />
+        <Banner variant="error" spacing="lg" fullWidth>
+            {!id
+                ? "Can't search for a transaction without a digest"
+                : `Data could not be extracted for the following specified transaction ID: ${id}`}
+        </Banner>
     );
 }
 
@@ -29,11 +26,7 @@ function TransactionResultAPI({ id }: { id: string }) {
 
     // TODO update Loading screen
     if (isLoading) {
-        return (
-            <div className={theme.textresults}>
-                <div>Loading...</div>
-            </div>
-        );
+        return <LoadingSpinner text="Loading..." />;
     }
 
     if (isError || !data) {
@@ -64,7 +57,13 @@ function TransactionResult() {
         return <TransactionResultAPI id={id} />;
     }
 
-    return <ErrorResult id={id} errorMsg="ID not a valid string" />;
+    return (
+        <Banner variant="error" spacing="lg" fullWidth>
+            ID &ldquo;
+            {id}
+            &rdquo; is not a valid string
+        </Banner>
+    );
 }
 
 export default TransactionResult;

apps/explorer/src/pages/transactions/Transactions.tsx

@@ -4,8 +4,6 @@
 import { ErrorBoundary } from '../../components/error-boundary/ErrorBoundary';
 import { LatestTxCard } from '../../components/transaction-card/RecentTxCard';
 
-import styles from './Transactions.module.css';
-
 const TXN_PER_PAGE = 20;
 const TRUNCATE_LENGTH = 45;
 
@@ -14,7 +12,7 @@ function Transactions() {
         <div
             data-testid="transaction-page"
             id="transaction"
-            className={styles.container}
+            className="mx-auto"
         >
             <ErrorBoundary>
                 <LatestTxCard