[explorer] Remove targeted builds for explorer

.github/workflows/explorer-client-prs.yml

@@ -86,10 +86,10 @@ jobs:
         uses: cypress-io/github-action@v4
         with:
           install: false
-          start: pnpm dlx concurrently --kill-others 'cargo run --bin sui-test-validator' 'pnpm dev:local'
+          start: pnpm dlx concurrently --kill-others 'cargo run --bin sui-test-validator' 'pnpm dev'
           working-directory: ./explorer/client
           spec: cypress/e2e/localnet/*
           # Wait on faucet and explorer:
-          wait-on: 'http://localhost:3000, http://localhost:9123'
+          wait-on: "http://localhost:3000, http://localhost:9123"
           # wait for 2 minutes for the server to respond
           wait-on-timeout: 120

explorer/client/README.md

@@ -14,33 +14,9 @@ $ pnpm install
 
 # How to Switch Environment
 
-## Connecting to the DevNet Remote Gateway Server
+By default, the Sui Explorer attempts to connect to a local RPC server. For more information about using a local RPC server, see [Local RPC Server & JSON-RPC API Quick Start](../../doc/src/build/json-rpc.md).
 
-The Sui Explorer frontend will use the DevNet Gateway server by default: https://gateway.devnet.sui.io:443
-
-```bash
-pnpm dev
-```
-
-## Connecting to a Local RPC Server
-
-Refer to [Local RPC Server & JSON-RPC API Quick Start](../../doc/src/build/json-rpc.md) on setting up a Local RPC Server. If we wish to locally run the website using a Local RPC Server, then run the following:
-
-```bash
-pnpm dev:local
-```
-
-Alternatively, having run `pnpm dev`, click the green button at the top of the page and select the option 'Local'.
-
-## Connecting to a Custom RPC URL
-
-First run the following:
-
-```bash
-pnpm dev
-```
-
-Then, click the green button at the top and select the option 'Custom RPC URL'. Type the Custom RPC URL into the input box that emerges.
+If you want to use the explorer with another network, you can select your preferred network in the header of the explorer.
 
 ## Connecting to the Static Data
 

explorer/client/package.json

@@ -5,14 +5,11 @@
     "scripts": {
         "dev": "vite --port 3000",
         "dev:static": "VITE_NETWORK=static vite --port 8080",
-        "dev:local": "VITE_NETWORK=local vite --port 3000",
         "test": "pnpm test:unit && pnpm test:cypress",
         "test:unit": "vitest run",
         "test:cypress": "start-server-and-test dev:static 8080 'cypress run --spec \"cypress/e2e/static/*\"'",
         "typecheck": "tsc --noEmit",
         "build": "pnpm typecheck && vite build",
-        "build:staging": "VITE_NETWORK=staging pnpm build",
-        "build:prod": "VITE_NETWORK=prod pnpm build",
         "eslint:check": "eslint --max-warnings=0 .eslintrc.js \"./src/**/*.{js,jsx,ts,tsx}\"",
         "eslint:fix": "pnpm eslint:check --fix",
         "prettier:check": "prettier -c --ignore-unknown .",

explorer/client/src/components/cookies-consent/CookiesConsent.tsx

@@ -6,7 +6,7 @@ import { useEffect } from 'react';
 const COOKIE_NAME = 'sui_explorer_cookie_consent';
 
 async function loadAndEnableAnalytics() {
-    if (process.env.NODE_ENV === 'production') {
+    if (import.meta.env.PROD) {
         await import('./analytics');
     }
 }

explorer/client/src/components/network/Network.tsx

@@ -6,11 +6,7 @@ import { useCallback, useContext, useState } from 'react';
 import { ReactComponent as DownSVG } from '../../assets/Down.svg';
 import { NetworkContext } from '../../context';
 import { Network, getEndpoint } from '../../utils/api/DefaultRpcClient';
-import {
-    IS_STATIC_ENV,
-    IS_LOCAL_ENV,
-    IS_STAGING_ENV,
-} from '../../utils/envUtil';
+import { IS_STATIC_ENV, IS_STAGING_ENV } from '../../utils/envUtil';
 
 import styles from './Network.module.css';
 
@@ -54,13 +50,6 @@ export default function NetworkSelect() {
             ? styles.active
             : styles.inactive;
 
-    if (IS_LOCAL_ENV)
-        return (
-            <div>
-                <div className={styles.networkbox}>Local</div>
-            </div>
-        );
-
     if (IS_STATIC_ENV)
         return (
             <div>

explorer/client/src/context.ts

@@ -11,8 +11,9 @@ import {
 } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { Network } from './utils/api/DefaultRpcClient';
-import { IS_LOCAL_ENV, IS_STAGING_ENV, CURRENT_ENV } from './utils/envUtil';
+import { CURRENT_ENV } from './utils/envUtil';
+
+import type { Network } from './utils/api/DefaultRpcClient';
 
 const LOCALSTORE_RPC_KEY = CURRENT_ENV + 'sui-explorer-rpc';
 const LOCALSTORE_RPC_TIME_KEY = CURRENT_ENV + 'sui-explorer-rpc-lastset';
@@ -47,11 +48,9 @@ export function useNetwork(): [
 ] {
     const [searchParams] = useSearchParams();
     const [network, setNetwork] = useState<Network | string>(() => {
-        // If running pnpm dev:local, ignore what is in storage and use Local network:
-        if (IS_LOCAL_ENV) return Network.Local;
         const storedNetwork = window.localStorage.getItem(LOCALSTORE_RPC_KEY);
         if (!storedNetwork || wasNetworkSetLongTimeAgo()) {
-            return IS_STAGING_ENV ? Network.Staging : Network.Devnet;
+            return CURRENT_ENV;
         }
         return storedNetwork;
     });

explorer/client/src/index.tsx

@@ -8,19 +8,17 @@ import ReactDOM from 'react-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import App from './app/App';
-import { CURRENT_ENV, IS_PROD_ENV, IS_STAGING_ENV } from './utils/envUtil';
+import { CURRENT_ENV } from './utils/envUtil';
 
 import './index.css';
 
-if (IS_STAGING_ENV || IS_PROD_ENV) {
+if (import.meta.env.PROD) {
     Sentry.init({
         dsn: 'https://e4251274d1b141d7ba272103fa0f8d83@o1314142.ingest.sentry.io/6564988',
         integrations: [new BrowserTracing()],
 
-        // Set tracesSampleRate to 1.0 to capture 100%
-        // of transactions for performance monitoring.
-        // TODO: adjust this to a lower value once the Explorer
-        // has more traffic
+        // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
+        // TODO: Adjust this to a lower value once the Explorer has more traffic
         tracesSampleRate: 1.0,
         environment: CURRENT_ENV,
     });

explorer/client/src/utils/api/rpcSetting.ts

@@ -3,14 +3,19 @@
 
 export enum Network {
     Local = 'Local',
+    Static = 'Static',
     Devnet = 'Devnet',
     Staging = 'Staging',
+    CI = 'CI',
 }
 
-const ENDPOINTS = {
+const ENDPOINTS: Record<Network, string> = {
     [Network.Local]: 'http://127.0.0.1:9000',
+    [Network.CI]: 'https://fullnode.devnet.sui.io:443',
     [Network.Devnet]: 'https://fullnode.devnet.sui.io:443',
     [Network.Staging]: 'https://fullnode.staging.sui.io:443',
+    // NOTE: Static is pointed to devnet, but it shouldn't actually fetch data.
+    [Network.Static]: 'https://fullnode.devnet.sui.io:443',
 };
 
 export function getEndpoint(network: Network | string): string {

explorer/client/src/utils/envUtil.ts

@@ -1,9 +1,25 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-export const IS_STATIC_ENV = import.meta.env.VITE_NETWORK === 'static';
-export const IS_LOCAL_ENV = import.meta.env.VITE_NETWORK === 'local';
-export const IS_STAGING_ENV = import.meta.env.VITE_NETWORK === 'staging';
-export const IS_PROD_ENV = import.meta.env.VITE_NETWORK === 'prod';
+import { Network } from './api/rpcSetting';
 
-export const CURRENT_ENV = import.meta.env.VITE_NETWORK;
+const HOST_TO_NETWORK: Record<string, Network> = {
+    ci: Network.CI,
+    staging: Network.Staging,
+    devnet: Network.Devnet,
+    static: Network.Static,
+};
+
+export let CURRENT_ENV: Network = Network.Local;
+if (import.meta.env.VITE_NETWORK) {
+    CURRENT_ENV = HOST_TO_NETWORK[import.meta.env.VITE_NETWORK];
+} else if (
+    typeof window !== 'undefined' &&
+    window.location.hostname.includes('.sui.io')
+) {
+    const host = window.location.hostname.split('.').at(-3) || 'devnet';
+    CURRENT_ENV = HOST_TO_NETWORK[host] || Network.Devnet;
+}
+
+export const IS_STATIC_ENV = CURRENT_ENV === Network.Static;
+export const IS_STAGING_ENV = CURRENT_ENV === Network.Staging;

explorer/client/src/utils/imageModeratorClient.ts

@@ -1,9 +1,7 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { IS_LOCAL_ENV, IS_STATIC_ENV } from './envUtil';
-
-const ENV_STUBS_IMG_CHECK = IS_STATIC_ENV || IS_LOCAL_ENV;
+const ENV_STUBS_IMG_CHECK = import.meta.env.DEV;
 const HOST = 'https://imgmod.sui.io';
 
 export type ImageCheckResponse = { ok: boolean };