Explorer deprecation

README.md

@@ -16,6 +16,12 @@
 
 ---
 
+## ⚠️ Deprecated Repository
+
+**This repository is no longer maintained and has been deprecated in favor of [explorer (rebased)](https://github.com/iotaledger/iota/tree/develop/apps/explorer).**
+
+Please refer to the new repository for the latest updates, bug fixes, and features.
+
 ## About
 
 This repository is where the IOTA Foundation hosts the open-source code for the [Tangle Explorer website](https://explorer.iota.org/).

client/src/app/App.scss

@@ -18,6 +18,17 @@
         @include desktop-down {
             margin-top: calc(2 * #{$navbar-height-mobile});
         }
+
+        .disclaimer-banner {
+            margin: 30px;
+            padding: 20px;
+            background-color: $iota2-teal-500;
+
+            p {
+                color: var(--body-color);
+                font-size: 16px;
+            }
+        }
     }
 
     .maintenance {

client/src/app/App.tsx

@@ -15,7 +15,7 @@ import { scrollToTop } from "~helpers/pageUtils";
 import { useWasmLoader } from "~helpers/hooks/useWasmLoader";
 import { useInitServicesLoader } from "~helpers/hooks/useInitServicesLoader";
 import { INetwork } from "~models/config/INetwork";
-import { MAINNET } from "~models/config/networkType";
+import { MAINNET, SHIMMER } from "~models/config/networkType";
 import { IOTA_UI, IOTA2_UI, SHIMMER_UI } from "~models/config/uiTheme";
 import { NOVA, STARDUST } from "~models/config/protocolVersion";
 import { NetworkService } from "~services/networkService";
@@ -56,7 +56,9 @@ const App: React.FC<RouteComponentProps<AppRouteProps>> = ({
 
     const identityResolverEnabled = protocolVersion !== STARDUST && (networkConfig?.identityResolverEnabled ?? true);
     const currentNetworkName = networkConfig?.network;
-    const isShimmer = isShimmerUiTheme(networkConfig?.uiTheme);
+    const isShimmerTheme = isShimmerUiTheme(networkConfig?.uiTheme);
+    const isShimmer = networkConfig && networkConfig.network === SHIMMER;
+    const isStardust = networkConfig && networkConfig.protocolVersion === STARDUST;
     const nodeService = ServiceFactory.get<NodeInfoServiceStardust>("node-info-stardust");
     const nodeInfo = networkConfig?.network ? nodeService.get(networkConfig?.network) : null;
     const withNetworkContext = networkContextWrapper(currentNetworkName, nodeInfo, networkConfig?.uiTheme);
@@ -90,14 +92,14 @@ const App: React.FC<RouteComponentProps<AppRouteProps>> = ({
         );
     }
 
-    const routes = buildAppRoutes(networkConfig?.protocolVersion ?? "", withNetworkContext);
+    const routes = buildAppRoutes(networkConfig?.protocolVersion ?? "", networkConfig?.network ?? "", withNetworkContext);
     const pages = getPages(networkConfig, networks);
 
     const metaLabel = buildMetaLabel(currentNetworkName);
-    const faviconHelmet = getFaviconHelmet(isShimmer);
+    const faviconHelmet = getFaviconHelmet(isShimmerTheme);
 
     return (
-        <div className={classNames("app", { shimmer: isShimmer })}>
+        <div className={classNames("app", { shimmer: isShimmerTheme })}>
             <Helmet>
                 <meta name="apple-mobile-web-app-title" content={metaLabel} />
                 <meta name="application-name" content={metaLabel} />
@@ -122,6 +124,26 @@ const App: React.FC<RouteComponentProps<AppRouteProps>> = ({
                                 <div className="maintenance-inner">The network provided does not exist, please check the url.</div>
                             </div>
                         )}
+                        {isStardust && !isShimmer && (
+                            <div className="card disclaimer-banner">
+                                <div
+                                    className="card--value card--value__no-margin description col row middle"
+                                    style={{ whiteSpace: "nowrap" }}
+                                >
+                                    <p>
+                                        <span>This network is superseded by </span>
+                                        <a href="https://explorer.iota.org" target="_blank" rel="noopener noreferrer">
+                                            Mainnet (rebased)
+                                        </a>
+                                        .
+                                    </p>
+                                    <p>
+                                        {/* TODO: Add exact Milestone */}
+                                        <span>It can only be used to browse historic data before milestone XYZ</span>
+                                    </p>
+                                </div>
+                            </div>
+                        )}
                         {networkConfig && routes}
                     </React.Fragment>
                 ) : (
@@ -130,7 +152,7 @@ const App: React.FC<RouteComponentProps<AppRouteProps>> = ({
                     </div>
                 )}
             </div>
-            {isShimmer ? (
+            {isShimmerTheme ? (
                 <ShimmerFooter dynamic={getFooterItems(currentNetworkName ?? "", networks, identityResolverEnabled)} />
             ) : (
                 <Footer dynamic={getFooterItems(currentNetworkName ?? "", networks, identityResolverEnabled)} />

client/src/app/AppUtils.tsx

@@ -43,11 +43,10 @@ export const networkContextWrapper = (currentNetwork: string | undefined, nodeIn
 export const getPages = (currentNetwork: INetwork | undefined, networks: INetwork[]): NavigationRoute[] => {
     const hasNetworks = networks.length > 0 && currentNetwork !== undefined;
 
-    const { network, protocolVersion, hasStatisticsSupport } = currentNetwork ?? { network: "", hasStatisticsSupport: false };
+    const { network, protocolVersion } = currentNetwork ?? { network: "", hasStatisticsSupport: false };
 
     const isStardust = hasNetworks && currentNetwork.protocolVersion === STARDUST;
-    const isNova = hasNetworks && currentNetwork.protocolVersion === NOVA;
-    const isStardustOrNova = isStardust || isNova;
+    const isShimmer = hasNetworks && currentNetwork.network === SHIMMER;
 
     const routes: NavigationRoute[] = [
         {
@@ -58,12 +57,7 @@ export const getPages = (currentNetwork: INetwork | undefined, networks: INetwor
         {
             label: "Visualizer",
             url: `/${network}/visualizer/`,
-            disabled: !hasNetworks || !isStardustOrNova,
-        },
-        {
-            label: "Statistics",
-            url: `/${network}/statistics/`,
-            disabled: !hasNetworks || !hasStatisticsSupport || !isStardustOrNova,
+            disabled: !hasNetworks || !isShimmer,
         },
         {
             label: "Validators",
@@ -124,9 +118,7 @@ export const getFooterItems = (currentNetwork: string, networks: INetwork[], ide
     if (networks.length > 0) {
         let footerArray = networks.filter((network) => network.isEnabled).map((n) => ({ label: n.label, url: n.network.toString() }));
 
-        footerArray = footerArray
-            .concat({ label: "Streams v0", url: `${currentNetwork}/streams/0/` })
-            .concat({ label: "Visualizer", url: `${currentNetwork}/visualizer/` });
+        footerArray = footerArray.concat({ label: "Streams v0", url: `${currentNetwork}/streams/0/` });
 
         if (identityResolverEnabled) {
             footerArray.push({ label: "Identity Resolver", url: `${currentNetwork}/identity-resolver/` });

client/src/app/routes.tsx

@@ -9,7 +9,6 @@ import ChrysalisLanding from "./routes/chrysalis/Landing";
 import ChrysalisMessage from "./routes/chrysalis/Message";
 import { MessageProps as ChrysalisMessageProps } from "./routes/chrysalis/MessageProps";
 import ChrysalisSearch from "./routes/chrysalis/Search";
-import ChrysalisVisualizer from "./routes/chrysalis/Visualizer";
 import IdentityResolver from "./routes/IdentityResolver";
 import { IdentityResolverProps } from "./routes/IdentityResolverProps";
 import { LandingRouteProps } from "./routes/LandingRouteProps";
@@ -23,7 +22,6 @@ import LegacyTag from "./routes/legacy/Tag";
 import { TagRouteProps as LegacyTagRouteProps } from "./routes/legacy/TagRouteProps";
 import LegacyTransaction from "./routes/legacy/Transaction";
 import { TransactionRouteProps as LegacyTransactionRouteProps } from "./routes/legacy/TransactionRouteProps";
-import LegacyVisualizer from "./routes/legacy/Visualizer";
 import { SearchRouteProps } from "./routes/SearchRouteProps";
 import StardustAddressPage from "./routes/stardust/AddressPage";
 import NovaAddressPage from "./routes/nova/AddressPage";
@@ -44,16 +42,13 @@ import NovaSearch from "./routes/nova/Search";
 import NovaEpochPage from "./routes/nova/EpochPage";
 import NovaSlotPage from "./routes/nova/SlotPage";
 import StardustSearch from "./routes/stardust/Search";
-import StardustStatisticsPage from "./routes/stardust/statistics/StatisticsPage";
-import NovaStatisticsPage from "./routes/nova/statistics/StatisticsPage";
 import StardustTransactionPage from "./routes/stardust/TransactionPage";
 import { Visualizer as StardustVisualizer } from "./routes/stardust/Visualizer";
-import Visualizer from "./routes/nova/Visualizer";
 import StreamsV0 from "./routes/StreamsV0";
 import { StreamsV0RouteProps } from "./routes/StreamsV0RouteProps";
-import { VisualizerRouteProps } from "./routes/VisualizerRouteProps";
 import ValidatorsPage from "./routes/nova/ValidatorsPage";
 import { CHRYSALIS, LEGACY, NOVA, STARDUST } from "~models/config/protocolVersion";
+import { SHIMMER } from "~/models/config/networkType";
 
 /**
  * Generator for keys in routes. Gives an incremented value on every next().
@@ -67,7 +62,11 @@ function* keyGenerator(count: number): IterableIterator<number> {
     }
 }
 
-const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedComponent: React.ReactNode) => JSX.Element | null) => {
+const buildAppRoutes = (
+    protocolVersion: string,
+    networkName: string,
+    withNetworkContext: (wrappedComponent: React.ReactNode) => JSX.Element | null,
+) => {
     const keys = keyGenerator(0);
 
     const commonRoutes = [
@@ -92,18 +91,15 @@ const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedCom
         commonRoutes.push(IdentiyResolverRoute);
     }
 
+    const isShimmer = networkName === SHIMMER;
+
     const legacyRoutes = [
         <Route
             exact
             path="/:network"
             key={keys.next().value}
             component={(props: RouteComponentProps<LandingRouteProps>) => <LegacyLanding {...props} />}
         />,
-        <Route
-            path="/:network/visualizer/"
-            key={keys.next().value}
-            component={(props: RouteComponentProps<VisualizerRouteProps>) => <LegacyVisualizer {...props} />}
-        />,
         <Route
             path="/:network/search/:query?"
             key={keys.next().value}
@@ -143,11 +139,6 @@ const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedCom
             key={keys.next().value}
             component={(props: RouteComponentProps<SearchRouteProps>) => <ChrysalisSearch {...props} />}
         />,
-        <Route
-            path="/:network/visualizer/"
-            key={keys.next().value}
-            component={(props: RouteComponentProps<VisualizerRouteProps>) => <ChrysalisVisualizer {...props} />}
-        />,
         <Route
             path="/:network/message/:messageId"
             key={keys.next().value}
@@ -167,7 +158,6 @@ const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedCom
 
     const stardustRoutes = [
         <Route exact path="/:network" key={keys.next().value} component={StardustLanding} />,
-        <Route path="/:network/visualizer/" key={keys.next().value} component={StardustVisualizer} />,
         <Route path="/:network/search/:query?" key={keys.next().value} component={StardustSearch} />,
         <Route path="/:network/addr/:address" key={keys.next().value} component={StardustAddressPage} />,
         <Route path="/:network/nft/:nftId" key={keys.next().value} component={NftRedirectRouteStardust} />,
@@ -176,13 +166,15 @@ const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedCom
         <Route path="/:network/output/:outputId" key={keys.next().value} component={StardustOutputPage} />,
         <Route path="/:network/outputs" key={keys.next().value} component={StardustOutputList} />,
         <Route path="/:network/foundry/:foundryId" key={keys.next().value} component={StardustFoundry} />,
-        <Route path="/:network/statistics" key={keys.next().value} component={StardustStatisticsPage} />,
     ];
 
+    if (isShimmer) {
+        stardustRoutes.push(<Route path="/:network/visualizer/" key={keys.next().value} component={StardustVisualizer} />);
+    }
+
     const novaRoutes = [
         <Route exact path="/:network" key={keys.next().value} component={NovaLanding} />,
         <Route path="/:network/addr/:address" key={keys.next().value} component={NovaAddressPage} />,
-        <Route path="/:network/visualizer/" key={keys.next().value} component={Visualizer} />,
         <Route path="/:network/block/:blockId" key={keys.next().value} component={NovaBlockPage} />,
         <Route path="/:network/output/:outputId" key={keys.next().value} component={NovaOutputPage} />,
         <Route path="/:network/search/:query?" key={keys.next().value} component={NovaSearch} />,
@@ -191,7 +183,6 @@ const buildAppRoutes = (protocolVersion: string, withNetworkContext: (wrappedCom
         <Route path="/:network/transaction/:transactionId" key={keys.next().value} component={NovaTransactionPage} />,
         <Route path="/:network/foundry/:foundryId" key={keys.next().value} component={NovaFoundryPage} />,
         <Route path="/:network/nft/:nftId" key={keys.next().value} component={NftRedirectRouteNova} />,
-        <Route path="/:network/statistics" key={keys.next().value} component={NovaStatisticsPage} />,
         <Route path="/:network/validators" key={keys.next().value} component={ValidatorsPage} />,
         <Route path="/:network/outputs" key={keys.next().value} component={NovaOutputsPage} />,
     ];

client/src/app/routes/stardust/landing/Landing.tsx

@@ -12,6 +12,7 @@ import { useNetworkStats } from "~helpers/stardust/hooks/useNetworkStats";
 import { isShimmerUiTheme } from "~helpers/networkHelper";
 import NetworkContext from "../../../context/NetworkContext";
 import { LandingRouteProps } from "../../LandingRouteProps";
+import { SHIMMER } from "~/models/config/networkType";
 import "./Landing.scss";
 
 export const Landing: React.FC<RouteComponentProps<LandingRouteProps>> = ({
@@ -26,11 +27,12 @@ export const Landing: React.FC<RouteComponentProps<LandingRouteProps>> = ({
     const [networkAnalytics] = useChronicleAnalytics(network);
     const [price, marketCap] = useCurrencyService(network === "mainnet");
 
-    const isShimmer = isShimmerUiTheme(networkConfig?.uiTheme);
+    const isShimmerTheme = isShimmerUiTheme(networkConfig?.uiTheme);
+    const isShimmer = networkConfig && networkConfig.network === SHIMMER;
 
     return (
         <div className="landing-stardust">
-            <div className={classNames("header-wrapper", { shimmer: isShimmer }, { iota: !isShimmer })}>
+            <div className={classNames("header-wrapper", { shimmer: isShimmerTheme }, { iota: !isShimmerTheme })}>
                 <div className="inner">
                     <div className="header">
                         <div className="header--title">
@@ -49,45 +51,56 @@ export const Landing: React.FC<RouteComponentProps<LandingRouteProps>> = ({
                         />
                     </div>
                 </div>
-                <AnalyticStats analytics={networkAnalytics} circulatingSupply={networkConfig.circulatingSupply} tokenInfo={tokenInfo} />
+                {isShimmer && (
+                    <AnalyticStats analytics={networkAnalytics} circulatingSupply={networkConfig.circulatingSupply} tokenInfo={tokenInfo} />
+                )}
             </div>
-            <div className={classNames("wrapper feeds-wrapper")}>
-                <div className="inner">
-                    <div className="feeds-section">
-                        <div className="row wrap feeds">
-                            <div className="feed section">
-                                <MilestoneFeed
-                                    networkConfig={networkConfig}
-                                    milestones={milestones}
-                                    latestMilestoneIndex={latestMilestoneIndex ?? undefined}
-                                />
-                            </div>
-                        </div>
-                        <div className="card margin-t-m">
-                            <div className="card--content description">{networkConfig.description}</div>
-                            {networkConfig.faucet && (
-                                <div className="card--content faucet">
-                                    <span>
-                                        Get tokens from the{" "}
-                                        <a className="data-link link" href={networkConfig.faucet} target="_blank" rel="noopener noreferrer">
-                                            Faucet
-                                        </a>
-                                    </span>
+            {isShimmer && (
+                <div className={classNames("wrapper feeds-wrapper")}>
+                    <div className="inner">
+                        <div className="feeds-section">
+                            {isShimmer && (
+                                <div className="row wrap feeds">
+                                    <div className="feed section">
+                                        <MilestoneFeed
+                                            networkConfig={networkConfig}
+                                            milestones={milestones}
+                                            latestMilestoneIndex={latestMilestoneIndex ?? undefined}
+                                        />
+                                    </div>
                                 </div>
                             )}
-                        </div>
-                        {!networkConfig.isEnabled && (
                             <div className="card margin-t-m">
-                                <div className="card--content description">
-                                    {networkConfig.isEnabled === undefined
-                                        ? "This network is not recognised."
-                                        : "This network is currently disabled in explorer."}
-                                </div>
+                                <div className="card--content description">{networkConfig.description}</div>
+                                {networkConfig.faucet && (
+                                    <div className="card--content faucet">
+                                        <span>
+                                            Get tokens from the{" "}
+                                            <a
+                                                className="data-link link"
+                                                href={networkConfig.faucet}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                            >
+                                                Faucet
+                                            </a>
+                                        </span>
+                                    </div>
+                                )}
                             </div>
-                        )}
+                            {!networkConfig.isEnabled && (
+                                <div className="card margin-t-m">
+                                    <div className="card--content description">
+                                        {networkConfig.isEnabled === undefined
+                                            ? "This network is not recognised."
+                                            : "This network is currently disabled in explorer."}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
                     </div>
                 </div>
-            </div>
+            )}
         </div>
     );
 };